prosemirror-view 1.26.5 → 1.27.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 1.27.2 (2022-08-19)
+
+### Bug fixes
+
+Fix an issue where `DecorationSet.map`, given a mapping with multiple steps, could in some cases corrupt the decorations.
+
+Stop calling `handleClick` when the mouse moved but failed to fire mousemove events (for example when dragging a scrollbar).
+
+## 1.27.1 (2022-08-16)
+
+### Bug fixes
+
+Fix a bug in `DecorationSet.map` that could cause invalid mapping when step maps contain multiple replaced ranges.
+
+Make sure that when the editor receives focus via tab or calling `.focus()` on its DOM element, the existing selection is restored.
+
+Avoid collapsing of whitespace in Firefox when the editor doesn't have `white-space` set to `pre-wrap`.
+
+## 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

package/dist/index.cjs

@@ -531,7 +531,7 @@ function _coordsAtPos(view, pos, side) {
         to++;
       }
 
-      return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
+      return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
     }
   }
 
@@ -1462,7 +1462,7 @@ var NodeViewDesc = function (_ViewDesc4) {
       var composition = view.composing ? this.localCompositionInfo(view, pos) : null;
       var localComposition = composition && composition.pos > -1 ? composition : null;
       var compositionInChild = composition && composition.pos < 0;
-      var updater = new ViewTreeUpdater(this, localComposition && localComposition.node);
+      var updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
       iterDeco(this.node, this.innerDeco, function (widget, i, insideNode) {
         if (widget.spec.marks) updater.syncToMarks(widget.spec.marks, inline, view);else if (widget.type.side >= 0 && !insideNode) updater.syncToMarks(i == _this6.node.childCount ? prosemirrorModel.Mark.none : _this6.node.child(i).marks, inline, view);
         updater.placeWidget(widget, view, off);
@@ -1974,10 +1974,11 @@ function rm(dom) {
 }
 
 var ViewTreeUpdater = function () {
-  function ViewTreeUpdater(top, lock) {
+  function ViewTreeUpdater(top, lock, view) {
     _classCallCheck(this, ViewTreeUpdater);
 
     this.lock = lock;
+    this.view = view;
     this.index = 0;
     this.stack = [];
     this.changed = false;
@@ -2158,7 +2159,7 @@ var ViewTreeUpdater = function () {
         lastChild = parent.children[parent.children.length - 1];
       }
 
-      if (!lastChild || !(lastChild instanceof TextViewDesc) || /\n$/.test(lastChild.node.text)) {
+      if (!lastChild || !(lastChild instanceof TextViewDesc) || /\n$/.test(lastChild.node.text) || this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text)) {
         if ((safari || chrome) && lastChild && lastChild.dom.contentEditable == "false") this.addHackNode("IMG", parent);
         this.addHackNode("BR", this.top);
       }
@@ -3164,6 +3165,10 @@ function addContext(slice, context) {
 
 var handlers = {};
 var editHandlers = {};
+var passiveHandlers = {
+  touchstart: true,
+  touchmove: true
+};
 
 var InputState = _createClass(function InputState() {
   _classCallCheck(this, InputState);
@@ -3182,6 +3187,8 @@ var InputState = _createClass(function InputState() {
   this.lastSelectionTime = 0;
   this.lastIOSEnter = 0;
   this.lastIOSEnterFallbackTimeout = -1;
+  this.lastFocus = 0;
+  this.lastTouch = 0;
   this.lastAndroidDelete = 0;
   this.composing = false;
   this.composingTimeout = -1;
@@ -3197,7 +3204,9 @@ function initInput(view) {
     var handler = handlers[event];
     view.dom.addEventListener(event, view.input.eventHandlers[event] = function (event) {
       if (eventBelongsToView(view, event) && !runCustomHandler(view, event) && (view.editable || !(event.type in editHandlers))) handler(view, event);
-    });
+    }, passiveHandlers[event] ? {
+      passive: true
+    } : undefined);
   };
 
   for (var event in handlers) {
@@ -3547,6 +3556,7 @@ var MouseDown = function () {
       if (!this.view.dom.contains(event.target)) return;
       var pos = this.pos;
       if (this.view.state.doc != this.startDoc) pos = this.view.posAtCoords(eventCoords(event));
+      this.updateAllowDefault(event);
 
       if (this.allowDefault || !pos) {
         setSelectionOrigin(this.view, "pointer");
@@ -3562,20 +3572,31 @@ var MouseDown = function () {
   }, {
     key: "move",
     value: function move(event) {
-      if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 || Math.abs(this.event.y - event.clientY) > 4)) this.allowDefault = true;
+      this.updateAllowDefault(event);
       setSelectionOrigin(this.view, "pointer");
       if (event.buttons == 0) this.done();
     }
+  }, {
+    key: "updateAllowDefault",
+    value: function updateAllowDefault(event) {
+      if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 || Math.abs(this.event.y - event.clientY) > 4)) this.allowDefault = true;
+    }
   }]);
 
   return MouseDown;
 }();
 
-handlers.touchdown = function (view) {
+handlers.touchstart = function (view) {
+  view.input.lastTouch = Date.now();
   forceDOMFlush(view);
   setSelectionOrigin(view, "pointer");
 };
 
+handlers.touchmove = function (view) {
+  view.input.lastTouch = Date.now();
+  setSelectionOrigin(view, "pointer");
+};
+
 handlers.contextmenu = function (view) {
   return forceDOMFlush(view);
 };
@@ -3813,7 +3834,6 @@ editHandlers.drop = function (view, _event) {
   var eventPos = view.posAtCoords(eventCoords(event));
   if (!eventPos) return;
   var $mouse = view.state.doc.resolve(eventPos.pos);
-  if (!$mouse) return;
   var slice = dragging && dragging.slice;
 
   if (slice) {
@@ -3861,6 +3881,8 @@ editHandlers.drop = function (view, _event) {
 };
 
 handlers.focus = function (view) {
+  view.input.lastFocus = Date.now();
+
   if (!view.focused) {
     view.domObserver.stop();
     view.dom.classList.add("ProseMirror-focused");
@@ -4400,24 +4422,32 @@ var DecorationGroup = function () {
 function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, options) {
   var children = oldChildren.slice();
 
-  var shift = function shift(oldStart, oldEnd, newStart, newEnd) {
-    for (var i = 0; i < children.length; i += 3) {
-      var end = children[i + 1],
-          dSize = void 0;
-      if (end < 0 || oldStart > end + oldOffset) continue;
-      var start = children[i] + oldOffset;
-
-      if (oldEnd >= start) {
-        children[i + 1] = oldStart <= start ? -2 : -1;
-      } else if (newStart >= offset && (dSize = newEnd - newStart - (oldEnd - oldStart))) {
-        children[i] += dSize;
-        children[i + 1] += dSize;
+  var _loop4 = function _loop4(i, _baseOffset) {
+    var moved = 0;
+    mapping.maps[i].forEach(function (oldStart, oldEnd, newStart, newEnd) {
+      var dSize = newEnd - newStart - (oldEnd - oldStart);
+
+      for (var _i12 = 0; _i12 < children.length; _i12 += 3) {
+        var end = children[_i12 + 1];
+        if (end < 0 || oldStart > end + _baseOffset - moved) continue;
+        var start = children[_i12] + _baseOffset - moved;
+
+        if (oldEnd >= start) {
+          children[_i12 + 1] = oldStart <= start ? -2 : -1;
+        } else if (newStart >= offset && dSize) {
+          children[_i12] += dSize;
+          children[_i12 + 1] += dSize;
+        }
       }
-    }
+
+      moved += dSize;
+    });
+    _baseOffset = mapping.maps[i].map(_baseOffset, -1);
+    baseOffset = _baseOffset;
   };
 
-  for (var i = 0; i < mapping.maps.length; i++) {
-    mapping.maps[i].forEach(shift);
+  for (var i = 0, baseOffset = oldOffset; i < mapping.maps.length; i++) {
+    _loop4(i, baseOffset);
   }
 
   var mustRebuild = false;
@@ -4509,8 +4539,8 @@ function mapAndGatherRemainingDecorations(children, oldChildren, decorations, ma
       if (mapped) decorations.push(mapped);else if (options.onRemove) options.onRemove(set.local[i].spec);
     }
 
-    for (var _i12 = 0; _i12 < set.children.length; _i12 += 3) {
-      gather(set.children[_i12 + 2], set.children[_i12] + oldOffset + 1);
+    for (var _i13 = 0; _i13 < set.children.length; _i13 += 3) {
+      gather(set.children[_i13 + 2], set.children[_i13] + oldOffset + 1);
     }
   }
 
@@ -4816,7 +4846,8 @@ var DOMObserver = function () {
   }, {
     key: "flush",
     value: function flush() {
-      if (!this.view.docView || this.flushingSoon > -1) return;
+      var view = this.view;
+      if (!view.docView || this.flushingSoon > -1) return;
       var mutations = this.observer ? this.observer.takeRecords() : [];
 
       if (this.queue.length) {
@@ -4824,14 +4855,14 @@ var DOMObserver = function () {
         this.queue.length = 0;
       }
 
-      var sel = this.view.domSelection();
-      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+      var sel = view.domSelection();
+      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
       var from = -1,
           to = -1,
           typeOver = false,
           added = [];
 
-      if (this.view.editable) {
+      if (view.editable) {
         for (var i = 0; i < mutations.length; i++) {
           var result = this.registerMutation(mutations[i], added);
 
@@ -4855,14 +4886,21 @@ var DOMObserver = function () {
         }
       }
 
-      if (from > -1 || newSel) {
+      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))) {
+        view.input.lastFocus = 0;
+        selectionToDOM(view);
+        this.currentSelection.set(sel);
+        view.scrollToSelection();
+      } else if (from > -1 || newSel) {
         if (from > -1) {
-          this.view.docView.markDirty(from, to);
-          checkCSS(this.view);
+          view.docView.markDirty(from, to);
+          checkCSS(view);
         }
 
         this.handleDOMChange(from, to, typeOver, added);
-        if (this.view.docView && this.view.docView.dirty) this.view.updateState(this.view.state);else if (!this.currentSelection.eq(sel)) selectionToDOM(this.view);
+        if (view.docView && view.docView.dirty) view.updateState(view.state);else if (!this.currentSelection.eq(sel)) selectionToDOM(view);
         this.currentSelection.set(sel);
       }
     }
@@ -4887,8 +4925,8 @@ var DOMObserver = function () {
             next = mut.nextSibling;
 
         if (ie && ie_version <= 11 && mut.addedNodes.length) {
-          for (var _i13 = 0; _i13 < mut.addedNodes.length; _i13++) {
-            var _mut$addedNodes$_i = mut.addedNodes[_i13],
+          for (var _i14 = 0; _i14 < mut.addedNodes.length; _i14++) {
+            var _mut$addedNodes$_i = mut.addedNodes[_i14],
                 previousSibling = _mut$addedNodes$_i.previousSibling,
                 nextSibling = _mut$addedNodes$_i.nextSibling;
             if (!previousSibling || Array.prototype.indexOf.call(mut.addedNodes, previousSibling) < 0) prev = previousSibling;
@@ -4922,12 +4960,19 @@ var DOMObserver = function () {
   return DOMObserver;
 }();
 
-var cssChecked = false;
+var cssChecked = new WeakMap();
+var cssCheckWarned = false;
 
 function checkCSS(view) {
-  if (cssChecked) return;
-  cssChecked = true;
-  if (getComputedStyle(view.dom).whiteSpace == "normal") console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
+  if (cssChecked.has(view)) return;
+  cssChecked.set(view, null);
+
+  if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+    view.requiresGeckoHackNode = gecko;
+    if (cssCheckWarned) return;
+    console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
+    cssCheckWarned = true;
+  }
 }
 
 function parseBetween(view, from_, to_) {
@@ -5048,16 +5093,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   to = view.state.doc.resolve(to).after(shared + 1);
   var sel = view.state.selection;
   var parse = parseBetween(view, from, to);
-
-  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
-    var text = view.cursorWrapper.deco.type.toDOM.nextSibling;
-    var size = text && text.nodeValue ? text.nodeValue.length : 1;
-    parse.sel = {
-      anchor: parse.sel.anchor + size,
-      head: parse.sel.anchor + size
-    };
-  }
-
   var doc = view.state.doc,
       compare = doc.slice(parse.from, parse.to);
   var preferredPos, preferredSide;
@@ -5100,6 +5135,14 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
   }
 
+  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from && parse.sel.head == parse.sel.anchor) {
+    var size = change.endB - change.start;
+    parse.sel = {
+      anchor: parse.sel.anchor + size,
+      head: parse.sel.anchor + size
+    };
+  }
+
   view.input.domChangeCount++;
 
   if (view.state.selection.from < view.state.selection.to && change.start == change.endB && view.state.selection instanceof prosemirrorState.TextSelection) {
@@ -5170,12 +5213,11 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       tr = view.state.tr;
       if (markChange.type == "add") tr.addMark(chFrom, chTo, markChange.mark);else tr.removeMark(chFrom, chTo, markChange.mark);
     } else if ($from.parent.child($from.index()).isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
-      var _text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
-
+      var text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
       if (view.someProp("handleTextInput", function (f) {
-        return f(view, chFrom, chTo, _text);
+        return f(view, chFrom, chTo, text);
       })) return;
-      tr = view.state.tr.insertText(_text, chFrom, chTo);
+      tr = view.state.tr.insertText(text, chFrom, chTo);
     }
   }
 
@@ -5209,8 +5251,8 @@ function isMarkChange(cur, prev) {
     added = prevMarks[i].removeFromSet(added);
   }
 
-  for (var _i14 = 0; _i14 < curMarks.length; _i14++) {
-    removed = curMarks[_i14].removeFromSet(removed);
+  for (var _i15 = 0; _i15 < curMarks.length; _i15++) {
+    removed = curMarks[_i15].removeFromSet(removed);
   }
 
   if (added.length == 1 && removed.length == 0) {
@@ -5233,8 +5275,8 @@ function isMarkChange(cur, prev) {
 
   var updated = [];
 
-  for (var _i15 = 0; _i15 < prev.childCount; _i15++) {
-    updated.push(update(prev.child(_i15)));
+  for (var _i16 = 0; _i16 < prev.childCount; _i16++) {
+    updated.push(update(prev.child(_i16)));
   }
 
   if (prosemirrorModel.Fragment.from(updated).eq(cur)) return {
@@ -5327,6 +5369,7 @@ var EditorView = function () {
     this.input = new InputState();
     this.prevDirectPlugins = [];
     this.pluginViews = [];
+    this.requiresGeckoHackNode = false;
     this.dragging = null;
     this._props = props;
     this.state = props.state;
@@ -5410,8 +5453,6 @@ var EditorView = function () {
   }, {
     key: "updateStateInner",
     value: function updateStateInner(state, reconfigured) {
-      var _this16 = this;
-
       var prev = this.state,
           redraw = false,
           updateSel = false;
@@ -5474,19 +5515,26 @@ var EditorView = function () {
       if (scroll == "reset") {
         this.dom.scrollTop = 0;
       } else if (scroll == "to selection") {
-        var startDOM = this.domSelection().focusNode;
-        if (this.someProp("handleScrollToSelection", function (f) {
-          return f(_this16);
-        })) ;else if (state.selection instanceof prosemirrorState.NodeSelection) {
-          var target = this.docView.domAfterPos(state.selection.from);
-          if (target.nodeType == 1) scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
-        } else {
-          scrollRectIntoView(this, this.coordsAtPos(state.selection.head, 1), startDOM);
-        }
+        this.scrollToSelection();
       } else if (oldScrollPos) {
         resetScrollPos(oldScrollPos);
       }
     }
+  }, {
+    key: "scrollToSelection",
+    value: function scrollToSelection() {
+      var _this16 = this;
+
+      var startDOM = this.domSelection().focusNode;
+      if (this.someProp("handleScrollToSelection", function (f) {
+        return f(_this16);
+      })) ;else if (this.state.selection instanceof prosemirrorState.NodeSelection) {
+        var target = this.docView.domAfterPos(this.state.selection.from);
+        if (target.nodeType == 1) scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
+      } else {
+        scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM);
+      }
+    }
   }, {
     key: "destroyPluginViews",
     value: function destroyPluginViews() {
@@ -5508,13 +5556,13 @@ var EditorView = function () {
           if (plugin.spec.view) this.pluginViews.push(plugin.spec.view(this));
         }
 
-        for (var _i16 = 0; _i16 < this.state.plugins.length; _i16++) {
-          var _plugin = this.state.plugins[_i16];
+        for (var _i17 = 0; _i17 < this.state.plugins.length; _i17++) {
+          var _plugin = this.state.plugins[_i17];
           if (_plugin.spec.view) this.pluginViews.push(_plugin.spec.view(this));
         }
       } else {
-        for (var _i17 = 0; _i17 < this.pluginViews.length; _i17++) {
-          var pluginView = this.pluginViews[_i17];
+        for (var _i18 = 0; _i18 < this.pluginViews.length; _i18++) {
+          var pluginView = this.pluginViews[_i18];
           if (pluginView.update) pluginView.update(this, prevState);
         }
       }
@@ -5532,8 +5580,8 @@ var EditorView = function () {
       }
 
       var plugins = this.state.plugins;
-      if (plugins) for (var _i18 = 0; _i18 < plugins.length; _i18++) {
-        var _prop2 = plugins[_i18].props[propName];
+      if (plugins) for (var _i19 = 0; _i19 < plugins.length; _i19++) {
+        var _prop2 = plugins[_i19].props[propName];
         if (_prop2 != null && (value = f ? f(_prop2) : _prop2)) return value;
       }
     }
@@ -5558,7 +5606,7 @@ var EditorView = function () {
       var cached = this._root;
 
       if (cached == null) {
-        var _loop4 = function _loop4(search) {
+        var _loop5 = function _loop5(search) {
           if (search.nodeType == 9 || search.nodeType == 11 && search.host) {
             if (!search.getSelection) Object.getPrototypeOf(search).getSelection = function () {
               return search.ownerDocument.getSelection();
@@ -5570,7 +5618,7 @@ var EditorView = function () {
         };
 
         for (var search = this.dom.parentNode; search; search = search.parentNode) {
-          var _ret3 = _loop4(search);
+          var _ret3 = _loop5(search);
 
           if (_typeof(_ret3) === "object") return _ret3.v;
         }

package/dist/index.d.ts

@@ -580,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
@@ -592,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
@@ -669,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
@@ -680,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
@@ -690,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.
+    Can be used to transform pasted or dragged-and-dropped 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
@@ -750,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.