@quillmark/svelte 0.24.0 → 0.25.0

package/dist/visual/DateField.svelte

@@ -1,7 +1,7 @@
 <!--
  A `date` (or `datetime`) field → a styled segmented date field on bits-ui. The
- stored value is a string, `YYYY-MM-DD` or `today`; a cleared control commits as the
- focus leaves it, the blank `""` over a `default:`, which stays blank, and `undefined`
+ stored value is a string, `YYYY-MM-DD` or `today`; a cleared control commits as its
+ last segment empties, the blank `""` over a `default:`, which stays blank, and `undefined`
  (the unset rung) where nothing is declared, the parent removing the field. The value-object a date field lowers to is a render-time
  concern: the editor only sees the stored string.
 
@@ -48,12 +48,14 @@
  A segment edit that leaves a segment empty empties the primitive's value, which is
  held rather than committed while the focus stays inside: the first Backspace through
  a date writes nothing unset, and the empty segment shows its hint, not the default's
- digits beside the ones still standing. Leaving settles it: blank where every segment
- is empty, otherwise the stored date back. A field storing no date puts its segments
- back by remounting the primitive, which re-reads an unchanged empty value as nothing
- to sync.
+ digits beside the ones still standing. The keystroke that empties the last segment
+ writes the blank at once, so the render follows the clear without waiting on the
+ focus. Leaving with a segment filled puts the stored date back; a field storing no
+ date puts its segments back by remounting the primitive, which re-reads an unchanged
+ empty value as nothing to sync.
 -->
 <script lang="ts">
+	import { flushSync } from 'svelte';
 	import { DateField as BitsDateField } from 'bits-ui';
 	import { getLocalTimeZone, parseDate, today, type DateValue } from '@internationalized/date';
 	import Icon from './icons/Icon.svelte';
@@ -164,18 +166,28 @@
 	function enter(e: FocusEvent): void {
 		if (!within(e) && value == null && fallbackDate) seat = true;
 	}
+	const filled = (): boolean =>
+		[...(wrapEl?.querySelectorAll('[data-segment]') ?? [])].some(
+			(s) => s.getAttribute('data-segment') !== 'literal' && !s.hasAttribute('data-ghosted')
+		);
+	/** Every segment empty: the blank, written at once. */
+	function clear(): void {
+		const blank = fallbackDate ? '' : undefined;
+		if (value !== blank) onCommit(blank);
+	}
 	function leave(e: FocusEvent): void {
 		if (within(e)) return;
 		seat = false;
 		if (!held) return;
 		held = false;
-		const filled = [...(wrapEl?.querySelectorAll('[data-segment]') ?? [])].some(
-			(s) => s.getAttribute('data-segment') !== 'literal' && !s.hasAttribute('data-ghosted')
-		);
-		const blank = fallbackDate ? '' : undefined;
-		if (!filled) {
-			if (value !== blank) onCommit(blank);
-		} else if (!value) generation++;
+		if (!filled()) clear();
+		else if (!value) generation++;
+	}
+	/** The keystroke that empties the last segment, after the primitive has drawn it. */
+	function settle(): void {
+		if (!held) return;
+		flushSync();
+		if (!filled()) clear();
 	}
 
 	// What one segment prints, and which rung it takes.
@@ -249,6 +261,7 @@
 				aria-describedby={describedBy}
 				data-ghosted={ghost ? '' : undefined}
 				data-default={seated || follows ? '' : undefined}
+				onkeydown={settle}
 			>
 				{#snippet children({ segments })}
 					<!-- Keyed by index: `part` repeats (the `literal` separators between

package/dist/visual/FormatPopover.svelte

@@ -12,7 +12,10 @@
  (`ProseValue`). This component never touches the content. The keymap mirror
  (Mod-b/i/u) lives in the codec's keymap (field.ts); this is the pointer
  affordance for all six marks. Mod-K is this surface's own key, the prompt it raises
- being this surface's: a document `keydown` the leaf's keymap left unclaimed.
+ being this surface's: a document `keydown` the leaf's keymap left unclaimed. Over a
+ leaf that holds lists, two more buttons number or bullet every selected line, or take
+ the marker off where every one carries it: the codec's `toggleList`, whose keys
+ (Mod-Shift-7/8) the leaf's keymap binds.
 
  Selection observation. The view's `dispatchTransaction` is the leaf's
  (read-only), so there is no hook to observe transactions from outside.
@@ -72,7 +75,7 @@
 	import { Popover } from 'bits-ui';
 	import Icon from './icons/Icon.svelte';
 	import type { IconName } from './icons/nodes.js';
-	import { hasMarks, rangeAnchor, type RangeAnchor } from '../core/codec/index.js';
+	import { hasMarks, rangeAnchor, toggleList, type RangeAnchor } from '../core/codec/index.js';
 	import type { ActiveProse } from './leaves.js';
 	import { clearLink, hrefInSelection, normalizeHref, setLink } from './links.js';
 	import { spacePx } from '../core/rungs.js';
@@ -96,7 +99,15 @@
 		{ name: 'link', icon: 'link', title: t.strings.formatLink }
 	]);
 
+	const LISTS: { ordered: boolean; icon: IconName; title: string }[] = $derived([
+		{ ordered: true, icon: 'list-ordered', title: t.strings.formatNumberedList },
+		{ ordered: false, icon: 'list', title: t.strings.formatBulletedList }
+	]);
+
 	let open = $state(false);
+	/** Whether the leaf under the selection holds lists: a body does, a one-line field
+	 *  and a table cell do not. */
+	let listable = $state(false);
 	/** A pointer is down outside this surface: the selection is still being made. */
 	let pressed = false;
 	let linkPromptOpen = $state(false);
@@ -161,6 +172,7 @@
 			return;
 		}
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
+		listable = !!view.state.schema.nodes.list_item;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
 		open = true;
@@ -268,6 +280,14 @@
 		sync();
 	}
 
+	function toggleLines(ordered: boolean): void {
+		const view = activeLeafView();
+		if (!view) return;
+		toggleList(ordered)(view.state, view.dispatch);
+		view.focus();
+		sync();
+	}
+
 	/** Every exit from the prompt: lower it, run `cmd` if there is one, and hand the
 	 *  leaf back its focus and the surface its buttons. */
 	function closePrompt(cmd?: Command): void {
@@ -421,6 +441,19 @@
 										onclick={() => toggle(m.name)}><Icon name={m.icon} /></button
 									>
 								{/each}
+								{#if listable}
+									<span class="qm-format-divider" aria-hidden="true"></span>
+									{#each LISTS as l (l.icon)}
+										<button
+											type="button"
+											class="qm-icon-btn qm-mark-btn qm-focus-ring"
+											title={l.title}
+											aria-label={l.title}
+											onmousedown={keepFocus}
+											onclick={() => toggleLines(l.ordered)}><Icon name={l.icon} /></button
+										>
+									{/each}
+								{/if}
 							</div>
 						{/if}
 					</div>
@@ -452,6 +485,12 @@
 
 	 No state for a mark the selection already carries: a run may carry one over part of
 	 itself, which a two-state button has no third face for. */
+	.qm-format-divider {
+		align-self: stretch;
+		width: 1px;
+		margin: var(--_qm-space-half) 0;
+		background: var(--_qm-rule);
+	}
 	.qm-mark-btn {
 		padding: var(--_qm-space) var(--_qm-space-2);
 		color: var(--_qm-ink);

package/dist/visual/ProseValue.svelte

@@ -31,7 +31,9 @@
  declaring `multiline: true` takes the full row ({@link ObjectField}), a `richtext` one
  on the block schema and a `text` one on the plain schema, paragraphs and hard breaks.
  An array element is one textblock whatever it declares, since Enter there is the
- repeater's. There is no slash menu at either width, and no island view.
+ repeater's, and a paste of several lines into one is a row per line, as Enter would
+ open them, up to the array's `max:`, the last row taking what is left joined
+ (`lines`). There is no slash menu at either width, and no island view.
 
  A leaf over content it cannot edit is held (`fitsLeaf`): a narrowed one over anything
  but one plain paragraph, a plain one over anything but plain lines, where the decode
@@ -43,6 +45,7 @@
 -->
 <script lang="ts">
 	import { untrack } from 'svelte';
+	import { Slice, type Node as PMNode } from 'prosemirror-model';
 	import { EditorState, Selection } from 'prosemirror-state';
 	import { EditorView } from 'prosemirror-view';
 	import {
@@ -52,7 +55,9 @@
 		emptyContent,
 		fitsLeaf,
 		heldAttributes,
+		joinLines,
 		leafSchema,
+		pastedLines,
 		pmToContent,
 		proseAttributes,
 		proseLeafPlugins,
@@ -103,6 +108,10 @@
 		/** The declared `max:`, a character count no edit takes the leaf past. */
 		cap?: TextCap;
 		onChange: (rt: Content) => void;
+		/** Where a paste's lines past the first go: rows of their own below this one, at
+		 * most `room()` of them, the last taking the rest joined. The row's own edit comes
+		 * up beside them, the two one commit. Absent, the leaf joins them into its line. */
+		lines?: { room: () => number; onLines: (rt: Content, below: Content[]) => void };
 		/** Raw keydown, for a container whose own keys run through this leaf: the
 		 * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
 		 * keymap, so the state it reads is the one this keystroke has yet to change. */
@@ -120,6 +129,7 @@
 		placeholder,
 		cap,
 		onChange,
+		lines,
 		onKey
 	}: Props = $props();
 
@@ -177,6 +187,14 @@
 			let seen = value;
 			let defaulted = stored === undefined && !!fallback;
 			const reconciler = createReconciler(shown(stored));
+			// The rows a paste's later lines become, held from the parse to the edit that
+			// lands the first line.
+			let spill: Content[] | undefined;
+			const row = (group: PMNode[]): Content => {
+				const { schema } = mounted.state;
+				const line = schema.nodes.paragraph.create(null, joinLines(group, schema));
+				return pmToContent(schema.node('doc', null, [line]));
+			};
 			held = !fitsLeaf(reconciler.last, leaf);
 			// Which of `aria-label` / `aria-labelledby` wins is the codec's one answer
 			// (`proseAttributes`), so a cell carrying a label element and a row carrying
@@ -208,14 +226,28 @@
 						const named = held ? heldNamed() : plainNamed();
 						return defaulted ? { ...named, 'data-default': '' } : named;
 					},
+					transformPasted: (slice) => {
+						spill = undefined;
+						if (!lines || held) return slice;
+						const pasted = pastedLines(slice);
+						const room = Math.min(pasted.length - 1, lines.room());
+						if (room < 1) return slice;
+						const below = pasted.slice(1);
+						spill = [...below.slice(0, room - 1).map((l) => row([l])), row(below.slice(room - 1))];
+						return new Slice(pasted[0]!.content, 0, 0);
+					},
 					dispatchTransaction(tr) {
+						const event = tr.getMeta('uiEvent');
+						const below = event === 'paste' || event === 'drop' ? spill : undefined;
+						spill = undefined;
 						const next = mounted.state.apply(tr);
 						if (next === mounted.state) return;
 						const edit = tr.docChanged && !held;
 						if (edit) defaulted = false;
 						mounted.updateState(next);
-						if (!edit) return;
-						onChange(pmToContent(next.doc));
+						if (!edit && !below) return;
+						if (below && lines) lines.onLines(pmToContent(next.doc), below);
+						else onChange(pmToContent(next.doc));
 						// The commit as the store took it, so its echo through the re-derive is no move.
 						seen = value;
 						reconciler.commit(shown(content()));

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

@@ -35,6 +35,13 @@ interface Props {
     /** The declared `max:`, a character count no edit takes the leaf past. */
     cap?: TextCap;
     onChange: (rt: Content) => void;
+    /** Where a paste's lines past the first go: rows of their own below this one, at
+     * most `room()` of them, the last taking the rest joined. The row's own edit comes
+     * up beside them, the two one commit. Absent, the leaf joins them into its line. */
+    lines?: {
+        room: () => number;
+        onLines: (rt: Content, below: Content[]) => void;
+    };
     /** Raw keydown, for a container whose own keys run through this leaf: the
      * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
      * keymap, so the state it reads is the one this keystroke has yet to change. */

package/dist/visual/icons/nodes.d.ts

@@ -82,6 +82,32 @@ export declare const ICONS: {
     }], readonly ["path", {
         readonly d: "m8 6-6 6 6 6";
     }]];
+    readonly list: readonly [readonly ["path", {
+        readonly d: "M3 5h.01";
+    }], readonly ["path", {
+        readonly d: "M3 12h.01";
+    }], readonly ["path", {
+        readonly d: "M3 19h.01";
+    }], readonly ["path", {
+        readonly d: "M8 5h13";
+    }], readonly ["path", {
+        readonly d: "M8 12h13";
+    }], readonly ["path", {
+        readonly d: "M8 19h13";
+    }]];
+    readonly 'list-ordered': readonly [readonly ["path", {
+        readonly d: "M11 5h10";
+    }], readonly ["path", {
+        readonly d: "M11 12h10";
+    }], readonly ["path", {
+        readonly d: "M11 19h10";
+    }], readonly ["path", {
+        readonly d: "M4 4h1v5";
+    }], readonly ["path", {
+        readonly d: "M4 9h2";
+    }], readonly ["path", {
+        readonly d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02";
+    }]];
     readonly link: readonly [readonly ["path", {
         readonly d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71";
     }], readonly ["path", {

package/dist/visual/icons/nodes.js

@@ -41,6 +41,22 @@ export const ICONS = {
         ['path', { d: 'm16 18 6-6-6-6' }],
         ['path', { d: 'm8 6-6 6 6 6' }]
     ],
+    list: [
+        ['path', { d: 'M3 5h.01' }],
+        ['path', { d: 'M3 12h.01' }],
+        ['path', { d: 'M3 19h.01' }],
+        ['path', { d: 'M8 5h13' }],
+        ['path', { d: 'M8 12h13' }],
+        ['path', { d: 'M8 19h13' }]
+    ],
+    'list-ordered': [
+        ['path', { d: 'M11 5h10' }],
+        ['path', { d: 'M11 12h10' }],
+        ['path', { d: 'M11 19h10' }],
+        ['path', { d: 'M4 4h1v5' }],
+        ['path', { d: 'M4 9h2' }],
+        ['path', { d: 'M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02' }]
+    ],
     link: [
         ['path', { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }],
         ['path', { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }]

package/dist/visual/strings.d.ts

@@ -79,6 +79,8 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     formatStrikethrough: string;
     formatCode: string;
     formatLink: string;
+    formatNumberedList: string;
+    formatBulletedList: string;
     /** The anchor button's accessible name. The popover withholds the button, so
      *  nothing draws this or the title below. */
     formatAnchor: string;
@@ -145,8 +147,8 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
 export type FormatDiagnostic = (d: Diagnostic) => string | undefined;
 /**
  * A `Mod` chord as the writer's platform prints it: `⌘B` on Apple's, `Ctrl+B`
- * elsewhere. The platform test is the one `prosemirror-keymap` resolves `Mod` by, so a
- * tooltip names the chord the keymap binds.
+ * elsewhere, and `Shift-7` as `⇧⌘7` or `Ctrl+Shift+7`. The platform test is the one
+ * `prosemirror-keymap` resolves `Mod` by, so a tooltip names the chord the keymap binds.
  */
 export declare function chord(key: string, platform?: string): string;
 /** The package's English. Every key, so the merge below is total. */

package/dist/visual/strings.js

@@ -21,11 +21,15 @@ import { getContext, setContext } from 'svelte';
 import { DEFAULT_SLASH_STRINGS, DEFAULT_TABLE_STRINGS } from '../core/codec/index.js';
 /**
  * A `Mod` chord as the writer's platform prints it: `⌘B` on Apple's, `Ctrl+B`
- * elsewhere. The platform test is the one `prosemirror-keymap` resolves `Mod` by, so a
- * tooltip names the chord the keymap binds.
+ * elsewhere, and `Shift-7` as `⇧⌘7` or `Ctrl+Shift+7`. The platform test is the one
+ * `prosemirror-keymap` resolves `Mod` by, so a tooltip names the chord the keymap binds.
  */
 export function chord(key, platform = typeof navigator === 'undefined' ? '' : navigator.platform) {
-    return /Mac|iP(hone|[oa]d)/.test(platform) ? `⌘${key}` : `Ctrl+${key}`;
+    const shift = key.startsWith('Shift-');
+    const bare = shift ? key.slice('Shift-'.length) : key;
+    if (/Mac|iP(hone|[oa]d)/.test(platform))
+        return `${shift ? '⇧' : ''}⌘${bare}`;
+    return `Ctrl+${shift ? 'Shift+' : ''}${bare}`;
 }
 /** The package's English. Every key, so the merge below is total. */
 export const DEFAULT_VISUAL_STRINGS = {
@@ -59,6 +63,8 @@ export const DEFAULT_VISUAL_STRINGS = {
     formatStrikethrough: 'Strikethrough',
     formatCode: 'Code',
     formatLink: `Link (${chord('K')})`,
+    formatNumberedList: `Numbered list (${chord('Shift-7')})`,
+    formatBulletedList: `Bulleted list (${chord('Shift-8')})`,
     formatAnchor: 'Anchor',
     formatAnchorTitle: 'Anchor — an identity handle over the selection',
     linkPlaceholder: 'https://…',

package/package.json

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