prosemirror-view 1.28.2 → 1.28.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.28.3 (2022-10-05)
+
+### Bug fixes
+
+Work around the five-year-old Safari bug where it won't accurately report the selection inside shadow roots, which would break ProseMirror when put in shadow DOM.
+
 ## 1.28.2 (2022-09-24)
 
 ### Bug fixes

package/dist/index.cjs

@@ -36,28 +36,6 @@ var prosemirrorModel = require('prosemirror-model');
 
 var prosemirrorTransform = require('prosemirror-transform');
 
-var nav = typeof navigator != "undefined" ? navigator : null;
-var doc = typeof document != "undefined" ? document : null;
-var agent = nav && nav.userAgent || "";
-var ie_edge = /Edge\/(\d+)/.exec(agent);
-var ie_upto10 = /MSIE \d/.exec(agent);
-var ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
-var ie = !!(ie_upto10 || ie_11up || ie_edge);
-var ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
-var gecko = !ie && /gecko\/(\d+)/i.test(agent);
-gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
-
-var _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
-
-var chrome = !!_chrome;
-var chrome_version = _chrome ? +_chrome[1] : 0;
-var safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
-var ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
-var mac = ios || (nav ? /Mac/.test(nav.platform) : false);
-var android = /Android \d/.test(agent);
-var webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
-var webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
-
 var domIndex = function domIndex(node) {
   for (var index = 0;; index++) {
     node = node.previousSibling;
@@ -130,9 +108,7 @@ function hasBlockDesc(dom) {
 }
 
 var selectionCollapsed = function selectionCollapsed(domSel) {
-  var collapsed = domSel.isCollapsed;
-  if (collapsed && chrome && domSel.rangeCount && !domSel.getRangeAt(0).collapsed) collapsed = false;
-  return collapsed;
+  return domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset, domSel.anchorNode, domSel.anchorOffset);
 };
 
 function keyEvent(keyCode, key) {
@@ -143,6 +119,38 @@ function keyEvent(keyCode, key) {
   return event;
 }
 
+function deepActiveElement(doc) {
+  var elt = doc.activeElement;
+
+  while (elt && elt.shadowRoot) {
+    elt = elt.shadowRoot.activeElement;
+  }
+
+  return elt;
+}
+
+var nav = typeof navigator != "undefined" ? navigator : null;
+var doc = typeof document != "undefined" ? document : null;
+var agent = nav && nav.userAgent || "";
+var ie_edge = /Edge\/(\d+)/.exec(agent);
+var ie_upto10 = /MSIE \d/.exec(agent);
+var ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
+var ie = !!(ie_upto10 || ie_11up || ie_edge);
+var ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
+var gecko = !ie && /gecko\/(\d+)/i.test(agent);
+gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
+
+var _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
+
+var chrome = !!_chrome;
+var chrome_version = _chrome ? +_chrome[1] : 0;
+var safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
+var ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
+var mac = ios || (nav ? /Mac/.test(nav.platform) : false);
+var android = /Android \d/.test(agent);
+var webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
+var webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
+
 function windowRect(doc) {
   return {
     left: 0,
@@ -654,15 +662,27 @@ function endOfTextblockHorizontal(view, state, dir) {
   var sel = view.domSelection();
   if (!maybeRTL.test($head.parent.textContent) || !sel.modify) return dir == "left" || dir == "backward" ? atStart : atEnd;
   return withFlushedState(view, state, function () {
-    var oldRange = sel.getRangeAt(0),
-        oldNode = sel.focusNode,
-        oldOff = sel.focusOffset;
+    var _view$domSelectionRan = view.domSelectionRange(),
+        oldNode = _view$domSelectionRan.focusNode,
+        oldOff = _view$domSelectionRan.focusOffset,
+        anchorNode = _view$domSelectionRan.anchorNode,
+        anchorOffset = _view$domSelectionRan.anchorOffset;
+
     var oldBidiLevel = sel.caretBidiLevel;
     sel.modify("move", dir, "character");
     var parentDOM = $head.depth ? view.docView.domAfterPos($head.before()) : view.dom;
-    var result = !parentDOM.contains(sel.focusNode.nodeType == 1 ? sel.focusNode : sel.focusNode.parentNode) || oldNode == sel.focusNode && oldOff == sel.focusOffset;
-    sel.removeAllRanges();
-    sel.addRange(oldRange);
+
+    var _view$domSelectionRan2 = view.domSelectionRange(),
+        newNode = _view$domSelectionRan2.focusNode,
+        newOff = _view$domSelectionRan2.focusOffset;
+
+    var result = newNode && !parentDOM.contains(newNode.nodeType == 1 ? newNode : newNode.parentNode) || oldNode == newNode && oldOff == newOff;
+
+    try {
+      sel.collapse(anchorNode, anchorOffset);
+      if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend) sel.extend(oldNode, oldOff);
+    } catch (_) {}
+
     if (oldBidiLevel != null) sel.caretBidiLevel = oldBidiLevel;
     return result;
   });
@@ -1102,16 +1122,9 @@ var ViewDesc = function () {
         domSel.collapse(anchorDOM.node, anchorDOM.offset);
 
         try {
-          if (anchor != head) {
-            try {
-              domSel.extend(headDOM.node, headDOM.offset);
-            } catch (_) {}
-          }
-
+          if (anchor != head) domSel.extend(headDOM.node, headDOM.offset);
           domSelExtended = true;
-        } catch (err) {
-          if (!(err instanceof DOMException)) throw err;
-        }
+        } catch (_) {}
       }
 
       if (!domSelExtended) {
@@ -1496,7 +1509,7 @@ var NodeViewDesc = function (_ViewDesc4) {
           from = _view$state$selection.from,
           to = _view$state$selection.to;
       if (!(view.state.selection instanceof prosemirrorState.TextSelection) || from < pos || to > pos + this.node.content.size) return null;
-      var sel = view.domSelection();
+      var sel = view.domSelectionRange();
       var textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
       if (!textNode || !this.dom.contains(textNode.parentNode)) return null;
 
@@ -2406,7 +2419,7 @@ function replaceNodes(nodes, from, to, view, replacement) {
 
 function selectionFromDOM(view) {
   var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var domSel = view.domSelection(),
+  var domSel = view.domSelectionRange(),
       doc = view.state.doc;
   if (!domSel.focusNode) return null;
   var nearestDesc = view.docView.nearestDesc(domSel.focusNode),
@@ -2455,7 +2468,7 @@ function selectionToDOM(view) {
   if (!editorOwnsSelection(view)) return;
 
   if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && chrome) {
-    var domSel = view.domSelection(),
+    var domSel = view.domSelectionRange(),
         curSel = view.domObserver.currentSelection;
 
     if (domSel.anchorNode && curSel.anchorNode && isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, curSel.anchorNode, curSel.anchorOffset)) {
@@ -2538,7 +2551,7 @@ function resetEditable(element) {
 function removeClassOnSelectionChange(view) {
   var doc = view.dom.ownerDocument;
   doc.removeEventListener("selectionchange", view.input.hideSelectionGuard);
-  var domSel = view.domSelection();
+  var domSel = view.domSelectionRange();
   var node = domSel.anchorNode,
       offset = domSel.anchorOffset;
   doc.addEventListener("selectionchange", view.input.hideSelectionGuard = function () {
@@ -2600,7 +2613,7 @@ function hasFocusAndSelection(view) {
 }
 
 function hasSelection(view) {
-  var sel = view.domSelection();
+  var sel = view.domSelectionRange();
   if (!sel.anchorNode) return false;
 
   try {
@@ -2612,7 +2625,7 @@ function hasSelection(view) {
 
 function anchorInRightPlace(view) {
   var anchorDOM = view.docView.domFromPos(view.state.selection.anchor, 0);
-  var domSel = view.domSelection();
+  var domSel = view.domSelectionRange();
   return isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset);
 }
 
@@ -2676,7 +2689,7 @@ function isIgnorable(dom) {
 }
 
 function skipIgnoredNodesLeft(view) {
-  var sel = view.domSelection();
+  var sel = view.domSelectionRange();
   var node = sel.focusNode,
       offset = sel.focusOffset;
   if (!node) return;
@@ -2722,11 +2735,11 @@ function skipIgnoredNodesLeft(view) {
     }
   }
 
-  if (force) setSelFocus(view, sel, node, offset);else if (moveNode) setSelFocus(view, sel, moveNode, moveOffset);
+  if (force) setSelFocus(view, node, offset);else if (moveNode) setSelFocus(view, moveNode, moveOffset);
 }
 
 function skipIgnoredNodesRight(view) {
-  var sel = view.domSelection();
+  var sel = view.domSelectionRange();
   var node = sel.focusNode,
       offset = sel.focusOffset;
   if (!node) return;
@@ -2765,7 +2778,7 @@ function skipIgnoredNodesRight(view) {
     }
   }
 
-  if (moveNode) setSelFocus(view, sel, moveNode, moveOffset);
+  if (moveNode) setSelFocus(view, moveNode, moveOffset);
 }
 
 function isBlockNode(dom) {
@@ -2773,7 +2786,9 @@ function isBlockNode(dom) {
   return desc && desc.node && desc.node.isBlock;
 }
 
-function setSelFocus(view, sel, node, offset) {
+function setSelFocus(view, node, offset) {
+  var sel = view.domSelection();
+
   if (selectionCollapsed(sel)) {
     var range = document.createRange();
     range.setEnd(node, offset);
@@ -2842,9 +2857,9 @@ function switchEditable(view, node, state) {
 function safariDownArrowBug(view) {
   if (!safari || view.state.selection.$head.parentOffset > 0) return false;
 
-  var _view$domSelection = view.domSelection(),
-      focusNode = _view$domSelection.focusNode,
-      focusOffset = _view$domSelection.focusOffset;
+  var _view$domSelectionRan3 = view.domSelectionRange(),
+      focusNode = _view$domSelectionRan3.focusNode,
+      focusOffset = _view$domSelectionRan3.focusOffset;
 
   if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 && focusNode.firstChild && focusNode.firstChild.contentEditable == "false") {
     var child = focusNode.firstChild;
@@ -3639,14 +3654,14 @@ editHandlers.compositionstart = editHandlers.compositionupdate = function (view)
       endComposition(view);
 
       if (gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.length) {
-        var sel = view.domSelection();
+        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) {
-            sel.collapse(before, before.nodeValue.length);
+            view.domSelection().collapse(before, before.nodeValue.length);
             break;
           } else {
             node = before;
@@ -3898,7 +3913,7 @@ handlers.focus = function (view) {
     view.domObserver.start();
     view.focused = true;
     setTimeout(function () {
-      if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelection())) selectionToDOM(view);
+      if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelectionRange())) selectionToDOM(view);
     }, 20);
   }
 };
@@ -4826,7 +4841,7 @@ var DOMObserver = function () {
       if (this.suppressingSelectionUpdates) return selectionToDOM(this.view);
 
       if (ie && ie_version <= 11 && !this.view.state.selection.empty) {
-        var sel = this.view.domSelection();
+        var sel = this.view.domSelectionRange();
         if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset)) return this.flushSoon();
       }
 
@@ -4835,14 +4850,27 @@ var DOMObserver = function () {
   }, {
     key: "setCurSelection",
     value: function setCurSelection() {
-      this.currentSelection.set(this.view.domSelection());
+      this.currentSelection.set(this.view.domSelectionRange());
     }
   }, {
     key: "ignoreSelectionChange",
     value: function ignoreSelectionChange(sel) {
-      if (sel.rangeCount == 0) return true;
-      var container = sel.getRangeAt(0).commonAncestorContainer;
-      var desc = this.view.docView.nearestDesc(container);
+      if (!sel.focusNode) return true;
+      var ancestors = new Set(),
+          container;
+
+      for (var scan = sel.focusNode; scan; scan = parentNode(scan)) {
+        ancestors.add(scan);
+      }
+
+      for (var _scan = sel.anchorNode; _scan; _scan = parentNode(_scan)) {
+        if (ancestors.has(_scan)) {
+          container = _scan;
+          break;
+        }
+      }
+
+      var desc = container && this.view.docView.nearestDesc(container);
 
       if (desc && desc.ignoreMutation({
         type: "selection",
@@ -4864,7 +4892,7 @@ var DOMObserver = function () {
         this.queue.length = 0;
       }
 
-      var sel = view.domSelection();
+      var sel = view.domSelectionRange();
       var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
       var from = -1,
           to = -1,
@@ -4984,6 +5012,40 @@ function checkCSS(view) {
   }
 }
 
+function safariShadowSelectionRange(view) {
+  var found;
+
+  function read(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    found = event.getTargetRanges()[0];
+  }
+
+  view.dom.addEventListener("beforeinput", read, true);
+  document.execCommand("indent");
+  view.dom.removeEventListener("beforeinput", read, true);
+  var anchorNode = found.startContainer,
+      anchorOffset = found.startOffset;
+  var focusNode = found.endContainer,
+      focusOffset = found.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];
+  }
+
+  return {
+    anchorNode: anchorNode,
+    anchorOffset: anchorOffset,
+    focusNode: focusNode,
+    focusOffset: focusOffset
+  };
+}
+
 function parseBetween(view, from_, to_) {
   var _view$docView$parseRa = view.docView.parseRange(from_, to_),
       parent = _view$docView$parseRa.node,
@@ -4992,7 +5054,7 @@ function parseBetween(view, from_, to_) {
       from = _view$docView$parseRa.from,
       to = _view$docView$parseRa.to;
 
-  var domSel = view.domSelection();
+  var domSel = view.domSelectionRange();
   var find;
   var anchor = domSel.anchorNode;
 
@@ -5502,7 +5564,7 @@ var EditorView = function () {
         var forceSelUpdate = updateDoc && (ie || chrome) && !this.composing && !prev.selection.empty && !state.selection.empty && selectionContextChanged(prev.selection, state.selection);
 
         if (updateDoc) {
-          var chromeKludge = chrome ? this.trackWrites = this.domSelection().focusNode : null;
+          var chromeKludge = chrome ? this.trackWrites = this.domSelectionRange().focusNode : null;
 
           if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
             this.docView.updateOuterDeco([]);
@@ -5513,7 +5575,7 @@ var EditorView = function () {
           if (chromeKludge && !this.trackWrites) forceSelUpdate = true;
         }
 
-        if (forceSelUpdate || !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelection()) && anchorInRightPlace(this))) {
+        if (forceSelUpdate || !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) && anchorInRightPlace(this))) {
           selectionToDOM(this, forceSelUpdate);
         } else {
           syncNodeSelection(this, state.selection);
@@ -5538,7 +5600,7 @@ var EditorView = function () {
     value: function scrollToSelection() {
       var _this16 = this;
 
-      var startDOM = this.domSelection().focusNode;
+      var startDOM = this.domSelectionRange().focusNode;
       if (this.someProp("handleScrollToSelection", function (f) {
         return f(_this16);
       })) ;else if (this.state.selection instanceof prosemirrorState.NodeSelection) {
@@ -5721,6 +5783,11 @@ var EditorView = function () {
       var dispatchTransaction = this._props.dispatchTransaction;
       if (dispatchTransaction) dispatchTransaction.call(this, tr);else this.updateState(this.state.apply(tr));
     }
+  }, {
+    key: "domSelectionRange",
+    value: function domSelectionRange() {
+      return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom ? safariShadowSelectionRange(this) : this.domSelection();
+    }
   }, {
     key: "domSelection",
     value: function domSelection() {

package/dist/index.js

@@ -2,27 +2,6 @@ import { TextSelection, NodeSelection, Selection, AllSelection } from 'prosemirr
 import { DOMSerializer, Fragment, Mark, Slice, DOMParser } from 'prosemirror-model';
 import { dropPoint } from 'prosemirror-transform';
 
-const nav = typeof navigator != "undefined" ? navigator : null;
-const doc = typeof document != "undefined" ? document : null;
-const agent = (nav && nav.userAgent) || "";
-const ie_edge = /Edge\/(\d+)/.exec(agent);
-const ie_upto10 = /MSIE \d/.exec(agent);
-const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
-const ie = !!(ie_upto10 || ie_11up || ie_edge);
-const ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
-const gecko = !ie && /gecko\/(\d+)/i.test(agent);
-gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
-const _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
-const chrome = !!_chrome;
-const chrome_version = _chrome ? +_chrome[1] : 0;
-const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
-// Is true for both iOS and iPadOS for convenience
-const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
-const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
-const android = /Android \d/.test(agent);
-const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
-const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
-
 const domIndex = function (node) {
     for (var index = 0;; index++) {
         node = node.previousSibling;
@@ -100,10 +79,7 @@ function hasBlockDesc(dom) {
 // Work around Chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=447523
 // (isCollapsed inappropriately returns true in shadow dom)
 const selectionCollapsed = function (domSel) {
-    let collapsed = domSel.isCollapsed;
-    if (collapsed && chrome && domSel.rangeCount && !domSel.getRangeAt(0).collapsed)
-        collapsed = false;
-    return collapsed;
+    return domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset, domSel.anchorNode, domSel.anchorOffset);
 };
 function keyEvent(keyCode, key) {
     let event = document.createEvent("Event");
@@ -112,6 +88,33 @@ function keyEvent(keyCode, key) {
     event.key = event.code = key;
     return event;
 }
+function deepActiveElement(doc) {
+    let elt = doc.activeElement;
+    while (elt && elt.shadowRoot)
+        elt = elt.shadowRoot.activeElement;
+    return elt;
+}
+
+const nav = typeof navigator != "undefined" ? navigator : null;
+const doc = typeof document != "undefined" ? document : null;
+const agent = (nav && nav.userAgent) || "";
+const ie_edge = /Edge\/(\d+)/.exec(agent);
+const ie_upto10 = /MSIE \d/.exec(agent);
+const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
+const ie = !!(ie_upto10 || ie_11up || ie_edge);
+const ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
+const gecko = !ie && /gecko\/(\d+)/i.test(agent);
+gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
+const _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
+const chrome = !!_chrome;
+const chrome_version = _chrome ? +_chrome[1] : 0;
+const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
+// Is true for both iOS and iPadOS for convenience
+const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
+const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
+const android = /Android \d/.test(agent);
+const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
+const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
 
 function windowRect(doc) {
     return { left: 0, right: doc.documentElement.clientWidth,
@@ -580,16 +583,21 @@ function endOfTextblockHorizontal(view, state, dir) {
         // one character, and see if that moves the cursor out of the
         // textblock (or doesn't move it at all, when at the start/end of
         // the document).
-        let oldRange = sel.getRangeAt(0), oldNode = sel.focusNode, oldOff = sel.focusOffset;
+        let { focusNode: oldNode, focusOffset: oldOff, anchorNode, anchorOffset } = view.domSelectionRange();
         let oldBidiLevel = sel.caretBidiLevel // Only for Firefox
         ;
         sel.modify("move", dir, "character");
         let parentDOM = $head.depth ? view.docView.domAfterPos($head.before()) : view.dom;
-        let result = !parentDOM.contains(sel.focusNode.nodeType == 1 ? sel.focusNode : sel.focusNode.parentNode) ||
-            (oldNode == sel.focusNode && oldOff == sel.focusOffset);
+        let { focusNode: newNode, focusOffset: newOff } = view.domSelectionRange();
+        let result = newNode && !parentDOM.contains(newNode.nodeType == 1 ? newNode : newNode.parentNode) ||
+            (oldNode == newNode && oldOff == newOff);
         // Restore the previous selection
-        sel.removeAllRanges();
-        sel.addRange(oldRange);
+        try {
+            sel.collapse(anchorNode, anchorOffset);
+            if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend)
+                sel.extend(oldNode, oldOff);
+        }
+        catch (_) { }
         if (oldBidiLevel != null)
             sel.caretBidiLevel = oldBidiLevel;
         return result;
@@ -957,24 +965,17 @@ class ViewDesc {
         if ((domSel.extend || anchor == head) && !brKludge) {
             domSel.collapse(anchorDOM.node, anchorDOM.offset);
             try {
-                if (anchor != head) {
-                    // This can crash on Safari if the editor is hidden, and
-                    // there was no selection. (#1308)
-                    try {
-                        domSel.extend(headDOM.node, headDOM.offset);
-                    }
-                    catch (_) { }
-                }
+                if (anchor != head)
+                    domSel.extend(headDOM.node, headDOM.offset);
                 domSelExtended = true;
             }
-            catch (err) {
+            catch (_) {
                 // In some cases with Chrome the selection is empty after calling
                 // collapse, even when it should be valid. This appears to be a bug, but
                 // it is difficult to isolate. If this happens fallback to the old path
                 // without using extend.
-                if (!(err instanceof DOMException))
-                    throw err;
-                // declare global: DOMException
+                // Similarly, this could crash on Safari if the editor is hidden, and
+                // there was no selection.
             }
         }
         if (!domSelExtended) {
@@ -1295,7 +1296,7 @@ class NodeViewDesc extends ViewDesc {
         let { from, to } = view.state.selection;
         if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size)
             return null;
-        let sel = view.domSelection();
+        let sel = view.domSelectionRange();
         let textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
         if (!textNode || !this.dom.contains(textNode.parentNode))
             return null;
@@ -2031,7 +2032,7 @@ function replaceNodes(nodes, from, to, view, replacement) {
 }
 
 function selectionFromDOM(view, origin = null) {
-    let domSel = view.domSelection(), doc = view.state.doc;
+    let domSel = view.domSelectionRange(), doc = view.state.doc;
     if (!domSel.focusNode)
         return null;
     let nearestDesc = view.docView.nearestDesc(domSel.focusNode), inWidget = nearestDesc && nearestDesc.size == 0;
@@ -2075,7 +2076,7 @@ function selectionToDOM(view, force = false) {
     // in Safari. And the drag selection delay is to workarond issues
     // which only present in Chrome.
     if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && chrome) {
-        let domSel = view.domSelection(), curSel = view.domObserver.currentSelection;
+        let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection;
         if (domSel.anchorNode && curSel.anchorNode &&
             isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, curSel.anchorNode, curSel.anchorOffset)) {
             view.input.mouseDown.delayedSelectionSync = true;
@@ -2150,7 +2151,7 @@ function resetEditable(element) {
 function removeClassOnSelectionChange(view) {
     let doc = view.dom.ownerDocument;
     doc.removeEventListener("selectionchange", view.input.hideSelectionGuard);
-    let domSel = view.domSelection();
+    let domSel = view.domSelectionRange();
     let node = domSel.anchorNode, offset = domSel.anchorOffset;
     doc.addEventListener("selectionchange", view.input.hideSelectionGuard = () => {
         if (domSel.anchorNode != node || domSel.anchorOffset != offset) {
@@ -2214,7 +2215,7 @@ function hasFocusAndSelection(view) {
     return hasSelection(view);
 }
 function hasSelection(view) {
-    let sel = view.domSelection();
+    let sel = view.domSelectionRange();
     if (!sel.anchorNode)
         return false;
     try {
@@ -2230,7 +2231,7 @@ function hasSelection(view) {
 }
 function anchorInRightPlace(view) {
     let anchorDOM = view.docView.domFromPos(view.state.selection.anchor, 0);
-    let domSel = view.domSelection();
+    let domSel = view.domSelectionRange();
     return isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset);
 }
 
@@ -2297,7 +2298,7 @@ function isIgnorable(dom) {
 // Make sure the cursor isn't directly after one or more ignored
 // nodes, which will confuse the browser's cursor motion logic.
 function skipIgnoredNodesLeft(view) {
-    let sel = view.domSelection();
+    let sel = view.domSelectionRange();
     let node = sel.focusNode, offset = sel.focusOffset;
     if (!node)
         return;
@@ -2349,14 +2350,14 @@ function skipIgnoredNodesLeft(view) {
         }
     }
     if (force)
-        setSelFocus(view, sel, node, offset);
+        setSelFocus(view, node, offset);
     else if (moveNode)
-        setSelFocus(view, sel, moveNode, moveOffset);
+        setSelFocus(view, moveNode, moveOffset);
 }
 // Make sure the cursor isn't directly before one or more ignored
 // nodes.
 function skipIgnoredNodesRight(view) {
-    let sel = view.domSelection();
+    let sel = view.domSelectionRange();
     let node = sel.focusNode, offset = sel.focusOffset;
     if (!node)
         return;
@@ -2398,13 +2399,14 @@ function skipIgnoredNodesRight(view) {
         }
     }
     if (moveNode)
-        setSelFocus(view, sel, moveNode, moveOffset);
+        setSelFocus(view, moveNode, moveOffset);
 }
 function isBlockNode(dom) {
     let desc = dom.pmViewDesc;
     return desc && desc.node && desc.node.isBlock;
 }
-function setSelFocus(view, sel, node, offset) {
+function setSelFocus(view, node, offset) {
+    let sel = view.domSelection();
     if (selectionCollapsed(sel)) {
         let range = document.createRange();
         range.setEnd(node, offset);
@@ -2480,7 +2482,7 @@ function switchEditable(view, node, state) {
 function safariDownArrowBug(view) {
     if (!safari || view.state.selection.$head.parentOffset > 0)
         return false;
-    let { focusNode, focusOffset } = view.domSelection();
+    let { focusNode, focusOffset } = view.domSelectionRange();
     if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 &&
         focusNode.firstChild && focusNode.firstChild.contentEditable == "false") {
         let child = focusNode.firstChild;
@@ -3206,13 +3208,13 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
             // the inserted text won't inherit the marks. So this moves it
             // inside if necessary.
             if (gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore.marks.length) {
-                let sel = view.domSelection();
+                let sel = view.domSelectionRange();
                 for (let node = sel.focusNode, offset = sel.focusOffset; node && node.nodeType == 1 && offset != 0;) {
                     let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1];
                     if (!before)
                         break;
                     if (before.nodeType == 3) {
-                        sel.collapse(before, before.nodeValue.length);
+                        view.domSelection().collapse(before, before.nodeValue.length);
                         break;
                     }
                     else {
@@ -3468,7 +3470,7 @@ handlers.focus = view => {
         view.domObserver.start();
         view.focused = true;
         setTimeout(() => {
-            if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelection()))
+            if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelectionRange()))
                 selectionToDOM(view);
         }, 20);
     }
@@ -4300,7 +4302,7 @@ class DOMObserver {
         // us a selection change event before the DOM changes are
         // reported.
         if (ie && ie_version <= 11 && !this.view.state.selection.empty) {
-            let sel = this.view.domSelection();
+            let sel = this.view.domSelectionRange();
             // Selection.isCollapsed isn't reliable on IE
             if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset))
                 return this.flushSoon();
@@ -4308,13 +4310,20 @@ class DOMObserver {
         this.flush();
     }
     setCurSelection() {
-        this.currentSelection.set(this.view.domSelection());
+        this.currentSelection.set(this.view.domSelectionRange());
     }
     ignoreSelectionChange(sel) {
-        if (sel.rangeCount == 0)
+        if (!sel.focusNode)
             return true;
-        let container = sel.getRangeAt(0).commonAncestorContainer;
-        let desc = this.view.docView.nearestDesc(container);
+        let ancestors = new Set, container;
+        for (let scan = sel.focusNode; scan; scan = parentNode(scan))
+            ancestors.add(scan);
+        for (let scan = sel.anchorNode; scan; scan = parentNode(scan))
+            if (ancestors.has(scan)) {
+                container = scan;
+                break;
+            }
+        let desc = container && this.view.docView.nearestDesc(container);
         if (desc && desc.ignoreMutation({
             type: "selection",
             target: container.nodeType == 3 ? container.parentNode : container
@@ -4332,7 +4341,7 @@ class DOMObserver {
             mutations = this.queue.concat(mutations);
             this.queue.length = 0;
         }
-        let sel = view.domSelection();
+        let sel = view.domSelectionRange();
         let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
         let from = -1, to = -1, typeOver = false, added = [];
         if (view.editable) {
@@ -4449,6 +4458,33 @@ function checkCSS(view) {
         cssCheckWarned = true;
     }
 }
+// Used to work around a Safari Selection/shadow DOM bug
+// Based on https://github.com/codemirror/dev/issues/414 fix
+function safariShadowSelectionRange(view) {
+    let found;
+    function read(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        found = event.getTargetRanges()[0];
+    }
+    // Because Safari (at least in 2018-2022) doesn't provide regular
+    // access to the selection inside a shadowRoot, we have to perform a
+    // ridiculous hack to get at it—using `execCommand` to trigger a
+    // `beforeInput` event so that we can read the target range from the
+    // event.
+    view.dom.addEventListener("beforeinput", read, true);
+    document.execCommand("indent");
+    view.dom.removeEventListener("beforeinput", read, true);
+    let anchorNode = found.startContainer, anchorOffset = found.startOffset;
+    let focusNode = found.endContainer, focusOffset = found.endOffset;
+    let currentAnchor = view.domAtPos(view.state.selection.anchor);
+    // Since such a range doesn't distinguish between anchor and head,
+    // use a heuristic that flips it around if its end matches the
+    // current anchor.
+    if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset))
+        [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
+    return { anchorNode, anchorOffset, focusNode, focusOffset };
+}
 
 // Note that all referencing and parsing is done with the
 // start-of-operation selection and document, since that's the one
@@ -4457,7 +4493,7 @@ function checkCSS(view) {
 // readDOMChange.
 function parseBetween(view, from_, to_) {
     let { node: parent, fromOffset, toOffset, from, to } = view.docView.parseRange(from_, to_);
-    let domSel = view.domSelection();
+    let domSel = view.domSelectionRange();
     let find;
     let anchor = domSel.anchorNode;
     if (anchor && view.dom.contains(anchor.nodeType == 1 ? anchor : anchor.parentNode)) {
@@ -4985,7 +5021,7 @@ class EditorView {
                 // Chrome sometimes starts misreporting the selection, so this
                 // tracks that and forces a selection reset when our update
                 // did write to the node.
-                let chromeKludge = chrome ? (this.trackWrites = this.domSelection().focusNode) : null;
+                let chromeKludge = chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null;
                 if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
                     this.docView.updateOuterDeco([]);
                     this.docView.destroy();
@@ -4999,7 +5035,8 @@ class EditorView {
             // can cause a spurious DOM selection update, disrupting mouse
             // drag selection.
             if (forceSelUpdate ||
-                !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelection()) && anchorInRightPlace(this))) {
+                !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
+                    anchorInRightPlace(this))) {
                 selectionToDOM(this, forceSelUpdate);
             }
             else {
@@ -5023,7 +5060,7 @@ class EditorView {
     @internal
     */
     scrollToSelection() {
-        let startDOM = this.domSelection().focusNode;
+        let startDOM = this.domSelectionRange().focusNode;
         if (this.someProp("handleScrollToSelection", f => f(this))) ;
         else if (this.state.selection instanceof NodeSelection) {
             let target = this.docView.domAfterPos(this.state.selection.from);
@@ -5261,6 +5298,13 @@ class EditorView {
     /**
     @internal
     */
+    domSelectionRange() {
+        return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom
+            ? safariShadowSelectionRange(this) : this.domSelection();
+    }
+    /**
+    @internal
+    */
     domSelection() {
         return this.root.getSelection();
     }

package/package.json

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

package/src/capturekeys.ts

@@ -1,7 +1,7 @@
 import {Selection, NodeSelection, TextSelection, AllSelection, EditorState} from "prosemirror-state"
 import {EditorView} from "./index"
 import * as browser from "./browser"
-import {domIndex, selectionCollapsed, DOMSelection} from "./dom"
+import {domIndex, selectionCollapsed} from "./dom"
 import {selectionToDOM} from "./selection"
 
 function moveSelectionBlock(state: EditorState, dir: number) {
@@ -62,7 +62,7 @@ function isIgnorable(dom: Node) {
 // Make sure the cursor isn't directly after one or more ignored
 // nodes, which will confuse the browser's cursor motion logic.
 function skipIgnoredNodesLeft(view: EditorView) {
-  let sel = view.domSelection()
+  let sel = view.domSelectionRange()
   let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
   let moveNode, moveOffset: number | undefined, force = false
@@ -103,14 +103,14 @@ function skipIgnoredNodesLeft(view: EditorView) {
       }
     }
   }
-  if (force) setSelFocus(view, sel, node, offset)
-  else if (moveNode) setSelFocus(view, sel, moveNode, moveOffset!)
+  if (force) setSelFocus(view, node, offset)
+  else if (moveNode) setSelFocus(view, moveNode, moveOffset!)
 }
 
 // Make sure the cursor isn't directly before one or more ignored
 // nodes.
 function skipIgnoredNodesRight(view: EditorView) {
-  let sel = view.domSelection()
+  let sel = view.domSelectionRange()
   let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
   let len = nodeLen(node)
@@ -144,7 +144,7 @@ function skipIgnoredNodesRight(view: EditorView) {
       }
     }
   }
-  if (moveNode) setSelFocus(view, sel, moveNode, moveOffset!)
+  if (moveNode) setSelFocus(view, moveNode, moveOffset!)
 }
 
 function isBlockNode(dom: Node) {
@@ -152,7 +152,8 @@ function isBlockNode(dom: Node) {
   return desc && desc.node && desc.node.isBlock
 }
 
-function setSelFocus(view: EditorView, sel: DOMSelection, node: Node, offset: number) {
+function setSelFocus(view: EditorView, node: Node, offset: number) {
+  let sel = view.domSelection()
   if (selectionCollapsed(sel)) {
     let range = document.createRange()
     range.setEnd(node, offset)
@@ -222,7 +223,7 @@ function switchEditable(view: EditorView, node: HTMLElement, state: string) {
 // after it
 function safariDownArrowBug(view: EditorView) {
   if (!browser.safari || view.state.selection.$head.parentOffset > 0) return false
-  let {focusNode, focusOffset} = view.domSelection()
+  let {focusNode, focusOffset} = view.domSelectionRange()
   if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 &&
       focusNode.firstChild && (focusNode.firstChild as HTMLElement).contentEditable == "false") {
     let child = focusNode.firstChild as HTMLElement

package/src/dom.ts

@@ -1,7 +1,9 @@
-import * as browser from "./browser"
-
 export type DOMNode = InstanceType<typeof window.Node>
 export type DOMSelection = InstanceType<typeof window.Selection>
+export type DOMSelectionRange = {
+  focusNode: DOMNode | null, focusOffset: number,
+  anchorNode: DOMNode | null, anchorOffset: number
+}
 
 export const domIndex = function(node: Node) {
   for (var index = 0;; index++) {
@@ -10,7 +12,7 @@ export const domIndex = function(node: Node) {
   }
 }
 
-export const parentNode = function(node: Node) {
+export const parentNode = function(node: Node): Node | null {
   let parent = (node as HTMLSlotElement).assignedSlot || node.parentNode
   return parent && parent.nodeType == 11 ? (parent as ShadowRoot).host : parent
 }
@@ -80,11 +82,9 @@ function hasBlockDesc(dom: Node) {
 
 // Work around Chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=447523
 // (isCollapsed inappropriately returns true in shadow dom)
-export const selectionCollapsed = function(domSel: Selection) {
-  let collapsed = domSel.isCollapsed
-  if (collapsed && browser.chrome && domSel.rangeCount && !domSel.getRangeAt(0).collapsed)
-    collapsed = false
-  return collapsed
+export const selectionCollapsed = function(domSel: DOMSelectionRange) {
+  return domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset,
+                                                  domSel.anchorNode!, domSel.anchorOffset)
 }
 
 export function keyEvent(keyCode: number, key: string) {
@@ -94,3 +94,9 @@ export function keyEvent(keyCode: number, key: string) {
   ;(event as any).key = (event as any).code = key
   return event
 }
+
+export function deepActiveElement(doc: Document) {
+  let elt = doc.activeElement
+  while (elt && elt.shadowRoot) elt = elt.shadowRoot.activeElement
+  return elt
+}

package/src/domchange.ts

@@ -15,7 +15,7 @@ import {EditorView} from "./index"
 function parseBetween(view: EditorView, from_: number, to_: number) {
   let {node: parent, fromOffset, toOffset, from, to} = view.docView.parseRange(from_, to_)
 
-  let domSel = view.domSelection()
+  let domSel = view.domSelectionRange()
   let find: {node: DOMNode, offset: number, pos?: number}[] | undefined
   let anchor = domSel.anchorNode
   if (anchor && view.dom.contains(anchor.nodeType == 1 ? anchor : anchor.parentNode)) {

package/src/domcoords.ts

@@ -452,15 +452,18 @@ function endOfTextblockHorizontal(view: EditorView, state: EditorState, dir: "le
     // one character, and see if that moves the cursor out of the
     // textblock (or doesn't move it at all, when at the start/end of
     // the document).
-    let oldRange = sel.getRangeAt(0), oldNode = sel.focusNode, oldOff = sel.focusOffset
+    let {focusNode: oldNode, focusOffset: oldOff, anchorNode, anchorOffset} = view.domSelectionRange()
     let oldBidiLevel = (sel as any).caretBidiLevel // Only for Firefox
     ;(sel as any).modify("move", dir, "character")
     let parentDOM = $head.depth ? view.docView.domAfterPos($head.before()) : view.dom
-    let result = !parentDOM.contains(sel.focusNode!.nodeType == 1 ? sel.focusNode : sel.focusNode!.parentNode) ||
-        (oldNode == sel.focusNode && oldOff == sel.focusOffset)
+    let {focusNode: newNode, focusOffset: newOff} = view.domSelectionRange()
+    let result = newNode && !parentDOM.contains(newNode.nodeType == 1 ? newNode : newNode.parentNode) ||
+        (oldNode == newNode && oldOff == newOff)
     // Restore the previous selection
-    sel.removeAllRanges()
-    sel.addRange(oldRange)
+    try {
+      sel.collapse(anchorNode, anchorOffset)
+      if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend) sel.extend(oldNode, oldOff)
+    } catch (_) {}
     if (oldBidiLevel != null) (sel as any).caretBidiLevel = oldBidiLevel
     return result
   })

package/src/domobserver.ts

@@ -1,6 +1,6 @@
 import {Selection} from "prosemirror-state"
 import * as browser from "./browser"
-import {domIndex, isEquivalentPosition, selectionCollapsed, DOMSelection} from "./dom"
+import {domIndex, isEquivalentPosition, selectionCollapsed, parentNode, DOMSelectionRange, DOMNode} from "./dom"
 import {hasFocusAndSelection, selectionToDOM, selectionFromDOM} from "./selection"
 import {EditorView} from "./index"
 
@@ -21,7 +21,7 @@ class SelectionState {
   focusNode: Node | null = null
   focusOffset: number = 0
 
-  set(sel: DOMSelection) {
+  set(sel: DOMSelectionRange) {
     this.anchorNode = sel.anchorNode; this.anchorOffset = sel.anchorOffset
     this.focusNode = sel.focusNode; this.focusOffset = sel.focusOffset
   }
@@ -30,7 +30,7 @@ class SelectionState {
     this.anchorNode = this.focusNode = null
   }
 
-  eq(sel: DOMSelection) {
+  eq(sel: DOMSelectionRange) {
     return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset &&
       sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset
   }
@@ -127,7 +127,7 @@ export class DOMObserver {
     // us a selection change event before the DOM changes are
     // reported.
     if (browser.ie && browser.ie_version <= 11 && !this.view.state.selection.empty) {
-      let sel = this.view.domSelection()
+      let sel = this.view.domSelectionRange()
       // Selection.isCollapsed isn't reliable on IE
       if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode!, sel.anchorOffset))
         return this.flushSoon()
@@ -136,16 +136,21 @@ export class DOMObserver {
   }
 
   setCurSelection() {
-    this.currentSelection.set(this.view.domSelection())
+    this.currentSelection.set(this.view.domSelectionRange())
   }
 
-  ignoreSelectionChange(sel: DOMSelection) {
-    if (sel.rangeCount == 0) return true
-    let container = sel.getRangeAt(0).commonAncestorContainer
-    let desc = this.view.docView.nearestDesc(container)
+  ignoreSelectionChange(sel: DOMSelectionRange) {
+    if (!sel.focusNode) return true
+    let ancestors: Set<Node> = new Set, container: DOMNode | undefined
+    for (let scan: DOMNode | null = sel.focusNode; scan; scan = parentNode(scan)) ancestors.add(scan)
+    for (let scan = sel.anchorNode; scan; scan = parentNode(scan)) if (ancestors.has(scan)) {
+      container = scan
+      break
+    }
+    let desc = container && this.view.docView.nearestDesc(container)
     if (desc && desc.ignoreMutation({
       type: "selection",
-      target: container.nodeType == 3 ? container.parentNode : container
+      target: container!.nodeType == 3 ? container!.parentNode : container
     } as any)) {
       this.setCurSelection()
       return true
@@ -161,7 +166,7 @@ export class DOMObserver {
       this.queue.length = 0
     }
 
-    let sel = view.domSelection()
+    let sel = view.domSelectionRange()
     let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)
 
     let from = -1, to = -1, typeOver = false, added: Node[] = []
@@ -270,3 +275,34 @@ function checkCSS(view: EditorView) {
     cssCheckWarned = true
   }
 }
+
+// Used to work around a Safari Selection/shadow DOM bug
+// Based on https://github.com/codemirror/dev/issues/414 fix
+export function safariShadowSelectionRange(view: EditorView): DOMSelectionRange {
+  let found: StaticRange | undefined
+  function read(event: InputEvent) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    found = event.getTargetRanges()[0]
+  }
+
+  // Because Safari (at least in 2018-2022) doesn't provide regular
+  // access to the selection inside a shadowRoot, we have to perform a
+  // ridiculous hack to get at it—using `execCommand` to trigger a
+  // `beforeInput` event so that we can read the target range from the
+  // event.
+  view.dom.addEventListener("beforeinput", read, true)
+  document.execCommand("indent")
+  view.dom.removeEventListener("beforeinput", read, true)
+
+  let anchorNode = found!.startContainer, anchorOffset = found!.startOffset
+  let focusNode = found!.endContainer, focusOffset = found!.endOffset
+
+  let currentAnchor = view.domAtPos(view.state.selection.anchor)
+  // Since such a range doesn't distinguish between anchor and head,
+  // use a heuristic that flips it around if its end matches the
+  // current anchor.
+  if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset))
+    [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset]
+  return {anchorNode, anchorOffset, focusNode, focusOffset}
+}

package/src/index.ts

@@ -7,9 +7,9 @@ import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition, InputState} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
-import {DOMObserver} from "./domobserver"
+import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
 import {readDOMChange} from "./domchange"
-import {DOMSelection, DOMNode} from "./dom"
+import {DOMSelection, DOMNode, DOMSelectionRange, deepActiveElement} from "./dom"
 import * as browser from "./browser"
 
 export {Decoration, DecorationSet, DecorationAttrs, DecorationSource} from "./decoration"
@@ -195,7 +195,7 @@ export class EditorView {
         // Chrome sometimes starts misreporting the selection, so this
         // tracks that and forces a selection reset when our update
         // did write to the node.
-        let chromeKludge = browser.chrome ? (this.trackWrites = this.domSelection().focusNode) : null
+        let chromeKludge = browser.chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null
         if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
           this.docView.updateOuterDeco([])
           this.docView.destroy()
@@ -208,7 +208,8 @@ export class EditorView {
       // can cause a spurious DOM selection update, disrupting mouse
       // drag selection.
       if (forceSelUpdate ||
-          !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelection()) && anchorInRightPlace(this))) {
+          !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
+            anchorInRightPlace(this))) {
         selectionToDOM(this, forceSelUpdate)
       } else {
         syncNodeSelection(this, state.selection)
@@ -230,7 +231,7 @@ export class EditorView {
 
   /// @internal
   scrollToSelection() {
-    let startDOM = this.domSelection().focusNode!
+    let startDOM = this.domSelectionRange().focusNode!
     if (this.someProp("handleScrollToSelection", f => f(this))) {
       // Handled
     } else if (this.state.selection instanceof NodeSelection) {
@@ -449,6 +450,12 @@ export class EditorView {
     else this.updateState(this.state.apply(tr))
   }
 
+  /// @internal
+  domSelectionRange(): DOMSelectionRange {
+    return browser.safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom
+      ? safariShadowSelectionRange(this) : this.domSelection()
+  }
+
   /// @internal
   domSelection(): DOMSelection {
     return (this.root as Document).getSelection()!

package/src/input.ts

@@ -463,12 +463,12 @@ editHandlers.compositionstart = editHandlers.compositionupdate = view => {
       // the inserted text won't inherit the marks. So this moves it
       // inside if necessary.
       if (browser.gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore!.marks.length) {
-        let sel = view.domSelection()
+        let sel = view.domSelectionRange()
         for (let node = sel.focusNode, offset = sel.focusOffset; node && node.nodeType == 1 && offset != 0;) {
           let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1]
           if (!before) break
           if (before.nodeType == 3) {
-            sel.collapse(before, before.nodeValue!.length)
+            view.domSelection().collapse(before, before.nodeValue!.length)
             break
           } else {
             node = before
@@ -715,7 +715,7 @@ handlers.focus = view => {
     view.domObserver.start()
     view.focused = true
     setTimeout(() => {
-      if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelection()))
+      if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelectionRange()))
         selectionToDOM(view)
     }, 20)
   }

package/src/selection.ts

@@ -2,12 +2,12 @@ import {TextSelection, NodeSelection, Selection} from "prosemirror-state"
 import {ResolvedPos} from "prosemirror-model"
 
 import * as browser from "./browser"
-import {selectionCollapsed, isEquivalentPosition, domIndex, isOnEdge} from "./dom"
+import {isEquivalentPosition, domIndex, isOnEdge, selectionCollapsed} from "./dom"
 import {EditorView} from "./index"
 import {NodeViewDesc} from "./viewdesc"
 
 export function selectionFromDOM(view: EditorView, origin: string | null = null) {
-  let domSel = view.domSelection(), doc = view.state.doc
+  let domSel = view.domSelectionRange(), doc = view.state.doc
   if (!domSel.focusNode) return null
   let nearestDesc = view.docView.nearestDesc(domSel.focusNode), inWidget = nearestDesc && nearestDesc.size == 0
   let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1)
@@ -50,7 +50,7 @@ export function selectionToDOM(view: EditorView, force = false) {
   // in Safari. And the drag selection delay is to workarond issues
   // which only present in Chrome.
   if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && browser.chrome) {
-    let domSel = view.domSelection(), curSel = view.domObserver.currentSelection
+    let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection
     if (domSel.anchorNode && curSel.anchorNode &&
         isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset,
                              curSel.anchorNode, curSel.anchorOffset)) {
@@ -121,7 +121,7 @@ function resetEditable(element: HTMLElement) {
 function removeClassOnSelectionChange(view: EditorView) {
   let doc = view.dom.ownerDocument
   doc.removeEventListener("selectionchange", view.input.hideSelectionGuard!)
-  let domSel = view.domSelection()
+  let domSel = view.domSelectionRange()
   let node = domSel.anchorNode, offset = domSel.anchorOffset
   doc.addEventListener("selectionchange", view.input.hideSelectionGuard = () => {
     if (domSel.anchorNode != node || domSel.anchorOffset != offset) {
@@ -186,7 +186,7 @@ export function hasFocusAndSelection(view: EditorView) {
 }
 
 export function hasSelection(view: EditorView) {
-  let sel = view.domSelection()
+  let sel = view.domSelectionRange()
   if (!sel.anchorNode) return false
   try {
     // Firefox will raise 'permission denied' errors when accessing
@@ -201,6 +201,6 @@ export function hasSelection(view: EditorView) {
 
 export function anchorInRightPlace(view: EditorView) {
   let anchorDOM = view.docView.domFromPos(view.state.selection.anchor, 0)
-  let domSel = view.domSelection()
+  let domSel = view.domSelectionRange()
   return isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode!, domSel.anchorOffset)
 }

package/src/viewdesc.ts

@@ -419,20 +419,16 @@ export class ViewDesc {
     if ((domSel.extend || anchor == head) && !brKludge) {
       domSel.collapse(anchorDOM.node, anchorDOM.offset)
       try {
-        if (anchor != head) {
-          // This can crash on Safari if the editor is hidden, and
-          // there was no selection. (#1308)
-          try { domSel.extend(headDOM.node, headDOM.offset) }
-          catch (_) {}
-        }
+        if (anchor != head)
+          domSel.extend(headDOM.node, headDOM.offset)
         domSelExtended = true
-      } catch (err) {
+      } catch (_) {
         // In some cases with Chrome the selection is empty after calling
         // collapse, even when it should be valid. This appears to be a bug, but
         // it is difficult to isolate. If this happens fallback to the old path
         // without using extend.
-        if (!(err instanceof DOMException)) throw err
-        // declare global: DOMException
+        // Similarly, this could crash on Safari if the editor is hidden, and
+        // there was no selection.
       }
     }
     if (!domSelExtended) {
@@ -762,7 +758,7 @@ export class NodeViewDesc extends ViewDesc {
     // are inside of this node
     let {from, to} = view.state.selection
     if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size) return null
-    let sel = view.domSelection()
+    let sel = view.domSelectionRange()
     let textNode = nearbyTextNode(sel.focusNode!, sel.focusOffset)
     if (!textNode || !this.dom.contains(textNode.parentNode)) return null