fix: suppress transient projection markdown updates

Author: Azganoth

src/features/editor/plugins/inlineSourceProjection.test.tsx

@@ -1,7 +1,13 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { waitFor } from "@testing-library/react";
+
 import { runEditorCommand } from "@/features/editor/utils/editorCommands";
-import { mountMilkdownEditor, type MountedMilkdownEditor } from "@/test/utils/milkdown";
+import {
+  mountMilkdownEditor,
+  type MountedMilkdownEditor,
+  type MountMilkdownEditorOptions,
+} from "@/test/utils/milkdown";
 import {
   pressKey,
   setSelectionAtDocumentEnd,
@@ -17,15 +23,21 @@ const mountedEditors: MountedMilkdownEditor[] = [];
 const mountEditor = async (
   initialMarkdown: string,
   onContentTransaction = vi.fn(),
+  onMarkdownUpdated?: MountMilkdownEditorOptions["onMarkdownUpdated"],
 ): Promise<MountedMilkdownEditor> => {
   const mounted = await mountMilkdownEditor(initialMarkdown, {
     onContentTransaction,
+    onMarkdownUpdated,
     rootClassName: "leafdown-editor",
   });
   mountedEditors.push(mounted);
   return mounted;
 };
 
+const waitForMarkdownListenerDebounce = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 300));
+};
+
 const enterProjection = (mounted: MountedMilkdownEditor, selector: "em" | "strong") => {
   const element = mounted.view.dom.querySelector(selector);
 
@@ -167,6 +179,30 @@ describe("inline source projection", () => {
     expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(false);
   });
 
+  it("does not emit transient projected source through markdown updates", async () => {
+    const onMarkdownUpdated = vi.fn();
+    const mounted = await mountEditor("**Bold** plain", vi.fn(), onMarkdownUpdated);
+
+    enterProjection(mounted, "strong");
+    await waitForMarkdownListenerDebounce();
+
+    expect(onMarkdownUpdated).not.toHaveBeenCalled();
+
+    typeText(mounted.view, "er");
+    await waitForMarkdownListenerDebounce();
+
+    expect(onMarkdownUpdated).not.toHaveBeenCalled();
+
+    setSelectionAtDocumentEnd(mounted.view);
+
+    await waitFor(() => {
+      expect(onMarkdownUpdated).toHaveBeenCalledWith(
+        expect.objectContaining({ markdown: "**Bolder** plain\n" }),
+      );
+    });
+    expect(onMarkdownUpdated).toHaveBeenCalledTimes(1);
+  });
+
   it("uses projection-local undo and redo while projection is active", async () => {
     const mounted = await mountEditor("**Bold** plain");
 

src/features/editor/plugins/inlineSourceProjection.ts

@@ -113,6 +113,12 @@ export const finalizeInlineSourceProjection = (view: EditorView) => {
 export const hasActiveInlineSourceProjection = (state: EditorState) =>
   Boolean(getInlineSourceProjectionState(state).session);
 
+export const hasTransientInlineSourceProjection = (state: EditorState) => {
+  const projectionState = getInlineSourceProjectionState(state);
+
+  return Boolean(projectionState.session || projectionState.pendingCommit);
+};
+
 export const canUndoInlineSourceProjection = (state: EditorState) => {
   const session = getInlineSourceProjectionState(state).session;
 

src/features/editor/utils/createMilkdownEditor.ts

@@ -16,6 +16,7 @@ import { createLeafdownImageViewPlugin } from "../plugins/imageView";
 import {
   createLeafdownInlineSourceProjectionPlugin,
   finalizeInlineSourceProjection,
+  hasTransientInlineSourceProjection,
 } from "../plugins/inlineSourceProjection";
 import { createLeafdownLinkActivationPlugin } from "../plugins/linkActivation";
 import { createLeafdownMarkerPresentationPlugin } from "../plugins/markerPresentation";
@@ -67,7 +68,11 @@ export const createMilkdownEditor = async ({
       ctx.set(highlightPluginConfig.key, { parser });
 
       if (onMarkdownUpdated) {
-        ctx.get(listenerCtx).markdownUpdated((_ctx, markdown, previousMarkdown) => {
+        ctx.get(listenerCtx).markdownUpdated((listenerCtx, markdown, previousMarkdown) => {
+          if (hasTransientInlineSourceProjection(listenerCtx.get(editorViewCtx).state)) {
+            return;
+          }
+
           onMarkdownUpdated({ markdown, previousMarkdown });
         });
       }

src/test/utils/milkdown.ts

@@ -6,7 +6,7 @@ import {
   getMilkdownEditorMarkdown,
   type MilkdownEditorInstance,
 } from "@/features/editor";
-import type { EditorContextPopupRequest } from "@/features/editor";
+import type { EditorContextPopupRequest, MilkdownMarkdownUpdate } from "@/features/editor";
 
 export interface MountedMilkdownEditor {
   root: HTMLDivElement;
@@ -23,6 +23,7 @@ export interface MountMilkdownEditorOptions {
   folderContextPath?: string | null;
   onContentTransaction?: () => void;
   onCommandStateChanged?: () => void;
+  onMarkdownUpdated?: (update: MilkdownMarkdownUpdate) => void;
   onContextPopupClosed?: () => void;
   onContextPopupRequested?: (request: EditorContextPopupRequest) => void;
   getContextPopupOpen?: () => boolean;
@@ -41,6 +42,7 @@ export const mountMilkdownEditor = async (
     initialMarkdown,
     onContentTransaction: options.onContentTransaction,
     onCommandStateChanged: options.onCommandStateChanged,
+    onMarkdownUpdated: options.onMarkdownUpdated,
     onContextPopupClosed: options.onContextPopupClosed,
     onContextPopupRequested: options.onContextPopupRequested,
     getContextPopupOpen: options.getContextPopupOpen,