@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/VersionHistoryPanel.tsx

@@ -0,0 +1,329 @@
+/**
+ * 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 } from 'react';
+import { DiffEditor } from '@monaco-editor/react';
+import type { Version } from '@bendyline/squisq/versions';
+import { useEditorContext } from './EditorContext';
+
+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, theme } = 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 = theme === '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)}
+      >
+        <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>
+      </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">
+                <DiffEditor
+                  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>
+          )}
+          <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

@@ -0,0 +1,188 @@
+/**
+ * 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, useRef, useState } from 'react';
+import { useEditorContext, type ThemeInheritance } from './EditorContext';
+
+export function ViewMenuPanel() {
+  const {
+    inlinePreviewVisible,
+    setInlinePreviewVisible,
+    statusBarVisible,
+    setStatusBarVisible,
+    outlineVisible,
+    setOutlineVisible,
+    blockTagsVisible,
+    setBlockTagsVisible,
+    themeInheritance,
+    setThemeInheritance,
+  } = 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]);
+
+  const toggleBlockTags = useCallback(() => {
+    setBlockTagsVisible(!blockTagsVisible);
+  }, [blockTagsVisible, setBlockTagsVisible]);
+
+  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)}
+      >
+        <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>
+      </button>
+      {open && (
+        <div className="squisq-view-menu-popover" role="menu" aria-label="View options">
+          <MenuToggle label="Show outline" checked={outlineVisible} onChange={toggleOutline} />
+          <MenuToggle
+            label="Show block previews"
+            checked={inlinePreviewVisible}
+            onChange={toggleInlinePreview}
+          />
+          <MenuToggle
+            label="Show block tags"
+            checked={blockTagsVisible}
+            onChange={toggleBlockTags}
+          />
+          <MenuToggle
+            label="Show status bar"
+            checked={statusBarVisible}
+            onChange={toggleStatusBar}
+          />
+          <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={[
+              { 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,
+  name,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  name: string;
+  value: string;
+  onChange: (next: string) => void;
+  options: readonly { value: string; label: string }[];
+}) {
+  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>
+  );
+}