app-core: add excalidraw drawing embeds

packages/app-core/src/App.tsx

@@ -170,6 +170,11 @@ const TemplatePalette = lazy(async () => {
   return { default: module.TemplatePalette }
 })
 
+const EmbedDrawingPalette = lazy(async () => {
+  const module = await import('./components/EmbedDrawingPalette')
+  return { default: module.EmbedDrawingPalette }
+})
+
 const SettingsModal = lazy(async () => {
   const module = await import('./components/SettingsModal')
   return { default: module.SettingsModal }
@@ -256,6 +261,8 @@ function App(): JSX.Element {
   const setOutlinePaletteOpen = useStore((s) => s.setOutlinePaletteOpen)
   const templatePaletteOpen = useStore((s) => s.templatePaletteOpen)
   const setTemplatePaletteOpen = useStore((s) => s.setTemplatePaletteOpen)
+  const embedDrawingPaletteOpen = useStore((s) => s.embedDrawingPaletteOpen)
+  const setEmbedDrawingPaletteOpen = useStore((s) => s.setEmbedDrawingPaletteOpen)
   const sidebarOpen = useStore((s) => s.sidebarOpen)
   const noteListOpen = useStore((s) => s.noteListOpen)
   const zenMode = useStore((s) => s.zenMode)
@@ -685,6 +692,11 @@ function App(): JSX.Element {
         focusEditorNormalMode()
         return
       }
+      if (e.key === 'Escape' && state.embedDrawingPaletteOpen) {
+        setEmbedDrawingPaletteOpen(false)
+        focusEditorNormalMode()
+        return
+      }
       if (e.key === 'Escape' && state.outlinePaletteOpen) {
         setOutlinePaletteOpen(false)
         focusEditorNormalMode()
@@ -770,6 +782,7 @@ function App(): JSX.Element {
         state.commandPaletteOpen ||
         state.bufferPaletteOpen ||
         state.templatePaletteOpen ||
+        state.embedDrawingPaletteOpen ||
         state.outlinePaletteOpen ||
         document.querySelector('[data-ctx-menu]') ||
         document.querySelector('[data-prompt-modal]') ||
@@ -803,6 +816,7 @@ function App(): JSX.Element {
     setCommandPaletteOpen,
     setOutlinePaletteOpen,
     setTemplatePaletteOpen,
+    setEmbedDrawingPaletteOpen,
     setSearchOpen,
     setVaultTextSearchOpen
   ])
@@ -925,6 +939,11 @@ function App(): JSX.Element {
           <TemplatePalette />
         </Suspense>
       )}
+      {embedDrawingPaletteOpen && (
+        <Suspense fallback={null}>
+          <EmbedDrawingPalette />
+        </Suspense>
+      )}
       {settingsOpen && (
         <Suspense fallback={null}>
           <SettingsModal />

packages/app-core/src/components/CommandPalette.tsx

@@ -265,7 +265,14 @@ export function CommandPalette(): JSX.Element {
       // closePalette's focus restore; the retry wins that race. Skipped when the
       // command opened the Settings modal so we don't pull focus behind it.
       const s = useStore.getState()
-      if (s.focusedPanel === 'editor' && !s.settingsOpen) focusEditorNormalMode()
+      if (
+        s.focusedPanel === 'editor' &&
+        !s.settingsOpen &&
+        !s.embedDrawingPaletteOpen &&
+        !s.templatePaletteOpen &&
+        !s.bufferPaletteOpen
+      )
+        focusEditorNormalMode()
     } catch (err) {
       console.error('command failed', cmd.id, err)
     }

packages/app-core/src/components/EmbedDrawingPalette.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useStore } from '../store'
+import type { NoteMeta } from '@shared/ipc'
+import { isExcalidrawPath, isObsidianExcalidrawPath } from '@shared/excalidraw'
+import { rankItems } from '../lib/fuzzy-score'
+import { isPaletteNextKey, isPalettePreviousKey } from '../lib/palette-nav'
+import { isImeComposing } from '../lib/ime'
+import { focusEditorNormalMode } from '../lib/editor-focus'
+import { Modal } from './ui/Modal'
+
+/**
+ * "Embed existing drawing" picker. Lists every Excalidraw drawing in the vault
+ * (native `.excalidraw` plus Obsidian `.excalidraw.md`) and inserts an
+ * `![[path]]` embed at the cursor in the active note when chosen.
+ */
+export function EmbedDrawingPalette(): JSX.Element {
+  const notes = useStore((s) => s.notes)
+  const setOpen = useStore((s) => s.setEmbedDrawingPaletteOpen)
+  const insertEmbedAtCursor = useStore((s) => s.insertEmbedAtCursor)
+  const [query, setQuery] = useState('')
+  const [active, setActive] = useState(0)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const listRef = useRef<HTMLDivElement | null>(null)
+
+  const drawings = useMemo(
+    () => notes.filter((n) => isExcalidrawPath(n.path) || isObsidianExcalidrawPath(n.path)),
+    [notes]
+  )
+
+  const results = useMemo(
+    () =>
+      rankItems(drawings, query, [
+        { get: (n) => n.title, weight: 1 },
+        { get: (n) => n.path, weight: 0.7 }
+      ]).slice(0, 50),
+    [drawings, query]
+  )
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  useEffect(() => setActive(0), [query])
+
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-embed-idx="${active}"]`)
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [active])
+
+  const choose = (note: NoteMeta): void => {
+    setOpen(false)
+    insertEmbedAtCursor(`![[${note.path}]]\n`)
+    focusEditorNormalMode()
+  }
+
+  const close = (): void => {
+    setOpen(false)
+    focusEditorNormalMode()
+  }
+
+  return (
+    <Modal size="md" layer="palette" onClose={close} closeOnEsc={false}>
+      <div className="border-b border-paper-300/70 px-4 py-3">
+        <input
+          ref={inputRef}
+          value={query}
+          placeholder="Embed existing drawing…"
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (isImeComposing(e)) return
+            if (isPaletteNextKey(e)) {
+              e.preventDefault()
+              e.stopPropagation()
+              setActive((a) => Math.min(results.length - 1, a + 1))
+            } else if (isPalettePreviousKey(e)) {
+              e.preventDefault()
+              e.stopPropagation()
+              setActive((a) => Math.max(0, a - 1))
+            } else if (e.key === 'Enter') {
+              e.preventDefault()
+              const note = results[active]
+              if (note) choose(note)
+            } else if (e.key === 'Escape') {
+              e.preventDefault()
+              e.stopPropagation()
+              close()
+            }
+          }}
+          className="w-full bg-transparent text-base text-ink-900 outline-none placeholder:text-ink-400"
+        />
+      </div>
+      <div ref={listRef} className="max-h-[50vh] overflow-x-hidden overflow-y-auto py-1">
+        {results.length === 0 ? (
+          <div className="px-4 py-6 text-center text-sm text-ink-400">
+            {drawings.length === 0 ? 'No drawings in this vault yet.' : 'No matches.'}
+          </div>
+        ) : (
+          results.map((n, i) => (
+            <button
+              key={n.path}
+              data-embed-idx={i}
+              onClick={() => choose(n)}
+              onMouseMove={() => setActive(i)}
+              className={[
+                'flex w-full min-w-0 items-center gap-3 px-4 py-2 text-left',
+                i === active ? 'bg-paper-200' : 'hover:bg-paper-200/70'
+              ].join(' ')}
+            >
+              <span className="min-w-0 flex-1 truncate text-sm font-medium text-ink-900">
+                {n.title}
+              </span>
+              <span className="shrink-0 truncate text-xs text-ink-400">{n.folder}</span>
+            </button>
+          ))
+        )}
+      </div>
+      <div className="flex items-center justify-end gap-4 border-t border-paper-300/70 bg-paper-100 px-4 py-2 text-xs text-ink-500">
+        <span>
+          <kbd className="rounded bg-paper-200 px-1">↑↓</kbd> move
+        </span>
+        <span>
+          <kbd className="rounded bg-paper-200 px-1">↵</kbd> embed
+        </span>
+        <span>
+          <kbd className="rounded bg-paper-200 px-1">esc</kbd> close
+        </span>
+      </div>
+    </Modal>
+  )
+}

packages/app-core/src/components/ExcalidrawPreview.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { getExcalidrawPreview } from '../lib/excalidraw-preview'
+import { useStore } from '../store'
+
+export interface ExcalidrawPreviewProps {
+  path: string
+  width?: number
+  height?: number
+  className?: string
+  onClick?: () => void
+}
+
+/**
+ * Renders an Excalidraw drawing as a PNG image (exported @2x). Used both by
+ * the editor live-preview widget and the preview-pane hydration to show a
+ * drawing as an image-like embed inside a note. Re-renders when the vault
+ * watcher bumps `excalidrawPreviewVersion`.
+ */
+export function ExcalidrawPreview({
+  path,
+  width,
+  height,
+  className,
+  onClick
+}: ExcalidrawPreviewProps): JSX.Element {
+  const [src, setSrc] = useState<string | null>(null)
+  const version = useStore((s) => s.excalidrawPreviewVersion)
+
+  useEffect(() => {
+    let cancelled = false
+    setSrc(null)
+    void getExcalidrawPreview(path).then((url) => {
+      if (!cancelled) setSrc(url)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [path, version])
+
+  const style: CSSProperties = {}
+  if (width) style.maxWidth = `${width}px`
+  if (height) style.maxHeight = `${height}px`
+
+  if (!src) {
+    return (
+      <div
+        className={`excalidraw-embed-loading${className ? ' ' + className : ''}`}
+        style={style}
+        aria-label="Loading drawing preview"
+      />
+    )
+  }
+
+  return (
+    <img
+      src={src}
+      className={`excalidraw-embed-image${className ? ' ' + className : ''}`}
+      style={style}
+      alt=""
+      loading="lazy"
+      draggable={false}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick()
+              }
+            }
+          : undefined
+      }
+    />
+  )
+}

packages/app-core/src/components/LazyExcalidrawPreview.tsx

@@ -0,0 +1,31 @@
+import { lazy, Suspense } from 'react'
+import type { ExcalidrawPreviewProps } from './ExcalidrawPreview'
+
+const ExcalidrawPreviewImpl = lazy(() =>
+  import('./ExcalidrawPreview').then((mod) => ({ default: mod.ExcalidrawPreview }))
+)
+
+/**
+ * Lazy boundary for the Excalidraw preview image. Keeps the Excalidraw export
+ * bundle (pulled in dynamically by excalidraw-preview.ts) out of the main
+ * editor/preview chunks until a drawing embed is actually shown.
+ */
+export function LazyExcalidrawPreview({
+  path,
+  width,
+  height,
+  className,
+  onClick
+}: ExcalidrawPreviewProps): JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <ExcalidrawPreviewImpl
+        path={path}
+        width={width}
+        height={height}
+        className={className}
+        onClick={onClick}
+      />
+    </Suspense>
+  )
+}