prosemirror-view 1.40.1 → 1.41.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.41.1 (2025-09-19)
+
+### Bug fixes
+
+Consistently set `draggable` on a node's inner DOM representation, not a decoration wrapper element.
+
+## 1.41.0 (2025-09-06)
+
+### Bug fixes
+
+Make sure `transformPasted` is properly called when pasting into a code block.
+
+Fix an issue where the editor didn't properly set the DOM selection in a shadow DOM on Safari in some situations.
+
+Work around a Safari issue that broke composition right after changing the set of active marks.
+
+### New features
+
+Pass an argument to `transformPasted` that tells the handler whether the paste is plain text. Call transformPasted when pasting into a code block
+
 ## 1.40.1 (2025-07-18)
 
 ### Bug fixes

package/dist/index.cjs

@@ -998,7 +998,7 @@ var ViewDesc = function () {
       }
       if (!(force || brKludge && safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
       var domSelExtended = false;
-      if ((domSel.extend || anchor == head) && !brKludge) {
+      if ((domSel.extend || anchor == head) && !(brKludge && gecko)) {
         domSel.collapse(anchorDOM.node, anchorDOM.offset);
         try {
           if (anchor != head) domSel.extend(headDOM.node, headDOM.offset);
@@ -1427,15 +1427,17 @@ var NodeViewDesc = function (_ViewDesc4) {
   }, {
     key: "selectNode",
     value: function selectNode() {
-      if (this.nodeDOM.nodeType == 1) this.nodeDOM.classList.add("ProseMirror-selectednode");
-      if (this.contentDOM || !this.node.type.spec.draggable) this.dom.draggable = true;
+      if (this.nodeDOM.nodeType == 1) {
+        this.nodeDOM.classList.add("ProseMirror-selectednode");
+        if (this.contentDOM || !this.node.type.spec.draggable) this.nodeDOM.draggable = true;
+      }
     }
   }, {
     key: "deselectNode",
     value: function deselectNode() {
       if (this.nodeDOM.nodeType == 1) {
         this.nodeDOM.classList.remove("ProseMirror-selectednode");
-        if (this.contentDOM || !this.node.type.spec.draggable) this.dom.removeAttribute("draggable");
+        if (this.contentDOM || !this.node.type.spec.draggable) this.nodeDOM.removeAttribute("draggable");
       }
     }
   }, {
@@ -2271,15 +2273,11 @@ function removeClassOnSelectionChange(view) {
   });
 }
 function selectCursorWrapper(view) {
-  var domSel = view.domSelection(),
-    range = document.createRange();
+  var domSel = view.domSelection();
   if (!domSel) return;
   var node = view.cursorWrapper.dom,
     img = node.nodeName == "IMG";
-  if (img) range.setStart(node.parentNode, domIndex(node) + 1);else range.setStart(node, 0);
-  range.collapse(true);
-  domSel.removeAllRanges();
-  domSel.addRange(range);
+  if (img) domSel.collapse(node.parentNode, domIndex(node) + 1);else domSel.collapse(node, 0);
   if (!img && !view.state.selection.visible && ie && ie_version <= 11) {
     node.disabled = true;
     node.disabled = false;
@@ -2677,12 +2675,18 @@ function parseFromClipboard(view, text, html, plainText, $context) {
   var inCode = $context.parent.type.spec.code;
   var dom, slice;
   if (!html && !text) return null;
-  var asText = text && (plainText || inCode || !html);
+  var asText = !!text && (plainText || inCode || !html);
   if (asText) {
     view.someProp("transformPastedText", function (f) {
       text = f(text, inCode || plainText, view);
     });
-    if (inCode) return text ? new prosemirrorModel.Slice(prosemirrorModel.Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : prosemirrorModel.Slice.empty;
+    if (inCode) {
+      slice = new prosemirrorModel.Slice(prosemirrorModel.Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0);
+      view.someProp("transformPasted", function (f) {
+        slice = f(slice, view, true);
+      });
+      return slice;
+    }
     var parsed = view.someProp("clipboardTextParser", function (f) {
       return f(text, $context, plainText, view);
     });
@@ -2739,7 +2743,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     }
   }
   view.someProp("transformPasted", function (f) {
-    slice = f(slice, view);
+    slice = f(slice, view, asText);
   });
   return slice;
 }
@@ -3169,7 +3173,7 @@ var MouseDown = function () {
     }
     var target = flushed ? null : event.target;
     var targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-    this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
+    this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM : null;
     var selection = view.state.selection;
     if (event.button == 0 && targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false || selection instanceof prosemirrorState.NodeSelection && selection.from <= targetPos && selection.to > targetPos) this.mightDrag = {
       node: targetNode,
@@ -3492,7 +3496,7 @@ editHandlers.drop = function (view, _event) {
   var slice = dragging && dragging.slice;
   if (slice) {
     view.someProp("transformPasted", function (f) {
-      slice = f(slice, view);
+      slice = f(slice, view, false);
     });
   } else {
     slice = parseFromClipboard(view, getText(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);

package/dist/index.d.cts

@@ -757,9 +757,10 @@ interface EditorProps<P = any> {
     clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice;
     /**
     Can be used to transform pasted or dragged-and-dropped content
-    before it is applied to the document.
+    before it is applied to the document. The `plain` flag will be
+    true when the text is pasted as plain text.
     */
-    transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice;
+    transformPasted?: (this: P, slice: Slice, view: EditorView, plain: boolean) => Slice;
     /**
     Can be used to transform copied or cut content before it is
     serialized to the clipboard.

package/dist/index.d.ts

@@ -757,9 +757,10 @@ interface EditorProps<P = any> {
     clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice;
     /**
     Can be used to transform pasted or dragged-and-dropped content
-    before it is applied to the document.
+    before it is applied to the document. The `plain` flag will be
+    true when the text is pasted as plain text.
     */
-    transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice;
+    transformPasted?: (this: P, slice: Slice, view: EditorView, plain: boolean) => Slice;
     /**
     Can be used to transform copied or cut content before it is
     serialized to the clipboard.

package/dist/index.js

@@ -1072,7 +1072,7 @@ class ViewDesc {
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
         let domSelExtended = false;
-        if ((domSel.extend || anchor == head) && !brKludge) {
+        if ((domSel.extend || anchor == head) && !(brKludge && gecko)) {
             domSel.collapse(anchorDOM.node, anchorDOM.offset);
             try {
                 if (anchor != head)
@@ -1484,17 +1484,18 @@ class NodeViewDesc extends ViewDesc {
     }
     // Mark this node as being the selected node.
     selectNode() {
-        if (this.nodeDOM.nodeType == 1)
+        if (this.nodeDOM.nodeType == 1) {
             this.nodeDOM.classList.add("ProseMirror-selectednode");
-        if (this.contentDOM || !this.node.type.spec.draggable)
-            this.dom.draggable = true;
+            if (this.contentDOM || !this.node.type.spec.draggable)
+                this.nodeDOM.draggable = true;
+        }
     }
     // Remove selected node marking from this node.
     deselectNode() {
         if (this.nodeDOM.nodeType == 1) {
             this.nodeDOM.classList.remove("ProseMirror-selectednode");
             if (this.contentDOM || !this.node.type.spec.draggable)
-                this.dom.removeAttribute("draggable");
+                this.nodeDOM.removeAttribute("draggable");
         }
     }
     get domAtom() { return this.node.isAtom; }
@@ -2333,17 +2334,14 @@ function removeClassOnSelectionChange(view) {
     });
 }
 function selectCursorWrapper(view) {
-    let domSel = view.domSelection(), range = document.createRange();
+    let domSel = view.domSelection();
     if (!domSel)
         return;
     let node = view.cursorWrapper.dom, img = node.nodeName == "IMG";
     if (img)
-        range.setStart(node.parentNode, domIndex(node) + 1);
+        domSel.collapse(node.parentNode, domIndex(node) + 1);
     else
-        range.setStart(node, 0);
-    range.collapse(true);
-    domSel.removeAllRanges();
-    domSel.addRange(range);
+        domSel.collapse(node, 0);
     // Kludge to kill 'control selection' in IE11 when selecting an
     // invisible cursor wrapper, since that would result in those weird
     // resize handles and a selection that considers the absolutely
@@ -2821,11 +2819,14 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     let dom, slice;
     if (!html && !text)
         return null;
-    let asText = text && (plainText || inCode || !html);
+    let asText = !!text && (plainText || inCode || !html);
     if (asText) {
         view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view); });
-        if (inCode)
-            return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty;
+        if (inCode) {
+            slice = new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0);
+            view.someProp("transformPasted", f => { slice = f(slice, view, true); });
+            return slice;
+        }
         let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view));
         if (parsed) {
             slice = parsed;
@@ -2883,7 +2884,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
             slice = closeSlice(slice, openStart, openEnd);
         }
     }
-    view.someProp("transformPasted", f => { slice = f(slice, view); });
+    view.someProp("transformPasted", f => { slice = f(slice, view, asText); });
     return slice;
 }
 const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i;
@@ -3346,7 +3347,7 @@ class MouseDown {
         }
         const target = flushed ? null : event.target;
         const targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-        this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
+        this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM : null;
         let { selection } = view.state;
         if (event.button == 0 &&
             targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
@@ -3743,7 +3744,7 @@ editHandlers.drop = (view, _event) => {
     let $mouse = view.state.doc.resolve(eventPos.pos);
     let slice = dragging && dragging.slice;
     if (slice) {
-        view.someProp("transformPasted", f => { slice = f(slice, view); });
+        view.someProp("transformPasted", f => { slice = f(slice, view, false); });
     }
     else {
         slice = parseFromClipboard(view, getText(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);

package/package.json

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

package/src/clipboard.ts

@@ -44,10 +44,14 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
   let inCode = $context.parent.type.spec.code
   let dom: HTMLElement | undefined, slice: Slice | undefined
   if (!html && !text) return null
-  let asText = text && (plainText || inCode || !html)
+  let asText = !!text && (plainText || inCode || !html)
   if (asText) {
     view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view) })
-    if (inCode) return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty
+    if (inCode) {
+      slice = new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0)
+      view.someProp("transformPasted", f => { slice = f(slice!, view, true) })
+      return slice
+    }
     let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view))
     if (parsed) {
       slice = parsed
@@ -101,7 +105,7 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
     }
   }
 
-  view.someProp("transformPasted", f => { slice = f(slice!, view) })
+  view.someProp("transformPasted", f => { slice = f(slice!, view, asText) })
   return slice
 }
 

package/src/index.ts

@@ -714,8 +714,9 @@ export interface EditorProps<P = any> {
   clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice
 
   /// Can be used to transform pasted or dragged-and-dropped content
-  /// before it is applied to the document.
-  transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice
+  /// before it is applied to the document. The `plain` flag will be
+  /// true when the text is pasted as plain text.
+  transformPasted?: (this: P, slice: Slice, view: EditorView, plain: boolean) => Slice
 
   /// Can be used to transform copied or cut content before it is
   /// serialized to the clipboard.

package/src/input.ts

@@ -329,7 +329,7 @@ class MouseDown {
 
     const target = flushed ? null : event.target as HTMLElement
     const targetDesc = target ? view.docView.nearestDesc(target, true) : null
-    this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom as HTMLElement : null
+    this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM as HTMLElement : null
 
     let {selection} = view.state
     if (event.button == 0 &&
@@ -718,7 +718,7 @@ editHandlers.drop = (view, _event) => {
   let $mouse = view.state.doc.resolve(eventPos.pos)
   let slice = dragging && dragging.slice
   if (slice) {
-    view.someProp("transformPasted", f => { slice = f(slice!, view) })
+    view.someProp("transformPasted", f => { slice = f(slice!, view, false) })
   } else {
     slice = parseFromClipboard(view, getText(event.dataTransfer),
                                brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse)

package/src/selection.ts

@@ -147,14 +147,11 @@ function removeClassOnSelectionChange(view: EditorView) {
 }
 
 function selectCursorWrapper(view: EditorView) {
-  let domSel = view.domSelection(), range = document.createRange()
+  let domSel = view.domSelection()
   if (!domSel) return
   let node = view.cursorWrapper!.dom, img = node.nodeName == "IMG"
-  if (img) range.setStart(node.parentNode!, domIndex(node) + 1)
-  else range.setStart(node, 0)
-  range.collapse(true)
-  domSel.removeAllRanges()
-  domSel.addRange(range)
+  if (img) domSel.collapse(node.parentNode!, domIndex(node) + 1)
+  else domSel.collapse(node, 0)
   // Kludge to kill 'control selection' in IE11 when selecting an
   // invisible cursor wrapper, since that would result in those weird
   // resize handles and a selection that considers the absolutely

package/src/viewdesc.ts

@@ -460,7 +460,7 @@ export class ViewDesc {
     // (one where the focus is before the anchor), but not all
     // browsers support it yet.
     let domSelExtended = false
-    if ((domSel.extend || anchor == head) && !brKludge) {
+    if ((domSel.extend || anchor == head) && !(brKludge && browser.gecko)) {
       domSel.collapse(anchorDOM.node, anchorDOM.offset)
       try {
         if (anchor != head)
@@ -884,15 +884,17 @@ export class NodeViewDesc extends ViewDesc {
 
   // Mark this node as being the selected node.
   selectNode() {
-    if (this.nodeDOM.nodeType == 1) (this.nodeDOM as HTMLElement).classList.add("ProseMirror-selectednode")
-    if (this.contentDOM || !this.node.type.spec.draggable) (this.dom as HTMLElement).draggable = true
+    if (this.nodeDOM.nodeType == 1) {
+      ;(this.nodeDOM as HTMLElement).classList.add("ProseMirror-selectednode")
+      if (this.contentDOM || !this.node.type.spec.draggable) (this.nodeDOM as HTMLElement).draggable = true
+    }
   }
 
   // Remove selected node marking from this node.
   deselectNode() {
     if (this.nodeDOM.nodeType == 1) {
       ;(this.nodeDOM as HTMLElement).classList.remove("ProseMirror-selectednode")
-      if (this.contentDOM || !this.node.type.spec.draggable) (this.dom as HTMLElement).removeAttribute("draggable")
+      if (this.contentDOM || !this.node.type.spec.draggable) (this.nodeDOM as HTMLElement).removeAttribute("draggable")
     }
   }