feat(*): add drag and drop for images

Signed-off-by: Diana Lease <[email protected]>

Author: DianaLease

packages/ui-contract-editor/src/lib/ContractEditor/index.js

@@ -138,16 +138,19 @@ const ContractEditor = (props) => {
   };
 
   const onDragOver = (editor, event) => {
-    event.preventDefault();
+    event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
   };
 
+  // return true if should continue through to next handler, else return false
   const onDrop = (editor, event) => {
     event.preventDefault();
+    const targetRange = ReactEditor.findEventRange(editor, event);
+    const [targetIsClause] = Editor.nodes(editor, { match: n => n.type === 'clause', at: targetRange });
+    if (targetIsClause) return false; // do not allow dropping inside of a clause
     const sourceRange = JSON.parse(event.dataTransfer.getData('text'));
     const [clauseNode] = Editor.nodes(editor, { match: n => n.type === 'clause', at: sourceRange });
-    if (!clauseNode) return; // only allow dropping of clause nodes
-    const targetRange = ReactEditor.findEventRange(editor, event);
+    if (!clauseNode) return true; // continue to next handler if not a clause
     const node = ReactEditor.toSlateNode(editor, event.target);
     const path = ReactEditor.findPath(editor, node);
 
@@ -180,6 +183,7 @@ const ContractEditor = (props) => {
     Transforms.collapse(editor, { edge });
     Transforms.removeNodes(editor, { at: sourceRange.anchor.path, match: n => n.type === 'clause' });
     Transforms.insertNodes(editor, clauseNode[0]);
+    return false;
   };
 
   return (
@@ -203,6 +207,7 @@ const ContractEditor = (props) => {
   );
 };
 
+
 /**
  * The property types for this component
  */

packages/ui-markdown-editor/src/lib/index.js

@@ -53,7 +53,7 @@ export const MarkdownEditor = (props) => {
   const renderElement = useCallback((slateProps) => {
     const elementProps = { ...slateProps, customElements: props.customElements, editor };
     return (<Element {...elementProps} />);
-  }, [props.customElements]);
+  }, [props.customElements, editor]);
 
   const hotkeyActions = {
     mark: code => toggleMark(editor, code),
@@ -137,6 +137,34 @@ export const MarkdownEditor = (props) => {
     }
   };
 
+  const handleDragStart = (event) => {
+    event.stopPropagation();
+    if (props.onDragStart) {
+      props.onDragStart(editor, event);
+    }
+    const node = ReactEditor.toSlateNode(editor, event.target);
+    const path = ReactEditor.findPath(editor, node);
+    const range = Editor.range(editor, path);
+    event.dataTransfer.setData('text', JSON.stringify(range));
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    if (props.onDrop) {
+      const shouldContinue = props.onDrop(editor, event);
+      if (!shouldContinue) return;
+    }
+    const sourceRange = JSON.parse(event.dataTransfer.getData('text'));
+    const [imageNode] = Editor.nodes(editor, { match: n => n.type === 'image', at: sourceRange });
+    const targetRange = ReactEditor.findEventRange(editor, event);
+    if (imageNode) {
+      Transforms.select(editor, targetRange);
+      Transforms.collapse(editor);
+      Transforms.removeNodes(editor, { at: sourceRange, match: n => n.type === 'image' });
+      Transforms.insertNodes(editor, imageNode[0]);
+    }
+  };
+
   return (
     <Slate editor={editor} value={props.value} onChange={onChange}>
       { !props.readOnly
@@ -159,9 +187,9 @@ export const MarkdownEditor = (props) => {
         onDOMBeforeInput={onBeforeInput}
         onCopy={handleCopyOrCut}
         onCut={event => handleCopyOrCut(event, true)}
-        onDragStart={event => props.onDragStart ? props.onDragStart(editor, event) : null}
+        onDragStart={handleDragStart}
         onDragOver={event => props.onDragOver ? props.onDragOver(editor, event) : null}
-        onDrop={event => props.onDrop ? props.onDrop(editor, event) : null}
+        onDrop={handleDrop}
       />
     </Slate>
   );

packages/ui-markdown-editor/src/lib/plugins/withImages.js

@@ -15,7 +15,6 @@ import { POPUP_STYLE } from '../utilities/constants';
 import Button from '../components/Button';
 
 const StyledImage = styled.img`
-  display: block;
   max-width: 100%;
   max-height: 20em;
   box-shadow: ${props => (props.shadow ? '0 0 0 3px #B4D5FF' : 'none')};