pmx-canvas 0.8.0 → 0.9.0

package/src/client/nodes/HtmlNode.tsx

@@ -12,6 +12,14 @@ export function shouldShowPresentationControls(node: CanvasNodeState): boolean {
   return node.type === 'html' && node.data.presentation === true;
 }
 
+export function htmlAxCapabilitySignature(value: unknown): string {
+  const capabilities = value as { enabled?: unknown; allowed?: unknown } | undefined;
+  if (capabilities?.enabled !== true) return 'disabled';
+  if (!Array.isArray(capabilities.allowed)) return 'enabled:default';
+  const allowed = [...new Set(capabilities.allowed.filter((item): item is string => typeof item === 'string'))].sort();
+  return allowed.length > 0 ? `enabled:${allowed.join(',')}` : 'disabled';
+}
+
 export function HtmlNode({
   node,
   expanded = false,
@@ -27,10 +35,12 @@ export function HtmlNode({
 }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const theme = canvasTheme.value;
+  const axCapabilitySignature = htmlAxCapabilitySignature(node.data.axCapabilities);
   // Stable per-mount nonce that authorizes parent → iframe theme-update messages.
   const themeToken = useMemo(() => `theme-${crypto.randomUUID()}`, []);
-  // Per-mount nonce authorizing iframe → parent AX emits (Phase 3 HTML bridge).
-  const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, []);
+  // Rotate the nonce when capabilities change: both the URL and injected srcdoc
+  // change, rebootstrapping the bridge and rejecting emits from the old document.
+  const axToken = useMemo(() => `ax-${crypto.randomUUID()}`, [axCapabilitySignature]);
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
   const html =
@@ -111,6 +121,37 @@ export function HtmlNode({
     return () => window.clearTimeout(id);
   }, [autoFocus, surfaceSrc]);
 
+  const handleDocumentLoad = (frame: HTMLIFrameElement, signal: AbortSignal): Promise<boolean> => {
+    if (signal.aborted) return Promise.resolve(false);
+    return new Promise((resolve) => {
+      const finish = (ready: boolean) => {
+        clearTimeout(timer);
+        window.removeEventListener('message', receive);
+        signal.removeEventListener('abort', cancel);
+        resolve(ready);
+      };
+      const cancel = () => finish(false);
+      const receive = (event: MessageEvent) => {
+        if (
+          event.source !== frame.contentWindow ||
+          event.data?.source !== HTML_SURFACE_PUSH_SOURCE ||
+          event.data?.token !== themeToken
+        )
+          return;
+        // A healthy offscreen frame can wait for paint without a deadline.
+        if (event.data.type === 'mounted') clearTimeout(timer);
+        if (event.data.type === 'ready') finish(true);
+      };
+      const timer = setTimeout(cancel, 10_000);
+      window.addEventListener('message', receive);
+      signal.addEventListener('abort', cancel, { once: true });
+      frame.contentWindow?.postMessage(
+        { source: HTML_SURFACE_PUSH_SOURCE, type: 'check-ready', token: themeToken },
+        '*',
+      );
+    });
+  };
+
   const handleFrameLoad = () => {
     iframeRef.current?.contentWindow?.postMessage(
       {
@@ -164,6 +205,7 @@ export function HtmlNode({
       allow=""
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
+      onDocumentLoad={handleDocumentLoad}
     />
   );
 }

package/src/client/nodes/ImageNode.tsx

@@ -142,7 +142,7 @@ export function ImageNode({ node, expanded = false }: { node: CanvasNodeState; e
           <span class="image-node-meta">
             {sizeLabel && <span>{sizeLabel}</span>}
             {zoom !== 1 && (
-              <button type="button" class="image-node-zoom-reset" onClick={resetView} title="Reset zoom">
+              <button type="button" class="image-node-zoom-reset" onClick={resetView} aria-label="Reset zoom">
                 {zoomPct}% <IconRefresh size={14} />
               </button>
             )}

package/src/client/nodes/InlineFormatBar.tsx

@@ -1,4 +1,5 @@
 import type { RefObject } from 'preact';
+import { BarHint } from '../canvas/BarHint';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { modChord } from '../utils/platform';
 import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-commands';
@@ -136,15 +137,11 @@ export function InlineFormatBar({ hostRef, onChange }: { hostRef: RefObject<HTML
     >
       {ACTIONS.flatMap((a, i) => {
         const btn = (
-          <button
-            key={`btn-${i}`}
-            type="button"
-            class="md-inline-format-btn"
-            title={a.title}
-            onClick={() => handleClick(a)}
-          >
-            {a.icon}
-          </button>
+          <BarHint key={`btn-${i}`} label={a.title}>
+            <button type="button" class="md-inline-format-btn" aria-label={a.title} onClick={() => handleClick(a)}>
+              {a.icon}
+            </button>
+          </BarHint>
         );
         return a.dividerBefore ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn] : [btn];
       })}

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -1,6 +1,6 @@
 import { gfm } from '@joplin/turndown-plugin-gfm';
 import TurndownService from 'turndown';
-import { useCallback, useEffect, useRef } from 'preact/hooks';
+import { useCallback, useLayoutEffect, useRef } from 'preact/hooks';
 import { InlineFormatBar } from './InlineFormatBar';
 import { promptAndInsertLink } from './inline-editor-commands';
 import { sanitizeMarkdownHtml } from './markdown-sanitize';
@@ -15,6 +15,15 @@ function getTurndown(): TurndownService {
     bulletListMarker: '-',
   });
   td.use(gfm);
+  td.addRule('wikiLink', {
+    filter: (node) => node.nodeName === 'A' && node.hasAttribute('data-wiki-markdown'),
+    replacement: (_content, node) => {
+      const label = node.textContent ?? '';
+      return label === node.getAttribute('data-wiki-label')
+        ? node.getAttribute('data-wiki-markdown')!
+        : `[[${node.getAttribute('data-wiki-ref')}|${label}]]`;
+    },
+  });
   _turndown = td;
   return td;
 }
@@ -23,36 +32,61 @@ function getTurndown(): TurndownService {
  *
  *  Two persistence signals:
  *  - `onChange(md)` — fires on every input. Caller typically debounces.
- *  - `onSave(md)`  — fires on ⌘S and blur. Caller should persist immediately
+ *  - `onSave(md)`  — fires on ⌘S and blur. Caller should persist dirty drafts immediately
  *    and cancel any pending debounced save, since `md` is the authoritative
- *    latest content. Both receive freshly-serialized markdown so the caller
- *    never reads a stale state snapshot. */
+ *    latest content: the exact caller draft until input, serialized DOM after it. */
 export function InlineMarkdownEditor({
+  markdown,
   initialHtml,
   className,
   onChange,
   onSave,
 }: {
+  markdown: string;
   initialHtml: string;
   className?: string;
   onChange: (markdown: string) => void;
   onSave?: (markdown: string) => void;
 }) {
   const rootRef = useRef<HTMLDivElement>(null);
-  // Capture mount-time HTML — decouples us from prop identity churn under
-  // strict-mode double-invoke. Re-mount via `key` to swap documents.
-  const initialHtmlRef = useRef(initialHtml);
+  const initialized = useRef(false);
+  const edited = useRef(false);
+  const displayedMarkdown = useRef(markdown);
+  const previousMarkdown = useRef(markdown);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const el = rootRef.current;
     if (!el) return;
-    el.innerHTML = sanitizeMarkdownHtml(initialHtmlRef.current);
-    // GFM task checkboxes are live in the editor too: marked emits them
-    // `disabled`, which also swallows clicks in the expanded view.
-    for (const box of el.querySelectorAll('input[type="checkbox"][disabled]')) {
-      box.removeAttribute('disabled');
+    const html = sanitizeMarkdownHtml(initialHtml);
+    const sourceChanged = previousMarkdown.current !== markdown;
+    previousMarkdown.current = markdown;
+    if (!initialized.current || (sourceChanged && displayedMarkdown.current !== markdown)) {
+      initialized.current = true;
+      displayedMarkdown.current = markdown;
+      edited.current = false;
+      el.innerHTML = html;
+      // Marked emits disabled GFM boxes; they are editable here.
+      for (const box of el.querySelectorAll('input[type="checkbox"][disabled]')) box.removeAttribute('disabled');
+      return;
     }
-  }, []);
+    // Local input already owns this Markdown. Only a different accepted source
+    // replaces it; metadata-only refreshes must not move the selection.
+    const fresh = document.createElement('div');
+    fresh.innerHTML = html;
+    const links = new Map(
+      [...fresh.querySelectorAll('a[data-wiki-ref]')].map((link) => [link.getAttribute('data-wiki-ref'), link]),
+    );
+    for (const link of el.querySelectorAll('a[data-wiki-ref]')) {
+      const replacement = links.get(link.getAttribute('data-wiki-ref'));
+      if (!replacement) continue;
+      for (const attribute of ['data-wiki-board', 'data-wiki-card', 'data-wiki-missing']) {
+        const value = replacement.getAttribute(attribute);
+        if (value === null) link.removeAttribute(attribute);
+        else link.setAttribute(attribute, value);
+      }
+      link.classList.toggle('is-unresolved', replacement.classList.contains('is-unresolved'));
+    }
+  }, [initialHtml, markdown]);
 
   const serialize = useCallback((): string => {
     const el = rootRef.current;
@@ -61,7 +95,10 @@ export function InlineMarkdownEditor({
   }, []);
 
   const handleInput = useCallback(() => {
-    onChange(serialize());
+    edited.current = true;
+    const md = serialize();
+    displayedMarkdown.current = md;
+    onChange(md);
   }, [onChange, serialize]);
 
   const handleSave = useCallback(() => {
@@ -69,8 +106,10 @@ export function InlineMarkdownEditor({
     // focused) reads back an empty tree — saving that would WIPE the document.
     const el = rootRef.current;
     if (!el || !el.isConnected || el.innerHTML === '') return;
-    onSave?.(serialize());
-  }, [onSave, serialize]);
+    // Turndown cannot round-trip source spacing. Until this editor receives
+    // input, flush the caller's exact draft (including edits from Source mode).
+    onSave?.(edited.current ? serialize() : markdown);
+  }, [markdown, onSave, serialize]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {