@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/buildPreviewDoc.ts

@@ -11,19 +11,40 @@
  * 4. Synthesize a dummy audio segment for timer-based playback
  */
 
-import { flattenBlocks, hasTemplate } from '@bendyline/squisq/doc';
-import { extractPlainText } from '@bendyline/squisq/markdown';
+import { flattenRenderableBlocks, hasTemplate } from '@bendyline/squisq/doc';
+import { extractPlainText, KNOWN_BLOCK_META_KEYS } from '@bendyline/squisq/markdown';
 import { getChildren } from '@bendyline/squisq/markdown';
+import { iconMarker } from '@bendyline/squisq/icon-marker';
+import type { IconFamily } from '@bendyline/squisq/icons';
 import type { Block, Doc } from '@bendyline/squisq/schemas';
 import type { MarkdownBlockNode, MarkdownList, MarkdownNode } from '@bendyline/squisq/markdown';
 
 // ── Helpers ────────────────────────────────────────────────────────
 
+/**
+ * Like `extractPlainText`, but preserves inline icons as encoded markers so
+ * template text can render them as glyphs downstream (see `iconMarker` and
+ * `TextLayer`). Mirrors `extractPlainText`'s value/child/list handling; the
+ * only addition is the `inlineIcon` interception.
+ */
+function extractRichText(node: MarkdownNode): string {
+  if (node.type === 'inlineIcon') {
+    const icon = node as unknown as { family: IconFamily; name: string };
+    return iconMarker(icon.family, icon.name);
+  }
+  if ('value' in node && typeof (node as { value?: unknown }).value === 'string') {
+    return (node as { value: string }).value;
+  }
+  const children = getChildren(node);
+  const separator = node.type === 'list' || node.type === 'listItem' ? '\n' : '';
+  return children.map(extractRichText).join(separator);
+}
+
 function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
   if (!contents || contents.length === 0) return '';
   const parts: string[] = [];
   for (const node of contents) {
-    parts.push(extractPlainText(node));
+    parts.push(extractRichText(node));
   }
   return parts.join('\n').trim();
 }
@@ -174,13 +195,23 @@ function getTemplateDefaults(
   }
 }
 
-function blockToSlide(block: Block, index: number): Record<string, unknown> {
+function blockToSlide(
+  block: Block,
+  index: number,
+  knownTemplates?: ReadonlySet<string>,
+): Record<string, unknown> {
   const headingText = block.sourceHeading
     ? extractPlainText(block.sourceHeading)
     : block.title || block.id || `Slide ${index + 1}`;
 
   const requestedTemplate = block.template || 'sectionHeader';
-  const template = hasTemplate(requestedTemplate) ? requestedTemplate : 'sectionHeader';
+  // A template is recognized if it's a built-in OR a user-defined
+  // template carried in the doc's `customTemplates` set. Without this,
+  // an annotated `{[hero]}` heading would silently fall back to
+  // `sectionHeader` because `hasTemplate` only knows built-ins.
+  const isCustomTemplate = knownTemplates?.has(requestedTemplate) ?? false;
+  const recognized = hasTemplate(requestedTemplate) || isCustomTemplate;
+  const template = recognized ? requestedTemplate : 'sectionHeader';
   const defaults = getTemplateDefaults(template, headingText, block);
 
   const {
@@ -196,6 +227,7 @@ function blockToSlide(block: Block, index: number): Record<string, unknown> {
     contents: _co,
     sourceHeading: _sh,
     templateOverrides: _to,
+    templateData: _td,
     ...extraFields
   } = block as unknown as Record<string, unknown>;
 
@@ -204,14 +236,59 @@ function blockToSlide(block: Block, index: number): Record<string, unknown> {
     template,
     duration: block.duration,
     audioSegment: 0,
-    transition: index > 0 ? { type: 'fade', duration: 0.5 } : undefined,
+    // Respect the block's authored transition (set via the toolbar / on-canvas
+    // properties palette → `{…}` block attrs). Only fall back to a default fade
+    // for blocks past the first when the author hasn't chosen one; the first
+    // block has no previous slide to transition in from.
+    transition: block.transition ?? (index > 0 ? { type: 'fade', duration: 0.5 } : undefined),
     title: headingText,
+    // Custom templates need access to the source block's body content
+    // + children so their token resolver (`{content}`, `{children}`,
+    // `{image:N}`) substitutes against the user's prose, not just the
+    // heading. Built-in templates don't read these fields and risk
+    // surprising overlap with their typed inputs, so we only attach
+    // them when the slide actually maps to a custom template.
+    ...(isCustomTemplate && block.contents ? { contents: block.contents } : {}),
+    ...(isCustomTemplate && block.children ? { children: block.children } : {}),
     ...defaults,
     ...extraFields,
-    ...block.templateOverrides,
+    // Structured body data (```json data fences, GFM tables for dataTable)
+    // carries typed values; `{[…]}` string overrides win last so an explicit
+    // annotation param can still pin any field.
+    //
+    // Block-meta keys (transition, startTime, duration, …) are the exception:
+    // they were already coerced to typed block fields above (e.g.
+    // `block.transition` → `{ type, duration, direction }`). Their raw string
+    // form also rides along in `templateData`/`templateOverrides` because the
+    // author wrote them inside `{[…]}`; left un-stripped, that string would
+    // spread back over the typed value here and clobber it — turning
+    // `transition=vortex` into the string `"vortex"`, which the player can't
+    // animate. Omit them from the content spreads so the typed fields win.
+    ...omitBlockMeta(block.templateData),
+    ...omitBlockMeta(block.templateOverrides),
   };
 }
 
+/** Keys coerced to typed block fields; must not be re-applied as raw strings. */
+const BLOCK_META_KEYS: ReadonlySet<string> = new Set(Object.keys(KNOWN_BLOCK_META_KEYS));
+
+/** Copy of a template-param record with block-meta keys removed. */
+function omitBlockMeta(
+  data: Record<string, unknown> | undefined,
+): Record<string, unknown> | undefined {
+  if (!data) return data;
+  let hit = false;
+  const out: Record<string, unknown> = {};
+  for (const key of Object.keys(data)) {
+    if (BLOCK_META_KEYS.has(key)) {
+      hit = true;
+      continue;
+    }
+    out[key] = data[key];
+  }
+  return hit ? out : data;
+}
+
 const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
   'zoomIn',
   'zoomOut',
@@ -229,9 +306,18 @@ const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
  * audio segment.
  */
 export function buildPreviewDoc(doc: Doc): Doc {
-  const flat = flattenBlocks(doc.blocks);
+  // Container templates (`diagram`, `drawing`) render their children as
+  // nodes/shapes, so those children must not also become preview slides.
+  const flat = flattenRenderableBlocks(doc.blocks);
   const allImages = collectAllDocImages(doc.blocks);
   const usedImageSrcs = new Set<string>();
+  // Names of user-defined templates carried by the doc — passed into
+  // `blockToSlide` so heading annotations like `{[hero]}` aren't
+  // silently downgraded to `sectionHeader` when the template doesn't
+  // exist in the built-in registry.
+  const knownTemplates = doc.customTemplates
+    ? new Set(doc.customTemplates.map((d) => d.name))
+    : undefined;
 
   const slides: Record<string, unknown>[] = [];
   let motionIndex = 0;
@@ -239,7 +325,7 @@ export function buildPreviewDoc(doc: Doc): Doc {
   for (let i = 0; i < flat.length; i++) {
     const block = flat[i];
     const blockImages = extractBlockImages(block.contents);
-    const slide = blockToSlide(block, i);
+    const slide = blockToSlide(block, i, knownTemplates);
 
     if (blockImages.length > 0 && slide.template === 'sectionHeader') {
       const img = blockImages[0];
@@ -305,5 +391,8 @@ export function buildPreviewDoc(doc: Doc): Doc {
     ...(doc.captions ? { captions: doc.captions } : {}),
     ...(doc.startBlock ? { startBlock: doc.startBlock } : {}),
     ...(doc.themeId ? { themeId: doc.themeId } : {}),
+    // Custom templates ride along so `useDocPlayback` can merge them
+    // onto the registry before expanding slides.
+    ...(doc.customTemplates ? { customTemplates: doc.customTemplates } : {}),
   };
 }

package/src/customTemplates/AddBin.tsx

@@ -0,0 +1,126 @@
+/**
+ * AddBin — the template designer's "things you can add" sidebar.
+ *
+ * Three sections, all feeding the same canvas:
+ *   - Placeholders: dynamic tokens ({title}, {content}, …) substituted at
+ *     render time. See {@link TOKEN_DEFS}.
+ *   - Shapes: Squisq's standard shape library. See {@link SHAPE_DEFS}.
+ *   - Media: drop an image to pin as a static, full-bleed background.
+ *
+ * Tokens and shapes can be placed two ways — drag onto the canvas, or
+ * click to arm the matching tool and then click the canvas. The drag
+ * carries the entry id under {@link TOKEN_DRAG_MIME} / {@link SHAPE_DRAG_MIME};
+ * the TemplateDesigner's drop handler reads it (see `buildTokenLayer` /
+ * `buildShapeLayer`). Media is upload-backed and handled by the designer.
+ */
+
+import { useRef } from 'react';
+import { TOKEN_DEFS, TOKEN_DRAG_MIME } from './tokenDefs';
+import { SHAPE_DEFS, SHAPE_DRAG_MIME } from './shapeDefs';
+import { ShapeGlyph } from './ShapeGlyph';
+
+interface AddBinProps {
+  /** Currently active tool id — the matching button is highlighted. */
+  activeToolId: string;
+  /** Switch the Scene's active tool (a token or shape place tool). */
+  onActivate: (toolId: string) => void;
+  /** Whether media can be added (a MediaProvider is wired up). */
+  canAddMedia: boolean;
+  /** Add picked image files as static background layer(s). */
+  onAddMediaFiles: (files: File[]) => void;
+}
+
+export function AddBin({ activeToolId, onActivate, canAddMedia, onAddMediaFiles }: AddBinProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <aside className="squisq-template-designer-palette" aria-label="Add to layout">
+      <h3 className="squisq-template-designer-palette-title">Add</h3>
+
+      {/* Placeholders — dynamic tokens substituted at render time. */}
+      <div className="squisq-template-designer-palette-section">
+        <div className="squisq-template-designer-palette-section-title">Placeholders</div>
+        <div className="squisq-template-designer-palette-list">
+          {TOKEN_DEFS.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              draggable
+              className={`squisq-template-designer-palette-item${
+                activeToolId === t.id ? ' squisq-template-designer-palette-item--active' : ''
+              }`}
+              onDragStart={(e) => {
+                e.dataTransfer.setData(TOKEN_DRAG_MIME, t.id);
+                // Some browsers require text/plain for the drag to start.
+                e.dataTransfer.setData('text/plain', t.token);
+                e.dataTransfer.effectAllowed = 'copy';
+              }}
+              onClick={() => onActivate(t.id)}
+              title={t.desc}
+            >
+              <span className="squisq-template-designer-palette-item-preview">{t.token}</span>
+              <span className="squisq-template-designer-palette-item-label">{t.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Shapes — the standard shape library. */}
+      <div className="squisq-template-designer-palette-section">
+        <div className="squisq-template-designer-palette-section-title">Shapes</div>
+        <div className="squisq-template-designer-palette-shapes">
+          {SHAPE_DEFS.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              draggable
+              className={`squisq-template-designer-shape-item${
+                activeToolId === s.id ? ' squisq-template-designer-shape-item--active' : ''
+              }`}
+              onDragStart={(e) => {
+                e.dataTransfer.setData(SHAPE_DRAG_MIME, s.id);
+                e.dataTransfer.setData('text/plain', s.label);
+                e.dataTransfer.effectAllowed = 'copy';
+              }}
+              onClick={() => onActivate(s.id)}
+              title={s.label}
+              aria-label={s.label}
+            >
+              <ShapeGlyph kind={s.kind} rounded={s.rounded} />
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Media — drop an image to pin a static background. */}
+      <div className="squisq-template-designer-palette-section">
+        <div className="squisq-template-designer-palette-section-title">Media</div>
+        <p className="squisq-template-designer-palette-hint">
+          {canAddMedia
+            ? 'Drop an image on the canvas to add a full-bleed background.'
+            : 'Connect media storage to add image backgrounds.'}
+        </p>
+        <button
+          type="button"
+          className="squisq-template-designer-palette-media-add"
+          disabled={!canAddMedia}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          Add image…
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          style={{ display: 'none' }}
+          onChange={(e) => {
+            const files = Array.from(e.target.files ?? []);
+            if (files.length) onAddMediaFiles(files);
+            e.target.value = ''; // allow re-selecting the same file
+          }}
+        />
+      </div>
+    </aside>
+  );
+}

package/src/customTemplates/CustomLayoutManager.tsx

@@ -0,0 +1,233 @@
+/**
+ * CustomLayoutManager — a near-full-window modal for managing custom
+ * layouts (templates). The left rail lists every layout available to the
+ * document — those inlined in the doc and those saved to the browser
+ * library — plus a "New layout" button. The right pane embeds the
+ * existing {@link TemplateDesigner} (in `embedded` mode) so the selected
+ * layout can be authored in place.
+ *
+ * The manager seeds its own {@link CustomTemplateProvider} from the
+ * active doc (via {@link useDocCustomTemplates}) so it works whether or
+ * not the host already mounted a provider — the toolbar that opens it
+ * sits outside the WYSIWYG editor's provider.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { CustomTemplateDefinition, MediaProvider } from '@bendyline/squisq/schemas';
+import {
+  CustomTemplateProvider,
+  useCustomTemplates,
+  type CustomTemplateContextValue,
+} from './CustomTemplateContext';
+import { TemplateDesigner, type DesignerSaveTarget } from './TemplateDesigner';
+import { TemplateThumbnail } from './thumbnail';
+import { useDocCustomTemplates } from './useDocCustomTemplates';
+import { useEditorContext } from '../EditorContext';
+
+export interface CustomLayoutManagerProps {
+  /** Close the manager. */
+  onClose: () => void;
+}
+
+/**
+ * A picked sidebar entry: `'new'` for the blank-slate designer, or an
+ * existing template tagged by which pool it came from.
+ *
+ * `def` carries the definition directly for the just-saved case: the doc
+ * re-parses on a 150ms debounce (see EditorContext), so immediately after
+ * a save the doc-template list is briefly stale. Holding the saved
+ * definition here lets the designer re-seed from it without waiting for —
+ * or racing — that re-parse. User-initiated selections omit `def` and
+ * resolve from the (by-then fresh) list.
+ */
+type Selection =
+  | 'new'
+  | { source: 'doc' | 'library'; name: string; def?: CustomTemplateDefinition };
+
+export function CustomLayoutManager({ onClose }: CustomLayoutManagerProps) {
+  const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
+  const { mediaProvider } = useEditorContext();
+
+  // Close on Escape, mirroring the other editor dialogs.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="squisq-layout-manager-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Custom layouts"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="squisq-layout-manager-panel">
+        <header className="squisq-layout-manager-header">
+          <h2 className="squisq-layout-manager-title">Custom layouts</h2>
+          <button
+            type="button"
+            className="squisq-template-designer-close"
+            onClick={onClose}
+            aria-label="Close custom layouts"
+            title="Close (Esc)"
+          >
+            ×
+          </button>
+        </header>
+        <CustomTemplateProvider
+          docTemplates={docTemplates}
+          onDocTemplatesChange={onDocTemplatesChange}
+        >
+          <ManagerBody mediaProvider={mediaProvider} />
+        </CustomTemplateProvider>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/** Inner body — runs under the provider so it can read/write both pools. */
+function ManagerBody({ mediaProvider }: { mediaProvider: MediaProvider | null }) {
+  const ctx = useCustomTemplates();
+  // The provider is mounted just above by CustomLayoutManager, so this is
+  // never null in practice; narrow defensively rather than asserting.
+  if (!ctx) return null;
+  return <ManagerContent ctx={ctx} mediaProvider={mediaProvider} />;
+}
+
+function ManagerContent({
+  ctx,
+  mediaProvider,
+}: {
+  ctx: CustomTemplateContextValue;
+  mediaProvider: MediaProvider | null;
+}) {
+  const { docTemplates, libraryTemplates, upsertDocTemplate, upsertLibraryTemplate } = ctx;
+
+  // The doc and library pools are listed in full and kept separate — a
+  // layout can legitimately exist in both (the doc's inlined copy and a
+  // reusable library copy), so saving a doc layout "to library" produces
+  // a visible second entry rather than silently merging into the doc one.
+
+  // Default selection: first doc layout, else first library layout, else
+  // the blank-slate "new" designer.
+  const [selection, setSelection] = useState<Selection>(() => {
+    if (docTemplates[0]) return { source: 'doc', name: docTemplates[0].name };
+    if (libraryTemplates[0]) return { source: 'library', name: libraryTemplates[0].name };
+    return 'new';
+  });
+
+  // Resolve the selected definition (undefined for the "new" slate). A
+  // `def` carried on the selection wins over the list lookup so a freshly
+  // saved layout shows immediately, before the doc re-parse lands.
+  const selected: CustomTemplateDefinition | undefined =
+    selection === 'new'
+      ? undefined
+      : (selection.def ??
+        (selection.source === 'doc' ? docTemplates : libraryTemplates).find(
+          (t) => t.name === selection.name,
+        ));
+
+  const handleSave = useCallback(
+    (def: CustomTemplateDefinition, target: DesignerSaveTarget) => {
+      if (target === 'doc') upsertDocTemplate(def);
+      else upsertLibraryTemplate(def);
+      // After saving, select the just-saved layout so the list highlights
+      // it and further edits target the same entry (rather than the blank
+      // "new" slate). Carry the saved def so the designer re-seeds from it
+      // even while the doc re-parse (debounced) is still in flight.
+      setSelection({ source: target === 'doc' ? 'doc' : 'library', name: def.name, def });
+    },
+    [upsertDocTemplate, upsertLibraryTemplate],
+  );
+
+  const isActive = (source: 'doc' | 'library', name: string) =>
+    selection !== 'new' && selection.source === source && selection.name === name;
+
+  const renderItem = (def: CustomTemplateDefinition, source: 'doc' | 'library') => (
+    <button
+      key={`${source}:${def.name}`}
+      type="button"
+      className={`squisq-layout-manager-item${
+        isActive(source, def.name) ? ' squisq-layout-manager-item--active' : ''
+      }`}
+      onClick={() => setSelection({ source, name: def.name })}
+    >
+      <span className="squisq-layout-manager-item-thumb">
+        <TemplateThumbnail def={def} />
+      </span>
+      <span className="squisq-layout-manager-item-text">
+        <span className="squisq-layout-manager-item-label">{def.label || def.name}</span>
+        <span className="squisq-layout-manager-item-name">{def.name}</span>
+      </span>
+    </button>
+  );
+
+  return (
+    <div className="squisq-layout-manager-body">
+      <aside className="squisq-layout-manager-sidebar">
+        <button
+          type="button"
+          className={`squisq-layout-manager-new${
+            selection === 'new' ? ' squisq-layout-manager-new--active' : ''
+          }`}
+          onClick={() => setSelection('new')}
+        >
+          + New layout
+        </button>
+
+        {docTemplates.length > 0 && (
+          <>
+            <div className="squisq-layout-manager-section-title">This document</div>
+            <div className="squisq-layout-manager-list">
+              {docTemplates.map((def) => renderItem(def, 'doc'))}
+            </div>
+          </>
+        )}
+
+        {libraryTemplates.length > 0 && (
+          <>
+            <div className="squisq-layout-manager-section-title">Library</div>
+            <div className="squisq-layout-manager-list">
+              {libraryTemplates.map((def) => renderItem(def, 'library'))}
+            </div>
+          </>
+        )}
+
+        {docTemplates.length === 0 && libraryTemplates.length === 0 && (
+          <p className="squisq-layout-manager-empty-hint">
+            No custom layouts yet. Design one on the right and save it to this document or your
+            library.
+          </p>
+        )}
+      </aside>
+
+      <div className="squisq-layout-manager-main">
+        <TemplateDesigner
+          // Remount when the selection changes so the designer re-seeds
+          // its internal state from the newly chosen definition.
+          key={selection === 'new' ? 'new' : `${selection.source}:${selection.name}`}
+          embedded
+          initial={selected}
+          mediaProvider={mediaProvider}
+          // A layout already in the doc just "Save"s; a new or library
+          // layout reads "Save to this doc" since saving adds it.
+          primarySaveLabel={
+            selection !== 'new' && selection.source === 'doc' ? 'Save' : 'Save to this doc'
+          }
+          onSave={handleSave}
+          onClose={() => {
+            /* embedded: the manager frame owns dismissal */
+          }}
+        />
+      </div>
+    </div>
+  );
+}