prosemirror-view 1.33.9 → 1.33.11

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 1.33.11 (2024-08-19)
+
+### Bug fixes
+
+Delete the selection on composition start when on a mark boundary to force Chrome to apply the correct style to the composition.
+
+When the browser starts a composition and the selection spans across blocks, start by clearing it to make sure the composed text node lands in a valid position.
+
+## 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

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(),
@@ -2214,10 +2215,11 @@ 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);
+  range.collapse(true);
   domSel.removeAllRanges();
   domSel.addRange(range);
   if (!img && !view.state.selection.visible && ie && ie_version <= 11) {
@@ -2449,6 +2451,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 +2972,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,22 +3191,23 @@ 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();
       endComposition(view, true);
       view.markCursor = null;
     } else {
-      endComposition(view);
+      endComposition(view, !state.selection.empty);
       if (gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.length) {
         var sel = view.domSelectionRange();
         for (var node = sel.focusNode, offset = sel.focusOffset; node && node.nodeType == 1 && offset != 0;) {
           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;
@@ -3265,13 +3270,13 @@ function timestampFromCustomEvent() {
   return event.timeStamp;
 }
 function endComposition(view) {
-  var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var restarting = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (android && view.domObserver.flushingSoon >= 0) return;
   view.domObserver.forceFlush();
   clearComposition(view);
-  if (forceUpdate || view.docView && view.docView.dirty) {
+  if (restarting || view.docView && view.docView.dirty) {
     var sel = selectionFromDOM(view);
-    if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel));else view.updateState(view.state);
+    if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel));else if ((view.markCursor || restarting) && !view.state.selection.empty) view.dispatch(view.state.tr.deleteSelection());else view.updateState(view.state);
     return true;
   }
   return false;
@@ -4562,9 +4567,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 +4646,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 +5101,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 +5138,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)
@@ -2281,12 +2283,14 @@ 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);
+    range.collapse(true);
     domSel.removeAllRanges();
     domSel.addRange(range);
     // Kludge to kill 'control selection' in IE11 when selecting an
@@ -2574,6 +2578,8 @@ function setSelFocus(view, node, offset) {
         }
     }
     let sel = view.domSelection();
+    if (!sel)
+        return;
     if (selectionCollapsed(sel)) {
         let range = document.createRange();
         range.setEnd(node, offset);
@@ -3140,6 +3146,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);
@@ -3394,8 +3402,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
@@ -3404,7 +3412,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
             view.markCursor = null;
         }
         else {
-            endComposition(view);
+            endComposition(view, !state.selection.empty);
             // In firefox, if the cursor is after but outside a marked node,
             // the inserted text won't inherit the marks. So this moves it
             // inside if necessary.
@@ -3415,7 +3423,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 {
@@ -3483,15 +3493,17 @@ function timestampFromCustomEvent() {
 /**
 @internal
 */
-function endComposition(view, forceUpdate = false) {
+function endComposition(view, restarting = false) {
     if (android && view.domObserver.flushingSoon >= 0)
         return;
     view.domObserver.forceFlush();
     clearComposition(view);
-    if (forceUpdate || view.docView && view.docView.dirty) {
+    if (restarting || view.docView && view.docView.dirty) {
         let sel = selectionFromDOM(view);
         if (sel && !sel.eq(view.state.selection))
             view.dispatch(view.state.tr.setSelection(sel));
+        else if ((view.markCursor || restarting) && !view.state.selection.empty)
+            view.dispatch(view.state.tr.deleteSelection());
         else
             view.updateState(view.state);
         return true;
@@ -5646,6 +5658,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;
     }
@@ -5683,7 +5697,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.9",
+  "version": "1.33.11",
   "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
@@ -462,7 +463,7 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
       endComposition(view, true)
       view.markCursor = null
     } else {
-      endComposition(view)
+      endComposition(view, !state.selection.empty)
       // In firefox, if the cursor is after but outside a marked node,
       // the inserted text won't inherit the marks. So this moves it
       // inside if necessary.
@@ -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
@@ -537,13 +539,14 @@ function timestampFromCustomEvent() {
 }
 
 /// @internal
-export function endComposition(view: EditorView, forceUpdate = false) {
+export function endComposition(view: EditorView, restarting = false) {
   if (browser.android && view.domObserver.flushingSoon >= 0) return
   view.domObserver.forceFlush()
   clearComposition(view)
-  if (forceUpdate || view.docView && view.docView.dirty) {
+  if (restarting || view.docView && view.docView.dirty) {
     let sel = selectionFromDOM(view)
     if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel))
+    else if ((view.markCursor || restarting) && !view.state.selection.empty) view.dispatch(view.state.tr.deleteSelection())
     else view.updateState(view.state)
     return true
   }

package/src/selection.ts

@@ -136,10 +136,11 @@ 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)
+  range.collapse(true)
   domSel.removeAllRanges()
   domSel.addRange(range)
   // Kludge to kill 'control selection' in IE11 when selecting an