@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/viewer/index.ts

@@ -0,0 +1,321 @@
+import { reactive, untrack } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import copy from '~/components/copy';
+import icon from '~/components/icon';
+import scrollbar from '~/modifiers/scrollbar';
+import { observeSize } from '~/shared/resize';
+import { minimap, type Source } from '../code/minimap';
+import { languageFor, type Language, type Token } from '../code/syntax';
+import { hidden, outline, type Line } from './model';
+import chevron from '@esportsplus/ui/svg/chevron-down.svg';
+import './scss/index.scss';
+
+
+type CodeViewerAttributes = Attributes & {
+    // A copy button in the header, writing the exact source.
+    copy?: boolean;
+    // Shown in the header; picks the language when 'language' is left out.
+    filename?: string;
+    fold?: boolean;
+    language?: Language;
+    lineNumbers?: boolean;
+    // An overview of the whole source beside it; click, drag or scroll it to move through the code.
+    minimap?: boolean;
+    // Exact source text; a getter keeps following it.
+    value: string | (() => string);
+    // Marks each space and tab.
+    whitespace?: boolean;
+    wrap?: boolean;
+};
+
+
+const NO_BREAKS: readonly number[] = [];
+
+const TOKEN_COLORS: readonly Token['kind'][] = [
+    'color',
+    'comment',
+    'function',
+    'keyword',
+    'number',
+    'operator',
+    'property',
+    'regexp',
+    'selector',
+    'string',
+    'tag',
+    'type',
+    'variable'
+];
+
+
+function pixels(value: string) {
+    return parseFloat(value) || 0;
+}
+
+function range(index: number, end: number) {
+    return end - index === 2 ? `line ${end}` : `lines ${index + 2}–${end}`;
+}
+
+
+export default component(
+    function(this: { attributes?: Partial<CodeViewerAttributes> } | void, input: CodeViewerAttributes) {
+        let {
+                copy: copyable = false,
+                filename,
+                fold = true,
+                language,
+                lineNumbers = true,
+                minimap: overview = false,
+                value,
+                whitespace = false,
+                wrap = false,
+                ...attributes
+            } = untrack(() => ({ ...this?.attributes, ...input })) as CodeViewerAttributes,
+            current = () => {
+                let next = input.value ?? this?.attributes?.value;
+
+                return (typeof next === 'function' ? next() : next) ?? '';
+            },
+            frame = 0,
+            lexer = language ?? languageFor(filename),
+            lines: Line[] = [],
+            palette: Record<string, string> = {},
+            rail: HTMLElement | undefined,
+            scroller: HTMLElement | undefined,
+            source: Source | null = null,
+            stale = false;
+
+        let map = overview && minimap({
+            focus: () => scroller?.focus({ preventScroll: true }),
+            name: 'code-viewer',
+            scroll: (top, relative) => {
+                if (scroller) {
+                    scroller.scrollTop = relative ? scroller.scrollTop + top : top;
+                }
+            }
+        });
+
+        let size = observeSize((_, element) => {
+            scroller = element;
+            update(true);
+        });
+
+        // Line geometry and token colors, read from the rendered lines; folded lines take no height.
+        function measure() {
+            let content = scroller?.firstElementChild as HTMLElement | null,
+                elements = content?.children;
+
+            if (!map || !content || !elements?.length) {
+                source = null;
+                return;
+            }
+
+            let computed = getComputedStyle(content),
+                fallback = computed.getPropertyValue('--color').trim() || 'currentColor',
+                heights: number[] = [],
+                lineHeight = pixels(getComputedStyle(elements[0]).lineHeight) || 20,
+                tops: number[] = [];
+
+            for (let i = 0, n = elements.length; i < n; i++) {
+                let element = elements[i] as HTMLElement;
+
+                if (element.hidden) {
+                    heights.push(0);
+                    tops.push(i ? tops[i - 1] + heights[i - 1] : 0);
+                }
+                else {
+                    heights.push(element.offsetHeight);
+                    tops.push(element.offsetTop);
+                }
+            }
+
+            palette = {};
+
+            for (let i = 0, n = TOKEN_COLORS.length; i < n; i++) {
+                let kind = TOKEN_COLORS[i];
+
+                palette[kind] = computed.getPropertyValue(`--${kind === 'color' ? 'literal' : kind}-color`).trim() || fallback;
+            }
+
+            source = {
+                breaks: () => NO_BREAKS,
+                count: tops.length,
+                height: content.offsetHeight,
+                indexAt: (y) => {
+                    let hi = tops.length - 1,
+                        lo = 0;
+
+                    while (lo < hi) {
+                        let mid = (lo + hi + 1) >>> 1;
+
+                        if (tops[mid] <= y) {
+                            lo = mid;
+                        }
+                        else {
+                            hi = mid - 1;
+                        }
+                    }
+
+                    return lo;
+                },
+                lineHeight,
+                rows: (index) => Math.max(1, Math.round(heights[index] / lineHeight)),
+                tabSize: pixels(computed.tabSize) || 4,
+                text: (index) => heights[index] ? lines[index].text : '',
+                tokens: (index) => lines[index].tokens,
+                top: (index) => tops[index]
+            };
+            map.invalidate();
+        }
+
+        function render(text: string) {
+            let folded = new Set<number>(),
+                rows: { folded: boolean; hidden: boolean }[];
+
+            lines = outline(text, lexer, { fold, whitespace });
+            rows = lines.map(() => reactive({ folded: false, hidden: false }));
+
+            let foldable = lines.some((line) => line.end !== -1);
+
+            function toggle(index: number) {
+                if (folded.has(index)) {
+                    folded.delete(index);
+                }
+                else {
+                    folded.add(index);
+                }
+
+                let next = hidden(lines, folded);
+
+                for (let i = 0, n = rows.length; i < n; i++) {
+                    rows[i].folded = folded.has(i);
+                    rows[i].hidden = next[i];
+                }
+
+                update(true);
+            }
+
+            update(true);
+
+            return html`
+                <div class='code-viewer-lines' style='--digits: ${Math.max(3, String(lines.length).length)};'>
+                    ${lines.map((line, index) => html`
+                        <div class='code-viewer-line' hidden='${() => rows[index].hidden}'>
+                            ${(lineNumbers || foldable) && html`
+                                <span class='code-viewer-gutter'>
+                                    ${lineNumbers && html`<span class='code-viewer-number'>${index + 1}</span>`}
+                                    ${line.end > index
+                                        ? html`
+                                            <button
+                                                class='code-viewer-fold'
+                                                type='button'
+                                                ${{
+                                                    'aria-expanded': () => String(!rows[index].folded),
+                                                    'aria-label': () => `${rows[index].folded ? 'Unfold' : 'Fold'} ${range(index, line.end)}`,
+                                                    onclick: () => toggle(index)
+                                                }}
+                                            >
+                                                ${icon({ 'aria-hidden': 'true', class: 'code-viewer-fold-icon' }, chevron)}
+                                            </button>
+                                        `
+                                        : html`<span class='code-viewer-fold'></span>`}
+                                </span>
+                            `}
+                            <code class='code-viewer-code' ${{ innerHTML: line.html }}></code>
+                            ${line.end > index && html`
+                                <button
+                                    aria-label='Unfold ${range(index, line.end)}'
+                                    class='code-viewer-placeholder'
+                                    hidden='${() => !rows[index].folded}'
+                                    type='button'
+                                    ${{ onclick: () => toggle(index) }}
+                                >…</button>
+                            `}
+                        </div>
+                    `)}
+                </div>
+            `;
+        }
+
+        // Draws the minimap in the next frame; 'remeasure' rereads the lines first, after a render, fold or resize.
+        function update(remeasure = false) {
+            if (!map) {
+                return;
+            }
+
+            stale ||= remeasure;
+
+            if (frame) {
+                return;
+            }
+
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+
+                if (stale) {
+                    stale = false;
+                    measure();
+                }
+
+                if (map && rail && scroller && source) {
+                    map.paint(
+                        source,
+                        { clientHeight: scroller.clientHeight, scrollHeight: scroller.scrollHeight, scrollTop: scroller.scrollTop },
+                        palette,
+                        rail.clientWidth
+                    );
+                }
+            });
+        }
+
+        return html`
+            <div
+                class='code-viewer ${wrap ? 'code-viewer--wrap' : ''}'
+                ${attributes}
+                ${{
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+                        frame = 0;
+                    }
+                }}
+            >
+                ${(filename || copyable) && html`
+                    <div class='code-viewer-header'>
+                        ${filename && html`<span class='code-viewer-filename' title='${filename}'>${filename}</span>`}
+                        ${copyable && copy({
+                            class: 'code-viewer-copy',
+                            error: 'Copy unavailable. Select and copy the code.',
+                            label: 'Copy code',
+                            success: 'Code copied',
+                            value: current
+                        })}
+                    </div>
+                `}
+                <div class='code-viewer-body'>
+                    <div
+                        aria-label='${filename ?? 'Code'}'
+                        class='code-viewer-scroller'
+                        role='region'
+                        tabindex='0'
+                        ${scrollbar({ hover: true })}
+                        ${size}
+                        ${{ onscroll: () => update() }}
+                    >
+                        ${() => {
+                            let text = current();
+
+                            return untrack(() => render(text));
+                        }}
+                    </div>
+                    ${map && map.template({
+                        onconnect: (element: HTMLElement) => {
+                            rail = element;
+                            update(true);
+                        }
+                    })}
+                </div>
+            </div>
+        `;
+    }
+);
+export type { CodeViewerAttributes };

package/src/components/editor/viewer/model.ts

@@ -0,0 +1,130 @@
+import { EditorDocument } from '../code/document';
+import { structureOf } from '../code/folding';
+import { SyntaxCache, type Language, type Token } from '../code/syntax';
+
+
+// One source line: its markup, text and tokens, and the end (exclusive) of the lines its fold hides, or -1 when it
+// starts none.
+type Line = { end: number; html: string; text: string; tokens: readonly Token[] };
+
+type Options = { fold?: boolean; whitespace?: boolean };
+
+
+// Runs one line may split into before it renders as plain text.
+const BUDGET = 3000;
+
+const ESCAPE = /[&<>"]/;
+
+const ESCAPES: Record<string, string> = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+
+// Longer lines skip highlighting.
+const LONG = 10000;
+
+const NO_TOKENS: readonly Token[] = [];
+
+
+function escape(text: string) {
+    return ESCAPE.test(text) ? text.replace(/[&<>"]/g, (character) => ESCAPES[character]) : text;
+}
+
+function markup(text: string, tokens: readonly Token[], whitespace: boolean) {
+    if (text.length > LONG || tokens.length > BUDGET) {
+        return escape(text);
+    }
+
+    let at = 0,
+        out = '';
+
+    for (let i = 0, n = tokens.length; i < n; i++) {
+        let { from, kind, to } = tokens[i];
+
+        if (to <= at) {
+            continue;
+        }
+
+        from = Math.max(from, at);
+
+        if (from > at) {
+            out += piece(text.slice(at, from), whitespace);
+        }
+
+        out += `<span class="code-viewer-token--${kind}">${piece(text.slice(from, to), whitespace)}</span>`;
+        at = to;
+    }
+
+    return at < text.length ? out + piece(text.slice(at), whitespace) : out;
+}
+
+// Text as markup; visible whitespace marks each space and tab, keeping the character itself for selection and copy.
+function piece(text: string, whitespace: boolean) {
+    if (!whitespace) {
+        return escape(text);
+    }
+
+    let out = '',
+        start = 0;
+
+    for (let i = 0, n = text.length; i < n; i++) {
+        let code = text.charCodeAt(i);
+
+        if (code !== 32 && code !== 9) {
+            continue;
+        }
+
+        out += escape(text.slice(start, i)) + (code === 9 ? '<span class="code-viewer-tab">\t</span>' : '<span class="code-viewer-space"> </span>');
+        start = i + 1;
+    }
+
+    return out + escape(text.slice(start));
+}
+
+
+// Lines with their markup and folds. A line's fold is its largest; bracket folds leave the closing line shown, and a
+// section running to the end of the document hides through the last line.
+const outline = (source: string, language: Language, { fold = true, whitespace = false }: Options = {}): Line[] => {
+    let cache = new SyntaxCache(new EditorDocument(source), language),
+        document = cache.document,
+        lines: Line[] = [];
+
+    for (let i = 0, n = document.lineCount; i < n; i++) {
+        let text = document.lineText(i),
+            tokens = language === 'plain' ? NO_TOKENS : cache.lineTokens(i);
+
+        lines.push({ end: -1, html: markup(text, tokens, whitespace), text, tokens });
+    }
+
+    if (!fold) {
+        return lines;
+    }
+
+    let folds = structureOf(cache).folds;
+
+    for (let i = 0, n = folds.length; i < n; i++) {
+        let range = folds[i],
+            end = range.close === undefined && range.to === document.value.length ? range.endLine : range.endLine - 1,
+            line = lines[range.line - 1];
+
+        if (line.end === -1 && end > range.line) {
+            line.end = end;
+        }
+    }
+
+    return lines;
+};
+
+// Which lines the folded ones hide; a fold inside a folded one stays folded underneath.
+const hidden = (lines: readonly Line[], folded: ReadonlySet<number>) => {
+    let out = new Array<boolean>(lines.length).fill(false);
+
+    for (let i = 0, n = lines.length; i < n; i++) {
+        if (!out[i] && folded.has(i) && lines[i].end > i) {
+            out.fill(true, i + 1, lines[i].end);
+        }
+    }
+
+    return out;
+};
+
+
+export { hidden, outline };
+export type { Line, Options };