@bendyline/docblocks-react 1.1.2 → 2.1.0

package/src/DocBlocksShell/index.ts

@@ -1,2 +0,0 @@
-export { DocBlocksShell } from './DocBlocksShell.js';
-export type { DocBlocksShellProps } from './DocBlocksShell.js';

package/src/Export/ExportDialog.tsx

@@ -1,383 +0,0 @@
-/**
- * ExportDialog — modal for choosing export format and options.
- */
-
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { getThemeSummaries } from '@bendyline/squisq/schemas';
-import type { ExportFormat, ExportOptions, HtmlBundle, HtmlStyle } from './export-options.js';
-import { FORMAT_LABELS, saveExportOptions } from './export-options.js';
-import { loadTransformStyleSummaries, type ExportSummaryOption } from './transform-summaries.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'];
-
-/** Short labels for the Format chip row. The fuller `FORMAT_LABELS` list
- *  is still used as a tooltip so users can confirm the file extension. */
-const FORMAT_CHIP_LABELS: Record<ExportFormat, string> = {
-  pdf: 'PDF',
-  docx: 'Word',
-  pptx: 'PowerPoint',
-  html: 'HTML',
-  md: 'Markdown',
-};
-
-const HTML_STYLE_CHIPS: { key: HtmlStyle; label: string; hint: string }[] = [
-  {
-    key: 'plain',
-    label: 'Plain',
-    hint: 'A lightweight static HTML document.',
-  },
-  {
-    key: 'rendered',
-    label: 'Rendered',
-    hint: 'Renders via SquisqPlayer with themes and playback support.',
-  },
-];
-
-const HTML_BUNDLE_CHIPS: { key: HtmlBundle; label: string; hint: string }[] = [
-  {
-    key: 'single',
-    label: 'Single file',
-    hint: 'One .html file with images embedded as base64 data URIs.',
-  },
-  {
-    key: 'zip',
-    label: 'ZIP archive',
-    hint: 'A .zip with index.html plus separate image (and JS) files.',
-  },
-];
-
-interface ChipOption<T extends string> {
-  key: T;
-  label: string;
-  title?: string;
-}
-
-function ChipRadioGroup<T extends string>({
-  name,
-  value,
-  options,
-  onChange,
-}: {
-  name: string;
-  value: T;
-  options: ChipOption<T>[];
-  onChange: (next: T) => void;
-}) {
-  return (
-    <div className="db-export-chips" role="radiogroup" aria-label={name}>
-      {options.map((opt) => {
-        const active = opt.key === value;
-        return (
-          <button
-            key={opt.key}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            className={`db-export-chip${active ? ' db-export-chip--active' : ''}`}
-            onClick={() => onChange(opt.key)}
-            title={opt.title}
-          >
-            {opt.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-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 [htmlStyle, setHtmlStyle] = useState<HtmlStyle>(initial.htmlStyle);
-  const [htmlBundle, setHtmlBundle] = useState<HtmlBundle>(initial.htmlBundle);
-  const [includeLinkedDocs, setIncludeLinkedDocs] = useState<boolean>(initial.includeLinkedDocs);
-  const [entryAsIndex, setEntryAsIndex] = useState<boolean>(initial.entryAsIndex);
-  const [transforms, setTransforms] = useState<ExportSummaryOption[]>([]);
-  const dialogRef = useRef<HTMLDivElement>(null);
-
-  const themes = getThemeSummaries();
-
-  // Both HTML styles honor themes now: rendered HTML through the
-  // SquisqPlayer's theme system, plain HTML through squisq's
-  // `markdownDocToPlainHtml` which emits theme-driven CSS variables
-  // and Google Fonts links. Show the dropdown for any export format
-  // whose pipeline actually applies the picked theme.
-  const showTheme = format === 'docx' || format === 'pdf' || format === 'pptx' || format === 'html';
-  const showTransform = format === 'pptx';
-  const showPageSize = format === 'pdf';
-  const showHtmlOptions = format === 'html';
-  // Both HTML styles now have a recursive bundle: plain via
-  // `markdownDocsToPlainHtmlBundle`, rendered via
-  // `markdownDocsToHtmlBundle` (which rewrites Doc-tree links to
-  // `.html` before SquisqPlayer serialization). So the option applies
-  // to any HTML export.
-  const showIncludeLinked = format === 'html';
-  // Multi-doc output is inherently a directory tree, so when recursion
-  // is on the Bundle row would only confuse — ZIP is the only valid
-  // packaging. Hide the chip row and surface the implication in a hint.
-  const showHtmlBundle = showHtmlOptions && !includeLinkedDocs;
-  // `entryAsIndex` is only honored in pipelines where we control the
-  // output filename ourselves:
-  //   • single-file HTML downloads → renames `<doc>.html` → `index.html`
-  //   • recursive bundles → passed through to squisq's bundle helpers
-  // In the single-doc ZIP path, squisq's `docToHtmlZip` and our plain-
-  // HTML zip writer always emit `index.html` inside the archive, so the
-  // checkbox has no observable effect — hide it to avoid surfacing an
-  // inert control.
-  const showEntryAsIndex = showHtmlOptions && (htmlBundle === 'single' || includeLinkedDocs);
-
-  useEffect(() => {
-    if (!showTransform) return;
-    let cancelled = false;
-
-    loadTransformStyleSummaries()
-      .then((nextTransforms) => {
-        if (!cancelled) setTransforms(nextTransforms);
-      })
-      .catch(() => {
-        if (!cancelled) setTransforms([]);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [showTransform]);
-
-  const handleExport = useCallback(() => {
-    const opts: ExportOptions = {
-      format,
-      themeId,
-      transformStyle,
-      pageSize,
-      htmlStyle,
-      htmlBundle,
-      includeLinkedDocs: showIncludeLinked && includeLinkedDocs,
-      entryAsIndex: showEntryAsIndex && entryAsIndex,
-    };
-    saveExportOptions(opts);
-    onExport(opts);
-  }, [
-    format,
-    themeId,
-    transformStyle,
-    pageSize,
-    htmlStyle,
-    htmlBundle,
-    includeLinkedDocs,
-    entryAsIndex,
-    showIncludeLinked,
-    showEntryAsIndex,
-    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 — chip radio row for fast switching */}
-          <div className="db-export-field">
-            <span className="db-export-label">Format</span>
-            <ChipRadioGroup
-              name="Format"
-              value={format}
-              options={FORMATS.map((f) => ({
-                key: f,
-                label: FORMAT_CHIP_LABELS[f],
-                title: FORMAT_LABELS[f],
-              }))}
-              onChange={setFormat}
-            />
-          </div>
-
-          {/* HTML style + bundle (HTML only) — also chip rows */}
-          {showHtmlOptions && (
-            <>
-              <div className="db-export-field">
-                <span className="db-export-label">Style</span>
-                <ChipRadioGroup
-                  name="Style"
-                  value={htmlStyle}
-                  options={HTML_STYLE_CHIPS}
-                  onChange={setHtmlStyle}
-                />
-                <span className="db-export-hint">
-                  {HTML_STYLE_CHIPS.find((c) => c.key === htmlStyle)?.hint}
-                </span>
-              </div>
-              {showHtmlBundle && (
-                <div className="db-export-field">
-                  <span className="db-export-label">Bundle</span>
-                  <ChipRadioGroup
-                    name="Bundle"
-                    value={htmlBundle}
-                    options={HTML_BUNDLE_CHIPS}
-                    onChange={setHtmlBundle}
-                  />
-                  <span className="db-export-hint">
-                    {HTML_BUNDLE_CHIPS.find((c) => c.key === htmlBundle)?.hint}
-                  </span>
-                </div>
-              )}
-              {showIncludeLinked && (
-                <div className="db-export-field">
-                  <label className="db-export-checkbox">
-                    <input
-                      type="checkbox"
-                      checked={includeLinkedDocs}
-                      onChange={(e) => setIncludeLinkedDocs(e.target.checked)}
-                    />
-                    <span>Include linked-to documents</span>
-                  </label>
-                  <span className="db-export-hint">
-                    {includeLinkedDocs
-                      ? 'Follows relative .md links from this page and bundles every reachable document as its own .html in a ZIP. Cross-doc links rewrite from .md to .html.'
-                      : 'Only this document is exported.'}
-                  </span>
-                </div>
-              )}
-              {showEntryAsIndex && (
-                <div className="db-export-field">
-                  <label className="db-export-checkbox">
-                    <input
-                      type="checkbox"
-                      checked={entryAsIndex}
-                      onChange={(e) => setEntryAsIndex(e.target.checked)}
-                    />
-                    <span>Name entry page index.html</span>
-                  </label>
-                  <span className="db-export-hint">
-                    {entryAsIndex
-                      ? includeLinkedDocs
-                        ? 'Renames this page to index.html in the ZIP and rewrites any cross-doc links pointing back at it. Drops straight into a static-site host.'
-                        : 'Downloads as index.html instead of the document name. Drops straight into a static-site host.'
-                      : 'Exports under the document name.'}
-                  </span>
-                </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.length === 0 ? (
-                  <option value={transformStyle}>Loading...</option>
-                ) : (
-                  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

@@ -1,313 +0,0 @@
-/**
- * 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, type ComponentType } from 'react';
-import { useEditorContext } from '@bendyline/squisq-editor-react';
-import { getThemeSummaries } from '@bendyline/squisq/schemas';
-import { parseMarkdown } from '@bendyline/squisq/markdown';
-import type { ContentContainer } from '@bendyline/squisq/storage';
-import type { VideoExportModalProps } from '@bendyline/squisq-video-react';
-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';
-import { loadTransformStyleSummaries, type ExportSummaryOption } from './transform-summaries.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;
-}
-
-type ParsedMarkdown = ReturnType<typeof parseMarkdown>;
-
-interface VideoExportModules {
-  Modal: ComponentType<VideoExportModalProps>;
-  markdownToDoc: (doc: ParsedMarkdown) => VideoExportModalProps['doc'];
-  playerScript: string;
-}
-
-let videoExportModulesPromise: Promise<VideoExportModules> | null = null;
-
-function loadVideoExportModules(): Promise<VideoExportModules> {
-  videoExportModulesPromise ??= Promise.all([
-    import('@bendyline/squisq/doc'),
-    import('@bendyline/squisq-video-react'),
-    import('@bendyline/squisq-react/standalone-source'),
-  ]).then(([docModule, videoModule, playerModule]) => ({
-    Modal: videoModule.VideoExportModal,
-    markdownToDoc: docModule.markdownToDoc,
-    playerScript: playerModule.PLAYER_BUNDLE,
-  }));
-  return videoExportModulesPromise;
-}
-
-/** Build the quick-export label from saved options. */
-function quickLabel(opts: ExportOptions, transformSummaries: ExportSummaryOption[]): string {
-  const baseExt = FORMAT_EXTENSIONS[opts.format].toUpperCase().replace('.', '');
-  // Recursive HTML always emits a ZIP (multi-doc tree), regardless of
-  // the saved `htmlBundle` value. Applies to both plain and rendered
-  // styles since both now ship recursive bundle helpers.
-  const isRecursiveHtml = opts.format === 'html' && opts.includeLinkedDocs;
-  const ext =
-    opts.format === 'html' && (opts.htmlBundle === 'zip' || isRecursiveHtml) ? 'ZIP' : baseExt;
-  const parts: string[] = [];
-
-  if (opts.format === 'html' && opts.htmlStyle === 'rendered') {
-    parts.push('rendered');
-  }
-  if (isRecursiveHtml) {
-    parts.push('linked docs');
-  }
-  // Plain HTML also applies themes now (squisq's `markdownDocToPlainHtml`
-  // emits theme-driven CSS), so include the theme name in the quick-
-  // export label for every HTML style — not just rendered.
-  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 = transformSummaries.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, markdownDoc } = useEditorContext();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [videoModalOpen, setVideoModalOpen] = useState(false);
-  const [videoLoading, setVideoLoading] = useState(false);
-  const [videoLoadError, setVideoLoadError] = useState<string | null>(null);
-  const [videoModules, setVideoModules] = useState<VideoExportModules | null>(null);
-  const [videoDoc, setVideoDoc] = useState<VideoExportModalProps['doc'] | null>(null);
-  const [transformSummaries, setTransformSummaries] = useState<ExportSummaryOption[]>([]);
-  const [exporting, setExporting] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const lastOptions = loadLastExportOptions();
-
-  /** Doc's currently-set squisq theme, pulled from the markdown
-   *  frontmatter. The Document Settings dialog and Theme Customizer
-   *  write the theme under `squisq-theme` (canonical) or `theme`
-   *  (legacy); some older docs persist it as `themeId`. We honor all
-   *  three so an author who set their theme anywhere upstream sees it
-   *  pre-selected in the export dialog. */
-  const docThemeId = useMemo(() => {
-    const fm = markdownDoc?.frontmatter as Record<string, unknown> | undefined;
-    if (!fm) return null;
-    const candidates = [fm['squisq-theme'], fm['theme'], fm['themeId']];
-    for (const v of candidates) {
-      if (typeof v === 'string' && v.trim()) return v.trim();
-    }
-    return null;
-  }, [markdownDoc]);
-
-  /** Options used to populate the export dialog. Layered: built-in
-   *  defaults → user's last-chosen export options (if any) → doc's
-   *  current frontmatter theme (wins). The frontmatter override
-   *  guarantees that "set theme in the editor, then export" pre-selects
-   *  the right theme instead of resurrecting whatever the user picked
-   *  for some unrelated previous doc. */
-  const dialogInitial = useMemo(() => {
-    const base = lastOptions ?? DEFAULT_OPTIONS;
-    return docThemeId ? { ...base, themeId: docThemeId } : base;
-  }, [lastOptions, docThemeId]);
-
-  // 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]);
-
-  useEffect(() => {
-    if (
-      !menuOpen ||
-      lastOptions?.format !== 'pptx' ||
-      !lastOptions.transformStyle ||
-      transformSummaries.length > 0
-    ) {
-      return;
-    }
-
-    let cancelled = false;
-    loadTransformStyleSummaries()
-      .then((nextSummaries) => {
-        if (!cancelled) setTransformSummaries(nextSummaries);
-      })
-      .catch(() => {
-        if (!cancelled) setTransformSummaries([]);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [lastOptions?.format, lastOptions?.transformStyle, menuOpen, transformSummaries.length]);
-
-  const handleToggleMenu = useCallback(() => {
-    setMenuOpen((prev) => !prev);
-  }, []);
-
-  const handleOpenDialog = useCallback(() => {
-    setMenuOpen(false);
-    setDialogOpen(true);
-  }, []);
-
-  const handleCloseDialog = useCallback(() => {
-    setDialogOpen(false);
-  }, []);
-
-  const handleOpenVideoModal = useCallback(async () => {
-    setMenuOpen(false);
-    setVideoModalOpen(true);
-    setVideoLoading(true);
-    setVideoLoadError(null);
-
-    try {
-      const modules = videoModules ?? (await loadVideoExportModules());
-      setVideoModules(modules);
-      setVideoDoc(modules.markdownToDoc(parseMarkdown(markdownSource)));
-    } catch {
-      setVideoLoadError('Video export could not be loaded.');
-    } finally {
-      setVideoLoading(false);
-    }
-  }, [markdownSource, videoModules]);
-
-  const handleCloseVideoModal = useCallback(() => {
-    setVideoModalOpen(false);
-    setVideoDoc(null);
-    setVideoLoadError(null);
-  }, []);
-
-  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]);
-
-  const LoadedVideoExportModal = videoModules?.Modal;
-
-  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, transformSummaries)}
-              </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={dialogInitial}
-          exporting={exporting}
-          onExport={handleExport}
-          onClose={handleCloseDialog}
-        />
-      )}
-
-      {videoModalOpen && (videoLoading || videoLoadError) && (
-        <div className="db-dialog-overlay">
-          <div className="db-dialog">
-            <div className="db-dialog-header">
-              <h2 className="db-dialog-title">Export Video</h2>
-              <button
-                className="db-dialog-close"
-                onClick={handleCloseVideoModal}
-                aria-label="Close"
-              >
-                &times;
-              </button>
-            </div>
-            <div className="db-dialog-body">
-              <p className="db-export-hint">{videoLoadError ?? 'Loading...'}</p>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {videoModalOpen &&
-        videoModules &&
-        LoadedVideoExportModal &&
-        videoDoc &&
-        !videoLoading &&
-        !videoLoadError && (
-          <LoadedVideoExportModal
-            doc={videoDoc}
-            playerScript={videoModules.playerScript}
-            onClose={handleCloseVideoModal}
-          />
-        )}
-    </>
-  );
-}