@fusion.dev/helix-headless 0.215.3 → 0.216.0

package/dist/markdown/inline.js

@@ -0,0 +1,483 @@
+const ENTITIES = {
+    amp: '&',
+    apos: "'",
+    copy: '©',
+    gt: '>',
+    hellip: '…',
+    larr: '←',
+    ldquo: '“',
+    lsquo: '‘',
+    lt: '<',
+    mdash: '\u2014',
+    nbsp: ' ',
+    ndash: '–',
+    quot: '"',
+    rarr: '→',
+    rdquo: '”',
+    reg: '®',
+    rsquo: '’',
+    times: '×',
+    trade: '™',
+};
+const PUNCTUATION = /[\p{P}\p{S}]/u;
+const WHITESPACE = /\s/u;
+const ESCAPABLE = /[!-/:-@[-`{-~]/;
+const AUTOLINK = /^<([A-Za-z][A-Za-z0-9+.-]{1,31}:[^\s<>]*|[A-Za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?(?:\.[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*)>/;
+const ENTITY = /^&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([A-Za-z][A-Za-z0-9]{1,31}));/;
+const PENDING_ENTITY = /^&#?[A-Za-z0-9]{0,31}$/;
+const PENDING_AUTOLINK = /^<[A-Za-z][A-Za-z0-9+.-]{0,31}(?::[^\s<>]*)?$/;
+const readDestination = (text, at) => {
+    let index = at;
+    const skip = () => {
+        while (index < text.length && /[ \t\n]/.test(text[index] ?? '')) {
+            index += 1;
+        }
+    };
+    skip();
+    let href = '';
+    if (text[index] === '<') {
+        const close = text.indexOf('>', index + 1);
+        if (close < 0 || /[\n<]/.test(text.slice(index + 1, close))) {
+            return undefined;
+        }
+        href = text.slice(index + 1, close);
+        index = close + 1;
+    }
+    else {
+        let depth = 0;
+        const begin = index;
+        while (index < text.length) {
+            const character = text[index] ?? '';
+            if (character === '\\' && ESCAPABLE.test(text[index + 1] ?? '')) {
+                index += 2;
+                continue;
+            }
+            if (/[\s]/.test(character)) {
+                break;
+            }
+            if (character === '(') {
+                depth += 1;
+            }
+            else if (character === ')') {
+                if (depth === 0) {
+                    break;
+                }
+                depth -= 1;
+            }
+            index += 1;
+        }
+        href = text.slice(begin, index).replace(/\\([!-/:-@[-`{-~])/g, '$1');
+    }
+    skip();
+    let title;
+    const quote = text[index];
+    if (quote === '"' || quote === "'" || quote === '(') {
+        const closer = quote === '(' ? ')' : quote;
+        let end = index + 1;
+        while (end < text.length && text[end] !== closer) {
+            end += text[end] === '\\' ? 2 : 1;
+        }
+        if (end >= text.length) {
+            return undefined;
+        }
+        title = text.slice(index + 1, end).replace(/\\([!-/:-@[-`{-~])/g, '$1');
+        index = end + 1;
+        skip();
+    }
+    if (text[index] !== ')') {
+        return undefined;
+    }
+    return title === undefined ? { end: index + 1, href } : { end: index + 1, href, title };
+};
+const merge = (nodes) => {
+    const merged = [];
+    for (const node of nodes) {
+        const last = merged.at(-1);
+        if (node.kind === 'text' && last?.kind === 'text') {
+            merged[merged.length - 1] = { kind: 'text', text: last.text + node.text };
+        }
+        else if (node.kind !== 'text' || node.text !== '') {
+            merged.push(node);
+        }
+    }
+    return merged;
+};
+const processEmphasis = (tokens, from) => {
+    let closerAt = from;
+    while (closerAt < tokens.length) {
+        const closer = tokens[closerAt]?.delimiter;
+        if (!closer?.canClose || closer.count === 0) {
+            closerAt += 1;
+            continue;
+        }
+        let openerAt = closerAt - 1;
+        let found = false;
+        while (openerAt >= from) {
+            const opener = tokens[openerAt]?.delimiter;
+            if (opener?.canOpen &&
+                opener.count > 0 &&
+                opener.character === closer.character &&
+                (closer.character === '~'
+                    ? opener.count === closer.count
+                    : !((opener.canClose || closer.canOpen) &&
+                        (opener.original + closer.original) % 3 === 0 &&
+                        !(opener.original % 3 === 0 && closer.original % 3 === 0)))) {
+                found = true;
+                break;
+            }
+            openerAt -= 1;
+        }
+        if (!found) {
+            closerAt += 1;
+            continue;
+        }
+        const opener = tokens[openerAt]?.delimiter;
+        const used = closer.character === '~' ? closer.count : opener.count >= 2 && closer.count >= 2 ? 2 : 1;
+        const inside = tokens.splice(openerAt + 1, closerAt - openerAt - 1);
+        const kind = closer.character === '~' ? 'del' : used === 2 ? 'strong' : 'em';
+        const wrapped = { node: { children: merge(inside.map((token) => token.node)), kind } };
+        tokens.splice(openerAt + 1, 0, wrapped);
+        closerAt = openerAt + 2;
+        opener.count -= used;
+        closer.count -= used;
+        const openerToken = tokens[openerAt];
+        openerToken.node = { kind: 'text', text: opener.character.repeat(opener.count) };
+        const closerToken = tokens[closerAt];
+        closerToken.node = { kind: 'text', text: closer.character.repeat(closer.count) };
+        if (opener.count === 0) {
+            delete openerToken.delimiter;
+        }
+        if (closer.count === 0) {
+            delete closerToken.delimiter;
+            closerAt += 1;
+        }
+    }
+};
+const flanking = (before, after, character) => {
+    const beforeSpace = before === '' || WHITESPACE.test(before);
+    const afterSpace = after === '' || WHITESPACE.test(after);
+    const beforePunctuation = PUNCTUATION.test(before);
+    const afterPunctuation = PUNCTUATION.test(after);
+    const left = !afterSpace && (!afterPunctuation || beforeSpace || beforePunctuation);
+    const right = !beforeSpace && (!beforePunctuation || afterSpace || afterPunctuation);
+    if (character === '_') {
+        return {
+            canClose: right && (!left || afterPunctuation),
+            canOpen: left && (!right || beforePunctuation),
+        };
+    }
+    return { canClose: right, canOpen: left };
+};
+const trimUrl = (url) => {
+    let end = url.length;
+    while (end > 0 && /[?!.,:*_~'"]/.test(url[end - 1] ?? '')) {
+        end -= 1;
+    }
+    let trimmed = url.slice(0, end);
+    while (trimmed.endsWith(')')) {
+        const opens = trimmed.split('(').length - 1;
+        const closes = trimmed.split(')').length - 1;
+        if (closes <= opens) {
+            break;
+        }
+        trimmed = trimmed.slice(0, -1);
+    }
+    return trimmed;
+};
+const BARE_URL = /(?:https?:\/\/|www\.)[^\s<]+/g;
+const bareLinks = (nodes) => nodes.flatMap((node) => {
+    if (node.kind === 'link') {
+        return [node];
+    }
+    if (node.kind === 'em' || node.kind === 'strong' || node.kind === 'del') {
+        return [{ ...node, children: bareLinks(node.children) }];
+    }
+    if (node.kind !== 'text' || !/https?:\/\/|www\./.test(node.text)) {
+        return [node];
+    }
+    const out = [];
+    let last = 0;
+    for (const match of node.text.matchAll(BARE_URL)) {
+        const before = node.text[match.index - 1];
+        if (match.index > 0 && before !== undefined && !/[\s*_~(]/.test(before)) {
+            continue;
+        }
+        const url = trimUrl(match[0]);
+        if (url === '' || (url.startsWith('www.') && !/^www\.[^.]+\./.test(`${url}.`))) {
+            continue;
+        }
+        out.push({ kind: 'text', text: node.text.slice(last, match.index) });
+        out.push({
+            children: [{ kind: 'text', text: url }],
+            href: url.startsWith('www.') ? `http://${url}` : url,
+            kind: 'link',
+        });
+        last = match.index + url.length;
+    }
+    out.push({ kind: 'text', text: node.text.slice(last) });
+    return merge(out);
+});
+export const parseInline = (text, options = {}) => {
+    const open = options.open === true;
+    const tokens = [];
+    let plain = '';
+    const flush = () => {
+        if (plain !== '') {
+            tokens.push({ node: { kind: 'text', text: plain } });
+            plain = '';
+        }
+    };
+    let at = 0;
+    while (at < text.length) {
+        const character = text[at] ?? '';
+        const rest = text.slice(at);
+        if (character === '\\') {
+            const next = text[at + 1];
+            if (next === '\n') {
+                flush();
+                tokens.push({ node: { kind: 'break' } });
+                at += 2;
+                continue;
+            }
+            if (next !== undefined && ESCAPABLE.test(next)) {
+                plain += next;
+                at += 2;
+                continue;
+            }
+            if (next === undefined && open) {
+                break;
+            }
+            plain += character;
+            at += 1;
+            continue;
+        }
+        if (character === '`') {
+            const run = /^`+/.exec(rest)?.[0] ?? '`';
+            const closer = new RegExp(`(?<!\`)${run}(?!\`)`, 'g');
+            closer.lastIndex = at + run.length;
+            const match = closer.exec(text);
+            if (match) {
+                flush();
+                let code = text.slice(at + run.length, match.index).replace(/\n/g, ' ');
+                if (/^ .*[^ ].* $/.test(code) || /^ [^ ]+ $/.test(code)) {
+                    code = code.slice(1, -1);
+                }
+                tokens.push({ node: { kind: 'code', text: code } });
+                at = match.index + run.length;
+                continue;
+            }
+            if (open && at + run.length >= text.length) {
+                break;
+            }
+            if (open) {
+                flush();
+                tokens.push({
+                    node: { kind: 'code', text: text.slice(at + run.length).replace(/\n/g, ' ') },
+                });
+                at = text.length;
+                continue;
+            }
+            plain += run;
+            at += run.length;
+            continue;
+        }
+        if (character === '&') {
+            const match = ENTITY.exec(rest);
+            if (match) {
+                const [whole, hex, decimal, name] = match;
+                const point = hex ? Number.parseInt(hex, 16) : decimal ? Number(decimal) : undefined;
+                const decoded = point !== undefined
+                    ? String.fromCodePoint(point > 0x10ffff || point === 0 ? 0xfffd : point)
+                    : ENTITIES[name ?? ''];
+                if (decoded !== undefined) {
+                    plain += decoded;
+                    at += whole.length;
+                    continue;
+                }
+            }
+            if (open && PENDING_ENTITY.test(rest)) {
+                break;
+            }
+            plain += character;
+            at += 1;
+            continue;
+        }
+        if (character === '<') {
+            const match = AUTOLINK.exec(rest);
+            if (match) {
+                flush();
+                const target = match[1] ?? '';
+                const href = target.includes(':') ? target : `mailto:${target}`;
+                tokens.push({ node: { children: [{ kind: 'text', text: target }], href, kind: 'link' } });
+                at += match[0].length;
+                continue;
+            }
+            if (open && PENDING_AUTOLINK.test(rest)) {
+                break;
+            }
+            plain += character;
+            at += 1;
+            continue;
+        }
+        if (character === '*' || character === '_' || character === '~') {
+            const run = new RegExp(`^\\${character}+`).exec(rest)?.[0] ?? character;
+            const after = text[at + run.length] ?? '';
+            if (open && after === '') {
+                break;
+            }
+            if (character === '~' && run.length > 2) {
+                plain += run;
+                at += run.length;
+                continue;
+            }
+            flush();
+            const sides = flanking(text[at - 1] ?? '', after, character);
+            tokens.push({
+                delimiter: { ...sides, character, count: run.length, original: run.length },
+                node: { kind: 'text', text: run },
+            });
+            at += run.length;
+            continue;
+        }
+        if (character === '!' && text[at + 1] === '[') {
+            flush();
+            tokens.push({ bracket: { active: true, image: true }, node: { kind: 'text', text: '![' } });
+            at += 2;
+            continue;
+        }
+        if (character === '!' && open && at + 1 >= text.length) {
+            break;
+        }
+        if (character === '[') {
+            flush();
+            tokens.push({ bracket: { active: true, image: false }, node: { kind: 'text', text: '[' } });
+            at += 1;
+            continue;
+        }
+        if (character === ']') {
+            flush();
+            let openerAt = tokens.length - 1;
+            while (openerAt >= 0 && !tokens[openerAt]?.bracket) {
+                openerAt -= 1;
+            }
+            const opener = tokens[openerAt];
+            if (!opener?.bracket) {
+                plain += ']';
+                at += 1;
+                continue;
+            }
+            if (!opener.bracket.active) {
+                tokens.splice(openerAt, 1, { node: opener.node });
+                plain += ']';
+                at += 1;
+                continue;
+            }
+            const destination = text[at + 1] === '(' ? readDestination(text, at + 2) : undefined;
+            const pending = open && destination === undefined && (at + 1 >= text.length || text[at + 1] === '(');
+            if (!destination && !pending) {
+                tokens.splice(openerAt, 1, { node: opener.node });
+                plain += ']';
+                at += 1;
+                continue;
+            }
+            processEmphasis(tokens, openerAt + 1);
+            const inside = tokens.splice(openerAt + 1).map((token) => token.node);
+            tokens.pop();
+            if (opener.bracket.image) {
+                const alt = textOf(inside);
+                tokens.push({
+                    node: destination
+                        ? {
+                            alt,
+                            kind: 'image',
+                            src: destination.href,
+                            ...(destination.title === undefined ? {} : { title: destination.title }),
+                        }
+                        : { children: [{ kind: 'text', text: alt }], kind: 'link' },
+                });
+            }
+            else {
+                tokens.push({
+                    node: {
+                        children: merge(inside),
+                        kind: 'link',
+                        ...(destination ? { href: destination.href } : {}),
+                        ...(destination?.title === undefined ? {} : { title: destination.title }),
+                    },
+                });
+                for (const token of tokens) {
+                    if (token.bracket && !token.bracket.image) {
+                        token.bracket.active = false;
+                    }
+                }
+            }
+            if (!destination) {
+                at = text.length;
+                continue;
+            }
+            at = destination.end;
+            continue;
+        }
+        if (character === '\n') {
+            const hard = / {2,}$/.test(plain);
+            plain = plain.replace(/ +$/, '');
+            flush();
+            tokens.push({ node: hard ? { kind: 'break' } : { kind: 'text', text: '\n' } });
+            at += 1;
+            while (text[at] === ' ' || text[at] === '\t') {
+                at += 1;
+            }
+            continue;
+        }
+        plain += character;
+        at += 1;
+    }
+    flush();
+    processEmphasis(tokens, 0);
+    if (open) {
+        closeOpen(tokens);
+    }
+    return bareLinks(merge(tokens.map((token) => token.node)));
+};
+const closeOpen = (tokens) => {
+    for (let at = tokens.length - 1; at >= 0; at -= 1) {
+        const token = tokens[at];
+        if (token.bracket) {
+            token.node = { kind: 'text', text: '' };
+            delete token.bracket;
+            continue;
+        }
+        const delimiter = token.delimiter;
+        if (!delimiter?.canOpen || delimiter.count === 0 || at === tokens.length - 1) {
+            continue;
+        }
+        const inside = merge(tokens.splice(at + 1).map((one) => one.node));
+        let node;
+        if (delimiter.character === '~') {
+            node = { children: inside, kind: 'del' };
+        }
+        else if (delimiter.count >= 3) {
+            node = { children: [{ children: inside, kind: 'em' }], kind: 'strong' };
+        }
+        else {
+            node = { children: inside, kind: delimiter.count === 2 ? 'strong' : 'em' };
+        }
+        token.node = node;
+        delete token.delimiter;
+    }
+};
+export const textOf = (nodes) => nodes
+    .map((node) => {
+    switch (node.kind) {
+        case 'break':
+            return '\n';
+        case 'code':
+        case 'text':
+            return node.text;
+        case 'image':
+            return node.alt;
+        default:
+            return textOf(node.children);
+    }
+})
+    .join('');

package/dist/markdown/root/markdown-root.d.ts

@@ -0,0 +1,99 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import '../../callout/index.js';
+import '../../code-block/index.js';
+/**
+ * @summary Markdown drawn as a document, which streams in place as a reply arrives.
+ *
+ * @description
+ * Set `text` to the Markdown, or to everything a reply has said so far, with
+ * `streaming` while more is coming. Each time `text` grows, only what changed
+ * is drawn: a block that has ended is never drawn again, a word arriving is
+ * added to the line it ends, and a code block, a list, or a table fills in
+ * where it stands. Text you can already read does not move.
+ *
+ * - A fence becomes a `Code Block`, with its language as its `label` and its
+ *   `language`, so a highlighter given to `registerHighlighter` colors it as it
+ *   grows.
+ * - An alert, `> [!NOTE]` through `> [!CAUTION]`, becomes a `Callout` in the
+ *   tone `rehypeHelix` gives it.
+ * - A table's columns are sized once from its header row, so the rows that
+ *   follow never widen or narrow them.
+ * - A list item's first paragraph is drawn the same whether the list is tight
+ *   or loose, so a blank line arriving between items moves nothing.
+ *
+ * While `streaming`, the end of the text is read as still arriving. A `**`
+ * whose closing pair has not come yet draws bold at once, a code span draws as
+ * code, and a link draws as a link before its address arrives. A marker that
+ * the next character decides, such as a `#` at the start of a line, waits for
+ * that character.
+ *
+ * **The document is drawn in the element's own children**, so the page's
+ * `data-prose` styles reach it, a reader can select and find its text, and a
+ * server can send it. Put `data-prose` on the element or on a container. On a
+ * server, render `markdownToHtml(text)` inside the element: where what it was
+ * sent is exactly what it would draw, it keeps it and draws nothing again.
+ *
+ * What it reads is CommonMark with GitHub's tables, task lists,
+ * strikethrough, autolinks, and alerts. A line of `===` or `---` under a
+ * paragraph is not a heading, four spaces of indent are not a code block, and
+ * reference links are not read, because each of those changes text above it
+ * after it was drawn. HTML is drawn as text. An image is drawn as a link to the
+ * picture, which loads nothing until a reader follows it. A link's address is
+ * kept only where it is relative or on `http`, `https`, `mailto`, or `tel`.
+ *
+ * @since 0.216.0
+ * @status experimental
+ * @category typography
+ * @aliases Markdown renderer, Streaming text, Rich text
+ * @documentation https://fusion.dev/helix/components/markdown
+ *
+ * @slot - The drawn document. Written by the element; leave it empty, or fill it with `markdownToHtml(text)` on a server.
+ *
+ * @cssstate streaming - While `streaming` is set and more text is expected.
+ */
+export declare class HelixHeadlessMarkdown extends HelixElement {
+    static styles: CSSResultGroup;
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-markdown': { noteHeading: 'Hinweis' } })`.
+     */
+    static words: string;
+    /** The heading of a `> [!CAUTION]` alert. */
+    cautionHeading: string;
+    /** The heading of a `> [!IMPORTANT]` alert. */
+    importantHeading: string;
+    /** The heading of a `> [!NOTE]` alert. */
+    noteHeading: string;
+    /**
+     * Whether more text is coming. While it is set, the end of `text` is read
+     * as a block still arriving, and the element is busy to assistive
+     * technology. Clear it when the reply ends, and the last block is read as
+     * finished.
+     */
+    streaming: boolean;
+    /**
+     * The Markdown. Set it to the whole reply so far each time more arrives: a
+     * text that starts with the one before is drawn by its new end alone.
+     */
+    text: string;
+    /** The heading of a `> [!TIP]` alert. */
+    tipHeading: string;
+    /** The heading of a `> [!WARNING]` alert. */
+    warningHeading: string;
+    private writer;
+    /**
+     * Adds text to the end of the document, as a chunk of a stream arrives.
+     * The same as setting `text` to the text so far.
+     */
+    appendText(chunk: string): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-markdown': HelixHeadlessMarkdown;
+    }
+}

package/dist/markdown/root/markdown-root.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { customElement, HelixElement, words } from '@fusion.dev/helix-core';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../callout/index.js';
+import '../../code-block/index.js';
+import { MarkdownWriter } from '../writer.js';
+let HelixHeadlessMarkdown = class HelixHeadlessMarkdown extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.cautionHeading = 'Caution';
+        this.importantHeading = 'Important';
+        this.noteHeading = 'Note';
+        this.streaming = false;
+        this.text = '';
+        this.tipHeading = 'Tip';
+        this.warningHeading = 'Warning';
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+  `; }
+    static { this.words = 'helix-markdown'; }
+    appendText(chunk) {
+        this.text += chunk;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.internals.ariaBusy = this.streaming ? 'true' : null;
+        this.toggleState('streaming', this.streaming);
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    updated(changed) {
+        super.updated(changed);
+        const tier = this.constructor.tier;
+        const options = {
+            headings: {
+                caution: this.cautionHeading,
+                important: this.importantHeading,
+                note: this.noteHeading,
+                tip: this.tipHeading,
+                warning: this.warningHeading,
+            },
+            tags: { callout: `${tier}callout`, codeBlock: `${tier}code-block` },
+        };
+        if (!this.writer) {
+            this.writer = new MarkdownWriter(this, options);
+        }
+        else if (['cautionHeading', 'importantHeading', 'noteHeading', 'tipHeading', 'warningHeading'].some((name) => changed.has(name))) {
+            this.writer.configure(options);
+        }
+        if (changed.has('text') || changed.has('streaming')) {
+            this.writer.write(this.text, !this.streaming);
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'caution-heading' })
+], HelixHeadlessMarkdown.prototype, "cautionHeading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'important-heading' })
+], HelixHeadlessMarkdown.prototype, "importantHeading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'note-heading' })
+], HelixHeadlessMarkdown.prototype, "noteHeading", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMarkdown.prototype, "streaming", void 0);
+__decorate([
+    property()
+], HelixHeadlessMarkdown.prototype, "text", void 0);
+__decorate([
+    words,
+    property({ attribute: 'tip-heading' })
+], HelixHeadlessMarkdown.prototype, "tipHeading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'warning-heading' })
+], HelixHeadlessMarkdown.prototype, "warningHeading", void 0);
+HelixHeadlessMarkdown = __decorate([
+    customElement('helix-headless-markdown')
+], HelixHeadlessMarkdown);
+export { HelixHeadlessMarkdown };