@adecore/editor-react 0.22.1 → 0.23.1

package/dist/PanelResizeHandle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PANEL_BODY_MIN, PANEL_KEY_STEP, availableHeightOf, clampPanelBody, panelBodyMax } from './panel-size.js';
+import { realTimers, revealRow } from './timers.js';
+/* The bottom edge of a panel: a drag, or the arrow keys, change the height of its body. */
+export function PanelResizeHandle({ container, height, onHeight, onCommit }) {
+    const { t } = useTranslation('editor');
+    const drag = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [max, setMax] = useState(() => panelBodyMax(availableHeightOf(container)));
+    useEffect(() => {
+        const viewport = container.closest('.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, from) {
+        const next = clampPanelBody(value, availableHeightOf(container));
+        onHeight(next);
+        if (next !== from) {
+            onCommit(next);
+            revealRow(realTimers, container);
+        }
+    }
+    function heightAt(clientY) {
+        return clampPanelBody(drag.current.startHeight + clientY - drag.current.startY, availableHeightOf(container));
+    }
+    function down(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { startY: event.clientY, startHeight: height, lastY: event.clientY };
+        setDragging(true);
+    }
+    function move(event) {
+        if (drag.current !== null) {
+            drag.current.lastY = event.clientY;
+            onHeight(heightAt(event.clientY));
+        }
+    }
+    // Also the end of a drag whose capture was lost, such as a container that was replaced under the pointer.
+    function end(event) {
+        if (drag.current === null) {
+            return;
+        }
+        const { startHeight } = drag.current;
+        const next = heightAt(drag.current.lastY);
+        drag.current = null;
+        setDragging(false);
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        settle(next, startHeight);
+    }
+    function key(event) {
+        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);
+    }
+    return (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": t('language.panel.resize'), "aria-valuemin": PANEL_BODY_MIN, "aria-valuemax": max, "aria-valuenow": height, tabIndex: 0, "data-dragging": dragging, className: "absolute inset-x-0 bottom-0 z-10 h-1 cursor-row-resize touch-none outline-none hover:bg-accent-soft focus-visible:bg-accent-soft data-[dragging=true]:bg-accent-soft", onPointerDown: down, onPointerMove: move, onPointerUp: end, onPointerCancel: end, onLostPointerCapture: end, onKeyDown: key }));
+}

package/dist/PeekPanel.d.ts

@@ -1,5 +1,8 @@
 import type { EditorLanguage } from './editor-language.ts';
 import type { PeekView } from './popups.ts';
+export declare function Preview({ preview }: {
+    preview: PeekView['preview'];
+}): import("react").JSX.Element;
 export declare function PeekPanel({ language, view }: {
     language: EditorLanguage;
     view: PeekView;

package/dist/PeekPanel.js

@@ -9,16 +9,18 @@ import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.js';
 import { shikiLanguageOfPath } from './language-ids.js';
 import { PathText } from './PathText.js';
+import { PanelResizeHandle } from './PanelResizeHandle.js';
+import { usePanelBody } from './use-panel-body.js';
+import { PANEL_BODY_HEIGHT } from './panel-size.js';
 import { PEEK_HEIGHT } from './peek.js';
 import { distinguishingFolders, visualColumnOf } from './peek-model.js';
 import { useEditorRendering } from './rendering-context.js';
 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';
 /* The code around the active reference, drawn like the editor's own rows: its gutter, the line the reference is on and the name marked. */
-function Preview({ view }) {
+export function Preview({ preview }) {
     const { theme, highlight } = useEditorRendering();
     const scroller = useRef(null);
-    const { preview } = view;
     const [html, setHtml] = useState(null);
     const path = preview === null ? null : fileUriToPath(preview.uri);
     const key = preview === null ? '' : `${theme}\0${path}\0${preview.text}`;
@@ -94,11 +96,12 @@ export function PeekPanel({ language, view }) {
     const path = active === undefined ? null : fileUriToPath(active.location.uri);
     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(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: PEEK_HEIGHT }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx("span", { className: "shrink-0 font-medium", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "text-text-muted", children: t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
+    return createPortal(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx("span", { className: "shrink-0 font-medium", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "text-text-muted", children: t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
                                     count: view.count,
                                     formatted: formatNumber(view.count)
-                                }) }), _jsx(IconButton, { icon: X, size: "xs", label: t('language.peek.close'), onClick: () => language.peek.close() })] })] }), _jsxs("div", { className: "flex h-[180px] shrink-0", children: [_jsx(Preview, { view: view }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch h-[14px]" })] }), view.container);
+                                }) }), _jsx(IconButton, { icon: X, size: "xs", label: t('language.peek.close'), onClick: () => language.peek.close() })] })] }), _jsxs("div", { className: "flex shrink-0", style: { height: body.height }, children: [_jsx(Preview, { preview: view.preview }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch relative h-[14px]", children: _jsx(PanelResizeHandle, { container: view.container, height: body.height, onHeight: body.set, onCommit: body.commit }) })] }), view.container);
 }

package/dist/PickPopup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { PathText } from './PathText.js';
 import { placePopup } from './popup-placement.js';
@@ -12,6 +12,7 @@ function PreviewLines({ preview }) {
  * the focus from the editor, so the keys keep going to it while the list is open.
  */
 export function PickPopup({ language, view, rect }) {
+    const listId = useId();
     const card = useRef(null);
     const activeRow = useRef(null);
     // Every render: the character moves with the scroll, and the list changes size with its preview.
@@ -29,5 +30,17 @@ export function PickPopup({ language, view, rect }) {
     useLayoutEffect(() => {
         activeRow.current?.scrollIntoView({ block: 'nearest' });
     }, [view.active]);
-    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { ref: row.id === view.active ? activeRow : undefined, type: "button", role: "option", "aria-selected": row.id === view.active, "data-active": row.id === view.active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
+    const optionIds = new Map();
+    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]);
+    return createPortal(_jsxs("div", { ref: card, className: CARD, style: { visibility: 'hidden' }, onPointerDown: (event) => event.preventDefault(), children: [view.title !== null && _jsx("div", { className: "border-b border-border px-3 py-1.5 text-xs text-text-muted", children: view.title }), _jsx("div", { id: listId, role: "listbox", className: "min-h-0 flex-1 overflow-y-auto p-1", children: view.groups.map((group, groupIndex) => (_jsxs("div", { role: "group", className: "flex flex-col", children: [group.title !== null && _jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: group.title }), group.rows.map((row) => (_jsxs("button", { id: optionIds.get(row.id), ref: row.id === view.active ? activeRow : undefined, type: "button", role: "option", "aria-selected": row.id === view.active, "data-active": row.id === view.active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => language.pick.choose(row.id), children: [_jsx("span", { className: row.path ? 'shrink-0' : 'min-w-0 truncate', children: row.label }), row.path ? (_jsx(PathText, { path: row.detail, className: "ml-auto font-mono text-text-faint" })) : (_jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: row.id === view.active && row.detail === '' ? '↵' : row.detail }))] }, row.id)))] }, group.title ?? groupIndex))) }), view.preview !== null && _jsx(PreviewLines, { preview: view.preview })] }), document.body);
 }

package/dist/RenameCard.js

@@ -35,11 +35,16 @@ function Hints({ view, active, onPick }) {
 function Preview({ language, view }) {
     const { t } = useTranslation('editor');
     const folder = language.project.folder;
-    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "max-h-[320px] overflow-y-auto", children: view.files.map((file) => {
-                    const path = fileUriToPath(file.uri);
-                    const shown = path === null ? file.uri : relativeTo(path, folder);
-                    return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
-                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
+    const operations = view.operations ?? [];
+    const shownPath = (uri) => {
+        const path = fileUriToPath(uri);
+        return path === null ? uri : relativeTo(path, folder);
+    };
+    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "max-h-[320px] overflow-y-auto", children: [view.files.map((file) => {
+                        const path = fileUriToPath(file.uri);
+                        const shown = path === null ? file.uri : relativeTo(path, folder);
+                        return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
+                    }), operations.length > 0 && (_jsx("div", { className: "flex flex-col gap-px border-b border-border px-3 py-1.5 text-xs last:border-b-0", children: operations.map((operation, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0 font-medium", children: t(`language.rename.operations.${operation.kind}`) }), _jsxs("span", { className: "min-w-0 truncate text-text-faint", children: [shownPath(operation.uri), operation.newUri === undefined ? '' : ` \u2192 ${shownPath(operation.newUri)}`] })] }, `${operation.kind}:${operation.uri}:${index}`))) }))] }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
 }
 /*
  * The rename of a symbol: an input over the symbol itself, and under it either the count of its places with

package/dist/RenderedDocs.d.ts

@@ -0,0 +1,9 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { RenderedDocEntry } from './rendered-docs.ts';
+export declare function RenderedDocBlock({ language, entry }: {
+    language: EditorLanguage;
+    entry: RenderedDocEntry;
+}): import("react").JSX.Element;
+export declare function RenderedDocs({ language }: {
+    language: EditorLanguage;
+}): import("react").JSX.Element;

package/dist/RenderedDocs.js

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DOC_LINK_PREFIX, sectionsOf } from './doc-comment-model.js';
+import { markdownParts } from './hover-content.js';
+import { Signature } from './HoverSections.js';
+import { shikiLanguageOf } from './language-ids.js';
+import { Markdown } from './Markdown.js';
+const LINK = /\[([^\]]*)\]\(#doc-link:[^)]*\)/g;
+const KNOWN = new Set([
+    'deprecated',
+    'template',
+    'param',
+    'property',
+    'type',
+    'var',
+    'return',
+    'yield',
+    'throws',
+    'see',
+    'example',
+    'since',
+    'version',
+    'author'
+]);
+/* Code in the editor's face, with a type fainter than a name. */
+function Code({ children, faint = false }) {
+    return _jsx("code", { className: `font-mono text-code break-words ${faint ? 'text-text-faint' : 'text-text'}`, children: children });
+}
+/* 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 }) {
+    const plain = linkable ? text : text.replace(LINK, '$1');
+    return (_jsx(_Fragment, { children: markdownParts(plain).map((part, index) => part.kind === 'code' ? (_jsx("div", { className: "rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: part.block.code, language: part.block.language === 'text' ? language : part.block.language }) }, index)) : (_jsx("div", { className: `[&_.adecore-editor-markdown]:text-xs ${compact ? '[&_p]:my-0' : '[&_p]:my-1'}`, children: _jsx(Markdown, { text: part.text, images: false }) }, index))) }));
+}
+/* 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 }) {
+    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 (_jsx("dd", { className: `col-start-2 m-0 flex min-w-0 flex-wrap items-baseline gap-x-2 ${spaced ? 'mt-1' : ''}`, children: tag.name === 'example' ? (_jsx("div", { className: "w-full rounded-md bg-surface-sunken px-2 py-1.5", children: _jsx(Signature, { code: tag.text, language: language }) })) : (_jsxs(_Fragment, { children: [tag.subject !== null && target === null && _jsx(Code, { children: tag.subject }), tag.type !== null && _jsx(Code, { faint: true, children: tag.type }), (link !== null || tag.text !== '') && (_jsx("div", { className: "min-w-0 grow basis-48 text-text", children: _jsx(Prose, { text: [link, tag.text].filter((part) => part !== null && part !== '').join(' '), language: language, linkable: linkable, compact: true }) }))] })) }));
+}
+export function RenderedDocBlock({ language, entry }) {
+    const { t } = useTranslation('editor');
+    const feature = language.renderedDocs;
+    const { description, tags } = entry.parsed;
+    const highlighter = shikiLanguageOf(language.languageId);
+    const linkable = feature.canFollow;
+    const sections = sectionsOf(tags);
+    const deprecated = sections.find((section) => section.name === 'deprecated');
+    const shown = sections.filter((section) => section.name !== 'deprecated');
+    // One handler for every link, since the links are made by the Markdown renderer and not by us.
+    const follow = (event) => {
+        const anchor = event.target.closest('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)), entry.comment);
+        }
+        else if (/^(https?:|mailto:)/i.test(href)) {
+            window.open(href, '_blank', 'noopener,noreferrer');
+        }
+    };
+    return (_jsxs("div", { className: "adecore-rendered-doc flex max-w-[520px] flex-col gap-1.5 py-1 font-sans text-xs/[18px] text-text select-text", onClick: follow, children: [deprecated !== undefined && (_jsxs("div", { className: "border-l-2 border-status-error pl-2 text-text-muted", children: [_jsx("span", { className: "font-medium text-status-error", children: t('language.docs.deprecated') }), deprecated.tags.some((tag) => tag.text !== '') && (_jsx(Prose, { text: deprecated.tags.map((tag) => tag.text).join(' '), language: highlighter, linkable: linkable }))] })), description !== '' && (_jsx("div", { className: "text-text", children: _jsx(Prose, { text: description, language: highlighter, linkable: linkable }) })), shown.length > 0 && (_jsx("dl", { className: "m-0 grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5", children: shown.map((section, row) => [
+                    _jsx("dt", { className: `col-start-1 font-medium text-text-muted ${row > 0 ? 'mt-1' : ''}`, children: KNOWN.has(section.name) ? t(`language.docs.tags.${section.name}`) : `${section.name}:` }, `${section.name}:label`),
+                    ...section.tags.map((tag, index) => (_jsx(TagRow, { tag: tag, language: highlighter, linkable: linkable, spaced: row > 0 && index === 0 }, `${section.name}:${index}`)))
+                ]) }))] }));
+}
+/*
+ * The documentation comments the editor drew as rows, filled with their formatted text. It portals into
+ * the element the editor made for each row, so the editor decides what is in view; a comment is parsed
+ * only once its row is. Links in the text are followed with Cmd (Ctrl elsewhere) held, as definitions are.
+ */
+export function RenderedDocs({ language }) {
+    const feature = language.renderedDocs;
+    useSyncExternalStore(feature.subscribe, feature.getVersion, feature.getVersion);
+    return _jsx(_Fragment, { children: feature.entries().map((entry) => createPortal(_jsx(RenderedDocBlock, { language: language, entry: entry }), entry.container, entry.id)) });
+}

package/dist/SplitDiffView.d.ts

@@ -0,0 +1,9 @@
+import type { DiffSplit } from '@adecore/merge';
+import type { DiffViewProps } from './DiffView.tsx';
+interface SplitViewProps extends DiffViewProps {
+    display: DiffSplit;
+    unfold(id: number): void;
+    blocked: ReadonlySet<number>;
+}
+export declare function SplitDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap, fill, maxHeight, label, className, ref, onMount }: SplitViewProps): import("react").JSX.Element;
+export {};

package/dist/SplitDiffView.js

@@ -0,0 +1,276 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { parseChord } from '@adecore/editor/keymap';
+import { DiffOverlays } from './diff-overlays.js';
+import { wordMarks } from './diff-wordmarks.js';
+import { RowHost, LineActionHost } from './row-host.js';
+import { splitAlignment } from './split-alignment.js';
+import { SplitScroll } from './split-scroll.js';
+const SIDES = ['old', 'new'];
+export function SplitDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap = true, fill = false, maxHeight, label, className, ref, onMount }) {
+    const { t } = useTranslation('editor');
+    const emphasis = useMemo(() => wordMarks(document), [document]);
+    const oldElement = useRef(null);
+    const newElement = useRef(null);
+    const current = useRef({ display, tokens, theme, wrap, label });
+    const applied = useRef({ theme, wrap, label });
+    const [failure, setFailure] = useState(null);
+    const [mounted, setMounted] = useState(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, host) => {
+            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;
+        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) => {
+            failed = true;
+            setFailure({ error });
+        };
+        const measure = () => setHeight(Math.max(sides.old.editor.getContentHeight(), sides.new.editor.getContentHeight()));
+        const align = () => {
+            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) => {
+            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 = [];
+                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 = () => {
+            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;
+        let pending = false;
+        let stopped = false;
+        const schedule = () => {
+            if (pending) {
+                return;
+            }
+            pending = true;
+            const paint = () => {
+                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 (_jsx("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) }, children: SIDES.map((side) => (_jsxs("div", { 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);
+            }, children: [_jsx("div", { ref: side === 'old' ? oldElement : newElement, className: "adecore-editor-diff-surface" }), mounted !== null && mounted[side].engine === engine && (_jsx(DiffOverlays, { mounted: mounted[side], display: display[side], unfold: unfold, blocked: blocked }))] }, side))) }));
+}

package/dist/SymbolPicker.d.ts

@@ -1,5 +1,8 @@
 import type { EditorLanguage } from './editor-language.ts';
 import type { SymbolsView } from './popups.ts';
+export declare function SymbolBadge({ kind }: {
+    kind: number;
+}): import("react").JSX.Element;
 export declare function SymbolPicker({ language, view }: {
     language: EditorLanguage;
     view: SymbolsView;

package/dist/SymbolPicker.js

@@ -15,7 +15,8 @@ const TONES = {
     other: 'bg-surface-hover text-text-muted'
 };
 const SEARCH_DELAY_MS = 200;
-function Badge({ kind }) {
+/* The letter badge of a symbol kind, tinted by what the symbol is. */
+export function SymbolBadge({ kind }) {
     return (_jsx("span", { className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`, children: letterOfKind(kind) }));
 }
 /*
@@ -94,14 +95,14 @@ export function SymbolPicker({ language, view }) {
                         }, onKeyDown: onKeyDown, onBlur: () => language.symbolPicker.close() }), _jsx("span", { className: "shrink-0 text-xs text-text-faint", children: language.shortcuts.goToSymbol === null ? '' : formatShortcut(language.shortcuts.goToSymbol, language.apple) })] }), _jsxs("div", { role: "listbox", className: "max-h-[320px] overflow-y-auto p-1", children: [mode.mode === 'line' && (_jsx("div", { className: "px-2 py-1.5 text-xs text-text-muted", children: mode.line === null ? t('language.symbols.lineHint') : t('language.symbols.goToLine', { line: formatNumber(mode.line) }) })), mode.mode === 'workspace' &&
                         places.map((place, index) => {
                             const path = fileUriToPath(place.uri);
-                            return (_jsxs("button", { ref: index === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === active, "data-active": index === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(index), children: [_jsx(Badge, { kind: place.kind }), _jsx("span", { className: "shrink-0", children: place.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: place.container }), _jsxs("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: [path === null ? '' : basenameOf(path), ":", formatNumber(place.line + 1)] })] }, place.id));
+                            return (_jsxs("button", { ref: index === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": index === active, "data-active": index === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(index), children: [_jsx(SymbolBadge, { kind: place.kind }), _jsx("span", { className: "shrink-0", children: place.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: place.container }), _jsxs("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: [path === null ? '' : basenameOf(path), ":", formatNumber(place.line + 1)] })] }, place.id));
                         }), mode.mode === 'symbol' &&
                         groups.map((group) => {
                             const start = offset;
                             offset += group.entries.length;
                             return (_jsxs("div", { role: "group", children: [_jsx("div", { className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint", children: t(`language.symbols.groups.${group.group}`) }), group.entries.map((entry, index) => {
                                         const position = start + index;
-                                        return (_jsxs("button", { ref: position === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": position === active, "data-active": position === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(position), children: [_jsx(Badge, { kind: entry.kind }), _jsx("span", { className: "shrink-0", children: entry.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: entry.detail }), entry.container !== '' && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: entry.container }), _jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: formatNumber(entry.line + 1) })] }, entry.id));
+                                        return (_jsxs("button", { ref: position === active ? activeRow : undefined, type: "button", role: "option", "aria-selected": position === active, "data-active": position === active, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row", onClick: () => choose(position), children: [_jsx(SymbolBadge, { kind: entry.kind }), _jsx("span", { className: "shrink-0", children: entry.name }), _jsx("span", { className: "min-w-0 truncate font-mono text-text-faint", children: entry.detail }), entry.container !== '' && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: entry.container }), _jsx("span", { className: "ml-auto shrink-0 font-mono text-text-faint", children: formatNumber(entry.line + 1) })] }, entry.id));
                                     })] }, group.group));
                         }), mode.mode === 'symbol' && flat.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: t('language.symbols.none') })), mode.mode === 'workspace' && places.length === 0 && (_jsx("div", { className: "px-2 py-3 text-center text-xs text-text-muted", children: mode.text === '' ? t('language.symbols.workspaceHint') : t('language.symbols.none') }))] }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border px-3 py-1.5 text-xs whitespace-nowrap text-text-faint", children: [_jsxs("span", { children: ["\u2191\u2193 ", t('language.symbols.navigate')] }), _jsxs("span", { children: ["\u21B5 ", t('language.symbols.open')] }), _jsxs("button", { type: "button", className: "ml-auto hover:text-text", onClick: () => setInput('#'), children: ["# ", t('language.symbols.workspace')] }), _jsxs("button", { type: "button", className: "hover:text-text", onClick: () => setInput(':'), children: [": ", t('language.symbols.line')] })] })] }), document.body);
 }