@bendyline/squisq-editor-react 1.2.1 → 1.3.0

package/src/PreviewPanel.tsx

@@ -6,29 +6,20 @@
  *
  * The markdown-derived Doc (from markdownToDoc) contains hierarchical blocks
  * with template names, heading text, and body content — but no audio or
- * visual layers. This component bridges the gap by:
- *
- * 1. Flattening the block tree into a linear slide sequence
- * 2. Converting each block into a TemplateBlock-compatible object
- *    (mapping heading text → title, templateOverrides → template fields)
- * 3. Synthesizing a dummy audio segment so DocPlayer's timing works
- *    (the player enters fallback-timer mode when audio can't load)
- * 4. Passing the prepared Doc to DocPlayer for SVG-based rendering
+ * visual layers. This component bridges the gap by using buildPreviewDoc()
+ * to flatten blocks, convert them to TemplateBlock slides with interleaved
+ * images, and synthesize timing.
  */
 
 import { useState, useEffect } from 'react';
 import { DocPlayer, LinearDocView } from '@bendyline/squisq-react';
-import { flattenBlocks } from '@bendyline/squisq/doc';
-import { hasTemplate } from '@bendyline/squisq/doc';
-import { extractPlainText } from '@bendyline/squisq/markdown';
-import type { Block, Doc } from '@bendyline/squisq/schemas';
-import type { MarkdownBlockNode, MarkdownList, MarkdownNode } from '@bendyline/squisq/markdown';
-import { getChildren } from '@bendyline/squisq/markdown';
+import type { Doc } from '@bendyline/squisq/schemas';
 import { applyTransform } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
 import { usePreviewSettings } from './PreviewControls';
+import { buildPreviewDoc } from './buildPreviewDoc';
 
 export interface PreviewPanelProps {
   /** Base path for resolving media URLs in DocPlayer */
@@ -39,325 +30,6 @@ export interface PreviewPanelProps {
   container?: ContentContainer | null;
 }
 
-// ── Helpers ────────────────────────────────────────────────────────
-
-/**
- * Extract plain text from an array of markdown block nodes.
- * Walks paragraphs, blockquotes, and list items to collect all text.
- */
-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();
-}
-
-/**
- * Extract images from a block's markdown contents.
- * Walks the node tree recursively to find all MarkdownImage nodes.
- */
-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;
-}
-
-/**
- * Collect all unique images from an entire Doc's block tree.
- * Walks nested children to find every image across all blocks.
- */
-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;
-}
-
-/**
- * Extract list items from markdown body content.
- * Returns an array of plain text strings for each list item found.
- */
-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;
-}
-
-/**
- * Provide sensible default fields for templates that require more than
- * just a `title`. This prevents crashes from undefined required fields
- * when the markdown annotations don't supply all template-specific values.
- */
-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':
-      return {
-        items: extractListItems(block.contents) || ['Item 1', 'Item 2', 'Item 3'],
-      };
-
-    case 'definitionCard':
-      return {
-        term: headingText,
-        definition: body || headingText,
-      };
-
-    case 'dateEvent':
-      return {
-        date: headingText,
-        description: body || headingText,
-      };
-
-    default:
-      return {};
-  }
-}
-
-/**
- * Convert a markdown-derived Block into a TemplateBlock-compatible object.
- *
- * The block's heading text becomes `title` (works for sectionHeader,
- * titleBlock, factCard, etc.). Any templateOverrides from annotation
- * syntax `{[template key=value]}` are spread on top so template-specific
- * fields (stat, quote, description, …) are available.
- *
- * If the requested template doesn't exist in the registry, falls back
- * to `sectionHeader` to avoid "Unknown template" warnings.
- */
-function blockToSlide(block: Block, index: number): Record<string, unknown> {
-  const headingText = block.sourceHeading
-    ? extractPlainText(block.sourceHeading)
-    : block.title || block.id || `Slide ${index + 1}`;
-
-  // Validate template name — fall back to sectionHeader for unknowns
-  const requestedTemplate = block.template || 'sectionHeader';
-  const template = hasTemplate(requestedTemplate) ? requestedTemplate : 'sectionHeader';
-
-  // Get sensible defaults for templates that need more than just `title`
-  const defaults = getTemplateDefaults(template, headingText, block);
-
-  // Spread the block itself to pick up any template-specific fields
-  // placed directly on the block by applyTransform (e.g. stat, description,
-  // quote, colorScheme). These are not in templateOverrides — they live
-  // on the block object because the transform produces hybrid Block+Template
-  // objects via the timing allocator.
-  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,
-    // Provide heading text as title — consumed by sectionHeader, titleBlock, etc.
-    title: headingText,
-    // Template-specific defaults (safe fallbacks for required fields)
-    ...defaults,
-    // Template-specific fields from transform (stat, description, quote, etc.)
-    ...extraFields,
-    // Spread annotation overrides last so explicit values win
-    ...block.templateOverrides,
-  };
-}
-
-/** Ambient motions to rotate on image slides. */
-const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
-  'zoomIn',
-  'zoomOut',
-  'panLeft',
-  'panRight',
-];
-
-/**
- * Build a player-ready Doc from the markdown-derived Doc.
- *
- * Flattens hierarchical blocks, converts each to a TemplateBlock-compatible
- * slide, recalculates timing, and adds a synthetic audio segment.
- *
- * Images found in the markdown are used in two ways:
- * 1. Per-block: if a block has images, its first image becomes the background
- *    (via imageWithCaption template) or an accent image on text templates.
- * 2. Global: remaining images are interleaved as standalone image slides
- *    for visual variety.
- */
-function buildPreviewDoc(doc: Doc): Doc {
-  const flat = flattenBlocks(doc.blocks);
-
-  // Collect all images from the doc for global interleaving
-  const allImages = collectAllDocImages(doc.blocks);
-
-  // Track which images are used per-block so we can interleave the rest
-  const usedImageSrcs = new Set<string>();
-
-  // First pass: convert blocks to slides, using per-block images
-  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 the block has images and is using the default sectionHeader template,
-    // upgrade it to imageWithCaption so the image becomes the slide background.
-    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) {
-      // For other templates, add the first image as an accent
-      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);
-  }
-
-  // Second pass: interleave unused images as standalone imageWithCaption slides.
-  // Spread them evenly through the sequence for visual variety.
-  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 sequential 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: {
-      // Synthetic segment — audio will fail to load and DocPlayer will use
-      // its fallback timer to advance currentTime via requestAnimationFrame.
-      segments: t > 0 ? [{ src: '', name: 'preview', duration: t, startTime: 0 }] : [],
-    },
-    ...(doc.captions ? { captions: doc.captions } : {}),
-  };
-}
-
 // ── Component ──────────────────────────────────────────────────────
 
 /**

package/src/RawEditor.tsx

@@ -11,6 +11,7 @@ import Editor, { loader, type OnMount, type OnChange } from '@monaco-editor/reac
 import * as monaco from 'monaco-editor';
 import { useEditorContext } from './EditorContext';
 import { getAvailableTemplates } from '@bendyline/squisq/doc';
+import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 
 // Use locally installed monaco-editor instead of CDN.
 //
@@ -35,6 +36,13 @@ export interface RawEditorProps {
   wordWrap?: 'on' | 'off' | 'wordWrapColumn' | 'bounded';
   /** Additional class name for the container */
   className?: string;
+  /**
+   * Chat-composer mode: Enter fires this callback (submit) and Cmd/Ctrl+Enter
+   * inserts a newline. When undefined, behaves normally.
+   */
+  submitOnEnter?: () => void;
+  /** Make Monaco read-only (no edits, no cursor blink). */
+  readOnly?: boolean;
 }
 
 /**
@@ -47,11 +55,28 @@ export function RawEditor({
   fontSize = 14,
   wordWrap = 'on',
   className,
+  submitOnEnter,
+  readOnly = false,
 }: RawEditorProps) {
-  const { markdownSource, setMarkdownSource, setMonacoEditor } = useEditorContext();
+  const { markdownSource, setMarkdownSource, setMonacoEditor, language, mentionProvider } =
+    useEditorContext();
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const isExternalUpdate = useRef(false);
   const completionDisposable = useRef<monaco.IDisposable | null>(null);
+  const mentionCompletionDisposable = useRef<monaco.IDisposable | null>(null);
+  const dropCleanupRef = useRef<(() => void) | null>(null);
+  const keyDisposable = useRef<monaco.IDisposable | null>(null);
+  // Ref so the keydown handler always sees the latest callback.
+  const submitOnEnterRef = useRef(submitOnEnter);
+  useEffect(() => {
+    submitOnEnterRef.current = submitOnEnter;
+  }, [submitOnEnter]);
+  // Ref so the completion provider — registered once at mount — always
+  // sees the latest mentionProvider without needing to unregister.
+  const mentionProviderRef = useRef(mentionProvider);
+  useEffect(() => {
+    mentionProviderRef.current = mentionProvider;
+  }, [mentionProvider]);
 
   const handleMount: OnMount = useCallback(
     (editor, monaco) => {
@@ -61,44 +86,167 @@ export function RawEditor({
 
       // Dispose any previous completion provider (from a prior mount)
       completionDisposable.current?.dispose();
+      completionDisposable.current = null;
+      mentionCompletionDisposable.current?.dispose();
+      mentionCompletionDisposable.current = null;
+
+      // Register the `{[template]}` completion provider only for markdown
+      // files — it's meaningless for TypeScript, JSON, Python, etc.
+      if (language === 'markdown') {
+        const templates = getAvailableTemplates();
+        completionDisposable.current = monaco.languages.registerCompletionItemProvider('markdown', {
+          triggerCharacters: ['['],
+          provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
+            const lineContent = model.getLineContent(position.lineNumber);
+
+            // Only trigger inside a heading line that has {[ before the cursor
+            if (!/^#{1,6}\s/.test(lineContent)) return { suggestions: [] };
+
+            const textBeforeCursor = lineContent.substring(0, position.column - 1);
+            const bracketIdx = textBeforeCursor.lastIndexOf('{[');
+            if (bracketIdx === -1) return { suggestions: [] };
+
+            // The range to replace: from after {[ to the cursor
+            const startCol = bracketIdx + 3; // after {[
+            const range = new monaco.Range(
+              position.lineNumber,
+              startCol,
+              position.lineNumber,
+              position.column,
+            );
+
+            const suggestions = templates.map((name) => ({
+              label: name,
+              kind: monaco.languages.CompletionItemKind.Value,
+              insertText: name + ']}',
+              range,
+              detail: 'Block template',
+              sortText: name,
+            }));
+
+            return { suggestions };
+          },
+        });
+
+        // `@mention` completion — queries the shared MentionProvider. Keep
+        // this in its own registration so we can dispose it independently
+        // of the template provider, and so the trigger character is just
+        // `@` (not `[`).
+        mentionCompletionDisposable.current = monaco.languages.registerCompletionItemProvider(
+          'markdown',
+          {
+            triggerCharacters: ['@'],
+            async provideCompletionItems(model, position) {
+              const provider = mentionProviderRef.current;
+              if (!provider) return { suggestions: [] };
+              const lineContent = model.getLineContent(position.lineNumber);
+              const textBeforeCursor = lineContent.substring(0, position.column - 1);
+              const atIdx = textBeforeCursor.lastIndexOf('@');
+              if (atIdx === -1) return { suggestions: [] };
+              // `@` must be at line start or preceded by whitespace/punct —
+              // skip e.g. email addresses like `foo@bar`.
+              if (atIdx > 0) {
+                const prevChar = textBeforeCursor[atIdx - 1];
+                if (!/[\s\p{P}]/u.test(prevChar)) return { suggestions: [] };
+              }
+              const query = textBeforeCursor.slice(atIdx + 1);
+              // Only fire for short queries — once the user has typed
+              // a full word, the popover gets noisy.
+              if (query.length > 40) return { suggestions: [] };
+              if (/\s/.test(query)) return { suggestions: [] };
 
-      // Register template annotation completion provider for {[ trigger
-      const templates = getAvailableTemplates();
-      completionDisposable.current = monaco.languages.registerCompletionItemProvider('markdown', {
-        triggerCharacters: ['['],
-        provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
-          const lineContent = model.getLineContent(position.lineNumber);
-
-          // Only trigger inside a heading line that has {[ before the cursor
-          if (!/^#{1,6}\s/.test(lineContent)) return { suggestions: [] };
-
-          const textBeforeCursor = lineContent.substring(0, position.column - 1);
-          const bracketIdx = textBeforeCursor.lastIndexOf('{[');
-          if (bracketIdx === -1) return { suggestions: [] };
-
-          // The range to replace: from after {[ to the cursor
-          const startCol = bracketIdx + 3; // after {[
-          const range = new monaco.Range(
-            position.lineNumber,
-            startCol,
-            position.lineNumber,
-            position.column,
-          );
-
-          const suggestions = templates.map((name) => ({
-            label: name,
-            kind: monaco.languages.CompletionItemKind.Value,
-            insertText: name + ']}',
-            range,
-            detail: 'Block template',
-            sortText: name,
-          }));
-
-          return { suggestions };
-        },
+              let candidates;
+              try {
+                candidates = await provider(query);
+              } catch {
+                return { suggestions: [] };
+              }
+
+              const range = new monaco.Range(
+                position.lineNumber,
+                atIdx + 1,
+                position.lineNumber,
+                position.column,
+              );
+
+              return {
+                suggestions: candidates.map((c) => ({
+                  label: `@${c.label}`,
+                  kind: monaco.languages.CompletionItemKind.User,
+                  insertText: `@[${c.label}](${c.scheme}:${c.id}) `,
+                  range,
+                  ...(c.description ? { detail: c.description } : {}),
+                  sortText: c.label,
+                })),
+              };
+            },
+          },
+        );
+      }
+
+      // Chat-composer mode: intercept Enter before Monaco inserts a newline.
+      // Cmd/Ctrl+Enter falls through so the native newline still works.
+      keyDisposable.current?.dispose();
+      keyDisposable.current = editor.onKeyDown((e) => {
+        if (e.keyCode !== monaco.KeyCode.Enter) return;
+        if (!submitOnEnterRef.current) return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+        submitOnEnterRef.current();
       });
+
+      // Attach native drop listeners for in-app MediaBin drags. Monaco's own
+      // drop handling doesn't know about our custom MIME type, so we insert
+      // markdown image syntax explicitly in the capture phase.
+      dropCleanupRef.current?.();
+      const domNode = editor.getDomNode();
+      if (domNode) {
+        const onDragOver = (e: DragEvent) => {
+          if (e.dataTransfer?.types.includes(SQUISQ_MEDIA_MIME)) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }
+        };
+        const onDrop = (e: DragEvent) => {
+          const dt = e.dataTransfer;
+          if (!dt) return;
+          const raw = dt.getData(SQUISQ_MEDIA_MIME);
+          if (!raw) return;
+          const payload = parseSquisqMediaPayload(raw);
+          if (!payload || !payload.mimeType.startsWith('image/')) return;
+
+          e.preventDefault();
+          e.stopPropagation();
+
+          const target = editor.getTargetAtClientPoint(e.clientX, e.clientY);
+          const position = target?.position ?? editor.getPosition();
+          if (!position) return;
+
+          const markdown = `![${payload.alt}](${payload.name})`;
+          editor.executeEdits('squisq-media-drop', [
+            {
+              range: new monaco.Range(
+                position.lineNumber,
+                position.column,
+                position.lineNumber,
+                position.column,
+              ),
+              text: markdown,
+              forceMoveMarkers: true,
+            },
+          ]);
+          editor.focus();
+        };
+        domNode.addEventListener('dragover', onDragOver, true);
+        domNode.addEventListener('drop', onDrop, true);
+        dropCleanupRef.current = () => {
+          domNode.removeEventListener('dragover', onDragOver, true);
+          domNode.removeEventListener('drop', onDrop, true);
+        };
+      }
     },
-    [setMonacoEditor],
+    [setMonacoEditor, language],
   );
 
   // Unregister on unmount
@@ -107,6 +255,12 @@ export function RawEditor({
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
       completionDisposable.current = null;
+      mentionCompletionDisposable.current?.dispose();
+      mentionCompletionDisposable.current = null;
+      dropCleanupRef.current?.();
+      dropCleanupRef.current = null;
+      keyDisposable.current?.dispose();
+      keyDisposable.current = null;
     };
   }, [setMonacoEditor]);
 
@@ -136,7 +290,7 @@ export function RawEditor({
   return (
     <div className={className} style={{ width: '100%', height: '100%' }} data-testid="raw-editor">
       <Editor
-        defaultLanguage="markdown"
+        defaultLanguage={language}
         value={markdownSource}
         theme={theme}
         onMount={handleMount}
@@ -153,6 +307,8 @@ export function RawEditor({
           bracketPairColorization: { enabled: true },
           guides: { indentation: true },
           padding: { top: 12, bottom: 12 },
+          readOnly,
+          domReadOnly: readOnly,
         }}
       />
     </div>

package/src/TemplateAnnotation.ts

@@ -48,7 +48,10 @@ export const HeadingWithTemplate = Heading.extend({
     const templateName = HTMLAttributes['data-template'];
 
     if (templateName) {
-      // Render heading with a trailing badge span
+      // Render heading with a trailing badge span. The badge has no text
+      // content — its label is painted via CSS `content: attr(data-template)`
+      // so the template name never becomes part of the serialized heading
+      // text (which would leak into markdown on round-trip).
       return [
         tag,
         HTMLAttributes,
@@ -60,7 +63,6 @@ export const HeadingWithTemplate = Heading.extend({
             contenteditable: 'false',
             'data-template': templateName,
           },
-          templateName,
         ],
       ];
     }