@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/buildDocumentPreviewMarkdown.ts

@@ -0,0 +1,168 @@
+/**
+ * Build the text-first Document-mode projection for a transformed Doc.
+ *
+ * Transform-generated blocks are programmatic template inputs: unlike blocks
+ * parsed from Markdown, they do not carry `sourceHeading` / `contents` nodes.
+ * `docToMarkdown()` intentionally omits such blocks because its primary job is
+ * lossless authoring round-trips. For a summarized preview we instead give the
+ * generated blocks a temporary, readable authoring shape before serializing.
+ */
+
+import { docToMarkdown } from '@bendyline/squisq/doc';
+import { stringifyMarkdown } from '@bendyline/squisq/markdown';
+import type { MarkdownHeading, MarkdownParagraph } from '@bendyline/squisq/markdown';
+import type { Block, Doc } from '@bendyline/squisq/schemas';
+
+function textParagraph(value: string): MarkdownParagraph {
+  return { type: 'paragraph', children: [{ type: 'text', value }] };
+}
+
+function textHeading(value: string, depth: 1 | 2 = 2): MarkdownHeading {
+  return { type: 'heading', depth, children: [{ type: 'text', value }] };
+}
+
+function stringValue(record: Record<string, unknown>, key: string): string | undefined {
+  const value = record[key];
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function stringList(record: Record<string, unknown>, key: string): string[] {
+  const value = record[key];
+  if (!Array.isArray(value)) return [];
+  return value.filter((item): item is string => typeof item === 'string' && !!item.trim());
+}
+
+interface ReadableBlockContent {
+  title?: string;
+  body: string[];
+}
+
+/** Extract the reader-facing copy carried by a programmatic template block. */
+function readableTemplateContent(block: Block): ReadableBlockContent {
+  const value = block as unknown as Record<string, unknown>;
+  const template = stringValue(value, 'template');
+  const explicitTitle = stringValue(value, 'title');
+
+  switch (template) {
+    case 'statHighlight':
+      return {
+        title: stringValue(value, 'stat') ?? explicitTitle,
+        body: [stringValue(value, 'description')].filter(Boolean) as string[],
+      };
+    case 'factCard':
+      return {
+        title: stringValue(value, 'fact') ?? explicitTitle,
+        body: [stringValue(value, 'explanation')].filter(Boolean) as string[],
+      };
+    case 'quote':
+      return {
+        title: stringValue(value, 'quote') ?? explicitTitle,
+        body: [stringValue(value, 'attribution')].filter(Boolean) as string[],
+      };
+    case 'fullBleedQuote':
+    case 'pullQuote':
+      return {
+        title: stringValue(value, 'text') ?? stringValue(value, 'quote') ?? explicitTitle,
+        body: [stringValue(value, 'attribution')].filter(Boolean) as string[],
+      };
+    case 'dateEvent':
+      return {
+        title: stringValue(value, 'date') ?? explicitTitle,
+        body: [stringValue(value, 'description')].filter(Boolean) as string[],
+      };
+    case 'definitionCard':
+      return {
+        title: stringValue(value, 'term') ?? explicitTitle,
+        body: [stringValue(value, 'definition'), stringValue(value, 'origin')].filter(
+          Boolean,
+        ) as string[],
+      };
+    case 'twoColumn':
+      return {
+        title: stringValue(value, 'header') ?? explicitTitle ?? 'Comparison',
+        body: [stringValue(value, 'left'), stringValue(value, 'right')].filter(Boolean) as string[],
+      };
+    case 'list':
+      return {
+        title: explicitTitle ?? 'Highlights',
+        body: stringList(value, 'items'),
+      };
+    case 'imageWithCaption':
+      return {
+        title: stringValue(value, 'caption') ?? stringValue(value, 'imageAlt') ?? explicitTitle,
+        body: [],
+      };
+    default:
+      return {
+        title: explicitTitle,
+        body: [
+          stringValue(value, 'body'),
+          stringValue(value, 'description'),
+          stringValue(value, 'text'),
+        ].filter(Boolean) as string[],
+      };
+  }
+}
+
+function hasAuthoredShape(block: Block): boolean {
+  return !!(
+    block.sourceHeading ||
+    block.standaloneAnnotation ||
+    (block.contents && block.contents.length > 0)
+  );
+}
+
+function makeReadableBlock(block: Block): Block {
+  const children = block.children?.map(makeReadableBlock);
+  if (hasAuthoredShape(block)) {
+    return children === block.children ? block : { ...block, children };
+  }
+
+  const readable = readableTemplateContent(block);
+  return {
+    ...block,
+    // Document mode is intentionally text-first. Removing the template from
+    // this temporary projection prevents docToMarkdown from re-adding a
+    // presentation annotation to the synthesized heading.
+    template: undefined,
+    sourceHeading: readable.title ? textHeading(readable.title) : undefined,
+    contents: readable.body.map(textParagraph),
+    children,
+  };
+}
+
+function documentTitle(doc: Doc): string | undefined {
+  if (doc.startBlock?.title?.trim()) return doc.startBlock.title.trim();
+  const title = doc.frontmatter?.title;
+  return typeof title === 'string' && title.trim() ? title.trim() : undefined;
+}
+
+function hasLevelOneHeading(blocks: Block[]): boolean {
+  return blocks.some(
+    (block) =>
+      block.sourceHeading?.depth === 1 ||
+      (block.children ? hasLevelOneHeading(block.children) : false),
+  );
+}
+
+/** Serialize a transformed Doc into readable Markdown for Document mode. */
+export function buildDocumentPreviewMarkdown(doc: Doc): string {
+  const blocks = doc.blocks.map(makeReadableBlock);
+  const title = documentTitle(doc);
+  const titledBlocks =
+    title && !hasLevelOneHeading(blocks)
+      ? [
+          {
+            id: 'transform-document-title',
+            startTime: 0,
+            duration: 0,
+            audioSegment: 0,
+            sourceHeading: textHeading(title, 1),
+            contents: [],
+          } satisfies Block,
+          ...blocks,
+        ]
+      : blocks;
+
+  return stringifyMarkdown(docToMarkdown({ ...doc, blocks: titledBlocks }));
+}

package/src/buildPreviewDoc.ts

@@ -11,7 +11,7 @@
  * 4. Synthesize a dummy audio segment for timer-based playback
  */
 
-import { flattenRenderableBlocks, hasTemplate } from '@bendyline/squisq/doc';
+import { deriveTemplateInputs, 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';
@@ -158,7 +158,12 @@ function getTemplateDefaults(
 
   switch (templateName) {
     case 'statHighlight':
-      return { stat: headingText, description: body || headingText };
+      return (
+        deriveTemplateInputs(templateName, headingText, block.contents) ?? {
+          stat: headingText,
+          description: body || headingText,
+        }
+      );
     case 'quote':
     case 'fullBleedQuote':
     case 'pullQuote':
@@ -381,18 +386,20 @@ export function buildPreviewDoc(doc: Doc): Doc {
     t += slide.duration as number;
   }
 
+  const audio =
+    doc.audio?.segments?.length > 0
+      ? doc.audio
+      : {
+          segments: t > 0 ? [{ src: '', name: 'preview', duration: t, startTime: 0 }] : [],
+        };
+
   return {
-    articleId: doc.articleId,
+    // Preserve document-wide capabilities (custom themes, persistent layers,
+    // scheduled media, frontmatter, captions, and future schema fields).
+    // Preview preparation should replace only the slide/timing projection.
+    ...doc,
     duration: t,
     blocks: slides as unknown as Block[],
-    audio: {
-      segments: t > 0 ? [{ src: '', name: 'preview', duration: t, startTime: 0 }] : [],
-    },
-    ...(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 } : {}),
+    audio,
   };
 }

package/src/customTemplates/CustomLayoutManager.tsx

@@ -47,7 +47,7 @@ type Selection =
 
 export function CustomLayoutManager({ onClose }: CustomLayoutManagerProps) {
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const { mediaProvider } = useEditorContext();
+  const { mediaProvider, colorScheme } = useEditorContext();
 
   // Close on Escape, mirroring the other editor dialogs.
   useEffect(() => {
@@ -60,7 +60,8 @@ export function CustomLayoutManager({ onClose }: CustomLayoutManagerProps) {
 
   return createPortal(
     <div
-      className="squisq-layout-manager-overlay"
+      className="squisq-editor-shell squisq-layout-manager-overlay"
+      data-theme={colorScheme}
       role="dialog"
       aria-modal="true"
       aria-label="Custom layouts"

package/src/customTemplates/CustomTemplateContext.tsx

@@ -34,6 +34,7 @@ import {
   listLibraryTemplates,
   saveLibraryTemplate as saveLibraryTemplateRaw,
   deleteLibraryTemplate as deleteLibraryTemplateRaw,
+  LIBRARY_STORAGE_KEY,
 } from './library';
 
 export interface CustomTemplateContextValue {
@@ -99,6 +100,11 @@ export function CustomTemplateProvider({
   // re-reads, which is enough for the single-tab common case.
   useEffect(() => {
     setLibraryTemplates(listLibraryTemplates());
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === LIBRARY_STORAGE_KEY) setLibraryTemplates(listLibraryTemplates());
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
   }, []);
 
   const upsertDocTemplate = useCallback(

package/src/customTemplates/TemplateDesigner.tsx

@@ -77,6 +77,8 @@ interface TemplateDesignerProps {
    * preview. Omit to disable media in the bin.
    */
   mediaProvider?: MediaProvider | null;
+  /** Editor chrome scheme, copied onto the portal root for theme inheritance. */
+  colorScheme?: 'light' | 'dark';
 }
 
 const DESIGN_CANVAS = { width: 1920, height: 1080 };
@@ -112,6 +114,7 @@ export function TemplateDesigner({
   embedded = false,
   primarySaveLabel = 'Save to this doc',
   mediaProvider = null,
+  colorScheme = 'light',
 }: TemplateDesignerProps) {
   const [name, setName] = useState(initial?.name ?? '');
   const [label, setLabel] = useState(initial?.label ?? '');
@@ -147,9 +150,8 @@ export function TemplateDesigner({
   );
 
   // Build the toolset once. Each bin entry — placeholder token or shape —
-  // gets a click-to-place tool; SelectTool is the singleton from
-  // scene/tools/SelectTool.ts. Tools are factories so each has its own
-  // state-free closure.
+  // gets a click-to-place tool. Gesture state is supplied by each Scene,
+  // so the reusable tool definitions remain instance-safe.
   const tools: SceneTool[] = useMemo(
     () => [
       SelectTool,
@@ -414,7 +416,8 @@ export function TemplateDesigner({
   // Standalone: full-screen modal over a click-to-dismiss backdrop.
   return createPortal(
     <div
-      className="squisq-template-designer-overlay"
+      className="squisq-editor-shell squisq-template-designer-overlay"
+      data-theme={colorScheme}
       role="dialog"
       aria-modal="true"
       aria-label="Custom layout designer"

package/src/customTemplates/__tests__/library.test.ts

@@ -85,4 +85,12 @@ describe('library', () => {
     saveLibraryTemplate(defn('a'));
     expect(listLibraryTemplates().map((t) => t.name)).toEqual(['a']);
   });
+
+  it('filters structurally invalid array entries instead of crashing sort', () => {
+    window.localStorage.setItem(
+      LIBRARY_STORAGE_KEY,
+      JSON.stringify({ version: 1, templates: [null, {}, defn('valid')] }),
+    );
+    expect(listLibraryTemplates().map((template) => template.name)).toEqual(['valid']);
+  });
 });