fix(editor): stabilize link and image input boundaries

Author: murongg

packages/editor/src/codemirror/image-preview.test.ts

@@ -41,6 +41,39 @@ afterEach(() => {
 });
 
 describe("imagePreviewPlugin", () => {
+  it("waits for Enter before previewing a newly typed image", () => {
+    const view = createView("");
+    const markdown = "![a](https://example.test/image.png)";
+
+    view.dispatch({
+      changes: { from: 0, insert: markdown },
+      selection: { anchor: markdown.length },
+      userEvent: "input",
+    });
+
+    expect(
+      view.dom.querySelector<HTMLInputElement>(".markra-image-node-source")
+        ?.value,
+    ).toBe(markdown);
+
+    view.dispatch({
+      changes: { from: markdown.length, insert: "\n" },
+      selection: { anchor: markdown.length + 1 },
+      userEvent: "input",
+    });
+
+    expect(view.dom.querySelector(".markra-image-node-source")).toBeNull();
+    expect(view.dom.querySelector(".cm-markra-image")).not.toBeNull();
+  });
+
+  it("renders an existing image when the initial caret is at its end", () => {
+    const doc = "![Synthetic alt](https://example.test/image.png)";
+    const view = createView(doc);
+
+    expect(view.dom.querySelector(".markra-image-node-source")).toBeNull();
+    expect(view.dom.querySelector(".cm-markra-image")).not.toBeNull();
+  });
+
   it("renders a safe Markdown image without changing its source", () => {
     const doc =
       'Before ![Synthetic alt](https://example.test/image.png "Preview") after\n\nEdit';
@@ -103,6 +136,7 @@ describe("imagePreviewPlugin", () => {
     expect(source).not.toBeNull();
     if (!source) return;
 
+    source.focus();
     source.value = "![Changed](https://example.test/changed.png)";
     source.dispatchEvent(new Event("input", { bubbles: true }));
     expect(view.state.doc.toString()).toBe(
@@ -145,6 +179,38 @@ describe("imagePreviewPlugin", () => {
     expect(view.dom.querySelector(".markra-image-node-source")).toBeNull();
   });
 
+  it("moves below a selected image when Enter comes from the editor", () => {
+    const imageMarkdown = "![Synthetic alt](./assets/mock.png)";
+    const doc = `${imageMarkdown}\nFollowing`;
+    const view = createView(doc);
+    view.dom.querySelector<HTMLImageElement>(".cm-markra-image")?.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true }),
+    );
+    const event = new KeyboardEvent("keydown", {
+      bubbles: true,
+      cancelable: true,
+      key: "Enter",
+    });
+
+    expect(view.state.selection.main.head).toBe(1);
+    view.contentDOM.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(view.state.doc.toString()).toBe(doc);
+    expect(view.state.selection.main.head).toBe(imageMarkdown.length + 1);
+    expect(view.dom.querySelector(".markra-image-node-source")).toBeNull();
+
+    view.dispatch({
+      changes: { from: imageMarkdown.length + 1, insert: "Plain " },
+      selection: { anchor: imageMarkdown.length + 7 },
+      userEvent: "input",
+    });
+    expect(view.state.doc.toString()).toBe(
+      `${imageMarkdown}\nPlain Following`,
+    );
+    expect(view.dom.querySelector(".cm-markra-link")).toBeNull();
+  });
+
   it("rejects executable and local protocols by default", () => {
     const executable = createView(
       "![Unsafe](javascript:alert%281%29)\n\nEdit",

packages/editor/src/codemirror/image.ts

@@ -292,14 +292,32 @@ class ImageWidget extends WidgetType {
         if (
           !current?.selected ||
           (event.target instanceof Node && current.sourceRow.contains(event.target)) ||
-          (event.key !== "Backspace" && event.key !== "Delete") ||
           event.altKey ||
           event.ctrlKey ||
           event.metaKey ||
           event.shiftKey
         ) {
           return;
         }
+
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const imageEnd = Math.min(current.widget.to, view.state.doc.length);
+          const hasFollowingLineBreak =
+            view.state.sliceDoc(imageEnd, imageEnd + 1) === "\n";
+          hideImageSource(root, current);
+          view.dispatch({
+            changes: hasFollowingLineBreak
+              ? undefined
+              : { from: imageEnd, insert: "\n" },
+            selection: EditorSelection.cursor(imageEnd + 1),
+            userEvent: "input",
+          });
+          view.focus();
+          return;
+        }
+
+        if (event.key !== "Backspace" && event.key !== "Delete") return;
         event.preventDefault();
         const from = Math.min(current.widget.from, view.state.doc.length);
         const to = Math.min(current.widget.to, view.state.doc.length);
@@ -381,7 +399,9 @@ class ImageWidget extends WidgetType {
     state.widget = this;
     updateImageElement(state.image, this);
     const preserveInput = dom.ownerDocument.activeElement === state.sourceInput;
-    if (this.selected || state.selected) {
+    // Cursor-driven source mode is temporary: once Enter moves the caret
+    // beyond the image, only an actively focused source input may keep it open.
+    if (this.selected || preserveInput) {
       showImageSource(dom, state, preserveInput);
     } else {
       hideImageSource(dom, state);
@@ -466,7 +486,7 @@ export function imagePreviewPlugin(options: ImagePreviewPluginOptions = {}) {
                 context.node.from,
                 context.state.facet(EditorState.readOnly),
                 options.resolveSource,
-                context.revealed("node"),
+                context.revealed("node-boundary"),
                 source,
                 context.node.to,
                 context.view,

packages/editor/src/codemirror/live-markdown.test.ts

@@ -178,12 +178,55 @@ describe("liveMarkdown", () => {
     expect(view.dom.querySelector(".cm-markra-link-icon")).toBeNull();
   });
 
-  it("keeps a link rendered when the caret is immediately beside it", () => {
-    const doc = "[label](https://example.test) after";
-    const linkEnd = doc.indexOf(" after");
-    const view = createView({ doc, anchor: linkEnd });
+  it("keeps a completed link in source mode until Enter moves the caret away", () => {
+    const markdown = "[label](https://example.test)";
+    const view = createView({ doc: "", anchor: 0 });
+
+    view.dispatch({
+      changes: { from: 0, insert: markdown },
+      selection: { anchor: markdown.length },
+      userEvent: "input",
+    });
+
+    expect(renderedLines(view)[0]).toBe(markdown);
+
+    view.dispatch({
+      changes: { from: markdown.length, insert: "\n" },
+      selection: { anchor: markdown.length + 1 },
+      userEvent: "input",
+    });
+
+    expect(renderedLines(view)[0]).toBe("label");
+    expect(view.dom.querySelector(".cm-markra-link-icon")).not.toBeNull();
+  });
 
-    expect(renderedLines(view)[0]).toBe("label after");
+  it("renders an existing link when the initial caret is at its end", () => {
+    const doc = "[label](https://example.test)";
+    const view = createView({ doc, anchor: doc.length });
+
+    expect(renderedLines(view)[0]).toBe("label");
+    expect(view.dom.querySelector(".cm-markra-link")).not.toBeNull();
+  });
+
+  it("does not preview an incomplete image label as a shortcut link", () => {
+    const view = createView({ doc: "", anchor: 0 });
+
+    view.dispatch({
+      changes: { from: 0, insert: "![a]" },
+      selection: { anchor: 4 },
+    });
+
+    expect(renderedLines(view)).toEqual(["![a]"]);
+    expect(view.dom.querySelector(".cm-markra-link")).toBeNull();
+    expect(view.dom.querySelector(".cm-markra-link-icon")).toBeNull();
+  });
+
+  it("keeps an unfinished image destination fully visible while typing", () => {
+    const doc = "![a](https://images.example.test/mock.jpg?w=1280&h=960";
+    const view = createView({ doc, anchor: doc.length });
+
+    expect(renderedLines(view)).toEqual([doc]);
+    expect(view.dom.querySelector(".cm-markra-link")).toBeNull();
   });
 
   it("renders reference-style links and reveals their complete source when edited", () => {

packages/editor/src/codemirror/markdown-editing.test.ts

@@ -1,5 +1,6 @@
+import { defaultKeymap } from "@codemirror/commands";
 import { EditorSelection, EditorState } from "@codemirror/state";
-import { EditorView, runScopeHandlers } from "@codemirror/view";
+import { EditorView, keymap, runScopeHandlers } from "@codemirror/view";
 import { afterEach, describe, expect, it } from "vitest";
 import { liveMarkdown } from "./index.ts";
 import { markdownEditingPlugin } from "./markdown-editing.ts";
@@ -14,7 +15,10 @@ function createView(doc: string, position: number) {
     parent,
     state: EditorState.create({
       doc,
-      extensions: [liveMarkdown({ plugins: [markdownEditingPlugin()] })],
+      extensions: [
+        keymap.of(defaultKeymap),
+        liveMarkdown({ plugins: [markdownEditingPlugin()] }),
+      ],
       selection: EditorSelection.cursor(position),
     }),
   });
@@ -40,6 +44,15 @@ afterEach(() => {
 });
 
 describe("markdownEditingPlugin", () => {
+  it("completes a typed image destination when Enter confirms it", () => {
+    const doc = "![a](https://images.example.test/mock.jpg?w=1280&h=960";
+    const view = createView(doc, doc.length);
+
+    expect(press(view, "Enter")).toBe(true);
+    expect(view.state.doc.toString()).toBe(`${doc})\n`);
+    expect(view.state.selection.main.head).toBe(doc.length + 2);
+  });
+
   it("keeps CodeMirror's native Markdown list continuation", () => {
     const view = createView("- First", "- First".length);
 

packages/editor/src/codemirror/markdown-editing.ts

@@ -2,6 +2,7 @@ import { syntaxTree } from "@codemirror/language";
 import {
   EditorSelection,
   EditorState,
+  Prec,
   type ChangeSpec,
   type SelectionRange,
 } from "@codemirror/state";
@@ -11,6 +12,8 @@ import { defineMarkraPlugin } from "./plugin.ts";
 const indentation = "  ";
 const listMarkerPattern = /^((?:[\t ]*>[\t ]*)*)([\t ]*)(?:[-+*]|\d+[.)])[\t ]+/u;
 const quotePrefixPattern = /^([\t ]*(?:>[\t ]*)+)/u;
+const incompleteInlineDestinationPattern =
+  /(?:^|[^\\])!?\[(?:\\.|[^\]\\])*\]\((?:\\.|[^)\n])*$/u;
 
 function isEditable(view: EditorView) {
   return !view.state.facet(EditorState.readOnly);
@@ -89,6 +92,29 @@ function handleShiftTab(view: EditorView) {
   return indentList(view, true);
 }
 
+function confirmIncompleteInlineDestination(view: EditorView) {
+  if (!isEditable(view)) return false;
+  const { ranges } = view.state.selection;
+  if (ranges.length !== 1 || !ranges[0]?.empty) return false;
+
+  const position = ranges[0].head;
+  const line = view.state.doc.lineAt(position);
+  if (position !== line.to) return false;
+  const sourceBeforeCursor = view.state.sliceDoc(line.from, position);
+  if (!incompleteInlineDestinationPattern.test(sourceBeforeCursor)) {
+    return false;
+  }
+
+  // Enter confirms the destination instead of placing a line break inside
+  // Markdown link syntax, which would leave both links and images unparseable.
+  view.dispatch({
+    changes: { from: position, insert: ")\n" },
+    selection: EditorSelection.cursor(position + 2),
+    userEvent: "input",
+  });
+  return true;
+}
+
 function insideTableCell(view: EditorView, position: number) {
   let node: ReturnType<typeof syntaxTree>["topNode"] | null =
     syntaxTree(view.state).resolveInner(position, -1);
@@ -128,9 +154,10 @@ function insertContextualHardBreak(view: EditorView) {
 export function markdownEditingPlugin() {
   return defineMarkraPlugin({
     id: "markra.markdown-editing",
-    extension: keymap.of([
+    extension: Prec.high(keymap.of([
+      { key: "Enter", run: confirmIncompleteInlineDestination },
       { key: "Tab", run: handleTab, shift: handleShiftTab },
       { key: "Shift-Enter", run: insertContextualHardBreak },
-    ]),
+    ])),
   });
 }

packages/editor/src/codemirror/policy.ts

@@ -1,7 +1,7 @@
 import type { EditorState } from "@codemirror/state";
 import type { EditorView, ViewUpdate } from "@codemirror/view";
 
-export type RevealScope = "line" | "node" | "heading";
+export type RevealScope = "line" | "node" | "node-boundary" | "heading";
 
 export interface RevealContext {
   view: EditorView;
@@ -64,7 +64,7 @@ export const revealActiveLine: RevealPolicy = ({
     );
   }
 
-  if (scope === "node") {
+  if (scope === "node" || scope === "node-boundary") {
     return cursors.some(
       (selection) => selection.head > from && selection.head < to,
     );