prosemirror-view 1.33.8 → 1.33.10

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 1.33.10 (2024-08-13)
+
+### Bug fixes
+
+Prevent triple clicks and clicks on atom nodes from dispatching a selection update when the new selection is equal to the current selection.
+
+Don't crash when `window.getSelection()` returns null.
+
+Create a cursor wrapper when starting a composition with a selection that spans mark boundaries, to avoid odd DOM forms created by Chrome in such a situation.
+
+## 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

package/dist/index.cjs

@@ -603,6 +603,7 @@ function endOfTextblockHorizontal(view, state, dir) {
     atStart = !offset,
     atEnd = offset == $head.parent.content.size;
   var sel = view.domSelection();
+  if (!sel) return $head.pos == $head.start() || $head.pos == $head.end();
   if (!maybeRTL.test($head.parent.textContent) || !sel.modify) return dir == "left" || dir == "backward" ? atStart : atEnd;
   return withFlushedState(view, state, function () {
     var _view$domSelectionRan = view.domSelectionRange(),
@@ -1216,7 +1217,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 +1416,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";
@@ -2214,10 +2215,17 @@ function removeClassOnSelectionChange(view) {
 function selectCursorWrapper(view) {
   var domSel = view.domSelection(),
     range = document.createRange();
+  if (!domSel) return;
   var node = view.cursorWrapper.dom,
     img = node.nodeName == "IMG";
-  if (img) range.setEnd(node.parentNode, domIndex(node) + 1);else range.setEnd(node, 0);
-  range.collapse(false);
+  if (img) range.setStart(node.parentNode, domIndex(node) + 1);else range.setStart(node, 0);
+  var sel = view.state.selection;
+  if (sel.empty) {
+    range.collapse(true);
+  } else {
+    var end = view.domAtPos(sel.to);
+    range.setEnd(end.node, end.offset);
+  }
   domSel.removeAllRanges();
   domSel.addRange(range);
   if (!img && !view.state.selection.visible && ie && ie_version <= 11) {
@@ -2449,6 +2457,7 @@ function setSelFocus(view, node, offset) {
     }
   }
   var sel = view.domSelection();
+  if (!sel) return;
   if (selectionCollapsed(sel)) {
     var range = document.createRange();
     range.setEnd(node, offset);
@@ -2969,6 +2978,7 @@ function runHandlerOnContext(view, propName, pos, inside, event) {
 }
 function updateSelection(view, selection, origin) {
   if (!view.focused) view.focus();
+  if (view.state.selection.eq(selection)) return;
   var tr = view.state.tr.setSelection(selection);
   if (origin == "pointer") tr.setMeta("pointer", true);
   view.dispatch(tr);
@@ -3187,8 +3197,8 @@ editHandlers.compositionstart = editHandlers.compositionupdate = function (view)
   if (!view.composing) {
     view.domObserver.flush();
     var state = view.state,
-      $pos = state.selection.$from;
-    if (state.selection.empty && (state.storedMarks || !$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(function (m) {
+      $pos = state.selection.$to;
+    if (state.selection instanceof prosemirrorState.TextSelection && (state.storedMarks || !$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(function (m) {
       return m.type.spec.inclusive === false;
     }))) {
       view.markCursor = view.state.storedMarks || $pos.marks();
@@ -3202,7 +3212,8 @@ editHandlers.compositionstart = editHandlers.compositionupdate = function (view)
           var before = offset < 0 ? node.lastChild : node.childNodes[offset - 1];
           if (!before) break;
           if (before.nodeType == 3) {
-            view.domSelection().collapse(before, before.nodeValue.length);
+            var _sel = view.domSelection();
+            if (_sel) _sel.collapse(before, before.nodeValue.length);
             break;
           } else {
             node = before;
@@ -3380,7 +3391,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);
@@ -4562,9 +4573,9 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       };
     } else {
       if (parse.sel) {
-        var _sel = resolveSelection(view, view.state.doc, parse.sel);
-        if (_sel && !_sel.eq(view.state.selection)) {
-          var _tr2 = view.state.tr.setSelection(_sel);
+        var _sel2 = resolveSelection(view, view.state.doc, parse.sel);
+        if (_sel2 && !_sel2.eq(view.state.selection)) {
+          var _tr2 = view.state.tr.setSelection(_sel2);
           if (compositionID) _tr2.setMeta("composition", compositionID);
           view.dispatch(_tr2);
         }
@@ -4641,8 +4652,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   }
   if (!tr) tr = view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from));
   if (parse.sel) {
-    var _sel2 = resolveSelection(view, tr.doc, parse.sel);
-    if (_sel2 && !(chrome && android && view.composing && _sel2.empty && (change.start != change.endB || view.input.lastAndroidDelete < Date.now() - 100) && (_sel2.head == chFrom || _sel2.head == tr.mapping.map(chTo) - 1) || ie && _sel2.empty && _sel2.head == chFrom)) tr.setSelection(_sel2);
+    var _sel3 = resolveSelection(view, tr.doc, parse.sel);
+    if (_sel3 && !(chrome && android && view.composing && _sel3.empty && (change.start != change.endB || view.input.lastAndroidDelete < Date.now() - 100) && (_sel3.head == chFrom || _sel3.head == tr.mapping.map(chTo) - 1) || ie && _sel3.empty && _sel3.head == chFrom)) tr.setSelection(_sel3);
   }
   if (storedMarks) tr.ensureMarks(storedMarks);
   if (compositionID) tr.setMeta("composition", compositionID);
@@ -5096,6 +5107,12 @@ var EditorView = function () {
     key: "domSelectionRange",
     value: function domSelectionRange() {
       var sel = this.domSelection();
+      if (!sel) return {
+        focusNode: null,
+        focusOffset: 0,
+        anchorNode: null,
+        anchorOffset: 0
+      };
       return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel;
     }
   }, {
@@ -5127,7 +5144,7 @@ function updateCursorWrapper(view) {
     dom.setAttribute("alt", "");
     view.cursorWrapper = {
       dom: dom,
-      deco: Decoration.widget(view.state.selection.head, dom, {
+      deco: Decoration.widget(view.state.selection.from, dom, {
         raw: true,
         marks: view.markCursor
       })

package/dist/index.js

@@ -659,6 +659,8 @@ function endOfTextblockHorizontal(view, state, dir) {
         return false;
     let offset = $head.parentOffset, atStart = !offset, atEnd = offset == $head.parent.content.size;
     let sel = view.domSelection();
+    if (!sel)
+        return $head.pos == $head.start() || $head.pos == $head.end();
     // If the textblock is all LTR, or the browser doesn't support
     // Selection.modify (Edge), fall back to a primitive approach
     if (!maybeRTL.test($head.parent.textContent) || !sel.modify)
@@ -1195,7 +1197,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 +1269,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"))
@@ -2280,12 +2283,21 @@ function removeClassOnSelectionChange(view) {
 }
 function selectCursorWrapper(view) {
     let domSel = view.domSelection(), range = document.createRange();
+    if (!domSel)
+        return;
     let node = view.cursorWrapper.dom, img = node.nodeName == "IMG";
     if (img)
-        range.setEnd(node.parentNode, domIndex(node) + 1);
+        range.setStart(node.parentNode, domIndex(node) + 1);
     else
-        range.setEnd(node, 0);
-    range.collapse(false);
+        range.setStart(node, 0);
+    let sel = view.state.selection;
+    if (sel.empty) {
+        range.collapse(true);
+    }
+    else {
+        let end = view.domAtPos(sel.to);
+        range.setEnd(end.node, end.offset);
+    }
     domSel.removeAllRanges();
     domSel.addRange(range);
     // Kludge to kill 'control selection' in IE11 when selecting an
@@ -2573,6 +2585,8 @@ function setSelFocus(view, node, offset) {
         }
     }
     let sel = view.domSelection();
+    if (!sel)
+        return;
     if (selectionCollapsed(sel)) {
         let range = document.createRange();
         range.setEnd(node, offset);
@@ -3139,6 +3153,8 @@ function runHandlerOnContext(view, propName, pos, inside, event) {
 function updateSelection(view, selection, origin) {
     if (!view.focused)
         view.focus();
+    if (view.state.selection.eq(selection))
+        return;
     let tr = view.state.tr.setSelection(selection);
     if (origin == "pointer")
         tr.setMeta("pointer", true);
@@ -3393,8 +3409,8 @@ const timeoutComposition = android ? 5000 : -1;
 editHandlers.compositionstart = editHandlers.compositionupdate = view => {
     if (!view.composing) {
         view.domObserver.flush();
-        let { state } = view, $pos = state.selection.$from;
-        if (state.selection.empty &&
+        let { state } = view, $pos = state.selection.$to;
+        if (state.selection instanceof TextSelection &&
             (state.storedMarks ||
                 (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore.marks.some(m => m.type.spec.inclusive === false)))) {
             // Need to wrap the cursor in mark nodes different from the ones in the DOM context
@@ -3414,7 +3430,9 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
                     if (!before)
                         break;
                     if (before.nodeType == 3) {
-                        view.domSelection().collapse(before, before.nodeValue.length);
+                        let sel = view.domSelection();
+                        if (sel)
+                            sel.collapse(before, before.nodeValue.length);
                         break;
                     }
                     else {
@@ -3631,7 +3649,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";
@@ -5643,6 +5663,8 @@ class EditorView {
     */
     domSelectionRange() {
         let sel = this.domSelection();
+        if (!sel)
+            return { focusNode: null, focusOffset: 0, anchorNode: null, anchorOffset: 0 };
         return safari && this.root.nodeType === 11 &&
             deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel;
     }
@@ -5680,7 +5702,7 @@ function updateCursorWrapper(view) {
         dom.className = "ProseMirror-separator";
         dom.setAttribute("mark-placeholder", "true");
         dom.setAttribute("alt", "");
-        view.cursorWrapper = { dom, deco: Decoration.widget(view.state.selection.head, dom, { raw: true, marks: view.markCursor }) };
+        view.cursorWrapper = { dom, deco: Decoration.widget(view.state.selection.from, dom, { raw: true, marks: view.markCursor }) };
     }
     else {
         view.cursorWrapper = null;

package/package.json

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

package/src/capturekeys.ts

@@ -202,6 +202,7 @@ function setSelFocus(view: EditorView, node: Node, offset: number) {
   }
 
   let sel = view.domSelection()
+  if (!sel) return
   if (selectionCollapsed(sel)) {
     let range = document.createRange()
     range.setEnd(node, offset)

package/src/domcoords.ts

@@ -465,7 +465,8 @@ function endOfTextblockHorizontal(view: EditorView, state: EditorState, dir: "le
   let {$head} = state.selection
   if (!$head.parent.isTextblock) return false
   let offset = $head.parentOffset, atStart = !offset, atEnd = offset == $head.parent.content.size
-  let sel = view.domSelection()
+  let sel: Selection = view.domSelection()!
+  if (!sel) return $head.pos == $head.start() || $head.pos == $head.end()
   // If the textblock is all LTR, or the browser doesn't support
   // Selection.modify (Edge), fall back to a primitive approach
   if (!maybeRTL.test($head.parent.textContent) || !(sel as any).modify)

package/src/index.ts

@@ -489,13 +489,14 @@ export class EditorView {
   /// @internal
   domSelectionRange(): DOMSelectionRange {
     let sel = this.domSelection()
+    if (!sel) return {focusNode: null, focusOffset: 0, anchorNode: null, anchorOffset: 0}
     return browser.safari && this.root.nodeType === 11 &&
       deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel
   }
 
   /// @internal
-  domSelection(): DOMSelection {
-    return (this.root as Document).getSelection()!
+  domSelection(): DOMSelection | null {
+    return (this.root as Document).getSelection()
   }
 }
 
@@ -526,7 +527,7 @@ function updateCursorWrapper(view: EditorView) {
     dom.className = "ProseMirror-separator"
     dom.setAttribute("mark-placeholder", "true")
     dom.setAttribute("alt", "")
-    view.cursorWrapper = {dom, deco: Decoration.widget(view.state.selection.head,
+    view.cursorWrapper = {dom, deco: Decoration.widget(view.state.selection.from,
                                                        dom, {raw: true, marks: view.markCursor} as any)}
   } else {
     view.cursorWrapper = null

package/src/input.ts

@@ -183,6 +183,7 @@ function runHandlerOnContext(
 
 function updateSelection(view: EditorView, selection: Selection, origin: string) {
   if (!view.focused) view.focus()
+  if (view.state.selection.eq(selection)) return
   let tr = view.state.tr.setSelection(selection)
   if (origin == "pointer") tr.setMeta("pointer", true)
   view.dispatch(tr)
@@ -453,8 +454,8 @@ const timeoutComposition = browser.android ? 5000 : -1
 editHandlers.compositionstart = editHandlers.compositionupdate = view => {
   if (!view.composing) {
     view.domObserver.flush()
-    let {state} = view, $pos = state.selection.$from
-    if (state.selection.empty &&
+    let {state} = view, $pos = state.selection.$to
+    if (state.selection instanceof TextSelection &&
         (state.storedMarks ||
          (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore!.marks.some(m => m.type.spec.inclusive === false)))) {
       // Need to wrap the cursor in mark nodes different from the ones in the DOM context
@@ -472,7 +473,8 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
           let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1]
           if (!before) break
           if (before.nodeType == 3) {
-            view.domSelection().collapse(before, before.nodeValue!.length)
+            let sel = view.domSelection()
+            if (sel) sel.collapse(before, before.nodeValue!.length)
             break
           } else {
             node = before
@@ -677,7 +679,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/selection.ts

@@ -136,10 +136,17 @@ function removeClassOnSelectionChange(view: EditorView) {
 
 function selectCursorWrapper(view: EditorView) {
   let domSel = view.domSelection(), range = document.createRange()
+  if (!domSel) return
   let node = view.cursorWrapper!.dom, img = node.nodeName == "IMG"
-  if (img) range.setEnd(node.parentNode!, domIndex(node) + 1)
-  else range.setEnd(node, 0)
-  range.collapse(false)
+  if (img) range.setStart(node.parentNode!, domIndex(node) + 1)
+  else range.setStart(node, 0)
+  let sel = view.state.selection
+  if (sel.empty) {
+    range.collapse(true)
+  } else {
+    let end = view.domAtPos(sel.to)
+    range.setEnd(end.node, end.offset)
+  }
   domSel.removeAllRanges()
   domSel.addRange(range)
   // Kludge to kill 'control selection' in IE11 when selecting an

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"