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

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,45 @@
+import { createHolder } from './holder.ts';
+import { useLayoutEffect, useMemo, useRef, useSyncExternalStore, 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);
+}
+
+export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount }: 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} />}
+        </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>
+    );
+}

package/src/LanguagePopups.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useReducer } from 'react';
+import { useStore } from 'zustand';
+import type { EditorLanguage } from './editor-language.ts';
+import { AnchoredPopup } from './AnchoredPopup.tsx';
+import { CodeAuthorsCard } from './CodeAuthorsCard.tsx';
+import { CompletionPopup } from './CompletionPopup.tsx';
+import { EditorContextMenu } from './EditorContextMenu.tsx';
+import { HoverCard } from './HoverCard.tsx';
+import { PeekPanel } from './PeekPanel.tsx';
+import { PickPopup } from './PickPopup.tsx';
+import { RenameCard } from './RenameCard.tsx';
+import { SymbolPicker } from './SymbolPicker.tsx';
+import { SignatureCard } from './SignatureCard.tsx';
+
+/*
+ * Every card a language feature opens over the editor. Each feature keeps its own state and these
+ * only draw it, placed by the screen position of the character it belongs to, which is read again
+ * whenever the editor scrolls or resizes.
+ */
+export function LanguagePopups({ language }: { language: EditorLanguage }) {
+    const [, redraw] = useReducer((count: number) => count + 1, 0);
+    const hover = useStore(language.popups, (state) => state.hover);
+    const completion = useStore(language.popups, (state) => state.completion);
+    const signature = useStore(language.popups, (state) => state.signature);
+    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 symbols = useStore(language.popups, (state) => state.symbols);
+    const menu = useStore(language.popups, (state) => state.menu);
+    const authors = useStore(language.popups, (state) => state.authors);
+
+    useEffect(() => language.editor.onViewChange(redraw), [language]);
+
+    const hoverRect = hover === null ? null : language.editor.rectAt(hover.anchor);
+    const completionRect = completion === null ? null : language.editor.rectAt(completion.anchor);
+    const signatureRect = signature === null ? null : language.editor.rectAt(signature.anchor);
+    const pickRect = pick === null ? null : language.editor.rectAt(pick.anchor);
+    const renameRect = rename === null ? null : language.editor.rectAt(rename.range.start);
+    const renameEnd = rename === null ? null : language.editor.rectAt(rename.range.end);
+    return (
+        <>
+            {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} />
+                </AnchoredPopup>
+            )}
+            {signature !== null && signatureRect !== null && (
+                <AnchoredPopup rect={signatureRect} placement={{ prefer: 'above' }}>
+                    <SignatureCard model={signature.model} />
+                </AnchoredPopup>
+            )}
+            {completion !== null && completionRect !== null && <CompletionPopup language={language} view={completion} rect={completionRect} />}
+            {pick !== null && pickRect !== null && <PickPopup language={language} view={pick} rect={pickRect} />}
+            {menu !== null && <EditorContextMenu language={language} view={menu} />}
+            {symbols !== null && <SymbolPicker language={language} view={symbols} />}
+            {peek !== null && <PeekPanel language={language} view={peek} />}
+            {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
+        </>
+    );
+}

package/src/Markdown.tsx

@@ -0,0 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+
+export function Markdown({ text }: { text: string }) {
+    return (
+        <div className="adecore-editor-markdown">
+            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{text}</ReactMarkdown>
+        </div>
+    );
+}

package/src/PathText.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from '@adecore/ui';
+
+/*
+ * A path that gives way from its start, so the end of it, which names the place, stays readable. The
+ * full path is in the tooltip. The `bdi` keeps the slashes in reading order inside the right-to-left box.
+ */
+export function PathText({ path, className = '' }: { path: string; className?: string }) {
+    if (path === '') {
+        return null;
+    }
+    return (
+        <Tooltip label={path}>
+            <span className={`min-w-0 overflow-hidden text-left text-ellipsis whitespace-nowrap [direction:rtl] ${className}`}>
+                <bdi>{path}</bdi>
+            </span>
+        </Tooltip>
+    );
+}