@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/Tooltip.tsx

@@ -7,19 +7,21 @@
  * immediate. Mount once near the root of the editor shell.
  */
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { clampTooltipLeft } from './tooltipPlacement';
 
 const SHOW_DELAY_MS = 180;
 
 interface TooltipState {
   label: string;
   top: number;
-  left: number;
+  anchorX: number;
 }
 
 export function TooltipLayer() {
   const [state, setState] = useState<TooltipState | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const currentTargetRef = useRef<HTMLElement | null>(null);
   // Visibility tracked in a ref so `handleOver` can decide whether to swap
@@ -27,6 +29,20 @@ export function TooltipLayer() {
   // the effect to re-run (and re-register all listeners) on every change.
   const visibleRef = useRef(false);
 
+  useLayoutEffect(() => {
+    if (!state) return;
+    const node = tooltipRef.current;
+    if (!node) return;
+
+    const rect = node.getBoundingClientRect();
+    const tooltipWidth = rect.width || node.offsetWidth;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const left = clampTooltipLeft(state.anchorX, tooltipWidth, viewportWidth);
+
+    node.style.left = `${left}px`;
+    node.style.visibility = 'visible';
+  }, [state]);
+
   useEffect(() => {
     const clearTimer = () => {
       if (timerRef.current) {
@@ -48,7 +64,7 @@ export function TooltipLayer() {
       setState({
         label,
         top: rect.bottom + 6,
-        left: rect.left + rect.width / 2,
+        anchorX: rect.left + rect.width / 2,
       });
     };
 
@@ -111,10 +127,12 @@ export function TooltipLayer() {
     <div
       role="tooltip"
       className="squisq-tooltip"
+      ref={tooltipRef}
       style={{
         position: 'fixed',
         top: state.top,
-        left: state.left,
+        left: state.anchorX,
+        visibility: 'hidden',
       }}
     >
       {state.label}

package/src/TransitionPicker.tsx

@@ -0,0 +1,351 @@
+/**
+ * TransitionPicker
+ *
+ * Toolbar control shown when a block (heading) is active. A trigger button
+ * opens a portal flyout with a curated, grouped, searchable menu of block
+ * transitions, plus direction and duration sub-controls. Selecting a
+ * transition writes `transition=` (and optionally `transitionDirection=` /
+ * `transitionDuration=`) onto the block — the parent does the actual edit
+ * via `onChange`; this component is purely presentational.
+ *
+ * Positioning/portal/outside-click logic mirrors `TemplatePicker` so the two
+ * toolbar popovers behave identically.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getTransitionClass } from '@bendyline/squisq-react';
+import type { TransitionDirection, TransitionType } from '@bendyline/squisq/schemas';
+import type { TransitionFields } from './headingTransition';
+import { EMPTY_TRANSITION } from './headingTransition';
+import {
+  TRANSITION_GROUPS,
+  TRANSITION_ENTRIES,
+  DIRECTION_OPTIONS,
+  findTransitionEntry,
+  transitionLabel,
+  type TransitionCatalogEntry,
+} from './transitionCatalog';
+
+export interface TransitionPickerProps {
+  value: TransitionFields;
+  onChange: (next: TransitionFields) => void;
+}
+
+const FLYOUT_ID = 'squisq-transition-flyout-portal';
+
+export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [style, setStyle] = useState<React.CSSProperties>({});
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const updatePosition = () => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const flyout = document.getElementById(FLYOUT_ID);
+    const flyoutRect = flyout?.getBoundingClientRect();
+    const width = flyoutRect?.width ?? 460;
+    // Natural content height (the list scrolls inside, so scrollHeight is the
+    // full unclamped height we'd like to show).
+    const contentHeight = flyout?.scrollHeight ?? 520;
+    const margin = 8;
+    const gap = 6;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const left = Math.min(Math.max(margin, rect.left), Math.max(margin, vw - width - margin));
+
+    // Prefer opening below the trigger; flip above when there's clearly more
+    // room there. Either way cap the height to the available space so the
+    // panel never runs off the viewport — the list scrolls within it.
+    const spaceBelow = vh - rect.bottom - gap - margin;
+    const spaceAbove = rect.top - gap - margin;
+    const openDown = spaceBelow >= contentHeight || spaceBelow >= spaceAbove;
+    const top = openDown
+      ? rect.bottom + gap
+      : Math.max(margin, rect.top - gap - Math.min(contentHeight, spaceAbove));
+    const maxHeight = Math.max(140, openDown ? spaceBelow : spaceAbove);
+
+    setStyle({ position: 'fixed', top, left, maxHeight, zIndex: 9999 });
+  };
+
+  const handleOpen = () => {
+    updatePosition();
+    setOpen((v) => !v);
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      const inTrigger = triggerRef.current?.contains(target);
+      const inFlyout = document.getElementById(FLYOUT_ID)?.contains(target);
+      if (!inTrigger && !inFlyout) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  // Reposition on scroll/resize while open (and once after mount for width)
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(updatePosition);
+    const handler = () => updatePosition();
+    window.addEventListener('scroll', handler, true);
+    window.addEventListener('resize', handler);
+    return () => {
+      window.removeEventListener('scroll', handler, true);
+      window.removeEventListener('resize', handler);
+    };
+  }, [open]);
+
+  const flyout = open
+    ? createPortal(
+        <TransitionFlyout style={style} value={value} onChange={onChange} />,
+        document.body,
+      )
+    : null;
+
+  return (
+    <div className="squisq-transition-picker">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`squisq-transition-picker-trigger${open ? ' squisq-transition-picker-trigger--open' : ''}`}
+        onClick={handleOpen}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title="Block transition"
+      >
+        <span className="squisq-transition-picker-trigger-label">Transition:</span>
+        <span className="squisq-transition-picker-trigger-value">
+          {transitionLabel(value.type)}
+        </span>
+        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+          <path
+            d="M2 3.5l3 3 3-3"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            fill="none"
+          />
+        </svg>
+      </button>
+      {flyout}
+    </div>
+  );
+}
+
+function TransitionFlyout({
+  style,
+  value,
+  onChange,
+}: {
+  style: React.CSSProperties;
+  value: TransitionFields;
+  onChange: (next: TransitionFields) => void;
+}) {
+  const [query, setQuery] = useState('');
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+
+  const trimmed = query.trim().toLowerCase();
+  const hasQuery = trimmed.length > 0;
+
+  // Flat, filtered list when searching; grouped otherwise.
+  const filtered = useMemo(
+    () =>
+      hasQuery
+        ? TRANSITION_ENTRIES.filter(
+            (e) =>
+              e.label.toLowerCase().includes(trimmed) || e.value.toLowerCase().includes(trimmed),
+          )
+        : null,
+    [hasQuery, trimmed],
+  );
+
+  const activeEntry = findTransitionEntry(value.type);
+
+  // Selecting a transition keeps the duration but drops a now-meaningless
+  // direction (only directional transitions carry one).
+  const selectType = (next: TransitionCatalogEntry | null) => {
+    if (!next) {
+      onChange({ ...EMPTY_TRANSITION });
+      return;
+    }
+    onChange({
+      type: next.value,
+      direction: next.direction ? value.direction : '',
+      duration: value.duration,
+    });
+  };
+
+  const selectDirection = (dir: string) => {
+    // Toggle off when re-clicking the active direction.
+    onChange({ ...value, direction: value.direction === dir ? '' : dir });
+  };
+
+  const setDuration = (raw: string) => {
+    onChange({ ...value, duration: raw.trim() });
+  };
+
+  return (
+    <div id={FLYOUT_ID} className="squisq-transition-flyout" role="menu" style={style}>
+      <div className="squisq-transition-flyout-search">
+        <input
+          ref={searchRef}
+          type="search"
+          className="squisq-transition-flyout-search-input"
+          placeholder="Search transitions…"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          aria-label="Search transitions"
+        />
+      </div>
+
+      <div className="squisq-transition-flyout-list">
+        <button
+          type="button"
+          role="menuitemradio"
+          aria-checked={value.type === ''}
+          className={`squisq-transition-option${value.type === '' ? ' squisq-transition-option--selected' : ''}`}
+          onClick={() => selectType(null)}
+        >
+          None
+        </button>
+
+        {hasQuery ? (
+          filtered && filtered.length > 0 ? (
+            <div className="squisq-transition-flyout-grid">
+              {filtered.map((entry) => (
+                <TransitionOption
+                  key={entry.value}
+                  entry={entry}
+                  selected={value.type === entry.value}
+                  direction={value.type === entry.value ? value.direction : undefined}
+                  onSelect={() => selectType(entry)}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="squisq-transition-flyout-empty">No transitions match “{query}”.</div>
+          )
+        ) : (
+          TRANSITION_GROUPS.map((group) => (
+            <div key={group.title} className="squisq-transition-flyout-group">
+              <h4 className="squisq-transition-flyout-group-title">{group.title}</h4>
+              <div className="squisq-transition-flyout-grid">
+                {group.entries.map((entry) => (
+                  <TransitionOption
+                    key={entry.value}
+                    entry={entry}
+                    selected={value.type === entry.value}
+                    direction={value.type === entry.value ? value.direction : undefined}
+                    onSelect={() => selectType(entry)}
+                  />
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Direction + duration only apply once a transition is chosen. */}
+      {value.type && (
+        <div className="squisq-transition-flyout-controls">
+          {activeEntry?.direction && (
+            <div className="squisq-transition-flyout-control">
+              <span className="squisq-transition-flyout-control-label">Direction</span>
+              <div className="squisq-transition-direction-row">
+                {DIRECTION_OPTIONS[activeEntry.direction].map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    className={`squisq-transition-direction-button${value.direction === opt.value ? ' squisq-transition-direction-button--selected' : ''}`}
+                    onClick={() => selectDirection(opt.value)}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="squisq-transition-flyout-control">
+            <span className="squisq-transition-flyout-control-label">Duration</span>
+            <div className="squisq-transition-duration-row">
+              <input
+                type="number"
+                min="0"
+                step="0.1"
+                className="squisq-transition-duration-input"
+                placeholder="0.7"
+                value={value.duration}
+                onChange={(e) => setDuration(e.target.value)}
+                aria-label="Transition duration in seconds"
+              />
+              <span className="squisq-transition-duration-unit">sec</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TransitionOption({
+  entry,
+  selected,
+  direction,
+  onSelect,
+}: {
+  entry: TransitionCatalogEntry;
+  selected: boolean;
+  /** Direction to preview (for the active entry); falls back to the default. */
+  direction?: string;
+  onSelect: () => void;
+}) {
+  // Play the real entering transition on the label while hovered. Local
+  // state (rather than a flyout-wide hover map) keeps the rerender to the
+  // single option, and toggling the class off on leave lets the animation
+  // restart cleanly on the next hover. `getTransitionClass` is the same
+  // mapping the player uses; if a consumer hasn't loaded the transition CSS
+  // the class simply matches no rule and the label stays static.
+  const [previewing, setPreviewing] = useState(false);
+  // `entry.value` is a real `TransitionType` (guarded by transitionCatalog.test).
+  const animClass =
+    previewing && entry.value
+      ? getTransitionClass(entry.value as TransitionType, true, normalizeDir(direction))
+      : '';
+  return (
+    <button
+      type="button"
+      role="menuitemradio"
+      aria-checked={selected}
+      className={`squisq-transition-option${selected ? ' squisq-transition-option--selected' : ''}`}
+      onClick={onSelect}
+      onMouseEnter={() => setPreviewing(true)}
+      onMouseLeave={() => setPreviewing(false)}
+    >
+      <span className={`squisq-transition-option-label ${animClass}`}>{entry.label}</span>
+    </button>
+  );
+}
+
+/** `getTransitionClass` wants a `TransitionDirection | undefined`; '' → undefined. */
+function normalizeDir(direction: string | undefined): TransitionDirection | undefined {
+  return direction ? (direction as TransitionDirection) : undefined;
+}

package/src/VersionHistoryPanel.tsx

@@ -11,10 +11,68 @@
  * a provider that has `allowVersioning` and a `container`.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
 import { DiffEditor } from '@monaco-editor/react';
 import type { Version } from '@bendyline/squisq/versions';
 import { useEditorContext } from './EditorContext';
+import { useMonacoLoader } from './useMonacoLoader';
+import { Icon } from './Icon';
+
+interface LazyDiffEditorProps {
+  original: string;
+  modified: string;
+  theme: 'vs' | 'vs-dark';
+}
+
+const lazyLoadingStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  color: 'var(--squisq-editor-muted-foreground, #6a6258)',
+  fontSize: 12,
+};
+
+/**
+ * Defers the `<DiffEditor>` mount until the lazy monaco namespace +
+ * `loader.config()` are in place. Without the gate, the
+ * `@monaco-editor/react` singleton loader would fall back to its CDN
+ * default for any consumer that hasn't already mounted `<RawEditor>`.
+ *
+ * This wrapper is what makes `useMonacoLoader` worth using here —
+ * VersionHistoryPanel itself is always present in the toolbar, so
+ * subscribing at its level would defeat the lazy-load. The hook only
+ * fires when a snapshot is actually selected.
+ */
+function LazyDiffEditor({ original, modified, theme }: LazyDiffEditorProps) {
+  const { ready } = useMonacoLoader();
+  if (!ready) {
+    return <div style={lazyLoadingStyle}>Loading diff…</div>;
+  }
+  return (
+    <DiffEditor
+      original={original}
+      modified={modified}
+      language="markdown"
+      theme={theme}
+      options={{
+        readOnly: true,
+        renderSideBySide: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        automaticLayout: true,
+        fontSize: 12,
+        lineNumbers: 'off',
+        glyphMargin: false,
+        folding: false,
+        overviewRulerLanes: 0,
+        renderOverviewRuler: false,
+      }}
+    />
+  );
+}
 
 interface PanelState {
   loading: boolean;
@@ -172,20 +230,7 @@ export function VersionHistoryPanel() {
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
       >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9" />
-          <polyline points="2.5,2.5 2.5,4.5 4.5,4.5" />
-          <polyline points="8,4.5 8,8 11,9.5" />
-        </svg>
+        <Icon icon="fa-solid fa-clock-rotate-left" />
       </button>
       {open && (
         <div
@@ -206,25 +251,10 @@ export function VersionHistoryPanel() {
                 </span>
               </div>
               <div className="squisq-version-history-diff-body">
-                <DiffEditor
+                <LazyDiffEditor
                   original={state.selected.content}
                   modified={markdownSource}
-                  language="markdown"
                   theme={diffTheme}
-                  options={{
-                    readOnly: true,
-                    renderSideBySide: true,
-                    minimap: { enabled: false },
-                    scrollBeyondLastLine: false,
-                    wordWrap: 'on',
-                    automaticLayout: true,
-                    fontSize: 12,
-                    lineNumbers: 'off',
-                    glyphMargin: false,
-                    folding: false,
-                    overviewRulerLanes: 0,
-                    renderOverviewRuler: false,
-                  }}
                 />
               </div>
             </div>

package/src/ViewMenuPanel.tsx

@@ -11,7 +11,8 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useEditorContext, type ThemeInheritance } from './EditorContext';
+import { useEditorContext, type ThemeInheritance, type LayoutMode } from './EditorContext';
+import { Icon } from './Icon';
 
 export function ViewMenuPanel() {
   const {
@@ -25,6 +26,8 @@ export function ViewMenuPanel() {
     setBlockTagsVisible,
     themeInheritance,
     setThemeInheritance,
+    layoutMode,
+    setLayoutMode,
   } = useEditorContext();
   const [open, setOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -70,22 +73,22 @@ export function ViewMenuPanel() {
         aria-haspopup="menu"
         onClick={() => setOpen((v) => !v)}
       >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.4"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M1.5 8 C 3 4.5 5.5 3 8 3 S 13 4.5 14.5 8 C 13 11.5 10.5 13 8 13 S 3 11.5 1.5 8 Z" />
-          <circle cx="8" cy="8" r="2.2" />
-        </svg>
+        <Icon icon="fa-solid fa-eye" />
       </button>
       {open && (
         <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={[
+              { value: 'document', label: 'Document' },
+              { value: 'block', label: 'Block-at-a-time' },
+              { value: 'timeline', label: 'Timeline' },
+            ]}
+          />
+          <div className="squisq-view-menu-separator" role="separator" />
           <MenuToggle label="Show outline" checked={outlineVisible} onChange={toggleOutline} />
           <MenuToggle
             label="Show block previews"