@adecore/editor-react 0.22.1 → 0.23.1

package/src/SplitDiffView.tsx

@@ -0,0 +1,337 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parseChord } from '@adecore/editor/keymap';
+import type { EditorLineHighlight } from '@adecore/editor';
+import type { DiffSplit } from '@adecore/merge';
+import type { DiffViewProps } from './DiffView.tsx';
+import type { DiffSourceSide } from './diff-syntax.ts';
+import { DiffOverlays, type MountedDiff } from './diff-overlays.tsx';
+import { wordMarks } from './diff-wordmarks.ts';
+import { RowHost, LineActionHost } from './row-host.ts';
+import { splitAlignment } from './split-alignment.ts';
+import { SplitScroll } from './split-scroll.ts';
+
+const SIDES = ['old', 'new'] as const;
+
+interface MountedSplit {
+    old: MountedDiff;
+    new: MountedDiff;
+    align(): void;
+    drive(side: DiffSourceSide): void;
+    update(run: () => void): void;
+}
+
+interface SplitViewProps extends DiffViewProps {
+    display: DiffSplit;
+    unfold(id: number): void;
+    blocked: ReadonlySet<number>;
+}
+
+export function SplitDiffView({
+    engine,
+    document,
+    display,
+    unfold,
+    blocked,
+    theme,
+    tokens,
+    wrap = true,
+    fill = false,
+    maxHeight,
+    label,
+    className,
+    ref,
+    onMount
+}: SplitViewProps) {
+    const { t } = useTranslation('editor');
+    const emphasis = useMemo(() => wordMarks(document), [document]);
+    const oldElement = useRef<HTMLDivElement>(null);
+    const newElement = useRef<HTMLDivElement>(null);
+    const current = useRef({ display, tokens, theme, wrap, label });
+    const applied = useRef({ theme, wrap, label });
+    const [failure, setFailure] = useState<{ error: unknown } | null>(null);
+    const [mounted, setMounted] = useState<MountedSplit | null>(null);
+    const [height, setHeight] = useState(0);
+    useLayoutEffect(() => {
+        current.current = { display, tokens, theme, wrap, label };
+    });
+    useLayoutEffect(() => {
+        const oldHost = oldElement.current;
+        const newHost = newElement.current;
+        if (oldHost === null || newHost === null) {
+            return;
+        }
+        const initial = current.current;
+        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
+        const mount = (side: DiffSourceSide, host: HTMLElement): MountedDiff => {
+            const initial = current.current;
+            const editor = engine.mount(host, {
+                text: initial.display[side].text,
+                theme: initial.theme,
+                wrap: initial.wrap,
+                label: initial.label,
+                readOnly: true,
+                guides: false,
+                folding: false,
+                foldOutline: 'off',
+                handBack: [parseChord('Mod+Enter')]
+            });
+            editor.setBlocks([]);
+            editor.setLineTokens((line) => {
+                const row = current.current.display[side].rows[line];
+                return row === undefined ? null : current.current.tokens?.get(side, row[side]!.index);
+            });
+            return { engine, editor, rows: new RowHost(editor, 'diff-alignment'), actions: new LineActionHost(editor, 'diff-status') };
+        };
+        const old = mount('old', oldHost);
+        let fresh: MountedDiff;
+        try {
+            fresh = mount('new', newHost);
+        } catch (error) {
+            old.editor.dispose();
+            throw error;
+        }
+        const sides = { old, new: fresh };
+        let stopped = false;
+        let pending = false;
+        let failed = false;
+        const scroll = new SplitScroll({ old: old.editor, new: fresh.editor });
+        let aligning = false;
+        let updating = false;
+        const fail = (error: unknown): void => {
+            failed = true;
+            setFailure({ error });
+        };
+        const measure = (): void => setHeight(Math.max(sides.old.editor.getContentHeight(), sides.new.editor.getContentHeight()));
+        const align = (): void => {
+            if (pending || stopped || failed) {
+                return;
+            }
+            pending = true;
+            // Intrinsic measurements arrive after each render; align both editors before the next paint.
+            queueMicrotask(() => {
+                pending = false;
+                if (stopped || failed) {
+                    return;
+                }
+                aligning = true;
+                try {
+                    const rows = splitAlignment(
+                        current.current.display.aligned,
+                        (line) => sides.old.editor.getLineHeight(line),
+                        (line) => sides.new.editor.getLineHeight(line)
+                    );
+                    sides.old.rows.set(rows.old);
+                    sides.new.rows.set(rows.new);
+                } catch (error) {
+                    fail(error);
+                    return;
+                } finally {
+                    aligning = false;
+                }
+                try {
+                    measure();
+                    scroll.sync();
+                } catch (error) {
+                    fail(error);
+                }
+            });
+        };
+        const update = (run: () => void): void => {
+            updating = true;
+            try {
+                run();
+            } finally {
+                updating = false;
+            }
+            align();
+        };
+        const stops = SIDES.flatMap((side) => [
+            sides[side].editor.onLineHeights(align),
+            sides[side].editor.onViewChange(() => {
+                if (stopped || failed || aligning || updating) {
+                    return;
+                }
+                try {
+                    measure();
+                    scroll.changed(side);
+                } catch (error) {
+                    fail(error);
+                }
+            })
+        ]);
+        setMounted({ old: sides.old, new: sides.new, align, update, drive: (side) => scroll.drive(side) });
+        measure();
+        return () => {
+            stopped = true;
+            for (const stop of stops) {
+                stop();
+            }
+            for (const side of SIDES) {
+                sides[side].editor.dispose();
+            }
+        };
+    }, [engine]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        mounted.update(() => {
+            for (const side of SIDES) {
+                const { editor, actions } = mounted[side];
+                editor.setText(display[side].text);
+                editor.setLineNumbers((line) => {
+                    const row = current.current.display[side].rows[line];
+                    return row === undefined ? null : String(row[side]!.number);
+                });
+                const highlights: EditorLineHighlight[] = [];
+                for (const [index, row] of display[side].rows.entries()) {
+                    if (row.change === 'context') {
+                        continue;
+                    }
+                    highlights.push({
+                        startLine: index + 1,
+                        endLine: index + 1,
+                        color: side === 'old' ? '--editor-deleted' : '--editor-added',
+                        bar: side === 'old' ? 'hatched' : 'solid',
+                        emphasis: [emphasis[side].get(row[side]!.index) ?? []]
+                    });
+                }
+                editor.setLineHighlights(highlights);
+                editor.setChangeMarks(
+                    highlights.map((highlight) => ({ startLine: highlight.startLine, endLine: highlight.endLine, kind: side === 'old' ? 'deleted' : 'added' }))
+                );
+                actions.set(display[side].rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
+            }
+        });
+    }, [mounted, engine, display, emphasis]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        for (const side of SIDES) {
+            mounted[side].editor.setLineLabels((line) => {
+                const row = display[side].rows[line];
+                if (row === undefined || row.change === 'context') {
+                    return null;
+                }
+                return t(side === 'old' ? 'diff.removed' : 'diff.added', { number: row[side]!.number });
+            });
+        }
+    }, [mounted, engine, display, t]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        mounted.update(() => {
+            for (const side of SIDES) {
+                const previous = applied.current;
+                if (previous.theme !== theme) {
+                    mounted[side].editor.setTheme(theme);
+                }
+                if (previous.wrap !== wrap) {
+                    mounted[side].editor.setWrap(wrap);
+                }
+                if (previous.label !== label) {
+                    mounted[side].editor.setLabel(label);
+                }
+            }
+        });
+        applied.current = { theme, wrap, label };
+    }, [mounted, engine, theme, wrap, label]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        const refresh = (): void => {
+            for (const side of SIDES) {
+                mounted[side].editor.setLineTokens((line) => {
+                    const row = current.current.display[side].rows[line];
+                    return row === undefined ? null : current.current.tokens?.get(side, row[side]!.index);
+                });
+            }
+        };
+        refresh();
+        const ownerWindow = oldElement.current?.ownerDocument.defaultView;
+        let frame: number | undefined;
+        let pending = false;
+        let stopped = false;
+        const schedule = (): void => {
+            if (pending) {
+                return;
+            }
+            pending = true;
+            const paint = (): void => {
+                pending = false;
+                if (!stopped) {
+                    refresh();
+                }
+            };
+            if (ownerWindow?.requestAnimationFrame !== undefined) {
+                frame = ownerWindow.requestAnimationFrame(paint);
+            } else {
+                queueMicrotask(paint);
+            }
+        };
+        const stop = tokens?.subscribe(schedule);
+        return () => {
+            stopped = true;
+            stop?.();
+            if (frame !== undefined) {
+                ownerWindow?.cancelAnimationFrame?.(frame);
+            }
+        };
+    }, [mounted, engine, display, tokens]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.old.engine !== engine) {
+            return;
+        }
+        const stops = SIDES.map((side) => onMount?.(mounted[side].editor, side));
+        return () => {
+            for (const stop of stops) {
+                stop?.();
+            }
+        };
+    }, [mounted, engine, onMount]);
+    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+    if (failure !== null) {
+        throw failure.error;
+    }
+    return (
+        <div
+            className={`adecore-editor-diff adecore-editor-diff-split ${className ?? ''}`}
+            ref={ref}
+            role="group"
+            aria-label={label}
+            data-scroll={fill || height > limit}
+            style={{ height: fill ? '100%' : Math.min(height, limit) }}
+        >
+            {SIDES.map((side) => (
+                <div
+                    key={side}
+                    className="adecore-editor-diff-side"
+                    data-side={side}
+                    role="group"
+                    aria-label={t(`diff.${side}Side`)}
+                    onWheelCapture={() => {
+                        mounted?.drive(side);
+                    }}
+                    onFocusCapture={() => {
+                        mounted?.drive(side);
+                    }}
+                    onPointerDownCapture={() => {
+                        mounted?.drive(side);
+                    }}
+                    onKeyDownCapture={() => {
+                        mounted?.drive(side);
+                    }}
+                >
+                    <div ref={side === 'old' ? oldElement : newElement} className="adecore-editor-diff-surface" />
+                    {mounted !== null && mounted[side].engine === engine && (
+                        <DiffOverlays mounted={mounted[side]} display={display[side]} unfold={unfold} blocked={blocked} />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}

package/src/SymbolPicker.tsx

@@ -28,7 +28,8 @@ const TONES: Record<SymbolTone, string> = {
 
 const SEARCH_DELAY_MS = 200;
 
-function Badge({ kind }: { kind: number }) {
+/* The letter badge of a symbol kind, tinted by what the symbol is. */
+export function SymbolBadge({ kind }: { kind: number }) {
     return (
         <span className={`grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`}>
             {letterOfKind(kind)}
@@ -153,7 +154,7 @@ export function SymbolPicker({ language, view }: { language: EditorLanguage; vie
                                 className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"
                                 onClick={() => choose(index)}
                             >
-                                <Badge kind={place.kind} />
+                                <SymbolBadge kind={place.kind} />
                                 <span className="shrink-0">{place.name}</span>
                                 <span className="min-w-0 truncate font-mono text-text-faint">{place.container}</span>
                                 <span className="ml-auto shrink-0 font-mono text-text-faint">
@@ -182,7 +183,7 @@ export function SymbolPicker({ language, view }: { language: EditorLanguage; vie
                                             className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"
                                             onClick={() => choose(position)}
                                         >
-                                            <Badge kind={entry.kind} />
+                                            <SymbolBadge kind={entry.kind} />
                                             <span className="shrink-0">{entry.name}</span>
                                             <span className="min-w-0 truncate font-mono text-text-faint">{entry.detail}</span>
                                             {entry.container !== '' && <span className="min-w-0 truncate text-text-faint">{entry.container}</span>}

package/src/call-hierarchy-model.ts

@@ -0,0 +1,151 @@
+import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range } from '@adecore/lsp';
+
+/* Callers of a symbol, or the symbols it calls. */
+export type CallDirection = 'incoming' | 'outgoing';
+
+/* The most calls of one level that are drawn at once; the rest wait behind a row that shows more. */
+export const CALL_LEVEL_LIMIT = 50;
+
+export type CallLoad = 'idle' | 'loading' | 'loaded' | 'failed';
+
+/* One symbol of the tree and what is known of its calls. */
+export interface CallNode {
+    readonly id: string;
+    readonly parent: string | null;
+    /* One for a root. */
+    readonly level: number;
+    readonly item: CallHierarchyItem;
+    /* Where the call is made, in `siteUri`; empty for a root. */
+    readonly sites: readonly Range[];
+    readonly siteUri: string | null;
+    readonly expanded: boolean;
+    readonly load: CallLoad;
+    readonly error: string | null;
+    /* Every call the server returned, in the order they are listed. */
+    readonly children: readonly string[];
+    /* How many of the children are drawn. */
+    readonly shown: number;
+}
+
+/* A line of the tree as it is drawn. */
+export type CallRow =
+    | {
+          readonly kind: 'node';
+          readonly id: string;
+          readonly level: number;
+          readonly item: CallHierarchyItem;
+          readonly expanded: boolean;
+          readonly load: CallLoad;
+          readonly sites: number;
+          /* Whether the server returned calls for it, which only a loaded node knows. */
+          readonly leaf: boolean;
+          /* Where this row stands among the siblings, from one. */
+          readonly position: number;
+          readonly size: number;
+      }
+    | {
+          readonly kind: 'status';
+          readonly id: string;
+          /* The node the status is about, which a failed one loads again. */
+          readonly parent: string;
+          readonly level: number;
+          readonly status: 'loading' | 'empty' | 'failed';
+          readonly message: string | null;
+      }
+    | { readonly kind: 'more'; readonly id: string; readonly level: number; readonly parent: string; readonly hidden: number };
+
+/* The id of the status line under a node. */
+export function statusIdOf(parent: string): string {
+    return `${parent}:status`;
+}
+
+/* The id of the line that shows more calls under a node. */
+export function moreIdOf(parent: string): string {
+    return `${parent}:more`;
+}
+
+/* The tree's roots, each one a symbol the server prepared. */
+export function rootsOf(items: readonly CallHierarchyItem[]): CallNode[] {
+    return items.map((item, index) => ({
+        id: `r${index}`,
+        parent: null,
+        level: 1,
+        item,
+        sites: [],
+        siteUri: null,
+        expanded: true,
+        load: 'idle',
+        error: null,
+        children: [],
+        shown: 0
+    }));
+}
+
+/*
+ * The children of a node made from the calls a server returned, in the order the server gave them.
+ * The call sites of a caller are in its own file; those of a callee are in the file of the node that was asked about.
+ */
+export function childrenOf(direction: CallDirection, parent: CallNode, calls: readonly (CallHierarchyIncomingCall | CallHierarchyOutgoingCall)[]): CallNode[] {
+    const entries = calls.map((call) => ({ item: 'from' in call ? call.from : call.to, sites: call.fromRanges }));
+    return entries.map((entry, index) => ({
+        id: `${parent.id}.${index}`,
+        parent: parent.id,
+        level: parent.level + 1,
+        item: entry.item,
+        sites: entry.sites,
+        siteUri: direction === 'incoming' ? entry.item.uri : parent.item.uri,
+        expanded: false,
+        load: 'idle',
+        error: null,
+        children: [],
+        shown: 0
+    }));
+}
+
+/* The lines the tree draws: every root, and under an expanded node its status, its calls and the row that shows more. */
+export function rowsOf(nodes: ReadonlyMap<string, CallNode>, roots: readonly string[]): CallRow[] {
+    const rows: CallRow[] = [];
+    const visit = (id: string, position: number, size: number): void => {
+        const node = nodes.get(id)!;
+        rows.push({
+            kind: 'node',
+            id,
+            level: node.level,
+            item: node.item,
+            expanded: node.expanded,
+            load: node.load,
+            sites: node.sites.length,
+            leaf: node.load === 'loaded' && node.children.length === 0,
+            position,
+            size
+        });
+        if (!node.expanded) {
+            return;
+        }
+        if (node.load === 'loading') {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'loading', message: null });
+        } else if (node.load === 'failed') {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'failed', message: node.error });
+        } else if (node.load === 'loaded' && node.children.length === 0) {
+            rows.push({ kind: 'status', id: statusIdOf(id), parent: id, level: node.level + 1, status: 'empty', message: null });
+        }
+        const shown = node.children.slice(0, node.shown);
+        shown.forEach((child, index) => visit(child, index + 1, node.children.length));
+        if (node.children.length > node.shown) {
+            rows.push({ kind: 'more', id: moreIdOf(id), level: node.level + 1, parent: id, hidden: node.children.length - node.shown });
+        }
+    };
+    roots.forEach((root, index) => visit(root, index + 1, roots.length));
+    return rows;
+}
+
+/* The rows a key can land on: symbols, and the row that shows more. */
+export function stepsOf(rows: readonly CallRow[]): CallRow[] {
+    return rows.filter((row) => row.kind !== 'status');
+}
+
+/* The place a node goes to: its first call site, or the symbol itself for a root. */
+export function targetOf(node: CallNode, site = 0): { uri: string; range: Range } {
+    const range = node.sites[site];
+    return range === undefined || node.siteUri === null ? { uri: node.item.uri, range: node.item.selectionRange } : { uri: node.siteUri, range };
+}