@quillmark/svelte 0.4.1 → 0.4.3

package/dist/visual/ArrayField.svelte

@@ -65,7 +65,8 @@
 	// rest per codec"), and the read that decodes a resting value to `Content` addresses
 	// a field, never an element (`getContent`; borb-sh/quillmark#1243), so a string is
 	// what the row is handed and a string is what it commits. The prose element stays
-	// the `richtext` arm, whose elements rest as `Content` and have one.
+	// the `richtext` arm: `Content` after a bound load or a commit, the authored
+	// string through the transport door, lowered in the row for the same reason.
 	//
 	// An array declaring no `items` has text elements.
 	const control = $derived(items && items.type !== 'plaintext' ? controlKind(items) : 'text');
@@ -107,6 +108,7 @@
 	const els: Record<string, { focus: () => void } | undefined> = $state({});
 	let addEl: HTMLButtonElement | undefined = $state();
 	let rootEl: HTMLElement | undefined = $state();
+	let rowsEl: HTMLElement | undefined = $state();
 
 	// The awaited flush below is the only work that outlives a gesture here, so the
 	// span carries no cancellers: it is the liveness `focusAfterFlush` asks for.
@@ -165,6 +167,14 @@
 		// nothing about focusing it that the DOM does not already know.
 		rootEl?.querySelector<HTMLTextAreaElement>('.qm-array-row textarea')?.focus();
 	}
+	/** The box an arrival wash blooms in (`leaves.ts`, `core/bloom.ts`): the elements,
+	 * not the header above them. This component owns the field's label, so the wrapper
+	 * `Field` blooms every other control inside would wash the label here too. Empty,
+	 * the box is `display: none` and the landing is answered by the focus the add
+	 * affordance takes. */
+	export function washBox(): HTMLElement | undefined {
+		return rowsEl;
+	}
 	/** Take the caret to element `k`: what a landing on an element address resolves to
 	 * (`leaves.ts`). The index resolves to the element's session id here, at the call,
 	 * never carried as one — an index is stale the moment anything above it splices.
@@ -188,10 +198,15 @@
 	}
 	/** Whether element `k` reads empty to the user. A text element's committed value
 	 * lags the input: a cleared field commits at `change`, not per keystroke
-	 * ({@link TextField}); so the input's own value is the truth; a prose element
-	 * commits every edit, so the committed `Content` is. */
+	 * ({@link TextField}); so the input's own value is the truth. A prose element
+	 * commits every edit, so the committed `Content` is; an authored string, the
+	 * transport-door rest, is empty when it has no characters. */
 	function elementEmpty(k: number, target: EventTarget | null): boolean {
-		if (control === 'prose') return !(arr[k] as Content | undefined)?.text;
+		if (control === 'prose') {
+			const el = arr[k];
+			if (typeof el === 'string') return el.length === 0;
+			return !(el as Content | undefined)?.text;
+		}
 		return target instanceof HTMLInputElement && !target.value;
 	}
 	/**
@@ -243,46 +258,48 @@
 			onclick={add}>{t.strings.arrayAdd}</button
 		>
 	</div>
-	{#each ids as id, k (id)}
-		<div class="qm-array-row">
-			{#if control === 'prose'}
-				<ProseArrayElement
-					bind:this={els[id]}
-					value={(arr[k] ?? emptyElement()) as Content}
-					label={label != null ? `${label} ${k + 1}` : undefined}
-					onChange={(rt) => commitElement(k, rt)}
-					onKey={(e) => onElementKey(e, k)}
-				/>
-			{:else if control === 'object'}
-				<textarea
-					class="qm-input qm-json qm-focus-ring"
-					aria-label={label != null ? `${label} ${k + 1}` : undefined}
-					value={JSON.stringify(arr[k] ?? {})}
-					onchange={(e) => {
-						try {
-							commitElement(k, JSON.parse((e.currentTarget as HTMLTextAreaElement).value));
-						} catch {
-							/* keep prior value on invalid JSON */
-						}
-					}}
-				></textarea>
-			{:else}
-				<TextField
-					bind:this={els[id]}
-					value={String(arr[k] ?? '')}
-					label={label != null ? `${label} ${k + 1}` : undefined}
-					onCommit={(v) => commitElement(k, v)}
-					onKey={(e) => onElementKey(e, k)}
-				/>
-			{/if}
-			<button
-				type="button"
-				class="qm-icon-btn qm-remove qm-focus-ring"
-				title={t.strings.arrayRemove}
-				onclick={() => remove(k)}><Icon name="minus" /></button
-			>
-		</div>
-	{/each}
+	<div class="qm-array-rows" class:empty={ids.length === 0} bind:this={rowsEl}>
+		{#each ids as id, k (id)}
+			<div class="qm-array-row">
+				{#if control === 'prose'}
+					<ProseArrayElement
+						bind:this={els[id]}
+						value={(arr[k] ?? emptyElement()) as Content | string}
+						label={label != null ? `${label} ${k + 1}` : undefined}
+						onChange={(rt) => commitElement(k, rt)}
+						onKey={(e) => onElementKey(e, k)}
+					/>
+				{:else if control === 'object'}
+					<textarea
+						class="qm-input qm-json qm-focus-ring"
+						aria-label={label != null ? `${label} ${k + 1}` : undefined}
+						value={JSON.stringify(arr[k] ?? {})}
+						onchange={(e) => {
+							try {
+								commitElement(k, JSON.parse((e.currentTarget as HTMLTextAreaElement).value));
+							} catch {
+								/* keep prior value on invalid JSON */
+							}
+						}}
+					></textarea>
+				{:else}
+					<TextField
+						bind:this={els[id]}
+						value={String(arr[k] ?? '')}
+						label={label != null ? `${label} ${k + 1}` : undefined}
+						onCommit={(v) => commitElement(k, v)}
+						onKey={(e) => onElementKey(e, k)}
+					/>
+				{/if}
+				<button
+					type="button"
+					class="qm-icon-btn qm-remove qm-focus-ring"
+					title={t.strings.arrayRemove}
+					onclick={() => remove(k)}><Icon name="minus" /></button
+				>
+			</div>
+		{/each}
+	</div>
 </div>
 
 <style>
@@ -302,6 +319,24 @@
 		justify-content: space-between;
 		gap: var(--_qm-space-2);
 	}
+	/* The elements, in a box of their own: the arrival wash blooms here rather than over
+	 the wrapper `Field` hands this component (`washBox`), which is the label's box too.
+	 Positioned for the wash's inset child, and rounded to the rung a row's own box
+	 draws, the way `.qm-field-control` is for every other control.
+
+	 `display: none` when there are no elements, so the header does not stand a gap above
+	 an empty box; a wash over it then paints nothing, which is what an array with
+	 nothing in it has to show. */
+	.qm-array-rows {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
+		border-radius: var(--_qm-radius-inner);
+	}
+	.qm-array-rows.empty {
+		display: none;
+	}
 	/* A grid rather than a block: an `<input>` and a `<textarea>` are inline-level and
 	 would sit on a baseline, standing the row a descender taller than the box the slab
 	 measures itself against. `minmax(0, …)` because a long unbroken value grows an `auto`

package/dist/visual/ArrayField.svelte.d.ts

@@ -19,6 +19,7 @@ interface Props {
 }
 declare const ArrayField: import("svelte").Component<Props, {
     focus: () => void;
+    washBox: () => HTMLElement | undefined;
     focusElement: (k: number) => void;
 }, "">;
 type ArrayField = ReturnType<typeof ArrayField>;

package/dist/visual/Field.svelte

@@ -117,7 +117,14 @@
 	// object on its first property.
 	let proseEl = $state<{ focus: () => void } | undefined>();
 	let dateEl = $state<{ focus: () => void } | undefined>();
-	let arrayEl = $state<{ focus: () => void; focusElement: (k: number) => void } | undefined>();
+	let arrayEl = $state<
+		| {
+				focus: () => void;
+				focusElement: (k: number) => void;
+				washBox: () => HTMLElement | undefined;
+		  }
+		| undefined
+	>();
 	let objectEl = $state<{ focus: () => void } | undefined>();
 	function focusControl(): void {
 		const owner = proseEl ?? dateEl ?? arrayEl ?? objectEl;
@@ -135,7 +142,11 @@
 
 	/**
 	 * This field's landing handle. The wrapper is the bloom host rather than the
-	 * control: `bloomInside` appends an inset child and an `<input>` holds none.
+	 * control: `bloomInside` appends an inset child and an `<input>` holds none. The
+	 * label is outside it, and stays out of the wash: an arrival marks where the caret
+	 * landed, which is the control. The one control that owns its label is the array, so
+	 * that one names its own box (`ArrayField.washBox`), read at the bloom the way
+	 * `focusElement` is read at the call.
 	 *
 	 * A prose leaf is absent here — it registers its own controller from inside
 	 * `ProseField`, carrying the codec seam this handle has no half of — and reactive
@@ -150,10 +161,13 @@
 		if (field.control === 'prose' || !controlEl || !leaves) return;
 		const key = leafKey;
 		const registry = leaves;
+		const wrapper = controlEl;
 		registry.registerControl(key, {
 			focus: focusControl,
 			focusElement: field.control === 'array' ? focusElement : undefined,
-			el: controlEl
+			get el() {
+				return arrayEl?.washBox() ?? wrapper;
+			}
 		});
 		return () => registry.unregisterControl(key);
 	});

package/dist/visual/ProseArrayElement.svelte

@@ -8,17 +8,25 @@
  by value (`writer.set(field, arrayWithElementReplaced)`). Anchors within an
  element are dropped on that value write: acceptable for inline refs. Mounts
  once per stable element id (no reset on the parent's re-derive).
+
+ A transport-door document rests each element as the authored string. A scalar
+ leaf reads that through `getContent`; `getContent` names a field, never an
+ element, so this row calls the boundary's `importMarkdown` itself. That is
+ the richtext codec, which is this row's `items` type; `decode` is the PM
+ mapping and assumes `Content`. A string here is the missing element read,
+ not a codec failure.
 -->
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { EditorState } from 'prosemirror-state';
 	import { EditorView } from 'prosemirror-view';
 	import { decode, pmToContent, inlineSchema, proseLeafPlugins } from '../core/codec/index.js';
+	import { core } from '../core/lifecycle.js';
 	import './controls.css';
 	import type { Content } from '@quillmark/wasm';
 
 	interface Props {
-		value: Content;
+		value: Content | string;
 		/** Accessible name for the editable region (the array has no per-element label). */
 		label?: string;
 		onChange: (rt: Content) => void;
@@ -44,7 +52,8 @@
 		// plugin stack a `createField` leaf mounts (shared `proseLeafPlugins`), minus
 		// the anchor-position plugin (element anchors are dropped on the array's value
 		// write, per the header). Its own `dispatchTransaction` hands `Content` up.
-		const pmDoc = decode(value, inlineSchema);
+		const rt = typeof value === 'string' ? core().importMarkdown(value) : value;
+		const pmDoc = decode(rt, inlineSchema);
 		const state = EditorState.create({
 			doc: pmDoc,
 			plugins: proseLeafPlugins(inlineSchema, { inline: true })

package/dist/visual/ProseArrayElement.svelte.d.ts

@@ -1,7 +1,7 @@
 import './controls.css';
 import type { Content } from '@quillmark/wasm';
 interface Props {
-    value: Content;
+    value: Content | string;
     /** Accessible name for the editable region (the array has no per-element label). */
     label?: string;
     onChange: (rt: Content) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.4.1",
+	"version": "0.4.3",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",