prosemirror-view 1.35.0 → 1.37.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.37.0 (2024-11-23)
+
+### Bug fixes
+
+Fix an issue on Safari where the (incorrect) top-level selection was used, instead of the workaround that also works inside shadow roots.
+
+### New features
+
+Mark views can now provide an `ignoreMutation` method. Add ViewMutationRecord to doc template
+
+## 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

package/dist/index.cjs

@@ -935,19 +935,20 @@ var ViewDesc = function () {
     }
   }, {
     key: "setSelection",
-    value: function setSelection(anchor, head, root) {
+    value: function setSelection(anchor, head, view) {
       var force = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       var from = Math.min(anchor, head),
         to = Math.max(anchor, head);
       for (var i = 0, offset = 0; i < this.children.length; i++) {
         var child = this.children[i],
           end = offset + child.size;
-        if (from > offset && to < end) return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force);
+        if (from > offset && to < end) return child.setSelection(anchor - offset - child.border, head - offset - child.border, view, force);
         offset = end;
       }
       var anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1);
       var headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
-      var domSel = root.getSelection();
+      var domSel = view.root.getSelection();
+      var selRange = view.domSelectionRange();
       var brKludge = false;
       if ((gecko || safari) && anchor == head) {
         var _anchorDOM = anchorDOM,
@@ -973,11 +974,11 @@ var ViewDesc = function () {
           brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false");
         }
       }
-      if (gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
-        var _after2 = domSel.focusNode.childNodes[domSel.focusOffset];
+      if (gecko && selRange.focusNode && selRange.focusNode != headDOM.node && selRange.focusNode.nodeType == 1) {
+        var _after2 = selRange.focusNode.childNodes[selRange.focusOffset];
         if (_after2 && _after2.contentEditable == "false") force = true;
       }
-      if (!(force || brKludge && safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, domSel.focusNode, domSel.focusOffset)) return;
+      if (!(force || brKludge && safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
       var domSelExtended = false;
       if ((domSel.extend || anchor == head) && !brKludge) {
         domSel.collapse(anchorDOM.node, anchorDOM.offset);
@@ -1167,11 +1168,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 +1214,24 @@ var MarkViewDesc = function (_ViewDesc3) {
       copy.children = nodes;
       return copy;
     }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : _get(_getPrototypeOf(MarkViewDesc.prototype), "ignoreMutation", this).call(this, mutation);
+    }
+  }, {
+    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;
@@ -1586,8 +1599,8 @@ var CustomNodeViewDesc = function (_NodeViewDesc2) {
     }
   }, {
     key: "setSelection",
-    value: function setSelection(anchor, head, root, force) {
-      this.spec.setSelection ? this.spec.setSelection(anchor, head, root) : _get(_getPrototypeOf(CustomNodeViewDesc.prototype), "setSelection", this).call(this, anchor, head, root, force);
+    value: function setSelection(anchor, head, view, force) {
+      this.spec.setSelection ? this.spec.setSelection(anchor, head, view.root) : _get(_getPrototypeOf(CustomNodeViewDesc.prototype), "setSelection", this).call(this, anchor, head, view, force);
     }
   }, {
     key: "destroy",
@@ -2172,7 +2185,7 @@ function selectionToDOM(view) {
       if (!sel.$from.parent.inlineContent) resetEditableFrom = temporarilyEditableNear(view, sel.from);
       if (!sel.empty && !sel.$from.parent.inlineContent) resetEditableTo = temporarilyEditableNear(view, sel.to);
     }
-    view.docView.setSelection(anchor, head, view.root, force);
+    view.docView.setSelection(anchor, head, view, force);
     if (brokenSelectBetweenUneditable) {
       if (resetEditableFrom) resetEditable(resetEditableFrom);
       if (resetEditableTo) resetEditable(resetEditableTo);
@@ -2783,14 +2796,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);

package/dist/index.d.cts

@@ -238,6 +238,17 @@ declare global {
     }
 }
 /**
+A ViewMutationRecord represents a DOM
+[mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+or a selection change happens within the view. When the change is
+a selection change, the record will have a `type` property of
+`"selection"` (which doesn't occur for native mutation records).
+*/
+type ViewMutationRecord = MutationRecord | {
+    type: "selection";
+    target: DOMNode;
+};
+/**
 By default, document nodes are rendered using the result of the
 [`toDOM`](https://prosemirror.net/docs/ref/#model.NodeSpec.toDOM) method of their spec, and managed
 entirely by the editor. For some use cases, such as embedded
@@ -245,9 +256,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 {
@@ -311,19 +319,45 @@ interface NodeView {
     */
     stopEvent?: (event: Event) => boolean;
     /**
-    Called when a DOM
-    [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
-    or a selection change happens within the view. When the change is
-    a selection change, the record will have a `type` property of
-    `"selection"` (which doesn't occur for native mutation records).
-    Return false if the editor should re-read the selection or
-    re-parse the range around the mutation, true if it can safely be
-    ignored.
+    Called when a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
+    view. Return false if the editor should re-read the selection or re-parse
+    the range around the mutation, true if it can safely be ignored.
     */
-    ignoreMutation?: (mutation: MutationRecord) => boolean;
+    ignoreMutation?: (mutation: ViewMutationRecord) => 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 a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
+    view. Return false if the editor should re-read the selection or re-parse
+    the range around the mutation, true if it can safely be ignored.
+    */
+    ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
+    /**
+    Called when the mark view is removed from the editor or the whole
+    editor is destroyed.
     */
     destroy?: () => void;
 }
@@ -369,8 +403,8 @@ declare class ViewDesc {
     };
     emptyChildAt(side: number): boolean;
     domAfterPos(pos: number): DOMNode;
-    setSelection(anchor: number, head: number, root: Document | ShadowRoot, force?: boolean): void;
-    ignoreMutation(mutation: MutationRecord): boolean;
+    setSelection(anchor: number, head: number, view: EditorView, force?: boolean): void;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
     get contentLost(): boolean | null;
     markDirty(from: number, to: number): void;
     markParentsDirty(): void;
@@ -419,7 +453,7 @@ declare class TextViewDesc extends NodeViewDesc {
         offset: number;
     };
     localPosFromDOM(dom: DOMNode, offset: number, bias: number): number;
-    ignoreMutation(mutation: MutationRecord): boolean;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
@@ -650,10 +684,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
@@ -936,4 +967,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, type ViewMutationRecord };

package/dist/index.d.ts

@@ -238,6 +238,17 @@ declare global {
     }
 }
 /**
+A ViewMutationRecord represents a DOM
+[mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+or a selection change happens within the view. When the change is
+a selection change, the record will have a `type` property of
+`"selection"` (which doesn't occur for native mutation records).
+*/
+type ViewMutationRecord = MutationRecord | {
+    type: "selection";
+    target: DOMNode;
+};
+/**
 By default, document nodes are rendered using the result of the
 [`toDOM`](https://prosemirror.net/docs/ref/#model.NodeSpec.toDOM) method of their spec, and managed
 entirely by the editor. For some use cases, such as embedded
@@ -245,9 +256,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 {
@@ -311,19 +319,45 @@ interface NodeView {
     */
     stopEvent?: (event: Event) => boolean;
     /**
-    Called when a DOM
-    [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
-    or a selection change happens within the view. When the change is
-    a selection change, the record will have a `type` property of
-    `"selection"` (which doesn't occur for native mutation records).
-    Return false if the editor should re-read the selection or
-    re-parse the range around the mutation, true if it can safely be
-    ignored.
+    Called when a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
+    view. Return false if the editor should re-read the selection or re-parse
+    the range around the mutation, true if it can safely be ignored.
     */
-    ignoreMutation?: (mutation: MutationRecord) => boolean;
+    ignoreMutation?: (mutation: ViewMutationRecord) => 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 a [mutation](https://prosemirror.net/docs/ref/#view.ViewMutationRecord) happens within the
+    view. Return false if the editor should re-read the selection or re-parse
+    the range around the mutation, true if it can safely be ignored.
+    */
+    ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
+    /**
+    Called when the mark view is removed from the editor or the whole
+    editor is destroyed.
     */
     destroy?: () => void;
 }
@@ -369,8 +403,8 @@ declare class ViewDesc {
     };
     emptyChildAt(side: number): boolean;
     domAfterPos(pos: number): DOMNode;
-    setSelection(anchor: number, head: number, root: Document | ShadowRoot, force?: boolean): void;
-    ignoreMutation(mutation: MutationRecord): boolean;
+    setSelection(anchor: number, head: number, view: EditorView, force?: boolean): void;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
     get contentLost(): boolean | null;
     markDirty(from: number, to: number): void;
     markParentsDirty(): void;
@@ -419,7 +453,7 @@ declare class TextViewDesc extends NodeViewDesc {
         offset: number;
     };
     localPosFromDOM(dom: DOMNode, offset: number, bias: number): number;
-    ignoreMutation(mutation: MutationRecord): boolean;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
     slice(from: number, to: number, view: EditorView): TextViewDesc;
     markDirty(from: number, to: number): void;
     get domAtom(): boolean;
@@ -650,10 +684,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
@@ -936,4 +967,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, type ViewMutationRecord };

package/dist/index.js

@@ -996,18 +996,19 @@ class ViewDesc {
     // custom things with the selection. Note that this falls apart when
     // a selection starts in such a node and ends in another, in which
     // case we just use whatever domFromPos produces as a best effort.
-    setSelection(anchor, head, root, force = false) {
+    setSelection(anchor, head, view, force = false) {
         // If the selection falls entirely in a child, give it to that child
         let from = Math.min(anchor, head), to = Math.max(anchor, head);
         for (let i = 0, offset = 0; i < this.children.length; i++) {
             let child = this.children[i], end = offset + child.size;
             if (from > offset && to < end)
-                return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force);
+                return child.setSelection(anchor - offset - child.border, head - offset - child.border, view, force);
             offset = end;
         }
         let anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1);
         let headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
-        let domSel = root.getSelection();
+        let domSel = view.root.getSelection();
+        let selRange = view.domSelectionRange();
         let brKludge = false;
         // On Firefox, using Selection.collapse to put the cursor after a
         // BR node for some reason doesn't always work (#1073). On Safari,
@@ -1038,14 +1039,14 @@ class ViewDesc {
         }
         // Firefox can act strangely when the selection is in front of an
         // uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
-        if (gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
-            let after = domSel.focusNode.childNodes[domSel.focusOffset];
+        if (gecko && selRange.focusNode && selRange.focusNode != headDOM.node && selRange.focusNode.nodeType == 1) {
+            let after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false")
                 force = true;
         }
         if (!(force || brKludge && safari) &&
-            isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset) &&
-            isEquivalentPosition(headDOM.node, headDOM.offset, domSel.focusNode, domSel.focusOffset))
+            isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) &&
+            isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset))
             return;
         // Selection.extend can be used to create an 'inverted' selection
         // (one where the focus is before the anchor), but not all
@@ -1192,16 +1193,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 +1235,14 @@ class MarkViewDesc extends ViewDesc {
         copy.children = nodes;
         return copy;
     }
+    ignoreMutation(mutation) {
+        return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
+    }
+    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,
@@ -1571,9 +1581,9 @@ class CustomNodeViewDesc extends NodeViewDesc {
     deselectNode() {
         this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode();
     }
-    setSelection(anchor, head, root, force) {
-        this.spec.setSelection ? this.spec.setSelection(anchor, head, root)
-            : super.setSelection(anchor, head, root, force);
+    setSelection(anchor, head, view, force) {
+        this.spec.setSelection ? this.spec.setSelection(anchor, head, view.root)
+            : super.setSelection(anchor, head, view, force);
     }
     destroy() {
         if (this.spec.destroy)
@@ -2233,7 +2243,7 @@ function selectionToDOM(view, force = false) {
             if (!sel.empty && !sel.$from.parent.inlineContent)
                 resetEditableTo = temporarilyEditableNear(view, sel.to);
         }
-        view.docView.setSelection(anchor, head, view.root, force);
+        view.docView.setSelection(anchor, head, view, force);
         if (brokenSelectBetweenUneditable) {
             if (resetEditableFrom)
                 resetEditable(resetEditableFrom);
@@ -2953,6 +2963,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 +2971,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);

package/package.json

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

package/src/README.md

@@ -18,6 +18,10 @@ this module.
 
 @NodeView
 
+@MarkView
+
+@ViewMutationRecord
+
 @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

@@ -151,8 +151,8 @@ export class DOMObserver {
     let desc = container && this.view.docView.nearestDesc(container)
     if (desc && desc.ignoreMutation({
       type: "selection",
-      target: container!.nodeType == 3 ? container!.parentNode : container
-    } as any)) {
+      target: container!.nodeType == 3 ? container!.parentNode! : container!
+    })) {
       this.setCurSelection()
       return true
     }

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, ViewMutationRecord} 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/selection.ts

@@ -84,7 +84,7 @@ export function selectionToDOM(view: EditorView, force = false) {
       if (!sel.empty && !sel.$from.parent.inlineContent)
         resetEditableTo = temporarilyEditableNear(view, sel.to)
     }
-    view.docView.setSelection(anchor, head, view.root, force)
+    view.docView.setSelection(anchor, head, view, force)
     if (brokenSelectBetweenUneditable) {
       if (resetEditableFrom) resetEditable(resetEditableFrom)
       if (resetEditableTo) resetEditable(resetEditableTo)

package/src/viewdesc.ts

@@ -10,6 +10,13 @@ declare global {
   interface Node { pmViewDesc?: ViewDesc }
 }
 
+/// A ViewMutationRecord represents a DOM
+/// [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+/// or a selection change happens within the view. When the change is
+/// a selection change, the record will have a `type` property of
+/// `"selection"` (which doesn't occur for native mutation records).
+export type ViewMutationRecord = MutationRecord | { type: "selection", target: DOMNode }
+
 /// By default, document nodes are rendered using the result of the
 /// [`toDOM`](#model.NodeSpec.toDOM) method of their spec, and managed
 /// entirely by the editor. For some use cases, such as embedded
@@ -17,9 +24,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.
@@ -73,18 +77,39 @@ export interface NodeView {
   /// which this returns true are not handled by the editor.
   stopEvent?: (event: Event) => boolean
 
-  /// Called when a DOM
-  /// [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
-  /// or a selection change happens within the view. When the change is
-  /// a selection change, the record will have a `type` property of
-  /// `"selection"` (which doesn't occur for native mutation records).
-  /// Return false if the editor should re-read the selection or
-  /// re-parse the range around the mutation, true if it can safely be
-  /// ignored.
-  ignoreMutation?: (mutation: MutationRecord) => boolean
+  /// Called when a [mutation](#view.ViewMutationRecord) happens within the
+  /// view. Return false if the editor should re-read the selection or re-parse
+  /// the range around the mutation, true if it can safely be ignored.
+  ignoreMutation?: (mutation: ViewMutationRecord) => 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 a [mutation](#view.ViewMutationRecord) happens within the
+  /// view. Return false if the editor should re-read the selection or re-parse
+  /// the range around the mutation, true if it can safely be ignored.
+  ignoreMutation?: (mutation: ViewMutationRecord) => boolean
+
+  
+  /// Called when the mark view is removed from the editor or the whole
+  /// editor is destroyed.
   destroy?: () => void
 }
 
@@ -370,19 +395,20 @@ export class ViewDesc {
   // custom things with the selection. Note that this falls apart when
   // a selection starts in such a node and ends in another, in which
   // case we just use whatever domFromPos produces as a best effort.
-  setSelection(anchor: number, head: number, root: Document | ShadowRoot, force = false): void {
+  setSelection(anchor: number, head: number, view: EditorView, force = false): void {
     // If the selection falls entirely in a child, give it to that child
     let from = Math.min(anchor, head), to = Math.max(anchor, head)
     for (let i = 0, offset = 0; i < this.children.length; i++) {
       let child = this.children[i], end = offset + child.size
       if (from > offset && to < end)
-        return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force)
+        return child.setSelection(anchor - offset - child.border, head - offset - child.border, view, force)
       offset = end
     }
 
     let anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1)
     let headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1)
-    let domSel = (root as Document).getSelection()!
+    let domSel = (view.root as Document).getSelection()!
+    let selRange = view.domSelectionRange()
 
     let brKludge = false
     // On Firefox, using Selection.collapse to put the cursor after a
@@ -412,14 +438,14 @@ export class ViewDesc {
     }
     // Firefox can act strangely when the selection is in front of an
     // uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
-    if (browser.gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
-      let after = domSel.focusNode.childNodes[domSel.focusOffset]
+    if (browser.gecko && selRange.focusNode && selRange.focusNode != headDOM.node && selRange.focusNode.nodeType == 1) {
+      let after = selRange.focusNode.childNodes[selRange.focusOffset]
       if (after && (after as HTMLElement).contentEditable == "false") force = true
     }
 
     if (!(force || brKludge && browser.safari) &&
-        isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode!, domSel.anchorOffset) &&
-        isEquivalentPosition(headDOM.node, headDOM.offset, domSel.focusNode!, domSel.focusOffset))
+        isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode!, selRange.anchorOffset) &&
+        isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode!, selRange.focusOffset))
       return
 
     // Selection.extend can be used to create an 'inverted' selection
@@ -451,8 +477,8 @@ export class ViewDesc {
     }
   }
 
-  ignoreMutation(mutation: MutationRecord): boolean {
-    return !this.contentDOM && (mutation.type as any) != "selection"
+  ignoreMutation(mutation: ViewMutationRecord): boolean {
+    return !this.contentDOM && mutation.type != "selection"
   }
 
   get contentLost() {
@@ -531,8 +557,8 @@ class WidgetViewDesc extends ViewDesc {
     return stop ? stop(event) : false
   }
 
-  ignoreMutation(mutation: MutationRecord) {
-    return (mutation.type as any) != "selection" || this.widget.spec.ignoreSelection
+  ignoreMutation(mutation: ViewMutationRecord) {
+    return mutation.type != "selection" || this.widget.spec.ignoreSelection
   }
 
   destroy() {
@@ -561,7 +587,7 @@ class CompositionViewDesc extends ViewDesc {
     return {node: this.textDOM, offset: pos}
   }
 
-  ignoreMutation(mut: MutationRecord) {
+  ignoreMutation(mut: ViewMutationRecord) {
     return mut.type === 'characterData' && mut.target.nodeValue == mut.oldValue
    }
 }
@@ -572,7 +598,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)
   }
 
@@ -581,7 +607,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() {
@@ -611,6 +637,15 @@ class MarkViewDesc extends ViewDesc {
     copy.children = nodes
     return copy
   }
+
+  ignoreMutation(mutation: ViewMutationRecord) {
+    return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation)
+  }
+
+  destroy() {
+    if (this.spec.destroy) this.spec.destroy()
+    super.destroy()
+  }
 }
 
 // Node view descs are the main, most common type of view desc, and
@@ -902,8 +937,8 @@ class TextViewDesc extends NodeViewDesc {
     return super.localPosFromDOM(dom, offset, bias)
   }
 
-  ignoreMutation(mutation: MutationRecord) {
-    return mutation.type != "characterData" && (mutation.type as any) != "selection"
+  ignoreMutation(mutation: ViewMutationRecord) {
+    return mutation.type != "characterData" && mutation.type != "selection"
   }
 
   slice(from: number, to: number, view: EditorView) {
@@ -965,9 +1000,9 @@ class CustomNodeViewDesc extends NodeViewDesc {
     this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode()
   }
 
-  setSelection(anchor: number, head: number, root: Document | ShadowRoot, force: boolean) {
-    this.spec.setSelection ? this.spec.setSelection(anchor, head, root)
-      : super.setSelection(anchor, head, root, force)
+  setSelection(anchor: number, head: number, view: EditorView, force: boolean) {
+    this.spec.setSelection ? this.spec.setSelection(anchor, head, view.root)
+      : super.setSelection(anchor, head, view, force)
   }
 
   destroy() {
@@ -979,7 +1014,7 @@ class CustomNodeViewDesc extends NodeViewDesc {
     return this.spec.stopEvent ? this.spec.stopEvent(event) : false
   }
 
-  ignoreMutation(mutation: MutationRecord) {
+  ignoreMutation(mutation: ViewMutationRecord) {
     return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation)
   }
 }