@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -34,10 +34,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles": "./src/styles/index.css"
+    "./styles": "./dist/styles/index.css"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node ../../scripts/build-styles.mjs",
     "dev": "concurrently -n js,dts -c blue,gray -r \"tsup --watch --no-dts --no-clean\" \"tsup --watch --dts-only --no-clean\"",
     "typecheck": "tsc --noEmit"
   },
@@ -46,10 +46,15 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "monaco-editor": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@bendyline/squisq": "1.4.1",
-    "@bendyline/squisq-formats": "1.3.1",
-    "@bendyline/squisq-react": "1.3.2",
+    "@bendyline/squisq": "1.5.1",
+    "@bendyline/squisq-formats": "1.4.1",
+    "@bendyline/squisq-react": "1.4.1",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
@@ -74,5 +79,8 @@
     "react-dom": "18.3.1",
     "tsup": "8.5.1",
     "typescript": "5.9.3"
-  }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
 }

package/src/BlockCardView.tsx

@@ -0,0 +1,121 @@
+/**
+ * BlockCardView
+ *
+ * Presentational chrome for the block-at-a-time view: a single card holding
+ * one block's editor surface, with Previous / Next navigation, a
+ * "Block N of M" position indicator, and an optional "Add block" affordance.
+ *
+ * It is intentionally decoupled from `EditorContext` / `EditorShell` — it
+ * takes plain props (typically sourced from {@link useBlockNavigator}) and
+ * renders arbitrary `children`, so any host can reuse the block-at-a-time UX
+ * around its own editor or content.
+ */
+
+import type { ReactNode } from 'react';
+
+export interface BlockCardViewProps {
+  /** Total number of navigable blocks. */
+  blockCount: number;
+  /** Index of the block currently shown (0-based). */
+  activeBlockKey: number;
+  /** Move to the previous block. */
+  onPrev: () => void;
+  /** Move to the next block. */
+  onNext: () => void;
+  /** Insert a new block after the current one. Omit to hide the affordance. */
+  onAdd?: () => void;
+  /** The editor surface (or any content) for the active block. */
+  children: ReactNode;
+  /** Optional extra class for the outer container. */
+  className?: string;
+}
+
+export function BlockCardView({
+  blockCount,
+  activeBlockKey,
+  onPrev,
+  onNext,
+  onAdd,
+  children,
+  className,
+}: BlockCardViewProps) {
+  const atStart = activeBlockKey <= 0;
+  const atEnd = activeBlockKey >= blockCount - 1;
+  // 1-based for humans; clamp to ≥1 so an empty doc still reads "Block 1 of 1".
+  const position = Math.min(activeBlockKey + 1, Math.max(blockCount, 1));
+  const total = Math.max(blockCount, 1);
+
+  return (
+    <div
+      className={`squisq-block-card${className ? ` ${className}` : ''}`}
+      data-testid="block-card-view"
+    >
+      <div className="squisq-block-card-body">{children}</div>
+      <div className="squisq-block-card-nav" role="toolbar" aria-label="Block navigation">
+        <button
+          type="button"
+          className="squisq-block-card-button squisq-block-card-prev"
+          onClick={onPrev}
+          disabled={atStart}
+          aria-label="Previous block"
+          data-tooltip="Previous block"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+            <path
+              d="M9 2.5 L4.5 7 L9 11.5"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </svg>
+          <span>Previous</span>
+        </button>
+        <span className="squisq-block-card-position" aria-live="polite">
+          Block {position} of {total}
+        </span>
+        <button
+          type="button"
+          className="squisq-block-card-button squisq-block-card-next"
+          onClick={onNext}
+          disabled={atEnd}
+          aria-label="Next block"
+          data-tooltip="Next block"
+        >
+          <span>Next</span>
+          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+            <path
+              d="M5 2.5 L9.5 7 L5 11.5"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </svg>
+        </button>
+        {onAdd && (
+          <button
+            type="button"
+            className="squisq-block-card-button squisq-block-card-add"
+            onClick={onAdd}
+            aria-label="Add block"
+            data-tooltip="Add block after this one"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+              <path
+                d="M7 3 L7 11 M3 7 L11 7"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                fill="none"
+              />
+            </svg>
+            <span>Add block</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/BlockPreviewPanel.tsx

@@ -0,0 +1,69 @@
+/**
+ * BlockPreviewPanel
+ *
+ * A large, live preview of the active block, shown to the right of the
+ * block-at-a-time / timeline editing card when "Show block previews" is on.
+ * In document mode that toggle drives the {@link InlinePreviewGutter} (a
+ * column of small cards aligned to headings); in card mode there's only one
+ * block in view, so a single full-size preview reads better than a gutter.
+ *
+ * Reuses the shared preview pipeline (`resolveBlockVisual` → `BlockRenderer`)
+ * so the frame matches the slideshow and the timeline thumbnails exactly,
+ * honoring the active theme and viewport from the preview settings.
+ */
+
+import { useMemo } from 'react';
+import type { ViewportConfig } from '@bendyline/squisq/schemas';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import { flattenBlocks, DEFAULT_THEME } from '@bendyline/squisq/doc';
+import { useEditorContext } from './EditorContext';
+import { usePreviewSettingsOptional } from './PreviewControls';
+import { BlockThumbnail } from './TimelineBlockPreview';
+import { resolveBlockVisual } from './resolveBlockVisual';
+
+export interface BlockPreviewPanelProps {
+  basePath?: string;
+}
+
+export function BlockPreviewPanel({ basePath = '/' }: BlockPreviewPanelProps) {
+  const { doc, activeBlockStartLine, mediaProvider } = useEditorContext();
+  const previewSettings = usePreviewSettingsOptional();
+  const theme = previewSettings?.activeTheme ?? DEFAULT_THEME;
+  const viewport: ViewportConfig = previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape;
+
+  // The block the card editor is scoped to — matched by its heading's source
+  // line (same key the timeline + outline use), falling back to the first
+  // block (e.g. when a heading-less preamble is active).
+  const block = useMemo(() => {
+    if (!doc) return null;
+    const blocks = flattenBlocks(doc.blocks);
+    if (blocks.length === 0) return null;
+    return (
+      blocks.find((b) => b.sourceHeading?.position?.start.line === activeBlockStartLine) ??
+      blocks[0]
+    );
+  }, [doc, activeBlockStartLine]);
+
+  const visual = useMemo(
+    () => (doc && block ? resolveBlockVisual(doc, block, theme, viewport) : null),
+    [doc, block, theme, viewport],
+  );
+
+  if (!visual) return null;
+
+  return (
+    <div className="squisq-block-preview-panel" data-testid="block-preview-panel" aria-hidden>
+      <div
+        className="squisq-block-preview-frame"
+        style={{ aspectRatio: `${viewport.width} / ${viewport.height}` }}
+      >
+        <BlockThumbnail
+          visual={visual}
+          viewport={viewport}
+          basePath={basePath}
+          mediaProvider={mediaProvider}
+        />
+      </div>
+    </div>
+  );
+}

package/src/BlockPropertiesPopover.tsx

@@ -0,0 +1,191 @@
+/**
+ * BlockPropertiesPopover
+ *
+ * The on-canvas "block properties" palette — the sibling of the block-template
+ * badge. Anchored at the `.squisq-props-badge` chip on a heading, it edits the
+ * block's playback/animation metadata, all stored in the heading's Pandoc `{…}`
+ * attribute block (`dataBlockAttrs`):
+ *
+ *   - Transition  (type / direction / duration) — reuses `TransitionPicker`
+ *   - Duration    (`duration`)  — how long the block is shown
+ *   - Start time  (`startTime`) — timeline position
+ *
+ * The popover holds the `dataBlockAttrs` inner string as working state and
+ * re-derives each control from it, so successive edits compose. Every change
+ * serializes a new inner and bubbles up through `onChange`; the host applies it
+ * to the heading node. Positioning/portal/outside-click mirror
+ * `TemplateBadgePopover`.
+ */
+
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { TransitionPicker } from './TransitionPicker';
+import {
+  readBlockAttrsTransition,
+  setBlockAttrsTransition,
+  type TransitionFields,
+} from './headingTransition';
+import { readBlockAttrsValue, setBlockAttrsValue } from './blockProperties';
+
+export interface BlockPropertiesPopoverProps {
+  /** DOMRect of the badge that triggered the popover (viewport coords). */
+  anchorRect: DOMRect;
+  /** Current `dataBlockAttrs` inner (Pandoc), or null when unset. */
+  blockAttrs: string | null;
+  /** `dataTemplateParams`, so a hand-typed `{[… transition=]}` reads through. */
+  templateParams: string | null;
+  /** Apply a new `dataBlockAttrs` inner to the heading (null clears it). */
+  onChange: (nextInner: string | null) => void;
+  onClose: () => void;
+}
+
+const PANEL_ID = 'squisq-block-props-portal';
+/** The nested transition flyout is portaled out here; don't treat it as "outside". */
+const TRANSITION_FLYOUT = '.squisq-transition-flyout';
+
+export function BlockPropertiesPopover({
+  anchorRect,
+  blockAttrs,
+  templateParams,
+  onChange,
+  onClose,
+}: BlockPropertiesPopoverProps) {
+  // Working copy of the Pandoc inner; successive edits compose off it.
+  const [inner, setInner] = useState<string | null>(blockAttrs);
+  const [style, setStyle] = useState<React.CSSProperties>(() => computeStyle(anchorRect));
+
+  useEffect(() => {
+    requestAnimationFrame(() => setStyle(computeStyle(anchorRect)));
+  }, [anchorRect]);
+
+  // Outside click + Escape close. A click inside the popover OR inside the
+  // nested transition flyout (portaled elsewhere in the DOM) is kept open.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onMouse = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const inPanel = document.getElementById(PANEL_ID)?.contains(target);
+      const inFlyout = target.closest?.(TRANSITION_FLYOUT);
+      if (!inPanel && !inFlyout) onClose();
+    };
+    const id = requestAnimationFrame(() => document.addEventListener('mousedown', onMouse));
+    document.addEventListener('keydown', onKey);
+    return () => {
+      cancelAnimationFrame(id);
+      document.removeEventListener('mousedown', onMouse);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  const apply = (next: string | null) => {
+    setInner(next);
+    onChange(next);
+  };
+
+  const transition = readBlockAttrsTransition(inner, templateParams);
+  const duration = readBlockAttrsValue(inner, 'duration');
+  const startTime = readBlockAttrsValue(inner, 'startTime');
+
+  const onTransition = (next: TransitionFields) => apply(setBlockAttrsTransition(inner, next));
+  const onDuration = (v: string) => apply(setBlockAttrsValue(inner, 'duration', v));
+  const onStartTime = (v: string) => apply(setBlockAttrsValue(inner, 'startTime', v));
+
+  return createPortal(
+    <div
+      id={PANEL_ID}
+      className="squisq-block-props-popover"
+      role="dialog"
+      aria-label="Block properties"
+      style={style}
+    >
+      <div className="squisq-block-props-row">
+        <span className="squisq-block-props-label">Transition</span>
+        <TransitionPicker value={transition} onChange={onTransition} />
+      </div>
+
+      <div className="squisq-block-props-row">
+        <span className="squisq-block-props-label">Duration</span>
+        <NumberField
+          value={duration}
+          placeholder="auto"
+          unit="sec"
+          ariaLabel="Block duration in seconds"
+          onChange={onDuration}
+        />
+      </div>
+
+      <div className="squisq-block-props-row">
+        <span className="squisq-block-props-label">Start time</span>
+        <NumberField
+          value={startTime}
+          placeholder="—"
+          unit="sec"
+          ariaLabel="Block start time in seconds"
+          onChange={onStartTime}
+        />
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function NumberField({
+  value,
+  placeholder,
+  unit,
+  ariaLabel,
+  onChange,
+}: {
+  value: string;
+  placeholder: string;
+  unit: string;
+  ariaLabel: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="squisq-block-props-numfield">
+      <input
+        type="number"
+        min="0"
+        step="0.1"
+        className="squisq-block-props-input"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        aria-label={ariaLabel}
+      />
+      <span className="squisq-block-props-unit">{unit}</span>
+    </div>
+  );
+}
+
+/** Place the panel below the badge, flipping above / clamping to the viewport. */
+function computeStyle(rect: DOMRect): React.CSSProperties {
+  const panel = document.getElementById(PANEL_ID)?.getBoundingClientRect();
+  const width = panel?.width ?? 280;
+  const height = panel?.height ?? 160;
+  const margin = 8;
+  const gap = 6;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const spaceBelow = vh - rect.bottom - margin;
+  let top: number;
+  if (height + gap <= spaceBelow || rect.top - margin < height + gap) {
+    top = rect.bottom + gap;
+  } else {
+    top = rect.top - height - gap;
+  }
+  const maxLeft = Math.max(margin, vw - width - margin);
+  const left = Math.min(Math.max(margin, rect.left), maxLeft);
+
+  return {
+    position: 'fixed',
+    top,
+    left,
+    maxHeight: `${vh - 2 * margin}px`,
+    zIndex: 9999,
+  };
+}