prosemirror-view 1.33.2 → 1.33.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.33.3 (2024-03-22)
+
+### Bug fixes
+
+Further improve preserving of compositions for IME systems that keep the cursor before the composed text.
+
 ## 1.33.2 (2024-03-21)
 
 ### Bug fixes

package/dist/index.cjs

@@ -69,7 +69,7 @@ function textNodeBefore$1(node, offset) {
   for (;;) {
     if (node.nodeType == 3 && offset) return node;
     if (node.nodeType == 1 && offset > 0) {
-      if (node.contentEditable != "false") return null;
+      if (node.contentEditable == "false") return null;
       node = node.childNodes[offset - 1];
       offset = nodeSize(node);
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -84,7 +84,7 @@ function textNodeAfter$1(node, offset) {
   for (;;) {
     if (node.nodeType == 3 && offset < node.nodeValue.length) return node;
     if (node.nodeType == 1 && offset < node.childNodes.length) {
-      if (node.contentEditable != "false") return null;
+      if (node.contentEditable == "false") return null;
       node = node.childNodes[offset];
       offset = 0;
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -1044,6 +1044,11 @@ var ViewDesc = function () {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return false;
+    }
   }]);
   return ViewDesc;
 }();
@@ -1308,14 +1313,7 @@ var NodeViewDesc = function (_ViewDesc4) {
         from = _view$state$selection.from,
         to = _view$state$selection.to;
       if (!(view.state.selection instanceof prosemirrorState.TextSelection) || from < pos || to > pos + this.node.content.size) return null;
-      var sel = view.domSelectionRange();
-      var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
-      var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
-      var textNode = textBefore || textAfter;
-      if (textBefore && textAfter && textBefore != textAfter) {
-        var descAfter = textAfter.pmViewDesc;
-        if (!descAfter || descAfter instanceof TextViewDesc && descAfter.node.text != textAfter.nodeValue) textNode = textAfter;
-      }
+      var textNode = view.input.compositionNode;
       if (!textNode || !this.dom.contains(textNode.parentNode)) return null;
       if (this.node.inlineContent) {
         var text = textNode.nodeValue;
@@ -1505,6 +1503,11 @@ var TextViewDesc = function (_NodeViewDesc) {
     get: function get() {
       return false;
     }
+  }, {
+    key: "isText",
+    value: function isText(text) {
+      return this.node.text == text;
+    }
   }]);
   return TextViewDesc;
 }(NodeViewDesc);
@@ -2822,6 +2825,7 @@ var InputState = _createClass(function InputState() {
   this.lastTouch = 0;
   this.lastAndroidDelete = 0;
   this.composing = false;
+  this.compositionNode = null;
   this.composingTimeout = -1;
   this.compositionNodes = [];
   this.compositionEndedAt = -2e8;
@@ -3209,6 +3213,7 @@ editHandlers.compositionend = function (view, event) {
     view.input.composing = false;
     view.input.compositionEndedAt = event.timeStamp;
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+    view.input.compositionNode = null;
     if (view.input.compositionPendingChanges) Promise.resolve().then(function () {
       return view.domObserver.flush();
     });
@@ -3229,6 +3234,22 @@ function clearComposition(view) {
   }
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+  var sel = view.domSelectionRange();
+  if (!sel.focusNode) return null;
+  var textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+  var textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+  if (textBefore && textAfter && textBefore != textAfter) {
+    var descAfter = textAfter.pmViewDesc;
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+      return textAfter;
+    } else if (view.input.compositionNode == textAfter) {
+      var descBefore = textBefore.pmViewDesc;
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue))) return textAfter;
+    }
+  }
+  return textBefore;
+}
 function timestampFromCustomEvent() {
   var event = document.createEvent("Event");
   event.initEvent("event", true, true);
@@ -4798,6 +4819,7 @@ var EditorView = function () {
         var forceSelUpdate = updateDoc && (ie || chrome) && !this.composing && !prev.selection.empty && !state.selection.empty && selectionContextChanged(prev.selection, state.selection);
         if (updateDoc) {
           var chromeKludge = chrome ? this.trackWrites = this.domSelectionRange().focusNode : null;
+          if (this.composing) this.input.compositionNode = findCompositionNode(this);
           if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
             this.docView.updateOuterDeco(outerDeco);
             this.docView.destroy();

package/dist/index.d.cts

@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -405,6 +406,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.d.ts

@@ -361,6 +361,7 @@ declare class ViewDesc {
     markParentsDirty(): void;
     get domAtom(): boolean;
     get ignoreForCoords(): boolean;
+    isText(text: string): boolean;
 }
 declare class NodeViewDesc extends ViewDesc {
     node: Node;
@@ -405,6 +406,7 @@ declare class TextViewDesc extends NodeViewDesc {
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
+    isText(text: string): boolean;
 }
 
 /**

package/dist/index.js

@@ -65,7 +65,7 @@ function textNodeBefore$1(node, offset) {
         if (node.nodeType == 3 && offset)
             return node;
         if (node.nodeType == 1 && offset > 0) {
-            if (node.contentEditable != "false")
+            if (node.contentEditable == "false")
                 return null;
             node = node.childNodes[offset - 1];
             offset = nodeSize(node);
@@ -84,7 +84,7 @@ function textNodeAfter$1(node, offset) {
         if (node.nodeType == 3 && offset < node.nodeValue.length)
             return node;
         if (node.nodeType == 1 && offset < node.childNodes.length) {
-            if (node.contentEditable != "false")
+            if (node.contentEditable == "false")
                 return null;
             node = node.childNodes[offset];
             offset = 0;
@@ -1115,6 +1115,7 @@ class ViewDesc {
     }
     get domAtom() { return false; }
     get ignoreForCoords() { return false; }
+    isText(text) { return false; }
 }
 // A widget desc represents a widget decoration, which is a DOM node
 // drawn between the document nodes.
@@ -1377,15 +1378,7 @@ class NodeViewDesc extends ViewDesc {
         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.domSelectionRange();
-        let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
-        let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
-        let textNode = textBefore || textAfter;
-        if (textBefore && textAfter && textBefore != textAfter) {
-            let descAfter = textAfter.pmViewDesc;
-            if (!descAfter || descAfter instanceof TextViewDesc && descAfter.node.text != textAfter.nodeValue)
-                textNode = textAfter;
-        }
+        let textNode = view.input.compositionNode;
         if (!textNode || !this.dom.contains(textNode.parentNode))
             return null;
         if (this.node.inlineContent) {
@@ -1527,6 +1520,7 @@ class TextViewDesc extends NodeViewDesc {
             this.dirty = NODE_DIRTY;
     }
     get domAtom() { return false; }
+    isText(text) { return this.node.text == text; }
 }
 // A dummy desc used to tag trailing BR or IMG nodes created to work
 // around contentEditable terribleness.
@@ -3000,6 +2994,7 @@ class InputState {
         this.lastTouch = 0;
         this.lastAndroidDelete = 0;
         this.composing = false;
+        this.compositionNode = null;
         this.composingTimeout = -1;
         this.compositionNodes = [];
         this.compositionEndedAt = -2e8;
@@ -3436,6 +3431,7 @@ editHandlers.compositionend = (view, event) => {
         view.input.composing = false;
         view.input.compositionEndedAt = event.timeStamp;
         view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
+        view.input.compositionNode = null;
         if (view.input.compositionPendingChanges)
             Promise.resolve().then(() => view.domObserver.flush());
         view.input.compositionID++;
@@ -3455,6 +3451,25 @@ function clearComposition(view) {
     while (view.input.compositionNodes.length > 0)
         view.input.compositionNodes.pop().markParentsDirty();
 }
+function findCompositionNode(view) {
+    let sel = view.domSelectionRange();
+    if (!sel.focusNode)
+        return null;
+    let textBefore = textNodeBefore$1(sel.focusNode, sel.focusOffset);
+    let textAfter = textNodeAfter$1(sel.focusNode, sel.focusOffset);
+    if (textBefore && textAfter && textBefore != textAfter) {
+        let descAfter = textAfter.pmViewDesc;
+        if (!descAfter || !descAfter.isText(textAfter.nodeValue)) {
+            return textAfter;
+        }
+        else if (view.input.compositionNode == textAfter) {
+            let descBefore = textBefore.pmViewDesc;
+            if (!(!descBefore || !descBefore.isText(textBefore.nodeValue)))
+                return textAfter;
+        }
+    }
+    return textBefore;
+}
 function timestampFromCustomEvent() {
     let event = document.createEvent("Event");
     event.initEvent("event", true, true);
@@ -5276,6 +5291,8 @@ class EditorView {
                 // tracks that and forces a selection reset when our update
                 // did write to the node.
                 let chromeKludge = chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null;
+                if (this.composing)
+                    this.input.compositionNode = findCompositionNode(this);
                 if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
                     this.docView.updateOuterDeco(outerDeco);
                     this.docView.destroy();

package/package.json

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

package/src/dom.ts

@@ -71,7 +71,7 @@ export function textNodeBefore(node: Node, offset: number) {
   for (;;) {
     if (node.nodeType == 3 && offset) return node as Text
     if (node.nodeType == 1 && offset > 0) {
-      if ((node as HTMLElement).contentEditable != "false") return null
+      if ((node as HTMLElement).contentEditable == "false") return null
       node = node.childNodes[offset - 1]
       offset = nodeSize(node)
     } else if (node.parentNode && !hasBlockDesc(node)) {
@@ -87,7 +87,7 @@ export function textNodeAfter(node: Node, offset: number) {
   for (;;) {
     if (node.nodeType == 3 && offset < node.nodeValue!.length) return node as Text
     if (node.nodeType == 1 && offset < node.childNodes.length) {
-      if ((node as HTMLElement).contentEditable != "false") return null
+      if ((node as HTMLElement).contentEditable == "false") return null
       node = node.childNodes[offset]
       offset = 0
     } else if (node.parentNode && !hasBlockDesc(node)) {

package/src/index.ts

@@ -5,7 +5,7 @@ import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrol
         resetScrollPos, focusPreventScroll} from "./domcoords"
 import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
-        InputState, doPaste, Dragging} from "./input"
+        InputState, doPaste, Dragging, findCompositionNode} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
 import {Decoration, viewDecorations, DecorationSource} from "./decoration"
 import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
@@ -197,6 +197,7 @@ export class EditorView {
         // tracks that and forces a selection reset when our update
         // did write to the node.
         let chromeKludge = browser.chrome ? (this.trackWrites = this.domSelectionRange().focusNode) : null
+        if (this.composing) this.input.compositionNode = findCompositionNode(this)
         if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
           this.docView.updateOuterDeco(outerDeco)
           this.docView.destroy()

package/src/input.ts

@@ -6,7 +6,7 @@ import * as browser from "./browser"
 import {captureKeyDown} from "./capturekeys"
 import {parseFromClipboard, serializeForClipboard} from "./clipboard"
 import {selectionBetween, selectionToDOM, selectionFromDOM} from "./selection"
-import {keyEvent, DOMNode} from "./dom"
+import {keyEvent, DOMNode, textNodeBefore, textNodeAfter} from "./dom"
 import {EditorView} from "./index"
 import {ViewDesc} from "./viewdesc"
 
@@ -30,6 +30,7 @@ export class InputState {
   lastTouch = 0
   lastAndroidDelete = 0
   composing = false
+  compositionNode: Text | null = null
   composingTimeout = -1
   compositionNodes: ViewDesc[] = []
   compositionEndedAt = -2e8
@@ -490,6 +491,7 @@ editHandlers.compositionend = (view, event) => {
     view.input.composing = false
     view.input.compositionEndedAt = event.timeStamp
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0
+    view.input.compositionNode = null
     if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush())
     view.input.compositionID++
     scheduleComposeEnd(view, 20)
@@ -509,6 +511,24 @@ export function clearComposition(view: EditorView) {
   while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop()!.markParentsDirty()
 }
 
+export function findCompositionNode(view: EditorView) {
+  let sel = view.domSelectionRange()
+  if (!sel.focusNode) return null
+  let textBefore = textNodeBefore(sel.focusNode, sel.focusOffset)
+  let textAfter = textNodeAfter(sel.focusNode, sel.focusOffset)
+  if (textBefore && textAfter && textBefore != textAfter) {
+    let descAfter = textAfter.pmViewDesc
+    if (!descAfter || !descAfter.isText(textAfter.nodeValue!)) {
+      return textAfter
+    } else if (view.input.compositionNode == textAfter) {
+      let descBefore = textBefore.pmViewDesc
+      if (!(!descBefore || !descBefore.isText(textBefore.nodeValue!)))
+        return textAfter
+    }
+  }
+  return textBefore
+}
+
 function timestampFromCustomEvent() {
   let event = document.createEvent("Event")
   event.initEvent("event", true, true)

package/src/viewdesc.ts

@@ -1,7 +1,7 @@
 import {DOMSerializer, Fragment, Mark, Node, ParseRule} from "prosemirror-model"
 import {TextSelection} from "prosemirror-state"
 
-import {domIndex, isEquivalentPosition, DOMNode, textNodeBefore, textNodeAfter} from "./dom"
+import {domIndex, isEquivalentPosition, DOMNode} from "./dom"
 import * as browser from "./browser"
 import {Decoration, DecorationSource, WidgetConstructor, WidgetType, NodeType} from "./decoration"
 import {EditorView} from "./index"
@@ -485,6 +485,8 @@ export class ViewDesc {
   get domAtom() { return false }
 
   get ignoreForCoords() { return false }
+
+  isText(text: string) { return false }
 }
 
 // A widget desc represents a widget decoration, which is a DOM node
@@ -759,15 +761,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.domSelectionRange()
-    let textBefore = textNodeBefore(sel.focusNode!, sel.focusOffset)
-    let textAfter = textNodeAfter(sel.focusNode!, sel.focusOffset)
-    let textNode = textBefore || textAfter
-    if (textBefore && textAfter && textBefore != textAfter) {
-      let descAfter = textAfter.pmViewDesc
-      if (!descAfter || descAfter instanceof TextViewDesc && descAfter.node.text != textAfter.nodeValue)
-        textNode = textAfter
-    }
+    let textNode = view.input.compositionNode
     if (!textNode || !this.dom.contains(textNode.parentNode)) return null
 
     if (this.node.inlineContent) {
@@ -913,6 +907,8 @@ class TextViewDesc extends NodeViewDesc {
   }
 
   get domAtom() { return false }
+
+  isText(text: string) { return this.node.text == text }
 }
 
 // A dummy desc used to tag trailing BR or IMG nodes created to work

package/src/#index.ts#

@@ -1,803 +0,0 @@
-import {NodeSelection, EditorState, Plugin, PluginView, Transaction, Selection} from "prosemirror-state"
-import {Slice, ResolvedPos, DOMParser, DOMSerializer, Node, Mark} from "prosemirror-model"
-
-import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrollPos,
-        resetScrollPos, focusPreventScroll} from "./domcoords"
-import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
-import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
-        InputState, doPaste, Dragging} from "./input"
-import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
-import {Decoration, viewDecorations, DecorationSource} from "./decoration"
-import {DOMObserver, safariShadowSelectionRange} from "./domobserver"
-import {readDOMChange} from "./domchange"
-import {DOMSelection, DOMNode, DOMSelectionRange, deepActiveElement} from "./dom"
-import * as browser from "./browser"
-
-export {Decoration, DecorationSet, DecorationAttrs, DecorationSource} from "./decoration"
-export {NodeView} from "./viewdesc"
-
-// Exported for testing
-import {serializeForClipboard, parseFromClipboard} from "./clipboard"
-import {endComposition} from "./input"
-/// @internal
-export const __serializeForClipboard = serializeForClipboard
-/// @internal
-export const __parseFromClipboard = parseFromClipboard
-/// @internal
-export const __endComposition = endComposition
-
-/// An editor view manages the DOM structure that represents an
-/// editable document. Its state and behavior are determined by its
-/// [props](#view.DirectEditorProps).
-export class EditorView {
-  private _props: DirectEditorProps
-  private directPlugins: readonly Plugin[]
-  private _root: Document | ShadowRoot | null = null
-  /// @internal
-  focused = false
-  /// Kludge used to work around a Chrome bug @internal
-  trackWrites: DOMNode | null = null
-  private mounted = false
-  /// @internal
-  markCursor: readonly Mark[] | null = null
-  /// @internal
-  cursorWrapper: {dom: DOMNode, deco: Decoration} | null = null
-  /// @internal
-  nodeViews: NodeViewSet
-  /// @internal
-  lastSelectedViewDesc: ViewDesc | undefined = undefined
-  /// @internal
-  docView: NodeViewDesc
-  /// @internal
-  input = new InputState
-  private prevDirectPlugins: readonly Plugin[] = []
-  private pluginViews: PluginView[] = []
-  /// @internal
-  domObserver!: DOMObserver
-  /// Holds `true` when a hack node is needed in Firefox to prevent the
-  /// [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
-  /// @internal
-  requiresGeckoHackNode: boolean = false
-
-  /// The view's current [state](#state.EditorState).
-  public state: EditorState
-
-  /// Create a view. `place` may be a DOM node that the editor should
-  /// be appended to, a function that will place it into the document,
-  /// or an object whose `mount` property holds the node to use as the
-  /// document container. If it is `null`, the editor will not be
-  /// added to the document.
-  constructor(place: null | DOMNode | ((editor: HTMLElement) => void) | {mount: HTMLElement}, props: DirectEditorProps) {
-    this._props = props
-    this.state = props.state
-    this.directPlugins = props.plugins || []
-    this.directPlugins.forEach(checkStateComponent)
-
-    this.dispatch = this.dispatch.bind(this)
-
-    this.dom = (place && (place as {mount: HTMLElement}).mount) || document.createElement("div")
-    if (place) {
-      if ((place as DOMNode).appendChild) (place as DOMNode).appendChild(this.dom)
-      else if (typeof place == "function") place(this.dom)
-      else if ((place as {mount: HTMLElement}).mount) this.mounted = true
-    }
-
-    this.editable = getEditable(this)
-    updateCursorWrapper(this)
-    this.nodeViews = buildNodeViews(this)
-    this.docView = docViewDesc(this.state.doc, computeDocDeco(this), viewDecorations(this), this.dom, this)
-
-    this.domObserver = new DOMObserver(this, (from, to, typeOver, added) => readDOMChange(this, from, to, typeOver, added))
-    this.domObserver.start()
-    initInput(this)
-    this.updatePluginViews()
-  }
-
-  /// An editable DOM node containing the document. (You probably
-  /// should not directly interfere with its content.)
-  readonly dom: HTMLElement
-
-  /// Indicates whether the editor is currently [editable](#view.EditorProps.editable).
-  editable: boolean
-
-  /// When editor content is being dragged, this object contains
-  /// information about the dragged slice and whether it is being
-  /// copied or moved. At any other time, it is null.
-  dragging: null | {slice: Slice, move: boolean} = null
-
-  /// Holds `true` when a
-  /// [composition](https://w3c.github.io/uievents/#events-compositionevents)
-  /// is active.
-  get composing() { return this.input.composing }
-
-  /// The view's current [props](#view.EditorProps).
-  get props() {
-    if (this._props.state != this.state) {
-      let prev = this._props
-      this._props = {} as any
-      for (let name in prev) (this._props as any)[name] = (prev as any)[name]
-      this._props.state = this.state
-    }
-    return this._props
-  }
-
-  /// Update the view's props. Will immediately cause an update to
-  /// the DOM.
-  update(props: DirectEditorProps) {
-    if (props.handleDOMEvents != this._props.handleDOMEvents) ensureListeners(this)
-    let prevProps = this._props
-    this._props = props
-    if (props.plugins) {
-      props.plugins.forEach(checkStateComponent)
-      this.directPlugins = props.plugins
-    }
-    this.updateStateInner(props.state, prevProps)
-  }
-
-  /// Update the view by updating existing props object with the object
-  /// given as argument. Equivalent to `view.update(Object.assign({},
-  /// view.props, props))`.
-  setProps(props: Partial<DirectEditorProps>) {
-    let updated = {} as DirectEditorProps
-    for (let name in this._props) (updated as any)[name] = (this._props as any)[name]
-    updated.state = this.state
-    for (let name in props) (updated as any)[name] = (props as any)[name]
-    this.update(updated)
-  }
-
-  /// Update the editor's `state` prop, without touching any of the
-  /// other props.
-  updateState(state: EditorState) {
-    this.updateStateInner(state, this._props)
-  }
-
-  private updateStateInner(state: EditorState, prevProps: DirectEditorProps) {
-    let prev = this.state, redraw = false, updateSel = false
-    // When stored marks are added, stop composition, so that they can
-    // be displayed.
-    if (state.storedMarks && this.composing) {
-      clearComposition(this)
-      updateSel = true
-    }
-    this.state = state
-    let pluginsChanged = prev.plugins != state.plugins || this._props.plugins != prevProps.plugins
-    if (pluginsChanged || this._props.plugins != prevProps.plugins || this._props.nodeViews != prevProps.nodeViews) {
-      let nodeViews = buildNodeViews(this)
-      if (changedNodeViews(nodeViews, this.nodeViews)) {
-        this.nodeViews = nodeViews
-        redraw = true
-      }
-    }
-    if (pluginsChanged || prevProps.handleDOMEvents != this._props.handleDOMEvents) {
-      ensureListeners(this)
-    }
-
-    this.editable = getEditable(this)
-    updateCursorWrapper(this)
-    let innerDeco = viewDecorations(this), outerDeco = computeDocDeco(this)
-
-    let scroll = prev.plugins != state.plugins && !prev.doc.eq(state.doc) ? "reset"
-        : (state as any).scrollToSelection > (prev as any).scrollToSelection ? "to selection" : "preserve"
-    let updateDoc = redraw || !this.docView.matchesNode(state.doc, outerDeco, innerDeco)
-    if (updateDoc || !state.selection.eq(prev.selection)) updateSel = true
-    let oldScrollPos = scroll == "preserve" && updateSel && this.dom.style.overflowAnchor == null && storeScrollPos(this)
-
-    if (updateSel) {
-      this.domObserver.stop()
-      // Work around an issue in Chrome, IE, and Edge where changing
-      // the DOM around an active selection puts it into a broken
-      // state where the thing the user sees differs from the
-      // selection reported by the Selection object (#710, #973,
-      // #1011, #1013, #1035).
-      let forceSelUpdate = updateDoc && (browser.ie || browser.chrome) && !this.composing &&
-          !prev.selection.empty && !state.selection.empty && selectionContextChanged(prev.selection, state.selection)
-      if (updateDoc) {
-        // If the node that the selection points into is written to,
-        // 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.domSelectionRange().focusNode) : null
-        if (redraw || !this.docView.update(state.doc, outerDeco, innerDeco, this)) {
-          this.docView.updateOuterDeco(outerDeco)
-          this.docView.destroy()
-          this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this)
-        }
-        if (chromeKludge && !this.trackWrites) forceSelUpdate = true
-      }
-      // Work around for an issue where an update arriving right between
-      // a DOM selection change and the "selectionchange" event for it
-      // can cause a spurious DOM selection update, disrupting mouse
-      // drag selection.
-      if (forceSelUpdate ||
-          !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) &&
-            anchorInRightPlace(this))) {
-        selectionToDOM(this, forceSelUpdate)
-      } else {
-        syncNodeSelection(this, state.selection)
-        this.domObserver.setCurSelection()
-      }
-      this.domObserver.start()
-    }
-
-    this.updatePluginViews(prev)
-    if ((this.dragging as Dragging)?.node && !prev.doc.eq(state.doc))
-      this.updateDraggedNode(this.dragging as Dragging, prev)
-
-    if (scroll == "reset") {
-      this.dom.scrollTop = 0
-    } else if (scroll == "to selection") {
-      this.scrollToSelection()
-    } else if (oldScrollPos) {
-      resetScrollPos(oldScrollPos)
-    }
-  }
-
-  /// @internal
-  scrollToSelection() {
-    let startDOM = this.domSelectionRange().focusNode!
-    if (this.someProp("handleScrollToSelection", f => f(this))) {
-      // Handled
-    } else if (this.state.selection instanceof NodeSelection) {
-      let target = this.docView.domAfterPos(this.state.selection.from)
-      if (target.nodeType == 1) scrollRectIntoView(this, (target as HTMLElement).getBoundingClientRect(), startDOM)
-    } else {
-      scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM)
-    }
-  }
-
-  private destroyPluginViews() {
-    let view
-    while (view = this.pluginViews.pop()) if (view.destroy) view.destroy()
-  }
-
-  private updatePluginViews(prevState?: EditorState) {
-    if (!prevState || prevState.plugins != this.state.plugins || this.directPlugins != this.prevDirectPlugins) {
-      this.prevDirectPlugins = this.directPlugins
-      this.destroyPluginViews()
-      for (let i = 0; i < this.directPlugins.length; i++) {
-        let plugin = this.directPlugins[i]
-        if (plugin.spec.view) this.pluginViews.push(plugin.spec.view(this))
-      }
-      for (let i = 0; i < this.state.plugins.length; i++) {
-        let plugin = this.state.plugins[i]
-        if (plugin.spec.view) this.pluginViews.push(plugin.spec.view(this))
-      }
-    } else {
-      for (let i = 0; i < this.pluginViews.length; i++) {
-        let pluginView = this.pluginViews[i]
-        if (pluginView.update) pluginView.update(this, prevState)
-      }
-    }
-  }
-
-  private updateDraggedNode(dragging: Dragging, prev: EditorState) {
-    let sel = dragging.node!, found = -1
-    if (this.state.doc.nodeAt(sel.from) == sel.node) {
-      found = sel.from
-    } else {
-      let movedPos = sel.from + (this.state.doc.content.size - prev.doc.content.size)
-      let moved = movedPos > 0 && this.state.doc.nodeAt(movedPos)
-      if (moved == sel.node) found = movedPos
-    }
-    this.dragging = new Dragging(dragging.slice, dragging.move,
-                                 found < 0 ? undefined : NodeSelection.create(this.state.doc, found))
-  }
-
-  /// Goes over the values of a prop, first those provided directly,
-  /// then those from plugins given to the view, then from plugins in
-  /// the state (in order), and calls `f` every time a non-undefined
-  /// value is found. When `f` returns a truthy value, that is
-  /// immediately returned. When `f` isn't provided, it is treated as
-  /// the identity function (the prop value is returned directly).
-  someProp<PropName extends keyof EditorProps, Result>(
-    propName: PropName,
-    f: (value: NonNullable<EditorProps[PropName]>) => Result
-  ): Result | undefined
-  someProp<PropName extends keyof EditorProps>(propName: PropName): NonNullable<EditorProps[PropName]> | undefined
-  someProp<PropName extends keyof EditorProps, Result>(
-    propName: PropName,
-    f?: (value: NonNullable<EditorProps[PropName]>) => Result
-  ): Result | undefined {
-    let prop = this._props && this._props[propName], value
-    if (prop != null && (value = f ? f(prop as any) : prop)) return value as any
-    for (let i = 0; i < this.directPlugins.length; i++) {
-      let prop = this.directPlugins[i].props[propName]
-      if (prop != null && (value = f ? f(prop as any) : prop)) return value as any
-    }
-    let plugins = this.state.plugins
-    if (plugins) for (let i = 0; i < plugins.length; i++) {
-      let prop = plugins[i].props[propName]
-      if (prop != null && (value = f ? f(prop as any) : prop)) return value as any
-    }
-  }
-
-  /// Query whether the view has focus.
-  hasFocus() {
-    // Work around IE not handling focus correctly if resize handles are shown.
-    // If the cursor is inside an element with resize handles, activeElement
-    // will be that element instead of this.dom.
-    if (browser.ie) {
-      // If activeElement is within this.dom, and there are no other elements
-      // setting `contenteditable` to false in between, treat it as focused.
-      let node = this.root.activeElement
-      if (node == this.dom) return true
-      if (!node || !this.dom.contains(node)) return false
-      while (node && this.dom != node && this.dom.contains(node)) {
-        if ((node as HTMLElement).contentEditable == 'false') return false
-        node = node.parentElement
-      }
-      return true
-    }
-    return this.root.activeElement == this.dom
-  }
-
-  /// Focus the editor.
-  focus() {
-    this.domObserver.stop()
-    if (this.editable) focusPreventScroll(this.dom)
-    selectionToDOM(this)
-    this.domObserver.start()
-  }
-
-  /// Get the document root in which the editor exists. This will
-  /// usually be the top-level `document`, but might be a [shadow
-  /// DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
-  /// root if the editor is inside one.
-  get root(): Document | ShadowRoot {
-    let cached = this._root
-    if (cached == null) for (let search = this.dom.parentNode; search; search = search.parentNode) {
-      if (search.nodeType == 9 || (search.nodeType == 11 && (search as any).host)) {
-        if (!(search as any).getSelection)
-          Object.getPrototypeOf(search).getSelection = () => (search as DOMNode).ownerDocument!.getSelection()
-        return this._root = search as Document | ShadowRoot
-      }
-    }
-    return cached || document
-  }
-
-  /// When an existing editor view is moved to a new document or
-  /// shadow tree, call this to make it recompute its root.
-  updateRoot() {
-    this._root = null
-  }
-
-  /// Given a pair of viewport coordinates, return the document
-  /// position that corresponds to them. May return null if the given
-  /// coordinates aren't inside of the editor. When an object is
-  /// returned, its `pos` property is the position nearest to the
-  /// coordinates, and its `inside` property holds the position of the
-  /// inner node that the position falls inside of, or -1 if it is at
-  /// the top level, not in any node.
-  posAtCoords(coords: {left: number, top: number}): {pos: number, inside: number} | null {
-    return posAtCoords(this, coords)
-  }
-
-  /// Returns the viewport rectangle at a given document position.
-  /// `left` and `right` will be the same number, as this returns a
-  /// flat cursor-ish rectangle. If the position is between two things
-  /// that aren't directly adjacent, `side` determines which element
-  /// is used. When < 0, the element before the position is used,
-  /// otherwise the element after.
-  coordsAtPos(pos: number, side = 1): {left: number, right: number, top: number, bottom: number} {
-    return coordsAtPos(this, pos, side)
-  }
-
-  /// Find the DOM position that corresponds to the given document
-  /// position. When `side` is negative, find the position as close as
-  /// possible to the content before the position. When positive,
-  /// prefer positions close to the content after the position. When
-  /// zero, prefer as shallow a position as possible.
-  ///
-  /// Note that you should **not** mutate the editor's internal DOM,
-  /// only inspect it (and even that is usually not necessary).
-  domAtPos(pos: number, side = 0): {node: DOMNode, offset: number} {
-    return this.docView.domFromPos(pos, side)
-  }
-
-  /// Find the DOM node that represents the document node after the
-  /// given position. May return `null` when the position doesn't point
-  /// in front of a node or if the node is inside an opaque node view.
-  ///
-  /// This is intended to be able to call things like
-  /// `getBoundingClientRect` on that DOM node. Do **not** mutate the
-  /// editor DOM directly, or add styling this way, since that will be
-  /// immediately overriden by the editor as it redraws the node.
-  nodeDOM(pos: number): DOMNode | null {
-    let desc = this.docView.descAt(pos)
-    return desc ? (desc as NodeViewDesc).nodeDOM : null
-  }
-
-  /// Find the document position that corresponds to a given DOM
-  /// position. (Whenever possible, it is preferable to inspect the
-  /// document structure directly, rather than poking around in the
-  /// DOM, but sometimes—for example when interpreting an event
-  /// target—you don't have a choice.)
-  ///
-  /// The `bias` parameter can be used to influence which side of a DOM
-  /// node to use when the position is inside a leaf node.
-  posAtDOM(node: DOMNode, offset: number, bias = -1): number {
-    let pos = this.docView.posFromDOM(node, offset, bias)
-    if (pos == null) throw new RangeError("DOM position not inside the editor")
-    return pos
-  }
-
-  /// Find out whether the selection is at the end of a textblock when
-  /// moving in a given direction. When, for example, given `"left"`,
-  /// it will return true if moving left from the current cursor
-  /// position would leave that position's parent textblock. Will apply
-  /// to the view's current state by default, but it is possible to
-  /// pass a different state.
-  endOfTextblock(dir: "up" | "down" | "left" | "right" | "forward" | "backward", state?: EditorState): boolean {
-    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() {
-    if (!this.docView) return
-    destroyInput(this)
-    this.destroyPluginViews()
-    if (this.mounted) {
-      this.docView.update(this.state.doc, [], viewDecorations(this), this)
-      this.dom.textContent = ""
-    } else if (this.dom.parentNode) {
-      this.dom.parentNode.removeChild(this.dom)
-    }
-    this.docView.destroy()
-    ;(this as any).docView = null
-    
-  }
-
-  /// This is true when the view has been
-  /// [destroyed](#view.EditorView.destroy) (and thus should not be
-  /// used anymore).
-  get isDestroyed() {
-    return this.docView == null
-  }
-
-  /// Used for testing.
-  dispatchEvent(event: Event) {
-    return dispatchEvent(this, event)
-  }
-
-  /// Dispatch a transaction. Will call
-  /// [`dispatchTransaction`](#view.DirectEditorProps.dispatchTransaction)
-  /// when given, and otherwise defaults to applying the transaction to
-  /// the current state and calling
-  /// [`updateState`](#view.EditorView.updateState) with the result.
-  /// This method is bound to the view instance, so that it can be
-  /// easily passed around.
-  dispatch(tr: Transaction) {
-    let dispatchTransaction = this._props.dispatchTransaction
-    if (dispatchTransaction) dispatchTransaction.call(this, tr)
-    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()!
-  }
-}
-
-function computeDocDeco(view: EditorView) {
-  let attrs = Object.create(null)
-  attrs.class = "ProseMirror"
-  attrs.contenteditable = String(view.editable)
-
-  view.someProp("attributes", value => {
-    if (typeof value == "function") value = value(view.state)
-    if (value) for (let attr in value) {
-      if (attr == "class")
-        attrs.class += " " + value[attr]
-      else if (attr == "style")
-        attrs.style = (attrs.style ? attrs.style + ";" : "") + value[attr]
-      else if (!attrs[attr] && attr != "contenteditable" && attr != "nodeName")
-        attrs[attr] = String(value[attr])
-    }
-  })
-  if (!attrs.translate) attrs.translate = "no"
-
-  return [Decoration.node(0, view.state.doc.content.size, attrs)]
-}
-
-function updateCursorWrapper(view: EditorView) {
-  if (view.markCursor) {
-    let dom = document.createElement("img")
-    dom.className = "ProseMirror-separator"
-    dom.setAttribute("mark-placeholder", "true")
-    dom.setAttribute("alt", "")
-    view.cursorWrapper = {dom, deco: Decoration.widget(view.state.selection.head,
-                                                       dom, {raw: true, marks: view.markCursor} as any)}
-  } else {
-    view.cursorWrapper = null
-  }
-}
-
-function getEditable(view: EditorView) {
-  return !view.someProp("editable", value => value(view.state) === false)
-}
-
-function selectionContextChanged(sel1: Selection, sel2: Selection) {
-  let depth = Math.min(sel1.$anchor.sharedDepth(sel1.head), sel2.$anchor.sharedDepth(sel2.head))
-  return sel1.$anchor.start(depth) != sel2.$anchor.start(depth)
-}
-
-function buildNodeViews(view: EditorView) {
-  let result: NodeViewSet = Object.create(null)
-  function add(obj: NodeViewSet) {
-    for (let prop in obj) if (!Object.prototype.hasOwnProperty.call(result, prop))
-      result[prop] = obj[prop]
-  }
-  view.someProp("nodeViews", add)
-  view.someProp("markViews", add)
-  return result
-}
-
-function changedNodeViews(a: NodeViewSet, b: NodeViewSet) {
-  let nA = 0, nB = 0
-  for (let prop in a) {
-    if (a[prop] != b[prop]) return true
-    nA++
-  }
-  for (let _ in b) nB++
-  return nA != nB
-}
-
-function checkStateComponent(plugin: Plugin) {
-  if (plugin.spec.state || plugin.spec.filterTransaction || plugin.spec.appendTransaction)
-    throw new RangeError("Plugins passed directly to the view must not have a state component")
-}
-
-/// The type of function [provided](#view.EditorProps.nodeViews) to
-/// create [node views](#view.NodeView).
-export type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined,
-                                   decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView
-
-/// The function types [used](#view.EditorProps.markViews) to create
-/// mark views.
-export type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {dom: HTMLElement, contentDOM?: HTMLElement}
-
-type NodeViewSet = {[name: string]: NodeViewConstructor | MarkViewConstructor}
-
-/// Helper type that maps event names to event object types, but
-/// includes events that TypeScript's HTMLElementEventMap doesn't know
-/// about.
-export interface DOMEventMap extends HTMLElementEventMap {
-  [event: string]: any
-}
-
-/// Props are configuration values that can be passed to an editor view
-/// or included in a plugin. This interface lists the supported props.
-///
-/// The various event-handling functions may all return `true` to
-/// indicate that they handled the given event. The view will then take
-/// care to call `preventDefault` on the event, except with
-/// `handleDOMEvents`, where the handler itself is responsible for that.
-///
-/// How a prop is resolved depends on the prop. Handler functions are
-/// 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](#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.
-  /// Contrary to the other event handling props, when returning true
-  /// from such a function, you are responsible for calling
-  /// `preventDefault` yourself (or not, if you want to allow the
-  /// default behavior).
-  handleDOMEvents?: {
-    [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void
-  }
-
-  /// Called when the editor receives a `keydown` event.
-  handleKeyDown?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
-
-  /// Handler for `keypress` events.
-  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?: (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?: (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?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
-
-  /// Called for each node around a double click.
-  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?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
-
-  /// Called for each node around a triple click.
-  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?: (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?: (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?: (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?: (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?: (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
-  /// [`DOMParser.fromSchema`](#model.DOMParser^fromSchema) on the
-  /// editor's schema.
-  domParser?: DOMParser
-
-  /// Can be used to transform pasted HTML text, _before_ it is parsed,
-  /// for example to clean it up.
-  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
-  /// [`domParser`](#view.EditorProps.domParser) prop is used.
-  clipboardParser?: DOMParser
-
-  /// 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, view: EditorView) => string
-
-  /// A function to parse text from the clipboard into a document
-  /// slice. Called after
-  /// [`transformPastedText`](#view.EditorProps.transformPastedText).
-  /// The default behavior is to split the text into lines, wrap them
-  /// 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, 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, view: EditorView) => Slice
-
-  /// Can be used to transform copied or cut content before it is
-  /// serialized to the clipboard.
-  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
-  /// produce a [`NodeView`](#view.NodeView) object implementing the
-  /// node's display behavior. The third argument `getPos` is a
-  /// function that can be called to get the node's current position,
-  /// which can be useful when creating transactions to update it.
-  /// Note that if the node is not in the document, the position
-  /// returned by this function will be `undefined`.
-  ///
-  /// `decorations` is an array of node or inline decorations that are
-  /// active around the node. They are automatically drawn in the
-  /// normal way, and you will usually just want to ignore this, but
-  /// they can also be used as a way to provide context information to
-  /// the node view without adding it to the document itself.
-  ///
-  /// `innerDecorations` holds the decorations for the node's content.
-  /// You can safely ignore this if your view has no content or a
-  /// `contentDOM` property, since the editor will draw the decorations
-  /// on the content. But if you, for example, want to create a nested
-  /// editor with the content, it may make sense to provide it with the
-  /// inner decorations.
-  ///
-  /// (For backwards compatibility reasons, [mark
-  /// views](#view.EditorProps.markViews) can also be included in this
-  /// object.)
-  nodeViews?: {[node: string]: NodeViewConstructor}
-
-  /// Pass custom mark rendering functions. Note that these cannot
-  /// provide the kind of dynamic behavior that [node
-  /// views](#view.NodeView) can—they just provide custom rendering
-  /// logic. The third argument indicates whether the mark's content
-  /// is inline.
-  markViews?: {[mark: string]: MarkViewConstructor}
-
-  /// The DOM serializer to use when putting content onto the
-  /// clipboard. If not given, the result of
-  /// [`DOMSerializer.fromSchema`](#model.DOMSerializer^fromSchema)
-  /// will be used. This object will only have its
-  /// [`serializeFragment`](#model.DOMSerializer.serializeFragment)
-  /// method called, and you may provide an alternative object type
-  /// implementing a compatible method.
-  clipboardSerializer?: DOMSerializer
-
-  /// A function that will be called to get the text for the current
-  /// 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, view: EditorView) => string
-
-  /// A set of [document decorations](#view.Decoration) to show in the
-  /// view.
-  decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined
-
-  /// When this returns false, the content of the view is not directly
-  /// editable.
-  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.
-  /// By default, the element will get a class `"ProseMirror"`, and
-  /// will have its `contentEditable` attribute determined by the
-  /// [`editable` prop](#view.EditorProps.editable). Additional classes
-  /// provided here will be added to the class. For other attributes,
-  /// the value provided first (as in
-  /// [`someProp`](#view.EditorView.someProp)) will be used.
-  attributes?: {[name: string]: string} | ((state: EditorState) => {[name: string]: string})
-
-  /// Determines the distance (in pixels) between the cursor and the
-  /// end of the visible viewport at which point, when scrolling the
-  /// cursor into view, scrolling takes place. Defaults to 0.
-  scrollThreshold?: number | {top: number, right: number, bottom: number, left: number}
-
-  /// Determines the extra space (in pixels) that is left above or
-  /// below the cursor when it is scrolled into view. Defaults to 5.
-  scrollMargin?: number | {top: number, right: number, bottom: number, left: number}
-}
-
-/// The props object given directly to the editor view supports some
-/// fields that can't be used in plugins:
-export interface DirectEditorProps extends EditorProps {
-  /// The current state of the editor.
-  state: EditorState
-
-  /// A set of plugins to use in the view, applying their [plugin
-  /// view](#state.PluginSpec.view) and
-  /// [props](#state.PluginSpec.props). Passing plugins with a state
-  /// component (a [state field](#state.PluginSpec.state) field or a
-  /// [transaction](#state.PluginSpec.filterTransaction) filter or
-  /// appender) will result in an error, since such plugins must be
-  /// present in the state to work.
-  plugins?: readonly Plugin[]
-
-  /// The callback over which to send transactions (state updates)
-  /// produced by the view. If you specify this, you probably want to
-  /// make sure this ends up calling the view's
-  /// [`updateState`](#view.EditorView.updateState) method with a new
-  /// state that has the transaction
-  /// [applied](#state.EditorState.apply). The callback will be bound to have
-  /// the view instance as its `this` binding.
-  dispatchTransaction?: (tr: Transaction) => void
-}