prosemirror-view 1.33.2 → 1.33.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.33.4 (2024-04-08)
+
+### Bug fixes
+
+When available, use `Selection.getComposedRanges` on Safari to find the selection inside a shadow DOM.
+
+## 1.33.3 (2024-03-22)
+
+### Bug fixes
+
+Further improve preserving of compositions for IME systems that keep the cursor before the composed text.
+
 ## 1.33.2 (2024-03-21)
 
 ### Bug fixes

package/dist/index.cjs

@@ -69,7 +69,7 @@ function textNodeBefore$1(node, offset) {
   for (;;) {
     if (node.nodeType == 3 && offset) return node;
     if (node.nodeType == 1 && offset > 0) {
-      if (node.contentEditable != "false") return null;
+      if (node.contentEditable == "false") return null;
       node = node.childNodes[offset - 1];
       offset = nodeSize(node);
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -84,7 +84,7 @@ function textNodeAfter$1(node, offset) {
   for (;;) {
     if (node.nodeType == 3 && offset < node.nodeValue.length) return node;
     if (node.nodeType == 1 && offset < node.childNodes.length) {
-      if (node.contentEditable != "false") return null;
+      if (node.contentEditable == "false") return null;
       node = node.childNodes[offset];
       offset = 0;
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -1044,6 +1044,11 @@ var ViewDesc = function () {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return false;
+    }
   }]);
   return ViewDesc;
 }();
@@ -1308,14 +1313,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.domSelectionRange();
-      var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
-      var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
-      var textNode = textBefore || textAfter;
-      if (textBefore && textAfter && textBefore != textAfter) {
-        var descAfter = textAfter.pmViewDesc;
-        if (!descAfter || descAfter instanceof TextViewDesc && descAfter.node.text != textAfter.nodeValue) textNode = textAfter;
-      }
+      var textNode = view.input.compositionNode;
       if (!textNode || !this.dom.contains(textNode.parentNode)) return null;
       if (this.node.inlineContent) {
         var text = textNode.nodeValue;
@@ -1505,6 +1503,11 @@ var TextViewDesc = function (_NodeViewDesc) {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return this.node.text == text;
+    }
   }]);
   return TextViewDesc;
 }(NodeViewDesc);
@@ -2822,6 +2825,7 @@ var InputState = _createClass(function InputState() {
   this.lastTouch = 0;
   this.lastAndroidDelete = 0;
   this.composing = false;
+  this.compositionNode = null;
   this.composingTimeout = -1;
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
@@ -3209,6 +3213,7 @@ editHandlers.compositionend = function (view, event) {
     view.input.composing = false;
     view.input.compositionEndedAt = event.timeStamp;
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+    view.input.compositionNode = null;
     if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
       return view.domObserver.flush();
     });
@@ -3229,6 +3234,22 @@ function clearComposition(view) {
   }
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+  var sel = view.domSelectionRange();
+  if (!sel.focusNode) return null;
+  var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+  var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+  if (textBefore && textAfter && textBefore != textAfter) {
+    var descAfter = textAfter.pmViewDesc;
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+      return textAfter;
+    } else if (view.input.compositionNode == textAfter) {
+      var descBefore = textBefore.pmViewDesc;
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue))) return textAfter;
+    }
+  }
+  return textBefore;
+}
 function timestampFromCustomEvent() {
   var event = document.createEvent("Event");
   event.initEvent("event", true, true);
@@ -4328,20 +4349,11 @@ function checkCSS(view) {
     cssCheckWarned = true;
   }
 }
-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;
+function rangeToSelectionRange(view, range) {
+  var anchorNode = range.startContainer,
+    anchorOffset = range.startOffset;
+  var focusNode = range.endContainer,
+    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];
@@ -4357,6 +4369,22 @@ function safariShadowSelectionRange(view) {
     focusOffset: focusOffset
   };
 }
+function safariShadowSelectionRange(view, selection) {
+  if (selection.getComposedRanges) {
+    var range = selection.getComposedRanges(view.root)[0];
+    if (range) return rangeToSelectionRange(view, range);
+  }
+  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);
+  return found ? rangeToSelectionRange(view, found) : null;
+}
 function parseBetween(view, from_, to_) {
   var _view$docView$parseRa = view.docView.parseRange(from_, to_),
     parent = _view$docView$parseRa.node,
@@ -4798,6 +4826,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.domSelectionRange().focusNode : null;
+          if (this.composing) this.input.compositionNode = findCompositionNode(this);
           if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
             this.docView.updateOuterDeco(outerDeco);
             this.docView.destroy();
@@ -5027,7 +5056,8 @@ var EditorView = function () {
   }, {
     key: "domSelectionRange",
     value: function domSelectionRange() {
-      return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom ? safariShadowSelectionRange(this) : this.domSelection();
+      var sel = this.domSelection();
+      return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel;
     }
   }, {
     key: "domSelection",

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { EditorState, Transaction, Selection, Plugin } from 'prosemirror-state';
-import { Mark, Node, ParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
+import { Mark, Node, TagParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
 import { Mapping } from 'prosemirror-transform';
 
 type DOMNode = InstanceType<typeof window.Node>;
@@ -324,7 +324,7 @@ declare class ViewDesc {
     matchesMark(mark: Mark): boolean;
     matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
     matchesHack(nodeName: string): boolean;
-    parseRule(): ParseRule | null;
+    parseRule(): Omit<TagParseRule, "tag"> | null;
     stopEvent(event: Event): boolean;
     get size(): number;
     get border(): number;
@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -369,7 +370,7 @@ declare class NodeViewDesc extends ViewDesc {
     readonly nodeDOM: DOMNode;
     constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, dom: DOMNode, contentDOM: HTMLElement | null, nodeDOM: DOMNode, view: EditorView, pos: number);
     static create(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView, pos: number): NodeViewDesc | TextViewDesc;
-    parseRule(): ParseRule | null;
+    parseRule(): Omit<TagParseRule, "tag"> | null;
     matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
     get size(): number;
     get border(): 0 | 1;
@@ -393,7 +394,9 @@ declare class NodeViewDesc extends ViewDesc {
 }
 declare class TextViewDesc extends NodeViewDesc {
     constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode, view: EditorView);
-    parseRule(): ParseRule;
+    parseRule(): {
+        skip: any;
+    };
     update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): boolean;
     inParent(): boolean;
     domFromPos(pos: number): {
@@ -405,6 +408,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EditorState, Transaction, Selection, Plugin } from 'prosemirror-state';
-import { Mark, Node, ParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
+import { Mark, Node, TagParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
 import { Mapping } from 'prosemirror-transform';
 
 type DOMNode = InstanceType<typeof window.Node>;
@@ -324,7 +324,7 @@ declare class ViewDesc {
     matchesMark(mark: Mark): boolean;
     matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
     matchesHack(nodeName: string): boolean;
-    parseRule(): ParseRule | null;
+    parseRule(): Omit<TagParseRule, "tag"> | null;
     stopEvent(event: Event): boolean;
     get size(): number;
     get border(): number;
@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -369,7 +370,7 @@ declare class NodeViewDesc extends ViewDesc {
     readonly nodeDOM: DOMNode;
     constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, dom: DOMNode, contentDOM: HTMLElement | null, nodeDOM: DOMNode, view: EditorView, pos: number);
     static create(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView, pos: number): NodeViewDesc | TextViewDesc;
-    parseRule(): ParseRule | null;
+    parseRule(): Omit<TagParseRule, "tag"> | null;
     matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
     get size(): number;
     get border(): 0 | 1;
@@ -393,7 +394,9 @@ declare class NodeViewDesc extends ViewDesc {
 }
 declare class TextViewDesc extends NodeViewDesc {
     constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode, view: EditorView);
-    parseRule(): ParseRule;
+    parseRule(): {
+        skip: any;
+    };
     update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): boolean;
     inParent(): boolean;
     domFromPos(pos: number): {
@@ -405,6 +408,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.js

@@ -65,7 +65,7 @@ function textNodeBefore$1(node, offset) {
         if (node.nodeType == 3 && offset)
             return node;
         if (node.nodeType == 1 && offset > 0) {
-            if (node.contentEditable != "false")
+            if (node.contentEditable == "false")
                 return null;
             node = node.childNodes[offset - 1];
             offset = nodeSize(node);
@@ -84,7 +84,7 @@ function textNodeAfter$1(node, offset) {
         if (node.nodeType == 3 && offset < node.nodeValue.length)
             return node;
         if (node.nodeType == 1 && offset < node.childNodes.length) {
-            if (node.contentEditable != "false")
+            if (node.contentEditable == "false")
                 return null;
             node = node.childNodes[offset];
             offset = 0;
@@ -1115,6 +1115,7 @@ class ViewDesc {
     }
     get domAtom() { return false; }
     get ignoreForCoords() { return false; }
+    isText(text) { return false; }
 }
 // A widget desc represents a widget decoration, which is a DOM node
 // drawn between the document nodes.
@@ -1377,15 +1378,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.domSelectionRange();
-        let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
-        let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
-        let textNode = textBefore || textAfter;
-        if (textBefore && textAfter && textBefore != textAfter) {
-            let descAfter = textAfter.pmViewDesc;
-            if (!descAfter || descAfter instanceof TextViewDesc && descAfter.node.text != textAfter.nodeValue)
-                textNode = textAfter;
-        }
+        let textNode = view.input.compositionNode;
         if (!textNode || !this.dom.contains(textNode.parentNode))
             return null;
         if (this.node.inlineContent) {
@@ -1527,6 +1520,7 @@ class TextViewDesc extends NodeViewDesc {
             this.dirty = NODE_DIRTY;
     }
     get domAtom() { return false; }
+    isText(text) { return this.node.text == text; }
 }
 // A dummy desc used to tag trailing BR or IMG nodes created to work
 // around contentEditable terribleness.
@@ -3000,6 +2994,7 @@ class InputState {
         this.lastTouch = 0;
         this.lastAndroidDelete = 0;
         this.composing = false;
+        this.compositionNode = null;
         this.composingTimeout = -1;
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
@@ -3436,6 +3431,7 @@ editHandlers.compositionend = (view, event) => {
         view.input.composing = false;
         view.input.compositionEndedAt = event.timeStamp;
         view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+        view.input.compositionNode = null;
         if (view.input.compositionPendingChanges)
             Promise.resolve().then(() => view.domObserver.flush());
         view.input.compositionID++;
@@ -3455,6 +3451,25 @@ function clearComposition(view) {
     while (view.input.compositionNodes.length > 0)
         view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+    let sel = view.domSelectionRange();
+    if (!sel.focusNode)
+        return null;
+    let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+    let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+    if (textBefore && textAfter && textBefore != textAfter) {
+        let descAfter = textAfter.pmViewDesc;
+        if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+            return textAfter;
+        }
+        else if (view.input.compositionNode == textAfter) {
+            let descBefore = textBefore.pmViewDesc;
+            if (!(!descBefore || !descBefore.isText(textBefore.nodeValue)))
+                return textAfter;
+        }
+    }
+    return textBefore;
+}
 function timestampFromCustomEvent() {
     let event = document.createEvent("Event");
     event.initEvent("event", true, true);
@@ -4689,9 +4704,25 @@ function checkCSS(view) {
         cssCheckWarned = true;
     }
 }
+function rangeToSelectionRange(view, range) {
+    let anchorNode = range.startContainer, anchorOffset = range.startOffset;
+    let focusNode = range.endContainer, focusOffset = range.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 };
+}
 // Used to work around a Safari Selection/shadow DOM bug
 // Based on https://github.com/codemirror/dev/issues/414 fix
-function safariShadowSelectionRange(view) {
+function safariShadowSelectionRange(view, selection) {
+    if (selection.getComposedRanges) {
+        let range = selection.getComposedRanges(view.root)[0];
+        if (range)
+            return rangeToSelectionRange(view, range);
+    }
     let found;
     function read(event) {
         event.preventDefault();
@@ -4706,15 +4737,7 @@ function safariShadowSelectionRange(view) {
     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 };
+    return found ? rangeToSelectionRange(view, found) : null;
 }
 
 // Note that all referencing and parsing is done with the
@@ -5276,6 +5299,8 @@ class EditorView {
                 // tracks that and forces a selection reset when our update
                 // did write to the node.
                 let chromeKludge = chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null;
+                if (this.composing)
+                    this.input.compositionNode = findCompositionNode(this);
                 if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
                     this.docView.updateOuterDeco(outerDeco);
                     this.docView.destroy();
@@ -5590,8 +5615,9 @@ class EditorView {
     @internal
     */
     domSelectionRange() {
-        return safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom
-            ? safariShadowSelectionRange(this) : this.domSelection();
+        let sel = this.domSelection();
+        return safari && this.root.nodeType === 11 &&
+            deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel;
     }
     /**
     @internal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.33.2",
+  "version": "1.33.4",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",
@@ -28,7 +28,7 @@
     "url": "git://github.com/prosemirror/prosemirror-view.git"
   },
   "dependencies": {
-    "prosemirror-model": "^1.16.0",
+    "prosemirror-model": "^1.20.0",
     "prosemirror-state": "^1.0.0",
     "prosemirror-transform": "^1.1.0"
   },

package/src/dom.ts

@@ -71,7 +71,7 @@ export function textNodeBefore(node: Node, offset: number) {
   for (;;) {
     if (node.nodeType == 3 && offset) return node as Text
     if (node.nodeType == 1 && offset > 0) {
-      if ((node as HTMLElement).contentEditable != "false") return null
+      if ((node as HTMLElement).contentEditable == "false") return null
       node = node.childNodes[offset - 1]
       offset = nodeSize(node)
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -87,7 +87,7 @@ export function textNodeAfter(node: Node, offset: number) {
   for (;;) {
     if (node.nodeType == 3 && offset < node.nodeValue!.length) return node as Text
     if (node.nodeType == 1 && offset < node.childNodes.length) {
-      if ((node as HTMLElement).contentEditable != "false") return null
+      if ((node as HTMLElement).contentEditable == "false") return null
       node = node.childNodes[offset]
       offset = 0
     } else if (node.parentNode && !hasBlockDesc(node)) {

package/src/domchange.ts

@@ -1,4 +1,4 @@
-import {Fragment, DOMParser, ParseRule, Node, Mark, ResolvedPos} from "prosemirror-model"
+import {Fragment, DOMParser, TagParseRule, Node, Mark, ResolvedPos} from "prosemirror-model"
 import {Selection, TextSelection} from "prosemirror-state"
 
 import {selectionBetween, selectionFromDOM, selectionToDOM} from "./selection"
@@ -55,7 +55,7 @@ function parseBetween(view: EditorView, from_: number, to_: number) {
   return {doc, sel, from, to}
 }
 
-function ruleFromNode(dom: DOMNode): ParseRule | null {
+function ruleFromNode(dom: DOMNode): Omit<TagParseRule, "tag"> | null {
   let desc = dom.pmViewDesc
   if (desc) {
     return desc.parseRule()

package/src/domobserver.ts

@@ -1,6 +1,6 @@
 import {Selection} from "prosemirror-state"
 import * as browser from "./browser"
-import {domIndex, isEquivalentPosition, selectionCollapsed, parentNode, DOMSelectionRange, DOMNode} from "./dom"
+import {domIndex, isEquivalentPosition, selectionCollapsed, parentNode, DOMSelectionRange, DOMNode, DOMSelection} from "./dom"
 import {hasFocusAndSelection, selectionToDOM, selectionFromDOM} from "./selection"
 import {EditorView} from "./index"
 
@@ -278,9 +278,27 @@ function checkCSS(view: EditorView) {
   }
 }
 
+function rangeToSelectionRange(view: EditorView, range: StaticRange) {
+  let anchorNode = range.startContainer, anchorOffset = range.startOffset
+  let focusNode = range.endContainer, focusOffset = range.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}
+}
+
 // 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 {
+export function safariShadowSelectionRange(view: EditorView, selection: DOMSelection): DOMSelectionRange | null {
+  if ((selection as any).getComposedRanges) {
+    let range = (selection as any).getComposedRanges(view.root)[0] as StaticRange
+    if (range) return rangeToSelectionRange(view, range)
+  }
+
   let found: StaticRange | undefined
   function read(event: InputEvent) {
     event.preventDefault()
@@ -297,14 +315,5 @@ export function safariShadowSelectionRange(view: EditorView): DOMSelectionRange
   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}
+  return found ? rangeToSelectionRange(view, found) : null
 }

package/src/index.ts

@@ -5,7 +5,7 @@ import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrol
         resetScrollPos, focusPreventScroll} from "./domcoords"
 import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
-        InputState, doPaste, Dragging} from "./input"
+        InputState, doPaste, Dragging, findCompositionNode} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
 import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
@@ -197,6 +197,7 @@ export class EditorView {
         // tracks that and forces a selection reset when our update
         // did write to the node.
         let chromeKludge = browser.chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null
+        if (this.composing) this.input.compositionNode = findCompositionNode(this)
         if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
           this.docView.updateOuterDeco(outerDeco)
           this.docView.destroy()
@@ -487,8 +488,9 @@ export class EditorView {
 
   /// @internal
   domSelectionRange(): DOMSelectionRange {
-    return browser.safari && this.root.nodeType === 11 && deepActiveElement(this.dom.ownerDocument) == this.dom
-      ? safariShadowSelectionRange(this) : this.domSelection()
+    let sel = this.domSelection()
+    return browser.safari && this.root.nodeType === 11 &&
+      deepActiveElement(this.dom.ownerDocument) == this.dom && safariShadowSelectionRange(this, sel) || sel
   }
 
   /// @internal

package/src/input.ts

@@ -6,7 +6,7 @@ import * as browser from "./browser"
 import {captureKeyDown} from "./capturekeys"
 import {parseFromClipboard, serializeForClipboard} from "./clipboard"
 import {selectionBetween, selectionToDOM, selectionFromDOM} from "./selection"
-import {keyEvent, DOMNode} from "./dom"
+import {keyEvent, DOMNode, textNodeBefore, textNodeAfter} from "./dom"
 import {EditorView} from "./index"
 import {ViewDesc} from "./viewdesc"
 
@@ -30,6 +30,7 @@ export class InputState {
   lastTouch = 0
   lastAndroidDelete = 0
   composing = false
+  compositionNode: Text | null = null
   composingTimeout = -1
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
@@ -490,6 +491,7 @@ editHandlers.compositionend = (view, event) => {
     view.input.composing = false
     view.input.compositionEndedAt = event.timeStamp
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
+    view.input.compositionNode = null
     if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
     view.input.compositionID++
     scheduleComposeEnd(view, 20)
@@ -509,6 +511,24 @@ export function clearComposition(view: EditorView) {
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop()!.markParentsDirty()
 }
 
+export function findCompositionNode(view: EditorView) {
+  let sel = view.domSelectionRange()
+  if (!sel.focusNode) return null
+  let textBefore = textNodeBefore(sel.focusNode, sel.focusOffset)
+  let textAfter = textNodeAfter(sel.focusNode, sel.focusOffset)
+  if (textBefore && textAfter && textBefore != textAfter) {
+    let descAfter = textAfter.pmViewDesc
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue!)) {
+      return textAfter
+    } else if (view.input.compositionNode == textAfter) {
+      let descBefore = textBefore.pmViewDesc
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue!)))
+        return textAfter
+    }
+  }
+  return textBefore
+}
+
 function timestampFromCustomEvent() {
   let event = document.createEvent("Event")
   event.initEvent("event", true, true)