@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/editor/FormatBar.svelte

@@ -0,0 +1,41 @@
+<!-- The formatting bar above a text selection: bold, italic… link, plain text. -->
+<script lang="ts">
+	import { portal } from '../dom';
+	import type { Icon } from '../palette';
+
+	let {
+		x,
+		y,
+		tools,
+		label,
+		onpick
+	}: {
+		/** The middle of the selection's top edge; the bar sits centred above it. */
+		x: number;
+		y: number;
+		tools: { cmd: string; icon: Icon; title: string }[];
+		label: string;
+		onpick: (cmd: string) => void;
+	} = $props();
+</script>
+
+<!-- in the body (portal): placed against the viewport even inside a transformed parent -->
+<div
+	use:portal
+	class="fixed z-20 flex -translate-x-1/2 translate-y-[calc(-100%-8px)] gap-0.5 rounded-[10px] border border-frame bg-surface p-1 shadow-[0_6px_24px_rgb(0_0_0/0.18)]"
+	style:left="{x}px"
+	style:top="{y}px"
+	role="toolbar"
+	aria-label={label}
+>
+	{#each tools as t (t.cmd)}
+		<button
+			type="button"
+			class="grid h-[30px] min-w-[30px] cursor-pointer place-items-center rounded-md border-0 bg-transparent text-surface-contrast hover:bg-[rgb(120_120_140/0.14)]"
+			title={t.title}
+			aria-label={t.title}
+			onmousedown={(e) => e.preventDefault()}
+			onclick={() => onpick(t.cmd)}><t.icon size={16} /></button
+		>
+	{/each}
+</div>

package/dist/editor/FormatBar.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Icon } from '../palette';
+type $$ComponentProps = {
+    /** The middle of the selection's top edge; the bar sits centred above it. */
+    x: number;
+    y: number;
+    tools: {
+        cmd: string;
+        icon: Icon;
+        title: string;
+    }[];
+    label: string;
+    onpick: (cmd: string) => void;
+};
+declare const FormatBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormatBar = ReturnType<typeof FormatBar>;
+export default FormatBar;

package/dist/editor/drag.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { StoredBlock } from '../types';
+export type DragSource = {
+    /** The token of the editor the blocks come from. */
+    editor: string;
+    ids: string[];
+    /** The blocks in their stored form, for another editor to copy in. */
+    payload: StoredBlock[];
+    /** Their rows (a drop target inside one of them is inside the dragged blocks). */
+    rows: HTMLElement[];
+    /** Takes the blocks out of their editor (after another editor copied them in). */
+    remove: () => void;
+};
+export type Hub = {
+    src: DragSource | null;
+    target: {
+        editor: string;
+        over: string;
+        after: boolean;
+    } | null;
+    /** The editor worked in last. */
+    active: string | null;
+};
+/** The hub of this tree of editors: the parent editor's, or a new one for a top editor. Call in component init. */
+export declare function useHub(): Hub;
+export interface DragHost {
+    /** This editor's token (a string, not an object: $state would proxy an object and break identity checks). */
+    token: string;
+    hub: Hub;
+    root(): HTMLElement;
+    ownRow(node: Element | null): HTMLElement | null;
+    /** The blocks a drag from this block moves: the block selection if the block is in it, otherwise the block. */
+    moving(id: string): string[];
+    /** The stored form of these blocks. */
+    payload(ids: string[]): StoredBlock[];
+    /** Takes these blocks out (an undo step). */
+    remove(ids: string[]): void;
+    /** Can this editor hold these blocks (the plugins it offers)? */
+    holds(payload: StoredBlock[]): boolean;
+    /** Moves its own blocks before or after another one (an undo step). */
+    move(ids: string[], over: string, after: boolean): void;
+    /** Puts another editor's blocks before or after one of its own (an undo step). */
+    insert(payload: StoredBlock[], over: string, after: boolean): void;
+    /** Does a plugin this editor offers take files? */
+    takesFiles(): boolean;
+    /** Files dropped from outside the page, before or after one of its blocks. */
+    files(files: File[], over: string, after: boolean): void;
+}
+export declare function createDrag(host: DragHost): {
+    /** On a handle's dragstart. */
+    start(e: DragEvent, id: string): void;
+    /** On the editor's dragover. */
+    over(e: DragEvent): void;
+    /** On the editor's drop. */
+    drop(e: DragEvent): void;
+    /** On dragend: nothing is dragged any more. */
+    end(): void;
+    /** On the editor's dragleave: files dragged out of it leave no drop line behind (they have no dragend here). */
+    leave(e: DragEvent): void;
+    /** Is this block of this editor being dragged? */
+    moves: (id: string) => boolean;
+    /** The drop line before (or after) this block. */
+    mark: (id: string, after: boolean) => boolean;
+};

package/dist/editor/drag.svelte.js

@@ -0,0 +1,95 @@
+// Dragging blocks by their handle, within an editor and between an editor and the editors nested in its blocks (and
+// back). The editors of one tree share a hub through a context: what is being dragged, where it would land, and which
+// editor was worked in last (only that one keeps a block selection).
+import { getContext, setContext } from 'svelte';
+const KEY = 'brickee:hub';
+/** The hub of this tree of editors: the parent editor's, or a new one for a top editor. Call in component init. */
+export function useHub() {
+    const own = $state({ src: null, target: null, active: null });
+    const hub = getContext(KEY) ?? own;
+    setContext(KEY, hub);
+    return hub;
+}
+export function createDrag(host) {
+    const { hub, token } = host;
+    /** Can the dragged blocks land in this editor? Not inside themselves, and only plugins this editor offers. */
+    function accepts(src) {
+        if (src.editor === token)
+            return true;
+        if (src.rows.some((r) => r.contains(host.root())))
+            return false;
+        return host.holds(src.payload);
+    }
+    return {
+        /** On a handle's dragstart. */
+        start(e, id) {
+            const ids = host.moving(id);
+            hub.src = {
+                editor: token,
+                ids,
+                payload: host.payload(ids),
+                rows: ids.map((x) => host.root().querySelector(`[data-block="${x}"]`)).filter(Boolean),
+                remove: () => host.remove(ids)
+            };
+            hub.target = null;
+            if (!e.dataTransfer)
+                return;
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', ' ');
+            const row = e.currentTarget.closest('.row');
+            if (row)
+                e.dataTransfer.setDragImage(row, 0, 0);
+        },
+        /** On the editor's dragover. */
+        over(e) {
+            // A nested editor deeper in the tree already took this event.
+            if (e.defaultPrevented)
+                return;
+            // Files from outside the page, when a plugin here takes files.
+            const files = !hub.src && !!e.dataTransfer?.types.includes('Files') && host.takesFiles();
+            if (!hub.src && !files)
+                return;
+            const row = host.ownRow(e.target);
+            if (!row || (hub.src && !accepts(hub.src)))
+                return;
+            e.preventDefault();
+            const r = row.getBoundingClientRect();
+            hub.target = { editor: token, over: row.dataset.block, after: e.clientY > r.top + r.height / 2 };
+        },
+        /** On the editor's drop. */
+        drop(e) {
+            const src = hub.src;
+            const at = hub.target;
+            if (at?.editor !== token)
+                return;
+            e.preventDefault();
+            hub.src = hub.target = null;
+            if (!src) {
+                const files = [...(e.dataTransfer?.files ?? [])];
+                if (files.length)
+                    host.files(files, at.over, at.after);
+                return;
+            }
+            if (src.ids.includes(at.over))
+                return;
+            if (src.editor === token)
+                return host.move(src.ids, at.over, at.after);
+            // From another editor: copy in through the stored form, then remove at the source.
+            host.insert(src.payload, at.over, at.after);
+            src.remove();
+        },
+        /** On dragend: nothing is dragged any more. */
+        end() {
+            hub.src = hub.target = null;
+        },
+        /** On the editor's dragleave: files dragged out of it leave no drop line behind (they have no dragend here). */
+        leave(e) {
+            if (!hub.src && hub.target?.editor === token && !host.root().contains(e.relatedTarget))
+                hub.target = null;
+        },
+        /** Is this block of this editor being dragged? */
+        moves: (id) => hub.src?.editor === token && hub.src.ids.includes(id),
+        /** The drop line before (or after) this block. */
+        mark: (id, after) => hub.target?.editor === token && hub.target.over === id && hub.target.after === after && !hub.src?.ids.includes(id)
+    };
+}

package/dist/editor/history.d.ts

@@ -0,0 +1,24 @@
+export declare class History<S> {
+    #private;
+    private take;
+    private apply;
+    private limit;
+    private settle;
+    /**
+     * @param take  a snapshot of the editor now
+     * @param apply puts the editor back into a snapshot
+     * @param limit how many steps are kept
+     * @param settle how long (ms) typing waits before its step is closed
+     */
+    constructor(take: () => S, apply: (s: S) => void, limit?: number, settle?: number);
+    /** Call on every text edit: consecutive typing collapses into one undo step. */
+    typed(): void;
+    /** Wrap every structural change: pushes an undo step. */
+    mutate(fn: () => void): void;
+    /** Drops the undo and redo steps (a document loaded from outside). */
+    forget(): void;
+    undo(): void;
+    redo(): void;
+    /** Stops the pending timer (the editor is going away). */
+    dispose(): void;
+}

package/dist/editor/history.js

@@ -0,0 +1,86 @@
+// The editor's undo history: snapshots of the document (and where the caret was), one step per structural change,
+// consecutive typing collapsed into one step.
+export class History {
+    take;
+    apply;
+    limit;
+    settle;
+    #past = [];
+    #future = [];
+    #last;
+    #pending = false;
+    #timer;
+    /**
+     * @param take  a snapshot of the editor now
+     * @param apply puts the editor back into a snapshot
+     * @param limit how many steps are kept
+     * @param settle how long (ms) typing waits before its step is closed
+     */
+    constructor(take, apply, limit = 300, settle = 600) {
+        this.take = take;
+        this.apply = apply;
+        this.limit = limit;
+        this.settle = settle;
+        this.#last = take();
+    }
+    #push(s) {
+        this.#past.push(s);
+        if (this.#past.length > this.limit)
+            this.#past.shift();
+        this.#future = [];
+    }
+    #settle() {
+        clearTimeout(this.#timer);
+        this.#pending = false;
+    }
+    /** Call on every text edit: consecutive typing collapses into one undo step. */
+    typed() {
+        if (!this.#pending) {
+            this.#push(this.#last);
+            this.#pending = true;
+        }
+        clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => {
+            this.#pending = false;
+            this.#last = this.take();
+        }, this.settle);
+    }
+    /** Wrap every structural change: pushes an undo step. */
+    mutate(fn) {
+        this.#settle();
+        this.#push(this.take());
+        fn();
+        this.#last = this.take();
+    }
+    /** Drops the undo and redo steps (a document loaded from outside). */
+    forget() {
+        this.#settle();
+        this.#past = [];
+        this.#future = [];
+        this.#last = this.take();
+    }
+    undo() {
+        this.#settle();
+        const s = this.#past.pop();
+        if (!s)
+            return;
+        this.#future.push(this.take());
+        this.#restore(s);
+    }
+    redo() {
+        this.#settle();
+        const s = this.#future.pop();
+        if (!s)
+            return;
+        this.#past.push(this.take());
+        this.#restore(s);
+    }
+    #restore(s) {
+        this.#last = s;
+        this.apply(s);
+    }
+    /** Stops the pending timer (the editor is going away). */
+    dispose() {
+        clearTimeout(this.#timer);
+    }
+}

package/dist/editor/sweep.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface SweepHost {
+    /** The editor's root element. */
+    root(): HTMLElement;
+    /** The editor's own row (not a nested editor's) that holds this node, or null. */
+    ownRow(node: Element | null): HTMLElement | null;
+    readonly(): boolean;
+    /** Select the blocks from `anchor` to `head`. */
+    select(anchor: string, head: string): void;
+    /** Drop the block selection (back to text selection). */
+    clear(): void;
+    /** Take the focus from the text field, to the root (the block selection's keys). */
+    focusRoot(): void;
+}
+export declare function createSweep(host: SweepHost): {
+    /** True while whole blocks are being swept (the browser must not extend its own selection meanwhile). */
+    readonly sweeping: boolean;
+    /** On the editor's mousedown: a press in a block's text may start a sweep. */
+    start(e: MouseEvent): void;
+    /** Stops a sweep and its listeners (also when the editor goes away). */
+    end: () => void;
+};

package/dist/editor/sweep.svelte.js

@@ -0,0 +1,56 @@
+// A text selection dragged out of its block turns into a selection of whole blocks (each block is its own editable
+// field, so the browser cannot select text across them). Nested editors run the same logic, so a sweep that leaves a
+// box is taken over by the editor around it, with the box as one block.
+export function createSweep(host) {
+    let sweeping = $state(false);
+    let from = null;
+    function move(e) {
+        const start = host.ownRow(from);
+        const here = document.elementFromPoint(e.clientX, e.clientY);
+        if (!start || !here)
+            return;
+        const root = host.root();
+        const row = root.contains(here) ? host.ownRow(here) : null;
+        // Left this editor, or came back to the starting block: back to plain text selection.
+        if (!root.contains(here) || row === start) {
+            if (sweeping) {
+                sweeping = false;
+                host.clear();
+            }
+            return;
+        }
+        if (!row)
+            return;
+        if (!sweeping) {
+            sweeping = true;
+            host.focusRoot();
+        }
+        getSelection()?.removeAllRanges();
+        host.select(start.dataset.block, row.dataset.block);
+    }
+    function end() {
+        removeEventListener('mousemove', move);
+        removeEventListener('mouseup', end);
+        from = null;
+        sweeping = false;
+    }
+    return {
+        /** True while whole blocks are being swept (the browser must not extend its own selection meanwhile). */
+        get sweeping() {
+            return sweeping;
+        },
+        /** On the editor's mousedown: a press in a block's text may start a sweep. */
+        start(e) {
+            if (host.readonly() || e.button !== 0 || e.shiftKey)
+                return;
+            const t = e.target;
+            if (!t.closest('.ce') || t.closest('.grab'))
+                return;
+            from = t;
+            addEventListener('mousemove', move);
+            addEventListener('mouseup', end, { once: true });
+        },
+        /** Stops a sweep and its listeners (also when the editor goes away). */
+        end
+    };
+}

package/dist/html.d.ts

@@ -0,0 +1,12 @@
+import type { Block, BlockPlugin } from './types';
+/** HTML (a pasted fragment or a page) as markdown. Browser only. */
+export declare function markdownFromHtml(html: string): string;
+/**
+ * HTML -> blocks, the way the editor takes a formatted paste: headings, paragraphs, lists (nested, numbered with their
+ * start, to-dos from checkboxes), quotes, code (`pre`, with a `language-…` class), rules, and inline marks — also
+ * Google Docs' styled spans. A table goes to the first of `plugins` that takes tables (`fromTable`). Images become
+ * links; scripts, styles and form controls are dropped. Browser only.
+ */
+export declare function fromHtml(html: string, opts?: {
+    plugins?: BlockPlugin[];
+}): Block[];

package/dist/html.js

@@ -0,0 +1,206 @@
+// Formatted paste: HTML from a web page, Google Docs, Word… -> markdown -> blocks. Going through markdown reuses
+// everything fromMarkdown does (list nesting, tables for a plugin that takes them, safe links); the HTML is only read,
+// never inserted. Browser only (DOMParser).
+import { codeSpan, escLine, escText, fromMarkdown, mdUrl } from './markdown';
+/** Never read: no text of theirs belongs in a document. */
+const SKIP = new Set(['SCRIPT', 'STYLE', 'HEAD', 'TITLE', 'META', 'LINK', 'TEMPLATE', 'NOSCRIPT', 'SVG', 'CANVAS', 'IFRAME', 'OBJECT', 'EMBED', 'BUTTON', 'SELECT', 'TEXTAREA', 'INPUT', 'VIDEO', 'AUDIO']);
+/** Elements that make blocks; everything else is inline. */
+const BLOCK = new Set([
+    'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'BODY', 'CENTER', 'DD', 'DETAILS', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
+    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HR', 'HTML', 'LI', 'MAIN', 'NAV', 'OL', 'P', 'PRE', 'SECTION', 'SUMMARY', 'TABLE', 'UL'
+]);
+const BLOCK_SELECTOR = [...BLOCK].map((t) => t.toLowerCase()).join(',');
+/** A block, or an inline element that holds blocks (Google Docs wraps a whole copy in a <b>): a container then. */
+const isBlock = (n) => n instanceof HTMLElement && (BLOCK.has(n.tagName) || (!SKIP.has(n.tagName) && !!n.querySelector(BLOCK_SELECTOR)));
+/** Marks around text, with its spaces kept outside (`** bold**` is no mark). */
+function wrap(inner, open, close = open) {
+    const [, a, core, b] = /^(\s*)([\s\S]*?)(\s*)$/.exec(inner);
+    return core ? a + open + core + close + b : inner;
+}
+/** The marks a span's inline style stands for (Google Docs writes bold and italic as styles). */
+function styled(el, inner) {
+    const s = el.style;
+    const weight = s.fontWeight;
+    let out = inner;
+    if (weight === 'bold' || weight === 'bolder' || Number(weight) >= 600)
+        out = wrap(out, '**');
+    if (s.fontStyle === 'italic')
+        out = wrap(out, '*');
+    if (s.textDecoration.includes('line-through') || s.textDecorationLine.includes('line-through'))
+        out = wrap(out, '~~');
+    if (s.textDecoration.includes('underline') || s.textDecorationLine.includes('underline'))
+        out = wrap(out, '<u>', '</u>');
+    if (s.verticalAlign === 'super')
+        out = wrap(out, '<sup>', '</sup>');
+    if (s.verticalAlign === 'sub')
+        out = wrap(out, '<sub>', '</sub>');
+    return out;
+}
+/** Inline content as inline markdown; `\n` where the HTML breaks a line. */
+function inline(nodes) {
+    let text = '';
+    // HTML collapses neighbouring spaces, also across marks ("a <b> b</b>").
+    const out = {
+        add(s) {
+            text += /[ \n]$/.test(text) || !text ? s.replace(/^ +/, '') : s;
+        }
+    };
+    for (const n of nodes) {
+        if (n.nodeType === Node.TEXT_NODE) {
+            out.add(escText((n.textContent ?? '').replace(/[ \t\r\n]+/g, ' ')));
+            continue;
+        }
+        if (!(n instanceof HTMLElement) || SKIP.has(n.tagName))
+            continue;
+        const tag = n.tagName;
+        if (tag === 'BR') {
+            out.add('\n');
+            continue;
+        }
+        if (tag === 'IMG') {
+            // No images in the package: a picture becomes a link to it.
+            const src = n.getAttribute('src') ?? '';
+            if (/^https?:/i.test(src))
+                out.add(`[${escText(n.getAttribute('alt') || src)}](${mdUrl(src)})`);
+            continue;
+        }
+        if (tag === 'CODE' || tag === 'KBD' || tag === 'SAMP' || tag === 'TT') {
+            const text = (n.textContent ?? '').replace(/\s+/g, ' ');
+            out.add(text.trim() ? codeSpan(text) : text);
+            continue;
+        }
+        // A block inside inline content (a paragraph in a list item): its own line.
+        const inner = isBlock(n) ? `\n${inline(n.childNodes).trim()}\n` : inline(n.childNodes);
+        if (tag === 'A') {
+            const href = n.getAttribute('href') ?? '';
+            out.add(inner.trim() && href && !href.startsWith('#') ? wrap(inner, '[', `](${mdUrl(href)})`) : inner);
+        }
+        else if (tag === 'B' || tag === 'STRONG') {
+            // Google Docs wraps a whole copy in <b style="font-weight:normal">.
+            const w = n.style.fontWeight;
+            out.add(w === 'normal' || w === '400' ? styled(n, inner) : wrap(inner, '**'));
+        }
+        else if (tag === 'I' || tag === 'EM' || tag === 'CITE' || tag === 'DFN' || tag === 'VAR')
+            out.add(wrap(inner, '*'));
+        else if (tag === 'U' || tag === 'INS')
+            out.add(wrap(inner, '<u>', '</u>'));
+        else if (tag === 'S' || tag === 'DEL' || tag === 'STRIKE')
+            out.add(wrap(inner, '~~'));
+        else if (tag === 'SUB' || tag === 'SUP')
+            out.add(wrap(inner, `<${tag.toLowerCase()}>`, `</${tag.toLowerCase()}>`));
+        else
+            out.add(styled(n, inner));
+    }
+    return text;
+}
+/** Inline markdown as the lines of a paragraph: each line escaped where it would read as a block start. */
+const lines = (md) => md
+    .split('\n')
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map(escLine);
+/** A container's children as markdown chunks (blocks); runs of inline content become paragraphs. */
+function chunks(el) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        const ls = lines(inline(run));
+        if (ls.length)
+            out.push(ls.join('\n'));
+        run = [];
+    };
+    for (const n of el.childNodes) {
+        if (n instanceof HTMLElement && SKIP.has(n.tagName))
+            continue;
+        if (isBlock(n)) {
+            flush();
+            out.push(...block(n));
+        }
+        else
+            run.push(n);
+    }
+    flush();
+    return out;
+}
+function block(el) {
+    const tag = el.tagName;
+    if (/^H[1-6]$/.test(tag)) {
+        const text = inline(el.childNodes).replace(/\s*\n\s*/g, ' ').trim();
+        return text ? [`${'#'.repeat(+tag[1])} ${text}`] : [];
+    }
+    if (tag === 'HR')
+        return ['---'];
+    if (tag === 'UL' || tag === 'OL') {
+        const md = list(el, 0);
+        return md ? [md] : [];
+    }
+    if (tag === 'PRE') {
+        const text = (el.textContent ?? '').replace(/\r/g, '').replace(/\n$/, '');
+        const lang = /(?:^|\s)(?:language|lang)-([\w+#.-]+)/.exec(`${el.className} ${el.querySelector('code')?.className ?? ''}`)?.[1] ?? '';
+        const fence = '`'.repeat(Math.max(3, ...(text.match(/`+/g) ?? []).map((r) => r.length + 1)));
+        return [`${fence}${lang}\n${text}\n${fence}`];
+    }
+    if (tag === 'BLOCKQUOTE') {
+        const inner = chunks(el);
+        return inner.length ? [inner.map((c) => c.split('\n').map((l) => `> ${l}`).join('\n')).join('\n>\n')] : [];
+    }
+    if (tag === 'TABLE')
+        return table(el);
+    return chunks(el);
+}
+/** A list and its nested lists, `indent` spaces in. */
+function list(el, indent) {
+    const pad = ' '.repeat(indent);
+    const ordered = el.tagName === 'OL';
+    let n = Number(el.getAttribute('start')) || 1;
+    const out = [];
+    for (const li of el.children) {
+        if (li.tagName !== 'LI')
+            continue;
+        const box = li.querySelector(':scope > input[type="checkbox"], :scope > p > input[type="checkbox"], :scope > label > input[type="checkbox"]');
+        const marker = ordered ? `${n++}. ` : box ? `- [${box.checked || box.hasAttribute('checked') ? 'x' : ' '}] ` : '- ';
+        const own = [...li.childNodes].filter((c) => !(c instanceof HTMLElement && (c.tagName === 'UL' || c.tagName === 'OL')));
+        const [first = '', ...more] = lines(inline(own));
+        out.push(pad + marker + first);
+        const inner = ' '.repeat(indent + marker.length);
+        for (const l of more)
+            out.push(inner + l);
+        for (const sub of li.children)
+            if (sub.tagName === 'UL' || sub.tagName === 'OL') {
+                const md = list(sub, indent + marker.length);
+                if (md)
+                    out.push(md);
+            }
+    }
+    return out.join('\n');
+}
+/** A table as a GFM table: the first row is the header; the alignment from the header cells. */
+function table(el) {
+    const rows = [...el.querySelectorAll('tr')].filter((tr) => tr.closest('table') === el);
+    const grid = rows.map((tr) => [...tr.children]
+        .filter((c) => c.tagName === 'TD' || c.tagName === 'TH')
+        .map((c) => inline(c.childNodes).replace(/\s*\n\s*/g, '<br>').trim().replace(/\|/g, '\\|')));
+    if (!grid.length || !grid[0].length)
+        return [];
+    const width = Math.max(...grid.map((r) => r.length));
+    const align = [...rows[0].children].map((c) => {
+        const a = (c.style.textAlign || c.getAttribute('align') || '').toLowerCase();
+        return a === 'center' ? ':-:' : a === 'right' ? '--:' : '---';
+    });
+    const row = (r) => `| ${[...r, ...Array(width - r.length).fill('')].join(' | ')} |`;
+    return [[row(grid[0]), row(Array.from({ length: width }, (_, i) => align[i] ?? '---')), ...grid.slice(1).map(row)].join('\n')];
+}
+/** HTML (a pasted fragment or a page) as markdown. Browser only. */
+export function markdownFromHtml(html) {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return chunks(doc.body).join('\n\n');
+}
+/**
+ * HTML -> blocks, the way the editor takes a formatted paste: headings, paragraphs, lists (nested, numbered with their
+ * start, to-dos from checkboxes), quotes, code (`pre`, with a `language-…` class), rules, and inline marks — also
+ * Google Docs' styled spans. A table goes to the first of `plugins` that takes tables (`fromTable`). Images become
+ * links; scripts, styles and form controls are dropped. Browser only.
+ */
+export function fromHtml(html, opts = {}) {
+    return fromMarkdown(markdownFromHtml(html), opts);
+}

package/dist/i18n.js

@@ -1,7 +1,7 @@
 // UI text. The editor and the plugins are written in English; a host passes `messages` (English text -> its own) to
 // the top editor or preview, and nested editors and plugin views inherit them. `{name}` placeholders are filled in.
 import { getContext, setContext } from 'svelte';
-const KEY = 'block-editor:text';
+const KEY = 'brickee:text';
 export const translator = (messages) => (text, vars) => {
     const out = messages?.[text] ?? text;
     return vars ? out.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m)) : out;

package/dist/index.d.ts

@@ -5,9 +5,10 @@ export { default as Empty } from './kit/Empty.svelte';
 export * from './kit/util';
 export * from './model';
 export { inline, fromStored, toStored, fromMarkdown, toMarkdown } from './markdown';
+export { fromHtml } from './html';
 export { provideView, useView } from './view';
 export { provideCodeLanguages, useCodeLanguages, type CodeLanguage } from './code';
 export { scrollSync, scrollFraction, setScrollFraction, type ScrollSync } from './scroll';
 export { provideText, useText, translator, type Messages, type Translate } from './i18n';
 export { PALETTE_ITEMS, BUILT_IN_IDS, narrowPalette, type Icon, type PaletteItem } from './palette';
-export type { MarkdownContext, Block, BlockType, Content, PluginPreviewProps, PluginViewProps, PropField, Props, BlockPlugin } from './types';
+export type { MarkdownContext, MarkdownTable, Block, BlockType, Content, PluginPreviewProps, PluginViewProps, PropField, Props, BlockPlugin } from './types';

package/dist/index.js

@@ -1,6 +1,6 @@
-// block-editor: a Svelte 5 block editor. The core is markdown (`md:p`, `md:h2`, `md:code`…) plus the kit to write plugins
+// Brickee: a Svelte 5 block editor. The core is markdown (`md:p`, `md:h2`, `md:code`…) plus the kit to write plugins
 // with; every other block is a plugin with an editor view, a site preview and optionally a markdown form. The bundled
-// plugins (block-editor/plugins) are plugins like any other. The stored form is `StoredBlock[]` (see model.ts).
+// plugins (@atom-forge/brickee/plugins) are plugins like any other. The stored form is `StoredBlock[]` (see model.ts).
 export { default as Editor } from './Editor.svelte';
 export { default as Preview } from './Preview.svelte';
 // The kit: what plugins are written with (box frame, empty state, helpers).
@@ -9,6 +9,7 @@ export { default as Empty } from './kit/Empty.svelte';
 export * from './kit/util';
 export * from './model';
 export { inline, fromStored, toStored, fromMarkdown, toMarkdown } from './markdown';
+export { fromHtml } from './html';
 export { provideView, useView } from './view';
 export { provideCodeLanguages, useCodeLanguages } from './code';
 export { scrollSync, scrollFraction, setScrollFraction } from './scroll';