prosemirror-view 1.34.1 → 1.34.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.34.3 (2024-09-19)
+
+### Bug fixes
+
+Fix an issue that would, during some types of document updates, leave the document DOM in an improper form.
+
+Handle the case where drag-selecting in Firefox creates a selection with multiple distinct ranges.
+
+## 1.34.2 (2024-09-03)
+
+### Bug fixes
+
+Fix pasting in Chrome with the require-trusted-types-for CSP enabled.
+
+Fix an issue where, for some kinds of IME on Windows, pressing Enter while in a composition would execute the resulting command on the wrong selection, erasing some typed content.
+
 ## 1.34.1 (2024-08-26)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1840,6 +1840,7 @@ var ViewTreeUpdater = function () {
             this.index++;
             return true;
           } else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+            this.destroyBetween(this.index, i);
             this.top.children[this.index] = updated;
             if (updated.contentDOM) {
               updated.dirty = CONTENT_DIRTY;
@@ -1858,7 +1859,7 @@ var ViewTreeUpdater = function () {
   }, {
     key: "recreateWrapper",
     value: function recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
-      if (next.dirty || node.isAtom || !next.children.length || !next.node.content.eq(node.content)) return null;
+      if (next.dirty || node.isAtom || !next.children.length || !next.node.content.eq(node.content) || !sameOuterDeco(outerDeco, next.outerDeco) || !innerDeco.eq(next.innerDeco)) return null;
       var wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
       if (wrapper.contentDOM) {
         wrapper.children = next.children;
@@ -2105,10 +2106,10 @@ function selectionFromDOM(view) {
   var head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1);
   if (head < 0) return null;
   var $head = doc.resolve(head),
-    $anchor,
+    anchor,
     selection;
   if (selectionCollapsed(domSel)) {
-    $anchor = $head;
+    anchor = head;
     while (nearestDesc && !nearestDesc.node) nearestDesc = nearestDesc.parent;
     var nearestDescNode = nearestDesc.node;
     if (nearestDesc && nearestDescNode.isAtom && prosemirrorState.NodeSelection.isSelectable(nearestDescNode) && nearestDesc.parent && !(nearestDescNode.isInline && isOnEdge(domSel.focusNode, domSel.focusOffset, nearestDesc.dom))) {
@@ -2116,10 +2117,26 @@ function selectionFromDOM(view) {
       selection = new prosemirrorState.NodeSelection(head == pos ? $head : doc.resolve(pos));
     }
   } else {
-    var anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+    if (domSel instanceof view.dom.ownerDocument.defaultView.Selection && domSel.rangeCount > 1) {
+      var min = head,
+        max = head;
+      for (var i = 0; i < domSel.rangeCount; i++) {
+        var range = domSel.getRangeAt(i);
+        min = Math.min(min, view.docView.posFromDOM(range.startContainer, range.startOffset, 1));
+        max = Math.max(max, view.docView.posFromDOM(range.endContainer, range.endOffset, -1));
+      }
+      if (min < 0) return null;
+      var _ref3 = max == view.state.selection.anchor ? [max, min] : [min, max];
+      var _ref4 = _slicedToArray(_ref3, 2);
+      anchor = _ref4[0];
+      head = _ref4[1];
+      $head = doc.resolve(head);
+    } else {
+      anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+    }
     if (anchor < 0) return null;
-    $anchor = doc.resolve(anchor);
   }
+  var $anchor = doc.resolve(anchor);
   if (!selection) {
     var bias = origin == "pointer" || view.state.selection.head < $head.pos && !inWidget ? 1 : -1;
     selection = selectionBetween(view, $anchor, $head, bias);
@@ -2766,6 +2783,15 @@ var _detachedDoc = null;
 function detachedDoc() {
   return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
 }
+function maybeWrapTrusted(html) {
+  var trustedTypes = window.trustedTypes;
+  if (!trustedTypes) return html;
+  return trustedTypes.createPolicy("detachedDocument", {
+    createHTML: function createHTML(s) {
+      return s;
+    }
+  }).createHTML(html);
+}
 function readHTML(html) {
   var metas = /^(\s*<meta [^>]*>)*/.exec(html);
   if (metas) html = html.slice(metas[0].length);
@@ -2777,7 +2803,7 @@ function readHTML(html) {
   }).join("") + html + wrap.map(function (n) {
     return "</" + n + ">";
   }).reverse().join("");
-  elt.innerHTML = html;
+  elt.innerHTML = maybeWrapTrusted(html);
   if (wrap) for (var i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt;
   return elt;
 }
@@ -2901,7 +2927,7 @@ editHandlers.keydown = function (view, _event) {
   view.input.lastKeyCode = event.keyCode;
   view.input.lastKeyCodeTime = Date.now();
   if (android && chrome && event.keyCode == 13) return;
-  if (event.keyCode != 229) view.domObserver.forceFlush();
+  if (view.domObserver.selectionChanged(view.domSelectionRange())) view.domObserver.flush();else if (event.keyCode != 229) view.domObserver.forceFlush();
   if (ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) {
     var now = Date.now();
     view.input.lastIOSEnter = now;
@@ -4266,6 +4292,11 @@ var DOMObserver = function () {
       }
       return this.queue;
     }
+  }, {
+    key: "selectionChanged",
+    value: function selectionChanged(sel) {
+      return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+    }
   }, {
     key: "flush",
     value: function flush() {
@@ -4273,8 +4304,8 @@ var DOMObserver = function () {
       if (!view.docView || this.flushingSoon > -1) return;
       var mutations = this.pendingRecords();
       if (mutations.length) this.queue = [];
-      var sel = view.domSelectionRange();
-      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
+      var sel = view.domSelectionRange(),
+        newSel = this.selectionChanged(sel);
       var from = -1,
         to = -1,
         typeOver = false,
@@ -4403,11 +4434,11 @@ function rangeToSelectionRange(view, range) {
     focusOffset = range.endOffset;
   var currentAnchor = view.domAtPos(view.state.selection.anchor);
   if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset)) {
-    var _ref3 = [focusNode, focusOffset, anchorNode, anchorOffset];
-    anchorNode = _ref3[0];
-    anchorOffset = _ref3[1];
-    focusNode = _ref3[2];
-    focusOffset = _ref3[3];
+    var _ref5 = [focusNode, focusOffset, anchorNode, anchorOffset];
+    anchorNode = _ref5[0];
+    anchorOffset = _ref5[1];
+    focusNode = _ref5[2];
+    focusOffset = _ref5[3];
   }
   return {
     anchorNode: anchorNode,

package/dist/index.js

@@ -1870,6 +1870,7 @@ class ViewTreeUpdater {
                     return true;
                 }
                 else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+                    this.destroyBetween(this.index, i);
                     this.top.children[this.index] = updated;
                     if (updated.contentDOM) {
                         updated.dirty = CONTENT_DIRTY;
@@ -1889,7 +1890,8 @@ class ViewTreeUpdater {
     // identical content, move over its children.
     recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
         if (next.dirty || node.isAtom || !next.children.length ||
-            !next.node.content.eq(node.content))
+            !next.node.content.eq(node.content) ||
+            !sameOuterDeco(outerDeco, next.outerDeco) || !innerDeco.eq(next.innerDeco))
             return null;
         let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
         if (wrapper.contentDOM) {
@@ -2160,9 +2162,9 @@ function selectionFromDOM(view, origin = null) {
     let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1);
     if (head < 0)
         return null;
-    let $head = doc.resolve(head), $anchor, selection;
+    let $head = doc.resolve(head), anchor, selection;
     if (selectionCollapsed(domSel)) {
-        $anchor = $head;
+        anchor = head;
         while (nearestDesc && !nearestDesc.node)
             nearestDesc = nearestDesc.parent;
         let nearestDescNode = nearestDesc.node;
@@ -2173,11 +2175,25 @@ function selectionFromDOM(view, origin = null) {
         }
     }
     else {
-        let anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+        if (domSel instanceof view.dom.ownerDocument.defaultView.Selection && domSel.rangeCount > 1) {
+            let min = head, max = head;
+            for (let i = 0; i < domSel.rangeCount; i++) {
+                let range = domSel.getRangeAt(i);
+                min = Math.min(min, view.docView.posFromDOM(range.startContainer, range.startOffset, 1));
+                max = Math.max(max, view.docView.posFromDOM(range.endContainer, range.endOffset, -1));
+            }
+            if (min < 0)
+                return null;
+            [anchor, head] = max == view.state.selection.anchor ? [max, min] : [min, max];
+            $head = doc.resolve(head);
+        }
+        else {
+            anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+        }
         if (anchor < 0)
             return null;
-        $anchor = doc.resolve(anchor);
     }
+    let $anchor = doc.resolve(anchor);
     if (!selection) {
         let bias = origin == "pointer" || (view.state.selection.head < $head.pos && !inWidget) ? 1 : -1;
         selection = selectionBetween(view, $anchor, $head, bias);
@@ -2937,6 +2953,15 @@ let _detachedDoc = null;
 function detachedDoc() {
     return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
 }
+function maybeWrapTrusted(html) {
+    let trustedTypes = window.trustedTypes;
+    if (!trustedTypes)
+        return html;
+    // With the require-trusted-types-for CSP, Chrome will block
+    // innerHTML, even on a detached document. This wraps the string in
+    // a way that makes the browser allow us to use its parser again.
+    return trustedTypes.createPolicy("detachedDocument", { createHTML: (s) => s }).createHTML(html);
+}
 function readHTML(html) {
     let metas = /^(\s*<meta [^>]*>)*/.exec(html);
     if (metas)
@@ -2945,7 +2970,7 @@ function readHTML(html) {
     let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap;
     if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
         html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("");
-    elt.innerHTML = html;
+    elt.innerHTML = maybeWrapTrusted(html);
     if (wrap)
         for (let i = 0; i < wrap.length; i++)
             elt = elt.querySelector(wrap[i]) || elt;
@@ -3086,7 +3111,9 @@ editHandlers.keydown = (view, _event) => {
     // and handling them eagerly tends to corrupt the input.
     if (android && chrome && event.keyCode == 13)
         return;
-    if (event.keyCode != 229)
+    if (view.domObserver.selectionChanged(view.domSelectionRange()))
+        view.domObserver.flush();
+    else if (event.keyCode != 229)
         view.domObserver.forceFlush();
     // On iOS, if we preventDefault enter key presses, the virtual
     // keyboard gets confused. So the hack here is to set a flag that
@@ -4609,6 +4636,9 @@ class DOMObserver {
                 this.queue.push(mut);
         return this.queue;
     }
+    selectionChanged(sel) {
+        return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+    }
     flush() {
         let { view } = this;
         if (!view.docView || this.flushingSoon > -1)
@@ -4616,8 +4646,7 @@ class DOMObserver {
         let mutations = this.pendingRecords();
         if (mutations.length)
             this.queue = [];
-        let sel = view.domSelectionRange();
-        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
+        let sel = view.domSelectionRange(), newSel = this.selectionChanged(sel);
         let from = -1, to = -1, typeOver = false, added = [];
         if (view.editable) {
             for (let i = 0; i < mutations.length; i++) {

package/package.json

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

package/src/clipboard.ts

@@ -204,6 +204,15 @@ function detachedDoc() {
   return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"))
 }
 
+function maybeWrapTrusted(html: string): string {
+  let trustedTypes = (window as any).trustedTypes
+  if (!trustedTypes) return html
+  // With the require-trusted-types-for CSP, Chrome will block
+  // innerHTML, even on a detached document. This wraps the string in
+  // a way that makes the browser allow us to use its parser again.
+  return trustedTypes.createPolicy("detachedDocument", {createHTML: (s: string) => s}).createHTML(html)
+}
+
 function readHTML(html: string) {
   let metas = /^(\s*<meta [^>]*>)*/.exec(html)
   if (metas) html = html.slice(metas[0].length)
@@ -211,7 +220,7 @@ function readHTML(html: string) {
   let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap
   if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()])
     html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "</" + n + ">").reverse().join("")
-  elt.innerHTML = html
+  elt.innerHTML = maybeWrapTrusted(html)
   if (wrap) for (let i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt
   return elt
 }

package/src/domobserver.ts

@@ -163,14 +163,17 @@ export class DOMObserver {
     return this.queue
   }
 
+  selectionChanged(sel: DOMSelectionRange) {
+    return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel)
+  }
+
   flush() {
     let {view} = this
     if (!view.docView || this.flushingSoon > -1) return
     let mutations = this.pendingRecords()
     if (mutations.length) this.queue = []
 
-    let sel = view.domSelectionRange()
-    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)
+    let sel = view.domSelectionRange(), newSel = this.selectionChanged(sel)
 
     let from = -1, to = -1, typeOver = false, added: Node[] = []
     if (view.editable) {

package/src/input.ts

@@ -112,7 +112,9 @@ editHandlers.keydown = (view: EditorView, _event: Event) => {
   // to be part of a confused sequence of composition events fired,
   // and handling them eagerly tends to corrupt the input.
   if (browser.android && browser.chrome && event.keyCode == 13) return
-  if (event.keyCode != 229) view.domObserver.forceFlush()
+
+  if (view.domObserver.selectionChanged(view.domSelectionRange())) view.domObserver.flush()
+  else if (event.keyCode != 229) view.domObserver.forceFlush()
 
   // On iOS, if we preventDefault enter key presses, the virtual
   // keyboard gets confused. So the hack here is to set a flag that

package/src/selection.ts

@@ -12,9 +12,9 @@ export function selectionFromDOM(view: EditorView, origin: string | null = null)
   let nearestDesc = view.docView.nearestDesc(domSel.focusNode), inWidget = nearestDesc && nearestDesc.size == 0
   let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1)
   if (head < 0) return null
-  let $head = doc.resolve(head), $anchor, selection
+  let $head = doc.resolve(head), anchor, selection
   if (selectionCollapsed(domSel)) {
-    $anchor = $head
+    anchor = head
     while (nearestDesc && !nearestDesc.node) nearestDesc = nearestDesc.parent
     let nearestDescNode = (nearestDesc as NodeViewDesc).node
     if (nearestDesc && nearestDescNode.isAtom && NodeSelection.isSelectable(nearestDescNode) && nearestDesc.parent
@@ -23,10 +23,22 @@ export function selectionFromDOM(view: EditorView, origin: string | null = null)
       selection = new NodeSelection(head == pos ? $head : doc.resolve(pos))
     }
   } else {
-    let anchor = view.docView.posFromDOM(domSel.anchorNode!, domSel.anchorOffset, 1)
+    if (domSel instanceof view.dom.ownerDocument.defaultView!.Selection && domSel.rangeCount > 1) {
+      let min = head, max = head
+      for (let i = 0; i < domSel.rangeCount; i++) {
+        let range = domSel.getRangeAt(i)
+        min = Math.min(min, view.docView.posFromDOM(range.startContainer, range.startOffset, 1))
+        max = Math.max(max, view.docView.posFromDOM(range.endContainer, range.endOffset, -1))
+      }
+      if (min < 0) return null
+      ;[anchor, head] = max == view.state.selection.anchor ? [max, min] : [min, max]
+      $head = doc.resolve(head)
+    } else {
+      anchor = view.docView.posFromDOM(domSel.anchorNode!, domSel.anchorOffset, 1)
+    }
     if (anchor < 0) return null
-    $anchor = doc.resolve(anchor)
   }
+  let $anchor = doc.resolve(anchor)
 
   if (!selection) {
     let bias = origin == "pointer" || (view.state.selection.head < $head.pos && !inWidget) ? 1 : -1

package/src/viewdesc.ts

@@ -1249,6 +1249,7 @@ class ViewTreeUpdater {
           this.index++
           return true
         } else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+          this.destroyBetween(this.index, i)
           this.top.children[this.index] = updated
           if (updated.contentDOM) {
             updated.dirty = CONTENT_DIRTY
@@ -1270,7 +1271,8 @@ class ViewTreeUpdater {
   recreateWrapper(next: NodeViewDesc, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource,
                   view: EditorView, pos: number) {
     if (next.dirty || node.isAtom || !next.children.length ||
-        !next.node.content.eq(node.content)) return null
+        !next.node.content.eq(node.content) ||
+        !sameOuterDeco(outerDeco, next.outerDeco) || !innerDeco.eq(next.innerDeco)) return null
     let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos)
     if (wrapper.contentDOM) {
       wrapper.children = next.children