Avoid double editor transaction application (#5909)

* Avoid double editor transaction application

Move editor change notifications into a ProseMirror plugin view update and remove custom dispatch handlers that re-applied transactions in uncontrolled React ProseMirror editors.

* Capture editor content before debounce

Author: ComputelessComputer

packages/editor/src/chat/index.tsx

@@ -34,8 +34,11 @@ import {
   MentionNodeView,
   withNodeViewErrorBoundary,
 } from "../node-views";
-import { type PlaceholderFunction, placeholderPlugin } from "../plugins";
-import { dispatchEditorTransaction } from "../transaction-guard";
+import {
+  docChangeListenerPlugin,
+  type PlaceholderFunction,
+  placeholderPlugin,
+} from "../plugins";
 import {
   type MentionConfig,
   MentionSuggestion,
@@ -227,6 +230,9 @@ export const ChatEditor = forwardRef<ChatEditorHandle, ChatEditorProps>(
 
       return [
         reactKeys(),
+        docChangeListenerPlugin((view) => {
+          onUpdateRef.current?.(view.state.doc.toJSON() as JSONContent);
+        }),
         keymap({
           "Mod-z": undo,
           "Mod-Shift-z": redo,
@@ -273,15 +279,6 @@ export const ChatEditor = forwardRef<ChatEditorHandle, ChatEditorProps>(
         <ProseMirror
           defaultState={defaultState}
           nodeViewComponents={nodeViews}
-          dispatchTransaction={function (this: EditorView, tr) {
-            dispatchEditorTransaction({
-              view: this,
-              transaction: tr,
-              onDocChanged: (view) => {
-                onUpdateRef.current?.(view.state.doc.toJSON() as JSONContent);
-              },
-            });
-          }}
           attributes={{
             spellCheck: "false",
             autoComplete: "off",

packages/editor/src/note/index.tsx

@@ -18,7 +18,6 @@ import {
   PluginKey,
   Selection,
   TextSelection,
-  type Transaction,
 } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import {
@@ -52,6 +51,7 @@ import {
   clearMarksOnEnterPlugin,
   clipboardPlugin,
   clipPastePlugin,
+  docChangeListenerPlugin,
   ensureImageTrailingParagraphs,
   fileHandlerPlugin,
   getSearchState,
@@ -75,7 +75,6 @@ import {
   normalizeTaskContent,
   type TaskSource,
 } from "../tasks";
-import { dispatchEditorTransaction } from "../transaction-guard";
 import {
   FormatToolbar,
   type MentionConfig,
@@ -537,26 +536,28 @@ export const NoteEditor = forwardRef<NoteEditorRef, NoteEditorProps>(
       [taskSource, taskStorage],
     );
 
-    const flushChange = useCallback(() => {
-      const view = viewRef.current;
-      if (!view) {
-        return;
-      }
-
-      const content = view.state.doc.toJSON() as JSONContent;
-      syncTasks(content);
-      if (!handleChange) {
-        return;
-      }
+    const flushChange = useCallback(
+      (content: JSONContent) => {
+        syncTasks(content);
+        if (!handleChange) {
+          return;
+        }
 
-      handleChange(content);
-    }, [handleChange, syncTasks]);
+        handleChange(content);
+      },
+      [handleChange, syncTasks],
+    );
 
     const onUpdate = useDebounceCallback(flushChange, 500);
+    const onUpdateRef = useRef(onUpdate);
+    onUpdateRef.current = onUpdate;
 
     const plugins = useMemo(
       () => [
         reactKeys(),
+        docChangeListenerPlugin((view) =>
+          onUpdateRef.current(view.state.doc.toJSON() as JSONContent),
+        ),
         buildInputRules(),
         ...(enforceTitleHeading ? [titleHeadingPlugin()] : []),
         taskIdentityPlugin(),
@@ -649,12 +650,18 @@ export const NoteEditor = forwardRef<NoteEditorRef, NoteEditorProps>(
           doc,
           plugins: view.state.plugins,
         });
+        onUpdate.cancel();
         view.updateState(state);
         previousContentRef.current = reconciledInitialContent;
       } catch {
         // invalid content
       }
-    }, [reconciledInitialContent, syncContentWhenFocused, enforceTitleHeading]);
+    }, [
+      reconciledInitialContent,
+      syncContentWhenFocused,
+      enforceTitleHeading,
+      onUpdate,
+    ]);
 
     const onViewReady = useCallback(
       (view: EditorView) => {
@@ -675,16 +682,6 @@ export const NoteEditor = forwardRef<NoteEditorRef, NoteEditorProps>(
             <ProseMirror
               defaultState={defaultState}
               nodeViewComponents={nodeViews}
-              dispatchTransaction={function (
-                this: EditorView,
-                tr: Transaction,
-              ) {
-                dispatchEditorTransaction({
-                  view: this,
-                  transaction: tr,
-                  onDocChanged: () => onUpdate(),
-                });
-              }}
               attributes={{
                 spellCheck: "false",
                 autoComplete: "off",

packages/editor/src/plugins/doc-change-listener.test.ts

@@ -0,0 +1,56 @@
+import { EditorState, type Plugin } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { describe, expect, it, vi } from "vitest";
+
+import { schema } from "../note/schema";
+import { docChangeListenerPlugin } from "./doc-change-listener";
+
+function createState(text = "", plugins: Plugin[] = []) {
+  return EditorState.create({
+    schema,
+    doc: schema.node("doc", null, [
+      schema.node("paragraph", null, text ? [schema.text(text)] : undefined),
+    ]),
+    plugins,
+  });
+}
+
+describe("docChangeListenerPlugin", () => {
+  it("reports only document changes", () => {
+    const onDocChanged = vi.fn();
+    const plugin = docChangeListenerPlugin(onDocChanged);
+    const previousState = createState("", [plugin]);
+    const pluginView = plugin.spec.view?.({
+      state: previousState,
+    } as EditorView);
+
+    const selectionOnlyState = previousState.apply(
+      previousState.tr.setMeta("source", "test"),
+    );
+    const selectionOnlyView = { state: selectionOnlyState } as EditorView;
+    pluginView?.update(selectionOnlyView, previousState);
+
+    expect(onDocChanged).not.toHaveBeenCalled();
+
+    const changedState = previousState.apply(previousState.tr.insertText("x"));
+    const changedView = { state: changedState } as EditorView;
+    pluginView?.update(changedView, previousState);
+
+    expect(onDocChanged).toHaveBeenCalledOnce();
+    expect(onDocChanged).toHaveBeenCalledWith(changedView);
+  });
+
+  it("ignores document replacement from controlled prop sync", () => {
+    const onDocChanged = vi.fn();
+    const plugin = docChangeListenerPlugin(onDocChanged);
+    const previousState = createState("old", [plugin]);
+    const pluginView = plugin.spec.view?.({
+      state: previousState,
+    } as EditorView);
+    const syncedState = createState("new", [plugin]);
+
+    pluginView?.update({ state: syncedState } as EditorView, previousState);
+
+    expect(onDocChanged).not.toHaveBeenCalled();
+  });
+});

packages/editor/src/plugins/doc-change-listener.ts

@@ -0,0 +1,33 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+
+const docChangedByTransactionKey = new PluginKey<boolean>(
+  "docChangedByTransaction",
+);
+
+export function docChangeListenerPlugin(
+  onDocChanged: (view: EditorView) => void,
+) {
+  return new Plugin({
+    key: docChangedByTransactionKey,
+    state: {
+      init: () => false,
+      apply: (transaction, previous) => transaction.docChanged || previous,
+    },
+    view() {
+      return {
+        update(view, prevState) {
+          if (prevState.doc === view.state.doc) {
+            return;
+          }
+
+          if (!docChangedByTransactionKey.getState(view.state)) {
+            return;
+          }
+
+          onDocChanged(view);
+        },
+      };
+    },
+  });
+}

packages/editor/src/plugins/index.ts

@@ -2,6 +2,7 @@ export { appLinkPastePlugin } from "./app-link-paste";
 export { autolinkPlugin } from "./autolink";
 export { clipboardPlugin, serializeClipboardText } from "./clipboard";
 export { clearMarksOnEnterPlugin } from "./clear-marks-on-enter";
+export { docChangeListenerPlugin } from "./doc-change-listener";
 export {
   clipNodeSpec,
   clipPastePlugin,