prosemirror-view 1.34.3 → 1.36.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.36.0 (2024-11-05)
+
+### Bug fixes
+
+Don't recreated `TrustedTypePolicy` objects for every paste.
+
+### New features
+
+Add support for a `destroy` method on custom mark views. Add MarkView to the doc template
+
+## 1.35.0 (2024-10-29)
+
+### New features
+
+The new `NodeView.multiType` flag is now required to opt into handling different node types in a single node view. It used to be the default, but this tripped too many people up.
+
 ## 1.34.3 (2024-09-19)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1167,11 +1167,12 @@ var CompositionViewDesc = function (_ViewDesc2) {
 var MarkViewDesc = function (_ViewDesc3) {
   _inherits(MarkViewDesc, _ViewDesc3);
   var _super3 = _createSuper(MarkViewDesc);
-  function MarkViewDesc(parent, mark, dom, contentDOM) {
+  function MarkViewDesc(parent, mark, dom, contentDOM, spec) {
     var _this3;
     _classCallCheck(this, MarkViewDesc);
     _this3 = _super3.call(this, parent, [], dom, contentDOM);
     _this3.mark = mark;
+    _this3.spec = spec;
     return _this3;
   }
   _createClass(MarkViewDesc, [{
@@ -1212,13 +1213,19 @@ var MarkViewDesc = function (_ViewDesc3) {
       copy.children = nodes;
       return copy;
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.spec.destroy) this.spec.destroy();
+      _get(_getPrototypeOf(MarkViewDesc.prototype), "destroy", this).call(this);
+    }
   }], [{
     key: "create",
     value: function create(parent, mark, inline, view) {
       var custom = view.nodeViews[mark.type.name];
       var spec = custom && custom(mark, view, inline);
       if (!spec || !spec.dom) spec = prosemirrorModel.DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline), null, mark.attrs);
-      return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
+      return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom, spec);
     }
   }]);
   return MarkViewDesc;
@@ -1564,7 +1571,7 @@ var CustomNodeViewDesc = function (_NodeViewDesc2) {
     key: "update",
     value: function update(node, outerDeco, innerDeco, view) {
       if (this.dirty == NODE_DIRTY) return false;
-      if (this.spec.update) {
+      if (this.spec.update && (this.node.type == node.type || this.spec.multiType)) {
         var result = this.spec.update(node, outerDeco, innerDeco);
         if (result) this.updateInner(node, outerDeco, innerDeco, view);
         return result;
@@ -2783,14 +2790,16 @@ var _detachedDoc = null;
 function detachedDoc() {
   return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
 }
+var _policy = null;
 function maybeWrapTrusted(html) {
   var trustedTypes = window.trustedTypes;
   if (!trustedTypes) return html;
-  return trustedTypes.createPolicy("detachedDocument", {
+  if (!_policy) _policy = trustedTypes.createPolicy("ProseMirrorClipboard", {
     createHTML: function createHTML(s) {
       return s;
     }
-  }).createHTML(html);
+  });
+  return _policy.createHTML(html);
 }
 function readHTML(html) {
   var metas = /^(\s*<meta [^>]*>)*/.exec(html);
@@ -2927,7 +2936,7 @@ editHandlers.keydown = function (view, _event) {
   view.input.lastKeyCode = event.keyCode;
   view.input.lastKeyCodeTime = Date.now();
   if (android && chrome && event.keyCode == 13) return;
-  if (view.domObserver.selectionChanged(view.domSelectionRange())) view.domObserver.flush();else if (event.keyCode != 229) view.domObserver.forceFlush();
+  if (event.keyCode != 229) view.domObserver.forceFlush();
   if (ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) {
     var now = Date.now();
     view.input.lastIOSEnter = now;
@@ -4292,11 +4301,6 @@ var DOMObserver = function () {
       }
       return this.queue;
     }
-  }, {
-    key: "selectionChanged",
-    value: function selectionChanged(sel) {
-      return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
-    }
   }, {
     key: "flush",
     value: function flush() {
@@ -4304,8 +4308,8 @@ var DOMObserver = function () {
       if (!view.docView || this.flushingSoon > -1) return;
       var mutations = this.pendingRecords();
       if (mutations.length) this.queue = [];
-      var sel = view.domSelectionRange(),
-        newSel = this.selectionChanged(sel);
+      var sel = view.domSelectionRange();
+      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
       var from = -1,
         to = -1,
         typeOver = false,

package/dist/index.d.cts

@@ -245,9 +245,6 @@ node-specific editing interfaces, you want more control over
 the behavior of a node's in-editor representation, and need to
 [define](https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews) a custom node view.
 
-Mark views only support `dom` and `contentDOM`, and don't support
-any of the node view methods.
-
 Objects returned as node views must conform to this interface.
 */
 interface NodeView {
@@ -265,19 +262,28 @@ interface NodeView {
     */
     contentDOM?: HTMLElement | null;
     /**
-    When given, this will be called when the view is updating itself.
-    It will be given a node (possibly of a different type), an array
-    of active decorations around the node (which are automatically
-    drawn, and the node view may ignore if it isn't interested in
-    them), and a [decoration source](https://prosemirror.net/docs/ref/#view.DecorationSource) that
-    represents any decorations that apply to the content of the node
-    (which again may be ignored). It should return true if it was
-    able to update to that node, and false otherwise. If the node
-    view has a `contentDOM` property (or no `dom` property), updating
-    its child nodes will be handled by ProseMirror.
+    When given, this will be called when the view is updating
+    itself. It will be given a node, an array of active decorations
+    around the node (which are automatically drawn, and the node
+    view may ignore if it isn't interested in them), and a
+    [decoration source](https://prosemirror.net/docs/ref/#view.DecorationSource) that represents any
+    decorations that apply to the content of the node (which again
+    may be ignored). It should return true if it was able to update
+    to that node, and false otherwise. If the node view has a
+    `contentDOM` property (or no `dom` property), updating its child
+    nodes will be handled by ProseMirror.
     */
     update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
     /**
+    By default, `update` will only be called when a node of the same
+    node type appears in this view's position. When you set this to
+    true, it will be called for any node, making it possible to have
+    a node view that representsmultiple types of nodes. You will
+    need to check the type of the nodes you get in `update` and
+    return `false` for types you cannot handle.
+    */
+    multiType?: boolean;
+    /**
     Can be used to override the way the node's selected status (as a
     node selection) is displayed.
     */
@@ -314,7 +320,32 @@ interface NodeView {
     ignoreMutation?: (mutation: MutationRecord) => boolean;
     /**
     Called when the node view is removed from the editor or the whole
-    editor is destroyed. (Not available for marks.)
+    editor is destroyed.
+    */
+    destroy?: () => void;
+}
+/**
+By default, document marks are rendered using the result of the
+[`toDOM`](https://prosemirror.net/docs/ref/#model.MarkSpec.toDOM) method of their spec, and managed entirely
+by the editor. For some use cases, you want more control over the behavior
+of a mark's in-editor representation, and need to
+[define](https://prosemirror.net/docs/ref/#view.EditorProps.markViews) a custom mark view.
+
+Objects returned as mark views must conform to this interface.
+*/
+interface MarkView {
+    /**
+    The outer DOM node that represents the document node.
+    */
+    dom: DOMNode;
+    /**
+    The DOM node that should hold the mark's content. When this is not
+    present, the `dom` property is used as the content DOM.
+    */
+    contentDOM?: HTMLElement | null;
+    /**
+    Called when the mark view is removed from the editor or the whole
+    editor is destroyed.
     */
     destroy?: () => void;
 }
@@ -641,10 +672,7 @@ type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number |
 The function types [used](https://prosemirror.net/docs/ref/#view.EditorProps.markViews) to create
 mark views.
 */
-type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {
-    dom: HTMLElement;
-    contentDOM?: HTMLElement;
-};
+type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => MarkView;
 /**
 Helper type that maps event names to event object types, but
 includes events that TypeScript's HTMLElementEventMap doesn't know
@@ -927,4 +955,4 @@ interface DirectEditorProps extends EditorProps {
     dispatchTransaction?: (tr: Transaction) => void;
 }
 
-export { type DOMEventMap, Decoration, type DecorationAttrs, DecorationSet, type DecorationSource, type DirectEditorProps, type EditorProps, EditorView, type MarkViewConstructor, type NodeView, type NodeViewConstructor };
+export { type DOMEventMap, Decoration, type DecorationAttrs, DecorationSet, type DecorationSource, type DirectEditorProps, type EditorProps, EditorView, type MarkView, type MarkViewConstructor, type NodeView, type NodeViewConstructor };

package/dist/index.d.ts

@@ -245,9 +245,6 @@ node-specific editing interfaces, you want more control over
 the behavior of a node's in-editor representation, and need to
 [define](https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews) a custom node view.
 
-Mark views only support `dom` and `contentDOM`, and don't support
-any of the node view methods.
-
 Objects returned as node views must conform to this interface.
 */
 interface NodeView {
@@ -265,19 +262,28 @@ interface NodeView {
     */
     contentDOM?: HTMLElement | null;
     /**
-    When given, this will be called when the view is updating itself.
-    It will be given a node (possibly of a different type), an array
-    of active decorations around the node (which are automatically
-    drawn, and the node view may ignore if it isn't interested in
-    them), and a [decoration source](https://prosemirror.net/docs/ref/#view.DecorationSource) that
-    represents any decorations that apply to the content of the node
-    (which again may be ignored). It should return true if it was
-    able to update to that node, and false otherwise. If the node
-    view has a `contentDOM` property (or no `dom` property), updating
-    its child nodes will be handled by ProseMirror.
+    When given, this will be called when the view is updating
+    itself. It will be given a node, an array of active decorations
+    around the node (which are automatically drawn, and the node
+    view may ignore if it isn't interested in them), and a
+    [decoration source](https://prosemirror.net/docs/ref/#view.DecorationSource) that represents any
+    decorations that apply to the content of the node (which again
+    may be ignored). It should return true if it was able to update
+    to that node, and false otherwise. If the node view has a
+    `contentDOM` property (or no `dom` property), updating its child
+    nodes will be handled by ProseMirror.
     */
     update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
     /**
+    By default, `update` will only be called when a node of the same
+    node type appears in this view's position. When you set this to
+    true, it will be called for any node, making it possible to have
+    a node view that representsmultiple types of nodes. You will
+    need to check the type of the nodes you get in `update` and
+    return `false` for types you cannot handle.
+    */
+    multiType?: boolean;
+    /**
     Can be used to override the way the node's selected status (as a
     node selection) is displayed.
     */
@@ -314,7 +320,32 @@ interface NodeView {
     ignoreMutation?: (mutation: MutationRecord) => boolean;
     /**
     Called when the node view is removed from the editor or the whole
-    editor is destroyed. (Not available for marks.)
+    editor is destroyed.
+    */
+    destroy?: () => void;
+}
+/**
+By default, document marks are rendered using the result of the
+[`toDOM`](https://prosemirror.net/docs/ref/#model.MarkSpec.toDOM) method of their spec, and managed entirely
+by the editor. For some use cases, you want more control over the behavior
+of a mark's in-editor representation, and need to
+[define](https://prosemirror.net/docs/ref/#view.EditorProps.markViews) a custom mark view.
+
+Objects returned as mark views must conform to this interface.
+*/
+interface MarkView {
+    /**
+    The outer DOM node that represents the document node.
+    */
+    dom: DOMNode;
+    /**
+    The DOM node that should hold the mark's content. When this is not
+    present, the `dom` property is used as the content DOM.
+    */
+    contentDOM?: HTMLElement | null;
+    /**
+    Called when the mark view is removed from the editor or the whole
+    editor is destroyed.
     */
     destroy?: () => void;
 }
@@ -641,10 +672,7 @@ type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number |
 The function types [used](https://prosemirror.net/docs/ref/#view.EditorProps.markViews) to create
 mark views.
 */
-type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {
-    dom: HTMLElement;
-    contentDOM?: HTMLElement;
-};
+type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => MarkView;
 /**
 Helper type that maps event names to event object types, but
 includes events that TypeScript's HTMLElementEventMap doesn't know
@@ -927,4 +955,4 @@ interface DirectEditorProps extends EditorProps {
     dispatchTransaction?: (tr: Transaction) => void;
 }
 
-export { type DOMEventMap, Decoration, type DecorationAttrs, DecorationSet, type DecorationSource, type DirectEditorProps, type EditorProps, EditorView, type MarkViewConstructor, type NodeView, type NodeViewConstructor };
+export { type DOMEventMap, Decoration, type DecorationAttrs, DecorationSet, type DecorationSource, type DirectEditorProps, type EditorProps, EditorView, type MarkView, type MarkViewConstructor, type NodeView, type NodeViewConstructor };

package/dist/index.js

@@ -1192,16 +1192,17 @@ class CompositionViewDesc extends ViewDesc {
 // some cases they will be split more often than would appear
 // necessary.
 class MarkViewDesc extends ViewDesc {
-    constructor(parent, mark, dom, contentDOM) {
+    constructor(parent, mark, dom, contentDOM, spec) {
         super(parent, [], dom, contentDOM);
         this.mark = mark;
+        this.spec = spec;
     }
     static create(parent, mark, inline, view) {
         let custom = view.nodeViews[mark.type.name];
         let spec = custom && custom(mark, view, inline);
         if (!spec || !spec.dom)
             spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline), null, mark.attrs);
-        return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
+        return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom, spec);
     }
     parseRule() {
         if ((this.dirty & NODE_DIRTY) || this.mark.type.spec.reparseInView)
@@ -1233,6 +1234,11 @@ class MarkViewDesc extends ViewDesc {
         copy.children = nodes;
         return copy;
     }
+    destroy() {
+        if (this.spec.destroy)
+            this.spec.destroy();
+        super.destroy();
+    }
 }
 // Node view descs are the main, most common type of view desc, and
 // correspond to an actual node in the document. Unlike mark descs,
@@ -1552,7 +1558,7 @@ class CustomNodeViewDesc extends NodeViewDesc {
     update(node, outerDeco, innerDeco, view) {
         if (this.dirty == NODE_DIRTY)
             return false;
-        if (this.spec.update) {
+        if (this.spec.update && (this.node.type == node.type || this.spec.multiType)) {
             let result = this.spec.update(node, outerDeco, innerDeco);
             if (result)
                 this.updateInner(node, outerDeco, innerDeco, view);
@@ -2953,6 +2959,7 @@ let _detachedDoc = null;
 function detachedDoc() {
     return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
 }
+let _policy = null;
 function maybeWrapTrusted(html) {
     let trustedTypes = window.trustedTypes;
     if (!trustedTypes)
@@ -2960,7 +2967,9 @@ function maybeWrapTrusted(html) {
     // With the require-trusted-types-for CSP, Chrome will block
     // innerHTML, even on a detached document. This wraps the string in
     // a way that makes the browser allow us to use its parser again.
-    return trustedTypes.createPolicy("detachedDocument", { createHTML: (s) => s }).createHTML(html);
+    if (!_policy)
+        _policy = trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+    return _policy.createHTML(html);
 }
 function readHTML(html) {
     let metas = /^(\s*<meta [^>]*>)*/.exec(html);
@@ -3111,9 +3120,7 @@ editHandlers.keydown = (view, _event) => {
     // and handling them eagerly tends to corrupt the input.
     if (android && chrome && event.keyCode == 13)
         return;
-    if (view.domObserver.selectionChanged(view.domSelectionRange()))
-        view.domObserver.flush();
-    else if (event.keyCode != 229)
+    if (event.keyCode != 229)
         view.domObserver.forceFlush();
     // On iOS, if we preventDefault enter key presses, the virtual
     // keyboard gets confused. So the hack here is to set a flag that
@@ -4636,9 +4643,6 @@ class DOMObserver {
                 this.queue.push(mut);
         return this.queue;
     }
-    selectionChanged(sel) {
-        return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
-    }
     flush() {
         let { view } = this;
         if (!view.docView || this.flushingSoon > -1)
@@ -4646,7 +4650,8 @@ class DOMObserver {
         let mutations = this.pendingRecords();
         if (mutations.length)
             this.queue = [];
-        let sel = view.domSelectionRange(), newSel = this.selectionChanged(sel);
+        let sel = view.domSelectionRange();
+        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
         let from = -1, to = -1, typeOver = false, added = [];
         if (view.editable) {
             for (let i = 0; i < mutations.length; i++) {

package/package.json

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

package/src/README.md

@@ -18,6 +18,8 @@ this module.
 
 @NodeView
 
+@MarkView
+
 @DOMEventMap
 
 ### Decorations

package/src/clipboard.ts

@@ -204,13 +204,16 @@ function detachedDoc() {
   return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"))
 }
 
+let _policy: any = null
+
 function maybeWrapTrusted(html: string): string {
   let trustedTypes = (window as any).trustedTypes
   if (!trustedTypes) return html
   // With the require-trusted-types-for CSP, Chrome will block
   // innerHTML, even on a detached document. This wraps the string in
   // a way that makes the browser allow us to use its parser again.
-  return trustedTypes.createPolicy("detachedDocument", {createHTML: (s: string) => s}).createHTML(html)
+  if (!_policy) _policy = trustedTypes.createPolicy("ProseMirrorClipboard", {createHTML: (s: string) => s})
+  return _policy.createHTML(html)
 }
 
 function readHTML(html: string) {

package/src/domobserver.ts

@@ -163,17 +163,14 @@ export class DOMObserver {
     return this.queue
   }
 
-  selectionChanged(sel: DOMSelectionRange) {
-    return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel)
-  }
-
   flush() {
     let {view} = this
     if (!view.docView || this.flushingSoon > -1) return
     let mutations = this.pendingRecords()
     if (mutations.length) this.queue = []
 
-    let sel = view.domSelectionRange(), newSel = this.selectionChanged(sel)
+    let sel = view.domSelectionRange()
+    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)
 
     let from = -1, to = -1, typeOver = false, added: Node[] = []
     if (view.editable) {

package/src/index.ts

@@ -3,7 +3,7 @@ import {Slice, ResolvedPos, DOMParser, DOMSerializer, Node, Mark} from "prosemir
 
 import {scrollRectIntoView, posAtCoords, coordsAtPos, endOfTextblock, storeScrollPos,
         resetScrollPos, focusPreventScroll} from "./domcoords"
-import {docViewDesc, ViewDesc, NodeView, NodeViewDesc} from "./viewdesc"
+import {docViewDesc, ViewDesc, NodeView, NodeViewDesc, MarkView} from "./viewdesc"
 import {initInput, destroyInput, dispatchEvent, ensureListeners, clearComposition,
         InputState, doPaste, Dragging, findCompositionNode} from "./input"
 import {selectionToDOM, anchorInRightPlace, syncNodeSelection} from "./selection"
@@ -14,7 +14,7 @@ import {DOMSelection, DOMNode, DOMSelectionRange, deepActiveElement, clearReused
 import * as browser from "./browser"
 
 export {Decoration, DecorationSet, DecorationAttrs, DecorationSource} from "./decoration"
-export {NodeView} from "./viewdesc"
+export {NodeView, MarkView} from "./viewdesc"
 
 // Exported for testing
 import {serializeForClipboard, parseFromClipboard} from "./clipboard"
@@ -576,7 +576,7 @@ export type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => n
 
 /// The function types [used](#view.EditorProps.markViews) to create
 /// mark views.
-export type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {dom: HTMLElement, contentDOM?: HTMLElement}
+export type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => MarkView
 
 type NodeViewSet = {[name: string]: NodeViewConstructor | MarkViewConstructor}
 

package/src/input.ts

@@ -112,9 +112,7 @@ editHandlers.keydown = (view: EditorView, _event: Event) => {
   // to be part of a confused sequence of composition events fired,
   // and handling them eagerly tends to corrupt the input.
   if (browser.android && browser.chrome && event.keyCode == 13) return
-
-  if (view.domObserver.selectionChanged(view.domSelectionRange())) view.domObserver.flush()
-  else if (event.keyCode != 229) view.domObserver.forceFlush()
+  if (event.keyCode != 229) view.domObserver.forceFlush()
 
   // On iOS, if we preventDefault enter key presses, the virtual
   // keyboard gets confused. So the hack here is to set a flag that

package/src/viewdesc.ts

@@ -17,9 +17,6 @@ declare global {
 /// the behavior of a node's in-editor representation, and need to
 /// [define](#view.EditorProps.nodeViews) a custom node view.
 ///
-/// Mark views only support `dom` and `contentDOM`, and don't support
-/// any of the node view methods.
-///
 /// Objects returned as node views must conform to this interface.
 export interface NodeView {
   /// The outer DOM node that represents the document node.
@@ -33,18 +30,26 @@ export interface NodeView {
   /// (or deciding not to render) its child nodes.
   contentDOM?: HTMLElement | null
 
-  /// When given, this will be called when the view is updating itself.
-  /// It will be given a node (possibly of a different type), an array
-  /// of active decorations around the node (which are automatically
-  /// drawn, and the node view may ignore if it isn't interested in
-  /// them), and a [decoration source](#view.DecorationSource) that
-  /// represents any decorations that apply to the content of the node
-  /// (which again may be ignored). It should return true if it was
-  /// able to update to that node, and false otherwise. If the node
-  /// view has a `contentDOM` property (or no `dom` property), updating
-  /// its child nodes will be handled by ProseMirror.
+  /// When given, this will be called when the view is updating
+  /// itself. It will be given a node, an array of active decorations
+  /// around the node (which are automatically drawn, and the node
+  /// view may ignore if it isn't interested in them), and a
+  /// [decoration source](#view.DecorationSource) that represents any
+  /// decorations that apply to the content of the node (which again
+  /// may be ignored). It should return true if it was able to update
+  /// to that node, and false otherwise. If the node view has a
+  /// `contentDOM` property (or no `dom` property), updating its child
+  /// nodes will be handled by ProseMirror.
   update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean
 
+  /// By default, `update` will only be called when a node of the same
+  /// node type appears in this view's position. When you set this to
+  /// true, it will be called for any node, making it possible to have
+  /// a node view that representsmultiple types of nodes. You will
+  /// need to check the type of the nodes you get in `update` and
+  /// return `false` for types you cannot handle.
+  multiType?: boolean
+
   /// Can be used to override the way the node's selected status (as a
   /// node selection) is displayed.
   selectNode?: () => void
@@ -76,7 +81,27 @@ export interface NodeView {
   ignoreMutation?: (mutation: MutationRecord) => boolean
 
   /// Called when the node view is removed from the editor or the whole
-  /// editor is destroyed. (Not available for marks.)
+  /// editor is destroyed.
+  destroy?: () => void
+}
+
+/// By default, document marks are rendered using the result of the
+/// [`toDOM`](#model.MarkSpec.toDOM) method of their spec, and managed entirely
+/// by the editor. For some use cases, you want more control over the behavior
+/// of a mark's in-editor representation, and need to
+/// [define](#view.EditorProps.markViews) a custom mark view.
+///
+/// Objects returned as mark views must conform to this interface.
+export interface MarkView {
+  /// The outer DOM node that represents the document node.
+  dom: DOMNode
+
+  /// The DOM node that should hold the mark's content. When this is not
+  /// present, the `dom` property is used as the content DOM.
+  contentDOM?: HTMLElement | null
+  
+  /// Called when the mark view is removed from the editor or the whole
+  /// editor is destroyed.
   destroy?: () => void
 }
 
@@ -564,7 +589,7 @@ class CompositionViewDesc extends ViewDesc {
 // some cases they will be split more often than would appear
 // necessary.
 class MarkViewDesc extends ViewDesc {
-  constructor(parent: ViewDesc, readonly mark: Mark, dom: DOMNode, contentDOM: HTMLElement) {
+  constructor(parent: ViewDesc, readonly mark: Mark, dom: DOMNode, contentDOM: HTMLElement, readonly spec: MarkView) {
     super(parent, [], dom, contentDOM)
   }
 
@@ -573,7 +598,7 @@ class MarkViewDesc extends ViewDesc {
     let spec: {dom: HTMLElement, contentDOM?: HTMLElement} = custom && (custom as any)(mark, view, inline)
     if (!spec || !spec.dom)
       spec = (DOMSerializer.renderSpec as any)(document, mark.type.spec.toDOM!(mark, inline), null, mark.attrs) as any
-    return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom as HTMLElement)
+    return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom as HTMLElement, spec)
   }
 
   parseRule() {
@@ -603,6 +628,11 @@ class MarkViewDesc extends ViewDesc {
     copy.children = nodes
     return copy
   }
+
+  destroy() {
+    if (this.spec.destroy) this.spec.destroy()
+    super.destroy()
+  }
 }
 
 // Node view descs are the main, most common type of view desc, and
@@ -938,7 +968,7 @@ class CustomNodeViewDesc extends NodeViewDesc {
   // updates the children.
   update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView) {
     if (this.dirty == NODE_DIRTY) return false
-    if (this.spec.update) {
+    if (this.spec.update && (this.node.type == node.type || this.spec.multiType)) {
       let result = this.spec.update(node, outerDeco, innerDeco)
       if (result) this.updateInner(node, outerDeco, innerDeco, view)
       return result