@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/editor/markdown/index.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes } from '@esportsplus/template';
+import { EditorDocument } from '../code/document.js';
+import { type MarkdownController, type MarkdownOptions } from './view.js';
+import type { Callbacks } from '../code/view.js';
+import '../../../css-utilities/scrollbar/scss/index.scss';
+import '../code/scss/index.scss';
+import './scss/index.scss';
+type MarkdownEditorAttributes = Attributes & Callbacks & {
+    controller?: (controller: MarkdownController) => void;
+    document?: EditorDocument;
+    options?: MarkdownOptions | (() => MarkdownOptions);
+    value?: string | (() => string);
+};
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<any>;
+    <T extends MarkdownEditorAttributes>(attributes: T): import("@esportsplus/template").Renderable<any>;
+    <T extends import("@esportsplus/template").Renderable<any>>(content: T): import("@esportsplus/template").Renderable<any>;
+    (attributes: MarkdownEditorAttributes, content?: import("@esportsplus/template").Renderable<any>): import("@esportsplus/template").Renderable<any>;
+    bind(context: {
+        attributes?: Partial<MarkdownEditorAttributes> | undefined;
+        content?: import("@esportsplus/template").Renderable<any>;
+    }): any;
+};
+export default _default;
+export type { MarkdownController, MarkdownEditorAttributes, MarkdownOptions };

package/build/components/editor/markdown/index.js

@@ -0,0 +1,33 @@
+import { effect, untrack } from '@esportsplus/reactivity';
+import { component } from '@esportsplus/template';
+import { EditorDocument } from '../code/document.js';
+import { view } from './view.js';
+import '../../../css-utilities/scrollbar/scss/index.scss';
+import '../code/scss/index.scss';
+import './scss/index.scss';
+export default component(function (input) {
+    let { controller: receive, document: supplied, onChange, onSave, onSelection, options, value, ...attributes } = untrack(() => ({ ...this?.attributes, ...input })), current = () => {
+        let next = input.value ?? this?.attributes?.value;
+        return typeof next === 'function' ? next() : next;
+    }, settings = () => {
+        let next = input.options ?? this?.attributes?.options;
+        return { wrap: true, ...(typeof next === 'function' ? next() : next) };
+    }, editor = view(supplied ?? new EditorDocument(untrack(current) ?? ''), { onChange, onSave, onSelection }, receive), last;
+    effect(() => {
+        let next = current();
+        if (next === last) {
+            return;
+        }
+        last = next;
+        untrack(() => {
+            if (next !== undefined && next !== editor.controller.document.value) {
+                editor.controller.setValue(next);
+            }
+        });
+    });
+    effect(() => {
+        let next = settings();
+        untrack(() => editor.controller.setOptions(next, true));
+    });
+    return editor.template(attributes);
+});

package/build/components/editor/markdown/inline.d.ts

@@ -0,0 +1,16 @@
+type Inline = {
+    children?: Inline[];
+    from: number;
+    href?: string;
+    kind: 'code' | 'em' | 'link' | 'strike' | 'strong' | 'text';
+    reference?: boolean;
+    text: string;
+    to: number;
+};
+type References = ReadonlyMap<string, string>;
+declare const clipInline: (tokens: readonly Inline[], from: number, to: number) => Inline[];
+declare const parseInline: (source: string, origin?: number, depth?: number, references?: References) => Inline[];
+declare const referenceLabel: (text: string) => string;
+declare const safeUrl: (value: string, image?: boolean) => string | undefined;
+export { clipInline, parseInline, referenceLabel, safeUrl };
+export type { Inline, References };

package/build/components/editor/markdown/inline.js

@@ -0,0 +1,259 @@
+const ABSOLUTE = /^[a-z][a-z\d+.-]*:/i;
+const ANGLE = /^<([^<>]*)>/;
+const CONTROL = /[\u0000- \u007f\\]/;
+const CONTROL_ESCAPE = /%(?:0[0-9a-f]|1[0-9a-f]|7f)/i;
+const DESTINATION_ESCAPES = /\\([()\\])/g;
+const DESTINATION_TITLE = /\s+["'][\s\S]*$/;
+const ESCAPABLE = /[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/;
+const LINE_BREAKS = /\r\n|\r|\n/g;
+const MAX_DEPTH = 30;
+const NOT_SPACE = /[^ ]/;
+const NO_IMAGE = /^(?:mailto:|tel:)/i;
+const PUNCTUATION = /[\p{P}\p{S}]/u;
+const SAFE_SCHEME = /^(?:https?:|mailto:|tel:)/i;
+const SPACES = /\s+/g;
+const WHITESPACE = /\s/u;
+function balanced(text, at, opening, closing) {
+    let angle = false, depth = 1, quote = '';
+    for (let i = at + 1, n = text.length; i < n; i++) {
+        if (escaped(text, i)) {
+            continue;
+        }
+        if (opening === '(') {
+            if (quote) {
+                if (text[i] === quote) {
+                    quote = '';
+                }
+                continue;
+            }
+            if (angle) {
+                if (text[i] === '>') {
+                    angle = false;
+                }
+                continue;
+            }
+            if ((text[i] === '"' || text[i] === "'") && WHITESPACE.test(text[i - 1] ?? ' ')) {
+                quote = text[i];
+                continue;
+            }
+            if (text[i] === '<') {
+                angle = true;
+                continue;
+            }
+        }
+        else if (text[i] === '`') {
+            let end = codeEnd(text, i, run(text, i));
+            if (end >= 0) {
+                i = end + run(text, end) - 1;
+                continue;
+            }
+        }
+        if (text[i] === opening) {
+            depth++;
+        }
+        else if (text[i] === closing && --depth === 0) {
+            return i;
+        }
+    }
+    return -1;
+}
+function codeEnd(text, at, length) {
+    for (let i = at + length, n = text.length; i < n; i++) {
+        if (text[i] !== '`') {
+            continue;
+        }
+        let count = run(text, i);
+        if (count === length) {
+            return i;
+        }
+        i += count - 1;
+    }
+    return -1;
+}
+function delimiterEnd(text, at, length, width) {
+    let character = text[at], nested = [];
+    for (let i = at + width, n = text.length; i < n; i++) {
+        if (escaped(text, i)) {
+            continue;
+        }
+        if (text[i] === '`') {
+            let end = codeEnd(text, i, run(text, i));
+            if (end >= 0) {
+                i = end + run(text, end) - 1;
+                continue;
+            }
+        }
+        if (text[i] !== character) {
+            continue;
+        }
+        let consumed = 0, count = run(text, i), flank = flanking(text, i, count), remaining = count;
+        if (flank.close) {
+            while (nested.length && remaining >= nested[nested.length - 1]) {
+                let size = nested.pop();
+                consumed += size;
+                remaining -= size;
+            }
+            let odd = character !== '~' &&
+                (flank.open || flanking(text, at, length).close) &&
+                (length + count) % 3 === 0 &&
+                (length % 3 !== 0 || count % 3 !== 0);
+            if (!nested.length && remaining >= width && !odd) {
+                return i + consumed;
+            }
+        }
+        if (flank.open && (!flank.close || nested.length || remaining < width)) {
+            nested.push(character === '~' ? 2 : count);
+        }
+        i += count - 1;
+    }
+    return -1;
+}
+function destination(text) {
+    let angle = ANGLE.exec(text), url = angle ? angle[1] : text.replace(DESTINATION_TITLE, '');
+    return safeUrl(url.replace(DESTINATION_ESCAPES, '$1'));
+}
+function escaped(text, at) {
+    let count = 0;
+    while (text[--at] === '\\') {
+        count++;
+    }
+    return count % 2 === 1;
+}
+function flanking(text, at, length) {
+    let after = text[at + length] ?? ' ', before = text[at - 1] ?? ' ', afterPunctuation = PUNCTUATION.test(after), afterSpace = WHITESPACE.test(after), beforePunctuation = PUNCTUATION.test(before), beforeSpace = WHITESPACE.test(before), left = !afterSpace && (!afterPunctuation || beforeSpace || beforePunctuation), right = !beforeSpace && (!beforePunctuation || afterSpace || afterPunctuation);
+    if (text[at] === '_') {
+        return { close: right && (!left || afterPunctuation), open: left && (!right || beforePunctuation) };
+    }
+    return { close: right, open: left };
+}
+function run(text, at) {
+    let end = at + 1;
+    while (text[end] === text[at]) {
+        end++;
+    }
+    return end - at;
+}
+const clipInline = (tokens, from, to) => {
+    let out = [];
+    for (let i = 0, n = tokens.length; i < n; i++) {
+        let token = tokens[i];
+        if (token.from >= to || token.to <= from) {
+            continue;
+        }
+        let end = Math.min(to, token.to), start = Math.max(from, token.from);
+        out.push({
+            ...token,
+            children: token.children ? clipInline(token.children, start, end) : undefined,
+            from: start,
+            text: token.text.slice(start - token.from, end - token.from),
+            to: end
+        });
+    }
+    return out;
+};
+const parseInline = (source, origin = 0, depth = 0, references = new Map()) => {
+    if (depth > MAX_DEPTH) {
+        return [{ from: origin, kind: 'text', text: source, to: origin + source.length }];
+    }
+    let i = 0, result = [], start = 0;
+    let plain = (end) => {
+        if (end > start) {
+            result.push({ from: origin + start, kind: 'text', text: source.slice(start, end), to: origin + end });
+        }
+    };
+    while (i < source.length) {
+        if (source[i] === '\\' && ESCAPABLE.test(source[i + 1] ?? '')) {
+            plain(i);
+            result.push({ from: origin + i + 1, kind: 'text', text: source[i + 1], to: origin + i + 2 });
+            i += 2;
+            start = i;
+            continue;
+        }
+        if (source[i] === '`') {
+            let count = run(source, i), end = codeEnd(source, i, count);
+            if (end < 0) {
+                i += count;
+                continue;
+            }
+            let text = source.slice(i + count, end).replace(LINE_BREAKS, ' ');
+            if (text.startsWith(' ') && text.endsWith(' ') && NOT_SPACE.test(text)) {
+                text = text.slice(1, -1);
+            }
+            plain(i);
+            result.push({ from: origin + i + count, kind: 'code', text, to: origin + end });
+            i = end + count;
+            start = i;
+            continue;
+        }
+        if (source[i] === '[' && source[i - 1] !== '!') {
+            let close = balanced(source, i, '[', ']'), end = -1, href, reference = false;
+            if (close >= 0 && source[close + 1] === '(') {
+                end = balanced(source, close + 1, '(', ')');
+                if (end >= 0) {
+                    href = destination(source.slice(close + 2, end).trim());
+                }
+            }
+            else if (close >= 0) {
+                let label = source[close + 1] === '[' ? balanced(source, close + 1, '[', ']') : -1, name = label >= 0 ? source.slice(close + 2, label) || source.slice(i + 1, close) : source.slice(i + 1, close), resolved = references.get(referenceLabel(name));
+                if (resolved !== undefined) {
+                    end = label >= 0 ? label : close;
+                    href = safeUrl(resolved);
+                    reference = true;
+                }
+            }
+            if (end >= 0) {
+                let from = reference ? i : i + 1, to = reference ? end + 1 : close, text = source.slice(from, to);
+                plain(i);
+                result.push({
+                    children: reference ? undefined : parseInline(text, origin + from, depth + 1, references),
+                    from: origin + from,
+                    href,
+                    kind: 'link',
+                    reference,
+                    text,
+                    to: origin + to
+                });
+                i = end + 1;
+                start = i;
+                continue;
+            }
+        }
+        if (source[i] === '*' || source[i] === '_' || source.startsWith('~~', i)) {
+            let character = source[i], count = run(source, i), width = character === '~' ? 2 : count % 2 === 1 ? 1 : 2, end = flanking(source, i, count).open ? delimiterEnd(source, i, count, width) : -1;
+            if (end > i + width) {
+                let text = source.slice(i + width, end);
+                plain(i);
+                result.push({
+                    children: parseInline(text, origin + i + width, depth + 1, references),
+                    from: origin + i + width,
+                    kind: character === '~' ? 'strike' : width === 2 ? 'strong' : 'em',
+                    text,
+                    to: origin + end
+                });
+                i = end + width;
+                start = i;
+                continue;
+            }
+        }
+        i++;
+    }
+    plain(source.length);
+    return result;
+};
+const referenceLabel = (text) => {
+    return text.trim().replace(SPACES, ' ').toLocaleLowerCase();
+};
+const safeUrl = (value, image = false) => {
+    value = value.trim();
+    if (CONTROL.test(value) || CONTROL_ESCAPE.test(value)) {
+        return undefined;
+    }
+    if (SAFE_SCHEME.test(value)) {
+        return image && NO_IMAGE.test(value) ? undefined : value;
+    }
+    if (ABSOLUTE.test(value) || value.startsWith('//')) {
+        return undefined;
+    }
+    return value;
+};
+export { clipInline, parseInline, referenceLabel, safeUrl };

package/build/components/editor/markdown/layout.d.ts

@@ -0,0 +1,63 @@
+import type { FoldRange } from '../code/folding.js';
+import type { MarkdownBlock, Row } from './model.js';
+type Cache = {
+    folded: WeakMap<MarkdownBlock, Unit>;
+    plain: WeakMap<MarkdownBlock, Unit[]>;
+    raw: WeakMap<MarkdownBlock, Unit[]>;
+};
+type Metrics = {
+    charWidth: number;
+    fontSize: number;
+    lineHeight: number;
+    quoteIndent: number;
+    width: number;
+};
+type Unit = {
+    active?: boolean;
+    block: MarkdownBlock;
+    continuation: boolean;
+    continues: boolean;
+    estimate: number;
+    estimated: number;
+    fold?: FoldRange;
+    height: number;
+    measured: number;
+    raw: boolean;
+    rows?: Row[];
+};
+type Window = {
+    end: number;
+    start: number;
+};
+declare const SCALED_LINE = 1.3;
+declare const SLICE_LINES = 32;
+declare const WINDOW_LIMIT = 120;
+declare const arrange: (blocks: readonly MarkdownBlock[], text: string, folds: readonly FoldRange[], cache: Cache, active: {
+    first: number;
+    last: number;
+    unit: Unit;
+} | null, raw: ((index: number) => boolean) | null) => Unit[];
+declare const cache: () => Cache;
+declare const headingScale: (level?: number) => number;
+declare const unitStart: (unit: Unit) => number;
+declare class MarkdownLayout {
+    units: Unit[];
+    private dirty;
+    private generation;
+    private metrics;
+    private text;
+    private tops;
+    private estimate;
+    private index;
+    get total(): number;
+    at(y: number): number;
+    configure(metrics: Metrics): boolean;
+    height(unit: Unit): number;
+    indexOf(offset: number): number;
+    measure(unit: Unit, height: number): boolean;
+    set(units: Unit[], text: string): void;
+    top(index: number): number;
+    window(y: number, height: number, overscan?: number): Window;
+}
+export { arrange, cache, headingScale, MarkdownLayout, SCALED_LINE, SLICE_LINES, unitStart, WINDOW_LIMIT };
+export type { Unit };

package/build/components/editor/markdown/layout.js

@@ -0,0 +1,252 @@
+const OVERSCAN = 240;
+const SCALES = [1, 1.7, 1.45, 1.25, 1.1, 1, 0.95];
+const SCALED_LINE = 1.3;
+const SLICE_CHARACTERS = 8192;
+const SLICE_LINES = 32;
+const WINDOW_LIMIT = 120;
+function create(block, rows, continuation = false, continues = false, raw = false) {
+    return { block, continuation, continues, estimate: 0, estimated: -1, height: 0, measured: -1, raw, rows };
+}
+function relative(block, row) {
+    let base = block.from;
+    return { contentFrom: row.contentFrom - base, contentTo: row.contentTo - base, from: row.from - base, to: row.to - base };
+}
+function slice(block, text, raw) {
+    if (block.kind === 'frontmatter' ||
+        block.kind === 'html' ||
+        (block.contentTo - block.contentFrom <= SLICE_CHARACTERS && (block.lines?.length ?? 0) <= SLICE_LINES)) {
+        return [create(block, undefined, false, false, raw)];
+    }
+    let code = block.kind === 'code' || block.kind === 'fence', lines = block.lines, pieces = [], rows = [];
+    if (lines) {
+        for (let i = 0, n = lines.length; i < n; i++) {
+            rows.push(relative(block, lines[i]));
+        }
+    }
+    else {
+        let cursor = block.contentFrom;
+        while (cursor <= block.contentTo) {
+            let end = cursor;
+            while (end < block.contentTo && text.charCodeAt(end) !== 10 && text.charCodeAt(end) !== 13) {
+                end++;
+            }
+            let next = end + (text.charCodeAt(end) === 13 && text.charCodeAt(end + 1) === 10 ? 2 : 1);
+            rows.push(relative(block, { contentFrom: cursor, contentTo: end, from: cursor, to: Math.min(next, block.to) }));
+            if (end >= block.contentTo) {
+                break;
+            }
+            cursor = next;
+        }
+    }
+    for (let i = 0, n = rows.length; i < n; i++) {
+        let row = rows[i];
+        if (code) {
+            pieces.push(row);
+            continue;
+        }
+        for (let from = row.contentFrom;; from += SLICE_CHARACTERS) {
+            let to = Math.min(row.contentTo, from + SLICE_CHARACTERS);
+            pieces.push({
+                contentFrom: from,
+                contentTo: to,
+                from: from === row.contentFrom ? row.from : from,
+                to: to === row.contentTo ? row.to : to
+            });
+            if (to >= row.contentTo) {
+                break;
+            }
+        }
+    }
+    let out = [];
+    for (let start = 0, n = pieces.length; start < n;) {
+        let characters = 0, end = start;
+        while (end < n &&
+            end - start < SLICE_LINES &&
+            characters + pieces[end].contentTo - pieces[end].contentFrom <= SLICE_CHARACTERS) {
+            characters += pieces[end].contentTo - pieces[end].contentFrom;
+            end++;
+        }
+        if (end === start) {
+            end++;
+        }
+        out.push(create(block, pieces.slice(start, end), start > 0, end < n, raw));
+        start = end;
+    }
+    return out;
+}
+const arrange = (blocks, text, folds, cache, active, raw) => {
+    let f = 0, out = [];
+    for (let i = 0, n = blocks.length; i < n; i++) {
+        if (active && i === active.first) {
+            out.push(active.unit);
+            i = active.last - 1;
+            continue;
+        }
+        let block = blocks[i];
+        while (f < folds.length && folds[f].to <= block.from) {
+            f++;
+        }
+        let fold = folds[f];
+        if (fold && block.from >= fold.from && block.from < fold.to) {
+            continue;
+        }
+        if (fold && fold.open === block.from) {
+            let unit = cache.folded.get(block);
+            if (!unit || unit.fold.from !== fold.from || unit.fold.to !== fold.to || unit.fold.endLine !== fold.endLine) {
+                unit = create(block);
+                unit.fold = fold;
+                cache.folded.set(block, unit);
+            }
+            out.push(unit);
+            continue;
+        }
+        let raws = raw?.(i) ?? false, map = raws ? cache.raw : cache.plain, units = map.get(block);
+        if (!units) {
+            map.set(block, units = slice(block, text, raws));
+        }
+        for (let j = 0, m = units.length; j < m; j++) {
+            out.push(units[j]);
+        }
+    }
+    return out;
+};
+const cache = () => ({ folded: new WeakMap(), plain: new WeakMap(), raw: new WeakMap() });
+const headingScale = (level = 0) => SCALES[level] ?? 1;
+const unitStart = (unit) => unit.block.from + (unit.rows ? unit.rows[0].from : 0);
+class MarkdownLayout {
+    units = [];
+    dirty = true;
+    generation = 0;
+    metrics = { charWidth: 8, fontSize: 13, lineHeight: 20, quoteIndent: 10, width: 600 };
+    text = '';
+    tops = new Float64Array(1);
+    estimate(unit) {
+        let block = unit.block, { charWidth, fontSize, lineHeight, quoteIndent, width } = this.metrics;
+        if (unit.fold || block.kind === 'frontmatter') {
+            return lineHeight;
+        }
+        let scale = headingScale(block.level), line = block.level && block.level <= 2 ? fontSize * scale * SCALED_LINE : lineHeight, columns = Math.max(8, Math.floor(Math.max(40, width - block.indent * charWidth - block.quoteDepth * quoteIndent) / (charWidth * scale))), code = block.kind === 'code' || block.kind === 'fence', rows = unit.rows ?? block.lines, count = 0, text = this.text;
+        if (rows) {
+            for (let i = 0, n = rows.length; i < n; i++) {
+                count += code ? 1 : Math.max(1, Math.ceil((rows[i].contentTo - rows[i].contentFrom) / columns));
+            }
+        }
+        else {
+            let from = block.contentFrom, to = block.contentTo;
+            for (let i = from; i <= to; i++) {
+                if (i === to || text.charCodeAt(i) === 10) {
+                    count += Math.max(1, Math.ceil((i - from) / columns));
+                    from = i + 1;
+                }
+            }
+        }
+        let padding = code ? (unit.continuation ? 0 : 1) + (unit.continues ? 0 : 1) : 0;
+        return Math.max(line, count * line + padding);
+    }
+    index() {
+        let units = this.units, n = units.length, tops = this.tops.length > n ? this.tops : new Float64Array(Math.max(n + 1, this.tops.length * 2)), y = 0;
+        for (let i = 0; i < n; i++) {
+            tops[i] = y;
+            y += this.height(units[i]);
+        }
+        tops[n] = y;
+        this.dirty = false;
+        this.tops = tops;
+    }
+    get total() {
+        if (this.dirty) {
+            this.index();
+        }
+        return this.tops[this.units.length];
+    }
+    at(y) {
+        if (this.dirty) {
+            this.index();
+        }
+        let hi = this.units.length, lo = 0, tops = this.tops;
+        while (lo < hi) {
+            let mid = (lo + hi) >>> 1;
+            if (tops[mid + 1] <= y) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        return Math.min(lo, Math.max(0, this.units.length - 1));
+    }
+    configure(metrics) {
+        let current = this.metrics;
+        if (current.charWidth === metrics.charWidth &&
+            current.fontSize === metrics.fontSize &&
+            current.lineHeight === metrics.lineHeight &&
+            current.quoteIndent === metrics.quoteIndent &&
+            current.width === metrics.width) {
+            return false;
+        }
+        this.dirty = true;
+        this.generation++;
+        this.metrics = metrics;
+        return true;
+    }
+    height(unit) {
+        if (unit.measured === this.generation) {
+            return unit.height;
+        }
+        if (unit.estimated !== this.generation) {
+            unit.estimate = this.estimate(unit);
+            unit.estimated = this.generation;
+        }
+        return unit.estimate;
+    }
+    indexOf(offset) {
+        let hi = this.units.length, lo = 0, units = this.units;
+        while (lo < hi) {
+            let mid = (lo + hi) >>> 1;
+            if (unitStart(units[mid]) <= offset) {
+                lo = mid + 1;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        return Math.max(0, lo - 1);
+    }
+    measure(unit, height) {
+        if (!(height > 0) || !Number.isFinite(height)) {
+            return false;
+        }
+        let previous = this.height(unit);
+        unit.height = height;
+        unit.measured = this.generation;
+        if (Math.abs(previous - height) < 0.5) {
+            return false;
+        }
+        this.dirty = true;
+        return true;
+    }
+    set(units, text) {
+        this.dirty = true;
+        this.text = text;
+        this.units = units;
+    }
+    top(index) {
+        if (this.dirty) {
+            this.index();
+        }
+        return this.tops[Math.max(0, Math.min(index, this.units.length))];
+    }
+    window(y, height, overscan = OVERSCAN) {
+        let n = this.units.length;
+        if (!n) {
+            return { end: 0, start: 0 };
+        }
+        let start = this.at(Math.max(0, y - overscan)), end = Math.min(n, this.at(y + Math.max(1, height) + overscan) + 1);
+        if (end - start > WINDOW_LIMIT) {
+            start = Math.max(start, this.at(y) - 12);
+            end = Math.min(n, start + WINDOW_LIMIT);
+        }
+        return { end, start };
+    }
+}
+export { arrange, cache, headingScale, MarkdownLayout, SCALED_LINE, SLICE_LINES, unitStart, WINDOW_LIMIT };