prosemirror-view 1.34.0 → 1.34.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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
+
+Fix null dereferences caused by the behavior of Chrome's newly supported `caretPositionFromPoint` method.
+
+Fix an issue where on Android, with GBoard, enter presses in code blocks while a spell correction was selected didn't insert a new line.
+
 ## 1.34.0 (2024-08-23)
 
 ### New features

package/dist/index.cjs

@@ -135,7 +135,7 @@ function caretFromPoint(doc, x, y) {
       var pos = doc.caretPositionFromPoint(x, y);
       if (pos) return {
         node: pos.offsetNode,
-        offset: pos.offset
+        offset: Math.min(nodeSize(pos.offsetNode), pos.offset)
       };
     } catch (_) {}
   }
@@ -143,7 +143,7 @@ function caretFromPoint(doc, x, y) {
     var range = doc.caretRangeFromPoint(x, y);
     if (range) return {
       node: range.startContainer,
-      offset: range.startOffset
+      offset: Math.min(nodeSize(range.startContainer), range.startOffset)
     };
   }
 }
@@ -2766,6 +2766,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 +2786,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 +2910,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 +4275,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 +4287,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,
@@ -4560,6 +4574,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   }
   view.input.lastKeyCode = null;
   var change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
+  if (change) view.input.domChangeCount++;
   if ((ios && view.input.lastIOSEnter > Date.now() - 225 || android) && addedNodes.some(function (n) {
     return n.nodeType == 1 && !isInline.test(n.nodeName);
   }) && (!change || change.endA >= change.endB) && view.someProp("handleKeyDown", function (f) {
@@ -4587,7 +4602,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       return;
     }
   }
-  view.input.domChangeCount++;
   if (view.state.selection.from < view.state.selection.to && change.start == change.endB && view.state.selection instanceof prosemirrorState.TextSelection) {
     if (change.start > view.state.selection.from && change.start <= view.state.selection.from + 2 && view.state.selection.from >= parse.from) {
       change.start = view.state.selection.from;

package/dist/index.js

@@ -139,15 +139,18 @@ function caretFromPoint(doc, x, y) {
     if (doc.caretPositionFromPoint) {
         try { // Firefox throws for this call in hard-to-predict circumstances (#994)
             let pos = doc.caretPositionFromPoint(x, y);
+            // Clip the offset, because Chrome will return a text offset
+            // into <input> nodes, which can't be treated as a regular DOM
+            // offset
             if (pos)
-                return { node: pos.offsetNode, offset: pos.offset };
+                return { node: pos.offsetNode, offset: Math.min(nodeSize(pos.offsetNode), pos.offset) };
         }
         catch (_) { }
     }
     if (doc.caretRangeFromPoint) {
         let range = doc.caretRangeFromPoint(x, y);
         if (range)
-            return { node: range.startContainer, offset: range.startOffset };
+            return { node: range.startContainer, offset: Math.min(nodeSize(range.startContainer), range.startOffset) };
     }
 }
 
@@ -2934,6 +2937,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)
@@ -2942,7 +2954,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;
@@ -3083,7 +3095,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
@@ -4606,6 +4620,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)
@@ -4613,8 +4630,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++) {
@@ -4902,6 +4918,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
     view.input.lastKeyCode = null;
     let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
+    if (change)
+        view.input.domChangeCount++;
     if ((ios && view.input.lastIOSEnter > Date.now() - 225 || android) &&
         addedNodes.some(n => n.nodeType == 1 && !isInline.test(n.nodeName)) &&
         (!change || change.endA >= change.endB) &&
@@ -4927,7 +4945,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
             return;
         }
     }
-    view.input.domChangeCount++;
     // Handle the case where overwriting a selection by typing matches
     // the start or end of the selected content, creating a change
     // that's smaller than what was actually overwritten.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.34.0",
+  "version": "1.34.2",
   "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/dom.ts

@@ -141,11 +141,14 @@ export function caretFromPoint(doc: Document, x: number, y: number): {node: Node
   if ((doc as any).caretPositionFromPoint) {
     try { // Firefox throws for this call in hard-to-predict circumstances (#994)
       let pos = (doc as any).caretPositionFromPoint(x, y)
-      if (pos) return {node: pos.offsetNode, offset: pos.offset}
+      // Clip the offset, because Chrome will return a text offset
+      // into <input> nodes, which can't be treated as a regular DOM
+      // offset
+      if (pos) return {node: pos.offsetNode, offset: Math.min(nodeSize(pos.offsetNode), pos.offset)}
     } catch (_) {}
   }
   if (doc.caretRangeFromPoint) {
     let range = doc.caretRangeFromPoint(x, y)
-    if (range) return {node: range.startContainer, offset: range.startOffset}
+    if (range) return {node: range.startContainer, offset: Math.min(nodeSize(range.startContainer), range.startOffset)}
   }
 }

package/src/domchange.ts

@@ -120,6 +120,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
   view.input.lastKeyCode = null
 
   let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide)
+  if (change) view.input.domChangeCount++
   if ((browser.ios && view.input.lastIOSEnter > Date.now() - 225 || browser.android) &&
       addedNodes.some(n => n.nodeType == 1 && !isInline.test(n.nodeName)) &&
       (!change || change.endA >= change.endB) &&
@@ -144,7 +145,6 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
     }
   }
 
-  view.input.domChangeCount++
   // Handle the case where overwriting a selection by typing matches
   // the start or end of the selected content, creating a change
   // that's smaller than what was actually overwritten.

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