@bendyline/squisq-editor-react 1.2.1 → 1.3.0

package/src/buildPreviewDoc.ts

@@ -0,0 +1,254 @@
+/**
+ * buildPreviewDoc — Converts a markdown-derived Doc into a player-ready Doc
+ * with TemplateBlock slides and interleaved images.
+ *
+ * Shared between PreviewPanel (live preview) and export flows (HTML/video).
+ *
+ * Pipeline:
+ * 1. Flatten hierarchical blocks into a linear slide sequence
+ * 2. Convert each block into a TemplateBlock-compatible object
+ * 3. Interleave images as standalone imageWithCaption slides
+ * 4. Synthesize a dummy audio segment for timer-based playback
+ */
+
+import { flattenBlocks, hasTemplate } from '@bendyline/squisq/doc';
+import { extractPlainText } from '@bendyline/squisq/markdown';
+import { getChildren } from '@bendyline/squisq/markdown';
+import type { Block, Doc } from '@bendyline/squisq/schemas';
+import type { MarkdownBlockNode, MarkdownList, MarkdownNode } from '@bendyline/squisq/markdown';
+
+// ── Helpers ────────────────────────────────────────────────────────
+
+function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
+  if (!contents || contents.length === 0) return '';
+  const parts: string[] = [];
+  for (const node of contents) {
+    parts.push(extractPlainText(node));
+  }
+  return parts.join('\n').trim();
+}
+
+function extractBlockImages(
+  contents: MarkdownBlockNode[] | undefined,
+): Array<{ src: string; alt: string }> {
+  if (!contents || contents.length === 0) return [];
+  const images: Array<{ src: string; alt: string }> = [];
+
+  function walk(node: MarkdownNode): void {
+    if ('type' in node && node.type === 'image' && 'url' in node) {
+      const img = node as { url: string; alt?: string };
+      if (img.url) {
+        images.push({ src: img.url, alt: img.alt ?? '' });
+      }
+    }
+    for (const child of getChildren(node)) {
+      walk(child);
+    }
+  }
+
+  for (const node of contents) {
+    walk(node);
+  }
+  return images;
+}
+
+function collectAllDocImages(blocks: Block[]): Array<{ src: string; alt: string }> {
+  const seen = new Set<string>();
+  const images: Array<{ src: string; alt: string }> = [];
+
+  function walkBlocks(blockList: Block[]): void {
+    for (const block of blockList) {
+      for (const img of extractBlockImages(block.contents)) {
+        if (!seen.has(img.src)) {
+          seen.add(img.src);
+          images.push(img);
+        }
+      }
+      if (block.children) {
+        walkBlocks(block.children);
+      }
+    }
+  }
+
+  walkBlocks(blocks);
+  return images;
+}
+
+function extractListItems(contents: MarkdownBlockNode[] | undefined): string[] {
+  if (!contents) return [];
+  const items: string[] = [];
+  for (const node of contents) {
+    if (node.type === 'list') {
+      for (const item of (node as MarkdownList).children) {
+        const text = extractPlainText(item).trim();
+        if (text) items.push(text);
+      }
+    }
+  }
+  return items;
+}
+
+function getTemplateDefaults(
+  templateName: string,
+  headingText: string,
+  block: Block,
+): Record<string, unknown> {
+  const body = extractBodyText(block.contents);
+
+  switch (templateName) {
+    case 'statHighlight':
+      return { stat: headingText, description: body || headingText };
+    case 'quoteBlock':
+    case 'fullBleedQuote':
+    case 'pullQuote':
+      return { quote: body || headingText };
+    case 'factCard':
+      return { fact: headingText, explanation: body || headingText };
+    case 'comparisonBar':
+      return { leftLabel: 'A', leftValue: 60, rightLabel: 'B', rightValue: 40 };
+    case 'listBlock': {
+      const items = extractListItems(block.contents);
+      return { items: items.length > 0 ? items : ['Item 1', 'Item 2', 'Item 3'] };
+    }
+    case 'definitionCard':
+      return { term: headingText, definition: body || headingText };
+    case 'dateEvent':
+      return { date: headingText, description: body || headingText };
+    default:
+      return {};
+  }
+}
+
+function blockToSlide(block: Block, index: number): 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';
+  const defaults = getTemplateDefaults(template, headingText, block);
+
+  const {
+    id: _id,
+    startTime: _st,
+    duration: _d,
+    audioSegment: _as,
+    layers: _l,
+    transition: _tr,
+    template: _t,
+    title: _ti,
+    children: _c,
+    contents: _co,
+    sourceHeading: _sh,
+    templateOverrides: _to,
+    ...extraFields
+  } = block as unknown as Record<string, unknown>;
+
+  return {
+    id: block.id,
+    template,
+    duration: block.duration,
+    audioSegment: 0,
+    transition: index > 0 ? { type: 'fade', duration: 0.5 } : undefined,
+    title: headingText,
+    ...defaults,
+    ...extraFields,
+    ...block.templateOverrides,
+  };
+}
+
+const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
+  'zoomIn',
+  'zoomOut',
+  'panLeft',
+  'panRight',
+];
+
+// ── Public API ─────────────────────────────────────────────────────
+
+/**
+ * Build a player-ready Doc from a markdown-derived Doc.
+ *
+ * Flattens hierarchical blocks, converts each to a TemplateBlock-compatible
+ * slide, interleaves images, recalculates timing, and adds a synthetic
+ * audio segment.
+ */
+export function buildPreviewDoc(doc: Doc): Doc {
+  const flat = flattenBlocks(doc.blocks);
+  const allImages = collectAllDocImages(doc.blocks);
+  const usedImageSrcs = new Set<string>();
+
+  const slides: Record<string, unknown>[] = [];
+  let motionIndex = 0;
+
+  for (let i = 0; i < flat.length; i++) {
+    const block = flat[i];
+    const blockImages = extractBlockImages(block.contents);
+    const slide = blockToSlide(block, i);
+
+    if (blockImages.length > 0 && slide.template === 'sectionHeader') {
+      const img = blockImages[0];
+      usedImageSrcs.add(img.src);
+      slide.template = 'imageWithCaption';
+      slide.imageSrc = img.src;
+      slide.imageAlt = img.alt;
+      slide.caption = slide.title as string;
+      slide.captionPosition = 'bottom';
+      slide.ambientMotion = IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length];
+    } else if (blockImages.length > 0) {
+      const img = blockImages[0];
+      usedImageSrcs.add(img.src);
+      if (!slide.accentImage) {
+        slide.accentImage = {
+          src: img.src,
+          alt: img.alt,
+          position: 'left-strip',
+          ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
+        };
+      }
+    }
+
+    slides.push(slide);
+  }
+
+  // Interleave unused images
+  const unusedImages = allImages.filter((img) => !usedImageSrcs.has(img.src));
+  if (unusedImages.length > 0 && slides.length > 0) {
+    const interval = Math.max(2, Math.floor(slides.length / (unusedImages.length + 1)));
+    let insertOffset = 0;
+    for (let imgIdx = 0; imgIdx < unusedImages.length; imgIdx++) {
+      const insertAt = Math.min((imgIdx + 1) * interval + insertOffset, slides.length);
+      const img = unusedImages[imgIdx];
+      slides.splice(insertAt, 0, {
+        id: `img-interleave-${imgIdx}`,
+        template: 'imageWithCaption',
+        duration: 5,
+        audioSegment: 0,
+        imageSrc: img.src,
+        imageAlt: img.alt,
+        ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
+        transition: { type: 'fade', duration: 0.5 },
+      });
+      insertOffset++;
+    }
+  }
+
+  // Recalculate timing
+  let t = 0;
+  for (const slide of slides) {
+    slide.startTime = t;
+    t += slide.duration as number;
+  }
+
+  return {
+    articleId: doc.articleId,
+    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 } : {}),
+  };
+}

package/src/detectMarkdown.ts

@@ -0,0 +1,62 @@
+/**
+ * Markdown detection — heuristic for spotting markdown source in pasted text.
+ *
+ * Used by the WYSIWYG editor's paste handler to decide whether plain-text
+ * paste content should be parsed as markdown rather than inserted literally.
+ *
+ * The heuristic prefers false negatives (treating markdown as plain text)
+ * over false positives (mangling plain text that happens to contain a few
+ * special characters).
+ */
+
+/** Block-level patterns that strongly indicate markdown. Any one is enough. */
+const STRONG_BLOCK_PATTERNS: RegExp[] = [
+  /^#{1,6}\s+\S/, // # Heading
+  /^[-*+]\s+\S/, // - bullet
+  /^\d+\.\s+\S/, // 1. ordered
+  /^>\s+\S/, // > blockquote
+  /^```/, // ``` code fence
+  /^\|.+\|\s*$/, // | table | row |
+  /^[-*+]\s+\[[ xX]\]\s+/, // - [ ] task
+];
+
+/** Inline patterns that are weaker indicators on their own. */
+const INLINE_PATTERNS: RegExp[] = [
+  /\*\*[^*\n]+\*\*/, // **bold**
+  /__[^_\n]+__/, // __bold__
+  /`[^`\n]+`/, // `code`
+  /\[[^\]\n]+\]\([^)\n]+\)/, // [link](url)
+  /!\[[^\]\n]*\]\([^)\n]+\)/, // ![image](url)
+  /~~[^~\n]+~~/, // ~~strike~~
+];
+
+/**
+ * Returns true if the text looks like markdown source.
+ *
+ * Detection rules:
+ *  - Any line matching a strong block pattern → yes
+ *  - Two or more inline pattern matches anywhere in the text → yes
+ *  - Otherwise → no
+ */
+export function looksLikeMarkdown(text: string): boolean {
+  if (!text || text.length < 2) return false;
+
+  const lines = text.split(/\r?\n/);
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    for (const re of STRONG_BLOCK_PATTERNS) {
+      if (re.test(trimmed)) return true;
+    }
+  }
+
+  let inlineHits = 0;
+  for (const re of INLINE_PATTERNS) {
+    if (re.test(text)) {
+      inlineHits++;
+      if (inlineHits >= 2) return true;
+    }
+  }
+
+  return false;
+}

package/src/fileKind.ts

@@ -0,0 +1,134 @@
+/**
+ * fileKind
+ *
+ * Maps a file name (or bare extension) to a Monaco language ID and decides
+ * whether the editor shell should operate in markdown mode (full WYSIWYG +
+ * Preview experience) or code mode (Monaco-only view with formatting
+ * buttons hidden).
+ *
+ * The mapping favors common web / systems languages that Monaco ships with
+ * out of the box. Unknown extensions fall back to markdown mode so the
+ * existing UX remains the default for anything we don't recognize.
+ */
+
+export interface FileKind {
+  /** 'markdown' keeps the full editor (WYSIWYG + Preview tabs); 'code' is Monaco-only. */
+  mode: 'markdown' | 'code';
+  /** Monaco language ID — passed to `<Editor defaultLanguage={...} />`. */
+  language: string;
+}
+
+/**
+ * Extension → Monaco language ID. Keys are lowercase, no leading dot.
+ * Extend as needed; unknown extensions fall back to markdown mode.
+ */
+const EXT_TO_LANGUAGE: Record<string, string> = {
+  md: 'markdown',
+  markdown: 'markdown',
+  mdown: 'markdown',
+  txt: 'plaintext',
+  ts: 'typescript',
+  tsx: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  json: 'json',
+  jsonc: 'json',
+  html: 'html',
+  htm: 'html',
+  css: 'css',
+  scss: 'scss',
+  less: 'less',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  rb: 'ruby',
+  java: 'java',
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  hpp: 'cpp',
+  cc: 'cpp',
+  cs: 'csharp',
+  php: 'php',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  yml: 'yaml',
+  yaml: 'yaml',
+  toml: 'ini',
+  ini: 'ini',
+  xml: 'xml',
+  svg: 'xml',
+  sql: 'sql',
+  lua: 'lua',
+  swift: 'swift',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  dockerfile: 'dockerfile',
+};
+
+/**
+ * Languages that keep the full markdown shell (WYSIWYG + Preview). Anything
+ * outside this set is treated as code.
+ */
+const MARKDOWN_MODE_LANGUAGES = new Set(['markdown', 'plaintext']);
+
+/**
+ * Pull the lowercase extension (no leading dot) from a file name or bare
+ * extension string. Returns null when none is discernible.
+ *
+ * Examples:
+ *   "foo.ts"       → "ts"
+ *   "foo.tar.gz"   → "gz"
+ *   ".ts"          → "ts"
+ *   "ts"           → "ts"
+ *   "Dockerfile"   → "dockerfile"   (full name match for extensionless files)
+ *   ""             → null
+ */
+function extractExtension(fileName: string): string | null {
+  const trimmed = fileName.trim();
+  if (!trimmed) return null;
+
+  // Strip any leading path — take only the basename.
+  const base = trimmed.replace(/^.*[/\\]/, '');
+  if (!base) return null;
+
+  const dotIdx = base.lastIndexOf('.');
+  if (dotIdx === -1) {
+    // No dot — could still be a recognized bare name (Dockerfile) or a bare
+    // extension passed by a caller like "ts". Lower-case and return.
+    return base.toLowerCase();
+  }
+  if (dotIdx === base.length - 1) return null; // Trailing dot, no extension.
+  return base.slice(dotIdx + 1).toLowerCase();
+}
+
+/**
+ * Detect a Monaco language ID from a file name. Returns null when the
+ * extension (or bare name) is not in the mapping.
+ */
+export function detectLanguageFromFileName(fileName: string): string | null {
+  const ext = extractExtension(fileName);
+  if (!ext) return null;
+  return EXT_TO_LANGUAGE[ext] ?? null;
+}
+
+/**
+ * Resolve the editor mode + Monaco language for a given file. The explicit
+ * `language` argument, if provided, wins over any detection from
+ * `fileName`. When nothing matches, falls back to markdown mode.
+ */
+export function resolveFileKind(fileName?: string, language?: string): FileKind {
+  const resolvedLanguage = language ?? (fileName ? detectLanguageFromFileName(fileName) : null);
+
+  if (!resolvedLanguage) {
+    return { mode: 'markdown', language: 'markdown' };
+  }
+
+  const mode: FileKind['mode'] = MARKDOWN_MODE_LANGUAGES.has(resolvedLanguage)
+    ? 'markdown'
+    : 'code';
+  return { mode, language: resolvedLanguage };
+}

package/src/hooks/useFileDrop.ts

@@ -137,17 +137,21 @@ export function useFileDrop({ onDrop, enabled = true }: UseFileDropOptions): Use
   const handleDragEnter = useCallback(
     (e: React.DragEvent) => {
       if (!enabled) return;
+
+      // Only react to OS file drags. In-app drags (e.g. dragging a thumbnail
+      // out of the MediaBin) don't carry file-kind items and must pass
+      // through to the editors without showing the drop overlay.
+      const classification = e.dataTransfer.items
+        ? classifyDataTransferItems(e.dataTransfer.items)
+        : 'mixed';
+      if (!classification) return;
+
       e.preventDefault();
       dragCounterRef.current++;
 
       if (dragCounterRef.current === 1) {
         setIsDragging(true);
-        if (e.dataTransfer.items) {
-          setDragContentType(classifyDataTransferItems(e.dataTransfer.items));
-        } else {
-          // Fallback: can't classify, show all zones
-          setDragContentType('mixed');
-        }
+        setDragContentType(classification);
       }
     },
     [enabled],

package/src/index.ts

@@ -25,12 +25,21 @@ export type { EditorShellProps, EditorTheme } from './EditorShell.js';
 export { EditorProvider, useEditorContext } from './EditorContext.js';
 export type {
   EditorView,
+  EditorMode,
   EditorState,
   EditorActions,
   EditorContextValue,
   EditorProviderProps,
+  ImageDisplayMode,
+  MentionCandidate,
+  MentionProvider,
 } from './EditorContext.js';
 
+// File-kind detection — useful for hosts that want to pre-decide chrome
+// around the editor based on whether a file is markdown or code.
+export { resolveFileKind, detectLanguageFromFileName } from './fileKind.js';
+export type { FileKind } from './fileKind.js';
+
 // Individual editors (for custom layouts)
 export { RawEditor } from './RawEditor.js';
 export type { RawEditorProps } from './RawEditor.js';
@@ -60,6 +69,8 @@ export type { MediaBinProps } from './MediaBin.js';
 export { StatusBar } from './StatusBar.js';
 export type { StatusBarProps } from './StatusBar.js';
 
+export { TooltipLayer } from './Tooltip.js';
+
 // Drag-and-drop
 export { DropZoneOverlay } from './DropZoneOverlay.js';
 export type { DropZoneOverlayProps } from './DropZoneOverlay.js';
@@ -83,5 +94,8 @@ export {
 // Bridge utilities
 export { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge.js';
 
+// Slideshow builder (shared between PreviewPanel and export flows)
+export { buildPreviewDoc } from './buildPreviewDoc.js';
+
 // Tiptap extension: Heading with template annotation support
 export { HeadingWithTemplate } from './TemplateAnnotation.js';

package/src/mediaDragMime.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared MIME type used to signal an in-app drag from the MediaBin to either
+ * the Raw or WYSIWYG editor. Carries a JSON payload of the form
+ * `{ name, mimeType, alt }` so the receiving editor can insert a reference
+ * to an existing media entry without re-uploading it.
+ */
+export const SQUISQ_MEDIA_MIME = 'application/x-squisq-media';
+
+export interface SquisqMediaDragPayload {
+  /** Relative path / filename as stored in the MediaProvider. */
+  name: string;
+  /** MIME type of the entry. */
+  mimeType: string;
+  /** Default alt text derived from the filename. */
+  alt: string;
+}
+
+export function parseSquisqMediaPayload(raw: string): SquisqMediaDragPayload | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<SquisqMediaDragPayload>;
+    if (
+      typeof parsed.name === 'string' &&
+      typeof parsed.mimeType === 'string' &&
+      typeof parsed.alt === 'string'
+    ) {
+      return parsed as SquisqMediaDragPayload;
+    }
+  } catch {
+    // fall through
+  }
+  return null;
+}