@quillmark/svelte 0.4.0 → 0.4.2

package/dist/core/codec/decode.d.ts

@@ -4,10 +4,6 @@ import type { Content } from '@quillmark/wasm';
 export declare function codePoints(s: string): string[];
 /** USV length of `s` (code points, not UTF-16 units). */
 export declare function usvLength(s: string): number;
-interface DecodeOpts {
-    /** Strip all marks (a `plaintext` field). */
-    plaintext?: boolean;
-}
 /**
  * A `Content` as read-only DOM: decode under `schema`, then the nodes' own `toDOM`.
  * The rendering half of the codec's job with no editing attached (no PM view, no
@@ -18,7 +14,6 @@ interface DecodeOpts {
  * `DOMSerializer.fromSchema` memoizes on the schema, so repeat calls build no
  * serializer.
  */
-export declare function renderContent(rt: Content, schema: Schema, opts?: DecodeOpts): Node;
+export declare function renderContent(rt: Content, schema: Schema): Node;
 /** Decode a `Content` to a PM document under `schema`. */
-export declare function decode(rt: Content, schema: Schema, opts?: DecodeOpts): PMNode;
-export {};
+export declare function decode(rt: Content, schema: Schema): PMNode;

package/dist/core/codec/decode.js

@@ -10,7 +10,7 @@
 import { DOMSerializer } from 'prosemirror-model';
 import { ISLAND_SLOT } from './islands.js';
 import { descriptorOf, markKey, pmMarkFromContent } from './marks.js';
-import { isInlineSchema } from './schema.js';
+import { hasMarks, isInlineSchema } from './schema.js';
 import { isAnchorMark, isCodeLine, isHeadingLine, isListItemContainer } from '@quillmark/wasm';
 /** Code points of `s` (USV units): the iteration granularity the content speaks. */
 export function codePoints(s) {
@@ -33,11 +33,11 @@ export function usvLength(s) {
  * `DOMSerializer.fromSchema` memoizes on the schema, so repeat calls build no
  * serializer.
  */
-export function renderContent(rt, schema, opts = {}) {
-    return DOMSerializer.fromSchema(schema).serializeFragment(decode(rt, schema, opts).content);
+export function renderContent(rt, schema) {
+    return DOMSerializer.fromSchema(schema).serializeFragment(decode(rt, schema).content);
 }
 /** Decode a `Content` to a PM document under `schema`. */
-export function decode(rt, schema, opts = {}) {
+export function decode(rt, schema) {
     const lineTexts = rt.text.split('\n');
     // Per-line USV start: line i begins after all earlier lines and their `\n`s.
     const starts = [];
@@ -46,7 +46,11 @@ export function decode(rt, schema, opts = {}) {
         starts.push(acc);
         acc += usvLength(lineTexts[i]) + 1; // +1 for the `\n` boundary
     }
-    const marks = opts.plaintext ? [] : rt.marks.filter((m) => !isAnchorMark(m));
+    // A mark-free schema (`plaintextSchema`) has nothing to apply them with, and a
+    // plaintext field that acquired one anyway — an older build's popover, a hand-
+    // written document — is exactly the content that must open and then heal on the
+    // next commit, not throw here.
+    const marks = hasMarks(schema) ? rt.marks.filter((m) => !isAnchorMark(m)) : [];
     const cursor = { i: 0, rt };
     if (isInlineSchema(schema)) {
         return decodeInline(rt, schema, lineTexts, starts, marks, cursor);

package/dist/core/codec/field.d.ts

@@ -16,7 +16,8 @@ export interface CreateFieldOpts {
     container: HTMLElement;
     /** Constrained single-textblock schema (a `richtext(inline)` field). */
     inline?: boolean;
-    /** Inline + marks/islands stripped (a `plaintext` field). Implies `inline`. */
+    /** The mark-free inline schema (a `plaintext` field): literal text, no formatting
+     *  and no anchors. Implies `inline`. */
     plaintext?: boolean;
     /** Suppress the markdown-shorthand input rules. */
     noInputRules?: boolean;
@@ -145,15 +146,13 @@ export declare function createField(opts: CreateFieldOpts): FieldController;
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.
  *
- * A `plaintext` field carries no marks (decode strips them, the keymap suppresses
- * Mod-b/i/u), so it also skips the input rules: `inlineSchema` still declares the
- * mark types, so a `**bold**` rule would apply a strong mark and eat the literal
- * delimiters. The inline schema has no block nodes, so those rules are the only
- * ones it would add: skip all.
+ * Every mark-shaped plugin reads the schema rather than a flag: over
+ * `plaintextSchema` the shorthand rules build nothing (each is guarded on its mark
+ * type) and the toggles bind no key, so a `**bold**` keeps the delimiters its author
+ * typed without a second rule saying so.
  */
 export declare function proseLeafPlugins(schema: Schema, opts: {
     inline: boolean;
-    plaintext: boolean;
     /** The slash menu's report channel; absent mounts no menu and leaves
      *  Enter/Escape/the arrows to the links below (`keymap.ts`). */
     slash?: (state: SlashState | undefined) => void;

package/dist/core/codec/field.js

@@ -27,7 +27,7 @@ import { anchorsFromContent } from './marks.js';
 import { createReconciler } from './reconcile.js';
 import { inputRulesPlugin } from './inputrules.js';
 import { bodyKeymap } from './keymap.js';
-import { blockSchema, inlineSchema } from './schema.js';
+import { blockSchema, inlineSchema, plaintextSchema } from './schema.js';
 import { DEFAULT_TABLE_STRINGS, tableNodeView } from './table-view.js';
 import { focusSlashItem, runSlashItem, slashPlugin } from './slash.js';
 const anchorKey = new PluginKey('quill-anchors');
@@ -108,7 +108,10 @@ export function createField(opts) {
     const { doc, addr, container } = opts;
     const inline = !!opts.inline || !!opts.plaintext;
     const plaintext = !!opts.plaintext;
-    const schema = inline ? inlineSchema : blockSchema;
+    // The declared type picks the schema, and the schema is the whole of what
+    // `plaintext` suppresses: no mark types to toggle, to paste in, or to mint a
+    // shorthand with (`schema.ts`).
+    const schema = plaintext ? plaintextSchema : inline ? inlineSchema : blockSchema;
     // Bound once and held: the reader is a `{quill, doc}` pair that reads live, so
     // every read below sees the commit before it.
     const reader = opts.quill.reader(doc);
@@ -176,7 +179,7 @@ export function createField(opts) {
         }
     });
     function buildState(rt) {
-        const pmDoc = decode(rt, schema, { plaintext });
+        const pmDoc = decode(rt, schema);
         const anchors = plaintext ? [] : anchorsFromContent(rt);
         // Seed anchor plugin positions in PM coords via a fresh index over pmDoc.
         const seedIndex = buildLineIndex(pmDoc);
@@ -188,7 +191,6 @@ export function createField(opts) {
             doc: pmDoc,
             plugins: proseLeafPlugins(schema, {
                 inline,
-                plaintext,
                 slash,
                 noInputRules: opts.noInputRules,
                 // Always installed, so a leaf that mounts without a ghost can still be
@@ -368,19 +370,18 @@ export function createField(opts) {
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.
  *
- * A `plaintext` field carries no marks (decode strips them, the keymap suppresses
- * Mod-b/i/u), so it also skips the input rules: `inlineSchema` still declares the
- * mark types, so a `**bold**` rule would apply a strong mark and eat the literal
- * delimiters. The inline schema has no block nodes, so those rules are the only
- * ones it would add: skip all.
+ * Every mark-shaped plugin reads the schema rather than a flag: over
+ * `plaintextSchema` the shorthand rules build nothing (each is guarded on its mark
+ * type) and the toggles bind no key, so a `**bold**` keeps the delimiters its author
+ * typed without a second rule saying so.
  */
 export function proseLeafPlugins(schema, opts) {
     const list = [history(), ...(opts.afterHistory ?? [])];
     if (opts.slash)
         list.push(slashPlugin(opts.slash));
-    if (!opts.noInputRules && !opts.plaintext)
+    if (!opts.noInputRules)
         list.push(inputRulesPlugin(schema));
-    list.push(keymap(editorKeymap(schema, opts.inline, opts.plaintext, !!opts.slash)));
+    list.push(keymap(editorKeymap(schema, opts.inline, !!opts.slash)));
     list.push(keymap(baseKeymap));
     // All three answer to something only a block leaf holds: an inline leaf is one
     // textblock with no island, no gap to put a cursor in, and nowhere for a pasted
@@ -460,7 +461,8 @@ function placeholderPlugin(read) {
 }
 /**
  * The field's keymap: history, mark toggles, and the body's structural keys; Enter
- * suppressed inline.
+ * suppressed inline. The toggles are bound per mark type the schema declares, so a
+ * plaintext leaf leaves Mod-b/i/u to the browser.
  *
  * Tab forks on the leaf's role, not on the caret's position. An inline/plaintext
  * leaf is a form field: Tab stays unbound, so field navigation is open for a shell
@@ -468,20 +470,18 @@ function placeholderPlugin(read) {
  * is structural, a chain each nested surface prepends to (`keymap.ts`). One key
  * never means two things within one surface.
  */
-function editorKeymap(schema, inline, plaintext, slash) {
+function editorKeymap(schema, inline, slash) {
     const map = {
         'Mod-z': undo,
         'Mod-y': redo,
         'Shift-Mod-z': redo
     };
-    if (!plaintext) {
-        if (schema.marks.strong)
-            map['Mod-b'] = toggleMark(schema.marks.strong);
-        if (schema.marks.em)
-            map['Mod-i'] = toggleMark(schema.marks.em);
-        if (schema.marks.underline)
-            map['Mod-u'] = toggleMark(schema.marks.underline);
-    }
+    if (schema.marks.strong)
+        map['Mod-b'] = toggleMark(schema.marks.strong);
+    if (schema.marks.em)
+        map['Mod-i'] = toggleMark(schema.marks.em);
+    if (schema.marks.underline)
+        map['Mod-u'] = toggleMark(schema.marks.underline);
     if (inline) {
         // One textblock only: swallow Enter so no second block is attempted.
         map['Enter'] = () => true;

package/dist/core/codec/index.d.ts

@@ -9,7 +9,7 @@ export { DEFAULT_TABLE_STRINGS } from './table-view.js';
 export type { TableChromeStrings } from './table-view.js';
 export { DEFAULT_SLASH_STRINGS } from './slash.js';
 export type { SlashState, SlashStrings } from './slash.js';
-export { blockSchema, inlineSchema } from './schema.js';
+export { blockSchema, inlineSchema, plaintextSchema, hasMarks } from './schema.js';
 export { decode, renderContent, usvLength } from './decode.js';
 export { pmToContent, contentEdit, lower } from './encode.js';
 export type { ContentEdit } from './encode.js';

package/dist/core/codec/index.js

@@ -20,8 +20,9 @@ export { DEFAULT_TABLE_STRINGS } from './table-view.js';
 // The slash menu: the codec owns the model and the picks, the chrome the words and
 // the pixels (`visual/SlashMenu.svelte` is the only off-barrel caller).
 export { DEFAULT_SLASH_STRINGS } from './slash.js';
-// Schemas (the decode/encode target; the VisualEditor mounts them).
-export { blockSchema, inlineSchema } from './schema.js';
+// Schemas (the decode/encode target; the VisualEditor mounts them). `hasMarks` is
+// what a mark surface asks before offering itself over a leaf.
+export { blockSchema, inlineSchema, plaintextSchema, hasMarks } from './schema.js';
 // Decode / encode / positions (tests + VisualEditor).
 //
 // The barrel carries what has an off-barrel caller, and nothing else. A symbol

package/dist/core/codec/inputrules.js

@@ -5,6 +5,13 @@
 // block rule with no guard of its own reuses `wrappingInputRule`, and the rest mirror
 // an upstream body around one. These produce transactions the codec already lowers:
 // they add no new lowering surface.
+//
+// A rule declines only where what it would mint is unrepresentable, or is a shape
+// another gesture owns — never on how a quill renders it. What a quill typesets is not
+// knowable here (a quill this build has not seen is the open-sets case, CODEC §"Open
+// sets"), and a construct that arrives through `importMarkdown` must stay authorable or
+// a document opens carrying a shape the editor refuses to make. So one guard survives:
+// `- ` / `1. ` at the head of an existing item, where Tab owns the nesting.
 import { InputRule, inputRules, wrappingInputRule } from 'prosemirror-inputrules';
 import { canJoin, findWrapping } from 'prosemirror-transform';
 import { Selection } from 'prosemirror-state';
@@ -43,11 +50,10 @@ function markInputRule(regexp, markType, delimLen) {
  * `wrappingInputRule` (whose body this mirrors), plus one normalization: a
  * `heading` being wrapped becomes a `paragraph` first.
  *
- * `list_item` is `block+`, so `list_item > heading` is *representable* and a bare
- * wrap mints it — a shape markdown has no spelling for, so nothing downstream is
- * obliged to typeset it and the gesture that made it cannot be read back. This is
- * the wrap-side route into it; the `# ` rule guards the other, in
- * {@link markdownInputRules}.
+ * `list_item` is `block+`, so `list_item > heading` is *representable*, and `# `
+ * inside the item is the gesture that mints it ({@link markdownInputRules}). A wrap
+ * keeping the heading would be a second door onto that shape, so `- ` / `1. ` mint a
+ * paragraph item wherever they fire.
  *
  * `item` is the second guard, and it is about the gesture rather than the shape: the
  * rule declines at the start of an item's own first block ({@link openingAnItem}).
@@ -114,16 +120,13 @@ export function markdownInputRules(schema) {
     // Block shorthands (only where the schema has the node; the inline schema
     // omits them, so this stays a no-op there).
     if (schema.nodes.heading) {
-        // `textblockTypeInputRule`'s body plus one guard: inside a list item, `# `
-        // declines (null) and stays literal text, rather than minting the unrenderable
-        // `list_item > heading` {@link listWrappingRule} normalizes away on the wrap side.
+        // `textblockTypeInputRule`'s body. It fires inside a list item like anywhere else:
+        // `list_item > heading` is a shape the content holds and `importMarkdown` produces
+        // from `- # title`, so a rule that declined there would refuse to author what a
+        // document can arrive carrying.
         const heading = schema.nodes.heading;
         rules.push(new InputRule(/^(#{1,6})\s$/, (state, match, start, end) => {
             const $start = state.doc.resolve(start);
-            for (let d = $start.depth; d > 0; d--) {
-                if (item && $start.node(d).type === item)
-                    return null;
-            }
             if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), heading)) {
                 return null;
             }
@@ -165,12 +168,6 @@ export function markdownInputRules(schema) {
             if ($start.parentOffset !== 0 || $start.parent.content.size !== end - start) {
                 return null;
             }
-            // The `# ` rule's guard, for its reason: `list_item` is `block+`, so a
-            // divider inside an item is representable and renders to nothing.
-            for (let d = $start.depth; d > 0; d--) {
-                if (item && $start.node(d).type === item)
-                    return null;
-            }
             if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), rule)) {
                 return null;
             }
@@ -194,6 +191,8 @@ export function markdownInputRules(schema) {
     if (schema.nodes.ordered_list && schema.nodes.paragraph) {
         rules.push(listWrappingRule(/^(\d+)\.\s$/, schema.nodes.ordered_list, schema.nodes.paragraph, item, (match) => ({ start: +match[1] }), (match, node) => node.childCount + node.attrs.start === +match[1]));
     }
+    // No item guard: a quote wrapping an item's own first block is a container the
+    // content holds, where a list wrapping one is an item whose only content is an item.
     if (schema.nodes.blockquote) {
         rules.push(wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote));
     }

package/dist/core/codec/schema.d.ts

@@ -1,13 +1,22 @@
 import { Schema } from 'prosemirror-model';
 /** The full field schema: every block kind, container, mark, and island. */
 export declare const blockSchema: Schema<string, string>;
+/** The constrained inline schema: one paragraph, no block splitting, no
+ *  containers, no islands, and the full mark set (a `richtext(inline)` field, and
+ *  a table cell, which is the same content unit). */
+export declare const inlineSchema: Schema<string, string>;
 /**
- * The constrained inline schema: one paragraph, no block splitting, no
- * containers, no islands. `doc: "paragraph"` (exactly one child) is what makes an
- * Enter a no-op at the model level: there is no second block for a split to land.
- * Marks are present; `plaintext` fields strip them at decode and mount no
- * mark input (a schema-level distinction the field draws, per CODEC §Inline mode).
+ * The inline schema with no mark types at all: a `plaintext` field, whose value is
+ * literal text the boundary refuses to coerce back once it carries a mark.
+ *
+ * Declaring none is what makes that structural rather than a rule each path
+ * restates: `toggleMark` has no type to apply, the mark input rules build nothing,
+ * a paste parses its marks away, and `decode` drops any a stray content arrives
+ * carrying (CODEC §Inline mode).
  */
-export declare const inlineSchema: Schema<"text" | "doc" | "paragraph", string>;
+export declare const plaintextSchema: Schema<string, never>;
+/** Whether `schema` can carry formatting at all: false for {@link plaintextSchema}
+ *  alone. What a mark command asks before it offers itself. */
+export declare function hasMarks(schema: Schema): boolean;
 /** True for the constrained inline schema (no block containers); decode branches on it. */
 export declare function isInlineSchema(schema: Schema): boolean;

package/dist/core/codec/schema.js

@@ -4,12 +4,13 @@
 // Each of the three open sets gets an inert carrier so an unrecognized value
 // survives a round-trip: the `unknown` mark, the paragraph's `unknown` attribute,
 // and the `unknown_container` node. `blockSchema` is the full field; `inlineSchema`
-// is the constrained single-textblock form for `richtext(inline)` / `plaintext`
-// (one paragraph, no block split, no containers, no islands): same decode/lower/
-// position machinery, narrower shape. Anchors are not marks here (decorations).
+// is the constrained single-textblock form for `richtext(inline)` (one paragraph,
+// no block split, no containers, no islands) and `plaintextSchema` is that one
+// without marks: same decode/lower/position machinery, narrower shape. Anchors are
+// not marks here (decorations).
 import { Schema } from 'prosemirror-model';
 import { islandBlockSpec, islandInlineSpec } from './islands.js';
-// ── Marks (shared by both schemas; plaintext mounts none) ───────────────────
+// ── Marks (the block and inline schemas share them; plaintext declares none) ─
 const marks = {
     // Order matters: it fixes mark-set sort order and parse precedence. `link`
     // last so it wraps outermost; `unknown` after it, non-exclusive so several
@@ -134,21 +135,33 @@ export const blockSchema = new Schema({
     nodes: { ...blockNodes, ...inlineLeafNodes },
     marks
 });
+// ── The constrained inline nodes (both inline schemas) ──────────────────────
+// `doc: "paragraph"` (exactly one child) is what makes an Enter a no-op at the
+// model level: there is no second block for a split to land.
+const inlineNodes = {
+    doc: { content: 'paragraph' },
+    paragraph: { content: 'inline*', toDOM: () => ['p', 0] },
+    text: { group: 'inline' }
+};
+/** The constrained inline schema: one paragraph, no block splitting, no
+ *  containers, no islands, and the full mark set (a `richtext(inline)` field, and
+ *  a table cell, which is the same content unit). */
+export const inlineSchema = new Schema({ nodes: inlineNodes, marks });
 /**
- * The constrained inline schema: one paragraph, no block splitting, no
- * containers, no islands. `doc: "paragraph"` (exactly one child) is what makes an
- * Enter a no-op at the model level: there is no second block for a split to land.
- * Marks are present; `plaintext` fields strip them at decode and mount no
- * mark input (a schema-level distinction the field draws, per CODEC §Inline mode).
+ * The inline schema with no mark types at all: a `plaintext` field, whose value is
+ * literal text the boundary refuses to coerce back once it carries a mark.
+ *
+ * Declaring none is what makes that structural rather than a rule each path
+ * restates: `toggleMark` has no type to apply, the mark input rules build nothing,
+ * a paste parses its marks away, and `decode` drops any a stray content arrives
+ * carrying (CODEC §Inline mode).
  */
-export const inlineSchema = new Schema({
-    nodes: {
-        doc: { content: 'paragraph' },
-        paragraph: { content: 'inline*', toDOM: () => ['p', 0] },
-        text: { group: 'inline' }
-    },
-    marks
-});
+export const plaintextSchema = new Schema({ nodes: inlineNodes, marks: {} });
+/** Whether `schema` can carry formatting at all: false for {@link plaintextSchema}
+ *  alone. What a mark command asks before it offers itself. */
+export function hasMarks(schema) {
+    return Object.keys(schema.marks).length > 0;
+}
 /** True for the constrained inline schema (no block containers); decode branches on it. */
 export function isInlineSchema(schema) {
     return !schema.nodes.blockquote;

package/dist/visual/ArrayField.svelte

@@ -107,6 +107,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 +166,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.
@@ -243,46 +252,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}
+						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 +313,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/Card.svelte

@@ -185,9 +185,13 @@
 	}
 </script>
 
+<!-- `data-qm-card` names the island for a floating surface that has to stay inside one
+ ({@link FieldHint}). A surface portals to `[data-qm-root]`, so the card is not its
+ ancestor and nothing else marks the box its guidance belongs in. -->
 <section
 	bind:this={el}
 	class="qm-card"
+	data-qm-card
 	class:qm-main={card.isMain}
 	class:qm-unschemable={card.unschemable}
 >

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/FieldHint.svelte

@@ -46,6 +46,13 @@
 	 * along with the editor's subtree. `undefined` falls back to bits-ui's default. */
 	const portalTarget = $derived(triggerEl?.closest<HTMLElement>('[data-qm-root]') ?? undefined);
 
+	/** What the surface stays inside: the field's own card and the root it portals into.
+	 * floating-ui intersects the two, so a flip answers to whichever is tighter. Empty
+	 * falls back to the primitive's default, the surface's own clipping ancestors. */
+	const bounds = $derived(
+		[triggerEl?.closest<HTMLElement>('[data-qm-card]'), portalTarget].filter((el) => el != null)
+	);
+
 	/** Placement, re-measured on each opening: the surface rides the label rung beside
 	 * the glyph, or stands over the field. */
 	let beside = $state(false);
@@ -132,11 +139,18 @@
  neighbour's control instead, which reaching for it dismisses. -->
 <!-- `align="center"` for the rung, `"start"` over the field: centred, a surface taller
  than the glyph's line box would hang half its height onto the field's own control. -->
+<!-- Both are preferences, and the card is what refuses them: its first field has no room
+ above its label inside one, so standing over that field puts the surface on the ground
+ above the card, reading as the neighbour's rather than as this field's. Refused, the
+ placement reverses and the surface goes under the field, over the control it describes:
+ the overlap the fork above spends a probe to avoid, and the only one left where there is
+ nothing above to stand over. -->
 
 <Popover.Root bind:open>
 	<Popover.Portal to={portalTarget}>
 		<Popover.Content
 			customAnchor={triggerEl ?? null}
+			collisionBoundary={bounds}
 			side={beside ? 'right' : 'top'}
 			align={beside ? 'center' : 'start'}
 			sideOffset={6}

package/dist/visual/FormatPopover.svelte

@@ -65,6 +65,7 @@
 	import Icon from './icons/Icon.svelte';
 	import type { IconName } from './icons/nodes.js';
 	import {
+		hasMarks,
 		rangeAnchor,
 		type FieldController,
 		type LeafViews,
@@ -140,7 +141,17 @@
 		// Escape out of a table cell lands.
 		const selection = view?.state.selection;
 		const formattable = selection instanceof TextSelection && !selection.empty;
-		if (!view || !view.hasFocus() || !formattable || !hasText(view)) {
+		// …in a leaf that has formatting at all. A `plaintext` leaf declares no mark
+		// types (`plaintextSchema`), so this surface withholds itself over one entirely,
+		// the way it never rises over the text input a `string` field draws: the value is
+		// literal text, and a mark on it is a value the boundary refuses to coerce back.
+		if (
+			!view ||
+			!view.hasFocus() ||
+			!formattable ||
+			!hasMarks(view.state.schema) ||
+			!hasText(view)
+		) {
 			open = false;
 			linkPromptOpen = false;
 			return;

package/dist/visual/ProseArrayElement.svelte

@@ -47,7 +47,7 @@
 		const pmDoc = decode(value, inlineSchema);
 		const state = EditorState.create({
 			doc: pmDoc,
-			plugins: proseLeafPlugins(inlineSchema, { inline: true, plaintext: false })
+			plugins: proseLeafPlugins(inlineSchema, { inline: true })
 		});
 		const mounted = new EditorView(containerEl, {
 			state,

package/package.json

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