fix: preserve undo through clean projections

Azganoth · Azganoth · commit de176373bc71 · 2026-06-12T00:51:32.000-03:00
diff --git a/src/features/editor/plugins/inlineSourceProjection.test.tsx b/src/features/editor/plugins/inlineSourceProjection.test.tsx
@@ -49,28 +49,38 @@ const enterProjection = (mounted: MountedMilkdownEditor, selector: "em" | "stron
 };
 
 const getTextPosition = (mounted: MountedMilkdownEditor, text: string) => {
-  let position: number | null = null;
+  const textRanges: { end: number; from: number; start: number }[] = [];
+  let documentText = "";
 
   mounted.view.state.doc.descendants((node, pos) => {
     if (!node.isText) {
       return true;
     }
 
-    const index = node.textContent.indexOf(text);
-
-    if (index === -1) {
-      return true;
-    }
+    const start = documentText.length;
+    documentText += node.textContent;
+    textRanges.push({
+      end: documentText.length,
+      from: pos,
+      start,
+    });
 
-    position = pos + index;
-    return false;
+    return true;
   });
 
-  if (position === null) {
+  const index = documentText.indexOf(text);
+
+  if (index === -1) {
     throw new Error(`Could not find projected text: ${text}`);
   }
 
-  return position;
+  const range = textRanges.find(({ end, start }) => start <= index && index < end);
+
+  if (!range) {
+    throw new Error(`Could not resolve projected text position: ${text}`);
+  }
+
+  return range.from + index - range.start;
 };
 
 const runCommand = async (mounted: MountedMilkdownEditor, commandId: "edit.redo" | "edit.undo") =>
@@ -328,6 +338,57 @@ describe("inline source projection", () => {
     expect(mounted.getMarkdown()).toBe("*One* **Two**\n");
   });
 
+  it("preserves native undo after committing a marker deletion", async () => {
+    const mounted = await mountEditor("**Bold** plain");
+
+    enterProjection(mounted, "strong");
+
+    const sourceStart = getTextPosition(mounted, "**Bold**");
+
+    setTextSelection(mounted.view, sourceStart + 1);
+    pressKey(mounted.view, "Backspace");
+    setSelectionAtDocumentEnd(mounted.view);
+
+    expect(mounted.getMarkdown()).toBe("*Bold* plain\n");
+
+    const emphasis = mounted.view.dom.querySelector("em");
+
+    expect(emphasis).toBeInTheDocument();
+
+    setSelectionAtTextEnd(mounted.view, emphasis as HTMLElement);
+
+    expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(true);
+    expect(await runCommand(mounted, "edit.undo")).toBe(true);
+    expect(mounted.getMarkdown()).toBe("**Bold** plain\n");
+    expect(await runCommand(mounted, "edit.redo")).toBe(true);
+    expect(mounted.getMarkdown()).toBe("*Bold* plain\n");
+  });
+
+  it.each([
+    { commandId: "format.strong" as const, selector: "strong" },
+    { commandId: "format.emphasis" as const, selector: "em" },
+  ])(
+    "preserves native undo after applying $commandId to a whole paragraph",
+    async ({ commandId, selector }) => {
+      const mounted = await mountEditor("Plain paragraph");
+
+      expect(runEditorCommand(mounted.editor, "edit.selectAll")).toBe(true);
+      expect(runEditorCommand(mounted.editor, commandId)).toBe(true);
+
+      const formatted = mounted.view.dom.querySelector(selector);
+
+      expect(formatted).toBeInTheDocument();
+
+      setSelectionAtTextEnd(mounted.view, formatted as HTMLElement);
+
+      expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(true);
+      expect(await runCommand(mounted, "edit.undo")).toBe(true);
+      expect(mounted.getMarkdown()).toBe("Plain paragraph\n");
+      expect(await runCommand(mounted, "edit.redo")).toBe(true);
+      expect(mounted.view.dom.querySelector(selector)).toHaveTextContent("Plain paragraph");
+    },
+  );
+
   it("tracks real source edits as dirty without counting projection entry or commit", async () => {
     const onContentTransaction = vi.fn();
     const mounted = await mountEditor("**Bold** plain", onContentTransaction);
@@ -451,20 +512,19 @@ describe("inline source projection", () => {
     expect(mounted.view.state.doc.textContent).toBe("**Bolder** plain");
   });
 
-  it("keeps native undo from running through an active projection", async () => {
+  it("finalizes a clean active projection before running native undo and redo", async () => {
     const mounted = await mountEditor("**Bold** plain");
 
     setSelectionAtDocumentEnd(mounted.view);
     typeText(mounted.view, "!");
     enterProjection(mounted, "strong");
 
     expect(await runCommand(mounted, "edit.undo")).toBe(true);
-    expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(true);
-    expect(mounted.view.state.doc.textContent).toBe("**Bold** plain!");
+    expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(false);
+    expect(mounted.getMarkdown()).toBe("**Bold** plain\n");
 
     expect(await runCommand(mounted, "edit.redo")).toBe(true);
-    expect(hasActiveInlineSourceProjection(mounted.view.state)).toBe(true);
-    expect(mounted.view.state.doc.textContent).toBe("**Bold** plain!");
+    expect(mounted.getMarkdown()).toBe("**Bold** plain!\n");
   });
 
   it("preserves native undo and redo after projection commit", async () => {
diff --git a/src/features/editor/plugins/inlineSourceProjection.ts b/src/features/editor/plugins/inlineSourceProjection.ts
@@ -167,6 +167,12 @@ export const canRedoInlineSourceProjection = (state: EditorState) => {
   return Boolean(session && session.redoStack.length > 0);
 };
 
+export const canDeferInlineSourceProjectionToNativeHistory = (state: EditorState) => {
+  const session = getInlineSourceProjectionState(state).session;
+
+  return Boolean(session && isCleanProjectionSession(state, session));
+};
+
 export const undoInlineSourceProjection = (view: EditorView) => {
   const session = getInlineSourceProjectionState(view.state).session;
   const source = session?.undoStack.at(-1);
@@ -176,6 +182,12 @@ export const undoInlineSourceProjection = (view: EditorView) => {
   }
 
   if (source === undefined) {
+    if (isCleanProjectionSession(view.state, session)) {
+      finalizeInlineSourceProjection(view);
+
+      return false;
+    }
+
     return true;
   }
 
@@ -202,6 +214,12 @@ export const redoInlineSourceProjection = (view: EditorView) => {
   }
 
   if (source === undefined) {
+    if (isCleanProjectionSession(view.state, session)) {
+      finalizeInlineSourceProjection(view);
+
+      return false;
+    }
+
     return true;
   }
 
@@ -891,7 +909,9 @@ const createEnterProjectionTransaction = (state: EditorState, range: ActiveProje
     to: range.from + originalSource.length,
     undoStack: [],
   } satisfies ProjectionSession;
-  const transaction = state.tr.replaceWith(range.from, range.to, state.schema.text(originalSource));
+  const transaction = state.tr
+    .replaceWith(range.to, range.to, state.schema.text(sourceMarkers.closing))
+    .replaceWith(range.from, range.from, state.schema.text(sourceMarkers.opening));
 
   transaction
     .setSelection(TextSelection.create(transaction.doc, selectionPosition))
@@ -926,6 +946,21 @@ const createFinalizeRestoreTransaction = (
     replacement.text.length,
     parsed,
   );
+  const suppressAt =
+    shouldSuppressProjectionAtSelection && restoreSelection.anchor === restoreSelection.head
+      ? restoreSelection.anchor
+      : null;
+
+  if (source === session.originalSource && parsed.type === "mark") {
+    return createCleanFinalizeRestoreTransaction(
+      state,
+      session,
+      parsed,
+      restoreSelection,
+      suppressAt,
+    );
+  }
+
   const pendingCommit =
     source === session.originalSource
       ? null
@@ -955,10 +990,45 @@ const createFinalizeRestoreTransaction = (
     .setMeta("addToHistory", false)
     .setMeta(leafdownInlineSourceProjectionPluginKey, {
       pendingCommit,
-      suppressAt:
-        shouldSuppressProjectionAtSelection && restoreSelection.anchor === restoreSelection.head
-          ? restoreSelection.anchor
-          : null,
+      suppressAt,
+      type: "finalizeRestore",
+    } satisfies ProjectionMeta)
+    .scrollIntoView();
+
+  return transaction;
+};
+
+const createCleanFinalizeRestoreTransaction = (
+  state: EditorState,
+  session: ProjectionSession,
+  parsed: Extract<ParsedProjectionSource, { type: "mark" }>,
+  restoreSelection: { anchor: number; head: number },
+  suppressAt: number | null,
+) => {
+  const transaction = state.tr;
+
+  transaction
+    .delete(session.to - parsed.closing.length, session.to)
+    .delete(session.from, session.from + parsed.opening.length);
+
+  const markFrom = session.from;
+  const markTo = session.from + session.originalText.length;
+
+  if (markFrom < markTo) {
+    for (const mark of session.marks) {
+      transaction.addMark(markFrom, markTo, state.schema.marks[mark.markName].create(mark.attrs));
+    }
+  }
+
+  transaction
+    .setSelection(
+      TextSelection.create(transaction.doc, restoreSelection.anchor, restoreSelection.head),
+    )
+    .setStoredMarks([])
+    .setMeta("addToHistory", false)
+    .setMeta(leafdownInlineSourceProjectionPluginKey, {
+      pendingCommit: null,
+      suppressAt,
       type: "finalizeRestore",
     } satisfies ProjectionMeta)
     .scrollIntoView();
@@ -1493,6 +1563,9 @@ const mapProjectionSession = (session: ProjectionSession, transaction: Transacti
 const getProjectionSource = (state: EditorState, session: ProjectionSession) =>
   state.doc.textBetween(session.from, session.to, "\n", "\n");
 
+const isCleanProjectionSession = (state: EditorState, session: ProjectionSession) =>
+  getProjectionSource(state, session) === session.originalSource;
+
 const getSourceMarkers = (marks: ProjectionMarkDescriptor[]) => {
   const strong = marks.find((mark) => mark.markName === "strong");
   const emphasis = marks.find((mark) => mark.markName === "emphasis");
diff --git a/src/features/editor/utils/editorCommandState.test.tsx b/src/features/editor/utils/editorCommandState.test.tsx
@@ -69,7 +69,7 @@ describe("editor command state", () => {
     expect(getEditorCommandState(mounted.view).enabledCommands["edit.redo"]).toBe(true);
   });
 
-  it("uses projection-local history availability while projection is active", async () => {
+  it("uses projection-local history and native history availability while projection is active", async () => {
     const mounted = await mountEditor("**Bold** plain");
     const strong = mounted.view.dom.querySelector("strong");
 
@@ -79,7 +79,7 @@ describe("editor command state", () => {
     typeText(mounted.view, "!");
     setSelectionAtTextEnd(mounted.view, strong as HTMLElement);
 
-    expect(getEditorCommandState(mounted.view).enabledCommands["edit.undo"]).toBe(false);
+    expect(getEditorCommandState(mounted.view).enabledCommands["edit.undo"]).toBe(true);
     expect(getEditorCommandState(mounted.view).enabledCommands["edit.redo"]).toBe(false);
 
     typeText(mounted.view, "er");
diff --git a/src/features/editor/utils/editorCommandState.ts b/src/features/editor/utils/editorCommandState.ts
@@ -6,9 +6,10 @@ import type { EditorView } from "@milkdown/kit/prose/view";
 import type { AppCommandId, EditorCommandState } from "@/features/commands/types";
 
 import {
+  canDeferInlineSourceProjectionToNativeHistory,
   canRedoInlineSourceProjection,
-  hasActiveInlineSourceProjection,
   canUndoInlineSourceProjection,
+  hasActiveInlineSourceProjection,
 } from "../plugins/inlineSourceProjection";
 import {
   canDecreaseListIndent,
@@ -234,9 +235,16 @@ export const getEditorCommandState = (view: EditorView): EditorCommandState => {
   const hasWordBeforeSelection = Boolean(getTextWordRangeBeforeSelection(state));
   const hasTableSelection = hasTableContext(state);
   const hasActiveProjection = hasActiveInlineSourceProjection(state);
+  const canDeferProjectionToNativeHistory = canDeferInlineSourceProjectionToNativeHistory(state);
   const enabledCommands: Partial<Record<AppCommandId, boolean>> = {
-    "edit.undo": hasActiveProjection ? canUndoInlineSourceProjection(state) : undoDepth(state) > 0,
-    "edit.redo": hasActiveProjection ? canRedoInlineSourceProjection(state) : redoDepth(state) > 0,
+    "edit.undo": hasActiveProjection
+      ? canUndoInlineSourceProjection(state) ||
+        (canDeferProjectionToNativeHistory && undoDepth(state) > 0)
+      : undoDepth(state) > 0,
+    "edit.redo": hasActiveProjection
+      ? canRedoInlineSourceProjection(state) ||
+        (canDeferProjectionToNativeHistory && redoDepth(state) > 0)
+      : redoDepth(state) > 0,
   };
 
   for (const commandId of activeEditorCommands) {
diff --git a/src/features/editor/utils/editorCommands.test.tsx b/src/features/editor/utils/editorCommands.test.tsx
@@ -32,28 +32,38 @@ const mountEditor = async (initialMarkdown: string): Promise<MountedMilkdownEdit
 
 const textContent = (mounted: MountedMilkdownEditor) => mounted.view.state.doc.textContent;
 const getTextPosition = (mounted: MountedMilkdownEditor, text: string) => {
-  let position: number | null = null;
+  const textRanges: { end: number; from: number; start: number }[] = [];
+  let documentText = "";
 
   mounted.view.state.doc.descendants((node, pos) => {
     if (!node.isText) {
       return true;
     }
 
-    const index = node.textContent.indexOf(text);
-
-    if (index === -1) {
-      return true;
-    }
+    const start = documentText.length;
+    documentText += node.textContent;
+    textRanges.push({
+      end: documentText.length,
+      from: pos,
+      start,
+    });
 
-    position = pos + index;
-    return false;
+    return true;
   });
 
-  if (position === null) {
+  const index = documentText.indexOf(text);
+
+  if (index === -1) {
     throw new Error(`Could not find text: ${text}`);
   }
 
-  return position;
+  const range = textRanges.find(({ end, start }) => start <= index && index < end);
+
+  if (!range) {
+    throw new Error(`Could not resolve text position: ${text}`);
+  }
+
+  return range.from + index - range.start;
 };
 const textSelectionStart = 1;
 const imageMarkerText = "![]()";
@@ -275,7 +285,7 @@ describe("editor commands", () => {
     );
 
     expect(markdownEditor.view.dom).toHaveTextContent("**Bold**");
-    expect(markdownEditor.view.dom.querySelector("strong")).not.toBeInTheDocument();
+    expect(markdownEditor.view.dom.querySelector("strong")).toBeInTheDocument();
     expect(markdownEditor.getMarkdown()).toBe("**Bold**\n");
   });
 
