@adecore/editor-react 0.22.0 → 0.23.0

package/src/FindReplace.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
-import type { Editor, EditorFindState } from '@adecore/editor';
+import { MAX_REPLACEMENT_PAGE, MAX_REPLACEMENT_CHARACTERS, type Editor, type EditorFindState } from '@adecore/editor';
 import { compileFind, EMPTY_FIND_QUERY, type FindQuery } from './find-query.ts';
 
 export function FindReplace({ editor, className, onClose }: { editor: Editor; className?: string; onClose?(): void }) {
@@ -11,6 +11,7 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
     const [replacement, setReplacement] = useState('');
     const [preserveCase, setPreserveCase] = useState(false);
     const [state, setState] = useState<EditorFindState>({ count: 0, current: null });
+    const root = useRef<HTMLDivElement>(null);
     const compiled = useMemo(() => compileFind(query), [query]);
     useEffect(() => editor.onFind(setState), [editor]);
     useEffect(() => {
@@ -26,14 +27,56 @@ 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(
+        () => () => {
+            if (root.current?.contains(root.current.ownerDocument.activeElement) === true) {
+                editor.focus();
+            }
+        },
+        [editor]
+    );
+    const failure = state.failed ?? state.captureFailed;
     const label =
         compiled.kind === 'invalid'
             ? t('find.invalid')
-            : state.noSelection
-              ? t('find.noSelection')
-              : t('find.count', { total: formatNumber(state.count), current: state.current === null ? '0' : formatNumber(state.current + 1) });
+            : state.replaceFailed !== undefined
+              ? t(`find.replace.failed.${state.replaceFailed}`, {
+                    edits: formatNumber(MAX_REPLACEMENT_PAGE),
+                    characters: formatNumber(MAX_REPLACEMENT_CHARACTERS)
+                })
+              : failure !== undefined
+                ? t(`find.failed.${failure}`)
+                : state.searching
+                  ? t('find.searching')
+                  : state.large
+                    ? t('find.large')
+                    : state.noSelection
+                      ? t('find.noSelection')
+                      : state.replaced !== undefined
+                        ? t('find.replaced', { count: formatNumber(state.replaced) })
+                        : state.limited && state.current === null
+                          ? t('find.countMore', { total: formatNumber(state.count) })
+                          : t(state.limited ? 'find.countLimited' : 'find.count', {
+                                total: formatNumber(state.count),
+                                current: state.current === null ? '0' : formatNumber(state.current + 1)
+                            });
     return (
-        <div className={`adecore-editor-find ${className ?? ''}`} role="search" aria-label={t('find.label')}>
+        <div
+            ref={root}
+            className={`adecore-editor-find ${className ?? ''}`}
+            role="search"
+            aria-label={t('find.label')}
+            onKeyDown={(event) => {
+                if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+                    event.preventDefault();
+                    editor.endFind();
+                    editor.setReplacePreview(null);
+                    onClose?.();
+                    editor.focus();
+                }
+            }}
+        >
             <div className="adecore-editor-find-row">
                 <input
                     type="text"
@@ -48,11 +91,6 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
                             event.preventDefault();
                             editor.findStep(event.shiftKey ? -1 : 1);
                         }
-                        if (event.key === 'Escape') {
-                            event.preventDefault();
-                            onClose?.();
-                            editor.focus();
-                        }
                     }}
                 />
                 <output aria-live="polite">{label}</output>
@@ -77,10 +115,10 @@ export function FindReplace({ editor, className, onClose }: { editor: Editor; cl
                     <input type="checkbox" checked={preserveCase} onChange={(event) => setPreserveCase(event.target.checked)} />
                     {t('find.replace.preserveCase')}
                 </label>
-                <Button size="xs" onClick={() => editor.replace(replacement, { preserveCase })}>
+                <Button size="xs" disabled={state.searching === true} onClick={() => editor.replace(replacement, { preserveCase })}>
                     {t('find.replace.one')}
                 </Button>
-                <Button size="xs" onClick={() => editor.replaceAll(replacement, { preserveCase })}>
+                <Button size="xs" disabled={state.searching === true} onClick={() => void editor.replaceAllAsync(replacement, { preserveCase })}>
                     {t('find.replace.allLabel')}
                 </Button>
             </div>

package/src/HoverCard.tsx

@@ -108,28 +108,30 @@ export function HoverCard({
                             void language.navigation.goToName(name, anchor, name === (declared ?? info.word) ? info.definition : null);
                         }}
                     />
-                    <div className="flex flex-col gap-0.5 px-3 py-1.5 text-xs">
-                        <div className="flex items-center gap-3 whitespace-nowrap">
-                            {info.definition !== null && (
-                                <button type="button" className="text-accent hover:underline" onClick={() => language.goTo(info.definition!)}>
-                                    {t('language.hover.definition')}
-                                </button>
-                            )}
-                            {info.references !== null && info.references > 0 && (
-                                <button
-                                    type="button"
-                                    className="text-accent hover:underline"
-                                    onClick={() => {
-                                        language.hover.hide();
-                                        void language.peek.open(position);
-                                    }}
-                                >
-                                    {t('language.hover.references', { count: info.references, formatted: formatNumber(info.references) })}
-                                </button>
-                            )}
+                    {info.plain !== true && (
+                        <div className="flex flex-col gap-0.5 px-3 py-1.5 text-xs">
+                            <div className="flex items-center gap-3 whitespace-nowrap">
+                                {info.definition !== null && (
+                                    <button type="button" className="text-accent hover:underline" onClick={() => language.goTo(info.definition!)}>
+                                        {t('language.hover.definition')}
+                                    </button>
+                                )}
+                                {info.references !== null && info.references > 0 && (
+                                    <button
+                                        type="button"
+                                        className="text-accent hover:underline"
+                                        onClick={() => {
+                                            language.hover.hide();
+                                            void language.peek.open(position);
+                                        }}
+                                    >
+                                        {t('language.hover.references', { count: info.references, formatted: formatNumber(info.references) })}
+                                    </button>
+                                )}
+                            </div>
+                            {info.definition !== null && <DefinitionPlace definition={info.definition} uri={language.uri} folder={language.project.folder} />}
                         </div>
-                        {info.definition !== null && <DefinitionPlace definition={info.definition} uri={language.uri} folder={language.project.folder} />}
-                    </div>
+                    )}
                 </>
             )}
             {problems.map((problem, index) => (

package/src/LanguagePopups.tsx

@@ -2,6 +2,7 @@ import { useEffect, useReducer, type ReactNode } from 'react';
 import { useStore } from 'zustand';
 import type { EditorLanguage } from './editor-language.ts';
 import { AnchoredPopup } from './AnchoredPopup.tsx';
+import { CallHierarchyPanel } from './CallHierarchyPanel.tsx';
 import { CodeAuthorsCard } from './CodeAuthorsCard.tsx';
 import { CompletionPopup } from './CompletionPopup.tsx';
 import { EditorContextMenu } from './EditorContextMenu.tsx';
@@ -9,6 +10,7 @@ import { HoverCard } from './HoverCard.tsx';
 import { PeekPanel } from './PeekPanel.tsx';
 import { PickPopup } from './PickPopup.tsx';
 import { RenameCard } from './RenameCard.tsx';
+import { RenderedDocs } from './RenderedDocs.tsx';
 import { SymbolPicker } from './SymbolPicker.tsx';
 import { SignatureCard } from './SignatureCard.tsx';
 
@@ -25,6 +27,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
     const pick = useStore(language.popups, (state) => state.pick);
     const rename = useStore(language.popups, (state) => state.rename);
     const peek = useStore(language.popups, (state) => state.peek);
+    const callHierarchy = useStore(language.popups, (state) => state.callHierarchy ?? null);
     const symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
@@ -39,6 +42,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
     const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
     return (
         <>
+            <RenderedDocs language={language} />
             {hover !== null && hoverRect !== null && (
                 <AnchoredPopup rect={hoverRect} onPointerEnter={() => language.hover.holdCard(true)} onPointerLeave={() => language.hover.holdCard(false)}>
                     <HoverCard language={language} problems={hover.problems} info={hover.info} anchor={hover.anchor} position={hover.position} />
@@ -58,6 +62,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
             )}
             {symbols !== null && <SymbolPicker language={language} view={symbols} />}
             {peek !== null && <PeekPanel language={language} view={peek} />}
+            {callHierarchy !== null && <CallHierarchyPanel language={language} view={callHierarchy} />}
             {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
             {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
         </>

package/src/Markdown.tsx

@@ -1,11 +1,18 @@
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 
-export function Markdown({ text }: { text: string }) {
+/* An image becomes its alt text, so a comment cannot make the editor fetch a page of its choosing. */
+const WITHOUT_IMAGES: Components = {
+    img: ({ alt }) => <>{alt ?? ''}</>
+};
+
+export function Markdown({ text, images = true }: { text: string; images?: boolean }) {
     return (
         <div className="adecore-editor-markdown">
-            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{text}</ReactMarkdown>
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={images ? undefined : WITHOUT_IMAGES}>
+                {text}
+            </ReactMarkdown>
         </div>
     );
 }

package/src/PeekPanel.tsx

@@ -19,10 +19,9 @@ 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 }: { view: PeekView }) {
+export function Preview({ preview }: { preview: PeekView['preview'] }) {
     const { theme, highlight } = useEditorRendering();
     const scroller = useRef<HTMLDivElement>(null);
-    const { preview } = view;
     const [html, setHtml] = useState<{ key: string; html: string } | null>(null);
     const path = preview === null ? null : fileUriToPath(preview.uri);
     const key = preview === null ? '' : `${theme}\0${path}\0${preview.text}`;
@@ -204,7 +203,7 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; view:
                 </div>
             </div>
             <div className="flex h-[180px] shrink-0">
-                <Preview view={view} />
+                <Preview preview={view.preview} />
                 <Places language={language} view={view} />
             </div>
             <div className="peek-hatch h-[14px]" />

package/src/PickPopup.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
@@ -39,6 +39,7 @@ function PreviewLines({ preview }: { preview: PickPreview }) {
  * the focus from the editor, so the keys keep going to it while the list is open.
  */
 export function PickPopup({ language, view, rect }: { language: EditorLanguage; view: PickView; rect: EditorRect }) {
+    const listId = useId();
     const card = useRef<HTMLDivElement>(null);
     const activeRow = useRef<HTMLButtonElement>(null);
 
@@ -64,16 +65,31 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
         activeRow.current?.scrollIntoView({ block: 'nearest' });
     }, [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]);
+
     return createPortal(
         <div ref={card} className={CARD} style={{ visibility: 'hidden' }} onPointerDown={(event) => event.preventDefault()}>
             {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
-            <div role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
+            <div id={listId} role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
                 {view.groups.map((group, groupIndex) => (
                     <div key={group.title ?? groupIndex} role="group" className="flex flex-col">
                         {group.title !== null && <div className="px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint">{group.title}</div>}
                         {group.rows.map((row) => (
                             <button
                                 key={row.id}
+                                id={optionIds.get(row.id)}
                                 ref={row.id === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"

package/src/RenameCard.tsx

@@ -86,6 +86,11 @@ function Hints({ view, active, onPick }: { view: RenameView; active: number; onP
 function Preview({ language, view }: { language: EditorLanguage; view: RenameView }) {
     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">
@@ -115,6 +120,19 @@ function Preview({ language, view }: { language: EditorLanguage; view: RenameVie
                         </div>
                     );
                 })}
+                {operations.length > 0 && (
+                    <div className="flex flex-col gap-px border-b border-border px-3 py-1.5 text-xs last:border-b-0">
+                        {operations.map((operation, index) => (
+                            <div key={`${operation.kind}:${operation.uri}:${index}`} className="flex items-center gap-2">
+                                <span className="shrink-0 font-medium">{t(`language.rename.operations.${operation.kind}`)}</span>
+                                <span className="min-w-0 truncate text-text-faint">
+                                    {shownPath(operation.uri)}
+                                    {operation.newUri === undefined ? '' : ` \u2192 ${shownPath(operation.newUri)}`}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
             <div className="flex items-center justify-end gap-2 border-t border-border p-2">
                 <Button size="xs" variant="ghost" onClick={() => language.rename.cancel()}>

package/src/RenderedDocs.tsx

@@ -0,0 +1,155 @@
+import { createPortal } from 'react-dom';
+import { useSyncExternalStore, type MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { EditorLanguage } from './editor-language.ts';
+import { DOC_LINK_PREFIX, sectionsOf, type DocTagEntry } from './doc-comment-model.ts';
+import { markdownParts } from './hover-content.ts';
+import { Signature } from './HoverSections.tsx';
+import { shikiLanguageOf } from './language-ids.ts';
+import { Markdown } from './Markdown.tsx';
+import type { RenderedDocEntry } from './rendered-docs.ts';
+
+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 }: { children: string; faint?: boolean }) {
+    return <code className={`font-mono text-code break-words ${faint ? 'text-text-faint' : 'text-text'}`}>{children}</code>;
+}
+
+/* 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) =>
+                part.kind === 'code' ? (
+                    <div key={index} className="rounded-md bg-surface-sunken px-2 py-1.5">
+                        <Signature code={part.block.code} language={part.block.language === 'text' ? language : part.block.language} />
+                    </div>
+                ) : (
+                    <div key={index} className={`[&_.adecore-editor-markdown]:text-xs ${compact ? '[&_p]:my-0' : '[&_p]:my-1'}`}>
+                        <Markdown text={part.text} images={false} />
+                    </div>
+                )
+            )}
+        </>
+    );
+}
+
+/* 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' ? (
+                <div className="w-full rounded-md bg-surface-sunken px-2 py-1.5">
+                    <Signature code={tag.text} language={language} />
+                </div>
+            ) : (
+                <>
+                    {tag.subject !== null && target === null && <Code>{tag.subject}</Code>}
+                    {tag.type !== null && <Code faint>{tag.type}</Code>}
+                    {(link !== null || tag.text !== '') && (
+                        <div className="min-w-0 grow basis-48 text-text">
+                            <Prose
+                                text={[link, tag.text].filter((part) => part !== null && part !== '').join(' ')}
+                                language={language}
+                                linkable={linkable}
+                                compact
+                            />
+                        </div>
+                    )}
+                </>
+            )}
+        </dd>
+    );
+}
+
+export function RenderedDocBlock({ language, entry }: { language: EditorLanguage; entry: RenderedDocEntry }) {
+    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: 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)), entry.comment);
+        } else if (/^(https?:|mailto:)/i.test(href)) {
+            window.open(href, '_blank', 'noopener,noreferrer');
+        }
+    };
+
+    return (
+        <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}>
+            {deprecated !== undefined && (
+                <div className="border-l-2 border-status-error pl-2 text-text-muted">
+                    <span className="font-medium text-status-error">{t('language.docs.deprecated')}</span>
+                    {deprecated.tags.some((tag) => tag.text !== '') && (
+                        <Prose text={deprecated.tags.map((tag) => tag.text).join(' ')} language={highlighter} linkable={linkable} />
+                    )}
+                </div>
+            )}
+            {description !== '' && (
+                <div className="text-text">
+                    <Prose text={description} language={highlighter} linkable={linkable} />
+                </div>
+            )}
+            {shown.length > 0 && (
+                <dl className="m-0 grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-3 gap-y-0.5">
+                    {shown.map((section, row) => [
+                        <dt key={`${section.name}:label`} className={`col-start-1 font-medium text-text-muted ${row > 0 ? 'mt-1' : ''}`}>
+                            {KNOWN.has(section.name) ? t(`language.docs.tags.${section.name}`) : `${section.name}:`}
+                        </dt>,
+                        ...section.tags.map((tag, index) => (
+                            <TagRow key={`${section.name}:${index}`} tag={tag} language={highlighter} linkable={linkable} spaced={row > 0 && index === 0} />
+                        ))
+                    ])}
+                </dl>
+            )}
+        </div>
+    );
+}
+
+/*
+ * 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 }: { language: EditorLanguage }) {
+    const feature = language.renderedDocs;
+    useSyncExternalStore(feature.subscribe, feature.getVersion, feature.getVersion);
+    return <>{feature.entries().map((entry) => createPortal(<RenderedDocBlock language={language} entry={entry} />, entry.container, entry.id))}</>;
+}