@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/useTimelineClock.ts

@@ -1,76 +0,0 @@
-/**
- * useTimelineClock
- *
- * A minimal real-time playback clock for the timeline view — a
- * `requestAnimationFrame` loop that advances `currentTime` at wall-clock speed
- * between `play()` and `pause()`, clamped to `[0, total]`. No audio element;
- * media playback is driven separately (the timeline feeds `currentTime` to
- * `MediaClipLayer`). Mirrors the fallback timer in `useAudioSync`.
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-export interface TimelineClock {
-  /** Seconds from the start of the timeline. */
-  currentTime: number;
-  isPlaying: boolean;
-  /** Start playing; restarts from 0 when already at the end. */
-  play: () => void;
-  pause: () => void;
-  toggle: () => void;
-  /** Jump to a time (clamped to `[0, total]`). */
-  seek: (t: number) => void;
-}
-
-/** Advance `prev` by `dt` seconds, clamped to `[0, total]`. Pure. */
-export function advanceTime(prev: number, dt: number, total: number): number {
-  if (total <= 0) return 0;
-  return Math.min(total, Math.max(0, prev + dt));
-}
-
-export function useTimelineClock(total: number): TimelineClock {
-  const [currentTime, setCurrentTime] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const rafRef = useRef<number | null>(null);
-  const lastRef = useRef(0);
-
-  // Keep currentTime within the (possibly shrinking) timeline.
-  useEffect(() => {
-    setCurrentTime((t) => Math.min(t, Math.max(0, total)));
-  }, [total]);
-
-  useEffect(() => {
-    if (!isPlaying) return;
-    lastRef.current = performance.now();
-    const tick = (now: number) => {
-      const dt = (now - lastRef.current) / 1000;
-      lastRef.current = now;
-      setCurrentTime((prev) => {
-        const next = advanceTime(prev, dt, total);
-        if (next >= total) {
-          setIsPlaying(false);
-          return total;
-        }
-        return next;
-      });
-      rafRef.current = requestAnimationFrame(tick);
-    };
-    rafRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
-    };
-  }, [isPlaying, total]);
-
-  const play = useCallback(() => {
-    setCurrentTime((t) => (total > 0 && t >= total ? 0 : t));
-    setIsPlaying(true);
-  }, [total]);
-  const pause = useCallback(() => setIsPlaying(false), []);
-  const toggle = useCallback(() => setIsPlaying((p) => !p), []);
-  const seek = useCallback(
-    (t: number) => setCurrentTime(Math.min(Math.max(0, t), Math.max(0, total))),
-    [total],
-  );
-
-  return { currentTime, isPlaying, play, pause, toggle, seek };
-}

package/src/utils/collectInlineFontAwesomeCss.ts

@@ -1,69 +0,0 @@
-/**
- * Collect FontAwesome `@font-face` + utility CSS rules from the host
- * document's loaded stylesheets so we can inline them into a sandboxed
- * iframe preview.
- *
- * Why: an iframe rendered via `srcDoc` cannot reliably load
- * FontAwesome from a cross-origin CDN. Tracking prevention, stricter
- * origin policies, and the iframe's about:srcdoc origin all conspire
- * to silently drop font fetches. The icons end up invisible even
- * though the `<i class="fa-…">` tags are present in the markup. The
- * host page (editor-react ships a bundled `@import` of
- * `@fortawesome/fontawesome-free`) already has the font loaded and its
- * woff2 URLs resolve to same-origin assets, so we extract those rules
- * once and pass them into the renderer as inline CSS.
- *
- * Returns `undefined` when no FA rules are found — typical for SSR or
- * for hosts that don't bundle FA — in which case the renderer falls
- * back to its cdnjs `<link>` (still works in plain standalone HTML).
- */
-export function collectInlineFontAwesomeCss(): string | undefined {
-  if (typeof document === 'undefined') return undefined;
-
-  const collected: string[] = [];
-
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRuleList | null = null;
-    try {
-      rules = sheet.cssRules;
-    } catch {
-      // Cross-origin stylesheets throw on `.cssRules` access. We can't
-      // read them, but they're also not where editor-react's bundled
-      // FA lives, so it's safe to skip them.
-      continue;
-    }
-    if (!rules) continue;
-
-    for (const rule of Array.from(rules)) {
-      if (isFontAwesomeRule(rule)) {
-        collected.push(rule.cssText);
-      }
-    }
-  }
-
-  return collected.length > 0 ? collected.join('\n') : undefined;
-}
-
-/**
- * Match `@font-face` declarations whose family starts with
- * "Font Awesome", plus the FA utility classes (the `.fa-*` rules that
- * set `content: "\fXXX"` and font-family). The former gets the woff2
- * loaded into the iframe, the latter wires the `<i>` markup to it.
- */
-function isFontAwesomeRule(rule: CSSRule): boolean {
-  const text = rule.cssText;
-  // `@font-face { font-family: "Font Awesome 6 Brands"; … }`
-  if (rule.type === CSSRule.FONT_FACE_RULE) {
-    return /font-family:\s*['"]?Font Awesome/i.test(text);
-  }
-  // `.fa-github::before { content: "\f09b"; }` and the base
-  // `.fa-brands { font-family: "Font Awesome 6 Brands"; … }` rules.
-  // FA's stylesheet prefixes selectors with `.fa`, `.fas`, `.far`,
-  // `.fab`, `.fa-solid`, `.fa-regular`, `.fa-brands`. Match the
-  // family name in the declaration block to avoid false positives
-  // (e.g. someone else's `.fa-…` class that doesn't use the font).
-  if (rule.type === CSSRule.STYLE_RULE) {
-    return /Font Awesome/i.test(text) || /content:\s*["']\\[ef]/.test(text);
-  }
-  return false;
-}

package/src/utils/dropUtils.ts

@@ -1,136 +0,0 @@
-/**
- * Drop Utilities
- *
- * File processing pipeline for dropped files. Classifies files by type,
- * processes media files into a MediaProvider, and converts text files
- * (.md, .txt, .docx) to markdown strings.
- */
-
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import { stringifyMarkdown } from '@bendyline/squisq/markdown';
-import { classifyFile, type FileCategory } from '../hooks/useFileDrop';
-
-export type { FileCategory };
-export { classifyFile };
-
-/**
- * Partition an array of files into media and text categories.
- * Files with unknown type are skipped.
- */
-export function partitionFiles(files: File[]): { media: File[]; text: File[] } {
-  const media: File[] = [];
-  const text: File[] = [];
-
-  for (const file of files) {
-    const cat = classifyFile(file);
-    if (cat === 'media') media.push(file);
-    else if (cat === 'text') text.push(file);
-  }
-
-  return { media, text };
-}
-
-/**
- * Add media files to a MediaProvider. Returns the relative paths
- * assigned by the provider, with `null` slots where a file could not
- * be processed — keeping the result aligned with the input array so
- * callers can correlate indices.
- *
- * Two failure modes are handled defensively:
- *
- * 1. `file.arrayBuffer()` throws (`InvalidStateError` — "An operation
- *    that depends on state cached in an interface object was made but
- *    the state had changed since it was read from disk"). This happens
- *    with virtual drag sources whose File reference goes stale before
- *    the async read completes — Phone Link / iOS continuity / certain
- *    screenshot tools / etc.
- *
- * 2. `file.arrayBuffer()` returns a 0-byte buffer. Some virtual
- *    sources resolve the read successfully but with no payload,
- *    leaving an empty file in the media bin. We skip those so the
- *    bin doesn't accumulate placeholders.
- *
- * In both cases we warn via console rather than throwing, so a single
- * problematic file doesn't abort a multi-file drop.
- */
-export async function processMediaFiles(
-  files: File[],
-  mediaProvider: MediaProvider,
-): Promise<(string | null)[]> {
-  const paths: (string | null)[] = [];
-
-  for (const file of files) {
-    let buffer: ArrayBuffer;
-    try {
-      buffer = await file.arrayBuffer();
-    } catch (err: unknown) {
-      console.warn(
-        `[squisq-editor] Skipped dropped file "${file.name}" — could not read its contents.`,
-        'This is typical for drags from virtual sources (Phone Link, screenshot tools, cross-tab drags) whose File reference goes stale before the async read completes.',
-        err instanceof Error ? err.message : err,
-      );
-      paths.push(null);
-      continue;
-    }
-
-    if (buffer.byteLength === 0) {
-      console.warn(
-        `[squisq-editor] Skipped dropped file "${file.name}" — its contents read as 0 bytes. ` +
-          'The drag source likely never materialized the file (try saving it to disk first, then dragging from there).',
-      );
-      paths.push(null);
-      continue;
-    }
-
-    const mimeType = file.type || 'application/octet-stream';
-    try {
-      const path = await mediaProvider.addMedia(file.name, buffer, mimeType);
-      paths.push(path);
-    } catch (err: unknown) {
-      console.warn(
-        `[squisq-editor] Failed to save "${file.name}" via mediaProvider:`,
-        err instanceof Error ? err.message : err,
-      );
-      paths.push(null);
-    }
-  }
-
-  return paths;
-}
-
-/**
- * Read a text-content file and return its content as a markdown string.
- *
- * - `.md` and `.txt` files are read as UTF-8 text directly
- * - `.docx` files are converted to markdown via `@bendyline/squisq-formats/docx`
- */
-export async function processTextFile(file: File): Promise<string> {
-  const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
-
-  if (ext === 'md' || ext === 'txt') {
-    return await file.text();
-  }
-
-  if (ext === 'docx') {
-    const buffer = await file.arrayBuffer();
-    const { docxToMarkdownDoc } = await import('@bendyline/squisq-formats/docx');
-    const markdownDoc = await docxToMarkdownDoc(buffer);
-    return stringifyMarkdown(markdownDoc);
-  }
-
-  return await file.text();
-}
-
-/**
- * Process multiple text files and concatenate their content.
- */
-export async function processTextFiles(files: File[]): Promise<string> {
-  const results: string[] = [];
-
-  for (const file of files) {
-    const content = await processTextFile(file);
-    results.push(content);
-  }
-
-  return results.join('\n\n');
-}

package/src/utils/normalizeMalformedAssetUrl.ts

@@ -1,22 +0,0 @@
-/**
- * Detect image URLs that were malformed by an MS "Save Page As Web Page" /
- * pandoc import: a relative path like `mikehome_files/foo.png` gets
- * `http://` prepended somewhere upstream, so the URL parser interprets
- * `mikehome_files` as a hostname. The browser then either fails to load
- * the image or has it blocked by CSP.
- *
- * Heuristic: hostname has no dots and no port, and ends in `_files` —
- * that's the Word-style asset-folder naming convention, not a real host.
- *
- * Returns the recovered relative path (e.g. `mikehome_files/foo.png`)
- * when the shape matches, or `null` otherwise.
- */
-export function normalizeMalformedAssetUrl(src: string | null | undefined): string | null {
-  if (!src) return null;
-  const match = src.match(/^https?:\/\/([^/?#]+)\/(.+)$/i);
-  if (!match) return null;
-  const [, host, rest] = match;
-  if (host.includes('.') || host.includes(':')) return null;
-  if (!host.toLowerCase().endsWith('_files')) return null;
-  return `${host}/${rest}`;
-}

package/src/writeCanvasSettings.ts

@@ -1,30 +0,0 @@
-import type { CSSProperties } from 'react';
-
-/** Host-controlled typography for the markdown Write canvas. */
-export interface WriteCanvasSettings {
-  /** Base text size in CSS pixels. Headings continue to scale relative to it. */
-  textSize?: number;
-  /** Unitless line-height multiplier for body text. */
-  lineSpacing?: number;
-}
-
-type WriteCanvasCSSProperties = CSSProperties & {
-  '--squisq-write-text-size'?: string;
-  '--squisq-write-line-spacing'?: string;
-};
-
-/** Translate public Write-canvas settings into the CSS variables consumed by the editor. */
-export function writeCanvasSettingsStyle(settings?: WriteCanvasSettings): WriteCanvasCSSProperties {
-  const style: WriteCanvasCSSProperties = {};
-  if (isPositiveFinite(settings?.textSize)) {
-    style['--squisq-write-text-size'] = `${settings.textSize}px`;
-  }
-  if (isPositiveFinite(settings?.lineSpacing)) {
-    style['--squisq-write-line-spacing'] = String(settings.lineSpacing);
-  }
-  return style;
-}
-
-function isPositiveFinite(value: number | undefined): value is number {
-  return typeof value === 'number' && Number.isFinite(value) && value > 0;
-}

package/src/wysiwygImageUpload.ts

@@ -1,113 +0,0 @@
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import type { EditorView as ProseMirrorView } from '@tiptap/pm/view';
-
-type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
-
-/**
- * Upload images while stable placeholder nodes retain the original event
- * position as the surrounding ProseMirror document continues to change.
- */
-export async function uploadAndInsertImages(
-  view: ImageMutationView,
-  files: File[],
-  mediaProvider: MediaProvider,
-  onMediaUploaded?: () => void,
-): Promise<void> {
-  const placeholders = files.map(() => `squisq-upload:${uniquePasteToken()}`);
-  const imageType = view.state.schema.nodes.image;
-  if (!imageType) return;
-
-  let placeholderTr = view.state.tr;
-  for (const token of placeholders) {
-    placeholderTr = placeholderTr.replaceSelectionWith(
-      imageType.create({
-        src: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
-        alt: 'Uploading image',
-        title: token,
-      }),
-    );
-  }
-  view.dispatch(placeholderTr);
-
-  for (let index = 0; index < files.length; index++) {
-    const file = files[index];
-    const token = placeholders[index];
-    try {
-      const buffer = await file.arrayBuffer();
-      const mimeType = file.type || 'image/png';
-      const name =
-        file.name && file.name !== 'image.png'
-          ? file.name
-          : `pasted-${uniquePasteToken()}.${extFromMime(mimeType)}`;
-      const relativePath = await mediaProvider.addMedia(name, buffer, mimeType);
-      const altText = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
-      replaceUploadPlaceholder(view, token, relativePath, altText);
-      onMediaUploaded?.();
-    } catch (err) {
-      removeUploadPlaceholder(view, token);
-      console.error('Failed to upload dropped image:', err);
-    }
-  }
-}
-
-function findUploadPlaceholder(
-  view: ImageMutationView,
-  token: string,
-): { pos: number; node: ProseMirrorNode } | null {
-  let found: { pos: number; node: ProseMirrorNode } | null = null;
-  view.state.doc.descendants((node, pos) => {
-    if (node.type === view.state.schema.nodes.image && node.attrs.title === token) {
-      found = { pos, node };
-      return false;
-    }
-    return undefined;
-  });
-  return found;
-}
-
-function replaceUploadPlaceholder(
-  view: ImageMutationView,
-  token: string,
-  src: string,
-  alt: string,
-): void {
-  const found = findUploadPlaceholder(view, token);
-  if (!found) return;
-  view.dispatch(
-    view.state.tr.setNodeMarkup(found.pos, undefined, {
-      ...found.node.attrs,
-      src,
-      alt,
-      title: null,
-    }),
-  );
-}
-
-function removeUploadPlaceholder(view: ImageMutationView, token: string): void {
-  const found = findUploadPlaceholder(view, token);
-  if (!found) return;
-  view.dispatch(view.state.tr.delete(found.pos, found.pos + found.node.nodeSize));
-}
-
-let pasteCounter = 0;
-function uniquePasteToken(): string {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID();
-  }
-  pasteCounter = (pasteCounter + 1) % 1_000_000;
-  return `${Date.now()}-${pasteCounter.toString(36)}`;
-}
-
-function extFromMime(mime: string): string {
-  const map: Record<string, string> = {
-    'image/png': 'png',
-    'image/jpeg': 'jpg',
-    'image/jpg': 'jpg',
-    'image/gif': 'gif',
-    'image/webp': 'webp',
-    'image/svg+xml': 'svg',
-    'image/avif': 'avif',
-  };
-  return map[mime.toLowerCase()] ?? 'png';
-}