@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/diagram/useDiagramData.ts

@@ -0,0 +1,126 @@
+/**
+ * Read diagram nodes + edges from the live Tiptap state.
+ *
+ * For a given parent heading position, walks the diagram section's child
+ * headings, builds synthetic `Block` objects from their text + Pandoc
+ * attributes, runs `computeDiagramLayout` from core to fill in missing
+ * positions, and returns the result in the shape React Flow consumes.
+ *
+ * The hook re-derives on every editor transaction — no caching layer
+ * means there's nothing to invalidate when the user types or the markdown
+ * is reloaded from disk.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { Block } from '@bendyline/squisq/schemas';
+import { computeDiagramLayout } from '@bendyline/squisq/doc';
+import { listDiagramChildren } from './diagramCommands';
+
+export interface DiagramRFNode {
+  id: string;
+  position: { x: number; y: number };
+  data: { label: string };
+  type?: string;
+  /** Per-node width override (from the heading's `w=` Pandoc param). */
+  width?: number;
+  /** Per-node height override (from the heading's `h=` Pandoc param). */
+  height?: number;
+}
+
+export interface DiagramRFEdge {
+  id: string;
+  source: string;
+  target: string;
+  label?: string;
+}
+
+export interface DiagramData {
+  nodes: DiagramRFNode[];
+  edges: DiagramRFEdge[];
+  warnings: string[];
+}
+
+export function useDiagramData(editor: Editor, parentPos: number): DiagramData {
+  // Track a version counter that bumps on every editor transaction so the
+  // hook re-renders. We avoid storing the full doc to keep references
+  // stable for React Flow's internal memoisation.
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    const onUpdate = () => setVersion((v) => v + 1);
+    editor.on('transaction', onUpdate);
+    return () => {
+      editor.off('transaction', onUpdate);
+    };
+  }, [editor]);
+
+  return useMemo(() => {
+    const children = listDiagramChildren(editor, parentPos);
+    // Per-node size overrides keyed by id, so the post-layout pass can
+    // re-attach them without polluting the Block schema used by SSR.
+    const sizeOverrides = new Map<string, { width?: number; height?: number }>();
+    // Build synthetic Blocks for the layout helper.
+    const syntheticBlocks: Block[] = children.map((c) => {
+      const params = c.attrs.params ?? {};
+      const xRaw = params.x;
+      const yRaw = params.y;
+      const x = xRaw != null ? Number(xRaw) : undefined;
+      const y = yRaw != null ? Number(yRaw) : undefined;
+      const wRaw = params.w;
+      const hRaw = params.h;
+      const w = wRaw != null ? Number(wRaw) : undefined;
+      const h = hRaw != null ? Number(hRaw) : undefined;
+      if (Number.isFinite(w) || Number.isFinite(h)) {
+        sizeOverrides.set(c.id, {
+          ...(Number.isFinite(w) ? { width: w as number } : {}),
+          ...(Number.isFinite(h) ? { height: h as number } : {}),
+        });
+      }
+      const blockMeta = c.attrs.blockMeta;
+      const text = getHeadingText(c.node);
+      return {
+        id: c.id,
+        startTime: 0,
+        duration: 0,
+        audioSegment: 0,
+        title: text || c.id,
+        ...(Number.isFinite(x) ? { x: x as number } : {}),
+        ...(Number.isFinite(y) ? { y: y as number } : {}),
+        ...(blockMeta?.connectsTo ? { connectsTo: blockMeta.connectsTo } : {}),
+        ...(c.attrs.classes ? { classes: c.attrs.classes } : {}),
+      };
+    });
+
+    const layout = computeDiagramLayout(syntheticBlocks);
+
+    const nodes: DiagramRFNode[] = layout.nodes.map((n) => {
+      const size = sizeOverrides.get(n.id);
+      return {
+        id: n.id,
+        position: { x: n.x, y: n.y },
+        data: { label: n.label },
+        ...(size?.width != null ? { width: size.width } : {}),
+        ...(size?.height != null ? { height: size.height } : {}),
+      };
+    });
+    const edges: DiagramRFEdge[] = layout.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      ...(e.type ? { label: e.type } : {}),
+    }));
+
+    return { nodes, edges, warnings: layout.warnings };
+    // `version` is the dependency we track for transactions; editor and
+    // parentPos shouldn't change on re-render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, parentPos, version]);
+}
+
+function getHeadingText(node: import('@tiptap/pm/model').Node): string {
+  let text = '';
+  node.content.forEach((child) => {
+    if (child.isText) text += child.text ?? '';
+  });
+  return text;
+}

package/src/embeddedMedia.ts

@@ -0,0 +1,78 @@
+/**
+ * embeddedMedia
+ *
+ * Finds audio/video embedded directly in a block's body — recorder output
+ * (`<video src="…">` / `<audio src="…">` HTML tags), dropped files, or markdown
+ * links/images to a media file — as opposed to authored `{[audio …]}` clip
+ * annotations. The timeline surfaces these so authors see (and can re-time) the
+ * media they inserted; editing one converts it to a timed clip annotation.
+ */
+
+import type { Block } from '@bendyline/squisq/schemas';
+
+const VIDEO_EXT = new Set(['webm', 'mp4', 'mov', 'm4v', 'ogv']);
+const AUDIO_EXT = new Set(['mp3', 'wav', 'ogg', 'oga', 'm4a', 'aac', 'flac', 'opus']);
+
+/** Audio/video kind inferred from a URL's extension, or null for other files. */
+export function mediaKindFromUrl(url: string): 'audio' | 'video' | null {
+  const ext = url.split('?')[0].split('#')[0].split('.').pop()?.toLowerCase();
+  if (!ext) return null;
+  if (VIDEO_EXT.has(ext)) return 'video';
+  if (AUDIO_EXT.has(ext)) return 'audio';
+  return null;
+}
+
+export interface EmbeddedMedia {
+  src: string;
+  kind: 'audio' | 'video';
+  /** 1-based source line of the embed, for re-timing / relocation. */
+  sourceLine?: number;
+}
+
+/** Recursively collect embedded audio/video from a block's body content. */
+export function collectEmbeddedMedia(block: Block): EmbeddedMedia[] {
+  const out: EmbeddedMedia[] = [];
+
+  const visit = (node: unknown, line: number | undefined): void => {
+    if (!node || typeof node !== 'object') return;
+    const n = node as {
+      type?: string;
+      url?: unknown;
+      tagName?: string;
+      attributes?: Record<string, string>;
+      children?: unknown;
+      htmlChildren?: unknown;
+      position?: { start?: { line?: number } };
+    };
+    const here = n.position?.start?.line ?? line;
+
+    // Markdown image/link to a media file.
+    if ((n.type === 'image' || n.type === 'link') && typeof n.url === 'string') {
+      const kind = mediaKindFromUrl(n.url);
+      if (kind) out.push({ src: n.url, kind, sourceLine: here });
+    }
+
+    // Raw HTML `<video>` / `<audio>` element (recorder output). The src can be
+    // on the element itself or on a nested `<source>`.
+    if (n.type === 'htmlElement' && (n.tagName === 'video' || n.tagName === 'audio')) {
+      const kind = n.tagName === 'video' ? 'video' : 'audio';
+      let src = typeof n.attributes?.src === 'string' ? n.attributes.src : undefined;
+      if (!src && Array.isArray(n.children)) {
+        for (const child of n.children) {
+          const c = child as { tagName?: string; attributes?: Record<string, string> };
+          if (c.tagName === 'source' && typeof c.attributes?.src === 'string') {
+            src = c.attributes.src;
+            break;
+          }
+        }
+      }
+      if (src) out.push({ src, kind, sourceLine: here });
+    }
+
+    if (Array.isArray(n.children)) n.children.forEach((c) => visit(c, here));
+    if (Array.isArray(n.htmlChildren)) n.htmlChildren.forEach((c) => visit(c, here));
+  };
+
+  (block.contents ?? []).forEach((node) => visit(node, undefined));
+  return out;
+}

package/src/frontmatter.ts

@@ -0,0 +1,29 @@
+/**
+ * frontmatter
+ *
+ * Small helpers for the YAML frontmatter block at the top of a markdown
+ * document. The WYSIWYG editor hides frontmatter from its editing surface
+ * (and re-prepends it on save), and the block-at-a-time slicer
+ * (`blockRange.ts`) needs to know where the body starts so it never folds
+ * frontmatter into a block slice. Both share this one definition.
+ */
+
+/** Regex matching a YAML frontmatter block at the start of the document. */
+export const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+
+/** Strip YAML frontmatter from markdown, returning both parts. */
+export function stripFrontmatter(md: string): { body: string; frontmatter: string } {
+  const m = md.match(FRONTMATTER_RE);
+  if (!m) return { body: md, frontmatter: '' };
+  return { body: md.slice(m[0].length), frontmatter: m[0] };
+}
+
+/**
+ * Character offset where the document body begins — i.e. the length of the
+ * leading frontmatter block (including its trailing newline), or 0 when the
+ * source has no frontmatter.
+ */
+export function frontmatterEndOffset(source: string): number {
+  const m = source.match(FRONTMATTER_RE);
+  return m ? m[0].length : 0;
+}

package/src/headingTransition.ts

@@ -0,0 +1,231 @@
+/**
+ * headingTransition
+ *
+ * Read and write a block's transition (`transition` / `transitionDirection` /
+ * `transitionDuration`) on a heading, in both editing surfaces:
+ *
+ * - Markdown (Monaco): operate on the raw heading line string.
+ * - WYSIWYG (Tiptap): operate on the heading node's `dataBlockAttrs` string
+ *   (the inner of the Pandoc `{…}` block, no braces — matching how
+ *   `tiptapBridge` stores and re-emits it).
+ *
+ * Transitions are stored in the Pandoc `{#id .class key=value}` attribute
+ * block, NOT the `{[template …]}` annotation. That mirrors the canonical
+ * serializer (`core/doc/docToMarkdown.ts` → `ensureTransitionAttributes`,
+ * which always emits the `{…}` form) and `diagram/diagramCommands.ts`, so a
+ * value set here round-trips through a Doc render without being duplicated
+ * or moved. Reads still look at the `{[…]}` params too, so a hand-typed
+ * `{[title transition=fade]}` shows up in the picker.
+ *
+ * All the brace-matching / tokenizing / serializing is delegated to the
+ * shared core helpers so this stays in lockstep with the parser by import
+ * rather than by copied regexes.
+ */
+
+import {
+  matchTrailingTemplateAnnotation,
+  matchTrailingPandocAttr,
+  parsePandocAttrTokens,
+  serializePandocAttributes,
+  tokenizeAttrTokens,
+  splitKeyValueToken,
+  type HeadingAttributes,
+} from '@bendyline/squisq/markdown';
+
+/** Raw (un-coerced) transition attribute values for one block. */
+export interface TransitionFields {
+  /** `transition` value. Empty string means "none" (`cut`). */
+  type: string;
+  /** `transitionDirection` value, or '' when unset. */
+  direction: string;
+  /** `transitionDuration` value (raw, e.g. `0.7` or `700ms`), or '' when unset. */
+  duration: string;
+}
+
+export const EMPTY_TRANSITION: TransitionFields = { type: '', direction: '', duration: '' };
+
+/** The three keys this module owns, in canonical emit order. */
+const TRANSITION_KEYS = ['transition', 'transitionDirection', 'transitionDuration'] as const;
+
+const HEADING_LINE_RE = /^(#{1,6}\s+)([\s\S]*)$/;
+
+// ============================================
+// params map ⇄ fields
+// ============================================
+
+function fieldsFromParams(params: Record<string, string> | undefined): TransitionFields {
+  if (!params) return { ...EMPTY_TRANSITION };
+  return {
+    type: params.transition ?? '',
+    direction: params.transitionDirection ?? '',
+    duration: params.transitionDuration ?? '',
+  };
+}
+
+/**
+ * Return a new params map with the transition keys rewritten from `next`,
+ * preserving every other key in its original order. When `type` is empty
+ * (none), all three transition keys are dropped; direction/duration are only
+ * written when a type is present (they're meaningless on their own).
+ */
+function applyFieldsToParams(
+  params: Record<string, string>,
+  next: TransitionFields,
+): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(params)) {
+    if ((TRANSITION_KEYS as readonly string[]).includes(key)) continue;
+    out[key] = value;
+  }
+  if (next.type) {
+    out.transition = next.type;
+    if (next.direction) out.transitionDirection = next.direction;
+    if (next.duration) out.transitionDuration = next.duration;
+  }
+  return out;
+}
+
+/** Parse a bare `key=value …` token string into a params map. */
+function paramsFromTokenString(input: string, skipFirstToken: boolean): Record<string, string> {
+  const tokens = tokenizeAttrTokens(input);
+  const params: Record<string, string> = {};
+  for (const token of skipFirstToken ? tokens.slice(1) : tokens) {
+    const kv = splitKeyValueToken(token);
+    if (kv) params[kv.key] = kv.value;
+  }
+  return params;
+}
+
+// ============================================
+// Heading line (Markdown / Monaco view)
+// ============================================
+
+interface SplitHeadingLine {
+  /** `## ` */
+  prefix: string;
+  /** Bare heading text (trailing whitespace stripped). */
+  text: string;
+  /** Inner of the trailing Pandoc `{…}` block, or null. */
+  pandocInner: string | null;
+  /** Verbatim trailing `{[…]}` template annotation (no leading space), or ''. */
+  templateText: string;
+}
+
+/**
+ * Split a heading line into its prefix, bare text, and trailing annotation
+ * blocks. Mirrors the peel-off order in `tiptapBridge` / core's parser:
+ * the `{[…]}` template annotation sits at the very end, the Pandoc `{…}`
+ * block just before it. Returns null when `line` is not a heading.
+ */
+function splitHeadingLine(line: string): SplitHeadingLine | null {
+  const m = line.match(HEADING_LINE_RE);
+  if (!m) return null;
+  let rest = m[2];
+
+  let templateText = '';
+  const tm = matchTrailingTemplateAnnotation(rest);
+  if (tm) {
+    templateText = rest.slice(tm.index).trim();
+    rest = rest.slice(0, tm.index);
+  }
+
+  let pandocInner: string | null = null;
+  const pm = matchTrailingPandocAttr(rest);
+  if (pm) {
+    pandocInner = pm.inner;
+    rest = rest.slice(0, pm.index);
+  }
+
+  return { prefix: m[1], text: rest.replace(/\s+$/, ''), pandocInner, templateText };
+}
+
+/**
+ * Read the transition fields off a heading line. Looks in both the Pandoc
+ * `{…}` block (canonical) and the `{[…]}` template params (hand-typed),
+ * with the Pandoc block taking precedence. Returns the empty transition for
+ * non-heading lines.
+ */
+export function readHeadingLineTransition(line: string): TransitionFields {
+  const split = splitHeadingLine(line);
+  if (!split) return { ...EMPTY_TRANSITION };
+  const fromTemplate = split.templateText
+    ? paramsFromTokenString(stripTemplateBraces(split.templateText), true)
+    : {};
+  const fromPandoc = split.pandocInner
+    ? (parsePandocAttrTokens(split.pandocInner).params ?? {})
+    : {};
+  return fieldsFromParams({ ...fromTemplate, ...fromPandoc });
+}
+
+/**
+ * Return `line` with its transition rewritten from `next`, writing into the
+ * Pandoc `{…}` block and leaving the `{[…]}` template annotation untouched.
+ * Non-heading lines are returned unchanged.
+ */
+export function setHeadingLineTransition(line: string, next: TransitionFields): string {
+  const split = splitHeadingLine(line);
+  if (!split) return line;
+  const attrs: HeadingAttributes = split.pandocInner
+    ? parsePandocAttrTokens(split.pandocInner)
+    : {};
+  attrs.params = applyFieldsToParams(attrs.params ?? {}, next);
+  const pandoc = pandocBlockOrNull(attrs);
+
+  let out = split.prefix + split.text;
+  if (pandoc) out += ` ${pandoc}`;
+  if (split.templateText) out += ` ${split.templateText}`;
+  return out;
+}
+
+/** Strip the outer `{[` … `]}` from a verbatim template annotation. */
+function stripTemplateBraces(templateText: string): string {
+  const m = templateText.match(/^\{\[([\s\S]*)\]\}[\s\]}]*$/);
+  return m ? m[1] : templateText;
+}
+
+// ============================================
+// data-block-attrs (WYSIWYG / Tiptap view)
+// ============================================
+
+/**
+ * Read the transition fields from a heading node's `dataBlockAttrs` (Pandoc
+ * inner) plus `dataTemplateParams` (the `{[…]}` params). Pandoc wins.
+ */
+export function readBlockAttrsTransition(
+  blockAttrsInner: string | null | undefined,
+  templateParams: string | null | undefined,
+): TransitionFields {
+  const fromTemplate = templateParams ? paramsFromTokenString(templateParams, false) : {};
+  const fromPandoc = blockAttrsInner ? (parsePandocAttrTokens(blockAttrsInner).params ?? {}) : {};
+  return fieldsFromParams({ ...fromTemplate, ...fromPandoc });
+}
+
+/**
+ * Rewrite the transition in a heading node's `dataBlockAttrs` inner string.
+ * Returns the new inner (no braces), or null when the block carries no
+ * attributes at all — matching how `tiptapBridge` stores `dataBlockAttrs`
+ * (absent attribute → null, not `{}`).
+ */
+export function setBlockAttrsTransition(
+  blockAttrsInner: string | null | undefined,
+  next: TransitionFields,
+): string | null {
+  const attrs: HeadingAttributes = blockAttrsInner ? parsePandocAttrTokens(blockAttrsInner) : {};
+  attrs.params = applyFieldsToParams(attrs.params ?? {}, next);
+  const pandoc = pandocBlockOrNull(attrs);
+  return pandoc ? pandoc.slice(1, -1) : null;
+}
+
+// ============================================
+// shared
+// ============================================
+
+/**
+ * Serialize `attrs` to a `{…}` block, or null when there's nothing to emit.
+ * `serializePandocAttributes` returns the literal `{}` marker for an empty
+ * attribute set; we treat that as "no block".
+ */
+function pandocBlockOrNull(attrs: HeadingAttributes): string | null {
+  const raw = serializePandocAttributes(attrs);
+  return raw == null || raw === '{}' ? null : raw;
+}