@adecore/editor-react 0.0.1 → 0.17.0-beta.2

package/src/CompletionPopup.tsx

@@ -0,0 +1,196 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { kindLetterOf, kindToneOf, rowWindow, type KindTone } from './completion-model.ts';
+import { SourceLine, SymbolSections } from './HoverSections.tsx';
+import { PathText } from './PathText.tsx';
+import { placeBeside, placePopup } from './popup-placement.ts';
+import type { CompletionView } from './popups.ts';
+
+const TONES: Record<KindTone, string> = {
+    callable: 'bg-accent-soft text-accent',
+    value: 'bg-status-running/15 text-status-running',
+    type: 'bg-status-idle/15 text-status-idle',
+    other: 'bg-surface-hover text-text-muted'
+};
+
+/* The label with the characters that match what was typed set apart. */
+function MarkedLabel({ label, matches }: { label: string; matches: readonly number[] }) {
+    if (matches.length === 0) {
+        return <>{label}</>;
+    }
+    const marked = new Set(matches);
+    const runs: { text: string; marked: boolean }[] = [];
+    for (let at = 0; at < label.length; at++) {
+        const isMarked = marked.has(at);
+        const last = runs[runs.length - 1];
+        if (last !== undefined && last.marked === isMarked) {
+            last.text += label[at];
+        } else {
+            runs.push({ text: label[at]!, marked: isMarked });
+        }
+    }
+    return (
+        <>
+            {runs.map((run, index) =>
+                run.marked ? (
+                    <span key={index} className="font-semibold text-accent">
+                        {run.text}
+                    </span>
+                ) : (
+                    run.text
+                )
+            )}
+        </>
+    );
+}
+
+const CARD = 'fixed top-0 left-0 z-(--z-popup) overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
+const ROW_HEIGHT = 24;
+const VISIBLE_ROWS = 8;
+/* Rows drawn past the visible ones on each side, so a wheel turn lands on rows that exist. */
+const OVERSCAN_ROWS = 6;
+/* The padding the listbox has around its rows. */
+const LIST_PADDING = 4;
+/* What a row takes besides its name and namespace: padding, the kind badge and the gaps. */
+const ROW_CHROME = 72;
+
+/*
+ * The suggestions under the word being typed: a narrow list with the parameters of each, and the
+ * documentation of the active one beside it, or under it when the window has no room at its side. A
+ * press on a row never takes the focus from the editor, so typing goes on while the list is open.
+ */
+export function CompletionPopup({ language, view, rect }: { language: EditorLanguage; view: CompletionView; rect: EditorRect }) {
+    const { t } = useTranslation('editor');
+    const list = useRef<HTMLDivElement>(null);
+    const docs = useRef<HTMLDivElement>(null);
+    const activeRow = useRef<HTMLButtonElement>(null);
+    // The widest row so far in characters, which only grows, so the list never narrows or jumps while it is typed into.
+    const [widest, setWidest] = useState(0);
+    // Only the rows near the visible ones are drawn: a list of 150 is mostly out of sight, and every keystroke makes it again.
+    const [listTop, setListTop] = useState(0);
+    const need = Math.max(0, ...view.rows.slice(0, VISIBLE_ROWS * 2).map((row) => row.label.length + 2 + row.description.length));
+    if (need > widest) {
+        setWidest(need);
+    }
+
+    // Every render: the word moves when the editor scrolls, and the list and the documentation change size with what they hold.
+    useLayoutEffect(() => {
+        const card = list.current;
+        if (card === null) {
+            return;
+        }
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+        const side = docs.current;
+        // Every size is read before the first write, so the page is laid out once and not after each of them.
+        const size = { width: card.offsetWidth, height: card.offsetHeight };
+        const sideSize = side === null ? null : { width: side.offsetWidth, height: side.offsetHeight };
+        const placed = placePopup(rect, size, viewport, { gap: 2 });
+        card.style.left = `${Math.round(placed.left)}px`;
+        card.style.top = `${Math.round(placed.top)}px`;
+        card.style.visibility = 'visible';
+        if (side !== null && sideSize !== null) {
+            const box = {
+                left: Math.round(placed.left),
+                top: Math.round(placed.top),
+                ...size
+            };
+            const beside = placeBeside(box, sideSize, viewport);
+            side.style.left = `${Math.round(beside.left)}px`;
+            side.style.top = `${Math.round(beside.top)}px`;
+            side.style.maxHeight = `${Math.floor(beside.maxHeight)}px`;
+            side.style.visibility = 'visible';
+        }
+    });
+
+    useLayoutEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [view.active, view.rows]);
+
+    const total = view.rows.length;
+    const { first, last } = rowWindow(listTop, view.active, total, ROW_HEIGHT, VISIBLE_ROWS, OVERSCAN_ROWS, LIST_PADDING);
+
+    return createPortal(
+        <>
+            <div
+                ref={list}
+                className={`${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`}
+                style={{ visibility: 'hidden' }}
+                onPointerDown={(event) => event.preventDefault()}
+            >
+                {/* Sizes the list to the widest rows in the face the rows use; the rows themselves fill that width and truncate inside it. */}
+                <div
+                    aria-hidden
+                    className="h-0 overflow-hidden font-mono text-code"
+                    style={{
+                        width: `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`
+                    }}
+                />
+                <div
+                    role="listbox"
+                    className="w-0 min-w-full overflow-y-auto p-1"
+                    style={{ maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8 }}
+                    onScroll={(event) => setListTop(event.currentTarget.scrollTop)}
+                >
+                    <div aria-hidden style={{ height: first * ROW_HEIGHT }} />
+                    {view.rows.slice(first, last).map((row, offset) => {
+                        const index = first + offset;
+                        return (
+                            <button
+                                key={`${index}:${row.label}`}
+                                ref={index === view.active ? activeRow : undefined}
+                                type="button"
+                                role="option"
+                                aria-selected={index === view.active}
+                                aria-setsize={total}
+                                aria-posinset={index + 1}
+                                data-active={index === view.active}
+                                className="flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row"
+                                onClick={() => void language.completion.accept(false, index)}
+                            >
+                                <span
+                                    className={`grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row.kind)]}`}
+                                >
+                                    {kindLetterOf(row.kind)}
+                                </span>
+                                <span className={`max-w-full shrink-0 truncate font-mono text-code ${row.deprecated ? 'line-through' : ''}`}>
+                                    <MarkedLabel label={row.label} matches={row.matches} />
+                                </span>
+                                <span className="min-w-0 grow truncate font-mono text-text-faint">{row.detail}</span>
+                                <PathText path={row.description} className="max-w-[60%] font-mono text-text-faint" />
+                            </button>
+                        );
+                    })}
+                    <div aria-hidden style={{ height: (total - last) * ROW_HEIGHT }} />
+                </div>
+                <div className="flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint">
+                    <span>↵ {t('language.completion.insert')}</span>
+                    <span>⇥ {t('language.completion.replace')}</span>
+                    <span>^Space {t('language.completion.details')}</span>
+                    <span className="ml-auto">{view.server}</span>
+                </div>
+            </div>
+            {view.detailsOpen && view.docs !== null && (
+                <div
+                    ref={docs}
+                    className={`${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`}
+                    style={{ visibility: 'hidden' }}
+                    onPointerDown={(event) => event.preventDefault()}
+                >
+                    {view.docs.source !== '' && (
+                        <div className="px-3 py-2">
+                            <SourceLine text={view.docs.source} language={view.highlightLanguage} />
+                        </div>
+                    )}
+                    <SymbolSections text={view.docs.text} />
+                </div>
+            )}
+        </>,
+        document.body
+    );
+}

package/src/EditorContextMenu.tsx

@@ -0,0 +1,67 @@
+import { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, Kbd } from '@adecore/ui';
+import type { KeymapId } from '@adecore/editor/keymap';
+import type { EditorLanguage } from './editor-language.ts';
+import type { MenuView } from './popups.ts';
+
+export function EditorContextMenu({ language, view, children }: { language: EditorLanguage; view: MenuView; children?: ReactNode }) {
+    const { t } = useTranslation('editor');
+    const trigger = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        trigger.current?.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: view.x, clientY: view.y }));
+    }, [view.x, view.y]);
+    const { service } = language.project;
+    const rows: { id: KeymapId; method: string; run(): void }[] = [
+        { id: 'goToDefinition', method: 'textDocument/definition', run: () => void language.navigation.go('definition') },
+        { id: 'goToTypeDefinition', method: 'textDocument/typeDefinition', run: () => void language.navigation.go('typeDefinition') },
+        { id: 'goToImplementation', method: 'textDocument/implementation', run: () => void language.navigation.go('implementation') },
+        { id: 'peekReferences', method: 'textDocument/references', run: () => void language.peek.open() },
+        { id: 'renameSymbol', method: 'textDocument/rename', run: () => void language.rename.start() },
+        { id: 'codeActions', method: 'textDocument/codeAction', run: () => void language.codeActions.open() }
+    ];
+    return (
+        <ContextMenu.Root onOpenChange={(open) => !open && language.contextMenu.close()}>
+            <ContextMenu.Trigger ref={trigger} className="fixed top-0 left-0 h-0 w-0" aria-hidden />
+            <ContextMenu.Popup>
+                {rows
+                    .filter((row) => service.supports(row.method, language.uri))
+                    .map((row) => (
+                        <ContextMenu.Item key={row.id} onClick={row.run}>
+                            {t(`commands.${row.id}`)}
+                            {language.shortcuts[row.id] !== null && <Kbd shortcut={language.shortcuts[row.id]!} />}
+                        </ContextMenu.Item>
+                    ))}
+                {view.refactors.length > 0 && (
+                    <ContextMenu.SubmenuRoot>
+                        <ContextMenu.SubmenuTrigger>{t('language.context.refactor')}</ContextMenu.SubmenuTrigger>
+                        <ContextMenu.Popup>
+                            {view.refactors.map((entry, index) => (
+                                <Fragment key={entry.id}>
+                                    {index > 0 && view.refactors[index - 1]!.group !== entry.group && <ContextMenu.Separator />}
+                                    <ContextMenu.Item onClick={() => void language.codeActions.apply(entry)}>{entry.action.title}</ContextMenu.Item>
+                                </Fragment>
+                            ))}
+                        </ContextMenu.Popup>
+                    </ContextMenu.SubmenuRoot>
+                )}
+                {children}
+                <ContextMenu.Separator />
+                {(['cut', 'copy', 'paste'] as const).map((action) => (
+                    <ContextMenu.Item key={action} onClick={() => language.contextMenu.clipboard(action)}>
+                        {t(`language.context.${action}`)}
+                    </ContextMenu.Item>
+                ))}
+                {service.supports('textDocument/formatting', language.uri) && (
+                    <>
+                        <ContextMenu.Separator />
+                        <ContextMenu.Item onClick={() => void language.codeActions.formatDocument()}>
+                            {t('commands.formatDocument')}
+                            {language.shortcuts.formatDocument !== null && <Kbd shortcut={language.shortcuts.formatDocument} />}
+                        </ContextMenu.Item>
+                    </>
+                )}
+            </ContextMenu.Popup>
+        </ContextMenu.Root>
+    );
+}

package/src/EditorView.tsx

@@ -0,0 +1,47 @@
+import { createHolder } from './holder.ts';
+import { useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode, type Ref } from 'react';
+import type { Editor, EditorEngine, EditorOptions } from '@adecore/editor';
+import { EditorLanguage } from './editor-language.ts';
+import { LanguagePopups } from './LanguagePopups.tsx';
+import type { ProjectLanguage } from './project-language.ts';
+
+export interface EditorViewProps {
+    engine: EditorEngine;
+    options: EditorOptions;
+    project?: ProjectLanguage;
+    uri?: string;
+    languageId?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    onMount?(editor: Editor, language: EditorLanguage | null): void | (() => void);
+    /* Rows of the app in the context menu, between the refactorings and the clipboard rows. */
+    contextMenuItems?(language: EditorLanguage): ReactNode;
+}
+
+export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps) {
+    const element = useRef<HTMLDivElement>(null);
+    const holder = useMemo(() => createHolder<EditorLanguage>(), []);
+    const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
+    useLayoutEffect(() => {
+        const host = element.current;
+        if (host === null) {
+            return;
+        }
+        const editor = engine.mount(host, options);
+        const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
+        holder.set(attached);
+        const stop = onMount?.(editor, attached);
+        return () => {
+            holder.set(null);
+            stop?.();
+            attached?.dispose();
+            editor.dispose();
+        };
+    }, [engine, options, project, uri, languageId, holder, onMount]);
+    return (
+        <div className={className} ref={ref} style={{ position: 'relative', minHeight: 0 }}>
+            <div ref={element} style={{ position: 'absolute', inset: 0 }} />
+            {language !== null && <LanguagePopups language={language} contextMenuItems={contextMenuItems} />}
+        </div>
+    );
+}

package/src/FindReplace.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, 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 { compileFind, EMPTY_FIND_QUERY, type FindQuery } from './find-query.ts';
+
+export function FindReplace({ editor, className, onClose }: { editor: Editor; className?: string; onClose?(): void }) {
+    const { t } = useTranslation('editor');
+    const [query, setQuery] = useState<FindQuery>(EMPTY_FIND_QUERY);
+    const [replacement, setReplacement] = useState('');
+    const [preserveCase, setPreserveCase] = useState(false);
+    const [state, setState] = useState<EditorFindState>({ count: 0, current: null });
+    const compiled = useMemo(() => compileFind(query), [query]);
+    useEffect(() => editor.onFind(setState), [editor]);
+    useEffect(() => {
+        editor.find(compiled.kind === 'pattern' ? query : null);
+    }, [editor, query, compiled]);
+    useEffect(() => {
+        editor.setReplacePreview(compiled.kind === 'pattern' ? replacement : null, { preserveCase });
+    }, [editor, compiled, replacement, preserveCase]);
+    useEffect(
+        () => () => {
+            editor.endFind();
+            editor.setReplacePreview(null);
+        },
+        [editor]
+    );
+    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) });
+    return (
+        <div className={`adecore-editor-find ${className ?? ''}`} role="search" aria-label={t('find.label')}>
+            <div className="adecore-editor-find-row">
+                <input
+                    type="text"
+                    aria-label={t('find.label')}
+                    value={query.text}
+                    onChange={(event) => setQuery({ ...query, text: event.target.value })}
+                    onKeyDown={(event) => {
+                        if (event.nativeEvent.isComposing) {
+                            return;
+                        }
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            editor.findStep(event.shiftKey ? -1 : 1);
+                        }
+                        if (event.key === 'Escape') {
+                            event.preventDefault();
+                            onClose?.();
+                            editor.focus();
+                        }
+                    }}
+                />
+                <output aria-live="polite">{label}</output>
+                <Button size="xs" onClick={() => editor.findStep(-1)}>
+                    {t('find.previous')}
+                </Button>
+                <Button size="xs" onClick={() => editor.findStep(1)}>
+                    {t('find.next')}
+                </Button>
+            </div>
+            <div className="adecore-editor-find-row">
+                {(['caseSensitive', 'wholeWord', 'regex', 'inSelection'] as const).map((option) => (
+                    <label key={option}>
+                        <input type="checkbox" checked={query[option] === true} onChange={(event) => setQuery({ ...query, [option]: event.target.checked })} />
+                        {t(`find.${option}`)}
+                    </label>
+                ))}
+            </div>
+            <div className="adecore-editor-find-row">
+                <input type="text" aria-label={t('find.replace.label')} value={replacement} onChange={(event) => setReplacement(event.target.value)} />
+                <label>
+                    <input type="checkbox" checked={preserveCase} onChange={(event) => setPreserveCase(event.target.checked)} />
+                    {t('find.replace.preserveCase')}
+                </label>
+                <Button size="xs" onClick={() => editor.replace(replacement, { preserveCase })}>
+                    {t('find.replace.one')}
+                </Button>
+                <Button size="xs" onClick={() => editor.replaceAll(replacement, { preserveCase })}>
+                    {t('find.replace.allLabel')}
+                </Button>
+            </div>
+        </div>
+    );
+}

package/src/HoverCard.tsx

@@ -0,0 +1,121 @@
+import { useTranslation } from 'react-i18next';
+import { CircleX, Info, TriangleAlert } from 'lucide-react';
+import { fileUriToPath } from '@adecore/lsp';
+import { Button, Icon, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import type { EditorPosition } from '@adecore/editor';
+import { basenameOf } from './paths.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { codeLabelOf, severityOf, type Problem } from './diagnostics-model.ts';
+import type { HoverInfo } from './popups.ts';
+import { SymbolSections } from './HoverSections.tsx';
+
+const SEVERITY_ICONS = { error: CircleX, warning: TriangleAlert, info: Info, hint: Info } as const;
+const SEVERITY_COLORS = { error: 'text-status-error', warning: 'text-status-needs-you', info: 'text-status-running', hint: 'text-text-muted' } as const;
+
+function ProblemSection({ problem, language }: { problem: Problem; language: EditorLanguage }) {
+    const { t } = useTranslation('editor');
+    const { diagnostic } = problem;
+    const severity = severityOf(diagnostic);
+    const label =
+        diagnostic.source === undefined ? [codeLabelOf(diagnostic), problem.server].filter((part) => part !== '').join(' · ') : codeLabelOf(diagnostic);
+    const supported = language.codeActions.supported;
+    return (
+        <div className="flex flex-col gap-1.5 px-3 py-2.5">
+            <div className="flex items-start gap-2">
+                <Icon icon={SEVERITY_ICONS[severity]} size={14} className={`mt-px shrink-0 ${SEVERITY_COLORS[severity]}`} />
+                <div className="min-w-0 text-xs/[18px] break-words whitespace-pre-wrap select-text">{diagnostic.message}</div>
+            </div>
+            {label !== '' && <div className="pl-[22px] text-xs text-text-muted select-text">{label}</div>}
+            {diagnostic.relatedInformation?.map((related, index) => {
+                const path = fileUriToPath(related.location.uri);
+                return (
+                    <div key={index} className="pl-[22px] text-xs text-text-muted">
+                        {path !== null && (
+                            <button type="button" className="font-mono text-accent hover:underline" onClick={() => language.goTo(related.location)}>
+                                {basenameOf(path)}:{formatNumber(related.location.range.start.line + 1)}
+                            </button>
+                        )}{' '}
+                        {related.message}
+                    </div>
+                );
+            })}
+            <div className="pt-1 pl-[22px]">
+                <Tooltip label={t(supported ? 'language.hover.quickFix' : 'language.hover.quickFixNone')}>
+                    <Button
+                        size="xs"
+                        variant="secondary"
+                        aria-disabled={!supported}
+                        onClick={() => {
+                            if (supported) {
+                                language.hover.hide();
+                                void language.codeActions.quickFixFor(problem);
+                            }
+                        }}
+                    >
+                        {t('language.hover.quickFix')}
+                    </Button>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
+
+export function HoverCard({
+    language,
+    problems,
+    info,
+    anchor,
+    position
+}: {
+    language: EditorLanguage;
+    problems: readonly Problem[];
+    info: HoverInfo | null;
+    anchor: EditorPosition;
+    position: EditorPosition;
+}) {
+    const { t } = useTranslation('editor');
+    const place = info?.definition === null || info === null ? null : fileUriToPath(info.definition.uri);
+    return (
+        <div className="flex w-max min-w-[280px] max-w-[min(520px,calc(100vw-16px))] flex-col divide-y divide-border">
+            {info !== null && (
+                <>
+                    <SymbolSections
+                        text={info.text}
+                        onName={(name, declared) => {
+                            language.hover.hide();
+                            void language.navigation.goToName(name, anchor, name === (declared ?? info.word) ? info.definition : null);
+                        }}
+                    />
+                    <div className="flex items-center gap-3 px-3 py-1.5 text-xs">
+                        {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>
+                        )}
+                        {place !== null && info.definition !== null && (
+                            <span className="ml-auto font-mono text-text-faint">
+                                {basenameOf(place)}:{formatNumber(info.definition.range.start.line + 1)}
+                            </span>
+                        )}
+                    </div>
+                </>
+            )}
+            {problems.map((problem, index) => (
+                <ProblemSection key={index} problem={problem} language={language} />
+            ))}
+        </div>
+    );
+}

package/src/HoverSections.tsx

@@ -0,0 +1,146 @@
+import { useEditorRendering } from './rendering-context.ts';
+import { useEffect, useState, type MouseEvent } from 'react';
+import { Markdown } from './Markdown.tsx';
+import { Tooltip } from '@adecore/ui';
+import { hoverSectionsOf, markdownParts, type DocTag, type HoverSection, type HoverText } from './hover-content.ts';
+import { BaselineStatus } from './BaselineStatus.tsx';
+import { declaredNameOf, linkTypeNames } from './symbol-links.ts';
+
+/* Code as the viewer colors it, plain until the grammar is in so the card never changes size under the pointer by much. */
+export function Signature({ code, language, onName }: { code: string; language: string; onName?: (name: string) => void }) {
+    const { theme, highlight } = useEditorRendering();
+    const [html, setHtml] = useState<{ key: string; html: string } | null>(null);
+    const key = `${language}\0${theme}\0${code}\0${onName !== undefined}`;
+    // Only whether there are links goes into the highlighting; the handler is read when a name is pressed.
+    const linked = onName !== undefined;
+
+    useEffect(() => {
+        if (highlight === undefined) {
+            return;
+        }
+        let alive = true;
+        highlight(code, language, theme)
+            .then((result) => alive && setHtml({ key, html: linked ? linkTypeNames(result) : result }))
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [code, language, theme, key, linked, highlight]);
+
+    const className =
+        'font-mono text-code break-words whitespace-pre-wrap [&_.line]:block [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:whitespace-pre-wrap [&_code]:font-mono';
+    // One handler for every name, since the names are part of the highlighted HTML and not elements of ours.
+    const follow = (event: MouseEvent<HTMLDivElement>): void => {
+        const name = (event.target as HTMLElement).closest<HTMLElement>('[data-symbol]')?.dataset.symbol;
+        if (name !== undefined && onName !== undefined) {
+            onName(name);
+        }
+    };
+    return html?.key === key ? (
+        <div className={className} onClick={follow} dangerouslySetInnerHTML={{ __html: html.html }} />
+    ) : (
+        <div className={className}>{code}</div>
+    );
+}
+
+/* A docblock's tags as rows: the tag once beside each run of the same tag, so a list of parameters reads as one. */
+export function DocTags({ tags }: { tags: readonly DocTag[] }) {
+    return (
+        <div className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-0.5 text-xs/[18px] select-text">
+            {tags.map((tag, index) => (
+                <div key={index} className="contents">
+                    <span className="font-mono text-text-faint">{tags[index - 1]?.name === tag.name ? '' : `@${tag.name}`}</span>
+                    <div className="min-w-0 break-words text-text-muted [&_.adecore-editor-markdown]:text-xs [&_code]:bg-transparent! [&_code]:p-0! [&_p]:m-0">
+                        <Markdown text={tag.markdown} />
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/* One symbol: its qualified name muted, its signature, the prose and examples as compact blocks, and its tags as rows. Names in the signature are links only where `onName` says what a press does. */
+export function SymbolSection({ section, onName }: { section: HoverSection; onName?: (name: string, declared: string | null) => void }) {
+    const declared = declaredNameOf(section.signatures[0]?.code ?? '');
+    const follow = onName === undefined ? undefined : (name: string): void => onName(name, declared);
+    return (
+        <div className="flex flex-col gap-1.5 px-3 py-2">
+            {section.title !== null && <div className="truncate font-mono text-xs text-text-faint select-text">{section.title}</div>}
+            {section.signatures.map((block, index) => (
+                <Signature key={index} code={block.code} language={block.language} onName={follow} />
+            ))}
+            {section.baseline !== null && <BaselineStatus baseline={section.baseline} />}
+            {markdownParts(section.markdown).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} onName={follow} />
+                    </div>
+                ) : (
+                    <div key={index} className="text-text-muted select-text [&_.adecore-editor-markdown]:text-xs [&_p]:my-1">
+                        <Markdown text={part.text} />
+                    </div>
+                )
+            )}
+            {section.tags.length > 0 && <DocTags tags={section.tags} />}
+        </div>
+    );
+}
+
+/* What a server says about a symbol as the sections of a hover card, shared by the hover and the documentation beside the suggestions. */
+export function SymbolSections({ text, onName }: { text: HoverText; onName?: (name: string, declared: string | null) => void }) {
+    return (
+        <>
+            {hoverSectionsOf(text).map((section, index) => (
+                <SymbolSection key={index} section={section} onName={onName} />
+            ))}
+        </>
+    );
+}
+
+/* PHP highlights only after its opening tag, which is put in front for the grammar and taken off again. */
+function phpWithoutOpenTag(html: string): string {
+    return html.replace(/<span[^>]*>&#x3C;\?<\/span><span[^>]*>php<\/span>(<span[^>]*>) /, '$1');
+}
+
+/*
+ * Where a suggestion comes from, such as `use Raxos\Database\Orm\Attribute\PrimaryKey`, on one line that gives
+ * way from its start, so the end of the name stays readable and a word is never cut in two. The full text is in the tooltip.
+ */
+export function SourceLine({ text, language }: { text: string; language: string }) {
+    const { theme, highlight } = useEditorRendering();
+    const [html, setHtml] = useState<{ key: string; html: string } | null>(null);
+    const highlighted = language === 'php' && text.startsWith('use ');
+    const key = `${theme}\0${text}`;
+
+    useEffect(() => {
+        if (!highlighted) {
+            return;
+        }
+        if (highlight === undefined) {
+            return;
+        }
+        let alive = true;
+        highlight(`<?php ${text}`, 'php', theme)
+            .then((result) => alive && setHtml({ key, html: phpWithoutOpenTag(result) }))
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [highlighted, text, theme, key, highlight]);
+
+    const className =
+        'block overflow-hidden text-left font-mono text-code text-ellipsis whitespace-nowrap [direction:rtl] [&_code]:font-mono [&_pre]:m-0 [&_pre]:inline [&_pre]:bg-transparent! [&_pre]:p-0 [&_code]:inline [&_.line]:inline';
+    return (
+        <Tooltip label={text}>
+            {highlighted && html?.key === key ? (
+                <div className={className}>
+                    <bdi dangerouslySetInnerHTML={{ __html: html.html }} />
+                </div>
+            ) : (
+                <div className={`${className} text-text-muted`}>
+                    <bdi>{text}</bdi>
+                </div>
+            )}
+        </Tooltip>
+    );
+}