Fix draggable blocks and style pull quote preview (#4285)

superdesk · Jul 5, 2023 · 36e6a58 · 36e6a58
1 parent 21dc6e7
commit 36e6a58
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -119,7 +119,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "3.0.30",
+    "superdesk-ui-framework": "^3.0.39",
     "ts-loader": "3.5.0",
     "tslint": "5.11.0",
     "typescript": "~4.9.5",

diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx
@@ -6,6 +6,7 @@ import {
     getEditor3RichFormattingOptions,
 } from '../directives/ContentProfileSchemaEditor';
 import {IArticleField} from 'superdesk-api';
+import {gettext} from 'core/utils';
 
 interface IProps {
     value: Array<string> | null;
@@ -46,9 +47,9 @@ export class FormattingOptionsTreeSelect extends React.Component<IProps> {
                 value={values}
                 allowMultiple
                 fullWidth
+                label={gettext('Formatting options')}
                 labelHidden
                 inlineLabel
-                width="100%"
             />
         );
     }

diff --git a/scripts/core/editor3/components/Editor3Component.tsx b/scripts/core/editor3/components/Editor3Component.tsx
@@ -521,6 +521,7 @@ export class Editor3Component extends React.Component<IProps, IState> {
         // eslint-disable-next-line react/no-find-dom-node
         this.editorNode.current = this.editor === null ?
             undefined :
+            // eslint-disable-next-line react/no-find-dom-node
             ReactDOM.findDOMNode(this.editor) as HTMLDivElement;
     }
 

diff --git a/scripts/core/editor3/components/media/dragable-editor3-block.tsx b/scripts/core/editor3/components/media/dragable-editor3-block.tsx
@@ -2,41 +2,75 @@ import React from 'react';
 import {ContentBlock} from 'draft-js';
 import {EDITOR_BLOCK_TYPE} from 'core/editor3/constants';
 import {connect} from 'react-redux';
-import {Spacer} from 'core/ui/components/SubNav/Spacer';
+import {DragHandle} from 'superdesk-ui-framework/react';
 
 interface IProps {
     block: ContentBlock;
     readOnly?: boolean; // connected
     children: React.ReactNode;
 }
 
-class DragableEditor3BlockComponent extends React.PureComponent<IProps> {
+interface IState {
+    displayHandle: boolean;
+}
+
+class DragableEditor3BlockComponent extends React.PureComponent<IProps, IState> {
+    timeoutId: number;
     constructor(props: IProps) {
         super(props);
 
         this.onDragStart = this.onDragStart.bind(this);
+        this.state = {
+            displayHandle: false,
+        };
     }
+
     onDragStart(event) {
         event.dataTransfer.setData(EDITOR_BLOCK_TYPE, this.props.block.getKey());
     }
+
     render() {
         return (
             <div
                 style={{
                     display: 'flex',
                     flexDirection: 'row',
-                    gap: 24,
+                    gap: 4,
+                }}
+                onMouseEnter={() => {
+                    this.setState({
+                        displayHandle: true,
+                    });
+                }}
+                onMouseLeave={() => {
+                    this.timeoutId = window.setTimeout(() => {
+                        this.setState({
+                            displayHandle: false,
+                        });
+                    }, 3000);
                 }}
             >
                 <div
-                    style={{
-                        backgroundColor: 'red',
-                        height: '100px',
-                        width: '10px',
-                    }}
+                    className={this.state.displayHandle ? 'draggable-block-handle' : 'draggable-block-handle-hide'}
                     draggable={this.props.readOnly !== true}
                     onDragStart={this.onDragStart}
-                />
+                    onMouseOver={() => {
+                        this.setState({
+                            displayHandle: true,
+                        }, () => {
+                            window.clearTimeout(this.timeoutId);
+                        });
+                    }}
+                    onMouseEnter={() => {
+                        this.setState({
+                            displayHandle: true,
+                        }, () => {
+                            window.clearTimeout(this.timeoutId);
+                        });
+                    }}
+                >
+                    <DragHandle />
+                </div>
                 {this.props.children}
             </div>
         );

diff --git a/scripts/core/editor3/html/to-html/AtomicBlockParser.ts b/scripts/core/editor3/html/to-html/AtomicBlockParser.ts
@@ -200,7 +200,7 @@ export class AtomicBlockParser {
         }
 
         const {cells} = data;
-        let html = '<div className="multi-line-quote">';
+        let html = '<div class="multi-line-quote">';
         const cellContentState = cells[0]?.[0] != null
             ? convertFromRaw(cells[0][0])
             : ContentState.createFromText('');