@adecore/editor-react 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor-react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "description": "Language-enabled editors, feature coordination and React popups over injected language services.",
   "license": "FSL-1.1-MIT",
@@ -49,6 +49,11 @@
     "./locales/*.json": {
       "source": "./src/locales/*.json",
       "default": "./dist/locales/*.json"
+    },
+    "./snippet-transform-worker": {
+      "source": "./src/snippet-transform-worker.ts",
+      "types": "./dist/snippet-transform-worker.d.ts",
+      "default": "./dist/snippet-transform-worker.js"
     }
   },
   "scripts": {
@@ -57,9 +62,9 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor": "0.22.0",
-    "@adecore/lsp": "0.22.0",
-    "@adecore/merge": "0.22.0",
+    "@adecore/editor": "0.23.0",
+    "@adecore/lsp": "0.23.0",
+    "@adecore/merge": "0.23.0",
     "lucide-react": "^1.47.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
@@ -67,7 +72,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.22.0",
+    "@adecore/ui": "^0.23.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/CallHierarchyPanel.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useId, useLayoutEffect, useRef, type ReactNode, type Ref } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import { Icon, IconButton, Segmented, Spinner, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { CALL_HIERARCHY_HEIGHT } from './call-hierarchy.ts';
+import { CALL_LEVEL_LIMIT, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { basenameOf, relativeTo } from './paths.ts';
+import { PathText } from './PathText.tsx';
+import { Preview } from './PeekPanel.tsx';
+import type { CallHierarchyView } from './popups.ts';
+import { SymbolBadge } from './SymbolPicker.tsx';
+
+const INDENT = 14;
+const BASE_INDENT = 8;
+
+type NodeRow = Extract<CallRow, { kind: 'node' }>;
+
+function folderOf(path: string): string {
+    return path.slice(0, Math.max(0, path.lastIndexOf('/')));
+}
+
+interface LineProps {
+    row: CallRow;
+    id: string;
+    active: boolean;
+    expanded?: boolean;
+    position?: number;
+    size?: number;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    onClick(): void;
+    onDoubleClick?(): void;
+}
+
+/* One line of the tree. Status lines are treeitems too, so the level of a symbol's calls is read the same way, but nothing selects them. */
+function Line({ row, id, active, expanded, position, size, ref, children, onClick, onDoubleClick }: LineProps) {
+    return (
+        <div
+            ref={ref}
+            id={id}
+            role="treeitem"
+            aria-level={row.level}
+            aria-selected={active}
+            aria-expanded={expanded}
+            aria-posinset={position}
+            aria-setsize={size}
+            aria-disabled={row.kind === 'status' ? true : undefined}
+            data-active={active}
+            className="flex h-[22px] w-full cursor-default items-center gap-1.5 pr-3 text-left font-mono text-code hover:bg-surface-hover data-[active=true]:bg-accent-soft"
+            style={{ paddingLeft: BASE_INDENT + (row.level - 1) * INDENT }}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
+        >
+            {children}
+        </div>
+    );
+}
+
+function Symbol({ language, row, active, id, ref }: { language: EditorLanguage; row: NodeRow; active: boolean; id: string; ref?: Ref<HTMLDivElement> }) {
+    const { t } = useTranslation('editor');
+    const { item } = row;
+    const path = relativeTo(fileUriToPath(item.uri) ?? item.uri, language.project.folder);
+    const tool = language.callHierarchy;
+    return (
+        <Line
+            ref={ref}
+            row={row}
+            id={id}
+            active={active}
+            expanded={row.leaf ? undefined : row.expanded}
+            position={row.position}
+            size={row.size}
+            onClick={() => (active ? tool.go(row.id) : tool.select(row.id))}
+            onDoubleClick={() => tool.go(row.id)}
+        >
+            <span
+                aria-hidden
+                className="grid size-3.5 shrink-0 place-items-center text-text-muted"
+                onClick={(event) => {
+                    event.stopPropagation();
+                    tool.toggle(row.id);
+                }}
+            >
+                {row.leaf ? null : <Icon icon={row.expanded ? ChevronDown : ChevronRight} size={14} />}
+            </span>
+            <SymbolBadge kind={item.kind} />
+            <span className={`shrink-0 text-text ${item.tags?.includes(1) ? 'line-through' : ''}`}>{item.name}</span>
+            {item.detail !== undefined && item.detail !== '' && <span className="min-w-0 flex-1 truncate text-text-muted">{item.detail}</span>}
+            <span className="ml-auto flex shrink-0 items-center gap-2 pl-2 font-sans text-xs text-text-faint">
+                {row.sites > 1 && (
+                    <Tooltip label={t('language.callHierarchy.sites', { count: row.sites, formatted: formatNumber(row.sites) })}>
+                        <span className="text-text-muted">{`×${formatNumber(row.sites)}`}</span>
+                    </Tooltip>
+                )}
+                <Tooltip label={path}>
+                    <span className="max-w-40 truncate">{`${basenameOf(path)}:${formatNumber(item.selectionRange.start.line + 1)}`}</span>
+                </Tooltip>
+            </span>
+        </Line>
+    );
+}
+
+function Tree({ language, view }: { language: EditorLanguage; view: CallHierarchyView }) {
+    const { t } = useTranslation('editor');
+    const treeId = useId();
+    const activeRow = useRef<HTMLDivElement>(null);
+    const idOf = (row: CallRow): string => `${treeId}-${row.id}`;
+    const activeId = view.rows.some((row) => row.id === view.active) ? `${treeId}-${view.active}` : undefined;
+
+    useEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active]);
+
+    // The focus stays in the text, so the input is what names the tree and its active row.
+    useLayoutEffect(() => {
+        language.editor.setInputPopup({ controls: treeId, activeDescendant: activeId });
+        return () => language.editor.setInputPopup(null);
+    }, [language, treeId, activeId]);
+
+    return (
+        <div id={treeId} role="tree" aria-label={t('language.callHierarchy.label')} className="w-1/2 shrink-0 overflow-y-auto border-r border-border py-1">
+            {view.rows.map((row) => {
+                const active = row.id === view.active;
+                const ref = active ? activeRow : undefined;
+                if (row.kind === 'node') {
+                    return <Symbol key={row.id} ref={ref} language={language} row={row} active={active} id={idOf(row)} />;
+                }
+                if (row.kind === 'more') {
+                    const next = Math.min(row.hidden, CALL_LEVEL_LIMIT);
+                    return (
+                        <Line key={row.id} ref={ref} row={row} id={idOf(row)} active={active} onClick={() => language.callHierarchy.showMore(row.parent)}>
+                            <span className="font-sans text-xs text-accent">
+                                {t('language.callHierarchy.more', { count: next, formatted: formatNumber(next), hidden: formatNumber(row.hidden) })}
+                            </span>
+                        </Line>
+                    );
+                }
+                return (
+                    <Line key={row.id} row={row} id={idOf(row)} active={false} onClick={() => language.callHierarchy.retry(row.parent)}>
+                        <StatusText row={row} direction={view.direction} />
+                    </Line>
+                );
+            })}
+        </div>
+    );
+}
+
+function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status' }>; direction: CallDirection }) {
+    const { t } = useTranslation('editor');
+    if (row.status === 'loading') {
+        return (
+            <span className="flex items-center gap-2 font-sans text-xs text-text-muted">
+                <Spinner size={12} />
+                {t('language.callHierarchy.loading')}
+            </span>
+        );
+    }
+    if (row.status === 'failed') {
+        return (
+            <span className="min-w-0 truncate font-sans text-xs text-status-error">{t('language.callHierarchy.retry', { message: row.message ?? '' })}</span>
+        );
+    }
+    return (
+        <span className="font-sans text-xs text-text-muted">
+            {t(direction === 'incoming' ? 'language.callHierarchy.noIncoming' : 'language.callHierarchy.noOutgoing')}
+        </span>
+    );
+}
+
+/*
+ * The call hierarchy of a symbol in the row the editor leaves under the line: the tree of callers or callees on
+ * the left and the code of the active call on the right. Like the peek it portals into that row, which the
+ * editor makes again when it scrolls back into view.
+ */
+export function CallHierarchyPanel({ language, view }: { language: EditorLanguage; view: CallHierarchyView }) {
+    const { t } = useTranslation('editor');
+    if (view.container === null) {
+        return null;
+    }
+    const folder = language.project.folder;
+    const path = view.preview === null ? null : fileUriToPath(view.preview.uri);
+    const shown = path === null ? '' : folderOf(relativeTo(path, folder));
+    return createPortal(
+        <div
+            className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
+            style={{ height: CALL_HIERARCHY_HEIGHT }}
+            onPointerDown={(event) => event.preventDefault()}
+        >
+            <div className="peek-hatch h-[14px]" />
+            <div className="flex h-[33px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm">
+                <Segmented
+                    value={view.direction}
+                    onValueChange={(direction) => language.callHierarchy.setDirection(direction)}
+                    label={t('language.callHierarchy.direction')}
+                    options={[
+                        { id: 'incoming', label: t('language.callHierarchy.incoming') },
+                        { id: 'outgoing', label: t('language.callHierarchy.outgoing') }
+                    ]}
+                />
+                <span className="shrink-0 font-medium">{view.name}</span>
+                <span className="shrink-0 font-medium text-text-muted">{path === null ? '' : basenameOf(path)}</span>
+                <PathText path={shown} className="text-text-muted" />
+                <div className="ml-auto flex shrink-0 items-center gap-1">
+                    {view.sites > 1 && (
+                        <>
+                            <IconButton
+                                icon={ChevronLeft}
+                                size="xs"
+                                label={t('language.callHierarchy.previousSite')}
+                                onClick={() => language.callHierarchy.stepSite(-1)}
+                            />
+                            <span className="text-text-muted">
+                                {t('language.callHierarchy.site', { current: formatNumber(view.site + 1), total: formatNumber(view.sites) })}
+                            </span>
+                            <IconButton
+                                icon={ChevronRight}
+                                size="xs"
+                                label={t('language.callHierarchy.nextSite')}
+                                onClick={() => language.callHierarchy.stepSite(1)}
+                            />
+                        </>
+                    )}
+                    <IconButton icon={X} size="xs" label={t('language.callHierarchy.close')} onClick={() => language.callHierarchy.close()} />
+                </div>
+            </div>
+            <div className="flex h-[180px] shrink-0">
+                <Tree language={language} view={view} />
+                <Preview preview={view.preview} />
+            </div>
+            <div className="peek-hatch h-[14px]" />
+        </div>,
+        view.container
+    );
+}

package/src/CompletionPopup.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import type { EditorRect } from '@adecore/editor';
@@ -64,6 +64,7 @@ const ROW_CHROME = 72;
  */
 export function CompletionPopup({ language, view, rect }: { language: EditorLanguage; view: CompletionView; rect: EditorRect }) {
     const { t } = useTranslation('editor');
+    const listId = useId();
     const list = useRef<HTMLDivElement>(null);
     const docs = useRef<HTMLDivElement>(null);
     const activeRow = useRef<HTMLButtonElement>(null);
@@ -114,6 +115,14 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
 
     const total = view.rows.length;
     const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+    const optionId = (index: number): string => `${listId}-option-${index}`;
+    const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
+
+    // The focus stays in the text, so the input is what names the list and its active option.
+    useLayoutEffect(() => {
+        language.editor.setInputPopup({ controls: listId, activeDescendant: activeId });
+        return () => language.editor.setInputPopup(null);
+    }, [language, listId, activeId]);
 
     return createPortal(
         <>
@@ -132,6 +141,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                     }}
                 />
                 <div
+                    id={listId}
                     role="listbox"
                     className="w-0 min-w-full overflow-y-auto p-1"
                     style={{ maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8 }}
@@ -143,6 +153,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                         return (
                             <button
                                 key={`${index}:${row.label}`}
+                                id={optionId(index)}
                                 ref={index === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"

package/src/DiffView.tsx

@@ -0,0 +1,262 @@
+import { useLayoutEffect, useMemo, useRef, useState, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Editor, EditorEngine, EditorLineHighlight, EditorTheme } from '@adecore/editor';
+import { parseChord } from '@adecore/editor/keymap';
+import { diffDisplay, diffSplit, type DiffDocument, type DiffDisplay } from '@adecore/merge';
+import { wordMarks } from './diff-wordmarks.ts';
+import { DiffOverlays, type MountedDiff } from './diff-overlays.tsx';
+import { SplitDiffView } from './SplitDiffView.tsx';
+import type { DiffSourceTokens } from './diff-syntax.ts';
+import { LineActionHost, RowHost } from './row-host.ts';
+import { DEFAULT_UNFOLD_LIMITS, expandDiff, type DiffLimits } from './diff-expansion.ts';
+
+export interface DiffViewProps {
+    engine: EditorEngine;
+    document: DiffDocument;
+    theme: EditorTheme;
+    tokens?: DiffSourceTokens;
+    wrap?: boolean;
+    layout?: 'unified' | 'split';
+    /* Above this many displayed unified rows, split uses fixed line heights. Defaults to 2000. */
+    splitWrapLimit?: number;
+    /* A fixed-height host supplies the height; otherwise the view grows with its rows. */
+    fill?: boolean;
+    /* Positive pixels; taller content scrolls inside the editor. Ignored with fill. */
+    maxHeight?: number;
+    /* Total visible source-text budgets after unfolding; changed rows are always retained. */
+    unfoldLimits?: DiffLimits;
+    label: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    onMount?(editor: Editor, side?: 'old' | 'new'): void | (() => void);
+}
+
+interface UnifiedViewProps extends DiffViewProps {
+    display: DiffDisplay;
+    unfold(id: number): void;
+    blocked: ReadonlySet<number>;
+}
+
+function UnifiedDiffView({
+    engine,
+    document,
+    display,
+    unfold,
+    blocked,
+    theme,
+    tokens,
+    wrap = true,
+    fill = false,
+    maxHeight,
+    label,
+    className,
+    ref,
+    onMount
+}: UnifiedViewProps) {
+    const { t } = useTranslation('editor');
+    const emphasis = useMemo(() => wordMarks(document), [document]);
+    const element = useRef<HTMLDivElement>(null);
+    const current = useRef({ display, tokens, theme, wrap, label });
+    const applied = useRef({ theme, wrap, label });
+    const [mounted, setMounted] = useState<MountedDiff | null>(null);
+    const [height, setHeight] = useState(0);
+    useLayoutEffect(() => {
+        current.current = { display, tokens, theme, wrap, label };
+    });
+    useLayoutEffect(() => {
+        const host = element.current;
+        if (host === null) {
+            return;
+        }
+        const initial = current.current;
+        const editor = engine.mount(host, {
+            text: initial.display.text,
+            theme: initial.theme,
+            wrap: initial.wrap,
+            label: initial.label,
+            readOnly: true,
+            guides: false,
+            foldOutline: 'off',
+            folding: false,
+            // Prompt cards use this chord for their primary action; a read-only review has no split-line action.
+            handBack: [parseChord('Mod+Enter')]
+        });
+        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
+        editor.setBlocks([]);
+        editor.setLineTokens((line) => {
+            const { display, tokens } = current.current;
+            const row = display.rows[line];
+            return row === undefined ? null : tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old)!.index);
+        });
+        setMounted({ engine, editor, rows: new RowHost(editor, 'diff-gaps'), actions: new LineActionHost(editor, 'diff-status') });
+        const measure = (): void => setHeight(editor.getContentHeight());
+        const stop = editor.onViewChange(measure);
+        measure();
+        return () => {
+            stop();
+            editor.dispose();
+        };
+    }, [engine]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const { editor, rows, actions } = mounted;
+        editor.setText(display.text);
+        editor.setLineNumbers((line) => {
+            const row = current.current.display.rows[line];
+            return row === undefined ? null : String((row.new ?? row.old)!.number);
+        });
+        const highlights: EditorLineHighlight[] = [];
+        for (const [index, row] of display.rows.entries()) {
+            if (row.change !== 'delete' && row.change !== 'insert') {
+                continue;
+            }
+            const removed = row.change === 'delete';
+            highlights.push({
+                startLine: index + 1,
+                endLine: index + 1,
+                color: removed ? '--editor-deleted' : '--editor-added',
+                bar: removed ? 'hatched' : 'solid',
+                emphasis: [(removed ? emphasis.old.get(row.old!.index) : emphasis.new.get(row.new!.index)) ?? []]
+            });
+        }
+        editor.setLineHighlights(highlights);
+        editor.setChangeMarks(
+            highlights.map((highlight) => ({
+                startLine: highlight.startLine,
+                endLine: highlight.endLine,
+                kind: highlight.bar === 'hatched' ? 'deleted' : 'added'
+            }))
+        );
+        rows.set(
+            display.gaps.map(({ before, row }) => ({
+                id: `gap-${row.id}`,
+                line: Math.min(before, Math.max(0, display.rows.length - 1)),
+                placement: before < display.rows.length ? 'above' : 'below',
+                height: 32
+            }))
+        );
+        actions.set(display.rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
+    }, [mounted, engine, display, emphasis]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        // The color of a changed line is not the only thing that says so: the gutter carries a sentence with the numbers it reads from.
+        mounted.editor.setLineLabels((line) => {
+            const row = display.rows[line];
+            if (row?.change === 'delete') {
+                return t('diff.removed', { number: row.old!.number });
+            }
+            if (row?.change === 'insert') {
+                return t('diff.added', { number: row.new!.number });
+            }
+            return row?.old !== undefined && row.new !== undefined ? t('diff.unchanged', { old: row.old.number, new: row.new.number }) : null;
+        });
+    }, [mounted, engine, display, t]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const previous = applied.current;
+        if (previous.theme !== theme) {
+            mounted.editor.setTheme(theme);
+        }
+        if (previous.wrap !== wrap) {
+            mounted.editor.setWrap(wrap);
+        }
+        if (previous.label !== label) {
+            mounted.editor.setLabel(label);
+        }
+        applied.current = { theme, wrap, label };
+    }, [mounted, engine, theme, wrap, label]);
+    useLayoutEffect(() => {
+        if (mounted === null || mounted.engine !== engine) {
+            return;
+        }
+        const refresh = (): void => {
+            mounted.editor.setLineTokens((line) => {
+                const row = current.current.display.rows[line];
+                return row === undefined ? null : current.current.tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old)!.index);
+            });
+        };
+        refresh();
+        const ownerWindow = element.current?.ownerDocument.defaultView;
+        let pending = false;
+        let stopped = false;
+        let frame: number | undefined;
+        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, tokens, display]);
+    useLayoutEffect(() => {
+        if (mounted !== null && mounted.engine === engine) {
+            return onMount?.(mounted.editor);
+        }
+    }, [mounted, engine, onMount]);
+    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+    return (
+        <div
+            className={`adecore-editor-diff ${className ?? ''}`}
+            ref={ref}
+            data-scroll={fill || height > limit}
+            style={{ position: 'relative', minHeight: 0, height: fill ? '100%' : Math.min(height, limit) }}
+        >
+            <div ref={element} style={{ position: 'absolute', inset: 0 }} />
+            {mounted !== null && mounted.engine === engine && <DiffOverlays mounted={mounted} display={display} unfold={unfold} blocked={blocked} />}
+        </div>
+    );
+}
+
+export function DiffView(props: DiffViewProps) {
+    const { document, unfoldLimits = DEFAULT_UNFOLD_LIMITS } = props;
+    const [expanded, setExpanded] = useState<{ document: DiffDocument; gaps: ReadonlyMap<number, number>; blocked: ReadonlySet<number> }>(() => ({
+        document,
+        gaps: new Map(),
+        blocked: new Set()
+    }));
+    const gaps = expanded.document === document ? expanded.gaps : undefined;
+    const blocked = expanded.document === document ? expanded.blocked : new Set<number>();
+    const projection = useMemo(() => (props.layout === 'split' ? diffSplit(document, gaps) : diffDisplay(document, gaps)), [props.layout, document, gaps]);
+    const unfold = (id: number): void =>
+        setExpanded((previous) => {
+            const gaps = previous.document === document ? previous.gaps : new Map<number, number>();
+            const next = expandDiff(document, gaps, id, unfoldLimits);
+            return {
+                document,
+                gaps: next,
+                blocked: new Set([...(previous.document === document ? previous.blocked : []), ...(next === gaps ? [id] : [])])
+            };
+        });
+    if ('aligned' in projection && projection.old.lines.length > 0 && projection.new.lines.length > 0) {
+        const visibleRows = projection.aligned.reduce((count, row) => count + (row.kind === 'gap' ? 0 : row.row.change === 'pair' ? 2 : 1), 0);
+        const wrap = props.wrap !== false && visibleRows <= (props.splitWrapLimit ?? 2000);
+        return <SplitDiffView {...props} wrap={wrap} display={projection} unfold={unfold} blocked={blocked} />;
+    }
+    // An absent side has no selectable text; keep additions and deletions in the unified editor.
+    const display = 'aligned' in projection ? (projection.old.lines.length > 0 ? projection.old : projection.new) : projection;
+    return <UnifiedDiffView {...props} display={display} unfold={unfold} blocked={blocked} />;
+}

package/src/EditorContextMenu.tsx

@@ -17,6 +17,7 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
         { id: 'goToTypeDefinition', method: 'textDocument/typeDefinition', run: () => void language.navigation.go('typeDefinition') },
         { id: 'goToImplementation', method: 'textDocument/implementation', run: () => void language.navigation.go('implementation') },
         { id: 'peekReferences', method: 'textDocument/references', run: () => void language.peek.open() },
+        { id: 'callHierarchy', method: 'textDocument/prepareCallHierarchy', run: () => void language.callHierarchy.open() },
         { id: 'renameSymbol', method: 'textDocument/rename', run: () => void language.rename.start() },
         { id: 'codeActions', method: 'textDocument/codeAction', run: () => void language.codeActions.open() }
     ];

package/src/EditorView.tsx

@@ -1,6 +1,8 @@
 import { createHolder } from './holder.ts';
 import { useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode, type Ref } from 'react';
-import type { Editor, EditorEngine, EditorOptions } from '@adecore/editor';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import type { Editor, EditorEngine, EditorMessages, EditorOptions } from '@adecore/editor';
 import { EditorLanguage } from './editor-language.ts';
 import { LanguagePopups } from './LanguagePopups.tsx';
 import type { ProjectLanguage } from './project-language.ts';
@@ -18,8 +20,17 @@ export interface EditorViewProps {
     contextMenuItems?(language: EditorLanguage): ReactNode;
 }
 
+/* The names of the fold controls in the editor's `{start}` and `{end}` placeholders, which the editor fills in per control. */
+function foldMessages(t: TFunction<'editor'>): Pick<EditorMessages, 'fold' | 'unfold'> {
+    const lines = { start: '{start}', end: '{end}' };
+    return { fold: t('language.fold.fold', lines), unfold: t('language.fold.unfold', lines) };
+}
+
 export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps) {
+    const { t } = useTranslation('editor');
     const element = useRef<HTMLDivElement>(null);
+    const mounted = useRef<Editor | null>(null);
+    const words = useRef(t);
     const holder = useMemo(() => createHolder<EditorLanguage>(), []);
     const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
     useLayoutEffect(() => {
@@ -27,17 +38,25 @@ export function EditorView({ engine, options, project, uri, languageId, classNam
         if (host === null) {
             return;
         }
-        const editor = engine.mount(host, options);
+        const editor = engine.mount(host, { ...options, messages: { ...foldMessages(words.current), ...options.messages } });
+        mounted.current = editor;
         const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
         holder.set(attached);
         const stop = onMount?.(editor, attached);
         return () => {
+            mounted.current = null;
             holder.set(null);
             stop?.();
             attached?.dispose();
             editor.dispose();
         };
     }, [engine, options, project, uri, languageId, holder, onMount]);
+    useLayoutEffect(() => {
+        words.current = t;
+        const { fold, unfold } = options.messages ?? {};
+        const localized = foldMessages(t);
+        mounted.current?.setMessages({ fold: fold ?? localized.fold, unfold: unfold ?? localized.unfold });
+    }, [t, options.messages]);
     return (
         <div className={className} ref={ref} style={{ position: 'relative', minHeight: 0 }}>
             <div ref={element} style={{ position: 'absolute', inset: 0 }} />