prosemirror-view 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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

@@ -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;
@@ -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);

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 {
@@ -323,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;
 }
@@ -650,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
@@ -936,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 {
@@ -323,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;
 }
@@ -650,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
@@ -936,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,
@@ -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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.35.0",
+  "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/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/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.
@@ -84,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
 }
 
@@ -572,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)
   }
 
@@ -581,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() {
@@ -611,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