prosemirror-view 1.34.3 → 1.35.0

package/CHANGELOG.md

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

@@ -1564,7 +1564,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;
@@ -2927,7 +2927,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 +4292,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 +4299,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

@@ -265,19 +265,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.
     */

package/dist/index.d.ts

@@ -265,19 +265,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.
     */

package/dist/index.js

@@ -1552,7 +1552,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);
@@ -3111,9 +3111,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 +4634,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 +4641,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.35.0",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",

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/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

@@ -33,18 +33,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
@@ -938,7 +946,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