@atom-forge/brickee 0.0.0-stage → 0.0.1

package/dist/PropsBar.svelte

@@ -0,0 +1,395 @@
+<!-- The fields of a plugin block, on the top of its box. Closed: only a small header (the block's tag); a click on it
+     opens the fields in place: a wrapping row (label and control side by side), text areas on their own full-width rows. An image field shows the picked image(s); a click
+     opens the picker (ImagePicker) with all the document's images. -->
+<script lang="ts">
+	import { ColorPicker, Input, NativeSelect, Slider, Textarea, getPopupManager } from '@atom-forge/ui';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { slide } from 'svelte/transition';
+	import ImagePicker from './ImagePicker.svelte';
+	import { useView } from './view';
+	import type { Translate } from './i18n';
+	import type { MediaItem } from './media';
+	import type { Block, PropField } from './types';
+
+	interface Props {
+		block: Block;
+		tag: string;
+		fields: PropField[];
+		media: MediaItem[];
+		tr: Translate;
+		/** Sets one property from its field's text and returns the text as it is now kept. */
+		setProp: (b: Block, f: PropField, raw: string) => string;
+		/** Sets one property to a value as it is ('' or undefined removes it). */
+		setValue: (b: Block, key: string, v: unknown) => void;
+		pickMedia: (b: Block, f: PropField, id: string) => void;
+		/** Start with the fields open (a block just made). */
+		open?: boolean;
+	}
+	let { block, tag, fields, media, tr, setProp, setValue, pickMedia, open: startOpen = false }: Props = $props();
+	// svelte-ignore state_referenced_locally
+	let open = $state(startOpen);
+
+	const text = (f: PropField) => {
+		const v = block.props?.[f.key];
+		return f.format ? f.format(v) : v == null ? '' : String(v);
+	};
+	const picked = (f: PropField): string[] => {
+		const v = block.props?.[f.key];
+		return Array.isArray(v) ? v : v ? [String(v)] : [];
+	};
+	const optionLabel = (f: PropField, i: number) => {
+		const opt = f.options?.[i];
+		return opt ? tr(opt.label, { n: opt.value }) : '';
+	};
+	// Sliders: with `min`/`max` a free number (left of `min` a "none" notch that removes the value), otherwise the
+	// index of one of the `options` (an unknown value: the first). With `views`, the slider edits the value of the view
+	// the host gives (useView; none given: the base): a view without its own shows the one it takes (from the views
+	// before it), and its notch means "take it".
+	const free = (f: PropField) => f.min != null && f.max != null;
+	const low = (f: PropField) => (f.none ? f.min! - Math.round((f.max! - f.min!) / 12) : f.min!);
+	const view = useView();
+	const viewOf = (f: PropField) => {
+		const v = view();
+		return f.views?.some((x) => x.key === v) ? v! : (f.views?.[0]?.key ?? '');
+	};
+	/** The view a per-view field edits, for its label (only when the host gives one). */
+	const viewLabel = (f: PropField) => {
+		const v = f.views && view() ? f.views.find((x) => x.key === viewOf(f)) : undefined;
+		return v ? tr(v.label) : '';
+	};
+	const byView = (v: unknown): v is Record<string, unknown> => !!v && typeof v === 'object' && !Array.isArray(v);
+	/** A view's own value (as text), '' when it has none. */
+	const own = (f: PropField, view: string) => {
+		const v = block.props?.[f.key];
+		const raw = byView(v) ? v[view] : view === f.views?.[0]?.key ? v : undefined;
+		return f.format ? f.format(raw) : raw == null ? '' : String(raw);
+	};
+	/** The text the picked view shows: its own, or the one it takes; and whether it is its own. */
+	const current = (f: PropField): { text: string; mine: boolean } => {
+		if (!f.views) return { text: text(f), mine: true };
+		const keys = f.views.map((v) => v.key);
+		const at = keys.indexOf(viewOf(f));
+		for (let i = at; i >= 0; i--) {
+			const t = own(f, keys[i]);
+			if (t) return { text: t, mine: i === at };
+		}
+		return { text: '', mine: at === 0 };
+	};
+	const pos = (f: PropField) => {
+		const t = current(f).text;
+		if (!free(f)) return Math.max(0, (f.options ?? []).findIndex((o) => o.value === t));
+		const n = Number(t);
+		return t && Number.isFinite(n) ? Math.min(f.max!, Math.max(f.min!, n)) : low(f);
+	};
+	const setPos = (f: PropField, v: number) => {
+		const t = free(f) ? (v < f.min! ? '' : String(Math.round(v))) : (f.options?.[v]?.value ?? '');
+		if (!f.views) return setProp(block, f, t);
+		// the views' own values, the picked one changed; only the base: stored alone
+		const keys = f.views.map((x) => x.key);
+		const next: Record<string, string> = {};
+		for (const k of keys) {
+			const value = k === viewOf(f) ? t : own(f, k);
+			if (value) next[k] = value;
+		}
+		const set = Object.keys(next);
+		setValue(block, f.key, !set.length ? '' : set.length === 1 && set[0] === keys[0] ? next[keys[0]] : next);
+	};
+	const posLabel = (f: PropField) => {
+		const { text: t, mine } = current(f);
+		const n = Number(t);
+		const shown = !free(f) ? optionLabel(f, pos(f)) : t && Number.isFinite(n) ? `${Math.round(n)}${f.unit ?? ''}` : tr(f.none ?? '');
+		return mine ? shown : `${shown} (${tr('inherited')})`;
+	};
+
+	// A text area keeps its text as typed while it has the focus (a list keeps its empty lines while typing); the block
+	// gets the parsed value. Out of focus it shows the value as kept (so undo shows through).
+	let editing = $state<{ key: string; text: string } | null>(null);
+
+	const short = $derived(fields.filter((f) => f.kind !== 'textarea'));
+	const long = $derived(fields.filter((f) => f.kind === 'textarea'));
+
+	const popups = getPopupManager();
+	const urlOf = (id: string) => media.find((m) => m.id === id);
+	function openPicker(e: MouseEvent, f: PropField) {
+		popups.open.component(
+			ImagePicker,
+			{ media, multiple: f.kind === 'images', getPicked: () => picked(f), pick: (id: string) => pickMedia(block, f, id), tr },
+			{ anchor: e, align: 'left' }
+		);
+	}
+</script>
+
+<div class="light bar" class:open>
+	<button type="button" class="head" aria-expanded={open} title={tr(open ? 'Hide settings' : 'Settings')} onmousedown={(e) => e.preventDefault()} onclick={() => (open = !open)}>
+		<span class="tag">{tag}</span>
+		<ChevronDown size={13} class="chev" />
+	</button>
+	{#if open}
+	<div class="body" transition:slide={{ duration: 180 }}>
+	<div class="grid">
+		{#each short as f (f.key)}
+			{#if f.kind === 'image' || f.kind === 'images'}
+				{@const ids = picked(f)}
+				<div class="field">
+					<span class="name">{tr(f.label)}</span>
+					<button type="button" class="chosen" title={tr('Choose')} onclick={(e) => openPicker(e, f)}>
+						{#each ids as id, n (id)}
+							{@const m = urlOf(id)}
+							{#if m}<img src={m.url} alt={m.name} />{:else}<span class="missing" title={id}>?</span>{/if}
+							{#if f.kind === 'images' && n === 5 && ids.length > 6}<span class="more">+{ids.length - 6}</span>{/if}
+						{:else}
+							<span class="empty">{tr('Choose…')}</span>
+						{/each}
+					</button>
+				</div>
+			{:else}
+			<!-- not a label around buttons (a slider's view buttons, a colour's clear): a click on a label goes to its first button -->
+			<svelte:element this={f.kind === 'slider' || f.kind === 'color' ? 'div' : 'label'} class="field">
+				<span class="name"
+					>{tr(f.label)}{#if viewLabel(f)}<span class="view" class:own={current(f).mine}>{viewLabel(f)}</span>{/if}</span
+				>
+				{#if f.kind === 'select'}
+					<NativeSelect
+						options={(f.options ?? []).map((opt) => ({ value: opt.value, label: tr(opt.label, { n: opt.value }) }))}
+						bind:value={() => text(f), (v: string) => setProp(block, f, v)}
+					/>
+				{:else if f.kind === 'slider'}
+					<span class="line">
+					<span class="slider">
+						<Slider
+							compact
+							drawStops={!free(f) && (f.options?.length ?? 0) <= 10}
+							min={free(f) ? low(f) : 0}
+							max={free(f) ? f.max : (f.options?.length ?? 1) - 1}
+							step={free(f) ? (f.step ?? 1) : 1}
+							bind:value={() => pos(f), (v: number) => setPos(f, v)}
+						/>
+					</span>
+					<span class="value">{posLabel(f)}</span>
+					</span>
+				{:else if f.kind === 'color'}
+					<!-- with `none`: an unset colour shows as "none" (a click sets one); a set one can be cleared -->
+					<span class="line">
+					{#if f.none && !text(f)}
+						<button type="button" class="nocolor" onclick={() => setProp(block, f, f.placeholder || '#000000')}>
+							<span class="swatch" aria-hidden="true"></span>{tr(f.none)}
+						</button>
+					{:else}
+						<ColorPicker bind:value={() => text(f) || '#000000', (v: string) => setProp(block, f, v)} />
+						{#if f.none}
+							<button type="button" class="clear" title={tr(f.none)} aria-label={tr(f.none)} onclick={() => setProp(block, f, '')}>×</button>
+						{/if}
+					{/if}
+					</span>
+				{:else}
+					<!-- the field shows the value as kept (a YouTube link becomes its id) -->
+					<Input monospace placeholder={f.placeholder && tr(f.placeholder)} bind:value={() => text(f), (v: string) => setProp(block, f, v)} />
+				{/if}
+			</svelte:element>
+			{/if}
+		{/each}
+	{#each long as f (f.key)}
+		<label class="field long" onfocusin={() => (editing = { key: f.key, text: text(f) })} onfocusout={() => (editing = null)}>
+				<span class="name">{tr(f.label)}</span>
+				<Textarea
+					rows={3}
+					placeholder={f.placeholder && tr(f.placeholder)}
+					bind:value={() => (editing?.key === f.key ? editing.text : text(f)), (v: string) => {
+						if (editing?.key === f.key) editing.text = v;
+						setProp(block, f, v);
+					}}
+				/>
+			</label>
+	{/each}
+	</div>
+	</div>
+	{/if}
+</div>
+
+<style>
+	.bar {
+		display: grid;
+		justify-items: start;
+		gap: 6px;
+		margin-bottom: 4px;
+		border-radius: 8px;
+		font: 12px/1.4 system-ui, sans-serif;
+		color: #1d1d1f;
+	}
+	.bar.open {
+		justify-items: stretch;
+		margin-bottom: 8px;
+		padding: 8px 12px 12px;
+		background: rgba(120, 120, 140, 0.07);
+	}
+	.bar {
+		transition:
+			padding 0.18s,
+			background 0.18s;
+	}
+	/* the fields in 1–3 columns (as wide as the box allows), each with its label above */
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 12px 16px;
+		padding-top: 8px;
+	}
+	.head {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: #8e8e96;
+		cursor: pointer;
+		justify-self: start;
+	}
+	.head:hover .tag {
+		background: rgba(120, 120, 140, 0.2);
+		color: #1d1d1f;
+	}
+	.head :global(.chev) {
+		transition: rotate 0.15s;
+	}
+	.open .head :global(.chev) {
+		rotate: 180deg;
+	}
+	.tag {
+		padding: 1px 6px;
+		border-radius: 5px;
+		background: rgba(120, 120, 140, 0.12);
+		color: #6e6e76;
+		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+		white-space: nowrap;
+		user-select: none;
+	}
+	.field {
+		display: grid;
+		align-content: start;
+		gap: 4px;
+		min-width: 0;
+	}
+	/* text areas take a whole row */
+	.field.long {
+		grid-column: 1 / -1;
+	}
+	.line {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+	}
+	.name {
+		font-size: 11.5px;
+		font-weight: 600;
+		color: #8e8e96;
+		white-space: nowrap;
+		user-select: none;
+	}
+	/* the view a per-view field edits (the host's current one); dashed while it only takes a wider view's value */
+	.view {
+		margin-left: 6px;
+		padding: 0 5px;
+		border: 1px dashed #c8c8d0;
+		border-radius: 4px;
+		color: #6e6e76;
+		font-weight: 500;
+	}
+	.view.own {
+		border-style: solid;
+		border-color: #1d1d1f;
+		color: #1d1d1f;
+	}
+	.slider {
+		display: block;
+		flex: 1;
+		min-width: 80px;
+	}
+	.value {
+		min-width: 4.5em;
+		color: #3a3a40;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+	.nocolor {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		height: 30px;
+		padding: 0 10px 0 6px;
+		border: 1px dashed #c8c8d0;
+		border-radius: 7px;
+		background: #fff;
+		color: #8e8e96;
+		cursor: pointer;
+	}
+	.nocolor:hover {
+		border-color: var(--color-accent, #ea580c);
+		color: #3a3a40;
+	}
+	/* an empty swatch, struck through */
+	.swatch {
+		width: 16px;
+		height: 16px;
+		border: 1px solid #c8c8d0;
+		border-radius: 4px;
+		background: linear-gradient(to top right, transparent calc(50% - 1px), #e5484d calc(50% - 1px), #e5484d calc(50% + 1px), transparent calc(50% + 1px));
+	}
+	.clear {
+		width: 22px;
+		height: 22px;
+		padding: 0;
+		border: 0;
+		border-radius: 6px;
+		background: none;
+		color: #8e8e96;
+		font-size: 16px;
+		line-height: 1;
+		cursor: pointer;
+	}
+	.clear:hover {
+		background: rgba(120, 120, 140, 0.14);
+		color: #1d1d1f;
+	}
+	.chosen {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		min-height: 30px;
+		padding: 2px;
+		border: 1px solid #dcdce2;
+		border-radius: 7px;
+		background: #fff;
+		cursor: pointer;
+	}
+	.chosen:hover {
+		border-color: var(--color-accent, #ea580c);
+	}
+	/* images after the sixth are a "+n" */
+	.chosen > img:nth-of-type(n + 7) {
+		display: none;
+	}
+	.chosen img,
+	.chosen .missing {
+		width: 40px;
+		height: 24px;
+		object-fit: cover;
+		border-radius: 4px;
+	}
+	.chosen .missing {
+		display: grid;
+		place-items: center;
+		background: #eee;
+		color: #8e8e96;
+	}
+	.chosen .more {
+		padding: 0 4px;
+		color: #6e6e76;
+		font-size: 11px;
+	}
+	.chosen .empty {
+		padding: 0 8px;
+		color: #8e8e96;
+	}
+</style>

package/dist/PropsBar.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Translate } from './i18n';
+import type { MediaItem } from './media';
+import type { Block, PropField } from './types';
+interface Props {
+    block: Block;
+    tag: string;
+    fields: PropField[];
+    media: MediaItem[];
+    tr: Translate;
+    /** Sets one property from its field's text and returns the text as it is now kept. */
+    setProp: (b: Block, f: PropField, raw: string) => string;
+    /** Sets one property to a value as it is ('' or undefined removes it). */
+    setValue: (b: Block, key: string, v: unknown) => void;
+    pickMedia: (b: Block, f: PropField, id: string) => void;
+    /** Start with the fields open (a block just made). */
+    open?: boolean;
+}
+declare const PropsBar: import("svelte").Component<Props, {}, "">;
+type PropsBar = ReturnType<typeof PropsBar>;
+export default PropsBar;

package/dist/dom.d.ts

@@ -0,0 +1,29 @@
+/** Svelte action: sets innerHTML once and only re-syncs when the model differs from the DOM (keeps the caret). */
+export declare function rich(node: HTMLElement, value: string): {
+    update(v: string): void;
+};
+export declare function serialize(frag: DocumentFragment): string;
+/** Returns '' for html that has no visible text (e.g. `<b></b>`, `<br>`). */
+export declare function clean(h: string): string;
+export declare function textLen(h: string): number;
+export declare function splitAtCaret(el: HTMLElement): [string, string] | null;
+export declare function atStart(el: HTMLElement): boolean;
+export declare function atEnd(el: HTMLElement): boolean;
+export declare function caretOffset(el: HTMLElement): number;
+export declare function setCaret(el: HTMLElement, where?: 'start' | 'end' | number): void;
+/** Viewport rect of the caret, or null when the browser can't tell (empty block). */
+export declare function caretRect(): DOMRect | null;
+/** Places the caret in `el` at the viewport point (x, y). Keeps the horizontal position while moving between blocks. */
+export declare function caretAt(el: HTMLElement, x: number, y: number): boolean;
+/** Deletes `n` characters directly before the caret (inside the caret's text node). */
+export declare function removeBeforeCaret(n: number): boolean;
+/** Is the caret on the first (up) or last (down) visual line of the block? */
+export declare function onEdgeLine(el: HTMLElement, up: boolean): boolean;
+/**
+ * Plain text: a selection loses every mark and link; a caret steps out of the marks around it, so what is typed next
+ * is plain (a zero-width space holds it there; the markdown conversion drops it).
+ */
+export declare function plainText(el: HTMLElement): void;
+export declare function toggleCode(el: HTMLElement): void;
+/** Is the selection's moving end (focus) at the very start (up) or end (down) of the block's text? */
+export declare function focusAtEdge(el: HTMLElement, up: boolean): boolean;

package/dist/dom.js

@@ -0,0 +1,224 @@
+/** Svelte action: sets innerHTML once and only re-syncs when the model differs from the DOM (keeps the caret). */
+export function rich(node, value) {
+    node.innerHTML = value;
+    return {
+        update(v) {
+            if (node.innerHTML !== v)
+                node.innerHTML = v;
+        }
+    };
+}
+export function serialize(frag) {
+    const d = document.createElement('div');
+    d.append(frag);
+    return d.innerHTML;
+}
+/** Returns '' for html that has no visible text (e.g. `<b></b>`, `<br>`). */
+export function clean(h) {
+    const d = document.createElement('div');
+    d.innerHTML = h;
+    return d.textContent ? h : '';
+}
+export function textLen(h) {
+    const d = document.createElement('div');
+    d.innerHTML = h;
+    return d.textContent?.length ?? 0;
+}
+function range() {
+    const sel = getSelection();
+    return sel && sel.rangeCount ? sel.getRangeAt(0) : null;
+}
+export function splitAtCaret(el) {
+    const r = range();
+    if (!r)
+        return null;
+    const pre = document.createRange();
+    pre.selectNodeContents(el);
+    pre.setEnd(r.startContainer, r.startOffset);
+    const post = document.createRange();
+    post.selectNodeContents(el);
+    post.setStart(r.endContainer, r.endOffset);
+    return [serialize(pre.cloneContents()), serialize(post.cloneContents())];
+}
+export function atStart(el) {
+    const r = range();
+    if (!r || !r.collapsed)
+        return false;
+    const pre = document.createRange();
+    pre.selectNodeContents(el);
+    pre.setEnd(r.startContainer, r.startOffset);
+    return pre.toString() === '';
+}
+export function atEnd(el) {
+    const r = range();
+    if (!r || !r.collapsed)
+        return false;
+    const post = document.createRange();
+    post.selectNodeContents(el);
+    post.setStart(r.endContainer, r.endOffset);
+    return post.toString() === '';
+}
+export function caretOffset(el) {
+    const r = range();
+    if (!r || !el.contains(r.startContainer))
+        return 0;
+    const pre = document.createRange();
+    pre.selectNodeContents(el);
+    pre.setEnd(r.startContainer, r.startOffset);
+    return pre.toString().length;
+}
+export function setCaret(el, where = 'end') {
+    el.focus({ preventScroll: true });
+    const sel = getSelection();
+    if (!sel)
+        return;
+    const r = document.createRange();
+    r.selectNodeContents(el);
+    if (where === 'start')
+        r.collapse(true);
+    else if (where === 'end')
+        r.collapse(false);
+    else {
+        r.collapse(false);
+        const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        let left = where;
+        let n;
+        while ((n = w.nextNode())) {
+            const len = n.textContent?.length ?? 0;
+            if (left <= len) {
+                r.setStart(n, left);
+                r.collapse(true);
+                break;
+            }
+            left -= len;
+        }
+    }
+    sel.removeAllRanges();
+    sel.addRange(r);
+    el.scrollIntoView({ block: 'nearest' });
+}
+/** Viewport rect of the caret, or null when the browser can't tell (empty block). */
+export function caretRect() {
+    const r = range();
+    if (!r)
+        return null;
+    const c = r.cloneRange();
+    c.collapse(false);
+    const rects = c.getClientRects();
+    const rect = rects.length ? rects[rects.length - 1] : c.getBoundingClientRect();
+    return rect && (rect.width || rect.height) ? rect : null;
+}
+/** Places the caret in `el` at the viewport point (x, y). Keeps the horizontal position while moving between blocks. */
+export function caretAt(el, x, y) {
+    const d = document;
+    let r = null;
+    if (d.caretPositionFromPoint) {
+        const p = d.caretPositionFromPoint(x, y);
+        if (p) {
+            r = document.createRange();
+            r.setStart(p.offsetNode, p.offset);
+        }
+    }
+    else if (d.caretRangeFromPoint) {
+        r = d.caretRangeFromPoint(x, y);
+    }
+    if (!r || !el.contains(r.startContainer))
+        return false;
+    r.collapse(true);
+    el.focus({ preventScroll: true });
+    const sel = getSelection();
+    sel.removeAllRanges();
+    sel.addRange(r);
+    el.scrollIntoView({ block: 'nearest' });
+    return true;
+}
+/** Deletes `n` characters directly before the caret (inside the caret's text node). */
+export function removeBeforeCaret(n) {
+    const r = range();
+    if (!r || r.startContainer.nodeType !== Node.TEXT_NODE || r.startOffset < n)
+        return false;
+    const t = r.startContainer;
+    const off = r.startOffset;
+    t.deleteData(off - n, n);
+    const nr = document.createRange();
+    nr.setStart(t, off - n);
+    nr.collapse(true);
+    const sel = getSelection();
+    sel.removeAllRanges();
+    sel.addRange(nr);
+    return true;
+}
+/** Is the caret on the first (up) or last (down) visual line of the block? */
+export function onEdgeLine(el, up) {
+    const sel = getSelection();
+    if (!sel || !sel.isCollapsed)
+        return false;
+    const cr = caretRect();
+    if (!cr)
+        return true;
+    const er = el.getBoundingClientRect();
+    const lh = parseFloat(getComputedStyle(el).lineHeight) || 24;
+    return up ? cr.top - er.top < lh * 0.5 : er.bottom - cr.bottom < lh * 0.5;
+}
+const MARKS = new Set(['B', 'STRONG', 'I', 'EM', 'U', 'S', 'STRIKE', 'DEL', 'SUB', 'SUP', 'CODE', 'A']);
+/**
+ * Plain text: a selection loses every mark and link; a caret steps out of the marks around it, so what is typed next
+ * is plain (a zero-width space holds it there; the markdown conversion drops it).
+ */
+export function plainText(el) {
+    const sel = getSelection();
+    const r = range();
+    if (!sel || !r || !el.contains(r.commonAncestorContainer))
+        return;
+    if (!r.collapsed) {
+        document.execCommand('removeFormat');
+        document.execCommand('unlink');
+        return;
+    }
+    let outer = null;
+    for (let n = r.startContainer; n && n !== el; n = n.parentNode)
+        if (MARKS.has(n.nodeName))
+            outer = n;
+    if (!outer)
+        return;
+    const t = document.createTextNode('\u200B');
+    outer.after(t);
+    const nr = document.createRange();
+    nr.setStart(t, 1);
+    nr.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(nr);
+}
+export function toggleCode(el) {
+    const sel = getSelection();
+    const r = range();
+    if (!sel || !r || r.collapsed)
+        return;
+    const anc = r.commonAncestorContainer;
+    const host = (anc instanceof Element ? anc : anc.parentElement)?.closest('code');
+    if (host && el.contains(host)) {
+        const nodes = [...host.childNodes];
+        host.replaceWith(...nodes);
+        return;
+    }
+    const c = document.createElement('code');
+    c.append(r.extractContents());
+    r.insertNode(c);
+    const nr = document.createRange();
+    nr.selectNodeContents(c);
+    sel.removeAllRanges();
+    sel.addRange(nr);
+}
+/** Is the selection's moving end (focus) at the very start (up) or end (down) of the block's text? */
+export function focusAtEdge(el, up) {
+    const sel = getSelection();
+    if (!sel || !sel.focusNode || !el.contains(sel.focusNode))
+        return false;
+    const r = document.createRange();
+    r.selectNodeContents(el);
+    if (up)
+        r.setEnd(sel.focusNode, sel.focusOffset);
+    else
+        r.setStart(sel.focusNode, sel.focusOffset);
+    return r.toString() === '';
+}

package/dist/i18n.d.ts

@@ -0,0 +1,7 @@
+export type Messages = Record<string, string>;
+export type Translate = (text: string, vars?: Record<string, string | number>) => string;
+export declare const translator: (messages?: Messages) => Translate;
+/** Call in a component's init. Without its own messages, a nested editor or preview keeps its parent's. */
+export declare function provideText(own: () => Messages | undefined): void;
+/** Call in a component's init; the returned function translates with the current messages. */
+export declare function useText(): Translate;

package/dist/i18n.js

@@ -0,0 +1,18 @@
+// 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';
+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;
+};
+/** Call in a component's init. Without its own messages, a nested editor or preview keeps its parent's. */
+export function provideText(own) {
+    const parent = getContext(KEY);
+    setContext(KEY, () => own() ?? parent?.());
+}
+/** Call in a component's init; the returned function translates with the current messages. */
+export function useText() {
+    const get = getContext(KEY);
+    return (text, vars) => translator(get?.())(text, vars);
+}