prosemirror-view 1.29.2 → 1.30.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.30.1 (2023-02-04)
+
+### Bug fixes
+
+Fix a bug that caused `posAtCoords` to always return the position after a leaf node when querying a position on top of the node's element.
+
+Fix an issue where, when putting focus on the editor by clicking at the very start of the document, the editor would restore a previous selection.
+
+## 1.30.0 (2023-01-19)
+
+### New features
+
+`EditorView` now has `pasteHTML` and `pasteText` methods which initiate paste handling.
+
 ## 1.29.2 (2023-01-17)
 
 ### Bug fixes

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2015-2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+Copyright (C) 2015-2017 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.cjs

@@ -386,22 +386,30 @@ function posFromElement(view, elt, coords) {
 }
 
 function posFromCaret(view, node, offset, coords) {
-  var outside = -1;
+  var outsideBlock = -1;
 
   for (var cur = node;;) {
     if (cur == view.dom) break;
     var desc = view.docView.nearestDesc(cur, true);
     if (!desc) return null;
 
-    if (desc.node.isBlock && desc.parent) {
+    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
       var rect = desc.dom.getBoundingClientRect();
-      if (rect.left > coords.left || rect.top > coords.top) outside = desc.posBefore;else if (rect.right < coords.left || rect.bottom < coords.top) outside = desc.posAfter;else break;
+
+      if (desc.node.isBlock && desc.parent) {
+        if (rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore;else if (rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter;
+      }
+
+      if (!desc.contentDOM && outsideBlock < 0) {
+        var before = desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2 : coords.left < (rect.left + rect.right) / 2;
+        return before ? desc.posBefore : desc.posAfter;
+      }
     }
 
     cur = desc.dom.parentNode;
   }
 
-  return outside > -1 ? outside : view.docView.posFromDOM(node, offset, 1);
+  return outsideBlock > -1 ? outsideBlock : view.docView.posFromDOM(node, offset, -1);
 }
 
 function elementFromPoint(element, coords, box) {
@@ -3795,12 +3803,12 @@ function capturePaste(view, event) {
   setTimeout(function () {
     view.focus();
     if (target.parentNode) target.parentNode.removeChild(target);
-    if (plainText) doPaste(view, target.value, null, event);else doPaste(view, target.textContent, target.innerHTML, event);
+    if (plainText) doPaste(view, target.value, null, view.input.shiftKey, event);else doPaste(view, target.textContent, target.innerHTML, view.input.shiftKey, event);
   }, 50);
 }
 
-function doPaste(view, text, html, event) {
-  var slice = parseFromClipboard(view, text, html, view.input.shiftKey, view.state.selection.$from);
+function doPaste(view, text, html, preferPlain, event) {
+  var slice = parseFromClipboard(view, text, html, preferPlain, view.state.selection.$from);
   if (view.someProp("handlePaste", function (f) {
     return f(view, event, slice || prosemirrorModel.Slice.empty);
   })) return true;
@@ -3815,7 +3823,7 @@ editHandlers.paste = function (view, _event) {
   var event = _event;
   if (view.composing && !android) return;
   var data = brokenClipboardAPI ? null : event.clipboardData;
-  if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), event)) event.preventDefault();else capturePaste(view, event);
+  if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), view.input.shiftKey, event)) event.preventDefault();else capturePaste(view, event);
 };
 
 var Dragging = _createClass(function Dragging(slice, move) {
@@ -4943,7 +4951,7 @@ var DOMObserver = function () {
 
       var readSel = null;
 
-      if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 && view.input.lastTouch < Date.now() - 300 && selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) && readSel.eq(prosemirrorState.Selection.near(view.state.doc.resolve(0), 1))) {
+      if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 && Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 && selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) && readSel.eq(prosemirrorState.Selection.near(view.state.doc.resolve(0), 1))) {
         view.input.lastFocus = 0;
         selectionToDOM(view);
         this.currentSelection.set(sel);
@@ -5772,6 +5780,16 @@ var EditorView = function () {
     value: function endOfTextblock(dir, state) {
       return _endOfTextblock(this, state || this.state, dir);
     }
+  }, {
+    key: "pasteHTML",
+    value: function pasteHTML(html, event) {
+      return doPaste(this, "", html, false, event || new ClipboardEvent("paste"));
+    }
+  }, {
+    key: "pasteText",
+    value: function pasteText(text, event) {
+      return doPaste(this, text, null, true, event || new ClipboardEvent("paste"));
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/index.d.ts

@@ -319,7 +319,8 @@ declare class ViewDesc {
     get posAfter(): number;
     get posAtEnd(): number;
     localPosFromDOM(dom: DOMNode, offset: number, bias: number): number;
-    nearestDesc(dom: DOMNode, onlyNodes?: boolean): ViewDesc | undefined;
+    nearestDesc(dom: DOMNode): ViewDesc | undefined;
+    nearestDesc(dom: DOMNode, onlyNodes: true): NodeViewDesc | undefined;
     getDesc(dom: DOMNode): ViewDesc | undefined;
     posFromDOM(dom: DOMNode, offset: number, bias: number): number;
     descAt(pos: number): ViewDesc | undefined;
@@ -345,6 +346,50 @@ declare class ViewDesc {
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
 }
+declare class NodeViewDesc extends ViewDesc {
+    node: Node;
+    outerDeco: readonly Decoration[];
+    innerDeco: DecorationSource;
+    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;
+    matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
+    get size(): number;
+    get border(): 1 | 0;
+    updateChildren(view: EditorView, pos: number): void;
+    localCompositionInfo(view: EditorView, pos: number): {
+        node: Text;
+        pos: number;
+        text: string;
+    } | null;
+    protectLocalComposition(view: EditorView, { node, pos, text }: {
+        node: Text;
+        pos: number;
+        text: string;
+    }): void;
+    update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): boolean;
+    updateInner(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): void;
+    updateOuterDeco(outerDeco: readonly Decoration[]): void;
+    selectNode(): void;
+    deselectNode(): void;
+    get domAtom(): boolean;
+}
+declare class TextViewDesc extends NodeViewDesc {
+    constructor(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, dom: DOMNode, nodeDOM: DOMNode, view: EditorView);
+    parseRule(): ParseRule;
+    update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): boolean;
+    inParent(): boolean;
+    domFromPos(pos: number): {
+        node: globalThis.Node;
+        offset: number;
+    };
+    localPosFromDOM(dom: DOMNode, offset: number, bias: number): number;
+    ignoreMutation(mutation: MutationRecord): boolean;
+    slice(from: number, to: number, view: EditorView): TextViewDesc;
+    markDirty(from: number, to: number): void;
+    get domAtom(): boolean;
+}
 
 /**
 An editor view manages the DOM structure that represents an
@@ -520,6 +565,16 @@ declare class EditorView {
     */
     endOfTextblock(dir: "up" | "down" | "left" | "right" | "forward" | "backward", state?: EditorState): boolean;
     /**
+    Run the editor's paste logic with the given HTML string. The
+    `event`, if given, will be passed to the
+    [`handlePaste`](https://prosemirror.net/docs/ref/#view.EditorProps.handlePaste) hook.
+    */
+    pasteHTML(html: string, event?: ClipboardEvent): boolean;
+    /**
+    Run the editor's paste logic with the given plain-text input.
+    */
+    pasteText(text: string, event?: ClipboardEvent): boolean;
+    /**
     Removes the editor from the DOM and destroys all [node
     views](https://prosemirror.net/docs/ref/#view.NodeView).
     */

package/dist/index.js

@@ -314,25 +314,31 @@ function posFromCaret(view, node, offset, coords) {
     // of nodes to see if there are block nodes that the coordinates
     // fall outside of. If so, we take the position before/after that
     // block. If not, we call `posFromDOM` on the raw node/offset.
-    let outside = -1;
+    let outsideBlock = -1;
     for (let cur = node;;) {
         if (cur == view.dom)
             break;
         let desc = view.docView.nearestDesc(cur, true);
         if (!desc)
             return null;
-        if (desc.node.isBlock && desc.parent) {
+        if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
             let rect = desc.dom.getBoundingClientRect();
-            if (rect.left > coords.left || rect.top > coords.top)
-                outside = desc.posBefore;
-            else if (rect.right < coords.left || rect.bottom < coords.top)
-                outside = desc.posAfter;
-            else
-                break;
+            if (desc.node.isBlock && desc.parent) {
+                if (rect.left > coords.left || rect.top > coords.top)
+                    outsideBlock = desc.posBefore;
+                else if (rect.right < coords.left || rect.bottom < coords.top)
+                    outsideBlock = desc.posAfter;
+            }
+            if (!desc.contentDOM && outsideBlock < 0) {
+                // If we are inside a leaf, return the side of the leaf closer to the coords
+                let before = desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2
+                    : coords.left < (rect.left + rect.right) / 2;
+                return before ? desc.posBefore : desc.posAfter;
+            }
         }
         cur = desc.dom.parentNode;
     }
-    return outside > -1 ? outside : view.docView.posFromDOM(node, offset, 1);
+    return outsideBlock > -1 ? outsideBlock : view.docView.posFromDOM(node, offset, -1);
 }
 function elementFromPoint(element, coords, box) {
     let len = element.childNodes.length;
@@ -760,8 +766,6 @@ class ViewDesc {
         }
         return (atEnd == null ? bias > 0 : atEnd) ? this.posAtEnd : this.posAtStart;
     }
-    // Scan up the dom finding the first desc that is a descendant of
-    // this one.
     nearestDesc(dom, onlyNodes = false) {
         for (let first = true, cur = dom; cur; cur = cur.parentNode) {
             let desc = this.getDesc(cur), nodeDOM;
@@ -3345,13 +3349,13 @@ function capturePaste(view, event) {
         if (target.parentNode)
             target.parentNode.removeChild(target);
         if (plainText)
-            doPaste(view, target.value, null, event);
+            doPaste(view, target.value, null, view.input.shiftKey, event);
         else
-            doPaste(view, target.textContent, target.innerHTML, event);
+            doPaste(view, target.textContent, target.innerHTML, view.input.shiftKey, event);
     }, 50);
 }
-function doPaste(view, text, html, event) {
-    let slice = parseFromClipboard(view, text, html, view.input.shiftKey, view.state.selection.$from);
+function doPaste(view, text, html, preferPlain, event) {
+    let slice = parseFromClipboard(view, text, html, preferPlain, view.state.selection.$from);
     if (view.someProp("handlePaste", f => f(view, event, slice || Slice.empty)))
         return true;
     if (!slice)
@@ -3372,7 +3376,7 @@ editHandlers.paste = (view, _event) => {
     if (view.composing && !android)
         return;
     let data = brokenClipboardAPI ? null : event.clipboardData;
-    if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), event))
+    if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), view.input.shiftKey, event))
         event.preventDefault();
     else
         capturePaste(view, event);
@@ -4381,7 +4385,7 @@ class DOMObserver {
         // start of the document after focus, restore the selection from
         // the state
         if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
-            view.input.lastTouch < Date.now() - 300 &&
+            Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 &&
             selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
             readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
             view.input.lastFocus = 0;
@@ -5262,6 +5266,20 @@ class EditorView {
         return endOfTextblock(this, state || this.state, dir);
     }
     /**
+    Run the editor's paste logic with the given HTML string. The
+    `event`, if given, will be passed to the
+    [`handlePaste`](https://prosemirror.net/docs/ref/#view.EditorProps.handlePaste) hook.
+    */
+    pasteHTML(html, event) {
+        return doPaste(this, "", html, false, event || new ClipboardEvent("paste"));
+    }
+    /**
+    Run the editor's paste logic with the given plain-text input.
+    */
+    pasteText(text, event) {
+        return doPaste(this, text, null, true, event || new ClipboardEvent("paste"));
+    }
+    /**
     Removes the editor from the DOM and destroys all [node
     views](https://prosemirror.net/docs/ref/#view.NodeView).
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.29.2",
+  "version": "1.30.1",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",
@@ -19,7 +19,7 @@
   "maintainers": [
     {
       "name": "Marijn Haverbeke",
-      "email": "marijnh@gmail.com",
+      "email": "marijn@haverbeke.berlin",
       "web": "http://marijnhaverbeke.nl"
     }
   ],

package/src/domcoords.ts

@@ -2,7 +2,6 @@ import {EditorState} from "prosemirror-state"
 import {nodeSize, textRange, parentNode} from "./dom"
 import * as browser from "./browser"
 import {EditorView} from "./index"
-import {NodeViewDesc} from "./viewdesc"
 
 export type Rect = {left: number, right: number, top: number, bottom: number}
 
@@ -211,20 +210,27 @@ function posFromCaret(view: EditorView, node: Node, offset: number, coords: {top
   // of nodes to see if there are block nodes that the coordinates
   // fall outside of. If so, we take the position before/after that
   // block. If not, we call `posFromDOM` on the raw node/offset.
-  let outside = -1
+  let outsideBlock = -1
   for (let cur = node;;) {
     if (cur == view.dom) break
     let desc = view.docView.nearestDesc(cur, true)
     if (!desc) return null
-    if ((desc as NodeViewDesc).node.isBlock && desc.parent) {
+    if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
       let rect = (desc.dom as HTMLElement).getBoundingClientRect()
-      if (rect.left > coords.left || rect.top > coords.top) outside = desc.posBefore
-      else if (rect.right < coords.left || rect.bottom < coords.top) outside = desc.posAfter
-      else break
+      if (desc.node.isBlock && desc.parent) {
+        if (rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore
+        else if (rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter
+      }
+      if (!desc.contentDOM && outsideBlock < 0) {
+        // If we are inside a leaf, return the side of the leaf closer to the coords
+        let before = desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2
+          : coords.left < (rect.left + rect.right) / 2
+        return before ? desc.posBefore : desc.posAfter
+      }
     }
     cur = desc.dom.parentNode!
   }
-  return outside > -1 ? outside : view.docView.posFromDOM(node, offset, 1)
+  return outsideBlock > -1 ? outsideBlock : view.docView.posFromDOM(node, offset, -1)
 }
 
 function elementFromPoint(element: HTMLElement, coords: {top: number, left: number}, box: Rect): HTMLElement {
@@ -413,7 +419,7 @@ function endOfTextblockVertical(view: EditorView, state: EditorState, dir: "up"
     for (;;) {
       let nearest = view.docView.nearestDesc(dom, true)
       if (!nearest) break
-      if (nearest.node!.isBlock) { dom = nearest.contentDOM || nearest.dom; break }
+      if (nearest.node.isBlock) { dom = nearest.contentDOM || nearest.dom; break }
       dom = nearest.dom.parentNode!
     }
     let coords = coordsAtPos(view, $pos.pos, 1)

package/src/domobserver.ts

@@ -195,7 +195,7 @@ export class DOMObserver {
     // start of the document after focus, restore the selection from
     // the state
     if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
-        view.input.lastTouch < Date.now() - 300 &&
+        Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 &&
         selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
         readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
       view.input.lastFocus = 0

package/src/index.ts

@@ -4,7 +4,7 @@ import {Slice, ResolvedPos, DOMParser, DOMSerializer, Node, Mark} from "prosemir
 import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrollPos,
         resetScrollPos, focusPreventScroll} from "./domcoords"
 import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
-import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition, InputState} from "./input"
+import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition, InputState, doPaste} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
 import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
@@ -409,6 +409,18 @@ export class EditorView {
     return endOfTextblock(this, state || this.state, dir)
   }
 
+  /// Run the editor's paste logic with the given HTML string. The
+  /// `event`, if given, will be passed to the
+  /// [`handlePaste`](#view.EditorProps.handlePaste) hook.
+  pasteHTML(html: string, event?: ClipboardEvent) {
+    return doPaste(this, "", html, false, event || new ClipboardEvent("paste"))
+  }
+
+  /// Run the editor's paste logic with the given plain-text input.
+  pasteText(text: string, event?: ClipboardEvent) {
+    return doPaste(this, text, null, true, event || new ClipboardEvent("paste"))
+  }
+
   /// Removes the editor from the DOM and destroys all [node
   /// views](#view.NodeView).
   destroy() {

package/src/input.ts

@@ -583,13 +583,13 @@ function capturePaste(view: EditorView, event: ClipboardEvent) {
   setTimeout(() => {
     view.focus()
     if (target.parentNode) target.parentNode.removeChild(target)
-    if (plainText) doPaste(view, (target as HTMLTextAreaElement).value, null, event)
-    else doPaste(view, target.textContent!, target.innerHTML, event)
+    if (plainText) doPaste(view, (target as HTMLTextAreaElement).value, null, view.input.shiftKey, event)
+    else doPaste(view, target.textContent!, target.innerHTML, view.input.shiftKey, event)
   }, 50)
 }
 
-function doPaste(view: EditorView, text: string, html: string | null, event: ClipboardEvent) {
-  let slice = parseFromClipboard(view, text, html, view.input.shiftKey, view.state.selection.$from)
+export function doPaste(view: EditorView, text: string, html: string | null, preferPlain: boolean, event: ClipboardEvent) {
+  let slice = parseFromClipboard(view, text, html, preferPlain, view.state.selection.$from)
   if (view.someProp("handlePaste", f => f(view, event, slice || Slice.empty))) return true
   if (!slice) return false
 
@@ -609,8 +609,10 @@ editHandlers.paste = (view, _event) => {
   // where the editor is almost always composing.
   if (view.composing && !browser.android) return
   let data = brokenClipboardAPI ? null : event.clipboardData
-  if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), event)) event.preventDefault()
-  else capturePaste(view, event)
+  if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), view.input.shiftKey, event))
+    event.preventDefault()
+  else
+    capturePaste(view, event)
 }
 
 class Dragging {
@@ -633,7 +635,7 @@ handlers.dragstart = (view, _event) => {
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)))
   } else if (event.target && (event.target as HTMLElement).nodeType == 1) {
     let desc = view.docView.nearestDesc(event.target as HTMLElement, true)
-    if (desc && desc.node!.type.spec.draggable && desc != view.docView)
+    if (desc && desc.node.type.spec.draggable && desc != view.docView)
       view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore)))
   }
   let slice = view.state.selection.content(), {dom, text} = serializeForClipboard(view, slice)

package/src/viewdesc.ts

@@ -221,6 +221,8 @@ export class ViewDesc {
 
   // Scan up the dom finding the first desc that is a descendant of
   // this one.
+  nearestDesc(dom: DOMNode): ViewDesc | undefined
+  nearestDesc(dom: DOMNode, onlyNodes: true): NodeViewDesc | undefined
   nearestDesc(dom: DOMNode, onlyNodes: boolean = false) {
     for (let first = true, cur: DOMNode | null = dom; cur; cur = cur.parentNode) {
       let desc = this.getDesc(cur), nodeDOM