prosemirror-view 1.28.2 → 1.29.0

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()!
@@ -631,7 +638,7 @@ export interface EditorProps<P = any> {
 
   /// Can be used to transform pasted HTML text, _before_ it is parsed,
   /// for example to clean it up.
-  transformPastedHTML?: (this: P, html: string) => string
+  transformPastedHTML?: (this: P, html: string, view: EditorView) => string
 
   /// The [parser](#model.DOMParser) to use when reading content from
   /// the clipboard. When not given, the value of the
@@ -640,7 +647,7 @@ export interface EditorProps<P = any> {
 
   /// Transform pasted plain text. The `plain` flag will be true when
   /// the text is pasted as plain text.
-  transformPastedText?: (this: P, text: string, plain: boolean) => string
+  transformPastedText?: (this: P, text: string, plain: boolean, view: EditorView) => string
 
   /// A function to parse text from the clipboard into a document
   /// slice. Called after
@@ -649,15 +656,15 @@ export interface EditorProps<P = any> {
   /// in `<p>` tags, and call
   /// [`clipboardParser`](#view.EditorProps.clipboardParser) on it.
   /// The `plain` flag will be true when the text is pasted as plain text.
-  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice
+  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice
 
   /// Can be used to transform pasted or dragged-and-dropped content
   /// before it is applied to the document.
-  transformPasted?: (this: P, slice: Slice) => Slice
+  transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice
 
   /// Can be used to transform copied or cut content before it is
   /// serialized to the clipboard.
-  transformCopied?: (this: P, slice: Slice) => Slice
+  transformCopied?: (this: P, slice: Slice, view: EditorView) => Slice
 
   /// Allows you to pass custom rendering and behavior logic for
   /// nodes. Should map node names to constructor functions that
@@ -704,7 +711,7 @@ export interface EditorProps<P = any> {
   /// selection when copying text to the clipboard. By default, the
   /// editor will use [`textBetween`](#model.Node.textBetween) on the
   /// selected range.
-  clipboardTextSerializer?: (this: P, content: Slice) => string
+  clipboardTextSerializer?: (this: P, content: Slice, view: EditorView) => string
 
   /// A set of [document decorations](#view.Decoration) to show in the
   /// view.

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
@@ -666,7 +666,7 @@ editHandlers.drop = (view, _event) => {
   let $mouse = view.state.doc.resolve(eventPos.pos)
   let slice = dragging && dragging.slice
   if (slice) {
-    view.someProp("transformPasted", f => { slice = f(slice!) })
+    view.someProp("transformPasted", f => { slice = f(slice!, view) })
   } else {
     slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"),
                                brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse)
@@ -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