@adecore/editor-react 0.38.0 → 0.40.0

package/src/DiffView.tsx

@@ -6,7 +6,7 @@ import { diffDisplay, diffSplit, type DiffDocument, type DiffDisplay } from '@ad
 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 { repaintOnTokens, type DiffSourceTokens } from './diff-syntax.ts';
 import { LineActionHost, RowHost } from './row-host.ts';
 import { DEFAULT_UNFOLD_LIMITS, expandDiff, type DiffLimits } from './diff-expansion.ts';
 
@@ -60,15 +60,20 @@ function UnifiedDiffView({
     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,
@@ -81,38 +86,53 @@ function UnifiedDiffView({
             // 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,
@@ -121,7 +141,9 @@ function UnifiedDiffView({
                 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,
@@ -129,6 +151,7 @@ function UnifiedDiffView({
                 kind: highlight.bar === 'hatched' ? 'deleted' : 'added'
             }))
         );
+
         rows.set(
             display.gaps.map(({ before, row }) => ({
                 id: `gap-${row.id}`,
@@ -137,87 +160,79 @@ function UnifiedDiffView({
                 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);
-            }
-        };
+
+        return repaintOnTokens(element.current?.ownerDocument.defaultView, tokens, refresh);
     }, [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 ?? ''}`}
@@ -233,30 +248,38 @@ function UnifiedDiffView({
 
 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 = props.layout === 'split' ? diffSplit(document, gaps) : diffDisplay(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

@@ -13,11 +13,14 @@ import type { MenuView } from './popups.ts';
 export function EditorContextMenu({ language, view, children }: { language: EditorLanguage; view: MenuView; children?: ReactNode }) {
     const { t } = useTranslation('editor');
     const trigger = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
         trigger.current?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: view.x, clientY: view.y }));
     }, [view.x, view.y]);
+
     const { service } = language.project;
     const groups = menuGroupsOf((method) => service.supports(method, language.uri));
+
     const run: Record<MenuRowId, () => void> = {
         definition: () => void language.navigation.go('definition'),
         declaration: () => void language.navigation.go('declaration'),
@@ -28,6 +31,7 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
         renameSymbol: () => void language.rename.start(),
         codeActions: () => void language.codeActions.open()
     };
+
     const label = (id: MenuRowId): string => {
         switch (id) {
             case 'definition':
@@ -41,8 +45,10 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
                 return t(`commands.${id}`);
         }
     };
+
     const item = (row: MenuRowSpec): ReactNode => {
         const shortcut = row.shortcut === null ? null : language.shortcuts[row.shortcut];
+
         return (
             <ContextMenu.Item key={row.id} onClick={run[row.id]}>
                 {label(row.id)}
@@ -50,6 +56,7 @@ export function EditorContextMenu({ language, view, children }: { language: Edit
             </ContextMenu.Item>
         );
     };
+
     return (
         <ContextMenu.Root onOpenChange={(open) => !open && language.contextMenu.close()}>
             <ContextMenu.Trigger ref={trigger} className="fixed top-0 left-0 h-0 w-0" aria-hidden />

package/src/EditorView.tsx

@@ -50,6 +50,7 @@ const DEFAULT_INDENTATION: EditorIndentation = { tabSize: 4, insertSpaces: true
 /* 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) };
 }
 
@@ -57,10 +58,13 @@ function sameFields<T extends object>(left: T | undefined, right: T | undefined)
     if (left === right) {
         return true;
     }
+
     if (left === undefined || right === undefined) {
         return false;
     }
+
     const keys = new Set([...Object.keys(left), ...Object.keys(right)] as (keyof T)[]);
+
     return [...keys].every((key) => left[key] === right[key]);
 }
 
@@ -69,34 +73,44 @@ function applyChangedOptions(editor: Editor, before: EditorOptions, after: Edito
     if (before.theme !== after.theme) {
         editor.setTheme(after.theme);
     }
+
     if (before.readOnly !== after.readOnly || before.readOnlyReason !== after.readOnlyReason) {
         editor.setReadOnly(after.readOnly ?? false, after.readOnlyReason);
     }
+
     if (before.wrap !== after.wrap) {
         editor.setWrap(after.wrap ?? false);
     }
+
     if (!sameFields(before.indentation, after.indentation)) {
         editor.setIndentation(after.indentation ?? DEFAULT_INDENTATION);
     }
+
     if (!sameFields<Partial<EditorSmartKeys>>(before.smartKeys, after.smartKeys)) {
         // The setter keeps the keys left out, where the options mean the default.
         editor.setSmartKeys({ ...DEFAULT_SMART_KEYS, ...after.smartKeys });
     }
+
     if (before.guides !== after.guides) {
         editor.setGuides(after.guides ?? true);
     }
+
     if (before.stickyScroll !== after.stickyScroll) {
         editor.setStickyScroll?.(after.stickyScroll ?? true);
     }
+
     if (before.whitespace !== after.whitespace) {
         editor.setWhitespace(after.whitespace ?? false);
     }
+
     if (before.rightMargin !== after.rightMargin) {
         editor.setRightMargin(after.rightMargin ?? null);
     }
+
     if (before.foldOutline !== after.foldOutline) {
         editor.setFoldOutline(after.foldOutline ?? 'hover');
     }
+
     if (after.label !== undefined && before.label !== after.label) {
         editor.setLabel(after.label);
     }
@@ -124,24 +138,31 @@ export function EditorView({
     const applied = useRef(options);
     const holder = useMemo(() => createHolder<EditorLanguage>(), []);
     const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
+
     useLayoutEffect(() => {
         latest.current = { options, timers, languageOptions, onMount };
     });
+
     useLayoutEffect(() => {
         const host = element.current;
+
         if (host === null) {
             return;
         }
+
         const inputs = latest.current;
         const editor = engine.mount(host, { ...inputs.options, messages: { ...foldMessages(words.current), ...inputs.options.messages } });
         mounted.current = editor;
         applied.current = inputs.options;
+
         const attached =
             project === undefined || uri === undefined || languageId === undefined
                 ? null
                 : new EditorLanguage(project, editor, uri, languageId, inputs.timers, inputs.languageOptions);
+
         holder.set(attached);
         const stop = inputs.onMount?.(editor, attached);
+
         return () => {
             mounted.current = null;
             holder.set(null);
@@ -150,24 +171,31 @@ export function EditorView({
             editor.dispose();
         };
     }, [engine, project, uri, languageId, holder]);
+
     useLayoutEffect(() => {
         const editor = mounted.current;
+
         if (editor === null || applied.current === options) {
             return;
         }
+
         applyChangedOptions(editor, applied.current, options);
         applied.current = options;
     });
+
     const { fold, unfold, noMoreOccurrences } = options.messages ?? {};
+
     useLayoutEffect(() => {
         words.current = t;
         const localized = foldMessages(t);
+
         mounted.current?.setMessages({
             fold: fold ?? localized.fold,
             unfold: unfold ?? localized.unfold,
             ...(noMoreOccurrences === undefined ? {} : { noMoreOccurrences })
         });
     }, [t, fold, unfold, noMoreOccurrences]);
+
     return (
         <div className={className} ref={ref} style={{ position: 'relative', minHeight: 0 }}>
             <div ref={element} style={{ position: 'absolute', inset: 0 }} />

package/src/FindReplace.tsx

@@ -14,12 +14,15 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
     const root = useRef<HTMLDivElement>(null);
     const compiled = compileFind(query);
     useEffect(() => editor.onFind(setState), [editor]);
+
     useEffect(() => {
         editor.find(compiled.kind === 'pattern' ? query : null);
     }, [editor, query, compiled]);
+
     useEffect(() => {
         editor.setReplacePreview(compiled.kind === 'pattern' ? replacement : null, { preserveCase });
     }, [editor, compiled, replacement, preserveCase]);
+
     useEffect(
         () => () => {
             editor.endFind();
@@ -27,6 +30,7 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
         },
         [editor]
     );
+
     // The host closes the widget by unmounting it, with the keyboard in it or not; only a keyboard in it is handed back.
     useLayoutEffect(
         () => () => {
@@ -36,7 +40,9 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
         },
         [editor]
     );
+
     const failure = state.failed ?? state.captureFailed;
+
     const label =
         compiled.kind === 'invalid'
             ? t('find.invalid')
@@ -61,6 +67,7 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
                                 total: formatNumber(state.count),
                                 current: state.current === null ? '0' : formatNumber(state.current + 1)
                             });
+
     return (
         <div
             ref={root}
@@ -87,6 +94,7 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
                         if (event.nativeEvent.isComposing) {
                             return;
                         }
+
                         if (event.key === 'Enter') {
                             event.preventDefault();
                             editor.findStep(event.shiftKey ? -1 : 1);

package/src/HoverCard.tsx

@@ -22,12 +22,15 @@ export function DefinitionPlace({ definition, uri, folder }: { definition: Locat
     const { t } = useTranslation('editor');
     const path = fileUriToPath(definition.uri);
     const line = formatNumber(definition.range.start.line + 1);
+
     if (path === null || (folder !== '' && !path.startsWith(`${folder}/`))) {
         return null;
     }
+
     if (definition.uri === uri) {
         return <span className="text-text-faint">{t('language.hover.line', { line })}</span>;
     }
+
     return (
         <span className="flex min-w-0 font-mono text-text-faint">
             <span className="truncate">{basenameOf(path)}</span>
@@ -40,9 +43,12 @@ function ProblemSection({ problem, language }: { problem: Problem; language: Edi
     const { t } = useTranslation('editor');
     const { diagnostic } = problem;
     const severity = severityOf(diagnostic);
+
     const label =
         diagnostic.source === undefined ? [codeLabelOf(diagnostic), problem.server].filter((part) => part !== '').join(' · ') : codeLabelOf(diagnostic);
+
     const supported = language.codeActions.supported;
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-2.5">
             <div className="flex items-start gap-2">
@@ -52,6 +58,7 @@ function ProblemSection({ problem, language }: { problem: Problem; language: Edi
             {label !== '' && <div className="pl-[22px] text-xs text-text-muted select-text">{label}</div>}
             {diagnostic.relatedInformation?.map((related, index) => {
                 const path = fileUriToPath(related.location.uri);
+
                 return (
                     <div key={index} className="pl-[22px] text-xs text-text-muted">
                         {path !== null && (
@@ -101,6 +108,7 @@ export function HoverCard({
     footer?: ReactNode;
 }) {
     const { t } = useTranslation('editor');
+
     return (
         <div className="flex w-max min-w-[280px] max-w-[min(520px,calc(100vw-16px))] flex-col divide-y divide-border">
             {info !== null && (

package/src/HoverSections.tsx

@@ -18,10 +18,13 @@ export function Signature({ code, language, onName }: { code: string; language:
         if (highlight === undefined) {
             return;
         }
+
         let alive = true;
+
         highlight(code, language, theme)
             .then((result) => alive && setHtml({ key, html: linked ? linkTypeNames(result) : result }))
             .catch(() => undefined);
+
         return () => {
             alive = false;
         };
@@ -29,13 +32,16 @@ export function Signature({ code, language, onName }: { code: string; language:
 
     const className =
         'font-mono text-code break-words whitespace-pre-wrap [&_.line]:block [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:whitespace-pre-wrap [&_code]:font-mono';
+
     // One handler for every name, since the names are part of the highlighted HTML and not elements of ours.
     const follow = (event: MouseEvent<HTMLDivElement>): void => {
         const name = (event.target as HTMLElement).closest<HTMLElement>('[data-symbol]')?.dataset.symbol;
+
         if (name !== undefined && onName !== undefined) {
             onName(name);
         }
     };
+
     return html?.key === key ? (
         <div className={className} onClick={follow} dangerouslySetInnerHTML={{ __html: html.html }} />
     ) : (
@@ -63,6 +69,7 @@ export function DocTags({ tags }: { tags: readonly DocTag[] }) {
 export function SymbolSection({ section, onName }: { section: HoverSection; onName?: (name: string, declared: string | null) => void }) {
     const declared = declaredNameOf(section.signatures[0]?.code ?? '');
     const follow = onName === undefined ? undefined : (name: string): void => onName(name, declared);
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-2">
             {section.title !== null && <div className="truncate font-mono text-xs text-text-faint select-text">{section.title}</div>}
@@ -113,10 +120,13 @@ export function SourceLine({ text, language }: { text: string; language: string
         if (!highlighted || highlight === undefined) {
             return;
         }
+
         let alive = true;
+
         highlight(`<?php ${text}`, 'php', theme)
             .then((result) => alive && setHtml({ key, html: phpWithoutOpenTag(result) }))
             .catch(() => undefined);
+
         return () => {
             alive = false;
         };
@@ -124,6 +134,7 @@ export function SourceLine({ text, language }: { text: string; language: string
 
     const className =
         'block overflow-hidden text-left font-mono text-code text-ellipsis whitespace-nowrap [direction:rtl] [&_code]:font-mono [&_pre]:m-0 [&_pre]:inline [&_pre]:bg-transparent! [&_pre]:p-0 [&_code]:inline [&_.line]:inline';
+
     return (
         <Tooltip label={text}>
             {highlighted && html?.key === key ? (

package/src/LanguagePopups.tsx

@@ -53,6 +53,7 @@ export function LanguagePopups<Language extends EditorLanguage>({ language, cont
     const pickRect = pick === null ? null : language.editor.rectAt(pick.anchor);
     const renameRect = rename === null ? null : language.editor.rectAt(rename.range.start);
     const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
+
     return (
         <>
             <RenderedDocs language={language} />

package/src/PanelResizeHandle.tsx

@@ -20,17 +20,21 @@ export function PanelResizeHandle({ container, height, onHeight, onCommit }: Pro
     useEffect(() => {
         const viewport = container.closest<HTMLElement>('.se-viewport');
         const Observer = viewport?.ownerDocument.defaultView?.ResizeObserver;
+
         if (viewport === null || viewport === undefined || Observer === undefined) {
             return;
         }
+
         const observer = new Observer(() => setMax(panelBodyMax(availableHeightOf(container))));
         observer.observe(viewport);
+
         return () => observer.disconnect();
     }, [container]);
 
     function settle(value: number, from: number): void {
         const next = clampPanelBody(value, availableHeightOf(container));
         onHeight(next);
+
         if (next !== from) {
             onCommit(next);
             revealRow(realTimers, container);
@@ -45,6 +49,7 @@ export function PanelResizeHandle({ container, height, onHeight, onCommit }: Pro
         if (event.button !== 0) {
             return;
         }
+
         event.currentTarget.setPointerCapture(event.pointerId);
         drag.current = { startY: event.clientY, startHeight: height, lastY: event.clientY };
         setDragging(true);
@@ -62,6 +67,7 @@ export function PanelResizeHandle({ container, height, onHeight, onCommit }: Pro
         if (drag.current === null) {
             return;
         }
+
         const { startHeight } = drag.current;
         const next = heightAt(drag.current.lastY);
         drag.current = null;
@@ -74,9 +80,11 @@ export function PanelResizeHandle({ container, height, onHeight, onCommit }: Pro
         const step = event.shiftKey ? PANEL_KEY_STEP * 4 : PANEL_KEY_STEP;
         const end = panelBodyMax(availableHeightOf(container));
         const target = { ArrowUp: height - step, ArrowDown: height + step, Home: PANEL_BODY_MIN, End: end }[event.key];
+
         if (target === undefined) {
             return;
         }
+
         event.preventDefault();
         event.stopPropagation();
         settle(target, height);

package/src/PathText.tsx

@@ -8,6 +8,7 @@ export function PathText({ path, className = '' }: { path: string; className?: s
     if (path === '') {
         return null;
     }
+
     return (
         <Tooltip label={path}>
             <span className={`min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`}>