@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/RecorderEntry.tsx

@@ -1,162 +0,0 @@
-/**
- * RecorderEntry — toolbar slot that wires `RecorderPanel` from
- * `@bendyline/squisq-recorder-react` into the editor.
- *
- * Reads `mediaProvider`, `workspaceContainer`, `activeView`,
- * `tiptapEditor`, and the markdown editing helpers from
- * `useEditorContext()`. On a successful save it:
- *   - inserts an HTML5 media element at the cursor — `<video>` for
- *     camera / screen recordings, `<audio>` for narration / mic
- *     recordings — which the markdown renderer turns into an inline
- *     `<InlineVideoPlayer>` / `<InlineAudioPlayer>` with native
- *     controls;
- *   - for narration, also annotates the nearest heading with
- *     `{[audio=filename]}` so `resolveAudioMapping()` continues to tie
- *     the recording to that block during slideshow playback;
- *   - bumps `mediaRevision` so any blob URLs the media bin cached for
- *     the previous file list are invalidated.
- *
- * The component returns `null` when no `mediaProvider` is wired —
- * recording without a place to write the captured bytes is a
- * misconfiguration, not a feature.
- */
-
-import { useCallback } from 'react';
-import { RecorderPanel } from './recorder/RecorderPanel.js';
-import type { RecorderSaveResult } from './recorder/RecorderModal.js';
-import { insertMediaBlock } from './recorder/insertMediaBlock.js';
-import { useEditorContext } from './EditorContext';
-import { markdownFencedCodeLineMask } from './markdownCodeFence';
-
-/**
- * Insert a narration annotation `{[audio=filename]}` onto the heading
- * line currently above the cursor in the Monaco editor. Pure-text
- * insertion at the line's end keeps the markdown valid and matches the
- * shape `resolveAudioMapping()` reads. Returns true if a heading line
- * was found and updated.
- */
-function annotateMonacoHeading(
-  editor: NonNullable<ReturnType<typeof useEditorContext>['monacoEditor']>,
-  filename: string,
-): boolean {
-  const model = editor.getModel();
-  if (!model) return false;
-  const position = editor.getPosition();
-  if (!position) return false;
-  const fencedLines = markdownFencedCodeLineMask(model.getValue());
-  // Walk upward from the cursor to find the nearest heading line.
-  for (let line = position.lineNumber; line >= 1; line--) {
-    if (fencedLines[line - 1]) continue;
-    const text = model.getLineContent(line);
-    if (!/^#{1,6}\s/.test(text)) continue;
-    // Skip if the heading already has an audio annotation — don't
-    // stomp the user's existing wiring. Add a separate annotation in
-    // that case wouldn't help either (resolveAudioMapping reads only
-    // the first audio= entry).
-    if (/\{\[audio=/.test(text)) return true;
-    const trimmed = text.replace(/\s+$/, '');
-    const insertText = ` {[audio=${filename}]}`;
-    const column = trimmed.length + 1;
-    editor.executeEdits('recorder-annotation', [
-      {
-        range: {
-          startLineNumber: line,
-          startColumn: column,
-          endLineNumber: line,
-          endColumn: column,
-        },
-        text: insertText,
-      },
-    ]);
-    return true;
-  }
-  return false;
-}
-
-export function RecorderEntry() {
-  const {
-    mediaProvider,
-    workspaceContainer,
-    activeView,
-    monacoEditor,
-    tiptapEditor,
-    insertAtCursor,
-    bumpMediaRevision,
-    markdownSource,
-    setMarkdownSource,
-    colorScheme,
-  } = useEditorContext();
-
-  const handleSave = useCallback(
-    (result: RecorderSaveResult) => {
-      bumpMediaRevision();
-
-      if (result.source === 'mic') {
-        // Narration — annotate the nearest heading (drives the
-        // slideshow narration pipeline at `core/src/doc/audioMapping.ts`)
-        // *and* insert an inline `<audio controls>` so the user can
-        // audition the recording inside the editor. The two roles are
-        // orthogonal: the annotation is metadata for playback timing,
-        // the HTML tag is an in-editor preview control.
-        if (activeView === 'raw' && monacoEditor) {
-          annotateMonacoHeading(monacoEditor, result.filename);
-        }
-        const audioTag = `<audio src="${result.relativePath}" controls></audio>`;
-        if (activeView === 'wysiwyg' && tiptapEditor) {
-          insertMediaBlock(tiptapEditor, {
-            type: 'audio',
-            attrs: { src: result.relativePath, controls: true },
-          });
-          return;
-        }
-        if (activeView === 'raw' && monacoEditor) {
-          // The annotation went onto the heading line; drop the player
-          // on a fresh line at the cursor.
-          insertAtCursor(`\n\n${audioTag}\n`);
-          return;
-        }
-        setMarkdownSource(markdownSource ? `${markdownSource}\n\n${audioTag}` : audioTag);
-        return;
-      }
-
-      // Camera / screen / screen+mic — inline video player. We pin
-      // width=480 so the editor preview doesn't blow up to natural
-      // resolution on big monitors; the height is intrinsic, so the
-      // aspect ratio is preserved regardless of source dimensions.
-      const videoTag = `<video src="${result.relativePath}" controls width="480"></video>`;
-      if (activeView === 'wysiwyg' && tiptapEditor) {
-        insertMediaBlock(tiptapEditor, {
-          type: 'video',
-          attrs: { src: result.relativePath, controls: true, width: 480 },
-        });
-        return;
-      }
-      if (activeView === 'raw' && monacoEditor) {
-        insertAtCursor(videoTag);
-        return;
-      }
-      setMarkdownSource(markdownSource ? `${markdownSource}\n\n${videoTag}` : videoTag);
-    },
-    [
-      activeView,
-      monacoEditor,
-      tiptapEditor,
-      insertAtCursor,
-      bumpMediaRevision,
-      markdownSource,
-      setMarkdownSource,
-    ],
-  );
-
-  if (!mediaProvider) return null;
-
-  return (
-    <RecorderPanel
-      mediaProvider={mediaProvider}
-      container={workspaceContainer}
-      colorScheme={colorScheme}
-      onSave={handleSave}
-      className="squisq-toolbar-button"
-    />
-  );
-}

package/src/StatusBar.tsx

@@ -1,51 +0,0 @@
-/**
- * StatusBar
- *
- * Bottom status bar showing document statistics and parse status.
- */
-
-import { useMemo } from 'react';
-import { countBlocks } from '@bendyline/squisq/doc';
-import { useEditorContext } from './EditorContext';
-
-export interface StatusBarProps {
-  /** Additional class name */
-  className?: string;
-}
-
-/**
- * Status bar displaying document statistics: character count, word count,
- * block count, and parse/error status.
- */
-export function StatusBar({ className }: StatusBarProps) {
-  const { markdownSource, doc, parseError, isParsing } = useEditorContext();
-
-  const stats = useMemo(() => {
-    const chars = markdownSource.length;
-    const words = markdownSource.trim() ? markdownSource.trim().split(/\s+/).length : 0;
-    const lines = markdownSource.split('\n').length;
-    const blocks = doc ? countBlocks(doc.blocks) : 0;
-    return { chars, words, lines, blocks };
-  }, [markdownSource, doc]);
-
-  return (
-    <div className={`squisq-status-bar ${className || ''}`}>
-      <span className="squisq-status-item">{stats.words} words</span>
-      <span className="squisq-status-item">{stats.chars} chars</span>
-      <span className="squisq-status-item">{stats.lines} lines</span>
-      <span className="squisq-status-item">
-        {stats.blocks} {stats.blocks === 1 ? 'block' : 'blocks'}
-      </span>
-      <span className="squisq-status-spacer" />
-      {isParsing && <span className="squisq-status-item squisq-status-parsing">Parsing…</span>}
-      {parseError && (
-        <span className="squisq-status-item squisq-status-error" title={parseError}>
-          ⚠ Error
-        </span>
-      )}
-      {!isParsing && !parseError && (
-        <span className="squisq-status-item squisq-status-ok">✓ OK</span>
-      )}
-    </div>
-  );
-}

package/src/TemplateAnnotation.ts

@@ -1,167 +0,0 @@
-/**
- * TemplateAnnotation — Tiptap Heading Extension
- *
- * Extends Tiptap's built-in Heading node to support `data-template`,
- * `data-template-params`, and `data-template-empty` HTML attributes. These
- * attributes store the authored template annotation without exposing its raw
- * `{[…]}` syntax in the Write view.
- *
- * When present, the heading renders a visible badge (styled CSS chip)
- * showing the template name, e.g. `[chart]`.
- *
- * The tiptapBridge converts `### Title {[chart]}` markdown into
- * `<h3 data-template="chart">Title</h3>` and back, so this extension
- * ensures Tiptap's schema preserves those attributes through edits.
- */
-
-import Heading from '@tiptap/extension-heading';
-import { templateLabel } from './TemplatePicker';
-import { summarizeBlockProps } from './blockProperties';
-
-/**
- * HeadingWithTemplate — drop-in replacement for Tiptap's Heading that
- * persists template annotation attributes.
- */
-export const HeadingWithTemplate = Heading.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      dataTemplate: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-template') || null,
-        renderHTML: (attributes: Record<string, unknown>) => {
-          if (!attributes.dataTemplate) return {};
-          return { 'data-template': attributes.dataTemplate };
-        },
-      },
-      dataTemplateParams: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-template-params') || null,
-        renderHTML: (attributes: Record<string, unknown>) => {
-          if (!attributes.dataTemplateParams) return {};
-          return { 'data-template-params': attributes.dataTemplateParams };
-        },
-      },
-      dataTemplateEmpty: {
-        default: false,
-        parseHTML: (element: HTMLElement) => element.hasAttribute('data-template-empty'),
-        renderHTML: (attributes: Record<string, unknown>) => {
-          if (!attributes.dataTemplateEmpty) return {};
-          return { 'data-template-empty': 'true' };
-        },
-      },
-      dataBlockAttrs: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-block-attrs') || null,
-        renderHTML: (attributes: Record<string, unknown>) => {
-          if (!attributes.dataBlockAttrs) return {};
-          return { 'data-block-attrs': attributes.dataBlockAttrs };
-        },
-      },
-    };
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    const level = node.attrs.level;
-    const tag = `h${level}`;
-    const templateName = HTMLAttributes['data-template'];
-    // Concise summary of authored block properties (transition / timing),
-    // painted on the props badge so the canvas shows what's set at a glance.
-    const propsSummary = summarizeBlockProps(
-      (HTMLAttributes['data-block-attrs'] as string | undefined) ?? null,
-      (HTMLAttributes['data-template-params'] as string | undefined) ?? null,
-    );
-
-    // Render heading with a trailing badge span. The badge and its inner core
-    // have no real text content — labels/braces are painted via CSS so the
-    // template name never becomes part of serialized heading text (which
-    // would leak into markdown on round-trip).
-    //
-    // When no template is set we still render a subtle "empty" badge so
-    // authors have a visible affordance for opening the template picker
-    // straight from the heading (matches the clicky chip shown for
-    // templated headings). The empty variant has no `data-template`
-    // attribute, so the bridge treats the heading as plain on save.
-    if (templateName) {
-      return [
-        tag,
-        HTMLAttributes,
-        ['span', { class: 'squisq-heading-content' }, 0],
-        [
-          'span',
-          {
-            class: 'squisq-template-badge',
-            contenteditable: 'false',
-            role: 'button',
-            tabindex: '0',
-            'aria-haspopup': 'listbox',
-            title: 'Change block type',
-            'data-template': templateName,
-          },
-          [
-            'span',
-            {
-              class: 'squisq-template-badge-core',
-              'data-template-label': templateLabel(templateName),
-              'aria-hidden': 'true',
-            },
-          ],
-        ],
-        propsBadgeSpec(propsSummary),
-      ];
-    }
-
-    return [
-      tag,
-      HTMLAttributes,
-      ['span', { class: 'squisq-heading-content' }, 0],
-      [
-        'span',
-        {
-          class: 'squisq-template-badge squisq-template-badge--empty',
-          contenteditable: 'false',
-          role: 'button',
-          tabindex: '0',
-          'aria-haspopup': 'listbox',
-          title: 'Choose block type',
-        },
-        [
-          'span',
-          {
-            class: 'squisq-template-badge-core',
-            'data-template-label': 'Block',
-            'aria-hidden': 'true',
-          },
-        ],
-      ],
-      propsBadgeSpec(propsSummary),
-    ];
-  },
-});
-
-/**
- * The block-properties chip rendered beside the template badge — the on-canvas
- * entry point to the {@link BlockPropertiesPopover} (transition, timing, …).
- *
- * Like the template badge, this is an EMPTY inert span: the sliders glyph and
- * the optional `summary` text are painted via CSS (`::before` / `::after` with
- * `content: attr(data-props-summary)`, using the Font Awesome font the editor
- * already loads). Keeping it childless is deliberate — `tiptapToMarkdown`
- * serializes the rendered heading HTML, so any real child node here would risk
- * leaking into the markdown; a `data-*` attribute is stripped with the span.
- * Clicks are delegated in `WysiwygEditor`.
- */
-function propsBadgeSpec(summary: string): [string, Record<string, string>] {
-  const attrs: Record<string, string> = {
-    class: 'squisq-props-badge',
-    contenteditable: 'false',
-    role: 'button',
-    tabindex: '0',
-    'aria-haspopup': 'dialog',
-    title: summary ? `Block properties — ${summary}` : 'Block properties',
-  };
-  // Only set the attribute when there's something to show, so the CSS
-  // `[data-props-summary]` selector cleanly distinguishes "has properties".
-  if (summary) attrs['data-props-summary'] = summary;
-  return ['span', attrs];
-}

package/src/TemplateContentPreview.tsx

@@ -1,56 +0,0 @@
-import { useMemo } from 'react';
-import { BlockRenderer, MediaContext } from '@bendyline/squisq-react';
-import {
-  resolveTemplateContentPreviewResult,
-  type TemplatePreviewSource,
-} from './templateContentPreviewResolver';
-
-export interface TemplateContentPreviewProps {
-  templateName: string;
-  source?: TemplatePreviewSource;
-  fallback: JSX.Element;
-}
-
-export function TemplateContentPreview({
-  templateName,
-  source,
-  fallback,
-}: TemplateContentPreviewProps) {
-  const preview = useMemo(
-    () => (source ? resolveTemplateContentPreviewResult(templateName, source) : null),
-    [templateName, source],
-  );
-
-  if (!source) return fallback;
-
-  if (!preview?.visual) {
-    if (!preview?.warning) return fallback;
-    return (
-      <div
-        className="squisq-template-gallery-content-preview squisq-template-gallery-content-preview--fallback"
-        style={{ aspectRatio: `${source.viewport.width} / ${source.viewport.height}` }}
-        aria-hidden="true"
-      >
-        <div className="squisq-template-gallery-content-preview-fallback">{fallback}</div>
-        <span className="squisq-template-gallery-content-preview-warning">{preview.warning}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="squisq-template-gallery-content-preview"
-      style={{ aspectRatio: `${source.viewport.width} / ${source.viewport.height}` }}
-      aria-hidden="true"
-    >
-      <MediaContext.Provider value={source.mediaProvider ?? null}>
-        <BlockRenderer
-          block={preview.visual}
-          blockTime={0}
-          basePath={source.basePath ?? '/'}
-          viewport={source.viewport}
-        />
-      </MediaContext.Provider>
-    </div>
-  );
-}