@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/ImageEditor.tsx

@@ -13,7 +13,7 @@
  * `exportImageEditDoc` from `@bendyline/squisq/imageEdit`.
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { exportImageEditDoc, type ImageEditExportFormat } from '@bendyline/squisq/imageEdit';
 import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
@@ -24,6 +24,13 @@ import { PropertiesPanel } from './imageEditor/PropertiesPanel.js';
 import { Toolbar } from './imageEditor/Toolbar.js';
 import { useImageEditor } from './imageEditor/useImageEditor.js';
 import { useImageEditorTokens } from './imageEditor/useImageEditorTokens.js';
+import {
+  createShapeLayer,
+  createLinearShapeLayer,
+  isLinearShapeKind,
+} from './imageEditor/createShapeLayer.js';
+
+const ZOOM_STEPS = [0.0625, 0.083, 0.125, 0.167, 0.25, 0.333, 0.5, 0.667, 1, 1.5, 2, 3, 4, 8, 16];
 
 export interface ImageEditorProps {
   /**
@@ -107,6 +114,33 @@ export function ImageEditor(props: ImageEditorProps) {
   // re-lists without polling.
   const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
 
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const [zoom, setZoom] = useState(1.0);
+
+  const handleZoomIn = useCallback(() => {
+    setZoom((z) => ZOOM_STEPS.find((s) => s > z + 0.001) ?? 16);
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    setZoom((z) => [...ZOOM_STEPS].reverse().find((s) => s < z - 0.001) ?? 0.0625);
+  }, []);
+  const handleZoomSet = useCallback((z: number) => {
+    setZoom(Math.max(0.0625, Math.min(16, z)));
+  }, []);
+  const handleZoom1to1 = useCallback(() => setZoom(1), []);
+  const handleZoomFit = useCallback(() => {
+    if (!state || !surfaceRef.current) return;
+    const { clientWidth, clientHeight } = surfaceRef.current;
+    const PADDING = 32;
+    const fitZ = Math.min(
+      (clientWidth - PADDING) / state.doc.canvas.width,
+      (clientHeight - PADDING) / state.doc.canvas.height,
+    );
+    setZoom(Math.max(0.0625, Math.min(16, fitZ)));
+  }, [state]);
+
+  // ID of a newly-created text layer that should immediately enter inline editing.
+  const [requestEditLayerId, setRequestEditLayerId] = useState<string | null>(null);
+
   const handleExport = useCallback(
     async (format: ImageEditExportFormat) => {
       if (!state) return;
@@ -198,9 +232,11 @@ export function ImageEditor(props: ImageEditorProps) {
 
   const handleCreateTextAt = useCallback(
     (x: number, y: number) => {
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
       dispatch({
         type: 'add-layer',
         layer: {
+          id,
           type: 'text',
           name: 'Text',
           position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
@@ -211,35 +247,33 @@ export function ImageEditor(props: ImageEditorProps) {
         },
       });
       dispatch({ type: 'set-tool', tool: 'select' });
+      setRequestEditLayerId(id);
     },
     [dispatch],
   );
 
+  const shapeKind = state?.shapeKind ?? 'rectangle';
+  const shapeDragDraw = isLinearShapeKind(shapeKind);
+
   const handleCreateShapeAt = useCallback(
     (x: number, y: number) => {
-      dispatch({
-        type: 'add-layer',
-        layer: {
-          type: 'shape',
-          name: 'Rectangle',
-          position: {
-            x: Math.round(x - 60),
-            y: Math.round(y - 40),
-            width: 120,
-            height: 80,
-          },
-          content: {
-            shape: 'rect',
-            fill: '#3399ff',
-            stroke: '#1a4d80',
-            strokeWidth: 2,
-            borderRadius: 8,
-          },
-        },
-      });
+      const layer = createShapeLayer(shapeKind, x, y);
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
+      dispatch({ type: 'add-layer', layer: { ...layer, id } });
+      dispatch({ type: 'set-tool', tool: 'select' });
+      if (layer.type === 'text') {
+        setRequestEditLayerId(id);
+      }
+    },
+    [dispatch, shapeKind],
+  );
+
+  const handleCreateShapeFromPoints = useCallback(
+    (x1: number, y1: number, x2: number, y2: number) => {
+      dispatch({ type: 'add-layer', layer: createLinearShapeLayer(shapeKind, x1, y1, x2, y2) });
       dispatch({ type: 'set-tool', tool: 'select' });
     },
-    [dispatch],
+    [dispatch, shapeKind],
   );
 
   if (error) {
@@ -275,6 +309,7 @@ export function ImageEditor(props: ImageEditorProps) {
       <Toolbar
         doc={state.doc}
         tool={state.tool}
+        shapeKind={state.shapeKind}
         dispatch={dispatch}
         uploadAsset={uploadAsset}
         onExport={handleExport}
@@ -296,6 +331,12 @@ export function ImageEditor(props: ImageEditorProps) {
             />
           ) : null
         }
+        zoom={zoom}
+        onZoomIn={handleZoomIn}
+        onZoomOut={handleZoomOut}
+        onZoomSet={handleZoomSet}
+        onZoomFit={handleZoomFit}
+        onZoom1to1={handleZoom1to1}
       />
       <div className="squisq-image-editor-body">
         <div className="squisq-image-editor-center">
@@ -307,6 +348,12 @@ export function ImageEditor(props: ImageEditorProps) {
             dispatch={dispatch}
             onCreateTextAt={handleCreateTextAt}
             onCreateShapeAt={handleCreateShapeAt}
+            onCreateShapeFromPoints={handleCreateShapeFromPoints}
+            shapeDragDraw={shapeDragDraw}
+            zoom={zoom}
+            onSetZoom={handleZoomSet}
+            surfaceRef={surfaceRef}
+            requestEditLayerId={requestEditLayerId}
           />
         </div>
         <div className="squisq-image-editor-side">

package/src/OutlinePanel.tsx

@@ -25,10 +25,45 @@ export interface OutlinePanelProps {
 }
 
 export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
-  const { doc, markdownSource, setMarkdownSource } = useEditorContext();
+  const {
+    doc,
+    markdownSource,
+    setMarkdownSource,
+    layoutMode,
+    goToBlockByLine,
+    activeBlockStartLine,
+  } = useEditorContext();
   const paneRef = useRef<HTMLElement | null>(null);
   const { scrollToBlock } = useHeadingLayout(paneRef);
-  const activeBlockId = useActiveOutlineBlockId();
+  const cursorActiveId = useActiveOutlineBlockId();
+
+  // In block-at-a-time mode there's no live cursor across the whole document
+  // (only the active block is mounted), so the highlight follows the card:
+  // match the block whose heading begins on the active slice's source line.
+  const blockModeActiveId = useMemo(() => {
+    if (layoutMode !== 'block' || activeBlockStartLine == null || !doc) return null;
+    const match = flattenBlocks(doc.blocks).find(
+      (b) => b.sourceHeading?.position?.start.line === activeBlockStartLine,
+    );
+    return match?.id ?? null;
+  }, [layoutMode, activeBlockStartLine, doc]);
+  const activeBlockId = layoutMode === 'block' ? blockModeActiveId : cursorActiveId;
+
+  // Clicking a row jumps the card to that block in block mode, or scrolls the
+  // editor to it in document mode.
+  const handleSelect = useCallback(
+    (block: Block) => {
+      if (layoutMode === 'block') {
+        const line = block.sourceHeading?.position?.start.line;
+        if (typeof line === 'number') {
+          goToBlockByLine(line);
+          return;
+        }
+      }
+      scrollToBlock(block);
+    },
+    [layoutMode, goToBlockByLine, scrollToBlock],
+  );
 
   // Promote / demote the row's heading by rewriting just the `#` prefix
   // on the heading line. Falls through when the new depth would leave the
@@ -81,7 +116,7 @@ export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
               key={b.id}
               block={b}
               activeBlockId={activeBlockId}
-              onSelect={scrollToBlock}
+              onSelect={handleSelect}
               onChangeLevel={changeHeadingLevel}
             />
           ))}

package/src/PlainHtmlPreview.tsx

@@ -21,10 +21,25 @@ import type { CSSProperties } from 'react';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
 import type { MarkdownDocument, HtmlNode } from '@bendyline/squisq/markdown';
 import type { MediaProvider, Theme } from '@bendyline/squisq/schemas';
-import { markdownDocToPlainHtml } from '@bendyline/squisq-formats/html';
 import { normalizeMalformedAssetUrl } from './utils/normalizeMalformedAssetUrl';
 import { collectInlineFontAwesomeCss } from './utils/collectInlineFontAwesomeCss';
 
+// formats/html is ~50 KB and only needed for the plain-HTML preview pane.
+// Lazy-load on first render so it doesn't sit in the editor's main chunk.
+type RenderFn = typeof import('@bendyline/squisq-formats/html').markdownDocToPlainHtml;
+let cachedRender: RenderFn | null = null;
+let cachedRenderPromise: Promise<RenderFn> | null = null;
+function loadRenderFn(): Promise<RenderFn> {
+  if (cachedRender) return Promise.resolve(cachedRender);
+  if (!cachedRenderPromise) {
+    cachedRenderPromise = import('@bendyline/squisq-formats/html').then((m) => {
+      cachedRender = m.markdownDocToPlainHtml;
+      return cachedRender;
+    });
+  }
+  return cachedRenderPromise;
+}
+
 export interface PlainHtmlPreviewProps {
   /** Raw markdown source. */
   markdown: string;
@@ -129,9 +144,21 @@ export function PlainHtmlPreview({
   // fetch under `allow-same-origin`.
   const iconsCss = useMemo(() => collectInlineFontAwesomeCss(), []);
 
+  const [renderFn, setRenderFn] = useState<RenderFn | null>(() => cachedRender);
+  useEffect(() => {
+    if (renderFn) return;
+    let cancelled = false;
+    loadRenderFn().then((fn) => {
+      if (!cancelled) setRenderFn(() => fn);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [renderFn]);
+
   const html = useMemo(
-    () => markdownDocToPlainHtml(mdDoc, { title, images: mergedImages, theme, iconsCss }),
-    [mdDoc, title, mergedImages, theme, iconsCss],
+    () => (renderFn ? renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss }) : ''),
+    [renderFn, mdDoc, title, mergedImages, theme, iconsCss],
   );
 
   return (

package/src/PreviewControls.tsx

@@ -22,13 +22,19 @@ import {
 import type { ReactNode } from 'react';
 import type { DisplayMode, CaptionStyle } from '@bendyline/squisq-react';
 import type { ViewportPreset, ViewportConfig } from '@bendyline/squisq/schemas';
-import { VIEWPORT_PRESETS, getThemeSummaries, resolveTheme } from '@bendyline/squisq/schemas';
+import { VIEWPORT_PRESETS, getThemeSummaries } from '@bendyline/squisq/schemas';
 import type { Theme } from '@bendyline/squisq/schemas';
 import { ThemePicker } from './ThemePicker';
 import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import type { Doc } from '@bendyline/squisq/schemas';
 import { setFrontmatterValues } from '@bendyline/squisq/markdown';
+import {
+  resolveThemeForDoc,
+  writeCustomThemesToFrontmatter,
+  FRONTMATTER_CUSTOM_THEMES_KEY,
+} from '@bendyline/squisq/doc';
 import { useEditorContext } from './EditorContext';
+import { useCustomThemes, CustomThemeDialog, type ThemeSaveTarget } from './customThemes';
 
 // ── Context ──────────────────────────────────────────────────────
 
@@ -45,6 +51,23 @@ export interface PreviewSettings {
   setSelectedTransformStyle: (id: string | null) => void;
   activeCaptionStyle: CaptionStyle;
   setSelectedCaptionStyle: (style: CaptionStyle | null) => void;
+  /** User-authored themes (doc + browser library) for the picker's "Custom" group. */
+  customThemes: Theme[];
+  /** Open the custom-theme designer for a theme (or null to create a new one). */
+  openThemeDesigner: (theme: Theme | null) => void;
+  /** Remove a custom theme from the doc and the library. */
+  deleteCustomTheme: (id: string) => void;
+  /** Config for the docked theme designer, or null when closed. Rendered by
+   *  `<ThemeDesignerDock>` in the editor's content row. */
+  themeDesigner: ThemeDesignerConfig | null;
+}
+
+/** Everything `<ThemeDesignerDock>` needs to render the designer pane. */
+export interface ThemeDesignerConfig {
+  value: Theme | null;
+  onChange: (theme: Theme) => void;
+  onSave: (theme: Theme, target: ThemeSaveTarget) => void;
+  onClose: () => void;
 }
 
 const PreviewSettingsContext = createContext<PreviewSettings | null>(null);
@@ -98,12 +121,17 @@ function resolveDisplayMode(value: unknown): DisplayMode | null {
 
 const VALID_THEME_IDS = new Set(getThemeSummaries().map((s) => s.id));
 
-function resolveFrontmatterTheme(value: unknown): string | null {
+function resolveFrontmatterTheme(value: unknown, customIds?: Set<string>): string | null {
   if (typeof value !== 'string') return null;
-  const v = value.trim().toLowerCase();
+  const raw = value.trim();
+  const v = raw.toLowerCase();
   if (VALID_THEME_IDS.has(v)) return v;
   const normalized = v.replace(/\s+/g, '-');
   if (VALID_THEME_IDS.has(normalized)) return normalized;
+  // Custom theme ids are doc-defined slugs (lowercase from the customizer).
+  // Admit them so an inline theme selection isn't rejected back to 'standard'.
+  if (customIds?.has(raw)) return raw;
+  if (customIds?.has(v)) return v;
   return null;
 }
 
@@ -192,21 +220,43 @@ export function PreviewSettingsProvider({
   useEffect(() => setSelectedDisplayMode(null), [fmMode]);
   const activeDisplayMode = selectedDisplayMode ?? fmMode ?? 'video';
 
+  // Custom themes (doc + browser library). `useCustomThemes` returns null when
+  // no provider is mounted; the picker then just shows built-ins.
+  const custom = useCustomThemes();
+  const customThemes = useMemo(() => custom?.allThemes ?? [], [custom]);
+  const customIds = useMemo(() => new Set(customThemes.map((t) => t.id)), [customThemes]);
+
   // Theme — persisted to `squisq-theme` (legacy `theme` still read for compat)
   const fmTheme = useMemo(
     () =>
       resolveFrontmatterTheme(
         readFrontmatterKey(frontmatter, FM_KEYS.theme.canonical, FM_KEYS.theme.legacy),
+        customIds,
       ),
-    [frontmatter],
+    [frontmatter, customIds],
   );
   const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
   useEffect(() => setSelectedThemeId(null), [fmTheme]);
   const resolvedThemeId = selectedThemeId ?? fmTheme ?? 'standard';
-  const resolvedTheme = useMemo(() => resolveTheme(resolvedThemeId), [resolvedThemeId]);
-  // themeOverride wins over both dropdown selection and frontmatter
-  const activeThemeId = themeOverride?.id ?? resolvedThemeId;
-  const activeTheme = themeOverride ?? resolvedTheme;
+  // Doc-scoped resolution: an inline custom theme id resolves from the doc's
+  // own `customThemes` before built-ins — no global registration needed.
+  const resolvedTheme = useMemo(
+    () => resolveThemeForDoc(doc, resolvedThemeId),
+    [doc, resolvedThemeId],
+  );
+
+  // In-progress theme from the designer dialog; previews live without mutating
+  // the doc until the user saves.
+  const [previewTheme, setPreviewTheme] = useState<Theme | null>(null);
+  const [designer, setDesigner] = useState<{ open: boolean; editing: Theme | null }>({
+    open: false,
+    editing: null,
+  });
+
+  // Precedence: an active designer preview > external themeOverride > the
+  // dropdown/frontmatter selection.
+  const activeThemeId = previewTheme?.id ?? themeOverride?.id ?? resolvedThemeId;
+  const activeTheme = previewTheme ?? themeOverride ?? resolvedTheme;
   const handleSetThemeId = useCallback(
     (id: string | null) => {
       setSelectedThemeId(id);
@@ -215,6 +265,45 @@ export function PreviewSettingsProvider({
     [persistFrontmatter],
   );
 
+  const openThemeDesigner = useCallback((theme: Theme | null) => {
+    setDesigner({ open: true, editing: theme });
+    setPreviewTheme(theme);
+  }, []);
+  const closeThemeDesigner = useCallback(() => {
+    setDesigner({ open: false, editing: null });
+    setPreviewTheme(null);
+  }, []);
+  const handleDesignerSave = useCallback(
+    (theme: Theme, target: ThemeSaveTarget) => {
+      if (target === 'library') {
+        custom?.upsertLibraryTheme(theme);
+      } else {
+        // Write the theme payload AND select it in a SINGLE frontmatter update.
+        // Two separate `setMarkdownSource` calls (upsertDocTheme + a squisq-theme
+        // write) would each derive from the same stale source, so the second
+        // would clobber the first and drop the custom-themes payload.
+        const docThemes = custom?.docThemes ?? [];
+        const idx = docThemes.findIndex((t) => t.id === theme.id);
+        const nextThemes =
+          idx >= 0 ? docThemes.map((t, i) => (i === idx ? theme : t)) : [...docThemes, theme];
+        persistFrontmatter({
+          [FRONTMATTER_CUSTOM_THEMES_KEY]: writeCustomThemesToFrontmatter(nextThemes) ?? null,
+          [FM_KEYS.theme.canonical]: theme.id,
+        });
+        setSelectedThemeId(theme.id);
+      }
+      closeThemeDesigner();
+    },
+    [custom, persistFrontmatter, closeThemeDesigner],
+  );
+  const deleteCustomTheme = useCallback(
+    (id: string) => {
+      custom?.removeDocTheme(id);
+      custom?.removeLibraryTheme(id);
+    },
+    [custom],
+  );
+
   // Transform — persisted to `squisq-transform` (legacy `transform-style` read for compat)
   const fmTransform = useMemo(
     () =>
@@ -256,6 +345,21 @@ export function PreviewSettingsProvider({
     [persistFrontmatter],
   );
 
+  // Config for the docked designer (rendered by `<ThemeDesignerDock>` in the
+  // editor content row). Null when closed. setPreviewTheme is a stable setter.
+  const themeDesigner = useMemo<ThemeDesignerConfig | null>(
+    () =>
+      designer.open
+        ? {
+            value: designer.editing,
+            onChange: setPreviewTheme,
+            onSave: handleDesignerSave,
+            onClose: closeThemeDesigner,
+          }
+        : null,
+    [designer.open, designer.editing, handleDesignerSave, closeThemeDesigner],
+  );
+
   const value = useMemo<PreviewSettings>(
     () => ({
       activePreset,
@@ -270,6 +374,10 @@ export function PreviewSettingsProvider({
       setSelectedTransformStyle: handleSetTransformStyle,
       activeCaptionStyle,
       setSelectedCaptionStyle: handleSetCaptionStyle,
+      customThemes,
+      openThemeDesigner,
+      deleteCustomTheme,
+      themeDesigner,
     }),
     [
       activePreset,
@@ -282,6 +390,10 @@ export function PreviewSettingsProvider({
       handleSetThemeId,
       handleSetTransformStyle,
       handleSetCaptionStyle,
+      customThemes,
+      openThemeDesigner,
+      deleteCustomTheme,
+      themeDesigner,
     ],
   );
 
@@ -290,6 +402,25 @@ export function PreviewSettingsProvider({
   );
 }
 
+/**
+ * ThemeDesignerDock — renders the docked custom-theme designer pane when open.
+ * Placed as a flex sibling of the preview in `EditorShell`'s content row so the
+ * preview reflows narrower beside it. Renders nothing when the designer is
+ * closed. Must be mounted inside a `PreviewSettingsProvider`.
+ */
+export function ThemeDesignerDock() {
+  const { themeDesigner } = usePreviewSettings();
+  if (!themeDesigner) return null;
+  return (
+    <CustomThemeDialog
+      value={themeDesigner.value}
+      onChange={themeDesigner.onChange}
+      onSave={themeDesigner.onSave}
+      onClose={themeDesigner.onClose}
+    />
+  );
+}
+
 // ── Dropdown options ─────────────────────────────────────────────
 
 const VIEWPORT_OPTIONS: { key: ViewportPreset; label: string }[] = [
@@ -372,6 +503,19 @@ export function PreviewToolbarControls() {
     return () => document.removeEventListener('mousedown', handler);
   }, [popoverOpen]);
 
+  // "Edit theme" pencil next to the dropdown. A custom theme opens directly in
+  // the designer; a built-in seeds a NEW "Modified <name>" custom theme based
+  // on it — Cancel leaves the current theme untouched, Save engages the custom.
+  const handleEditCurrentTheme = useCallback(() => {
+    const existing = s.customThemes.find((t) => t.id === s.activeThemeId);
+    if (existing) {
+      s.openThemeDesigner(existing);
+    } else {
+      const base = s.activeTheme;
+      s.openThemeDesigner({ ...base, name: `Modified ${base.name}`, basedOn: base.id });
+    }
+  }, [s]);
+
   const controls = (
     <>
       <PreviewSelect
@@ -396,7 +540,35 @@ export function PreviewToolbarControls() {
           value={s.activeThemeId}
           onChange={(v) => s.setSelectedThemeId(v)}
           ariaLabel="Theme"
+          customThemes={s.customThemes}
+          onCreateCustom={() => s.openThemeDesigner(null)}
+          onEditCustom={(id) =>
+            s.openThemeDesigner(s.customThemes.find((t) => t.id === id) ?? null)
+          }
+          onDeleteCustom={(id) => s.deleteCustomTheme(id)}
         />
+        <button
+          type="button"
+          className="squisq-theme-edit-btn"
+          onClick={handleEditCurrentTheme}
+          aria-label="Edit theme"
+          title="Edit this theme"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M2.5 13.5l1-3 7-7 2 2-7 7-3 1z" />
+            <path d="M9.5 4.5l2 2" />
+          </svg>
+        </button>
       </div>
       <PreviewSelect
         label="Transform"