@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/TransitionPicker.tsx

@@ -30,11 +30,27 @@ import {
 export interface TransitionPickerProps {
   value: TransitionFields;
   onChange: (next: TransitionFields) => void;
+  /** Surface scheme copied onto the portaled flyout so it can style independently of the shell. */
+  colorScheme?: 'light' | 'dark';
+  /** Active document-theme accent used for open and selected states. */
+  accentColor?: string;
 }
 
-const FLYOUT_ID = 'squisq-transition-flyout-portal';
+/**
+ * DOM id of the portaled transition flyout. Exported so hosts that embed the
+ * picker inside their own popovers (e.g. the toolbar overflow menu) can treat
+ * clicks inside the flyout as "inside" in their outside-click handling.
+ */
+export const TRANSITION_FLYOUT_PORTAL_ID = 'squisq-transition-flyout-portal';
+
+const FLYOUT_ID = TRANSITION_FLYOUT_PORTAL_ID;
 
-export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
+export function TransitionPicker({
+  value,
+  onChange,
+  colorScheme = 'light',
+  accentColor,
+}: TransitionPickerProps) {
   const [open, setOpen] = useState(false);
   const [style, setStyle] = useState<React.CSSProperties>({});
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -112,13 +128,22 @@ export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
 
   const flyout = open
     ? createPortal(
-        <TransitionFlyout style={style} value={value} onChange={onChange} />,
+        <TransitionFlyout
+          style={{ ...style, ...blockAccentStyle(accentColor) }}
+          value={value}
+          onChange={onChange}
+          colorScheme={colorScheme}
+        />,
         document.body,
       )
     : null;
 
   return (
-    <div className="squisq-transition-picker">
+    <div
+      className="squisq-transition-picker"
+      data-theme={colorScheme}
+      style={blockAccentStyle(accentColor)}
+    >
       <button
         ref={triggerRef}
         type="button"
@@ -151,10 +176,12 @@ function TransitionFlyout({
   style,
   value,
   onChange,
+  colorScheme,
 }: {
   style: React.CSSProperties;
   value: TransitionFields;
   onChange: (next: TransitionFields) => void;
+  colorScheme: 'light' | 'dark';
 }) {
   const [query, setQuery] = useState('');
   const searchRef = useRef<HTMLInputElement>(null);
@@ -204,7 +231,13 @@ function TransitionFlyout({
   };
 
   return (
-    <div id={FLYOUT_ID} className="squisq-transition-flyout" role="menu" style={style}>
+    <div
+      id={FLYOUT_ID}
+      className="squisq-transition-flyout"
+      data-theme={colorScheme}
+      role="menu"
+      style={style}
+    >
       <div className="squisq-transition-flyout-search">
         <input
           ref={searchRef}
@@ -306,6 +339,12 @@ function TransitionFlyout({
   );
 }
 
+function blockAccentStyle(accentColor: string | undefined): React.CSSProperties {
+  return accentColor
+    ? ({ ['--squisq-block-props-accent' as string]: accentColor } as React.CSSProperties)
+    : {};
+}
+
 function TransitionOption({
   entry,
   selected,

package/src/ViewMenuPanel.tsx

@@ -10,7 +10,7 @@
  * EditorShell `inlinePreview` prop.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useEditorContext, type ThemeInheritance, type LayoutMode } from './EditorContext';
 import { Icon } from './Icon';
 
@@ -22,8 +22,8 @@ export function ViewMenuPanel() {
     setStatusBarVisible,
     outlineVisible,
     setOutlineVisible,
-    blockTagsVisible,
-    setBlockTagsVisible,
+    blockTagVisibility,
+    setBlockTagVisibility,
     themeInheritance,
     setThemeInheritance,
     layoutMode,
@@ -56,10 +56,6 @@ export function ViewMenuPanel() {
     setOutlineVisible(!outlineVisible);
   }, [outlineVisible, setOutlineVisible]);
 
-  const toggleBlockTags = useCallback(() => {
-    setBlockTagsVisible(!blockTagsVisible);
-  }, [blockTagsVisible, setBlockTagsVisible]);
-
   return (
     <div className="squisq-view-menu" ref={containerRef}>
       <button
@@ -79,7 +75,6 @@ export function ViewMenuPanel() {
         <div className="squisq-view-menu-popover" role="menu" aria-label="View options">
           <MenuRadioGroup
             label="View"
-            name="layout-mode"
             value={layoutMode}
             onChange={(v) => setLayoutMode(v as LayoutMode)}
             options={[
@@ -95,10 +90,15 @@ export function ViewMenuPanel() {
             checked={inlinePreviewVisible}
             onChange={toggleInlinePreview}
           />
-          <MenuToggle
+          <MenuRadioGroup
             label="Show block tags"
-            checked={blockTagsVisible}
-            onChange={toggleBlockTags}
+            value={blockTagVisibility}
+            onChange={(v) => setBlockTagVisibility(v as typeof blockTagVisibility)}
+            options={[
+              { value: 'none', label: 'No inline block tags' },
+              { value: 'active', label: 'Selected/hovered block' },
+              { value: 'always', label: 'Always show' },
+            ]}
           />
           <MenuToggle
             label="Show status bar"
@@ -108,7 +108,6 @@ export function ViewMenuPanel() {
           <div className="squisq-view-menu-separator" role="separator" />
           <MenuRadioGroup
             label="Editor styling from theme"
-            name="theme-inheritance"
             value={themeInheritance}
             onChange={(v) => setThemeInheritance(v as ThemeInheritance)}
             options={[
@@ -147,17 +146,16 @@ function MenuToggle({
 
 function MenuRadioGroup({
   label,
-  name,
   value,
   onChange,
   options,
 }: {
   label: string;
-  name: string;
   value: string;
   onChange: (next: string) => void;
   options: readonly { value: string; label: string }[];
 }) {
+  const name = useId();
   return (
     <div
       className="squisq-view-menu-row squisq-view-menu-row--radios"

package/src/ViewSwitcher.tsx

@@ -1,15 +1,15 @@
 /**
  * ViewSwitcher
  *
- * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ * Tab bar for switching between Write, Source, and Use editor views.
  */
 
 import { useEditorContext, type EditorView } from './EditorContext';
 
 const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
-  { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘1' },
-  { id: 'wysiwyg', label: 'Editor', shortcut: '⌘2' },
-  { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+  { id: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
+  { id: 'raw', label: 'Source', shortcut: '⌘2' },
+  { id: 'preview', label: 'Use', shortcut: '⌘3' },
 ];
 
 export interface ViewSwitcherProps {

package/src/WysiwygEditor.tsx

@@ -13,6 +13,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
+import { Selection } from '@tiptap/pm/state';
+import type { EditorView as ProseMirrorView } from '@tiptap/pm/view';
 import StarterKit from '@tiptap/starter-kit';
 import Table from '@tiptap/extension-table';
 import TableRow from '@tiptap/extension-table-row';
@@ -22,9 +24,19 @@ import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
-import { resolveFontFamily, FONT_FALLBACKS } from '@bendyline/squisq/schemas';
+import { resolveFontFamily, FONT_FALLBACKS, VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import { DEFAULT_THEME, flattenBlocks, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
 import { HeadingWithTemplate } from './TemplateAnnotation';
-import { DiagramExtension } from './diagram/DiagramExtension';
+import { AsciiDiagramExtension } from './asciiDiagram/AsciiDiagramExtension';
+import { RepairableDiagramExtension } from './asciiDiagram/RepairableDiagramExtension';
+import { applyRepairCommand } from './asciiDiagram/asciiDiagramCommands';
+import { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste';
+import { TreeViewExtension } from './treeview/TreeViewExtension';
+import { shouldPasteAsTreeFence } from './treeview/treePaste';
+import { TimelineViewExtension } from './timeline/TimelineViewExtension';
+import { shouldPasteAsTimelineFence } from './timeline/timelinePaste';
+import { BlockTagActivityExtension } from './blockTagActivity';
 import { SceneBlockExtension } from './scene/SceneBlockExtension';
 import { InlineIcon } from './InlineIcon';
 import { ImageWithMediaProvider } from './ImageNodeView';
@@ -49,6 +61,9 @@ import { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge';
 import { looksLikeMarkdown } from './detectMarkdown';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 import { usePreviewSettingsOptional } from './PreviewControls';
+import { uploadAndInsertImages } from './wysiwygImageUpload';
+
+type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
 
 /**
  * Rotating placeholder prompts shown when the editor is empty. One is
@@ -68,6 +83,12 @@ const EMPTY_PROMPTS = [
   'Begin at the beginning…',
 ];
 
+const BLOCK_TAG_DATA_VALUES = {
+  none: 'hidden',
+  active: 'active',
+  always: 'visible',
+} as const;
+
 function pickEmptyPrompt(): string {
   return EMPTY_PROMPTS[Math.floor(Math.random() * EMPTY_PROMPTS.length)];
 }
@@ -106,8 +127,11 @@ export function WysiwygEditor({
     setTiptapEditor,
     mediaProvider,
     mentionProvider,
-    blockTagsVisible,
+    blockTagVisibility,
     themeInheritance,
+    colorScheme,
+    bumpMediaRevision,
+    sceneTextChannel,
   } = useEditorContext();
   // Custom templates inlined in the active doc's frontmatter + the
   // persist callback that writes a new list back into the source.
@@ -162,7 +186,6 @@ export function WysiwygEditor({
   useEffect(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
-
   const editor = useEditor({
     editable: !readOnly,
     extensions: [
@@ -174,8 +197,12 @@ export function WysiwygEditor({
         },
       }),
       HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
-      DiagramExtension,
-      SceneBlockExtension,
+      BlockTagActivityExtension,
+      AsciiDiagramExtension.configure({ textChannel: sceneTextChannel }),
+      RepairableDiagramExtension.configure({ onRepair: applyRepairCommand }),
+      TimelineViewExtension,
+      TreeViewExtension,
+      SceneBlockExtension.configure({ textChannel: sceneTextChannel }),
       Table.configure({ resizable: true }),
       TableRow,
       TableCell,
@@ -197,8 +224,13 @@ export function WysiwygEditor({
     content: markdownToTiptap(stripFrontmatter(editorSource).body),
     onUpdate: ({ editor: ed }) => {
       if (isExternalUpdate.current) return;
-      const html = ed.getHTML();
-      const bodyMd = tiptapToMarkdown(html);
+      // Keep the source channel synchronous with Tiptap. Structural actions
+      // such as block navigation/addition may run in the very next browser
+      // event; deferring this write lets a stale callback serialize the newly
+      // selected block into the previous block's range. The expensive full-doc
+      // parse remains debounced in EditorContext, so correctness here does not
+      // reintroduce parse-on-every-keystroke work.
+      const bodyMd = tiptapToMarkdown(ed.getHTML());
       const newSource = frontmatterRef.current + bodyMd;
       lastSourceRef.current = newSource;
       setEditorSource(newSource);
@@ -221,7 +253,9 @@ export function WysiwygEditor({
         // its container with `display: block` while items are showing
         // and `display: none` when empty — only short-circuit when
         // there's actually a candidate to pick.
-        const popover = document.querySelector<HTMLElement>('.squisq-mention-popover');
+        const popover = view.dom
+          .closest('.squisq-editor-shell')
+          ?.querySelector<HTMLElement>('.squisq-mention-popover');
         if (popover && popover.style.display !== 'none') {
           return false;
         }
@@ -257,12 +291,67 @@ export function WysiwygEditor({
         const imageFiles = filesFromClipboard(clipboard);
         if (imageFiles.length > 0 && mediaProviderRef.current) {
           event.preventDefault();
-          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+          uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
           return true;
         }
 
         const text = clipboard.getData('text/plain');
-        if (!text || !looksLikeMarkdown(text)) return false;
+        if (!text) return false;
+
+        // Bare (unfenced) ASCII diagram art → verbatim into a fresh code
+        // block, which AsciiDiagramExtension turns into an interactive
+        // canvas. Must run BEFORE the markdown branch: `| x |` art rows
+        // false-positive as GFM table rows and would be mangled.
+        if (shouldPasteAsAsciiFence(text)) {
+          const codeBlockType = view.state.schema.nodes.codeBlock;
+          if (codeBlockType) {
+            event.preventDefault();
+            // Tag the fence `diagram` so its identity survives a later
+            // flatten → markdown → re-import round-trip (the language class
+            // round-trips; fence meta does not).
+            view.dispatch(
+              view.state.tr.replaceSelectionWith(
+                codeBlockType.create({ language: 'diagram' }, view.state.schema.text(text)),
+              ),
+            );
+            return true;
+          }
+        }
+
+        // Bare (unfenced) marker rails → an explicit timeline code block.
+        // Run before the tree gate because timeline callout elbows can look
+        // like nested tree connectors to a deliberately lenient parser.
+        if (shouldPasteAsTimelineFence(text)) {
+          const codeBlockType = view.state.schema.nodes.codeBlock;
+          if (codeBlockType) {
+            event.preventDefault();
+            view.dispatch(
+              view.state.tr.replaceSelectionWith(
+                codeBlockType.create({ language: 'timeline' }, view.state.schema.text(text)),
+              ),
+            );
+            return true;
+          }
+        }
+
+        // Bare (unfenced) ASCII tree art → a fresh code block that the
+        // TreeViewExtension turns into an outline. After the diagram gate,
+        // before markdown (the `├──` lines must not be mangled as prose).
+        if (shouldPasteAsTreeFence(text)) {
+          const codeBlockType = view.state.schema.nodes.codeBlock;
+          if (codeBlockType) {
+            event.preventDefault();
+            // Tag the fence `tree` so its identity survives round-trips.
+            view.dispatch(
+              view.state.tr.replaceSelectionWith(
+                codeBlockType.create({ language: 'tree' }, view.state.schema.text(text)),
+              ),
+            );
+            return true;
+          }
+        }
+
+        if (!looksLikeMarkdown(text)) return false;
         const html = markdownToTiptap(text);
         if (!html) return false;
         event.preventDefault();
@@ -326,7 +415,7 @@ export function WysiwygEditor({
 
         event.preventDefault();
         moveSelectionToDropPoint(view, event);
-        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current);
+        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
         return true;
       },
     },
@@ -366,6 +455,16 @@ export function WysiwygEditor({
     templateParams: string | null;
   } | null>(null);
 
+  const closeBadgeMenu = useCallback(() => {
+    setBadgeMenu(null);
+    // The portaled gallery moves focus into its search field. Restore the
+    // document's preserved ProseMirror selection after React has unmounted the
+    // dialog, so the caret resumes blinking where the author left it.
+    requestAnimationFrame(() => {
+      if (editor && !editor.isDestroyed) editor.commands.focus();
+    });
+  }, [editor]);
+
   useEffect(() => {
     if (!editor) return;
     const root = containerRef.current;
@@ -456,9 +555,10 @@ export function WysiwygEditor({
     isExternalUpdate.current = false;
   }, [editorSource, editor]);
 
-  // Match the WYSIWYG editor's appearance to the active Squisq theme
-  // when one is set in frontmatter or picked in the preview dropdown.
-  // Driven by the View menu's "Theme inheritance" setting:
+  // Match the WYSIWYG editor's appearance to the active Squisq theme when one
+  // is set in frontmatter or picked in the preview dropdown. The block-props
+  // affordance always carries the theme's primary as UI accent (like the
+  // outline); document-content inheritance is driven by the View menu setting:
   //   - 'none'         → don't inherit anything
   //   - 'fonts'        → body + heading fonts only (historical default)
   //   - 'fonts-colors' → fonts plus the theme's canvas / text colors
@@ -467,9 +567,38 @@ export function WysiwygEditor({
   // a PreviewSettingsProvider in scope).
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme;
+  const badgePreviewSource = useMemo(() => {
+    if (!badgeMenu) return undefined;
+    try {
+      const previewDoc = markdownToDoc(parseMarkdown(editorSource), { autoTemplates: false });
+      const block = flattenBlocks(previewDoc.blocks)[badgeMenu.headingIndex];
+      if (!block) return undefined;
+      return {
+        block,
+        theme: previewSettings?.activeTheme ?? DEFAULT_THEME,
+        viewport: previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape,
+        basePath: '/',
+        mediaProvider,
+        customTemplates: docTemplates,
+      };
+    } catch {
+      return undefined;
+    }
+  }, [
+    badgeMenu,
+    docTemplates,
+    editorSource,
+    mediaProvider,
+    previewSettings?.activeTheme,
+    previewSettings?.activeViewport,
+  ]);
   const themeStyle = useMemo<CSSProperties>(() => {
-    if (themeInheritance === 'none' || !activeTheme) return {};
+    if (!activeTheme) return {};
     const out: Record<string, string> = {
+      '--squisq-block-props-accent': activeTheme.colors.primary,
+    };
+    if (themeInheritance === 'none') return out as CSSProperties;
+    Object.assign(out, {
       '--squisq-theme-body-font': resolveFontFamily(
         activeTheme.typography.bodyFont,
         FONT_FALLBACKS.sans,
@@ -478,7 +607,7 @@ export function WysiwygEditor({
         activeTheme.typography.titleFont,
         FONT_FALLBACKS.sans,
       ),
-    };
+    });
     if (themeInheritance === 'fonts-colors') {
       const colors = activeTheme.colors;
       out['--squisq-theme-bg'] = colors.background;
@@ -498,7 +627,7 @@ export function WysiwygEditor({
         className={`squisq-wysiwyg-container${className ? ` ${className}` : ''}`}
         style={{ width: '100%', height: '100%', overflow: 'auto', ...themeStyle }}
         data-testid="wysiwyg-container"
-        data-block-tags={blockTagsVisible ? 'visible' : 'hidden'}
+        data-block-tags={BLOCK_TAG_DATA_VALUES[blockTagVisibility]}
         data-theme-inheritance={themeInheritance}
         ref={containerRef}
       >
@@ -507,6 +636,7 @@ export function WysiwygEditor({
           <TemplateBadgePopover
             anchorRect={badgeMenu.rect}
             value={badgeMenu.template}
+            colorScheme={colorScheme}
             recommended={(() => {
               // `headingIndex` is counted within the mounted Tiptap doc, which
               // reflects `editorSource` — the active block's slice in block
@@ -516,6 +646,7 @@ export function WysiwygEditor({
               const profile = profileBlockContents(slice);
               return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
             })()}
+            previewSource={badgePreviewSource}
             onOpenDesigner={() => {
               setBadgeMenu(null);
               setDesignerState({});
@@ -528,7 +659,7 @@ export function WysiwygEditor({
               });
               editor.view.dispatch(tr);
             }}
-            onClose={() => setBadgeMenu(null)}
+            onClose={closeBadgeMenu}
           />
         )}
         {propsMenu && (
@@ -536,6 +667,8 @@ export function WysiwygEditor({
             anchorRect={propsMenu.rect}
             blockAttrs={propsMenu.blockAttrs}
             templateParams={propsMenu.templateParams}
+            colorScheme={colorScheme}
+            accentColor={activeTheme?.colors.primary}
             onChange={(nextInner) => {
               if (!editor) return;
               const current = editor.state.doc.nodeAt(propsMenu.headingPos);
@@ -546,6 +679,17 @@ export function WysiwygEditor({
               });
               editor.view.dispatch(tr);
             }}
+            onAnnotationChange={(next) => {
+              if (!editor) return;
+              const current = editor.state.doc.nodeAt(propsMenu.headingPos);
+              if (!current || current.type.name !== 'heading') return;
+              const tr = editor.state.tr.setNodeMarkup(propsMenu.headingPos, undefined, {
+                ...current.attrs,
+                dataBlockAttrs: next.blockAttrsInner,
+                dataTemplateParams: next.templateParams,
+              });
+              editor.view.dispatch(tr);
+            }}
             onClose={() => setPropsMenu(null)}
           />
         )}
@@ -555,6 +699,7 @@ export function WysiwygEditor({
             onSave={handleDesignerSave}
             onClose={() => setDesignerState(null)}
             mediaProvider={mediaProvider}
+            colorScheme={colorScheme}
           />
         )}
       </div>
@@ -621,41 +766,8 @@ function filesFromClipboard(clipboard: DataTransfer): File[] {
   return files;
 }
 
-/**
- * Upload image files to the MediaProvider and insert <img> nodes at the
- * current selection. Inserts a placeholder name when files lack one
- * (e.g., screenshots from the system clipboard).
- */
-async function uploadAndInsertImages(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  view: any,
-  files: File[],
-  mediaProvider: import('@bendyline/squisq/schemas').MediaProvider,
-): Promise<void> {
-  for (const file of files) {
-    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, ' ');
-      insertImageNode(view, relativePath, altText);
-    } catch (err) {
-      console.error('Failed to upload dropped image:', err);
-    }
-  }
-}
-
 /** Insert an image node at the current selection using the schema image type. */
-function insertImageNode(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  view: any,
-  src: string,
-  alt: string,
-): void {
+function insertImageNode(view: ImageMutationView, src: string, alt: string): void {
   const { schema } = view.state;
   const imageType = schema.nodes.image;
   if (!imageType) return;
@@ -665,50 +777,13 @@ function insertImageNode(
 }
 
 /** Move the selection to the document position under the drop event's coordinates. */
-function moveSelectionToDropPoint(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  view: any,
-  event: DragEvent,
-): void {
+function moveSelectionToDropPoint(view: ProseMirrorView, event: DragEvent): void {
   const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
   if (!coords) return;
-  const tr = view.state.tr.setSelection(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (view.state.selection.constructor as any).near(view.state.doc.resolve(coords.pos)),
-  );
+  const tr = view.state.tr.setSelection(Selection.near(view.state.doc.resolve(coords.pos)));
   view.dispatch(tr);
 }
 
-/**
- * Produce a unique token for a pasted-file name. `Date.now()` alone can
- * collide when a user pastes several clipboard images in the same tick
- * (multi-image paste from a screenshot grid, for example), which would make
- * `MediaProvider.addMedia` overwrite or reject later entries. Prefer
- * `crypto.randomUUID()` when available and fall back to a counter so the
- * helper stays pure-JS-everywhere.
- */
-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';
-}
-
 /**
  * Hook to access the Tiptap editor instance for toolbar commands.
  * The WysiwygEditor must be mounted as a sibling or descendant.

package/src/__tests__/blockPropertiesPopoverTheme.test.tsx

@@ -0,0 +1,33 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { BlockPropertiesPopover } from '../BlockPropertiesPopover';
+import { TRANSITION_FLYOUT_PORTAL_ID } from '../TransitionPicker';
+
+describe('BlockPropertiesPopover theme propagation', () => {
+  it('copies dark mode and the document accent onto both portal roots', async () => {
+    render(
+      <BlockPropertiesPopover
+        anchorRect={new DOMRect(20, 20, 20, 20)}
+        blockAttrs={null}
+        templateParams={null}
+        colorScheme="dark"
+        accentColor="#c2410c"
+        onChange={vi.fn()}
+        onAnnotationChange={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    const panel = screen.getByRole('dialog', { name: 'Block properties' });
+    expect(panel.getAttribute('data-theme')).toBe('dark');
+    expect(panel.style.getPropertyValue('--squisq-block-props-accent')).toBe('#c2410c');
+
+    fireEvent.click(screen.getByRole('button', { name: /Transition:/ }));
+
+    await waitFor(() => {
+      const flyout = document.getElementById(TRANSITION_FLYOUT_PORTAL_ID);
+      expect(flyout?.getAttribute('data-theme')).toBe('dark');
+      expect(flyout?.style.getPropertyValue('--squisq-block-props-accent')).toBe('#c2410c');
+    });
+  });
+});