nytimes · smoores-dev · Dec 19, 2024 · Dec 19, 2024
@@ -0,0 +1,2 @@
+releases:
+  "@nytimes/react-prosemirror": prerelease
@@ -29,16 +29,21 @@
 
 ## Installation
 
+_Note_: React ProseMirror releases are coupled to specific prosemirror-view
+releases, and are not guaranteed to work with other versions of
+prosemirror-view. Ensure that your version of prosemirror-view matches the
+version in React ProseMirror's peer dependencies!
+
 npm:
 
 ```sh
-npm install @nytimes/react-prosemirror
+npm install @nytimes/react-prosemirror@next [email protected] prosemirror-state prosemirror-model
 ```
 
 yarn:
 
 ```sh
-yarn add @nytimes/react-prosemirror
+yarn add @nytimes/react-prosemirror@next [email protected] prosemirror-state prosemirror-model
 ```
 
 <!-- toc -->

@@ -5,7 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React-ProseMirror Demo</title>
-    <script type="module" crossorigin src="/react-prosemirror/assets/index-jZ5wdX2i.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-Cah0pRHq.js"></script>
+    <link rel="stylesheet" crossorigin href="/react-prosemirror/assets/index-DAGU9WLy.css">
   </head>
   <body>
     <div id="root"></div>

@@ -87,7 +87,7 @@
     "prosemirror-tables": "^1.3.7",
     "prosemirror-test-builder": "^1.1.1",
     "prosemirror-transform": "^1.8.0",
-    "prosemirror-view": "^1.34.2",
+    "prosemirror-view": "1.37.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
@@ -99,7 +99,7 @@
   "peerDependencies": {
     "prosemirror-model": "^1.0.0",
     "prosemirror-state": "^1.0.0",
-    "prosemirror-view": "1.34.2",
+    "prosemirror-view": "1.37.1",
     "react": "17 - 19",
     "react-dom": "17 - 19"
   },

@@ -68,12 +68,16 @@ export const MarkView = memo(
           () => getPos.current(),
           mark,
           domRef.current,
-          firstChildDesc?.dom.parentElement ?? domRef.current
+          firstChildDesc?.dom.parentElement ?? domRef.current,
+          {
+            dom: domRef.current,
+            contentDOM: firstChildDesc?.dom.parentElement ?? domRef.current,
+          }
         );
       } else {
         viewDescRef.current.parent = parentRef.current;
-        viewDescRef.current.dom = domRef.current;
-        viewDescRef.current.contentDOM =
+        viewDescRef.current.spec.dom = viewDescRef.current.dom = domRef.current;
+        viewDescRef.current.spec.contentDOM = viewDescRef.current.contentDOM =
           firstChildDesc?.dom.parentElement ?? domRef.current;
         viewDescRef.current.mark = mark;
         viewDescRef.current.getPos = () => getPos.current();

@@ -199,15 +199,6 @@ export class SelectionDOMObserver {
     }
   }
 
-  selectionChanged(sel: DOMSelectionRange) {
-    return (
-      !this.suppressingSelectionUpdates &&
-      !this.currentSelection.eq(sel) &&
-      hasFocusAndSelection(this.view) &&
-      !this.ignoreSelectionChange(sel)
-    );
-  }
-
   forceFlush() {
     if (this.flushingSoon > -1) {
       window.clearTimeout(this.flushingSoon);

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

@@ -8,6 +8,15 @@ import { InternalDecorationSource } from "./decorations/internalTypes.js";
 import { DOMNode } from "./dom.js";
 import { domIndex, isEquivalentPosition } from "./selection/selectionToDOM.js";
 
+/// 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 };
+
 // View descriptions are data structures that describe the DOM that is
 // used to represent the editor's content. They are used for:
 //
@@ -440,7 +449,7 @@ export class ViewDesc {
   setSelection(
     anchor: number,
     head: number,
-    root: Document | ShadowRoot,
+    view: EditorView,
     force = false
   ): void {
     // If the selection falls entirely in a child, give it to that child
@@ -453,7 +462,7 @@ export class ViewDesc {
         return child.setSelection(
           anchor - offset - child.border,
           head - offset - child.border,
-          root,
+          view,
           force
         );
       offset = end;
@@ -463,7 +472,9 @@ export class ViewDesc {
     let headDOM =
       head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
 
-    const domSel = (root as Document).getSelection()!;
+    const domSel = (view.root as Document).getSelection()!;
+    // @ts-expect-error - Internal method domSelectionRange
+    const selRange = view.domSelectionRange();
 
     let brKludge = false;
     // On Firefox, using Selection.collapse to put the cursor after a
@@ -507,11 +518,11 @@ export class ViewDesc {
     // 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
+      selRange.focusNode &&
+      selRange.focusNode != headDOM.node &&
+      selRange.focusNode.nodeType == 1
     ) {
-      const after = domSel.focusNode.childNodes[domSel.focusOffset];
+      const after = selRange.focusNode.childNodes[selRange.focusOffset];
       if (after && (after as HTMLElement).contentEditable == "false")
         force = true;
     }
@@ -521,14 +532,14 @@ export class ViewDesc {
       isEquivalentPosition(
         anchorDOM.node,
         anchorDOM.offset,
-        domSel.anchorNode!,
-        domSel.anchorOffset
+        selRange.anchorNode!,
+        selRange.anchorOffset
       ) &&
       isEquivalentPosition(
         headDOM.node,
         headDOM.offset,
-        domSel.focusNode!,
-        domSel.focusOffset
+        selRange.focusNode!,
+        selRange.focusOffset
       )
     )
       return;
@@ -565,8 +576,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() {
@@ -659,10 +670,8 @@ export 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;
   }
 
   get domAtom() {
@@ -698,11 +707,36 @@ export 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;
   }
 }
 
+/// 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;
+}
+
 // A mark desc represents a mark. May have multiple children,
 // depending on how the mark is split. Note that marks are drawn using
 // a fixed nesting order, for simplicity and predictability, so in
@@ -715,7 +749,8 @@ export class MarkViewDesc extends ViewDesc {
     getPos: () => number,
     public mark: Mark,
     dom: DOMNode,
-    contentDOM: HTMLElement
+    contentDOM: HTMLElement,
+    public spec: MarkView
   ) {
     super(parent, children, getPos, dom, contentDOM);
   }
@@ -744,6 +779,17 @@ export class MarkViewDesc extends ViewDesc {
       this.dirty = NOT_DIRTY;
     }
   }
+
+  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
@@ -906,10 +952,8 @@ export 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";
   }
 
   markDirty(from: number, to: number) {

@@ -1975,7 +1975,7 @@ __metadata:
     prosemirror-tables: ^1.3.7
     prosemirror-test-builder: ^1.1.1
     prosemirror-transform: ^1.8.0
-    prosemirror-view: ^1.34.2
+    prosemirror-view: 1.37.1
     react: ^18.2.0
     react-dom: ^18.2.0
     rimraf: ^3.0.2
@@ -1986,7 +1986,7 @@ __metadata:
   peerDependencies:
     prosemirror-model: ^1.0.0
     prosemirror-state: ^1.0.0
-    prosemirror-view: 1.34.2
+    prosemirror-view: 1.37.1
     react: 17 - 19
     react-dom: 17 - 19
   languageName: unknown
@@ -11034,14 +11034,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prosemirror-view@npm:^1.0.0, prosemirror-view@npm:^1.13.3, prosemirror-view@npm:^1.27.0, prosemirror-view@npm:^1.34.2":
-  version: 1.34.2
-  resolution: "prosemirror-view@npm:1.34.2"
+"prosemirror-view@npm:1.37.1, prosemirror-view@npm:^1.0.0, prosemirror-view@npm:^1.13.3, prosemirror-view@npm:^1.27.0":
+  version: 1.37.1
+  resolution: "prosemirror-view@npm:1.37.1"
   dependencies:
     prosemirror-model: ^1.20.0
     prosemirror-state: ^1.0.0
     prosemirror-transform: ^1.1.0
-  checksum: 5895d76c3fa69117a8e67c8d0bb7f312eeed1551fff50cb0c8b8a40126f701536f16e85aae7c75e5753a7948bd9373c710092121407fbec8b1e33fe627800589
+  checksum: c8b1b90552e8978b7ee8ffa6a276e8e72d8c3be6d2d1ad80e5dcaa907556a8a95db55e33c1eab472dbb2659e33951ed4e15f3dba101d0ab029ca3bd724bb7579
   languageName: node
   linkType: hard
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		releases:
		"@nytimes/react-prosemirror": prerelease