@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/VersionHistoryPanel.tsx

@@ -1,359 +0,0 @@
-/**
- * VersionHistoryPanel
- *
- * Toolbar-anchored popover that lists prior version snapshots and lets
- * the user revert to one. When a snapshot is selected, a Monaco diff
- * view appears to the left of the list comparing the snapshot (original,
- * left) with the current editor content (modified, right).
- *
- * Wraps the toolbar trigger button + popover surface. Versioning state
- * is read from the EditorContext — render this component anywhere inside
- * a provider that has `allowVersioning` and a `container`.
- */
-
-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;
-  versions: Version[];
-  /** The snapshot currently shown in the diff view, with its content. */
-  selected: { version: Version; content: string } | null;
-  pendingRevert: Version | null;
-  error: string | null;
-  /** Stamp captured each time the popover opens — labels the synthetic
-   *  "Current" row so it reads as a moment in time alongside the
-   *  snapshots. */
-  currentStamp: Date;
-  /** Cached content of the most recent snapshot, used to detect (and
-   *  hide) a snapshot that's byte-identical to the current draft so the
-   *  synthetic Current row alone represents that state. Compared against
-   *  the live `markdownSource` on every render, so the suppressed row
-   *  re-appears as soon as the user types. */
-  latestSnapshotContent: string | null;
-}
-
-const initialState: PanelState = {
-  loading: false,
-  versions: [],
-  selected: null,
-  pendingRevert: null,
-  error: null,
-  currentStamp: new Date(),
-  latestSnapshotContent: null,
-};
-
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  dateStyle: 'medium',
-  timeStyle: 'short',
-});
-
-function formatBytes(n: number): string {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-export function VersionHistoryPanel() {
-  const { versioning, replaceAll, markdownSource, colorScheme } = useEditorContext();
-  const [open, setOpen] = useState(false);
-  const [state, setState] = useState<PanelState>(initialState);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const refresh = useCallback(async () => {
-    if (!versioning) return;
-    setState((s) => ({ ...s, loading: true, error: null }));
-    try {
-      const versions = await versioning.listVersions();
-      // Cache the latest snapshot's content so we can hide it when it
-      // matches the live draft (the Current row already represents it).
-      const latest = versions[0];
-      const latestSnapshotContent = latest ? await versioning.readVersion(latest) : null;
-      setState((s) => ({ ...s, loading: false, versions, latestSnapshotContent }));
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to list versions';
-      setState((s) => ({ ...s, loading: false, error: message }));
-    }
-  }, [versioning]);
-
-  // Refresh the list whenever the popover opens.
-  useEffect(() => {
-    if (open) {
-      setState((s) => ({ ...s, currentStamp: new Date() }));
-      void refresh();
-    } else {
-      // Reset transient UI when closing so the next open is clean.
-      setState((s) => ({ ...s, selected: null, pendingRevert: null }));
-    }
-  }, [open, refresh]);
-
-  // Click-outside to close, mirroring the toolbar overflow menu.
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  const handleSelect = useCallback(
-    async (version: Version) => {
-      if (!versioning) return;
-      // Toggle off if this version is already selected.
-      if (state.selected?.version.path === version.path) {
-        setState((s) => ({ ...s, selected: null }));
-        return;
-      }
-      const content = await versioning.readVersion(version);
-      if (content === null) {
-        setState((s) => ({ ...s, error: 'Snapshot is no longer available.' }));
-        return;
-      }
-      setState((s) => ({ ...s, selected: { version, content }, error: null }));
-    },
-    [versioning, state.selected],
-  );
-
-  const handleRevertConfirm = useCallback(
-    async (version: Version) => {
-      if (!versioning) return;
-      try {
-        const result = await versioning.revertToVersion(version, { snapshotCurrent: true });
-        if (!result.reverted) {
-          setState((s) => ({ ...s, error: 'Revert failed — snapshot missing.' }));
-          return;
-        }
-        const reverted = await versioning.readVersion(version);
-        if (reverted !== null) {
-          replaceAll(reverted);
-        }
-        setState((s) => ({ ...s, pendingRevert: null, selected: null }));
-        await refresh();
-      } catch (err: unknown) {
-        const message = err instanceof Error ? err.message : 'Revert failed';
-        setState((s) => ({ ...s, error: message }));
-      }
-    },
-    [versioning, replaceAll, refresh],
-  );
-
-  // Hide the most recent snapshot when its content is byte-identical to
-  // the live draft — the Current row already represents that state, and
-  // the diff against it would be empty anyway.
-  const latestMatchesCurrent =
-    state.latestSnapshotContent !== null && state.latestSnapshotContent === markdownSource;
-  const visibleVersions = useMemo(
-    () => (latestMatchesCurrent ? state.versions.slice(1) : state.versions),
-    [state.versions, latestMatchesCurrent],
-  );
-  const currentSize = useMemo(
-    () => new TextEncoder().encode(markdownSource).byteLength,
-    [markdownSource],
-  );
-  const hasDiff = state.selected !== null;
-  const diffTheme = colorScheme === 'dark' ? 'vs-dark' : 'vs';
-
-  if (!versioning) return null;
-
-  return (
-    <div className="squisq-version-history" ref={containerRef}>
-      <button
-        type="button"
-        className={`squisq-toolbar-button squisq-version-history-trigger${
-          open ? ' squisq-toolbar-button--active' : ''
-        }`}
-        data-tooltip="Version history"
-        aria-label="Version history"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-      >
-        <Icon icon="fa-solid fa-clock-rotate-left" />
-      </button>
-      {open && (
-        <div
-          className={`squisq-version-history-popover${
-            hasDiff ? ' squisq-version-history-popover--with-diff' : ''
-          }`}
-          role="dialog"
-          aria-label="Version history"
-        >
-          {hasDiff && state.selected && (
-            <div className="squisq-version-history-diff">
-              <div className="squisq-version-history-diff-header">
-                <span className="squisq-version-history-diff-label">
-                  <strong>Snapshot</strong> {dateFormatter.format(state.selected.version.timestamp)}
-                </span>
-                <span className="squisq-version-history-diff-label">
-                  <strong>Current</strong>
-                </span>
-              </div>
-              <div className="squisq-version-history-diff-body">
-                <LazyDiffEditor
-                  original={state.selected.content}
-                  modified={markdownSource}
-                  theme={diffTheme}
-                />
-              </div>
-            </div>
-          )}
-          <div className="squisq-version-history-list-pane">
-            <div className="squisq-version-history-header">
-              <span className="squisq-version-history-title">Version history</span>
-            </div>
-            {state.error && <div className="squisq-version-history-error">{state.error}</div>}
-            {state.loading ? (
-              <div className="squisq-version-history-empty">Loading…</div>
-            ) : visibleVersions.length === 0 ? (
-              <div className="squisq-version-history-empty">
-                No versions yet. Versions are saved automatically as you edit.
-              </div>
-            ) : (
-              <ul className="squisq-version-history-list">
-                <li
-                  className={`squisq-version-history-row squisq-version-history-row--current${
-                    state.selected === null ? ' squisq-version-history-row--selected' : ''
-                  }`}
-                >
-                  <button
-                    type="button"
-                    className="squisq-version-history-row-select"
-                    onClick={() => setState((s) => ({ ...s, selected: null }))}
-                  >
-                    <span className="squisq-version-history-row__time">
-                      <strong>Current</strong> &middot; {dateFormatter.format(state.currentStamp)}
-                    </span>
-                    <span className="squisq-version-history-row__size">
-                      {formatBytes(currentSize)}
-                    </span>
-                  </button>
-                </li>
-                {visibleVersions.map((v) => {
-                  const pending =
-                    state.pendingRevert !== null && state.pendingRevert.path === v.path;
-                  const selected = state.selected?.version.path === v.path;
-                  return (
-                    <li
-                      key={v.path}
-                      className={`squisq-version-history-row${
-                        selected ? ' squisq-version-history-row--selected' : ''
-                      }`}
-                    >
-                      <button
-                        type="button"
-                        className="squisq-version-history-row-select"
-                        onClick={() => void handleSelect(v)}
-                      >
-                        <span className="squisq-version-history-row__time">
-                          {dateFormatter.format(v.timestamp)}
-                        </span>
-                        <span className="squisq-version-history-row__size">
-                          {formatBytes(v.size)}
-                        </span>
-                      </button>
-                      <span className="squisq-version-history-row__actions">
-                        <button
-                          type="button"
-                          className="squisq-version-history-link"
-                          onClick={() => setState((s) => ({ ...s, pendingRevert: v }))}
-                        >
-                          Revert
-                        </button>
-                      </span>
-                      {pending && (
-                        <div className="squisq-version-history-confirm">
-                          <span>
-                            Revert to this version? Your current draft will be saved as a new
-                            snapshot first. Reverting will reset your editor undo state.
-                          </span>
-                          <span className="squisq-version-history-confirm-actions">
-                            <button
-                              type="button"
-                              className="squisq-version-history-link"
-                              onClick={() => setState((s) => ({ ...s, pendingRevert: null }))}
-                            >
-                              Cancel
-                            </button>
-                            <button
-                              type="button"
-                              className="squisq-version-history-link squisq-version-history-link--primary"
-                              onClick={() => handleRevertConfirm(v)}
-                            >
-                              Revert
-                            </button>
-                          </span>
-                        </div>
-                      )}
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/ViewMenuPanel.tsx

@@ -1,189 +0,0 @@
-/**
- * ViewMenuPanel
- *
- * Toolbar overflow menu (`…` button) for view-related toggles. Currently
- * houses the inline preview gutter toggle; new view options can be added
- * as additional `<MenuToggle>` rows without restructuring.
- *
- * State lives in EditorContext so the toggle survives view switches and
- * the host doesn't need to manage it. The initial value comes from the
- * EditorShell `inlinePreview` prop.
- */
-
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { useEditorContext, type ThemeInheritance, type LayoutMode } from './EditorContext';
-import { Icon } from './Icon';
-
-export function ViewMenuPanel() {
-  const {
-    inlinePreviewVisible,
-    setInlinePreviewVisible,
-    statusBarVisible,
-    setStatusBarVisible,
-    outlineVisible,
-    setOutlineVisible,
-    blockTagVisibility,
-    setBlockTagVisibility,
-    themeInheritance,
-    setThemeInheritance,
-    layoutMode,
-    setLayoutMode,
-  } = useEditorContext();
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Click-outside to close, mirroring VersionHistoryPanel.
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  const toggleInlinePreview = useCallback(() => {
-    setInlinePreviewVisible(!inlinePreviewVisible);
-  }, [inlinePreviewVisible, setInlinePreviewVisible]);
-
-  const toggleStatusBar = useCallback(() => {
-    setStatusBarVisible(!statusBarVisible);
-  }, [statusBarVisible, setStatusBarVisible]);
-
-  const toggleOutline = useCallback(() => {
-    setOutlineVisible(!outlineVisible);
-  }, [outlineVisible, setOutlineVisible]);
-
-  return (
-    <div className="squisq-view-menu" ref={containerRef}>
-      <button
-        type="button"
-        className={`squisq-toolbar-button squisq-view-menu-trigger${
-          open ? ' squisq-toolbar-button--active' : ''
-        }`}
-        data-tooltip="View options"
-        aria-label="View options"
-        aria-expanded={open}
-        aria-haspopup="menu"
-        onClick={() => setOpen((v) => !v)}
-      >
-        <Icon icon="fa-solid fa-eye" />
-      </button>
-      {open && (
-        <div className="squisq-view-menu-popover" role="menu" aria-label="View options">
-          <MenuRadioGroup
-            label="View"
-            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"
-            checked={inlinePreviewVisible}
-            onChange={toggleInlinePreview}
-          />
-          <MenuRadioGroup
-            label="Show block tags"
-            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"
-            checked={statusBarVisible}
-            onChange={toggleStatusBar}
-          />
-          <div className="squisq-view-menu-separator" role="separator" />
-          <MenuRadioGroup
-            label="Editor styling from theme"
-            value={themeInheritance}
-            onChange={(v) => setThemeInheritance(v as ThemeInheritance)}
-            options={[
-              { value: 'none', label: "Don't inherit" },
-              { value: 'fonts', label: 'Fonts only' },
-              { value: 'fonts-colors', label: 'Fonts & colors' },
-            ]}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function MenuToggle({
-  label,
-  checked,
-  onChange,
-}: {
-  label: string;
-  checked: boolean;
-  onChange: () => void;
-}) {
-  return (
-    <label className="squisq-view-menu-row" role="menuitemcheckbox" aria-checked={checked}>
-      <input
-        type="checkbox"
-        className="squisq-view-menu-checkbox"
-        checked={checked}
-        onChange={onChange}
-      />
-      <span className="squisq-view-menu-label">{label}</span>
-    </label>
-  );
-}
-
-function MenuRadioGroup({
-  label,
-  value,
-  onChange,
-  options,
-}: {
-  label: 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"
-      role="radiogroup"
-      aria-label={label}
-    >
-      <span className="squisq-view-menu-label">{label}</span>
-      {options.map((o) => {
-        const checked = o.value === value;
-        return (
-          <label
-            key={o.value}
-            className="squisq-view-menu-radio-row"
-            role="menuitemradio"
-            aria-checked={checked}
-          >
-            <input
-              type="radio"
-              className="squisq-view-menu-radio"
-              name={name}
-              value={o.value}
-              checked={checked}
-              onChange={() => onChange(o.value)}
-            />
-            <span className="squisq-view-menu-radio-label">{o.label}</span>
-          </label>
-        );
-      })}
-    </div>
-  );
-}

package/src/ViewSwitcher.tsx

@@ -1,56 +0,0 @@
-/**
- * ViewSwitcher
- *
- * 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: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
-  { id: 'raw', label: 'Source', shortcut: '⌘2' },
-  { id: 'preview', label: 'Use', shortcut: '⌘3' },
-];
-
-export interface ViewSwitcherProps {
-  /** Additional class name */
-  className?: string;
-}
-
-/**
- * Tab-style view switcher for the three editor modes.
- */
-export function ViewSwitcher({ className }: ViewSwitcherProps) {
-  const { activeView, setActiveView, editorMode } = useEditorContext();
-  // In code mode, only the raw view is meaningful. With just one entry in
-  // the tab list there's nothing to switch between, so suppress the whole
-  // switcher rather than render a single lonely tab.
-  const visibleViews = editorMode === 'code' ? VIEWS.filter((v) => v.id === 'raw') : VIEWS;
-  if (visibleViews.length <= 1) return null;
-
-  return (
-    <div
-      className={`squisq-view-switcher ${className || ''}`}
-      role="tablist"
-      aria-label="Editor view"
-    >
-      {visibleViews.map((view) => (
-        <button
-          key={view.id}
-          role="tab"
-          aria-selected={activeView === view.id}
-          className={`squisq-view-tab ${activeView === view.id ? 'squisq-view-tab--active' : ''}`}
-          onClick={() => setActiveView(view.id)}
-          title={`${view.label} (${view.shortcut})`}
-        >
-          <span className="squisq-view-tab-label squisq-view-tab-label--long">{view.label}</span>
-          {view.shortLabel && view.shortLabel !== view.label && (
-            <span className="squisq-view-tab-label squisq-view-tab-label--short">
-              {view.shortLabel}
-            </span>
-          )}
-        </button>
-      ))}
-    </div>
-  );
-}