correct handling of image vs. figure on drop

rstudio · Mar 25, 2020 · 7bbe4d4 · 7bbe4d4
1 parent cca71e3
commit 7bbe4d4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/gwt/panmirror/src/editor/src/api/selection.ts b/src/gwt/panmirror/src/editor/src/api/selection.ts
@@ -32,3 +32,9 @@ export function selectionIsBodyTopLevel(selection: Selection) {
 export function selectionIsImageNode(schema: Schema, selection: Selection) {
   return selection instanceof NodeSelection && [schema.nodes.image, schema.nodes.figure].includes(selection.node.type);
 }
+
+export function selectionIsEmptyParagraph(schema: Schema, selection: Selection) {
+  const { $head } = selection;
+  return $head.parent.type === schema.nodes.paragraph && $head.parent.childCount === 0;
+}
+
diff --git a/src/gwt/panmirror/src/editor/src/nodes/image/image-events.ts b/src/gwt/panmirror/src/editor/src/nodes/image/image-events.ts
@@ -15,8 +15,9 @@
 
 import { NodeType } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
+import { findParentNodeClosestToPos } from 'prosemirror-utils';
 
-export function imageDrop(nodeType: NodeType) {
+export function imageDrop() {
   return (view: EditorView, event: Event) => {
     // alias to drag event so typescript knows about event.dataTransfer
     const dragEvent = event as DragEvent;
@@ -36,7 +37,7 @@ export function imageDrop(nodeType: NodeType) {
     }
 
     // see if this is a drag of image uris
-    const uriList = dragEvent.dataTransfer.getData('text/uri-list');
+    let uriList = dragEvent.dataTransfer.getData('text/uri-list');
     const html = dragEvent.dataTransfer.getData('text/html');
     if (!uriList || !html) {
       return false;
@@ -47,12 +48,24 @@ export function imageDrop(nodeType: NodeType) {
     const match = regex.exec(html);
     if (!match) {
       return false;
+    } else {
+      uriList = match[1];
     }
 
     // indicate that we can handle this drop
     event.preventDefault();
 
-    // insert the images
+    // see whether this is a figure or image drop (image if it's immediate parent is a text node)
+    const schema = view.state.schema;
+    let nodeType = schema.nodes.image;
+
+
+    const dropNode = findParentNodeClosestToPos(view.state.doc.resolve(coordinates.pos), () => true);
+    if (!dropNode || !dropNode.node.inlineContent) {
+      nodeType = schema.nodes.figure;
+    }
+
+    // insert the images   
     uriList.split('\r?\n').forEach(src => {
       const node = nodeType.create({ src });
       const transaction = view.state.tr.insert(coordinates.pos, node);

diff --git a/src/gwt/panmirror/src/editor/src/nodes/image/image.ts b/src/gwt/panmirror/src/editor/src/nodes/image/image.ts
@@ -20,7 +20,7 @@ import { EditorView } from 'prosemirror-view';
 import { ProsemirrorCommand, EditorCommandId } from '../../api/command';
 import { Extension } from '../../api/extension';
 import { canInsertNode } from '../../api/node';
-import { selectionIsImageNode } from '../../api/selection';
+import { selectionIsImageNode, selectionIsEmptyParagraph } from '../../api/selection';
 import { pandocAttrSpec, pandocAttrParseDom, pandocAttrToDomAttr, pandocAttrReadAST, pandocAttrAvailable } from '../../api/pandoc_attr';
 import {
   PandocOutput,
@@ -104,7 +104,7 @@ const extension = (pandocExtensions: PandocExtensions, _options: EditorOptions,
               },
             },
             handleDOMEvents: {
-              drop: imageDrop(schema.nodes.image),
+              drop: imageDrop(),
             },
           },
         }),
@@ -289,8 +289,7 @@ function imageCommand(editorUI: EditorUI, imageAttributes: boolean) {
       }
 
       // see if we are in an empty paragraph (in that case insert a figure)
-      const { $head } = state.selection;
-      if ($head.parent.type === schema.nodes.paragraph && $head.parent.childCount === 0) {
+      if (selectionIsEmptyParagraph(schema, state.selection)) {
         nodeType = schema.nodes.figure;
       }