@bendyline/docblocks-react 0.1.0

package/src/Export/ExportDialog.tsx

@@ -0,0 +1,173 @@
+/**
+ * ExportDialog — modal for choosing export format and options.
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { getThemeSummaries } from '@bendyline/squisq/schemas';
+import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+import type { ExportFormat, ExportOptions } from './export-options.js';
+import { FORMAT_LABELS, saveExportOptions } from './export-options.js';
+
+export interface ExportDialogProps {
+  /** Initial options (pre-populated from last export). */
+  initial: ExportOptions;
+  /** Whether the export is currently running. */
+  exporting: boolean;
+  /** Called when the user confirms the export. */
+  onExport: (options: ExportOptions) => void;
+  /** Called when the dialog is dismissed. */
+  onClose: () => void;
+}
+
+const FORMATS: ExportFormat[] = ['pdf', 'docx', 'pptx', 'html', 'md'];
+
+export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDialogProps) {
+  const [format, setFormat] = useState<ExportFormat>(initial.format);
+  const [themeId, setThemeId] = useState(initial.themeId);
+  const [transformStyle, setTransformStyle] = useState(initial.transformStyle);
+  const [pageSize, setPageSize] = useState(initial.pageSize);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  const themes = getThemeSummaries();
+  const transforms = getTransformStyleSummaries();
+
+  const showTheme = format === 'docx' || format === 'pdf' || format === 'pptx';
+  const showTransform = format === 'pptx';
+  const showPageSize = format === 'pdf';
+
+  const handleExport = useCallback(() => {
+    const opts: ExportOptions = { format, themeId, transformStyle, pageSize };
+    saveExportOptions(opts);
+    onExport(opts);
+  }, [format, themeId, transformStyle, pageSize, onExport]);
+
+  // Close on Escape
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  // Close on backdrop click
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose],
+  );
+
+  return (
+    <div className="db-dialog-overlay" onClick={handleBackdropClick}>
+      <div className="db-dialog db-export-dialog" ref={dialogRef}>
+        <div className="db-dialog-header">
+          <h2 className="db-dialog-title">Export Document</h2>
+          <button className="db-dialog-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+
+        <div className="db-dialog-body">
+          {/* Format */}
+          <div className="db-export-field">
+            <label className="db-export-label" htmlFor="db-export-format">
+              Format
+            </label>
+            <select
+              id="db-export-format"
+              className="db-export-select"
+              value={format}
+              onChange={(e) => setFormat(e.target.value as ExportFormat)}
+            >
+              {FORMATS.map((f) => (
+                <option key={f} value={f}>
+                  {FORMAT_LABELS[f]}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Theme */}
+          {showTheme && (
+            <div className="db-export-field">
+              <label className="db-export-label" htmlFor="db-export-theme">
+                Theme
+              </label>
+              <select
+                id="db-export-theme"
+                className="db-export-select"
+                value={themeId}
+                onChange={(e) => setThemeId(e.target.value)}
+              >
+                {themes.map((t) => (
+                  <option key={t.id} value={t.id}>
+                    {t.name}
+                  </option>
+                ))}
+              </select>
+              <span className="db-export-hint">
+                {themes.find((t) => t.id === themeId)?.description}
+              </span>
+            </div>
+          )}
+
+          {/* Transform (PPTX only) */}
+          {showTransform && (
+            <div className="db-export-field">
+              <label className="db-export-label" htmlFor="db-export-transform">
+                Transform
+              </label>
+              <select
+                id="db-export-transform"
+                className="db-export-select"
+                value={transformStyle}
+                onChange={(e) => setTransformStyle(e.target.value)}
+              >
+                {transforms.map((t) => (
+                  <option key={t.id} value={t.id}>
+                    {t.name}
+                  </option>
+                ))}
+              </select>
+              <span className="db-export-hint">
+                {transforms.find((t) => t.id === transformStyle)?.description}
+              </span>
+            </div>
+          )}
+
+          {/* Page size (PDF only) */}
+          {showPageSize && (
+            <div className="db-export-field">
+              <label className="db-export-label" htmlFor="db-export-pagesize">
+                Page Size
+              </label>
+              <select
+                id="db-export-pagesize"
+                className="db-export-select"
+                value={pageSize}
+                onChange={(e) => setPageSize(e.target.value as 'letter' | 'a4')}
+              >
+                <option value="letter">US Letter</option>
+                <option value="a4">A4</option>
+              </select>
+            </div>
+          )}
+        </div>
+
+        <div className="db-export-footer">
+          <button className="db-export-btn db-export-btn--secondary" onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            className="db-export-btn db-export-btn--primary"
+            onClick={handleExport}
+            disabled={exporting}
+          >
+            {exporting ? 'Exporting...' : 'Export'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/Export/ExportToolbarControls.tsx

@@ -0,0 +1,183 @@
+/**
+ * ExportToolbarControls — toolbar-right slot content.
+ *
+ * Renders a "..." overflow menu on the right side of the toolbar
+ * containing export actions (document export + video export).
+ *
+ * Must be rendered inside <EditorProvider> so useEditorContext() works.
+ */
+
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useEditorContext } from '@bendyline/squisq-editor-react';
+import { getThemeSummaries } from '@bendyline/squisq/schemas';
+import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import { VideoExportModal } from '@bendyline/squisq-video-react';
+import { PLAYER_BUNDLE } from '@bendyline/squisq-react/standalone-source';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import type { ExportOptions } from './export-options.js';
+import {
+  DEFAULT_OPTIONS,
+  FORMAT_EXTENSIONS,
+  loadLastExportOptions,
+  saveExportOptions,
+} from './export-options.js';
+import { ExportDialog } from './ExportDialog.js';
+import { runExport } from './run-export.js';
+
+export interface ExportToolbarControlsProps {
+  /** Currently selected file path — used to derive the download filename. */
+  selectedFile: string | null;
+  /** Media container for resolving images during export. */
+  mediaContainer?: ContentContainer | null;
+}
+
+/** Build the quick-export label from saved options. */
+function quickLabel(opts: ExportOptions): string {
+  const ext = FORMAT_EXTENSIONS[opts.format].toUpperCase().replace('.', '');
+  const parts: string[] = [];
+
+  if (opts.themeId !== 'standard') {
+    const theme = getThemeSummaries().find((t) => t.id === opts.themeId);
+    if (theme) parts.push(theme.name);
+  }
+  if (opts.format === 'pptx' && opts.transformStyle) {
+    const transform = getTransformStyleSummaries().find((t) => t.id === opts.transformStyle);
+    if (transform) parts.push(transform.name);
+  }
+
+  if (parts.length > 0) {
+    return `Export ${ext} with ${parts.join(' + ')}`;
+  }
+  return `Export ${ext}`;
+}
+
+export function ExportToolbarControls({
+  selectedFile,
+  mediaContainer,
+}: ExportToolbarControlsProps) {
+  const { markdownSource } = useEditorContext();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [videoModalOpen, setVideoModalOpen] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const lastOptions = loadLastExportOptions();
+
+  /** Build a Doc from the current markdown for video export. */
+  const doc = useMemo(() => {
+    if (!videoModalOpen) return null;
+    const mdDoc = parseMarkdown(markdownSource);
+    return markdownToDoc(mdDoc);
+  }, [videoModalOpen, markdownSource]);
+
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [menuOpen]);
+
+  const handleToggleMenu = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleOpenDialog = useCallback(() => {
+    setMenuOpen(false);
+    setDialogOpen(true);
+  }, []);
+
+  const handleCloseDialog = useCallback(() => {
+    setDialogOpen(false);
+  }, []);
+
+  const handleOpenVideoModal = useCallback(() => {
+    setMenuOpen(false);
+    setVideoModalOpen(true);
+  }, []);
+
+  const handleCloseVideoModal = useCallback(() => {
+    setVideoModalOpen(false);
+  }, []);
+
+  const handleExport = useCallback(
+    async (opts: ExportOptions) => {
+      setExporting(true);
+      try {
+        await runExport(markdownSource, selectedFile, opts, mediaContainer);
+      } finally {
+        setExporting(false);
+        setDialogOpen(false);
+      }
+    },
+    [markdownSource, selectedFile, mediaContainer],
+  );
+
+  const handleQuickExport = useCallback(async () => {
+    if (!lastOptions) return;
+    setMenuOpen(false);
+    setExporting(true);
+    try {
+      saveExportOptions(lastOptions);
+      await runExport(markdownSource, selectedFile, lastOptions, mediaContainer);
+    } finally {
+      setExporting(false);
+    }
+  }, [lastOptions, markdownSource, selectedFile, mediaContainer]);
+
+  return (
+    <>
+      <div className="db-toolbar-menu" ref={menuRef}>
+        <button
+          className="db-toolbar-menu-trigger"
+          onClick={handleToggleMenu}
+          aria-label="More actions"
+          title="More actions"
+        >
+          &middot;&middot;&middot;
+        </button>
+
+        {menuOpen && (
+          <div className="db-toolbar-menu-dropdown">
+            {lastOptions && (
+              <button
+                className="db-toolbar-menu-item"
+                onClick={handleQuickExport}
+                disabled={exporting}
+              >
+                {quickLabel(lastOptions)}
+              </button>
+            )}
+            <button className="db-toolbar-menu-item" onClick={handleOpenDialog}>
+              Export...
+            </button>
+            <div className="db-toolbar-menu-divider" />
+            <button className="db-toolbar-menu-item" onClick={handleOpenVideoModal}>
+              Export Video...
+            </button>
+          </div>
+        )}
+      </div>
+
+      {dialogOpen && (
+        <ExportDialog
+          initial={lastOptions ?? DEFAULT_OPTIONS}
+          exporting={exporting}
+          onExport={handleExport}
+          onClose={handleCloseDialog}
+        />
+      )}
+
+      {videoModalOpen && doc && (
+        <VideoExportModal doc={doc} playerScript={PLAYER_BUNDLE} onClose={handleCloseVideoModal} />
+      )}
+    </>
+  );
+}

package/src/Export/export-options.ts

@@ -0,0 +1,57 @@
+/**
+ * Export option types and localStorage persistence for quick-export.
+ */
+
+export type ExportFormat = 'docx' | 'pdf' | 'pptx' | 'md' | 'html';
+
+export interface ExportOptions {
+  format: ExportFormat;
+  themeId: string;
+  /** Transform style for PPTX — controls how content is segmented and styled. */
+  transformStyle: string;
+  /** Only applies to PDF */
+  pageSize: 'letter' | 'a4';
+}
+
+export const FORMAT_LABELS: Record<ExportFormat, string> = {
+  docx: 'Word Document (.docx)',
+  pdf: 'PDF (.pdf)',
+  pptx: 'PowerPoint (.pptx)',
+  md: 'Markdown (.md)',
+  html: 'HTML (.html)',
+};
+
+export const FORMAT_EXTENSIONS: Record<ExportFormat, string> = {
+  docx: '.docx',
+  pdf: '.pdf',
+  pptx: '.pptx',
+  md: '.md',
+  html: '.html',
+};
+
+const STORAGE_KEY = 'docblocks-export-options';
+
+export const DEFAULT_OPTIONS: ExportOptions = {
+  format: 'pdf',
+  themeId: 'standard',
+  transformStyle: 'documentary',
+  pageSize: 'letter',
+};
+
+export function loadLastExportOptions(): ExportOptions | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw) as ExportOptions;
+  } catch {
+    return null;
+  }
+}
+
+export function saveExportOptions(options: ExportOptions): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
+  } catch {
+    // Ignore storage errors
+  }
+}

package/src/Export/index.ts

@@ -0,0 +1,5 @@
+export { ExportToolbarControls } from './ExportToolbarControls.js';
+export type { ExportToolbarControlsProps } from './ExportToolbarControls.js';
+export { ExportDialog } from './ExportDialog.js';
+export type { ExportDialogProps } from './ExportDialog.js';
+export type { ExportFormat, ExportOptions } from './export-options.js';

package/src/Export/run-export.ts

@@ -0,0 +1,238 @@
+/**
+ * Execute an export using @bendyline/squisq-formats.
+ */
+
+import type {
+  MarkdownDocument,
+  MarkdownBlockNode,
+  MarkdownInlineNode,
+} from '@bendyline/squisq/markdown';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import { applyTransform } from '@bendyline/squisq/transform';
+import { markdownDocToDocx } from '@bendyline/squisq-formats/docx';
+import { markdownDocToPdf } from '@bendyline/squisq-formats/pdf';
+import { docToPptx } from '@bendyline/squisq-formats/pptx';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import type { ExportOptions, ExportFormat } from './export-options.js';
+import { FORMAT_EXTENSIONS } from './export-options.js';
+
+const MIME_TYPES: Record<ExportFormat, string> = {
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  pdf: 'application/pdf',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  md: 'text/markdown',
+  html: 'text/html',
+};
+
+/** Trigger a browser download for a Blob. */
+function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+/** Derive a filename from the selected file path and export format. */
+function buildFilename(selectedFile: string | null, format: ExportFormat): string {
+  const base = selectedFile ? selectedFile.replace(/^\//, '').replace(/\.[^.]+$/, '') : 'document';
+  return base + FORMAT_EXTENSIONS[format];
+}
+
+/** Run the export and trigger a download. */
+export async function runExport(
+  markdown: string,
+  selectedFile: string | null,
+  options: ExportOptions,
+  mediaContainer?: ContentContainer | null,
+): Promise<void> {
+  const filename = buildFilename(selectedFile, options.format);
+  const themeId = options.themeId !== 'standard' ? options.themeId : undefined;
+
+  if (options.format === 'md') {
+    downloadBlob(new Blob([markdown], { type: MIME_TYPES.md }), filename);
+    return;
+  }
+
+  if (options.format === 'html') {
+    const html = wrapMarkdownAsHtml(markdown);
+    downloadBlob(new Blob([html], { type: MIME_TYPES.html }), filename);
+    return;
+  }
+
+  const doc = parseMarkdown(markdown);
+
+  if (options.format === 'docx') {
+    const images = mediaContainer ? await resolveImages(doc, mediaContainer) : undefined;
+    const buf = await markdownDocToDocx(doc, { themeId, images });
+    downloadBlob(new Blob([buf], { type: MIME_TYPES.docx }), filename);
+    return;
+  }
+
+  if (options.format === 'pdf') {
+    const buf = await markdownDocToPdf(doc, {
+      themeId,
+      pageSize: options.pageSize,
+    });
+    downloadBlob(new Blob([buf], { type: MIME_TYPES.pdf }), filename);
+    return;
+  }
+
+  if (options.format === 'pptx') {
+    // Use the full transform pipeline: markdown → Doc → transform → PPTX
+    const baseDoc = markdownToDoc(doc);
+    const transformed = applyTransform(baseDoc, options.transformStyle);
+    const enrichedDoc = transformed.doc;
+    if (themeId) {
+      enrichedDoc.themeId = themeId;
+    }
+    const buf = await docToPptx(enrichedDoc, { themeId });
+    downloadBlob(new Blob([buf], { type: MIME_TYPES.pptx }), filename);
+    return;
+  }
+}
+
+/** Wrap raw markdown in a basic styled HTML page. */
+function wrapMarkdownAsHtml(markdown: string): string {
+  // Convert markdown to simple HTML via the parser
+  const doc = parseMarkdown(markdown);
+  // Build a minimal representation from the parsed nodes
+  const lines: string[] = [];
+  for (const node of doc.children) {
+    lines.push(nodeToHtml(node));
+  }
+  const body = lines.join('\n');
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Document</title>
+<style>
+  body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; line-height: 1.6; color: #1f2937; }
+  h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.5em; }
+  pre { background: #f3f4f6; padding: 1em; border-radius: 4px; overflow-x: auto; }
+  code { background: #f3f4f6; padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
+  pre code { background: none; padding: 0; }
+  blockquote { border-left: 3px solid #d1d5db; margin-left: 0; padding-left: 1em; color: #6b7280; }
+  img { max-width: 100%; }
+  a { color: #3b82f6; }
+</style>
+</head>
+<body>
+${body}
+</body>
+</html>`;
+}
+
+/** Convert a markdown AST node to HTML (basic). */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function nodeToHtml(node: any): string {
+  if (!node) return '';
+  switch (node.type) {
+    case 'heading': {
+      const tag = `h${node.depth ?? 1}`;
+      return `<${tag}>${childrenToHtml(node)}</${tag}>`;
+    }
+    case 'paragraph':
+      return `<p>${childrenToHtml(node)}</p>`;
+    case 'text':
+      return escapeHtml(node.value ?? '');
+    case 'strong':
+      return `<strong>${childrenToHtml(node)}</strong>`;
+    case 'emphasis':
+      return `<em>${childrenToHtml(node)}</em>`;
+    case 'delete':
+      return `<del>${childrenToHtml(node)}</del>`;
+    case 'inlineCode':
+      return `<code>${escapeHtml(node.value ?? '')}</code>`;
+    case 'code':
+      return `<pre><code>${escapeHtml(node.value ?? '')}</code></pre>`;
+    case 'blockquote':
+      return `<blockquote>${childrenToHtml(node)}</blockquote>`;
+    case 'list': {
+      const tag = node.ordered ? 'ol' : 'ul';
+      return `<${tag}>${childrenToHtml(node)}</${tag}>`;
+    }
+    case 'listItem':
+      return `<li>${childrenToHtml(node)}</li>`;
+    case 'link':
+      return `<a href="${escapeAttr(node.url ?? '')}">${childrenToHtml(node)}</a>`;
+    case 'image':
+      return `<img src="${escapeAttr(node.url ?? '')}" alt="${escapeAttr(node.alt ?? '')}" />`;
+    case 'thematicBreak':
+      return '<hr />';
+    default:
+      return node.children ? childrenToHtml(node) : escapeHtml(node.value ?? '');
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function childrenToHtml(node: any): string {
+  if (!node.children) return node.value ? escapeHtml(node.value) : '';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return node.children.map((c: any) => nodeToHtml(c)).join('');
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeAttr(s: string): string {
+  return escapeHtml(s).replace(/"/g, '&quot;');
+}
+
+const IMAGE_MIME: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+};
+
+/** Walk the markdown AST and collect all image URLs. */
+function collectImageUrls(doc: MarkdownDocument): string[] {
+  const urls: string[] = [];
+  function walkBlocks(nodes: MarkdownBlockNode[]): void {
+    for (const node of nodes) {
+      if ('children' in node && Array.isArray(node.children)) {
+        // Check if children are inline or block nodes
+        for (const child of node.children as (MarkdownBlockNode | MarkdownInlineNode)[]) {
+          if (child.type === 'image') {
+            urls.push((child as { url: string }).url);
+          } else if ('children' in child && Array.isArray(child.children)) {
+            walkBlocks(child.children as MarkdownBlockNode[]);
+          }
+        }
+      }
+    }
+  }
+  walkBlocks(doc.children);
+  return urls;
+}
+
+/** Resolve image URLs to binary data from a ContentContainer. */
+async function resolveImages(
+  doc: MarkdownDocument,
+  container: ContentContainer,
+): Promise<Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>> {
+  const urls = collectImageUrls(doc);
+  const map = new Map<string, { data: ArrayBuffer | Uint8Array; contentType: string }>();
+
+  for (const url of urls) {
+    if (map.has(url)) continue;
+    // Skip external URLs
+    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:'))
+      continue;
+    const data = await container.readFile(url);
+    if (!data) continue;
+    const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
+    const contentType = IMAGE_MIME[ext] || 'image/png';
+    map.set(url, { data, contentType });
+  }
+
+  return map;
+}