prosemirror-view 1.26.3 → 1.27.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 1.27.0 (2022-07-20)
+
+### Bug fixes
+
+Fix a bug that in some situations caused composition to be disrupted on Chrome due to a workaround for another browser issue activating inappropriately.
+
+### New features
+
+`EditorProps` now takes an optional type parameter that indicates the type of `this` in prop functions.
+
+## 1.26.5 (2022-07-07)
+
+### Bug fixes
+
+Fix an issue where a composition happening at the same time as widget insertion/removal could corrupt the rendered DOM.
+
+Fix a problem where `coordsAtPos` would look inside the DOM for atomic nodes, and sometimes return very odd positions that way.
+
+## 1.26.4 (2022-07-04)
+
+### Bug fixes
+
+Avoid spurious type errors on `handleDOMEvents` by widening the type for unknown event objects.
+
 ## 1.26.3 (2022-06-29)
 
 ### Bug fixes

package/dist/index.cjs

@@ -495,7 +495,8 @@ var BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 function _coordsAtPos(view, pos, side) {
   var _view$docView$domFrom = view.docView.domFromPos(pos, side < 0 ? -1 : 1),
       node = _view$docView$domFrom.node,
-      offset = _view$docView$domFrom.offset;
+      offset = _view$docView$domFrom.offset,
+      atom = _view$docView$domFrom.atom;
 
   var supportEmptyRange = webkit || gecko;
 
@@ -534,13 +535,15 @@ function _coordsAtPos(view, pos, side) {
     }
   }
 
-  if (!view.state.doc.resolve(pos).parent.inlineContent) {
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+  var $dom = view.state.doc.resolve(pos - (atom || 0));
+
+  if (!$dom.parent.inlineContent) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
       var before = node.childNodes[offset - 1];
       if (before.nodeType == 1) return flattenH(before.getBoundingClientRect(), false);
     }
 
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
       var after = node.childNodes[offset];
       if (after.nodeType == 1) return flattenH(after.getBoundingClientRect(), true);
     }
@@ -548,13 +551,13 @@ function _coordsAtPos(view, pos, side) {
     return flattenH(node.getBoundingClientRect(), side >= 0);
   }
 
-  if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
     var _before = node.childNodes[offset - 1];
     var target = _before.nodeType == 3 ? textRange(_before, nodeSize(_before) - (supportEmptyRange ? 0 : 1)) : _before.nodeType == 1 && (_before.nodeName != "BR" || !_before.nextSibling) ? _before : null;
     if (target) return flattenV(singleRect(target, 1), false);
   }
 
-  if (offset < nodeSize(node)) {
+  if (atom == null && offset < nodeSize(node)) {
     var _after = node.childNodes[offset];
 
     while (_after.pmViewDesc && _after.pmViewDesc.ignoreForCoords) {
@@ -905,7 +908,8 @@ var ViewDesc = function () {
     value: function domFromPos(pos, side) {
       if (!this.contentDOM) return {
         node: this.dom,
-        offset: 0
+        offset: 0,
+        atom: pos + 1
       };
       var i = 0,
           offset = 0;
@@ -2077,7 +2081,7 @@ var ViewTreeUpdater = function () {
       if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM) child.dirty = CONTENT_DIRTY;
       if (!child.update(node, outerDeco, innerDeco, view)) return false;
       this.destroyBetween(this.index, index);
-      this.index = index + 1;
+      this.index++;
       return true;
     }
   }, {
@@ -5045,7 +5049,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   var sel = view.state.selection;
   var parse = parseBetween(view, from, to);
 
-  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
+  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from && parse.sel.head == parse.sel.anchor) {
     var text = view.cursorWrapper.deco.type.toDOM.nextSibling;
     var size = text && text.nodeValue ? text.nodeValue.length : 1;
     parse.sel = {

package/dist/index.d.ts

@@ -326,6 +326,7 @@ declare class ViewDesc {
     domFromPos(pos: number, side: number): {
         node: DOMNode;
         offset: number;
+        atom?: number;
     };
     parseRange(from: number, to: number, base?: number): {
         node: DOMNode;
@@ -563,7 +564,7 @@ includes events that TypeScript's HTMLElementEventMap doesn't know
 about.
 */
 interface DOMEventMap extends HTMLElementEventMap {
-    [event: string]: Event;
+    [event: string]: any;
 }
 /**
 Props are configuration values that can be passed to an editor view
@@ -579,8 +580,12 @@ called one at a time, starting with the base props and then
 searching through the plugins (in order of appearance) until one of
 them returns true. For some props, the first plugin that yields a
 value gets precedence.
+
+The optional type parameter refers to the type of `this` in prop
+functions, and is used to pass in the plugin type when defining a
+[plugin](https://prosemirror.net/docs/ref/#state.Plugin).
 */
-interface EditorProps {
+interface EditorProps<P = any> {
     /**
     Can be an object mapping DOM event type names to functions that
     handle them. Such functions will be called before any handling
@@ -591,72 +596,72 @@ interface EditorProps {
     default behavior).
     */
     handleDOMEvents?: {
-        [event in keyof DOMEventMap]?: (view: EditorView, event: DOMEventMap[event]) => boolean | void;
+        [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void;
     };
     /**
     Called when the editor receives a `keydown` event.
     */
-    handleKeyDown?: (view: EditorView, event: KeyboardEvent) => boolean | void;
+    handleKeyDown?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void;
     /**
     Handler for `keypress` events.
     */
-    handleKeyPress?: (view: EditorView, event: KeyboardEvent) => boolean | void;
+    handleKeyPress?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void;
     /**
     Whenever the user directly input text, this handler is called
     before the input is applied. If it returns `true`, the default
     behavior of actually inserting the text is suppressed.
     */
-    handleTextInput?: (view: EditorView, from: number, to: number, text: string) => boolean | void;
+    handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string) => boolean | void;
     /**
     Called for each node around a click, from the inside out. The
     `direct` flag will be true for the inner node.
     */
-    handleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is clicked, after `handleClickOn` handlers
     have been called.
     */
-    handleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void;
+    handleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void;
     /**
     Called for each node around a double click.
     */
-    handleDoubleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleDoubleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is double-clicked, after `handleDoubleClickOn`.
     */
-    handleDoubleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void;
+    handleDoubleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void;
     /**
     Called for each node around a triple click.
     */
-    handleTripleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleTripleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is triple-clicked, after `handleTripleClickOn`.
     */
-    handleTripleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void;
+    handleTripleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void;
     /**
     Can be used to override the behavior of pasting. `slice` is the
     pasted content parsed by the editor, but you can directly access
     the event to get at the raw content.
     */
-    handlePaste?: (view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void;
+    handlePaste?: (this: P, view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void;
     /**
     Called when something is dropped on the editor. `moved` will be
     true if this drop moves from the current selection (which should
     thus be deleted).
     */
-    handleDrop?: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void;
+    handleDrop?: (this: P, view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void;
     /**
     Called when the view, after updating its state, tries to scroll
     the selection into view. A handler function may return false to
     indicate that it did not handle the scrolling and further
     handlers or the default behavior should be tried.
     */
-    handleScrollToSelection?: (view: EditorView) => boolean;
+    handleScrollToSelection?: (this: P, view: EditorView) => boolean;
     /**
     Can be used to override the way a selection is created when
     reading a DOM selection between the given anchor and head.
     */
-    createSelectionBetween?: (view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null;
+    createSelectionBetween?: (this: P, view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null;
     /**
     The [parser](https://prosemirror.net/docs/ref/#model.DOMParser) to use when reading editor changes
     from the DOM. Defaults to calling
@@ -668,7 +673,7 @@ interface EditorProps {
     Can be used to transform pasted HTML text, _before_ it is parsed,
     for example to clean it up.
     */
-    transformPastedHTML?: (html: string) => string;
+    transformPastedHTML?: (this: P, html: string) => string;
     /**
     The [parser](https://prosemirror.net/docs/ref/#model.DOMParser) to use when reading content from
     the clipboard. When not given, the value of the
@@ -679,7 +684,7 @@ interface EditorProps {
     Transform pasted plain text. The `plain` flag will be true when
     the text is pasted as plain text.
     */
-    transformPastedText?: (text: string, plain: boolean) => string;
+    transformPastedText?: (this: P, text: string, plain: boolean) => string;
     /**
     A function to parse text from the clipboard into a document
     slice. Called after
@@ -689,12 +694,12 @@ interface EditorProps {
     [`clipboardParser`](https://prosemirror.net/docs/ref/#view.EditorProps.clipboardParser) on it.
     The `plain` flag will be true when the text is pasted as plain text.
     */
-    clipboardTextParser?: (text: string, $context: ResolvedPos, plain: boolean) => Slice;
+    clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice;
     /**
     Can be used to transform pasted content before it is applied to
     the document.
     */
-    transformPasted?: (slice: Slice) => Slice;
+    transformPasted?: (this: P, slice: Slice) => Slice;
     /**
     Allows you to pass custom rendering and behavior logic for
     nodes. Should map node names to constructor functions that
@@ -749,17 +754,17 @@ interface EditorProps {
     editor will use [`textBetween`](https://prosemirror.net/docs/ref/#model.Node.textBetween) on the
     selected range.
     */
-    clipboardTextSerializer?: (content: Slice) => string;
+    clipboardTextSerializer?: (this: P, content: Slice) => string;
     /**
     A set of [document decorations](https://prosemirror.net/docs/ref/#view.Decoration) to show in the
     view.
     */
-    decorations?: (state: EditorState) => DecorationSource | null | undefined;
+    decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined;
     /**
     When this returns false, the content of the view is not directly
     editable.
     */
-    editable?: (state: EditorState) => boolean;
+    editable?: (this: P, state: EditorState) => boolean;
     /**
     Control the DOM attributes of the editable element. May be either
     an object or a function going from an editor state to an object.

package/dist/index.js

@@ -422,7 +422,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 function coordsAtPos(view, pos, side) {
-    let { node, offset } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
+    let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
     let supportEmptyRange = webkit || gecko;
     if (node.nodeType == 3) {
         // These browsers support querying empty text ranges. Prefer that in
@@ -461,14 +461,15 @@ function coordsAtPos(view, pos, side) {
             return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
         }
     }
+    let $dom = view.state.doc.resolve(pos - (atom || 0));
     // Return a horizontal line in block context
-    if (!view.state.doc.resolve(pos).parent.inlineContent) {
-        if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (!$dom.parent.inlineContent) {
+        if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
             let before = node.childNodes[offset - 1];
             if (before.nodeType == 1)
                 return flattenH(before.getBoundingClientRect(), false);
         }
-        if (offset < nodeSize(node)) {
+        if (atom == null && offset < nodeSize(node)) {
             let after = node.childNodes[offset];
             if (after.nodeType == 1)
                 return flattenH(after.getBoundingClientRect(), true);
@@ -476,7 +477,7 @@ function coordsAtPos(view, pos, side) {
         return flattenH(node.getBoundingClientRect(), side >= 0);
     }
     // Inline, not in text node (this is not Bidi-safe)
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
         let before = node.childNodes[offset - 1];
         let target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1))
             // BR nodes tend to only return the rectangle before them.
@@ -485,7 +486,7 @@ function coordsAtPos(view, pos, side) {
         if (target)
             return flattenV(singleRect(target, 1), false);
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
         let after = node.childNodes[offset];
         while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords)
             after = after.nextSibling;
@@ -797,7 +798,7 @@ class ViewDesc {
     }
     domFromPos(pos, side) {
         if (!this.contentDOM)
-            return { node: this.dom, offset: 0 };
+            return { node: this.dom, offset: 0, atom: pos + 1 };
         // First find the position in the child array
         let i = 0, offset = 0;
         for (let curPos = 0; i < this.children.length; i++) {
@@ -1723,7 +1724,7 @@ class ViewTreeUpdater {
         if (!child.update(node, outerDeco, innerDeco, view))
             return false;
         this.destroyBetween(this.index, index);
-        this.index = index + 1;
+        this.index++;
         return true;
     }
     findIndexWithChild(domNode) {
@@ -4500,7 +4501,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     let parse = parseBetween(view, from, to);
     // Chrome sometimes leaves the cursor before the inserted text when
     // composing after a cursor wrapper. This moves it forward.
-    if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
+    if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
+        parse.sel.head == parse.sel.anchor) {
         let text = view.cursorWrapper.deco.type.toDOM.nextSibling;
         let size = text && text.nodeValue ? text.nodeValue.length : 1;
         parse.sel = { anchor: parse.sel.anchor + size, head: parse.sel.anchor + size };

package/package.json

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

package/src/domchange.ts

@@ -99,7 +99,8 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   // Chrome sometimes leaves the cursor before the inserted text when
   // composing after a cursor wrapper. This moves it forward.
-  if (browser.chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
+  if (browser.chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
+      parse.sel.head == parse.sel.anchor) {
     let text = (view.cursorWrapper.deco.type as any).toDOM.nextSibling as DOMNode
     let size = text && text.nodeValue ? text.nodeValue.length : 1
     parse.sel = {anchor: parse.sel.anchor + size, head: parse.sel.anchor + size}

package/src/domcoords.ts

@@ -315,7 +315,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
-  let {node, offset} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
+  let {node, offset, atom} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
 
   let supportEmptyRange = browser.webkit || browser.gecko
   if (node.nodeType == 3) {
@@ -345,13 +345,14 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
     }
   }
 
+  let $dom = view.state.doc.resolve(pos - (atom || 0))
   // Return a horizontal line in block context
-  if (!view.state.doc.resolve(pos).parent.inlineContent) {
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (!$dom.parent.inlineContent) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
       let before = node.childNodes[offset - 1]
       if (before.nodeType == 1) return flattenH((before as HTMLElement).getBoundingClientRect(), false)
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
       let after = node.childNodes[offset]
       if (after.nodeType == 1) return flattenH((after as HTMLElement).getBoundingClientRect(), true)
     }
@@ -359,7 +360,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
   }
 
   // Inline, not in text node (this is not Bidi-safe)
-  if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
     let before = node.childNodes[offset - 1]
     let target = before.nodeType == 3 ? textRange(before as Text, nodeSize(before) - (supportEmptyRange ? 0 : 1))
         // BR nodes tend to only return the rectangle before them.
@@ -367,7 +368,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
         : before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null
     if (target) return flattenV(singleRect(target as Range | HTMLElement, 1), false)
   }
-  if (offset < nodeSize(node)) {
+  if (atom == null && offset < nodeSize(node)) {
     let after = node.childNodes[offset]
     while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords) after = after.nextSibling!
     let target = !after ? null : after.nodeType == 3 ? textRange(after as Text, 0, (supportEmptyRange ? 0 : 1))

package/src/index.ts

@@ -512,7 +512,7 @@ type NodeViewSet = {[name: string]: NodeViewConstructor | MarkViewConstructor}
 /// includes events that TypeScript's HTMLElementEventMap doesn't know
 /// about.
 export interface DOMEventMap extends HTMLElementEventMap {
-  [event: string]: Event
+  [event: string]: any
 }
 
 /// Props are configuration values that can be passed to an editor view
@@ -528,7 +528,11 @@ export interface DOMEventMap extends HTMLElementEventMap {
 /// searching through the plugins (in order of appearance) until one of
 /// them returns true. For some props, the first plugin that yields a
 /// value gets precedence.
-export interface EditorProps {
+///
+/// The optional type parameter refers to the type of `this` in prop
+/// functions, and is used to pass in the plugin type when defining a
+/// [plugin](#state.Plugin).
+export interface EditorProps<P = any> {
   /// Can be an object mapping DOM event type names to functions that
   /// handle them. Such functions will be called before any handling
   /// ProseMirror does of events fired on the editable DOM element.
@@ -537,59 +541,59 @@ export interface EditorProps {
   /// `preventDefault` yourself (or not, if you want to allow the
   /// default behavior).
   handleDOMEvents?: {
-    [event in keyof DOMEventMap]?: (view: EditorView, event: DOMEventMap[event]) => boolean | void
+    [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void
   }
 
   /// Called when the editor receives a `keydown` event.
-  handleKeyDown?: (view: EditorView, event: KeyboardEvent) => boolean | void
+  handleKeyDown?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
 
   /// Handler for `keypress` events.
-  handleKeyPress?: (view: EditorView, event: KeyboardEvent) => boolean | void
+  handleKeyPress?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
 
   /// Whenever the user directly input text, this handler is called
   /// before the input is applied. If it returns `true`, the default
   /// behavior of actually inserting the text is suppressed.
-  handleTextInput?: (view: EditorView, from: number, to: number, text: string) => boolean | void
+  handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string) => boolean | void
 
   /// Called for each node around a click, from the inside out. The
   /// `direct` flag will be true for the inner node.
-  handleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
 
   /// Called when the editor is clicked, after `handleClickOn` handlers
   /// have been called.
-  handleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Called for each node around a double click.
-  handleDoubleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleDoubleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
 
   /// Called when the editor is double-clicked, after `handleDoubleClickOn`.
-  handleDoubleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleDoubleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Called for each node around a triple click.
-  handleTripleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleTripleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
 
   /// Called when the editor is triple-clicked, after `handleTripleClickOn`.
-  handleTripleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleTripleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Can be used to override the behavior of pasting. `slice` is the
   /// pasted content parsed by the editor, but you can directly access
   /// the event to get at the raw content.
-  handlePaste?: (view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void
+  handlePaste?: (this: P, view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void
 
   /// Called when something is dropped on the editor. `moved` will be
   /// true if this drop moves from the current selection (which should
   /// thus be deleted).
-  handleDrop?: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
+  handleDrop?: (this: P, view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
 
   /// Called when the view, after updating its state, tries to scroll
   /// the selection into view. A handler function may return false to
   /// indicate that it did not handle the scrolling and further
   /// handlers or the default behavior should be tried.
-  handleScrollToSelection?: (view: EditorView) => boolean
+  handleScrollToSelection?: (this: P, view: EditorView) => boolean
 
   /// Can be used to override the way a selection is created when
   /// reading a DOM selection between the given anchor and head.
-  createSelectionBetween?: (view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null
+  createSelectionBetween?: (this: P, view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null
 
   /// The [parser](#model.DOMParser) to use when reading editor changes
   /// from the DOM. Defaults to calling
@@ -599,7 +603,7 @@ export interface EditorProps {
 
   /// Can be used to transform pasted HTML text, _before_ it is parsed,
   /// for example to clean it up.
-  transformPastedHTML?: (html: string) => string
+  transformPastedHTML?: (this: P, html: string) => string
 
   /// The [parser](#model.DOMParser) to use when reading content from
   /// the clipboard. When not given, the value of the
@@ -608,7 +612,7 @@ export interface EditorProps {
 
   /// Transform pasted plain text. The `plain` flag will be true when
   /// the text is pasted as plain text.
-  transformPastedText?: (text: string, plain: boolean) => string
+  transformPastedText?: (this: P, text: string, plain: boolean) => string
 
   /// A function to parse text from the clipboard into a document
   /// slice. Called after
@@ -617,11 +621,11 @@ export interface EditorProps {
   /// 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?: (text: string, $context: ResolvedPos, plain: boolean) => Slice
+  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice
 
   /// Can be used to transform pasted content before it is applied to
   /// the document.
-  transformPasted?: (slice: Slice) => Slice
+  transformPasted?: (this: P, slice: Slice) => Slice
 
   /// Allows you to pass custom rendering and behavior logic for
   /// nodes. Should map node names to constructor functions that
@@ -668,15 +672,15 @@ export interface EditorProps {
   /// selection when copying text to the clipboard. By default, the
   /// editor will use [`textBetween`](#model.Node.textBetween) on the
   /// selected range.
-  clipboardTextSerializer?: (content: Slice) => string
+  clipboardTextSerializer?: (this: P, content: Slice) => string
 
   /// A set of [document decorations](#view.Decoration) to show in the
   /// view.
-  decorations?: (state: EditorState) => DecorationSource | null | undefined
+  decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined
 
   /// When this returns false, the content of the view is not directly
   /// editable.
-  editable?: (state: EditorState) => boolean
+  editable?: (this: P, state: EditorState) => boolean
 
   /// Control the DOM attributes of the editable element. May be either
   /// an object or a function going from an editor state to an object.

package/src/viewdesc.ts

@@ -262,8 +262,8 @@ export class ViewDesc {
     }
   }
 
-  domFromPos(pos: number, side: number): {node: DOMNode, offset: number} {
-    if (!this.contentDOM) return {node: this.dom, offset: 0}
+  domFromPos(pos: number, side: number): {node: DOMNode, offset: number, atom?: number} {
+    if (!this.contentDOM) return {node: this.dom, offset: 0, atom: pos + 1}
     // First find the position in the child array
     let i = 0, offset = 0
     for (let curPos = 0; i < this.children.length; i++) {
@@ -1196,7 +1196,7 @@ class ViewTreeUpdater {
     if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM) child.dirty = CONTENT_DIRTY
     if (!child.update(node, outerDeco, innerDeco, view)) return false
     this.destroyBetween(this.index, index)
-    this.index = index + 1
+    this.index++
     return true
   }