Multi line image caption (#4324)

superdesk · Sep 8, 2023 · 41c1f70 · 41c1f70
1 parent 3cc689b
commit 41c1f70
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/scripts/core/editor3/components/media/MediaBlock.tsx b/scripts/core/editor3/components/media/MediaBlock.tsx
@@ -292,6 +292,7 @@ export class MediaBlockComponent extends React.Component<any, any> {
                     <PlainTextEditor
                         classes="image-block__description"
                         spellcheck={true}
+                        multiLine={true}
                         placeholder={gettext('Caption')}
                         onFocus={setLocked}
                         value={data.description_text}

diff --git a/scripts/core/ui/components/PlainTextEditor/PlainTextEditor.tsx b/scripts/core/ui/components/PlainTextEditor/PlainTextEditor.tsx
@@ -28,6 +28,9 @@ export interface IProps {
     placeholder?: string;
     onFocus?: () => void;
     disabled?: boolean;
+
+    // Defaults to false.
+    multiLine?: boolean;
 }
 
 interface IState {
@@ -51,15 +54,17 @@ function updateStateWithValue(value: string, editorState: EditorState) {
 }
 
 export class PlainTextEditor extends React.Component<IProps, IState> {
-    spellcheckerTimeout?: number;
-    selection: SelectionState;
+    private spellcheckerTimeout?: number;
+    private selection: SelectionState;
+    private lastComputedValue: string;
 
     constructor(props) {
         super(props);
+        this.lastComputedValue = props.value?.toString() || '';
 
         this.state = {
             editorState: EditorState.createWithContent(
-                ContentState.createFromText(props.value?.toString() || ''),
+                ContentState.createFromText(this.lastComputedValue),
             ),
             hasFocus: false,
         };
@@ -120,7 +125,9 @@ export class PlainTextEditor extends React.Component<IProps, IState> {
      * This version works fine and we can still handle our own selection state
      * */
     UNSAFE_componentWillReceiveProps(props: IProps) {
-        this.setState({editorState: updateStateWithValue(props.value || '', this.state.editorState)});
+        if (this.lastComputedValue !== props.value) {
+            this.setState({editorState: updateStateWithValue(props.value || '', this.state.editorState)});
+        }
     }
 
     handleEditorChange(editorState: EditorState) {
@@ -130,6 +137,7 @@ export class PlainTextEditor extends React.Component<IProps, IState> {
         ) {
             const value = editorState.getCurrentContent().getPlainText();
 
+            this.lastComputedValue = value;
             this.props.onChange(value, this.props.onChangeData);
         }
 
@@ -153,7 +161,7 @@ export class PlainTextEditor extends React.Component<IProps, IState> {
     }
 
     handleKeyCommand(command: DraftEditorCommand): DraftHandleValue {
-        if (command === 'split-block') {
+        if (command === 'split-block' && this.props.multiLine !== true) {
             return 'handled'; // disable Enter
         }