prosemirror-view 1.33.7 → 1.33.9

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.33.9 (2024-07-18)
+
+### Bug fixes
+
+Fix an issue where dragging an image on Chrome versions before 121 failed to put the image file in the clipboard data.
+
+Enable cross-site scripting protection hack when rendering nodes and marks inside the editor.
+
+## 1.33.8 (2024-06-11)
+
+### Bug fixes
+
+When composition happens with the cursor between two text nodes, use the last mutated one to guess which one is being changed.
+
 ## 1.33.7 (2024-05-31)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1216,7 +1216,7 @@ var MarkViewDesc = function (_ViewDesc3) {
     value: function create(parent, mark, inline, view) {
       var custom = view.nodeViews[mark.type.name];
       var spec = custom && custom(mark, view, inline);
-      if (!spec || !spec.dom) spec = prosemirrorModel.DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline));
+      if (!spec || !spec.dom) spec = prosemirrorModel.DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline), null, mark.attrs);
       return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
     }
   }]);
@@ -1415,9 +1415,9 @@ var NodeViewDesc = function (_ViewDesc4) {
       if (node.isText) {
         if (!dom) dom = document.createTextNode(node.text);else if (dom.nodeType != 3) throw new RangeError("Text must be rendered as a DOM text node");
       } else if (!dom) {
-        var _prosemirrorModel$DOM = prosemirrorModel.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
-        dom = _prosemirrorModel$DOM.dom;
-        contentDOM = _prosemirrorModel$DOM.contentDOM;
+        var _spec = prosemirrorModel.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node), null, node.attrs);
+        dom = _spec.dom;
+        contentDOM = _spec.contentDOM;
       }
       if (!contentDOM && !node.isText && dom.nodeName != "BR") {
         if (!dom.hasAttribute("contenteditable")) dom.contentEditable = "false";
@@ -3247,7 +3247,9 @@ function findCompositionNode(view) {
   var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
   var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
   if (textBefore && textAfter && textBefore != textAfter) {
-    var descAfter = textAfter.pmViewDesc;
+    var descAfter = textAfter.pmViewDesc,
+      lastChanged = view.domObserver.lastChangedTextNode;
+    if (textBefore == lastChanged || textAfter == lastChanged) return lastChanged;
     if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
       return textAfter;
     } else if (view.input.compositionNode == textAfter) {
@@ -3378,7 +3380,7 @@ handlers.dragstart = function (view, _event) {
     dom = _serializeForClipboar2.dom,
     text = _serializeForClipboar2.text,
     slice = _serializeForClipboar2.slice;
-  event.dataTransfer.clearData();
+  if (!event.dataTransfer.files.length || !chrome || chrome_version > 120) event.dataTransfer.clearData();
   event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
   event.dataTransfer.effectAllowed = "copyMove";
   if (!brokenClipboardAPI) event.dataTransfer.setData("text/plain", text);
@@ -4111,6 +4113,7 @@ var DOMObserver = function () {
     this.currentSelection = new SelectionState();
     this.onCharData = null;
     this.suppressingSelectionUpdates = false;
+    this.lastChangedTextNode = null;
     this.observer = window.MutationObserver && new window.MutationObserver(function (mutations) {
       for (var i = 0; i < mutations.length; i++) _this11.queue.push(mutations[i]);
       if (ie && ie_version <= 11 && mutations.some(function (m) {
@@ -4321,7 +4324,11 @@ var DOMObserver = function () {
       if (mut.type == "attributes" && (desc == this.view.docView || mut.attributeName == "contenteditable" || mut.attributeName == "style" && !mut.oldValue && !mut.target.getAttribute("style"))) return null;
       if (!desc || desc.ignoreMutation(mut)) return null;
       if (mut.type == "childList") {
-        for (var i = 0; i < mut.addedNodes.length; i++) added.push(mut.addedNodes[i]);
+        for (var i = 0; i < mut.addedNodes.length; i++) {
+          var node = mut.addedNodes[i];
+          added.push(node);
+          if (node.nodeType == 3) this.lastChangedTextNode = node;
+        }
         if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target)) return {
           from: desc.posBefore,
           to: desc.posAfter
@@ -4351,6 +4358,7 @@ var DOMObserver = function () {
           to: desc.posAtEnd + desc.border
         };
       } else {
+        this.lastChangedTextNode = mut.target;
         return {
           from: desc.posAtStart,
           to: desc.posAtEnd,

package/dist/index.js

@@ -1195,7 +1195,7 @@ class MarkViewDesc extends ViewDesc {
         let custom = view.nodeViews[mark.type.name];
         let spec = custom && custom(mark, view, inline);
         if (!spec || !spec.dom)
-            spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline));
+            spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline), null, mark.attrs);
         return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
     }
     parseRule() {
@@ -1267,7 +1267,8 @@ class NodeViewDesc extends ViewDesc {
                 throw new RangeError("Text must be rendered as a DOM text node");
         }
         else if (!dom) {
-            ({ dom, contentDOM } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)));
+            let spec = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node), null, node.attrs);
+            ({ dom, contentDOM } = spec);
         }
         if (!contentDOM && !node.isText && dom.nodeName != "BR") { // Chrome gets confused by <br contenteditable=false>
             if (!dom.hasAttribute("contenteditable"))
@@ -3460,7 +3461,9 @@ function findCompositionNode(view) {
     let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
     let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
     if (textBefore && textAfter && textBefore != textAfter) {
-        let descAfter = textAfter.pmViewDesc;
+        let descAfter = textAfter.pmViewDesc, lastChanged = view.domObserver.lastChangedTextNode;
+        if (textBefore == lastChanged || textAfter == lastChanged)
+            return lastChanged;
         if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
             return textAfter;
         }
@@ -3629,7 +3632,9 @@ handlers.dragstart = (view, _event) => {
     }
     let draggedSlice = (node || view.state.selection).content();
     let { dom, text, slice } = serializeForClipboard(view, draggedSlice);
-    event.dataTransfer.clearData();
+    // Pre-120 Chrome versions clear files when calling `clearData` (#1472)
+    if (!event.dataTransfer.files.length || !chrome || chrome_version > 120)
+        event.dataTransfer.clearData();
     event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
     // See https://github.com/ProseMirror/prosemirror/issues/1156
     event.dataTransfer.effectAllowed = "copyMove";
@@ -4472,6 +4477,7 @@ class DOMObserver {
         this.currentSelection = new SelectionState;
         this.onCharData = null;
         this.suppressingSelectionUpdates = false;
+        this.lastChangedTextNode = null;
         this.observer = window.MutationObserver &&
             new window.MutationObserver(mutations => {
                 for (let i = 0; i < mutations.length; i++)
@@ -4661,8 +4667,12 @@ class DOMObserver {
         if (!desc || desc.ignoreMutation(mut))
             return null;
         if (mut.type == "childList") {
-            for (let i = 0; i < mut.addedNodes.length; i++)
-                added.push(mut.addedNodes[i]);
+            for (let i = 0; i < mut.addedNodes.length; i++) {
+                let node = mut.addedNodes[i];
+                added.push(node);
+                if (node.nodeType == 3)
+                    this.lastChangedTextNode = node;
+            }
             if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target))
                 return { from: desc.posBefore, to: desc.posAfter };
             let prev = mut.previousSibling, next = mut.nextSibling;
@@ -4689,6 +4699,7 @@ class DOMObserver {
             return { from: desc.posAtStart - desc.border, to: desc.posAtEnd + desc.border };
         }
         else { // "characterData"
+            this.lastChangedTextNode = mut.target;
             return {
                 from: desc.posAtStart,
                 to: desc.posAtEnd,

package/package.json

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

package/src/domobserver.ts

@@ -43,6 +43,7 @@ export class DOMObserver {
   currentSelection = new SelectionState
   onCharData: ((e: Event) => void) | null = null
   suppressingSelectionUpdates = false
+  lastChangedTextNode: Text | null = null
 
   constructor(
     readonly view: EditorView,
@@ -235,7 +236,11 @@ export class DOMObserver {
     if (!desc || desc.ignoreMutation(mut)) return null
 
     if (mut.type == "childList") {
-      for (let i = 0; i < mut.addedNodes.length; i++) added.push(mut.addedNodes[i])
+      for (let i = 0; i < mut.addedNodes.length; i++) {
+        let node = mut.addedNodes[i]
+        added.push(node)
+        if (node.nodeType == 3) this.lastChangedTextNode = node as Text
+      }
       if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target))
         return {from: desc.posBefore, to: desc.posAfter}
       let prev = mut.previousSibling, next = mut.nextSibling
@@ -258,6 +263,7 @@ export class DOMObserver {
     } else if (mut.type == "attributes") {
       return {from: desc.posAtStart - desc.border, to: desc.posAtEnd + desc.border}
     } else { // "characterData"
+      this.lastChangedTextNode = mut.target as Text
       return {
         from: desc.posAtStart,
         to: desc.posAtEnd,

package/src/input.ts

@@ -517,7 +517,8 @@ export function findCompositionNode(view: EditorView) {
   let textBefore = textNodeBefore(sel.focusNode, sel.focusOffset)
   let textAfter = textNodeAfter(sel.focusNode, sel.focusOffset)
   if (textBefore && textAfter && textBefore != textAfter) {
-    let descAfter = textAfter.pmViewDesc
+    let descAfter = textAfter.pmViewDesc, lastChanged = view.domObserver.lastChangedTextNode
+    if (textBefore == lastChanged || textAfter == lastChanged) return lastChanged
     if (!descAfter || !descAfter.isText(textAfter.nodeValue!)) {
       return textAfter
     } else if (view.input.compositionNode == textAfter) {
@@ -676,7 +677,9 @@ handlers.dragstart = (view, _event) => {
   }
   let draggedSlice = (node || view.state.selection).content()
   let {dom, text, slice} = serializeForClipboard(view, draggedSlice)
-  event.dataTransfer.clearData()
+  // Pre-120 Chrome versions clear files when calling `clearData` (#1472)
+  if (!event.dataTransfer.files.length || !browser.chrome || browser.chrome_version > 120)
+    event.dataTransfer.clearData()
   event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML)
   // See https://github.com/ProseMirror/prosemirror/issues/1156
   event.dataTransfer.effectAllowed = "copyMove"

package/src/viewdesc.ts

@@ -572,7 +572,7 @@ class MarkViewDesc extends ViewDesc {
     let custom = view.nodeViews[mark.type.name]
     let spec: {dom: HTMLElement, contentDOM?: HTMLElement} = custom && (custom as any)(mark, view, inline)
     if (!spec || !spec.dom)
-      spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM!(mark, inline)) as any
+      spec = (DOMSerializer.renderSpec as any)(document, mark.type.spec.toDOM!(mark, inline), null, mark.attrs) as any
     return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom as HTMLElement)
   }
 
@@ -647,7 +647,8 @@ export class NodeViewDesc extends ViewDesc {
       if (!dom) dom = document.createTextNode(node.text!)
       else if (dom.nodeType != 3) throw new RangeError("Text must be rendered as a DOM text node")
     } else if (!dom) {
-      ;({dom, contentDOM} = DOMSerializer.renderSpec(document, node.type.spec.toDOM!(node)))
+      let spec = (DOMSerializer.renderSpec as any)(document, node.type.spec.toDOM!(node), null, node.attrs)
+      ;({dom, contentDOM} = spec as {dom: DOMNode, contentDOM?: HTMLElement})
     }
     if (!contentDOM && !node.isText && dom.nodeName != "BR") { // Chrome gets confused by <br contenteditable=false>
       if (!(dom as HTMLElement).hasAttribute("contenteditable")) (dom as HTMLElement).contentEditable = "false"