@adecore/editor-react 0.22.0 → 0.23.0

package/src/diff-syntax.ts

@@ -0,0 +1,67 @@
+import type { LineToken } from '@adecore/editor';
+import type { DiffSyntaxDocument } from '@adecore/editor/shiki-worker';
+import type { DiffDocument } from '@adecore/merge';
+
+export type DiffSourceSide = 'old' | 'new';
+
+export interface DiffSourceTokens {
+    /* Keep the same array while this source line is unchanged. Undefined means pending; null means plain. */
+    get(side: DiffSourceSide, index: number): readonly LineToken[] | null | undefined;
+    subscribe(listener: () => void): () => void;
+}
+
+export interface DiffSyntaxSources {
+    readonly documents: Readonly<Record<DiffSourceSide, DiffSyntaxDocument>>;
+    locate(side: DiffSourceSide, index: number): { readonly block: number; readonly line: number } | undefined;
+}
+
+function canTokenize(source: readonly string[]): boolean {
+    if (source.length > 20000) {
+        return false;
+    }
+    let characters = Math.max(0, source.length - 1);
+    for (const line of source) {
+        characters += line.length;
+        if (line.length > 10000 || characters > 2000000) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export function diffSyntaxDocument(document: DiffDocument, language: string, theme: string): DiffSyntaxSources {
+    const locations: Record<DiffSourceSide, Array<{ block: number; line: number }>> = { old: [], new: [] };
+    const build = (side: DiffSourceSide): DiffSyntaxDocument => {
+        const source = document.sides[side];
+        // Skipping a long hidden line loses grammar state; keep the entire side plain instead.
+        if (!canTokenize(source)) {
+            return { language, theme, blocks: [], resets: [] };
+        }
+        const blocks: string[] = [];
+        const resets: number[] = [];
+        const ranges = document.snapshots
+            ? [{ from: 0, to: source.length }]
+            : document.offsets.map((offset, index) => ({ from: offset[side], to: document.offsets[index + 1]?.[side] ?? source.length }));
+        for (const range of ranges) {
+            if (!document.snapshots && range.from < range.to) {
+                resets.push(blocks.length);
+            }
+            for (let from = range.from; from < range.to; from += 200) {
+                const to = Math.min(from + 200, range.to);
+                const block = blocks.length;
+                blocks.push(source.slice(from, to).join('\n'));
+                for (let index = from; index < to; index++) {
+                    locations[side][index] = { block, line: index - from };
+                }
+            }
+        }
+        return { language, theme, blocks, resets };
+    };
+    const documents = { old: build('old'), new: build('new') };
+    return {
+        documents,
+        locate(side, index) {
+            return Number.isInteger(index) && index >= 0 ? locations[side][index] : undefined;
+        }
+    };
+}

package/src/diff-wordmarks.ts

@@ -0,0 +1,31 @@
+import { diffRows, wordChanges, type DiffDocument, type DiffWordRange } from '@adecore/merge';
+
+export function wordMarks(document: DiffDocument): {
+    old: Map<number, readonly (readonly [number, number])[]>;
+    new: Map<number, readonly (readonly [number, number])[]>;
+} {
+    const marks = { old: new Map<number, readonly (readonly [number, number])[]>(), new: new Map<number, readonly (readonly [number, number])[]>() };
+    let pairs = 0;
+    let characters = 0;
+    for (const row of diffRows(document, 'split')) {
+        if (row.kind !== 'line' || row.change !== 'pair' || document.hunks[row.hunk!]!.coarse) {
+            continue;
+        }
+        const old = document.sides.old[row.old!.index]!;
+        const fresh = document.sides.new[row.new!.index]!;
+        characters += old.length + fresh.length;
+        // Per-pair limits alone still allow thousands of expensive word diffs during one mount.
+        if (++pairs > 1000 || characters > 100000) {
+            break;
+        }
+        const words = wordChanges(old, fresh);
+        if (words === null) {
+            continue;
+        }
+        const ranges = (text: string, ranges: readonly DiffWordRange[]): Array<readonly [number, number]> =>
+            ranges.filter((range) => !document.ignoreWhitespace || /\S/.test(text.slice(range.from, range.to))).map((range) => [range.from, range.to]);
+        marks.old.set(row.old!.index, ranges(old, words.old));
+        marks.new.set(row.new!.index, ranges(fresh, words.new));
+    }
+    return marks;
+}

package/src/doc-comment-model.ts

@@ -0,0 +1,336 @@
+/*
+ * A documentation comment read the way a person reads it: a description and its tags. The text is
+ * Markdown by the time it leaves here. HTML is never passed on; a small, fixed subset is turned into
+ * Markdown and every other tag is dropped or left as text.
+ */
+
+export interface DocTagEntry {
+    /* Canonical: `returns` is `return`, `exception` is `throws`, `arg` and `argument` are `param`. */
+    readonly name: string;
+    /* The type in the tag, as written, without braces. */
+    readonly type: string | null;
+    /* The parameter, variable or class the tag is about. */
+    readonly subject: string | null;
+    /* Markdown. For `example` the code itself. */
+    readonly text: string;
+}
+
+export interface ParsedDocComment {
+    readonly description: string;
+    readonly tags: readonly DocTagEntry[];
+}
+
+/* The prefix of an address that stands for a name a `{@link}` points at, which the view resolves instead of following. */
+export const DOC_LINK_PREFIX = '#doc-link:';
+
+const ALIASES: Readonly<Record<string, string>> = {
+    returns: 'return',
+    exception: 'throws',
+    arg: 'param',
+    argument: 'param',
+    prop: 'property',
+    yields: 'yield',
+    link: 'see'
+};
+
+/* Tags that carry a type before their subject. */
+const TYPED = new Set(['param', 'property', 'return', 'throws', 'var', 'type', 'yield', 'template', 'this']);
+/* Tags whose first word is the thing they are about. */
+const SUBJECT_FIRST = new Set(['param', 'property', 'var', 'template']);
+
+const TAG_START = /^@([A-Za-z][\w-]*)(?::[\w-]+)?[ \t]*(.*)$/;
+const FENCE = /^\s*(```|~~~)/;
+const DASH = /^[—–-][ \t]+/;
+const DANGEROUS =
+    /<(script|style|iframe|object|embed|svg|math|form)\b[\s\S]*?<\/\1\s*>|<\/?(script|style|iframe|object|embed|link|meta|base|svg|math|form|img|video|audio|source|input|button|textarea|select|canvas|frame|frameset)\b[^>]*>/gi;
+const SAFE_SCHEME = /^(https?:|mailto:)/i;
+
+/* Reads a type that starts the text: in braces as JSDoc writes it, or as one word with its brackets as PHPDoc does. */
+function takeType(text: string, braces: boolean): { type: string | null; rest: string } {
+    const trimmed = text.trimStart();
+    if (trimmed.startsWith('{')) {
+        let depth = 0;
+        for (let i = 0; i < trimmed.length; i++) {
+            depth += trimmed[i] === '{' ? 1 : trimmed[i] === '}' ? -1 : 0;
+            if (depth === 0) {
+                return { type: trimmed.slice(1, i).trim(), rest: trimmed.slice(i + 1).trimStart() };
+            }
+        }
+        return { type: null, rest: trimmed };
+    }
+    if (braces || /^[$&.]/.test(trimmed)) {
+        return { type: null, rest: trimmed };
+    }
+    let depth = 0;
+    let end = 0;
+    for (; end < trimmed.length; end++) {
+        const character = trimmed[end]!;
+        if ('<([{'.includes(character)) {
+            depth++;
+        } else if ('>)]}'.includes(character)) {
+            depth--;
+        } else if (/\s/.test(character) && depth <= 0) {
+            break;
+        }
+    }
+    return { type: end === 0 ? null : trimmed.slice(0, end), rest: trimmed.slice(end).trimStart() };
+}
+
+/* The first word of a tag's text: a name with its sigils and the `[name=default]` form of JSDoc. */
+function takeSubject(text: string): { subject: string | null; rest: string } {
+    const optional = /^\[([^\]]+)\]\s*/.exec(text);
+    if (optional !== null) {
+        return { subject: optional[1]!, rest: text.slice(optional[0].length) };
+    }
+    const word = /^(?:\.\.\.|&)?[$\w.\\:-]+/.exec(text);
+    if (word === null) {
+        return { subject: null, rest: text };
+    }
+    return { subject: word[0], rest: text.slice(word[0].length).trimStart() };
+}
+
+/* A comment's lines cut where a tag starts at the beginning of a line, outside a fenced block. */
+function splitTags(body: string): { description: string; raw: { name: string; text: string }[] } {
+    const description: string[] = [];
+    const raw: { name: string; text: string }[] = [];
+    let fenced = false;
+    for (const line of body.split('\n')) {
+        if (FENCE.test(line)) {
+            fenced = !fenced;
+        }
+        const start = fenced ? null : TAG_START.exec(line.trimStart());
+        if (start !== null) {
+            raw.push({ name: start[1]!.toLowerCase(), text: start[2]! });
+        } else if (raw.length > 0) {
+            raw[raw.length - 1]!.text += `\n${line}`;
+        } else {
+            description.push(line);
+        }
+    }
+    return { description: description.join('\n').trim(), raw };
+}
+
+function entryOf(name: string, text: string, php: boolean): DocTagEntry {
+    let rest = text.trim();
+    let type: string | null = null;
+    let subject: string | null = null;
+    if (TYPED.has(name)) {
+        const taken = name === 'return' && rest.startsWith('$this') ? { type: '$this', rest: rest.slice(5).trimStart() } : takeType(rest, !php);
+        type = taken.type;
+        rest = taken.rest;
+        // A type that stands alone is the whole text of a tag that has no subject.
+        if (SUBJECT_FIRST.has(name) || (name === 'throws' && type === null)) {
+            const word = takeSubject(rest);
+            subject = word.subject;
+            rest = word.rest;
+        }
+    } else if (name === 'see' && !rest.startsWith('{')) {
+        const target = /^\S+/.exec(rest);
+        subject = target === null ? null : target[0];
+        rest = target === null ? rest : rest.slice(target[0].length).trimStart();
+    }
+    if (name === 'throws' && type === null && subject !== null) {
+        type = subject;
+        subject = null;
+    }
+    return { name, type, subject, text: rest.replace(DASH, '').trim() };
+}
+
+/* Text outside backtick code, which is the only text HTML and inline tags are read in. */
+function outsideCode(markdown: string, convert: (text: string) => string): string {
+    return markdown
+        .split(/(```[\s\S]*?```|~~~[\s\S]*?~~~|`[^`\n]*`)/)
+        .map((part, index) => (index % 2 === 1 ? part : convert(part)))
+        .join('');
+}
+
+const ENTITIES: Readonly<Record<string, string>> = { lt: '<', gt: '>', amp: '&', quot: '"', apos: "'", nbsp: ' ', ndash: '-', mdash: '-', hellip: '...' };
+
+/* Named entities of the small set docblocks use, and numeric ones; anything else stays as written. */
+export function decodeEntities(text: string): string {
+    return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (match, code: string) => {
+        if (code[0] === '#') {
+            const point = code[1]!.toLowerCase() === 'x' ? Number.parseInt(code.slice(2), 16) : Number.parseInt(code.slice(1), 10);
+            return Number.isFinite(point) && point > 0 && point <= 0x10ffff ? String.fromCodePoint(point) : match;
+        }
+        return ENTITIES[code.toLowerCase()] ?? match;
+    });
+}
+
+function dedent(text: string): string {
+    const lines = text.replace(/^\n+|\s+$/g, '').split('\n');
+    const indents = lines.filter((line) => line.trim() !== '').map((line) => line.length - line.trimStart().length);
+    const common = indents.length === 0 ? 0 : Math.min(...indents);
+    return lines.map((line) => line.slice(common)).join('\n');
+}
+
+function fenced(body: string): string {
+    return `\n\n\`\`\`\n${dedent(decodeEntities(stripTags(body)))}\n\`\`\`\n\n`;
+}
+
+function stripTags(html: string): string {
+    return html.replace(/<\/?[a-zA-Z][^>]*>/g, '');
+}
+
+/* The address of a link when it is one a reader may follow; null for everything else, such as a script address. */
+export function safeAddress(address: string): string | null {
+    const trimmed = decodeEntities(address.trim());
+    return SAFE_SCHEME.test(trimmed) || trimmed.startsWith(DOC_LINK_PREFIX) ? trimmed.replace(/\s/g, '%20').replace(/\(/g, '%28').replace(/\)/g, '%29') : null;
+}
+
+/*
+ * The HTML subset docblocks use, as Markdown: paragraphs and breaks, bold, italic, code, preformatted
+ * blocks, links to http, https and mailto, lists, headings and entities. Dangerous elements go with their
+ * content, attributes are never copied except a safe `href`, and a tag that is not in the subset is left
+ * as the text it was, which the view draws escaped.
+ */
+export function htmlToMarkdown(source: string): string {
+    if (!source.includes('<') && !source.includes('&')) {
+        return source;
+    }
+    const lists: ('ul' | 'ol')[] = [];
+    const counters: number[] = [];
+    let anchor: string | null = null;
+    const blocks = source
+        .replace(/<pre\b[^>]*>([\s\S]*?)<\/pre\s*>/gi, (_match, body: string) => fenced(body))
+        .replace(/<code>([^<]*\n[^<]*)<\/code>/gi, (_match, body: string) => fenced(body));
+    const converted = outsideCode(blocks, (text) =>
+        text
+            .replace(DANGEROUS, '')
+            .replace(
+                /<(\/?)(p|br|b|strong|i|em|u|code|tt|kbd|samp|var|a|ul|ol|li|h[1-6]|blockquote|hr|div|span|dl|dt|dd|sup|sub|small|center)\b([^>]*?)(\/?)>/gi,
+                (_match, close: string, tag: string, attributes: string) => {
+                    const closing = close === '/';
+                    switch (tag.toLowerCase()) {
+                        case 'p':
+                        case 'div':
+                        case 'dl':
+                            return '\n\n';
+                        case 'br':
+                            return '\n';
+                        case 'hr':
+                            return '\n\n---\n\n';
+                        case 'b':
+                        case 'strong':
+                            return '**';
+                        case 'i':
+                        case 'em':
+                        case 'var':
+                            return '*';
+                        case 'code':
+                        case 'tt':
+                        case 'kbd':
+                        case 'samp':
+                            return '`';
+                        case 'a': {
+                            if (closing) {
+                                const target = anchor;
+                                anchor = null;
+                                return target === null ? '' : `](${target})`;
+                            }
+                            const href = /\bhref\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attributes);
+                            anchor = href === null ? null : safeAddress(href[1] ?? href[2] ?? href[3] ?? '');
+                            return anchor === null ? '' : '[';
+                        }
+                        case 'ul':
+                        case 'ol':
+                            if (closing) {
+                                lists.pop();
+                                counters.pop();
+                            } else {
+                                lists.push(tag.toLowerCase() as 'ul' | 'ol');
+                                counters.push(0);
+                            }
+                            return '\n';
+                        case 'li': {
+                            if (closing) {
+                                return '';
+                            }
+                            const depth = Math.max(0, lists.length - 1);
+                            const marker = lists.at(-1) === 'ol' ? `${(counters[depth] = (counters[depth] ?? 0) + 1)}.` : '-';
+                            return `\n${'  '.repeat(depth)}${marker} `;
+                        }
+                        case 'blockquote':
+                            return closing ? '\n\n' : '\n\n> ';
+                        case 'dt':
+                            return closing ? '**\n\n' : '\n\n**';
+                        case 'dd':
+                            return '\n\n';
+                        default:
+                            if (/^h[1-6]$/i.test(tag)) {
+                                return closing ? '\n\n' : `\n\n${'#'.repeat(Number(tag[1]))} `;
+                            }
+                            return '';
+                    }
+                }
+            )
+    );
+    // Entities last, so `&lt;b&gt;` stays the text it spells and is not read as a tag above.
+    return outsideCode(converted, decodeEntities).replace(/\n{3,}/g, '\n\n');
+}
+
+/*
+ * Inline `{@link Name}`, `{@link Name label}`, `{@link Name|label}`, the `linkcode` and `linkplain` forms, `{@see Name}`
+ * and `{@code text}`. A name becomes a link the view resolves; an address becomes a link to it.
+ */
+export function inlineTagsToMarkdown(markdown: string): string {
+    return outsideCode(markdown, (text) =>
+        text
+            .replace(/\{@(?:link|linkcode|linkplain|see)\s+([^}\s|]+)(?:\s*[|\s]\s*([^}]+?))?\s*\}/g, (_match, target: string, label: string | undefined) => {
+                const address = /^https?:\/\//i.test(target) ? safeAddress(target) : `${DOC_LINK_PREFIX}${encodeURIComponent(target)}`;
+                const shown = label ?? target;
+                return address === null ? `\`${shown}\`` : `[${label === undefined ? `\`${shown}\`` : shown}](${address})`;
+            })
+            .replace(/\{@code\s+([^}]*)\}/g, (_match, code: string) => `\`${code.trim()}\``)
+            .replace(/\{@inheritDoc\}/g, '')
+    );
+}
+
+/* An example's lines without the caption, and without the indentation they share; the text after the tag on its own line is not indented like the rest. */
+function exampleOf(text: string): string {
+    const code = text.replace(/^\s*<caption>[\s\S]*?<\/caption>[ \t]*\n?/i, '');
+    const [head = '', ...tail] = code.split('\n');
+    return head.trim() === '' ? dedent(code) : [head.trim(), dedent(tail.join('\n'))].join('\n').trim();
+}
+
+function proseOf(text: string): string {
+    return inlineTagsToMarkdown(htmlToMarkdown(text)).trim();
+}
+
+/* Reads the body of a documentation comment, as `findDocComments` returns it. `php` lets a type stand without braces. */
+export function parseDocComment(body: string, options: { php?: boolean } = {}): ParsedDocComment {
+    const php = options.php === true;
+    const { description, raw } = splitTags(body);
+    const tags = raw.map(({ name, text }) => {
+        const bare = name.replace(/^(?:psalm|phpstan)-/, '');
+        const canonical = ALIASES[bare] ?? bare;
+        const entry = entryOf(canonical, text, php);
+        // An example is code: it keeps its lines and gets no prose treatment, only its caption removed.
+        if (canonical === 'example') {
+            return { ...entry, text: exampleOf(text) };
+        }
+        return { ...entry, text: proseOf(entry.text) };
+    });
+    return { description: proseOf(description), tags };
+}
+
+/* Tags in the order a reader looks for them; every other tag follows in the order it was written. */
+const ORDER = ['deprecated', 'template', 'param', 'property', 'type', 'var', 'return', 'yield', 'throws', 'see', 'example', 'since', 'version', 'author'];
+
+export interface DocTagSection {
+    readonly name: string;
+    readonly tags: readonly DocTagEntry[];
+}
+
+/* The tags gathered by name, so a list of parameters is one section, in reading order. */
+export function sectionsOf(tags: readonly DocTagEntry[]): DocTagSection[] {
+    const byName = new Map<string, DocTagEntry[]>();
+    for (const tag of tags) {
+        byName.set(tag.name, [...(byName.get(tag.name) ?? []), tag]);
+    }
+    const rank = (name: string): number => {
+        const index = ORDER.indexOf(name);
+        return index === -1 ? ORDER.length : index;
+    };
+    return [...byName].map(([name, entries]) => ({ name, tags: entries })).sort((left, right) => rank(left.name) - rank(right.name));
+}

package/src/editor-language.ts

@@ -1,6 +1,7 @@
 import { KEYMAP, type Keymap } from '@adecore/editor/keymap';
 import type { Editor, EditorPosition } from '@adecore/editor';
 import type { Location } from '@adecore/lsp';
+import { CallHierarchyFeature } from './call-hierarchy.ts';
 import { CodeActionsFeature } from './code-actions.ts';
 import { CodeVisionFeature } from './code-vision.ts';
 import { CompletionFeature } from './completion.ts';
@@ -8,6 +9,7 @@ import { ContextMenuFeature } from './context-menu.ts';
 import { DefinitionLinkFeature } from './definition-link.ts';
 import { DiagnosticsFeature } from './diagnostics.ts';
 import { FoldingFeature } from './folding.ts';
+import { FormatOnTypeFeature } from './format-on-type.ts';
 import { HighlightsFeature } from './highlights.ts';
 import { HistoryFeature } from './history.ts';
 import { HoverFeature } from './hover.ts';
@@ -16,18 +18,25 @@ import { PeekFeature } from './peek.ts';
 import { PickFeature } from './pick.ts';
 import { SymbolPickerFeature } from './symbol-picker.ts';
 import { RenameFeature } from './rename.ts';
+import { RenderedDocsFeature } from './rendered-docs.ts';
 import { shortcutsOf } from './shortcut-keys.ts';
 import { createPopupStore } from './popups.ts';
 import { realTimers, type Timers } from './timers.ts';
 import { InlayHintsFeature } from './inlay-hints.ts';
 import { SelectionRangesFeature } from './selection-ranges.ts';
-import { SemanticTokensFeature } from './semantic-tokens.ts';
+import { SemanticTokensFeature, type SemanticTokensOptions } from './semantic-tokens.ts';
 import { SignatureFeature } from './signature.ts';
 import { SnippetFeature } from './snippet-session.ts';
 import { SymbolsFeature } from './symbols.ts';
 import type { Place } from './navigation-history.ts';
 import type { LanguageDocumentHandle, ProjectLanguage } from './project-language.ts';
 
+/* What an app tunes about the features of one editor. */
+export interface EditorLanguageOptions {
+    /* Where a document counts as large for semantic tokens. */
+    semanticTokens?: SemanticTokensOptions;
+}
+
 /*
  * The one place that connects an editor to the language servers: it opens the file's document for
  * the editor and lets go of it again. Every language feature of the editor hangs off this object.
@@ -44,6 +53,7 @@ export class EditorLanguage {
     readonly popups = createPopupStore();
     readonly diagnostics: DiagnosticsFeature;
     readonly hover: HoverFeature;
+    readonly inlayHints: InlayHintsFeature;
     readonly completion: CompletionFeature;
     readonly signature: SignatureFeature;
     readonly snippets: SnippetFeature;
@@ -53,16 +63,19 @@ export class EditorLanguage {
     readonly rename: RenameFeature;
     readonly navigation: NavigationFeature;
     readonly peek: PeekFeature;
+    readonly callHierarchy: CallHierarchyFeature;
     readonly symbolPicker: SymbolPickerFeature;
     readonly contextMenu: ContextMenuFeature;
     readonly history: HistoryFeature;
     readonly definitionLink: DefinitionLinkFeature;
     readonly symbols: SymbolsFeature;
     readonly codeVision: CodeVisionFeature;
+    readonly formatOnType: FormatOnTypeFeature;
+    readonly renderedDocs: RenderedDocsFeature;
     private readonly disposers: Array<() => void> = [];
     private disposed = false;
 
-    constructor(project: ProjectLanguage, editor: Editor, uri: string, languageId: string, timers: Timers = realTimers) {
+    constructor(project: ProjectLanguage, editor: Editor, uri: string, languageId: string, timers: Timers = realTimers, options: EditorLanguageOptions = {}) {
         this.editor = editor;
         this.apple = project.host.apple ?? false;
         this.keymap = project.host.keymap ?? KEYMAP;
@@ -74,22 +87,25 @@ export class EditorLanguage {
         this.diagnostics = new DiagnosticsFeature(this);
         this.hover = new HoverFeature(this, timers);
         this.completion = new CompletionFeature(this, timers);
-        this.snippets = new SnippetFeature(this);
+        this.snippets = new SnippetFeature(this, timers);
         this.signature = new SignatureFeature(this, timers);
         this.highlights = new HighlightsFeature(this, timers);
         this.symbols = new SymbolsFeature(this, timers);
         new SelectionRangesFeature(this);
-        new SemanticTokensFeature(this, timers);
-        new InlayHintsFeature(this, timers);
+        new SemanticTokensFeature(this, timers, options.semanticTokens);
+        this.inlayHints = new InlayHintsFeature(this, timers);
         this.codeActions = new CodeActionsFeature(this, timers);
         this.rename = new RenameFeature(this);
         this.navigation = new NavigationFeature(this);
         this.peek = new PeekFeature(this);
+        this.callHierarchy = new CallHierarchyFeature(this, timers);
         this.symbolPicker = new SymbolPickerFeature(this);
         this.contextMenu = new ContextMenuFeature(this);
         this.history = new HistoryFeature(this);
         this.definitionLink = new DefinitionLinkFeature(this);
         this.codeVision = new CodeVisionFeature(this, (listener) => this.symbols.onResult(listener), timers);
+        this.formatOnType = new FormatOnTypeFeature(this);
+        this.renderedDocs = new RenderedDocsFeature(this, timers);
         new FoldingFeature(this, (listener) => this.symbols.onResult(listener), timers);
         this.placeOpenedCaret(editor.getCaret());
         this.onDispose(editor.onCaret((position) => this.placeOpenedCaret(position)));

package/src/editor-react.css

@@ -17,6 +17,36 @@
     color: var(--accent);
     text-decoration: underline;
 }
+/* Documentation drawn in place of a comment: lists and quotes that the base layer strips of their marks. */
+.adecore-rendered-doc ul,
+.adecore-rendered-doc ol {
+    margin: 4px 0;
+    padding-inline-start: 20px;
+}
+.adecore-rendered-doc ul {
+    list-style: disc;
+}
+.adecore-rendered-doc ol {
+    list-style: decimal;
+}
+.adecore-rendered-doc blockquote {
+    margin: 4px 0;
+    padding-inline-start: 8px;
+    border-inline-start: 2px solid var(--border);
+}
+.adecore-rendered-doc :not(pre) > code {
+    font-family: var(--font-mono);
+}
+.adecore-rendered-doc h1,
+.adecore-rendered-doc h2,
+.adecore-rendered-doc h3,
+.adecore-rendered-doc h4,
+.adecore-rendered-doc h5,
+.adecore-rendered-doc h6 {
+    margin: 4px 0;
+    font-size: inherit;
+    font-weight: 600;
+}
 .adecore-editor-find {
     display: flex;
     flex-direction: column;
@@ -41,3 +71,52 @@
 .adecore-editor-find output {
     font-variant-numeric: tabular-nums;
 }
+
+.adecore-editor-diff-gap {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 4px 8px;
+    font-family: var(--font-sans);
+    color: var(--text-muted);
+    background: var(--surface-raised);
+}
+.adecore-editor-diff-no-newline {
+    padding-inline: 8px;
+    color: var(--text-muted);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+}
+
+.adecore-editor-diff .se-viewport {
+    overscroll-behavior-y: auto;
+}
+
+.adecore-editor-diff[data-scroll='false'] .se-viewport {
+    overflow-y: hidden;
+}
+
+.adecore-editor-diff-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-height: 0;
+}
+.adecore-editor-diff-side {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+}
+.adecore-editor-diff-side + .adecore-editor-diff-side {
+    border-inline-start: 1px solid var(--border);
+}
+.adecore-editor-diff-surface {
+    position: absolute;
+    inset: 0;
+}
+.adecore-editor-diff-split .se-viewport {
+    scrollbar-gutter: stable;
+}
+.adecore-editor-diff-filler {
+    background: repeating-linear-gradient(135deg, transparent 0 6px, var(--editor-hatch) 6px 7px);
+    pointer-events: none;
+}