zidane-ui 9.0.4 → 9.1.3

package/src/code/editor/CodeEditor.tsx

@@ -1,480 +0,0 @@
-/**
- * The code editor: a document (`useCodeDocument`) shown with pierre,
- * read-only until used and then editable, with the editor settings of
- * `EditorEnvironmentProvider` applied. Every place that shows a file's text
- * in full uses it (the app's Files tab, a skill's SKILL.md, `EditorColumn`).
- *
- *   - Edit on demand: the file mounts read-only (worker-highlighted, paints
- *     in one frame). The first pointer-down in the code, or typing, arms
- *     pierre's editor with the caret where the click landed; files up to
- *     `ARM_ON_IDLE_LINES` arm by themselves in an idle slot once highlighted.
- *     A dirty draft starts armed. `readOnly` (or the Editor setting off)
- *     never arms.
- *   - ⌘S saves (or focus loss, per setting); a disk change while dirty shows
- *     the Reload / Overwrite bar.
- *   - ⌘F (`findAsk` bumps): the armed editor's own find, else the find bar.
- *   - Focus follows `visible` (tabs keep hidden editors mounted).
- *
- * The owner adds what is specific to it (review interactions, a language
- * server's hovers and markers) through the view props, and reaches the
- * editor through the handle (`placeCaret`: a navigation into the file).
- */
-import type { Editor, Marker } from '@pierre/diffs/edit';
-import type { LineAnnotation, SelectedLineRange } from '@pierre/diffs/react';
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type MouseEvent,
-  type PointerEvent as ReactPointerEvent,
-  type ReactNode,
-  type Ref,
-} from 'react';
-
-import { buttonClass } from '../../components/button';
-import { useLabels } from '../../labels';
-import { useEditorEnvironment } from './environment';
-import { FindBar } from './find/FindBar';
-import { fileLines } from './find/find-model';
-import { useFind } from './find/useFind';
-import { FileView, type CodeToken } from './FileView';
-import type { CodeDocument } from './useCodeDocument';
-
-/** Above this many lines a file arms on interaction only (pierre's tokenisation would hitch). */
-const ARM_ON_IDLE_LINES = 3000;
-/** Frames to keep retrying focus on a view coming out of display:none. */
-const FOCUS_RETRY_FRAMES = 60;
-
-/** What a {@link CodeEditor} ref reaches. */
-export interface CodeEditorHandle {
-  /** The editor's outer element (holds the scroller and pierre's `<diffs-container>`), `null` before mount. */
-  host: () => HTMLDivElement | null;
-  /** The armed editor, `null` while read-only. */
-  editor: () => Editor<'file', unknown, undefined> | null;
-  /** Put the caret there: focuses the editor, arming it first when needed. */
-  placeCaret: (caret: { lineNumber: number; character: number }) => void;
-}
-
-/** Props of {@link CodeEditor}; `A` is the annotation payload type. */
-export interface CodeEditorProps<A> {
-  /** Display name; the language is inferred from its extension. */
-  path: string;
-  /** The file's state from `useCodeDocument`: text, draft, dirty and conflict flags, save and discard. */
-  doc: CodeDocument;
-  /** pierre's retained-session key (the draft and undo stack survive remounts under it). */
-  sessionKey: string;
-  /** Never arm the editor, even with the Editor setting on. */
-  readOnly?: boolean;
-  /** Whether this editor is on screen (default true): it takes focus when it becomes visible, arms on idle and answers ⌘F only then. */
-  visible?: boolean;
-  /** Bumps on ⌘F; the visible editor opens find. */
-  findAsk?: number;
-  /** Squiggles with hover messages, while editing. */
-  markers?: readonly Marker[];
-  /** The selected line range, controlled by the owner; needs `onSelectionEnd`. */
-  selectedLines?: SelectedLineRange | null;
-  /** Gutter line selection finished; passing it turns line selection on. */
-  onSelectionEnd?: (range: SelectedLineRange | null) => void;
-  /** Gutter "+" on hover / at the selection end; called with the range it covers. Passing it shows the button. */
-  onGutterAction?: (range: SelectedLineRange) => void;
-  /** Right-click anywhere in the view. */
-  onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void;
-  /** The pointer moved onto an identifier (for hovers and the definition underline). */
-  onTokenEnter?: (token: CodeToken, event: PointerEvent) => void;
-  /** The pointer left the identifier it entered. */
-  onTokenLeave?: () => void;
-  /** Click on an identifier (Cmd/Ctrl-click for go to definition). */
-  onTokenClick?: (token: CodeToken, event: globalThis.MouseEvent) => void;
-  /** Content anchored under lines (review comments); rendered by `renderAnnotation`. */
-  annotations?: readonly LineAnnotation<A>[];
-  /** Renders one entry of `annotations`. */
-  renderAnnotation?: (annotation: LineAnnotation<A>) => ReactNode;
-  /** The scroll container's classes (the view virtualises its lines). */
-  scrollerClassName?: string;
-  /** Extra attributes on the host (`data-*` states the owner styles). */
-  hostAttributes?: Record<string, string | undefined>;
-  /** Rendered after the view (a context menu, a hover card). */
-  children?: ReactNode;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-const SCROLLER = 'zg-code-scroller flex-1 min-h-0 overflow-auto outline-none';
-const BAR_BUTTON = buttonClass({ variant: 'secondary', size: 'xs' });
-
-function CodeEditorInner<A>(
-  {
-    path,
-    doc,
-    sessionKey,
-    readOnly = false,
-    visible = true,
-    findAsk = 0,
-    markers,
-    selectedLines,
-    onSelectionEnd,
-    onGutterAction,
-    onContextMenu,
-    onTokenEnter,
-    onTokenLeave,
-    onTokenClick,
-    annotations,
-    renderAnnotation,
-    scrollerClassName = SCROLLER,
-    hostAttributes,
-    children,
-    className,
-    style,
-  }: CodeEditorProps<A>,
-  ref: Ref<CodeEditorHandle>,
-) {
-  const { settings: ed, reducedMotion } = useEditorEnvironment();
-  const labels = useLabels();
-  const editable = !readOnly && ed.editing;
-  const [armed, setArmed] = useState(doc.dirty);
-  const editing = editable && armed;
-  const hostRef = useRef<HTMLDivElement | null>(null);
-  const editorRef = useRef<Editor<'file', A, undefined> | null>(null);
-  const pendingCaret = useRef<{ lineNumber: number; character: number } | null>(null);
-  // Where focus was when a navigation asked for the caret before the editor existed.
-  const caretAskedFrom = useRef<Element | null>(null);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      host: () => hostRef.current,
-      editor: () => editorRef.current as Editor<'file', unknown, undefined> | null,
-      placeCaret: (caret) => {
-        const editor = editorRef.current;
-        if (editor) {
-          try {
-            editor.focus({ ...caret, preventScroll: true });
-          } catch {
-            // Not attached; the line selection stands.
-          }
-          return;
-        }
-        if (!editable) return;
-        pendingCaret.current = caret;
-        caretAskedFrom.current = document.activeElement;
-        setArmed(true);
-      },
-    }),
-    [editable],
-  );
-
-  // The first pointer-down on the code itself arms (gutter clicks select lines, annotations have their own controls).
-  const armEditor = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (!editable || armed || e.button !== 0) return;
-    const route = e.nativeEvent.composedPath();
-    const lineEl = route.find((n) => n instanceof HTMLElement && n.hasAttribute('data-line')) as
-      HTMLElement | undefined;
-    if (
-      !lineEl ||
-      route.some(
-        (n) =>
-          n instanceof HTMLElement && (n.hasAttribute('data-column-number') || n.hasAttribute('data-line-annotation')),
-      )
-    )
-      return;
-    const lineNumber = Number.parseInt(lineEl.getAttribute('data-line') ?? '', 10);
-    const character = caretCharacterAt(lineEl, e.clientX);
-    pendingCaret.current = Number.isFinite(lineNumber) ? { lineNumber, character } : null;
-    caretAskedFrom.current = null;
-    setArmed(true);
-  };
-
-  // Idle arming once the worker highlight landed: pierre reuses its tokens, and its
-  // own tokenisation runs while nothing else does rather than on the first click.
-  const [highlighted, setHighlighted] = useState(false);
-  const onHighlighted = useCallback(() => setHighlighted(true), []);
-  const large = useMemo(() => countLines(doc.base.contents) > ARM_ON_IDLE_LINES, [doc.base.contents]);
-  useEffect(() => {
-    if (!editable || armed || !highlighted || !visible || large) return undefined;
-    if (window.requestIdleCallback) {
-      const id = window.requestIdleCallback(() => setArmed(true), { timeout: 2000 });
-      return () => window.cancelIdleCallback(id);
-    }
-    const id = window.setTimeout(() => setArmed(true), 300);
-    return () => window.clearTimeout(id);
-  }, [editable, armed, highlighted, visible, large]);
-
-  // Markers apply once the editor's document exists (a tick after attach).
-  const [editorTick, setEditorTick] = useState(0);
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor || !markers) return;
-    try {
-      editor.setMarkers([...markers]);
-    } catch {
-      // Document not ready yet; the next tick retries.
-    }
-  }, [markers, editorTick]);
-
-  const saveRef = useRef(doc.save);
-  useLayoutEffect(() => {
-    saveRef.current = doc.save;
-  });
-  const editorOptions = useMemo(
-    () => ({
-      roundedSelection: ed.roundedSelection,
-      matchBrackets: ed.matchBrackets,
-      autoSurround: ed.autoSurround,
-      clipboard: { readText: () => navigator.clipboard.readText() },
-      onAttach: (editor: Editor<'file', A, undefined>) => {
-        editorRef.current = editor;
-        setEditorTick((t) => t + 1);
-        const caret = pendingCaret.current;
-        const askedFrom = caretAskedFrom.current;
-        pendingCaret.current = null;
-        caretAskedFrom.current = null;
-        // Armed while the read-only scroller held focus: the editor takes it, so the keyboard keeps working.
-        const scrollerFocused =
-          !caret &&
-          !!hostRef.current &&
-          document.activeElement !== null &&
-          hostRef.current.contains(document.activeElement);
-        if (caret || scrollerFocused) {
-          requestAnimationFrame(() => {
-            // Arming takes a while: focus moved elsewhere since the navigation (a search box) stays there.
-            const active = document.activeElement;
-            if (askedFrom && active !== askedFrom && !hostRef.current?.contains(active)) return;
-            try {
-              editor.focus(caret ? { ...caret, preventScroll: true } : undefined);
-            } catch {
-              // Editor already gone; nothing to place.
-            }
-          });
-        }
-      },
-      ...(ed.saveOn === 'blur' ? { onBlur: () => void saveRef.current() } : {}),
-    }),
-    [ed.roundedSelection, ed.matchBrackets, ed.autoSurround, ed.saveOn],
-  );
-
-  // The scroller is focusable (pierre's Virtualizer does not forward tabIndex).
-  useEffect(() => {
-    hostRef.current?.querySelector<HTMLElement>('.zg-code-scroller')?.setAttribute('tabindex', '-1');
-  }, [sessionKey]);
-
-  // Focus follows the visible tab; a view out of display:none has no lines for a frame or two, so retry briefly.
-  const wasVisible = useRef(visible);
-  useEffect(() => {
-    const became = visible && !wasVisible.current;
-    wasVisible.current = visible;
-    if (!became) return;
-    let id = 0;
-    let tries = 0;
-    const tick = () => {
-      const host = hostRef.current;
-      if (!host) return;
-      const editor = editorRef.current;
-      if (editor) {
-        try {
-          editor.focus({ preventScroll: true });
-        } catch {
-          // Not attached yet; the scroller below takes it.
-        }
-      }
-      if (!host.contains(document.activeElement)) {
-        host.querySelector<HTMLElement>('.zg-code-scroller')?.focus({ preventScroll: true });
-      }
-      const landed =
-        host.contains(document.activeElement) &&
-        (!editor || host.querySelector('diffs-container')?.shadowRoot?.activeElement != null);
-      if (!landed && tries++ < FOCUS_RETRY_FRAMES) id = requestAnimationFrame(tick);
-    };
-    id = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(id);
-  }, [visible]);
-
-  // ⌘F: while editing, the editor's own find (it can replace too); read-only, the find bar.
-  const contents = doc.contents;
-  const find = useFind({
-    parts: () => [{ part: '', lines: fileLines(contents) }],
-    version: contents,
-    surfaces: () => {
-      const root = hostRef.current?.querySelector('diffs-container')?.shadowRoot;
-      return root ? [{ part: '', root }] : [];
-    },
-    scroller: () => hostRef.current?.querySelector<HTMLElement>('.zg-code-scroller') ?? null,
-    fallback: (m, scroller) => estimateLineTop(scroller, m.line),
-    smooth: !reducedMotion,
-  });
-  const seenAsk = useRef(findAsk);
-  useEffect(() => {
-    if (findAsk === seenAsk.current) return;
-    seenAsk.current = findAsk;
-    if (!visible) return;
-    const editor = editorRef.current;
-    const root = hostRef.current?.querySelector('diffs-container')?.shadowRoot;
-    if (editing && editor && root) {
-      try {
-        editor.focus({ preventScroll: true });
-      } catch {
-        // Not attached: the find bar below.
-      }
-      const target = root.activeElement;
-      if (target) {
-        const mac = navigator.platform.toLowerCase().includes('mac');
-        target.dispatchEvent(
-          new globalThis.KeyboardEvent('keydown', {
-            key: 'f',
-            code: 'KeyF',
-            metaKey: mac,
-            ctrlKey: !mac,
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-          }),
-        );
-        return;
-      }
-    }
-    find.show();
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- runs per ask
-  }, [findAsk]);
-
-  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    // The find box is typed into, not the code.
-    if ((e.target as HTMLElement).closest('[role="search"]')) return;
-    // Typing into the read-only view arms it (the way a big file gets its editor).
-    if (editable && !armed && isEditKey(e)) {
-      setArmed(true);
-      return;
-    }
-    if (editing && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
-      e.preventDefault();
-      void doc.save();
-    }
-  };
-
-  return (
-    // The host only hears what bubbles from pierre's editor inside it (⌘S, the arming keys and pointer-down).
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      ref={hostRef}
-      data-zg-keyscope="editor"
-      {...hostAttributes}
-      className={['flex-1 min-h-0 flex flex-col', className].filter(Boolean).join(' ')}
-      style={style}
-      onKeyDown={onKeyDown}
-      onPointerDownCapture={armEditor}
-    >
-      {doc.conflict && (
-        <div
-          role="status"
-          className="shrink-0 flex items-center gap-2 px-3 min-h-8 py-1 text-zg-meta bg-zg-warn-soft text-[var(--zg-text)]"
-        >
-          <span className="i-ph-warning text-zg-label text-zg-warn shrink-0" aria-hidden />
-          <span className="flex-1 min-w-0 leading-4" title={labels.editorConflictDetail}>
-            {labels.editorConflict}
-          </span>
-          <button type="button" onClick={doc.discard} className={BAR_BUTTON}>
-            {labels.editorReload}
-          </button>
-          <button type="button" onClick={() => void doc.save(true)} className={`${BAR_BUTTON} text-zg-danger`}>
-            {labels.editorOverwrite}
-          </button>
-        </div>
-      )}
-      <div className="relative flex-1 min-h-0 flex flex-col">
-        <FindBar find={find} label={labels.findInFile} />
-        <FileView<A>
-          key={sessionKey}
-          name={path}
-          contents={doc.seed}
-          hideHeader
-          wrap={ed.wordWrap}
-          tabSize={ed.tabSize}
-          selectedLines={selectedLines}
-          onSelectionEnd={onSelectionEnd}
-          onGutterAction={onGutterAction}
-          onContextMenu={onContextMenu}
-          onTokenEnter={onTokenEnter}
-          onTokenLeave={onTokenLeave}
-          onTokenClick={onTokenClick}
-          onHighlighted={armed ? undefined : onHighlighted}
-          annotations={annotations}
-          renderAnnotation={renderAnnotation}
-          virtualize={{ className: scrollerClassName }}
-          edit={editing ? { options: editorOptions, stateKey: sessionKey, onChange: doc.onEditorChange } : undefined}
-        />
-      </div>
-      {children}
-    </div>
-  );
-}
-
-/**
- * A file's text, read-only until used and then editable in place; see the module comment for how it
- * arms, saves and finds.
- *
- * @param props - The document, its session key and the view hooks; `ref` reaches the {@link CodeEditorHandle}.
- */
-export const CodeEditor = memo(forwardRef(CodeEditorInner)) as <A = unknown>(
-  props: CodeEditorProps<A> & {
-    /** Receives the {@link CodeEditorHandle}. */
-    ref?: Ref<CodeEditorHandle>;
-  },
-) => ReturnType<typeof CodeEditorInner>;
-
-function countLines(text: string): number {
-  let n = 1;
-  for (let i = text.indexOf('\n'); i !== -1; i = text.indexOf('\n', i + 1)) n++;
-  return n;
-}
-
-function isEditKey(e: KeyboardEvent): boolean {
-  if (e.metaKey || e.ctrlKey || e.altKey) return false;
-  return e.key.length === 1 || e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete';
-}
-
-/**
- * 0-based character under `clientX` on a rendered line: walk the line's text
- * nodes with a Range to find the glyph boundary. Falls back to the line end.
- */
-function caretCharacterAt(lineEl: HTMLElement, clientX: number): number {
-  const text = lineEl.textContent ?? '';
-  const walker = document.createTreeWalker(lineEl, NodeFilter.SHOW_TEXT);
-  let offset = 0;
-  const range = document.createRange();
-  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-    const len = node.textContent?.length ?? 0;
-    range.selectNodeContents(node);
-    const rect = range.getBoundingClientRect();
-    if (clientX < rect.left) return offset;
-    if (clientX <= rect.right && len > 0) {
-      const perChar = rect.width / len;
-      return offset + Math.min(len, Math.round((clientX - rect.left) / perChar));
-    }
-    offset += len;
-  }
-  return text.length;
-}
-
-/**
- * Where line `line` sits in the scroll content when it is not rendered yet:
- * one line height per line from any rendered one (the view is virtualised).
- */
-function estimateLineTop(scroller: HTMLElement, line: number): { top: number } | undefined {
-  const probe = scroller
-    .querySelector('diffs-container')
-    ?.shadowRoot?.querySelector<HTMLElement>('[data-line]:not([data-column-number])');
-  if (!probe) return undefined;
-  const probeLine = Number(probe.getAttribute('data-line'));
-  const rect = probe.getBoundingClientRect();
-  if (!Number.isFinite(probeLine) || rect.height <= 0) return undefined;
-  const probeTop = rect.top - scroller.getBoundingClientRect().top + scroller.scrollTop;
-  return { top: probeTop + (line - probeLine) * rect.height };
-}