@adecore/editor-react 0.39.0 → 0.40.1

package/src/PeekPanel.tsx

@@ -18,6 +18,7 @@ import type { PeekView } from './popups.ts';
 import { useEditorRendering } from './rendering-context.ts';
 
 const TAB_SIZE = 4;
+
 const CODE =
     'font-mono text-(length:--code-font-size) [tab-size:4] [&_.line]:block [&_.line]:h-(--code-line-height) [&_.line]:leading-(--code-line-height) [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-0 [&_pre]:whitespace-pre [&_code]:font-mono';
 
@@ -33,10 +34,13 @@ export function Preview({ preview }: { preview: PeekView['preview'] }) {
         if (preview === null || highlight === undefined) {
             return;
         }
+
         let alive = true;
+
         highlight(preview.text, shikiLanguageOfPath(path ?? preview.uri), theme)
             .then((result) => alive && setHtml({ key, html: result }))
             .catch(() => undefined);
+
         return () => {
             alive = false;
         };
@@ -49,8 +53,10 @@ export function Preview({ preview }: { preview: PeekView['preview'] }) {
     if (preview === null) {
         return <div className="min-w-0 flex-1" />;
     }
+
     const lines = preview.text.split('\n');
     const name = preview.name === null ? null : columnsOf(lines[preview.active] ?? '', preview.name);
+
     return (
         <div ref={scroller} className="relative min-w-0 flex-1 overflow-auto pt-1">
             <div className="relative flex min-w-max">
@@ -94,6 +100,7 @@ export function Preview({ preview }: { preview: PeekView['preview'] }) {
 /* The name's stretch of a line in monospace columns, which is what the code is laid out in. */
 function columnsOf(line: string, name: NameRange): NameRange {
     const start = visualColumnOf(line, name.start, TAB_SIZE);
+
     return { start, end: visualColumnOf(line, name.end, TAB_SIZE) };
 }
 
@@ -106,10 +113,13 @@ function PlaceText({ place }: { place: PeekPlace }) {
     if (place.text === '') {
         return <span className="min-w-0 truncate text-text-muted">{`:${place.line + 1}`}</span>;
     }
+
     const { name } = place;
+
     if (name === null) {
         return <span className="min-w-0 truncate text-text-muted">{place.text}</span>;
     }
+
     return (
         <span className="min-w-0 truncate text-text-muted">
             {place.text.slice(0, name.start)}
@@ -134,6 +144,7 @@ function Places({ language, view }: { language: EditorLanguage; view: PeekView }
         <div className="w-1/3 shrink-0 overflow-y-auto border-l border-border py-1">
             {view.files.map((file, fileIndex) => {
                 const collapsed = view.collapsed.includes(file.uri);
+
                 return (
                     <div key={file.uri}>
                         <Tooltip label={paths[fileIndex]!} side="left">
@@ -183,9 +194,11 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; view:
     const folder = language.project.folder;
     const shown = path === null ? '' : folderOf(relativeTo(path, folder));
     const body = usePanelBody(language);
+
     if (view.container === null) {
         return null;
     }
+
     return createPortal(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"

package/src/PickPopup.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { PathText } from './PathText.tsx';
-import { keepFocusOutOfList } from './popup-focus.ts';
+import { keepFocusOutOfList, useInputPopup } from './popup-focus.ts';
 import { placePopup } from './popup-placement.ts';
 import type { PickPreview, PickView } from './popups.ts';
 
@@ -47,15 +47,18 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
     // Every render: the character moves with the scroll, and the list changes size with its preview.
     useLayoutEffect(() => {
         const element = card.current;
+
         if (element === null) {
             return;
         }
+
         const placed = placePopup(
             rect,
             { width: element.offsetWidth, height: element.offsetHeight },
             { width: window.innerWidth, height: window.innerHeight },
             { gap: 2 }
         );
+
         element.style.left = `${Math.round(placed.left)}px`;
         element.style.top = `${Math.round(placed.top)}px`;
         element.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
@@ -67,18 +70,16 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
     }, [view.active]);
 
     const optionIds = new Map<string, string>();
+
     for (const group of view.groups) {
         for (const row of group.rows) {
             optionIds.set(row.id, `${listId}-option-${optionIds.size}`);
         }
     }
+
     const activeId = optionIds.get(view.active);
 
-    // 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]);
+    useInputPopup(language, listId, activeId);
 
     return createPortal(
         <div

package/src/RenameCard.tsx

@@ -25,6 +25,7 @@ function staysInside(target: EventTarget | null): boolean {
  */
 function Suggestions({ names, active, onPick, onFocusBack }: { names: readonly string[]; active: number; onPick(name: string): void; onFocusBack(): void }) {
     const { t } = useTranslation('editor');
+
     return (
         <div className="flex w-[250px] flex-col p-1.25" {...keepFocusOutOfList(onFocusBack)}>
             <div className="flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint">
@@ -54,6 +55,7 @@ function Suggestions({ names, active, onPick, onFocusBack }: { names: readonly s
 function Hints({ view, active, onPick, onFocusBack }: { view: RenameView; active: number; onPick(name: string): void; onFocusBack(): void }) {
     const { t } = useTranslation('editor');
     const { occurrences } = view;
+
     return (
         <div className="flex flex-col">
             {view.error !== null && (
@@ -88,16 +90,20 @@ function Preview({ language, view }: { language: EditorLanguage; view: RenameVie
     const { t } = useTranslation('editor');
     const folder = language.project.folder;
     const operations = view.operations ?? [];
+
     const shownPath = (uri: string): string => {
         const path = fileUriToPath(uri);
+
         return path === null ? uri : relativeTo(path, folder);
     };
+
     return (
         <div className="flex w-[520px] max-w-full flex-col" onPointerDown={(event) => event.preventDefault()}>
             <div className="max-h-[320px] overflow-y-auto">
                 {view.files.map((file) => {
                     const path = fileUriToPath(file.uri);
                     const shown = path === null ? file.uri : relativeTo(path, folder);
+
                     return (
                         <div key={file.uri} className="border-b border-border last:border-b-0">
                             <div className="flex items-center gap-2 px-3 py-1.5 text-xs">
@@ -170,19 +176,24 @@ export function RenameCard({ language, view, rect, endRect }: { language: Editor
 
     function onKeyDown(event: KeyboardEvent<HTMLInputElement>): void {
         const names = view.phase === 'input' ? view.suggestions : [];
+
         if (names.length > 0 && !event.nativeEvent.isComposing && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
             const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+
             if (step !== 0 || event.key === 'Tab') {
                 event.preventDefault();
                 event.stopPropagation();
+
                 if (event.key === 'Tab') {
                     fill(names[Math.min(active, names.length - 1)]!);
                 } else {
                     setActive((active + step + names.length) % names.length);
                 }
+
                 return;
             }
         }
+
         if (event.key === 'Escape') {
             event.preventDefault();
             event.stopPropagation();
@@ -190,6 +201,7 @@ export function RenameCard({ language, view, rect, endRect }: { language: Editor
         } else if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
             event.preventDefault();
             event.stopPropagation();
+
             if (view.phase === 'preview') {
                 void language.rename.confirm();
             } else if (!view.busy) {
@@ -199,6 +211,7 @@ export function RenameCard({ language, view, rect, endRect }: { language: Editor
     }
 
     const symbolWidth = endRect === null ? 0 : Math.max(0, endRect.left - rect.left);
+
     return createPortal(
         <>
             <input

package/src/RenderedDocs.tsx

@@ -10,6 +10,7 @@ import { shikiLanguageOf } from './language-ids.ts';
 import { Markdown } from './Markdown.tsx';
 
 const LINK = /\[([^\]]*)\]\(#doc-link:[^)]*\)/g;
+
 const KNOWN = new Set([
     'deprecated',
     'template',
@@ -35,6 +36,7 @@ function Code({ children, faint = false }: { children: string; faint?: boolean }
 /* Markdown prose and fenced code as the hover draws them: the blocks in the code face, the rest muted. */
 function Prose({ text, language, linkable, compact = false }: { text: string; language: string; linkable: boolean; compact?: boolean }) {
     const plain = linkable ? text : text.replace(LINK, '$1');
+
     return (
         <>
             {markdownParts(plain).map((part, index) =>
@@ -55,8 +57,10 @@ function Prose({ text, language, linkable, compact = false }: { text: string; la
 /* A value of a tag, in the second column of the table; `spaced` opens a new section with more room above. */
 function TagRow({ tag, language, linkable, spaced }: { tag: DocTagEntry; language: string; linkable: boolean; spaced: boolean }) {
     const target = tag.name === 'see' && tag.subject !== null ? tag.subject : null;
+
     const link =
         target === null ? null : /^https?:\/\//i.test(target) ? `[${target}](${target})` : `[\`${target}\`](${DOC_LINK_PREFIX}${encodeURIComponent(target)})`;
+
     return (
         <dd className={`col-start-2 m-0 flex min-w-0 flex-wrap items-baseline gap-x-2 ${spaced ? 'mt-1' : ''}`}>
             {tag.name === 'example' ? (
@@ -102,15 +106,19 @@ function DocBlock({ language, comment, parsed, linkable }: DocBlockProps) {
     // One handler for every link, since the links are made by the Markdown renderer and not by us.
     const follow = (event: MouseEvent<HTMLDivElement>): void => {
         const anchor = (event.target as HTMLElement).closest<HTMLAnchorElement>('a');
+
         if (anchor === null) {
             return;
         }
+
         event.preventDefault();
         const mod = language.apple ? event.metaKey : event.ctrlKey;
         const href = anchor.getAttribute('href') ?? '';
+
         if (!mod) {
             return;
         }
+
         if (href.startsWith(DOC_LINK_PREFIX)) {
             feature.follow(decodeURIComponent(href.slice(DOC_LINK_PREFIX.length)), comment);
         } else if (/^(https?:|mailto:)/i.test(href)) {
@@ -159,9 +167,12 @@ export const RenderedDocBlock = memo(DocBlock);
  */
 export function RenderedDocs({ language }: { language: EditorLanguage }) {
     const feature = language.renderedDocs;
+
     const getEntries = () => feature.getEntries();
+
     const entries = useSyncExternalStore((listener) => feature.subscribe(listener), getEntries, getEntries);
     const linkable = feature.canFollow;
+
     return (
         <>
             {entries.map((entry) =>

package/src/SplitDiffView.tsx

@@ -4,7 +4,7 @@ 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 { repaintOnTokens, 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';
@@ -52,19 +52,25 @@ export function SplitDiffView({
     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,
@@ -76,21 +82,29 @@ export function SplitDiffView({
                 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;
@@ -98,37 +112,48 @@ export function SplitDiffView({
         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();
@@ -137,21 +162,26 @@ export function SplitDiffView({
                 }
             });
         };
+
         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);
@@ -160,35 +190,46 @@ export function SplitDiffView({
                 }
             })
         ]);
+
         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,
@@ -197,106 +238,102 @@ export function SplitDiffView({
                         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);
-            }
-        };
+
+        return repaintOnTokens(oldElement.current?.ownerDocument.defaultView, tokens, refresh);
     }, [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 ?? ''}`}
@@ -306,32 +343,30 @@ export function SplitDiffView({
             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>
-            ))}
+            {SIDES.map((side) => {
+                const drive = (): void => {
+                    mounted?.drive(side);
+                };
+
+                return (
+                    <div
+                        key={side}
+                        className="adecore-editor-diff-side"
+                        data-side={side}
+                        role="group"
+                        aria-label={t(`diff.${side}Side`)}
+                        onWheelCapture={drive}
+                        onFocusCapture={drive}
+                        onPointerDownCapture={drive}
+                        onKeyDownCapture={drive}
+                    >
+                        <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>
     );
 }