pmx-canvas 0.8.0 → 0.9.0

package/src/client/nodes/MarkdownNode.tsx

@@ -1,24 +1,59 @@
 import type { JSX } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Marked } from 'marked';
+import { signal, type Signal } from '@preact/signals';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { IconArrowLeft } from '../icons';
 import { expandNode, nodes, updateNodeData } from '../state/canvas-store';
-import { fetchFile, renderMarkdown, saveFile, updateNodeFromClient } from '../state/intent-bridge';
+import { fetchFile, renderMarkdown, updateNodeFromClient } from '../state/intent-bridge';
 import type { CanvasNodeState } from '../types';
-import { activeBoard, setBoardReadme } from '../state/boards-store';
+import { activeBoard, setBoardReadme, openMemoryTarget, boardList } from '../state/boards-store';
+import { showToast } from '../state/attention-bridge';
 import { MdFormatBar } from './MdFormatBar';
 import { handleFormatShortcut, handleTab } from './md-format';
 import { InlineMarkdownEditor } from './InlineMarkdownEditor';
 import { isHostedWorkbench } from '../state/workbench-transport';
-import { activeBoardId } from '../state/boards-store';
+import { activeBoardId, boardIncarnation, claimNavigation } from '../state/boards-store';
 import { sanitizeMarkdownHtml } from './markdown-sanitize';
 
+function handleWikiClick(e: MouseEvent, nodeId: string): boolean {
+  const link = (e.target as HTMLElement).closest<HTMLAnchorElement>('a.wiki-link');
+  if (!link) return false;
+  e.preventDefault();
+  e.stopPropagation();
+  if (link.dataset.wikiBoard) {
+    void openMemoryTarget({
+      boardId: link.dataset.wikiBoard,
+      ...(link.dataset.wikiCard ? { cardId: link.dataset.wikiCard } : {}),
+    });
+  } else {
+    const ref = link.dataset.wikiRef ?? '';
+    const name = ref.split('#')[0];
+    if (
+      link.dataset.wikiMissing ||
+      ref.includes('#') ||
+      boardList.value.some((board) => board.name.toLocaleLowerCase() === name.toLocaleLowerCase() || board.id === name)
+    ) {
+      showToast(
+        'remove',
+        'Link unavailable',
+        'The target is missing or ambiguous. Use a board/card ID in the wiki link to choose it explicitly.',
+      );
+    } else {
+      window.dispatchEvent(new CustomEvent('pmx-open-board-link', { detail: { sourceNodeId: nodeId, wikiRef: name } }));
+    }
+  }
+  return true;
+}
+
 function RenderedMarkdown({
   html,
   className,
   style,
   onTaskToggle,
+  nodeId,
 }: {
   html: string;
+  nodeId: string;
   className?: string;
   style?: string | JSX.CSSProperties;
   /** Enables the GFM task checkboxes and reports which one was clicked (document order). */
@@ -43,113 +78,246 @@ function RenderedMarkdown({
     template.innerHTML = sanitizeMarkdownHtml(html);
     container.append(template.content.cloneNode(true));
     if (onTaskToggleRef.current) {
-      for (const box of container.querySelectorAll('input[type="checkbox"][disabled]')) {
+      for (const box of container.querySelectorAll('input[type="checkbox"][data-pmx-task][disabled]')) {
         box.removeAttribute('disabled');
       }
     }
   }, [html]);
 
-  const handleClick = onTaskToggle
-    ? (e: MouseEvent) => {
-        const onToggle = onTaskToggleRef.current;
-        const container = containerRef.current;
-        if (!container || !onToggle) return;
-        const target = e.target as HTMLElement;
-        // The box itself, or anywhere in the row's checkbox gutter — a 15px
-        // input alone is a miserable target at zoom and in embedded panes
-        // that forward clicks imprecisely.
-        let box: HTMLInputElement | null = null;
-        if (target instanceof HTMLInputElement && target.type === 'checkbox') {
-          box = target;
-        } else {
-          const row = target.closest('li');
-          const rowBox = row?.querySelector<HTMLInputElement>(':scope > input[type="checkbox"]');
-          if (rowBox && e.clientX <= rowBox.getBoundingClientRect().right + 6) box = rowBox;
-        }
-        if (!box) return;
-        e.stopPropagation();
-        const index = [...container.querySelectorAll('input[type="checkbox"]')].indexOf(box);
-        if (index >= 0) onToggle(index);
-      }
-    : undefined;
+  const handleClick = (e: MouseEvent) => {
+    if (handleWikiClick(e, nodeId)) return;
+    const target = e.target as HTMLElement;
+    const onToggle = onTaskToggleRef.current;
+    const container = containerRef.current;
+    if (!container || !onToggle) return;
+    // The box itself, or anywhere in the row's checkbox gutter — a 15px
+    // input alone is a miserable target at zoom and in embedded panes
+    // that forward clicks imprecisely.
+    let box: HTMLInputElement | null = null;
+    if (target instanceof HTMLInputElement && target.matches('input[type="checkbox"][data-pmx-task]')) {
+      box = target;
+    } else {
+      const row = target.closest('li');
+      const rowBox = row?.querySelector<HTMLInputElement>(
+        ':scope > input[data-pmx-task], :scope > p > input[data-pmx-task]',
+      );
+      if (rowBox && e.clientX <= rowBox.getBoundingClientRect().right + 6) box = rowBox;
+    }
+    if (!box) return;
+    // The source/rendered acknowledgement owns the tick, not the native input's
+    // optimistic state, which would otherwise survive a refused or stale click.
+    e.preventDefault();
+    e.stopPropagation();
+    // Inert template content and HTML tree repair can change the live DOM order.
+    onToggle(Number(box.dataset.pmxTask));
+  };
 
   return <div ref={containerRef} class={className} style={style} onClick={handleClick} />;
 }
 
-/** Flip the index-th GFM task marker in the source (document order matches the rendered boxes). */
+const taskParser = new Marked({ gfm: true, breaks: true });
+
+/** Flip exactly one parsed GFM task without reformatting any other source bytes. */
 export function toggleTaskMarker(markdown: string, index: number): string {
-  let seen = -1;
-  return markdown.replace(/^(\s*(?:[-*+]|\d+[.)])\s+\[)([ xX])(\])/gm, (match, pre, state, post) => {
-    seen += 1;
-    if (seen !== index) return match;
-    return `${pre}${state === ' ' ? 'x' : ' '}${post}`;
-  });
+  const states = (source: string): boolean[] => {
+    const result: boolean[] = [];
+    taskParser.walkTokens(taskParser.lexer(source), (token) => {
+      if (token.type === 'list_item' && token.task) result.push(!!token.checked);
+    });
+    return result;
+  };
+  const before = states(markdown);
+  if (!Number.isInteger(index) || index < 0 || index >= before.length) return markdown;
+  // Marked has no source offsets, and container tokens strip quote/indentation
+  // prefixes. Probe only list-shaped markers, never reference labels like [x]:
+  // whose mutation can change parsing. Marked decides which candidates are tasks.
+  const markers = [...markdown.matchAll(/(?:[-*+]|\d{1,9}[.)])[ \t]+\[[ xX]\](?=[ \t]|$)/gm)].map(
+    (match) => match.index + match[0].lastIndexOf('[') + 1,
+  );
+  const flip = (first: number, last: number) => {
+    let source = markdown;
+    for (let i = last; i >= first; i--) {
+      const offset = markers[i];
+      source = source.slice(0, offset) + (source[offset] === ' ' ? 'x' : ' ') + source.slice(offset + 1);
+    }
+    return source;
+  };
+  let first = 0;
+  let last = markers.length - 1;
+  while (first < last) {
+    const middle = Math.floor((first + last) / 2);
+    if (states(flip(first, middle))[index] !== before[index]) last = middle;
+    else first = middle + 1;
+  }
+  const candidate = flip(first, first);
+  const after = states(candidate);
+  return after.length === before.length &&
+    after.every((checked, i) => checked === (i === index ? !before[i] : before[i]))
+    ? candidate
+    : markdown;
+}
+
+// A draft belongs to its qualified card, not the card/overlay component currently
+// showing it. Keep dirty or in-flight work across close, expand and board switches.
+type MarkdownDraft = {
+  latestMdRef: { current: string };
+  renderedMdRef: { current: { markdown: string; html: string } | null };
+  dirty: Signal<boolean>;
+  editBase: { current: { boardId: string | null; revision: number } };
+  saveQueue: { current: Promise<void> };
+  nativeSaveAttempts: Set<{ revision: number }>;
+  pending: Signal<number>;
+  owners: number;
+};
+const markdownDrafts = new Map<string, MarkdownDraft>();
+
+/** Review must refer to persisted content, not an edited or saving preview. */
+export function hasUnsavedMarkdown(boardId: string, nodeId: string): boolean {
+  const draft = markdownDrafts.get(JSON.stringify([boardId, nodeId]));
+  return !!draft && (draft.dirty.value || draft.pending.value > 0);
+}
+
+/** After blur, navigate only when this board/card's save has actually succeeded. */
+export async function waitForMarkdownSave(boardId: string | null, nodeId: string): Promise<boolean> {
+  const isCurrentNavigation = claimNavigation();
+  const incarnation = boardIncarnation;
+  const draft = markdownDrafts.get(JSON.stringify([boardId, nodeId]));
+  await draft?.saveQueue.current;
+  return (
+    isCurrentNavigation() && incarnation === boardIncarnation && activeBoardId.value === boardId && !draft?.dirty.value
+  );
 }
 
 export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const board = activeBoard();
+  const boardId = activeBoardId.value;
+  const draftKey = JSON.stringify([boardId, node.id]);
+  const draft = useMemo(() => {
+    const existing = markdownDrafts.get(draftKey);
+    if (existing) return existing;
+    const created: MarkdownDraft = {
+      latestMdRef: { current: typeof node.data.content === 'string' ? node.data.content : '' },
+      renderedMdRef: { current: null },
+      dirty: signal(false),
+      editBase: { current: { boardId, revision: node.contentRevision ?? 0 } },
+      saveQueue: { current: Promise.resolve() },
+      nativeSaveAttempts: new Set(),
+      pending: signal(0),
+      owners: 0,
+    };
+    markdownDrafts.set(draftKey, created);
+    return created;
+  }, [draftKey]);
+  const { latestMdRef, renderedMdRef, editBase, saveQueue } = draft;
   const path = node.data.path as string;
   const [content, setContent] = useState('');
   const [rendered, setRendered] = useState('');
   const [loaded, setLoaded] = useState(false);
   const [sourceMode, setSourceMode] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [dirty, setDirty] = useState(false);
+  const dirty = draft.dirty.value;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const persistTimerRef = useRef<number | null>(null);
+  const persistTimerRef = useMemo<{ current: number | null }>(() => ({ current: null }), [draft]);
   // Always-current md + saver, so the unmount cleanup can flush a pending
-  // debounced save without capturing stale closures.
-  const latestMdRef = useRef<string>('');
-  const persistFnRef = useRef<((md: string) => Promise<void>) | null>(null);
-  const dirtyRef = useRef(false);
-  const editBase = useRef({ boardId: activeBoardId.value, revision: node.contentRevision ?? 0 });
-  const saveQueue = useRef(Promise.resolve());
+  // debounced save without borrowing another board's same-ID card.
+  const persistFnRef = useMemo<{ current: ((md: string) => Promise<void>) | null }>(() => ({ current: null }), [draft]);
   const reviewActive = node.data.reviewActive as boolean | undefined;
+  // Binding-only saves/restores and target availability changes invalidate HTML,
+  // but position-only layouts must not trigger another render request.
+  const savedWikiBindings = JSON.stringify(node.data.wikiLinks ?? []);
+
+  useLayoutEffect(() => {
+    draft.owners++;
+    // Reattach when replacing the last clean card instance in the same commit.
+    markdownDrafts.set(draftKey, draft);
+    setContent(latestMdRef.current);
+    const preview = renderedMdRef.current;
+    const matches = preview?.markdown === latestMdRef.current;
+    setRendered(matches ? preview.html : '');
+    setLoaded(matches);
+    return () => {
+      draft.owners--;
+      if (!draft.owners && !draft.pending.value && !draft.dirty.value && markdownDrafts.get(draftKey) === draft)
+        markdownDrafts.delete(draftKey);
+    };
+  }, [draft]);
 
   useEffect(() => {
-    if (isHostedWorkbench() && dirtyRef.current) return;
-    editBase.current = { boardId: activeBoardId.value, revision: node.contentRevision ?? 0 };
+    const renderingDraft = draft.dirty.value || draft.pending.value > 0;
+    if (!renderingDraft) editBase.current = { boardId, revision: node.contentRevision ?? 0 };
     let cancelled = false;
     (async () => {
       let raw: string;
-      if (path) {
+      if (renderingDraft) {
+        // Refresh link availability in the draft, never replace it with saved text.
+        raw = latestMdRef.current;
+      } else if (path) {
         const result = await fetchFile(path);
         if (cancelled) return;
         raw = result.content;
-      } else if (node.data.content) {
-        raw = node.data.content as string;
+      } else if (typeof node.data.content === 'string') {
+        raw = node.data.content;
       } else {
         setLoaded(true);
         return;
       }
-      setContent(raw);
-      const html = await renderMarkdown(raw);
-      if (cancelled || (isHostedWorkbench() && dirtyRef.current)) return;
+      const html = await renderMarkdown(raw, node.id, boardId);
+      if (
+        html === null ||
+        cancelled ||
+        activeBoardId.value !== boardId ||
+        (renderingDraft || draft.dirty.value
+          ? latestMdRef.current !== raw
+          : !path && nodes.value.get(node.id)?.data.content !== raw)
+      )
+        return;
+      renderedMdRef.current = { markdown: raw, html };
       setRendered(html);
       setLoaded(true);
-      updateNodeData(node.id, { content: raw, rendered: html });
+      if (!renderingDraft && !draft.dirty.value) {
+        latestMdRef.current = raw;
+        setContent(raw);
+        updateNodeData(node.id, { content: raw, rendered: html });
+      } else if (nodes.value.get(node.id)?.data.content === raw) {
+        // A pending save may already contain this text; cache only its HTML.
+        updateNodeData(node.id, { rendered: html });
+      }
     })();
     return () => {
       cancelled = true;
     };
-  }, [path, node.id, node.data.content]);
+  }, [boardId, path, node.id, node.data.content, savedWikiBindings, node.linksRevision]);
 
-  const handleInput = useCallback(async (e: Event) => {
-    const value = (e.target as HTMLTextAreaElement).value;
-    dirtyRef.current = true;
-    latestMdRef.current = value;
-    setContent(value);
-    setDirty(true);
-    const html = await renderMarkdown(value);
-    setRendered(html);
-  }, []);
+  const handleInput = useCallback(
+    async (e: Event) => {
+      const value = (e.target as HTMLTextAreaElement).value;
+      draft.dirty.value = true;
+      latestMdRef.current = value;
+      setContent(value);
+      const html = await renderMarkdown(value, node.id, boardId);
+      if (html === null || activeBoardId.value !== boardId || latestMdRef.current !== value) return;
+      renderedMdRef.current = { markdown: value, html };
+      setRendered(html);
+    },
+    [boardId, draft, node.id],
+  );
 
   const persistContent = useCallback(
     async (newContent: string) => {
-      if (isHostedWorkbench()) {
-        // Serialize autosaves against the captured source revision, not whatever
-        // newer revision a background poll has delivered while typing.
-        saveQueue.current = saveQueue.current.then(async () => {
+      // Human wins over already-observed work, not work arriving while this
+      // particular attempt waits in the queue or for its rendered preview.
+      const incarnation = boardIncarnation;
+      const attempt = { revision: nodes.value.get(node.id)?.contentRevision ?? 0 };
+      draft.nativeSaveAttempts.add(attempt);
+      draft.pending.value++;
+      // Order the complete save, including disk writes and rendering. A later
+      // draft must not persist before an older render resumes and overwrites it.
+      saveQueue.current = saveQueue.current.then(async () => {
+        if (incarnation !== boardIncarnation || activeBoardId.value !== boardId || latestMdRef.current !== newContent)
+          return;
+        if (isHostedWorkbench()) {
+          // Serialize autosaves against the captured source revision, not whatever
+          // newer revision a background poll has delivered while typing.
           setSaving(true);
           const result = await updateNodeFromClient(node.id, {
             content: newContent,
@@ -157,44 +325,106 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
             expectedContentRevision: editBase.current.revision,
           });
           setSaving(false);
-          if (!result.ok) return; // Refusal toast is shown by the request helper; keep the draft.
+          if (!result.ok || incarnation !== boardIncarnation) return; // Keep refused or obsolete drafts.
           editBase.current.revision = result.contentRevision ?? editBase.current.revision;
+          const html = await renderMarkdown(newContent, node.id, boardId);
+          if (incarnation !== boardIncarnation || activeBoardId.value !== boardId || latestMdRef.current !== newContent)
+            return;
           const current = nodes.value.get(node.id);
-          if (current)
-            nodes.value = new Map(nodes.value).set(node.id, { ...current, contentRevision: editBase.current.revision });
-          if (latestMdRef.current !== newContent) return;
-          dirtyRef.current = false;
-          setDirty(false);
-          const html = await renderMarkdown(newContent);
+          if (!current || (current.contentRevision ?? 0) > editBase.current.revision) return;
+          nodes.value = new Map(nodes.value).set(node.id, {
+            ...current,
+            contentRevision: editBase.current.revision,
+            lastEditedBy: result.lastEditedBy,
+            data: { ...current.data, content: newContent, ...(html !== null ? { rendered: html } : {}) },
+          });
+          draft.dirty.value = false;
+          if (html !== null) {
+            renderedMdRef.current = { markdown: newContent, html };
+            setRendered(html);
+          }
+          return;
+        }
+        const html = await renderMarkdown(newContent, node.id, boardId);
+        if (
+          html === null ||
+          incarnation !== boardIncarnation ||
+          activeBoardId.value !== boardId ||
+          latestMdRef.current !== newContent
+        )
+          return;
+        // Preview the local draft independently of persistence. Switching Source
+        // back to Document must not resurrect saved text while PATCH is pending.
+        if (
+          activeBoardId.value === boardId &&
+          latestMdRef.current === newContent &&
+          renderedMdRef.current?.markdown !== newContent
+        ) {
+          renderedMdRef.current = { markdown: newContent, html };
           setRendered(html);
-          updateNodeData(node.id, { content: newContent, rendered: html });
-        });
-        await saveQueue.current;
-        return;
-      }
-      if (!path) {
-        const html = await renderMarkdown(newContent);
-        setRendered(html);
-        setDirty(false);
-        updateNodeData(node.id, { content: newContent, rendered: html });
-        await updateNodeFromClient(node.id, { content: newContent, data: { rendered: html } });
-        return;
-      }
-      setSaving(true);
-      const result = await saveFile(path, newContent);
-      setSaving(false);
-      if (result.ok) {
-        const html = await renderMarkdown(newContent);
-        setRendered(html);
-        setDirty(false);
-        updateNodeData(node.id, { content: newContent, rendered: html, savedAt: result.updatedAt });
-        await updateNodeFromClient(node.id, {
+        }
+        const expectedContentRevision = attempt.revision;
+        const result = await updateNodeFromClient(node.id, {
           content: newContent,
-          data: { rendered: html, savedAt: result.updatedAt },
+          data: { rendered: html },
+          expectedBoardId: boardId,
+          expectedContentRevision,
+          ...(path ? { persistFile: true } : {}),
         });
+        // A restored/restarted library may reuse this ID with a lower revision.
+        // The old ACK grants neither canonical state nor queued-save authority.
+        if (incarnation !== boardIncarnation) return;
+        if (result.ok && result.contentRevision !== undefined) {
+          // Advance only through a successful predecessor in this board/card's
+          // queue. An external revision or a refused save grants no retry.
+          for (const queued of draft.nativeSaveAttempts) {
+            if (queued.revision === expectedContentRevision) queued.revision = result.contentRevision;
+          }
+        }
+        const current = nodes.value.get(node.id);
+        if (
+          result.ok &&
+          result.contentRevision !== undefined &&
+          current &&
+          activeBoardId.value === boardId &&
+          (current.contentRevision ?? 0) <= result.contentRevision
+        ) {
+          // ACK the canonical revision even while a newer local draft is dirty,
+          // so a later save need not wait for polling to observe our own write.
+          const preview = renderedMdRef.current;
+          const replacePreview = preview?.markdown !== newContent;
+          nodes.value = new Map(nodes.value).set(node.id, {
+            ...current,
+            contentRevision: result.contentRevision,
+            lastEditedBy: result.lastEditedBy,
+            data: {
+              ...current.data,
+              content: newContent,
+              rendered: preview?.markdown === newContent ? preview.html : html,
+            },
+          });
+          if (latestMdRef.current === newContent) {
+            // A remounted editor must not initialize from another source's HTML
+            // while the canonical post-save render is still pending.
+            if (replacePreview) {
+              renderedMdRef.current = { markdown: newContent, html };
+              setRendered(html);
+            }
+            draft.dirty.value = false;
+            setContent(newContent);
+          }
+        }
+      });
+      try {
+        await saveQueue.current;
+      } finally {
+        draft.nativeSaveAttempts.delete(attempt);
+        draft.pending.value--;
+        if (!draft.owners && !draft.pending.value && !draft.dirty.value && markdownDrafts.get(draftKey) === draft)
+          markdownDrafts.delete(draftKey);
       }
     },
-    [path, node.id],
+    [boardId, path, node.id, draft],
   );
 
   const handleSave = useCallback(async () => {
@@ -202,6 +432,26 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
     await persistContent(content);
   }, [dirty, content, persistContent]);
 
+  const handleDocumentMode = useCallback(async () => {
+    if (renderedMdRef.current?.markdown !== content) {
+      const html = await renderMarkdown(content, node.id, boardId);
+      // Do not mount the rich editor from another source's HTML, including
+      // while a draft render is pending or unavailable. Keep Source retryable.
+      if (html === null || activeBoardId.value !== boardId || latestMdRef.current !== content) return;
+      if (renderedMdRef.current?.markdown !== content) {
+        renderedMdRef.current = { markdown: content, html };
+      }
+    }
+    if (activeBoardId.value !== boardId || latestMdRef.current !== content) return;
+    // Another instance may have populated the shared cache. The rich editor
+    // mounts from this instance's HTML, which must match that cache as well.
+    const preview = renderedMdRef.current;
+    if (preview?.markdown !== content) return;
+    setRendered(preview.html);
+    setLoaded(true);
+    setSourceMode(false);
+  }, [boardId, content, node.id]);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 's') {
@@ -227,9 +477,8 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // don't hit the backend on every letter.
   const handleInlineChange = useCallback(
     (md: string) => {
-      dirtyRef.current = true;
+      draft.dirty.value = true;
       setContent(md);
-      setDirty(true);
       latestMdRef.current = md;
       if (persistTimerRef.current !== null) window.clearTimeout(persistTimerRef.current);
       persistTimerRef.current = window.setTimeout(() => {
@@ -237,7 +486,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
         void persistContent(md);
       }, 800);
     },
-    [persistContent],
+    [persistContent, draft],
   );
 
   // Fires on ⌘S and blur — persist immediately with whatever markdown the
@@ -245,7 +494,8 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
   // write twice with slightly different content.
   const handleInlineSave = useCallback(
     (md: string) => {
-      dirtyRef.current = true;
+      if (!draft.dirty.value && md === latestMdRef.current) return;
+      draft.dirty.value = true;
       setContent(md);
       latestMdRef.current = md;
       if (persistTimerRef.current !== null) {
@@ -254,7 +504,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       }
       void persistContent(md);
     },
-    [persistContent],
+    [persistContent, draft],
   );
 
   // On unmount / node switch, flush any pending debounced save so trailing
@@ -267,7 +517,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       const fn = persistFnRef.current;
       if (fn) void fn(latestMdRef.current);
     };
-  }, [node.id]);
+  }, [draft]);
 
   const reviewBanner = reviewActive ? (
     <div
@@ -292,7 +542,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
     return (
       <div class="md-editor-expanded" onKeyDown={handleKeyDown}>
         <div class="md-editor-toolbar">
-          <button type="button" class="md-toolbar-btn" onClick={() => setSourceMode(false)}>
+          <button type="button" class="md-toolbar-btn" onClick={handleDocumentMode}>
             <IconArrowLeft size={14} /> Back to document
           </button>
           <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
@@ -312,7 +562,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
             <textarea ref={textareaRef} value={content} onInput={handleInput} spellcheck={false} />
             <MdFormatBar textareaRef={textareaRef} />
           </div>
-          <RenderedMarkdown html={rendered} className="md-preview" />
+          <RenderedMarkdown nodeId={node.id} html={rendered} className="md-preview" />
         </div>
       </div>
     );
@@ -325,7 +575,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
           <textarea ref={textareaRef} value={content} onInput={handleInput} spellcheck={false} />
           <MdFormatBar textareaRef={textareaRef} />
         </div>
-        <RenderedMarkdown html={rendered} className="md-preview" />
+        <RenderedMarkdown nodeId={node.id} html={rendered} className="md-preview" />
         <div
           style={{
             position: 'absolute',
@@ -337,7 +587,7 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
         >
           <button
             type="button"
-            onClick={() => setSourceMode(false)}
+            onClick={handleDocumentMode}
             style={{
               padding: '4px 10px',
               fontSize: '11px',
@@ -375,12 +625,27 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
 
   if (expanded) {
     return (
-      <div style={{ height: '100%', position: 'relative' }}>
+      <div
+        class="md-expanded-document"
+        style={{ height: '100%', position: 'relative' }}
+        onClick={async (event) => {
+          if (!(event.target as HTMLElement).closest('a.wiki-link')) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const focused = document.activeElement;
+          // Blur flushes actual rich edits. Finish that save before the
+          // link dialog captures its source or navigation changes boards.
+          if (focused instanceof HTMLElement && event.currentTarget.contains(focused)) focused.blur();
+          if (!(await waitForMarkdownSave(boardId, node.id))) return;
+          handleWikiClick(event, node.id);
+        }}
+      >
         {reviewBanner}
         <div class="md-reader">
           {loaded ? (
             <InlineMarkdownEditor
               key={node.id}
+              markdown={content}
               initialHtml={rendered || '<p><br></p>'}
               className="md-reader-content md-reader-editable"
               onChange={handleInlineChange}
@@ -404,11 +669,14 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <div class="md-card-content">
         {reviewBanner}
         <RenderedMarkdown
+          nodeId={node.id}
           html={rendered}
           style={{ padding: rendered ? '0' : '12px', color: rendered ? undefined : 'var(--c-dim)' }}
           // Task checkboxes are live on the card itself — no need to expand to tick one.
           onTaskToggle={(index) => {
-            const next = toggleTaskMarker(content, index);
+            const preview = renderedMdRef.current;
+            if (preview?.html !== rendered || preview.markdown !== latestMdRef.current) return;
+            const next = toggleTaskMarker(preview.markdown, index);
             if (next !== content) handleInlineSave(next);
           }}
         />