@atom-forge/brickee 0.0.1 → 0.0.3

package/dist/dom.js

@@ -8,6 +8,15 @@ export function rich(node, value) {
         }
     };
 }
+/**
+ * Svelte action: moves the element to the end of the body. A floating menu positioned with `position: fixed` is then
+ * placed against the viewport even when the editor sits in a transformed parent (an animated drawer, a dialog), where
+ * `fixed` would be relative to that parent.
+ */
+export function portal(node) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+}
 export function serialize(frag) {
     const d = document.createElement('div');
     d.append(frag);

package/dist/editor/BlockMenu.svelte

@@ -0,0 +1,102 @@
+<!-- A block menu of the editor: the slash menu (block types to insert) and the turn-into menu (what the selected
+     blocks can become). Compact one-line rows: icon, label, and the hint after it in grey. The editor keeps the state
+     (which row is active, where the menu is) and handles the keys. -->
+<script lang="ts" module>
+	import type { Icon } from '../palette';
+
+	export interface MenuRow {
+		key: string;
+		icon: Icon;
+		label: string;
+		hint: string;
+		/** The hint as a warning (e.g. "Loses formatting"). */
+		warn?: boolean;
+		/** A destructive row (delete), in red. */
+		danger?: boolean;
+		/** The current type of the selection: a check mark. */
+		current?: boolean;
+		/** A separator line above this row. */
+		gap?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { Check } from '@lucide/svelte';
+	import { portal } from '../dom';
+
+	let {
+		rows,
+		index,
+		x,
+		y,
+		up,
+		turn = false,
+		caption,
+		label,
+		onpick,
+		onhover
+	}: {
+		rows: MenuRow[];
+		index: number;
+		x: number;
+		y: number;
+		/** Opens upwards from `y` (no room below). */
+		up: boolean;
+		/** The turn-into menu: a little narrower and taller. */
+		turn?: boolean;
+		caption?: string;
+		label: string;
+		onpick: (n: number) => void;
+		onhover: (n: number) => void;
+	} = $props();
+
+	let menu: HTMLDivElement;
+	// Keep the highlighted row visible while moving through the menu with the arrow keys.
+	$effect(() => {
+		void index;
+		menu?.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+<!-- `menu`, `turn` and `active` are hooks (closing on an outside click, scrolling the active row into view), not styles.
+     It lives in the body (portal), so it keeps the editor's type size and colour itself. -->
+<div
+	bind:this={menu}
+	use:portal
+	class="menu fixed z-30 overflow-auto text-[17px] leading-[1.65] text-surface-contrast rounded-xl border border-frame bg-surface p-1.5 shadow-[0_10px_36px_rgb(0_0_0/0.2)] {turn
+		? 'turn max-h-[340px] w-60'
+		: 'max-h-[300px] w-[260px]'} {up ? '-translate-y-full' : ''}"
+	style:left="{x}px"
+	style:top="{y}px"
+	role="listbox"
+	aria-label={label}
+>
+	{#if caption}
+		<div class="px-2 pt-1 pb-1.5 font-[system-ui] text-[11px] leading-[normal] font-semibold tracking-[0.06em] text-muted-contrast uppercase">{caption}</div>
+	{/if}
+	{#each rows as row, n (row.key)}
+		{#if row.gap}<div class="mx-1 my-1.5 h-px bg-frame"></div>{/if}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="item flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-[3px] {n === index ? 'active bg-accent/14' : ''} {row.danger ? 'text-[#dc2626]' : ''}"
+			role="option"
+			tabindex="-1"
+			aria-selected={n === index}
+			onmousedown={(e) => {
+				e.preventDefault();
+				onpick(n);
+			}}
+			onmouseenter={() => onhover(n)}
+		>
+			<span class="grid size-6 flex-none place-items-center rounded-md border border-frame {row.danger ? 'text-[#dc2626]' : 'text-surface-contrast'}"
+				><row.icon size={14} /></span
+			>
+			<span class="flex min-w-0 items-baseline gap-1.5 overflow-hidden whitespace-nowrap"
+				><b class="font-[system-ui] text-[13px] leading-[normal] font-medium">{row.label}</b><small
+					class="overflow-hidden text-[11px] text-ellipsis {row.warn ? 'text-[#b45309]' : 'text-muted-contrast'}">{row.hint}</small
+				></span
+			>
+			{#if row.current}<span class="ml-auto flex text-accent"><Check size={16} /></span>{/if}
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,32 @@
+import type { Icon } from '../palette';
+export interface MenuRow {
+    key: string;
+    icon: Icon;
+    label: string;
+    hint: string;
+    /** The hint as a warning (e.g. "Loses formatting"). */
+    warn?: boolean;
+    /** A destructive row (delete), in red. */
+    danger?: boolean;
+    /** The current type of the selection: a check mark. */
+    current?: boolean;
+    /** A separator line above this row. */
+    gap?: boolean;
+}
+type $$ComponentProps = {
+    rows: MenuRow[];
+    index: number;
+    x: number;
+    y: number;
+    /** Opens upwards from `y` (no room below). */
+    up: boolean;
+    /** The turn-into menu: a little narrower and taller. */
+    turn?: boolean;
+    caption?: string;
+    label: string;
+    onpick: (n: number) => void;
+    onhover: (n: number) => void;
+};
+declare const BlockMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockMenu = ReturnType<typeof BlockMenu>;
+export default BlockMenu;

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[];