prosemirror-view 1.32.2 → 1.32.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.32.4 (2023-11-08)
+
+### Bug fixes
+
+Fix a case where a DOM change involving astal characters could create odd steps that started and ended in the middle of UTF16 surrogate pairs.
+
+Dragging a draggable node will no longer implicitly select it.
+
+## 1.32.3 (2023-11-01)
+
+### Bug fixes
+
+Fix a bug where, in some situations, pasting plain text pasted HTML markup.
+
 ## 1.32.2 (2023-10-27)
 
 ### Bug fixes

package/dist/index.cjs

@@ -3994,7 +3994,7 @@ function doPaste(view, text, html, preferPlain, event) {
 }
 
 function getText(clipboardData) {
-  var text = clipboardData.getData("text/html") || clipboardData.getData("Text");
+  var text = clipboardData.getData("text/plain") || clipboardData.getData("Text");
   if (text) return text;
   var uris = clipboardData.getData("text/uri-list");
   return uris ? uris.replace(/\r?\n/g, " ") : "";
@@ -4008,11 +4008,12 @@ editHandlers.paste = function (view, _event) {
   if (data && doPaste(view, getText(data), data.getData("text/html"), plain, event)) event.preventDefault();else capturePaste(view, event);
 };
 
-var Dragging = _createClass(function Dragging(slice, move) {
+var Dragging = _createClass(function Dragging(slice, move, node) {
   _classCallCheck(this, Dragging);
 
   this.slice = slice;
   this.move = move;
+  this.node = node;
 });
 
 var dragCopyModifier = mac ? "altKey" : "ctrlKey";
@@ -4024,14 +4025,15 @@ handlers.dragstart = function (view, _event) {
   if (!event.dataTransfer) return;
   var sel = view.state.selection;
   var pos = sel.empty ? null : view.posAtCoords(eventCoords(event));
+  var node;
   if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof prosemirrorState.NodeSelection ? sel.to - 1 : sel.to)) ;else if (mouseDown && mouseDown.mightDrag) {
-    view.dispatch(view.state.tr.setSelection(prosemirrorState.NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)));
+    node = prosemirrorState.NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos);
   } else if (event.target && event.target.nodeType == 1) {
     var desc = view.docView.nearestDesc(event.target, true);
-    if (desc && desc.node.type.spec.draggable && desc != view.docView) view.dispatch(view.state.tr.setSelection(prosemirrorState.NodeSelection.create(view.state.doc, desc.posBefore)));
+    if (desc && desc.node.type.spec.draggable && desc != view.docView) node = prosemirrorState.NodeSelection.create(view.state.doc, desc.posBefore);
   }
 
-  var slice = view.state.selection.content(),
+  var slice = (node || view.state.selection).content(),
       _serializeForClipboar2 = serializeForClipboard(view, slice),
       dom = _serializeForClipboar2.dom,
       text = _serializeForClipboar2.text;
@@ -4040,7 +4042,7 @@ handlers.dragstart = function (view, _event) {
   event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
   event.dataTransfer.effectAllowed = "copyMove";
   if (!brokenClipboardAPI) event.dataTransfer.setData("text/plain", text);
-  view.dragging = new Dragging(slice, !event[dragCopyModifier]);
+  view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
 };
 
 handlers.dragend = function (view) {
@@ -4086,7 +4088,12 @@ editHandlers.drop = function (view, _event) {
   var insertPos = slice ? prosemirrorTransform.dropPoint(view.state.doc, $mouse.pos, slice) : $mouse.pos;
   if (insertPos == null) insertPos = $mouse.pos;
   var tr = view.state.tr;
-  if (move) tr.deleteSelection();
+
+  if (move) {
+    var node = dragging.node;
+    if (node) node.replace(tr);else tr.deleteSelection();
+  }
+
   var pos = tr.mapping.map(insertPos);
   var isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
   var beforeInsert = tr.doc;
@@ -5648,12 +5655,14 @@ function findDiff(a, b, pos, preferredPos, preferredSide) {
   if (endA < start && a.size < b.size) {
     var move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
     start -= move;
+    if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1))) start += move ? 1 : -1;
     endB = start + (endB - endA);
     endA = start;
   } else if (endB < start) {
     var _move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
 
     start -= _move;
+    if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1))) start += _move ? 1 : -1;
     endA = start + (endA - endB);
     endB = start;
   }
@@ -5665,6 +5674,13 @@ function findDiff(a, b, pos, preferredPos, preferredSide) {
   };
 }
 
+function isSurrogatePair(str) {
+  if (str.length != 2) return false;
+  var a = str.charCodeAt(0),
+      b = str.charCodeAt(1);
+  return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF;
+}
+
 var __serializeForClipboard = serializeForClipboard;
 var __parseFromClipboard = parseFromClipboard;
 var __endComposition = endComposition;
@@ -5770,6 +5786,8 @@ var EditorView = function () {
   }, {
     key: "updateStateInner",
     value: function updateStateInner(state, prevProps) {
+      var _a;
+
       var prev = this.state,
           redraw = false,
           updateSel = false;
@@ -5831,6 +5849,7 @@ var EditorView = function () {
       }
 
       this.updatePluginViews(prev);
+      if (((_a = this.dragging) === null || _a === void 0 ? void 0 : _a.node) && !prev.doc.eq(state.doc)) this.updateDraggedNode(this.dragging, prev);
 
       if (scroll == "reset") {
         this.dom.scrollTop = 0;
@@ -5887,6 +5906,22 @@ var EditorView = function () {
         }
       }
     }
+  }, {
+    key: "updateDraggedNode",
+    value: function updateDraggedNode(dragging, prev) {
+      var sel = dragging.node,
+          found = -1;
+
+      if (this.state.doc.nodeAt(sel.from) == sel.node) {
+        found = sel.from;
+      } else {
+        var movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
+        var moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
+        if (moved == sel.node) found = movedPos;
+      }
+
+      this.dragging = new Dragging(dragging.slice, dragging.move, found < 0 ? undefined : prosemirrorState.NodeSelection.create(this.state.doc, found));
+    }
   }, {
     key: "someProp",
     value: function someProp(propName, f) {

package/dist/index.d.cts

@@ -466,6 +466,7 @@ declare class EditorView {
     private updateStateInner;
     private destroyPluginViews;
     private updatePluginViews;
+    private updateDraggedNode;
     /**
     Goes over the values of a prop, first those provided directly,
     then those from plugins given to the view, then from plugins in

package/dist/index.d.ts

@@ -466,6 +466,7 @@ declare class EditorView {
     private updateStateInner;
     private destroyPluginViews;
     private updatePluginViews;
+    private updateDraggedNode;
     /**
     Goes over the values of a prop, first those provided directly,
     then those from plugins given to the view, then from plugins in

package/dist/index.js

@@ -3523,7 +3523,7 @@ function doPaste(view, text, html, preferPlain, event) {
     return true;
 }
 function getText(clipboardData) {
-    let text = clipboardData.getData("text/html") || clipboardData.getData("Text");
+    let text = clipboardData.getData("text/plain") || clipboardData.getData("Text");
     if (text)
         return text;
     let uris = clipboardData.getData("text/uri-list");
@@ -3545,9 +3545,10 @@ editHandlers.paste = (view, _event) => {
         capturePaste(view, event);
 };
 class Dragging {
-    constructor(slice, move) {
+    constructor(slice, move, node) {
         this.slice = slice;
         this.move = move;
+        this.node = node;
     }
 }
 const dragCopyModifier = mac ? "altKey" : "ctrlKey";
@@ -3560,23 +3561,24 @@ handlers.dragstart = (view, _event) => {
         return;
     let sel = view.state.selection;
     let pos = sel.empty ? null : view.posAtCoords(eventCoords(event));
+    let node;
     if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof NodeSelection ? sel.to - 1 : sel.to)) ;
     else if (mouseDown && mouseDown.mightDrag) {
-        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)));
+        node = NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos);
     }
     else if (event.target && event.target.nodeType == 1) {
         let desc = view.docView.nearestDesc(event.target, true);
         if (desc && desc.node.type.spec.draggable && desc != view.docView)
-            view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore)));
+            node = NodeSelection.create(view.state.doc, desc.posBefore);
     }
-    let slice = view.state.selection.content(), { dom, text } = serializeForClipboard(view, slice);
+    let slice = (node || view.state.selection).content(), { dom, text } = serializeForClipboard(view, slice);
     event.dataTransfer.clearData();
     event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
     // See https://github.com/ProseMirror/prosemirror/issues/1156
     event.dataTransfer.effectAllowed = "copyMove";
     if (!brokenClipboardAPI)
         event.dataTransfer.setData("text/plain", text);
-    view.dragging = new Dragging(slice, !event[dragCopyModifier]);
+    view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
 };
 handlers.dragend = view => {
     let dragging = view.dragging;
@@ -3615,8 +3617,13 @@ editHandlers.drop = (view, _event) => {
     if (insertPos == null)
         insertPos = $mouse.pos;
     let tr = view.state.tr;
-    if (move)
-        tr.deleteSelection();
+    if (move) {
+        let { node } = dragging;
+        if (node)
+            node.replace(tr);
+        else
+            tr.deleteSelection();
+    }
     let pos = tr.mapping.map(insertPos);
     let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
     let beforeInsert = tr.doc;
@@ -5025,17 +5032,27 @@ function findDiff(a, b, pos, preferredPos, preferredSide) {
     if (endA < start && a.size < b.size) {
         let move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
         start -= move;
+        if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1)))
+            start += move ? 1 : -1;
         endB = start + (endB - endA);
         endA = start;
     }
     else if (endB < start) {
         let move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
         start -= move;
+        if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1)))
+            start += move ? 1 : -1;
         endA = start + (endA - endB);
         endB = start;
     }
     return { start, endA, endB };
 }
+function isSurrogatePair(str) {
+    if (str.length != 2)
+        return false;
+    let a = str.charCodeAt(0), b = str.charCodeAt(1);
+    return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF;
+}
 
 /**
 @internal
@@ -5182,6 +5199,7 @@ class EditorView {
         this.updateStateInner(state, this._props);
     }
     updateStateInner(state, prevProps) {
+        var _a;
         let prev = this.state, redraw = false, updateSel = false;
         // When stored marks are added, stop composition, so that they can
         // be displayed.
@@ -5249,6 +5267,8 @@ class EditorView {
             this.domObserver.start();
         }
         this.updatePluginViews(prev);
+        if (((_a = this.dragging) === null || _a === void 0 ? void 0 : _a.node) && !prev.doc.eq(state.doc))
+            this.updateDraggedNode(this.dragging, prev);
         if (scroll == "reset") {
             this.dom.scrollTop = 0;
         }
@@ -5303,6 +5323,19 @@ class EditorView {
             }
         }
     }
+    updateDraggedNode(dragging, prev) {
+        let sel = dragging.node, found = -1;
+        if (this.state.doc.nodeAt(sel.from) == sel.node) {
+            found = sel.from;
+        }
+        else {
+            let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size);
+            let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos);
+            if (moved == sel.node)
+                found = movedPos;
+        }
+        this.dragging = new Dragging(dragging.slice, dragging.move, found < 0 ? undefined : NodeSelection.create(this.state.doc, found));
+    }
     someProp(propName, f) {
         let prop = this._props && this._props[propName], value;
         if (prop != null && (value = f ? f(prop) : prop))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.32.2",
+  "version": "1.32.4",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",

package/src/domchange.ts

@@ -354,13 +354,23 @@ function findDiff(a: Fragment, b: Fragment, pos: number, preferredPos: number, p
   if (endA < start && a.size < b.size) {
     let move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0
     start -= move
+    if (start && start < b.size && isSurrogatePair(b.textBetween(start - 1, start + 1)))
+      start += move ? 1 : -1
     endB = start + (endB - endA)
     endA = start
   } else if (endB < start) {
     let move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0
     start -= move
+    if (start && start < a.size && isSurrogatePair(a.textBetween(start - 1, start + 1)))
+      start += move ? 1 : -1
     endA = start + (endA - endB)
     endB = start
   }
   return {start, endA, endB}
 }
+
+function isSurrogatePair(str: string) {
+  if (str.length != 2) return false
+  let a = str.charCodeAt(0), b = str.charCodeAt(1)
+  return a >= 0xDC00 && a <= 0xDFFF && b >= 0xD800 && b <= 0xDBFF
+}

package/src/index.ts

@@ -4,7 +4,8 @@ import {Slice, ResolvedPos, DOMParser, DOMSerializer, Node, Mark} from "prosemir
 import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrollPos,
         resetScrollPos, focusPreventScroll} from "./domcoords"
 import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
-import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition, InputState, doPaste} from "./input"
+import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
+        InputState, doPaste, Dragging} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
 import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
@@ -219,6 +220,8 @@ export class EditorView {
     }
 
     this.updatePluginViews(prev)
+    if ((this.dragging as Dragging)?.node && !prev.doc.eq(state.doc))
+      this.updateDraggedNode(this.dragging as Dragging, prev)
 
     if (scroll == "reset") {
       this.dom.scrollTop = 0
@@ -267,6 +270,19 @@ export class EditorView {
     }
   }
 
+  private updateDraggedNode(dragging: Dragging, prev: EditorState) {
+    let sel = dragging.node!, found = -1
+    if (this.state.doc.nodeAt(sel.from) == sel.node) {
+      found = sel.from
+    } else {
+      let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size)
+      let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos)
+      if (moved == sel.node) found = movedPos
+    }
+    this.dragging = new Dragging(dragging.slice, dragging.move,
+                                 found < 0 ? undefined : NodeSelection.create(this.state.doc, found))
+  }
+
   /// Goes over the values of a prop, first those provided directly,
   /// then those from plugins given to the view, then from plugins in
   /// the state (in order), and calls `f` every time a non-undefined

package/src/input.ts

@@ -609,7 +609,7 @@ export function doPaste(view: EditorView, text: string, html: string | null, pre
 }
 
 function getText(clipboardData: DataTransfer) {
-  let text = clipboardData.getData("text/html") || clipboardData.getData("Text")
+  let text = clipboardData.getData("text/plain") || clipboardData.getData("Text")
   if (text) return text
   let uris = clipboardData.getData("text/uri-list")
   return uris ? uris.replace(/\r?\n/g, " ") : ""
@@ -630,8 +630,8 @@ editHandlers.paste = (view, _event) => {
     capturePaste(view, event)
 }
 
-class Dragging {
-  constructor(readonly slice: Slice, readonly move: boolean) {}
+export class Dragging {
+  constructor(readonly slice: Slice, readonly move: boolean, readonly node?: NodeSelection) {}
 }
 
 const dragCopyModifier: keyof DragEvent = browser.mac ? "altKey" : "ctrlKey"
@@ -644,22 +644,23 @@ handlers.dragstart = (view, _event) => {
 
   let sel = view.state.selection
   let pos = sel.empty ? null : view.posAtCoords(eventCoords(event))
+  let node: undefined | NodeSelection
   if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof NodeSelection ? sel.to - 1: sel.to)) {
     // In selection
   } else if (mouseDown && mouseDown.mightDrag) {
-    view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)))
+    node = NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)
   } else if (event.target && (event.target as HTMLElement).nodeType == 1) {
     let desc = view.docView.nearestDesc(event.target as HTMLElement, true)
     if (desc && desc.node.type.spec.draggable && desc != view.docView)
-      view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore)))
+      node = NodeSelection.create(view.state.doc, desc.posBefore)
   }
-  let slice = view.state.selection.content(), {dom, text} = serializeForClipboard(view, slice)
+  let slice = (node || view.state.selection).content(), {dom, text} = serializeForClipboard(view, slice)
   event.dataTransfer.clearData()
   event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML)
   // See https://github.com/ProseMirror/prosemirror/issues/1156
   event.dataTransfer.effectAllowed = "copyMove"
   if (!brokenClipboardAPI) event.dataTransfer.setData("text/plain", text)
-  view.dragging = new Dragging(slice, !event[dragCopyModifier])
+  view.dragging = new Dragging(slice, !event[dragCopyModifier], node)
 }
 
 handlers.dragend = view => {
@@ -700,7 +701,11 @@ editHandlers.drop = (view, _event) => {
   if (insertPos == null) insertPos = $mouse.pos
 
   let tr = view.state.tr
-  if (move) tr.deleteSelection()
+  if (move) {
+    let {node} = dragging as Dragging
+    if (node) node.replace(tr)
+    else tr.deleteSelection()
+  }
 
   let pos = tr.mapping.map(insertPos)
   let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1