prosemirror-view 1.33.3 → 1.33.5

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.33.5 (2024-04-22)
+
+### Bug fixes
+
+Fix a regression in composition handling in 1.33.3 that occurs for some IMEs when starting composition on an empty line.
+
+## 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

package/dist/index.cjs

@@ -3248,7 +3248,7 @@ function findCompositionNode(view) {
       if (!(!descBefore || !descBefore.isText(textBefore.nodeValue))) return textAfter;
     }
   }
-  return textBefore;
+  return textBefore || textAfter;
 }
 function timestampFromCustomEvent() {
   var event = document.createEvent("Event");
@@ -4349,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];
@@ -4378,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,
@@ -5049,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;
@@ -370,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;
@@ -394,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): {

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;
@@ -370,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;
@@ -394,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): {

package/dist/index.js

@@ -3468,7 +3468,7 @@ function findCompositionNode(view) {
                 return textAfter;
         }
     }
-    return textBefore;
+    return textBefore || textAfter;
 }
 function timestampFromCustomEvent() {
     let event = document.createEvent("Event");
@@ -4704,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();
@@ -4721,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
@@ -5607,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.3",
+  "version": "1.33.5",
   "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/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

@@ -488,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

@@ -526,7 +526,7 @@ export function findCompositionNode(view: EditorView) {
         return textAfter
     }
   }
-  return textBefore
+  return textBefore || textAfter
 }
 
 function timestampFromCustomEvent() {

package/src/viewdesc.ts

@@ -1,4 +1,4 @@
-import {DOMSerializer, Fragment, Mark, Node, ParseRule} from "prosemirror-model"
+import {DOMSerializer, Fragment, Mark, Node, TagParseRule} from "prosemirror-model"
 import {TextSelection} from "prosemirror-state"
 
 import {domIndex, isEquivalentPosition, DOMNode} from "./dom"
@@ -124,7 +124,7 @@ export class ViewDesc {
   // When parsing in-editor content (in domchange.js), we allow
   // descriptions to determine the parse rules that should be used to
   // parse them.
-  parseRule(): ParseRule | null { return null }
+  parseRule(): Omit<TagParseRule, "tag"> | null { return null }
 
   // Used by the editor's event handler to ignore events that come
   // from certain descs.
@@ -576,7 +576,7 @@ class MarkViewDesc extends ViewDesc {
     return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom as HTMLElement)
   }
 
-  parseRule(): ParseRule | null {
+  parseRule() {
     if ((this.dirty & NODE_DIRTY) || this.mark.type.spec.reparseInView) return null
     return {mark: this.mark.type.name, attrs: this.mark.attrs, contentElement: this.contentDOM!}
   }
@@ -666,14 +666,14 @@ export class NodeViewDesc extends ViewDesc {
       return new NodeViewDesc(parent, node, outerDeco, innerDeco, dom, contentDOM || null, nodeDOM, view, pos + 1)
   }
 
-  parseRule(): ParseRule | null {
+  parseRule() {
     // Experimental kludge to allow opt-in re-parsing of nodes
     if (this.node.type.spec.reparseInView) return null
     // FIXME the assumption that this can always return the current
     // attrs means that if the user somehow manages to change the
     // attrs in the dom, that won't be picked up. Not entirely sure
     // whether this is a problem
-    let rule: ParseRule = {node: this.node.type.name, attrs: this.node.attrs}
+    let rule: Omit<TagParseRule, "tag"> = {node: this.node.type.name, attrs: this.node.attrs}
     if (this.node.type.whitespace == "pre") rule.preserveWhitespace = "full"
     if (!this.contentDOM) {
       rule.getContent = () => this.node.content
@@ -857,7 +857,7 @@ class TextViewDesc extends NodeViewDesc {
     super(parent, node, outerDeco, innerDeco, dom, null, nodeDOM, view, 0)
   }
 
-  parseRule(): ParseRule {
+  parseRule() {
     let skip = this.nodeDOM.parentNode
     while (skip && skip != this.dom && !(skip as any).pmIsDeco) skip = skip.parentNode
     return {skip: (skip || true) as any}