@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/Tooltip.tsx

@@ -1,142 +0,0 @@
-/**
- * TooltipLayer
- *
- * A single portal-mounted tooltip that activates on hover over any element
- * with a `data-tooltip` attribute. Shorter delay than native browser
- * tooltips and fires regardless of window focus, making toolbar hints feel
- * immediate. Mount once near the root of the editor shell.
- */
-
-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;
-  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
-  // the label immediately vs. re-delay — reading it from state would force
-  // 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) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-
-    const hide = () => {
-      clearTimer();
-      currentTargetRef.current = null;
-      visibleRef.current = false;
-      setState(null);
-    };
-
-    const show = (el: HTMLElement, label: string) => {
-      const rect = el.getBoundingClientRect();
-      visibleRef.current = true;
-      setState({
-        label,
-        top: rect.bottom + 6,
-        anchorX: rect.left + rect.width / 2,
-      });
-    };
-
-    const handleOver = (e: MouseEvent) => {
-      const el = (e.target as Element | null)?.closest?.<HTMLElement>('[data-tooltip]');
-      if (!el) return;
-      if (el === currentTargetRef.current) return;
-      const label = el.getAttribute('data-tooltip');
-      if (!label) return;
-
-      // Switching from one tooltip target to another: if a tooltip is
-      // already visible, swap the label immediately (no re-delay).
-      const wasVisible = visibleRef.current;
-      currentTargetRef.current = el;
-      clearTimer();
-
-      if (wasVisible) {
-        show(el, label);
-      } else {
-        timerRef.current = setTimeout(() => {
-          if (currentTargetRef.current === el && document.body.contains(el)) {
-            show(el, label);
-          }
-        }, SHOW_DELAY_MS);
-      }
-    };
-
-    const handleOut = (e: MouseEvent) => {
-      const target = currentTargetRef.current;
-      if (!target) return;
-      const related = e.relatedTarget as Node | null;
-      // Still hovering inside the same target (e.g. moved over a child)
-      if (related && target.contains(related)) return;
-      // Moving to another element with a tooltip — handleOver will swap in.
-      const relatedTooltip = (related as Element | null)?.closest?.('[data-tooltip]');
-      if (relatedTooltip) return;
-      hide();
-    };
-
-    const handleScroll = () => hide();
-    const handleBlur = () => hide();
-
-    document.addEventListener('mouseover', handleOver);
-    document.addEventListener('mouseout', handleOut);
-    document.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('blur', handleBlur);
-
-    return () => {
-      clearTimer();
-      document.removeEventListener('mouseover', handleOver);
-      document.removeEventListener('mouseout', handleOut);
-      document.removeEventListener('scroll', handleScroll, true);
-      window.removeEventListener('blur', handleBlur);
-    };
-  }, []);
-
-  if (!state) return null;
-
-  return createPortal(
-    <div
-      role="tooltip"
-      className="squisq-tooltip"
-      ref={tooltipRef}
-      style={{
-        position: 'fixed',
-        top: state.top,
-        left: state.anchorX,
-        visibility: 'hidden',
-      }}
-    >
-      {state.label}
-    </div>,
-    document.body,
-  );
-}

package/src/TransitionPicker.tsx

@@ -1,390 +0,0 @@
-/**
- * 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;
-  /** 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;
-}
-
-/**
- * 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,
-  colorScheme = 'light',
-  accentColor,
-}: 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, ...blockAccentStyle(accentColor) }}
-          value={value}
-          onChange={onChange}
-          colorScheme={colorScheme}
-        />,
-        document.body,
-      )
-    : null;
-
-  return (
-    <div
-      className="squisq-transition-picker"
-      data-theme={colorScheme}
-      style={blockAccentStyle(accentColor)}
-    >
-      <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,
-  colorScheme,
-}: {
-  style: React.CSSProperties;
-  value: TransitionFields;
-  onChange: (next: TransitionFields) => void;
-  colorScheme: 'light' | 'dark';
-}) {
-  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"
-      data-theme={colorScheme}
-      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 blockAccentStyle(accentColor: string | undefined): React.CSSProperties {
-  return accentColor
-    ? ({ ['--squisq-block-props-accent' as string]: accentColor } as React.CSSProperties)
-    : {};
-}
-
-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;
-}