@voithos-labs/aragonite 0.10.3 → 0.10.7

package/dist/components/menu/InlineMenuHost.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { INLINE_MENU_LABEL } from '../../a11y-strings';
+	import type { EditorEvents } from '../../editor-events';
+	import type { InlineMenuState } from '../../inline-menu/inline-menu-state.svelte';
+	import MenuIcon from './MenuIcon.svelte';
+	import type { MenuPresence } from './menu-presence.svelte';
+	import { eventToChord } from '../../schema/keybindings';
+
+	// Mounted unconditionally by Editor: the key handling and the anchoring must observe the session
+	// opening, so the open/closed `{#if}` lives here rather than at the mount site.
+	let {
+		menu,
+		events,
+		getEditorEl,
+		measureRange,
+		menuPresence
+	}: {
+		menu: InlineMenuState;
+		events: EditorEvents;
+		menuPresence: MenuPresence;
+		getEditorEl: () => HTMLElement | null;
+		measureRange: (path: number[], start: number, end: number) => DOMRect[];
+	} = $props();
+
+	const GAP_PX = 4;
+	const EDGE_PX = 8;
+
+	let menuEl: HTMLDivElement | undefined = $state();
+	let position = $state<{ left: number; top: number } | null>(null);
+
+	const view = $derived(menu.getOpen());
+	// An empty list paints nothing and holds no key: Enter after `#zzz` is the author's own Enter.
+	const showing = $derived(view !== null && view.items.length > 0);
+
+	/** Under the trigger's first glyph, or above it where the viewport leaves no room below. */
+	function place(): void {
+		const open = menu.getOpen();
+		if (!open || !menuEl) return;
+		const rect = measureRange(open.path, open.start, open.end)[0];
+		if (!rect) return;
+		const { width, height } = menuEl.getBoundingClientRect();
+		const below = rect.bottom + GAP_PX;
+		const fitsBelow = below + height <= window.innerHeight - EDGE_PX;
+		const top = fitsBelow ? below : Math.max(EDGE_PX, rect.top - GAP_PX - height);
+		const left = Math.max(EDGE_PX, Math.min(rect.left, window.innerWidth - EDGE_PX - width));
+		position = { left, top };
+	}
+
+	$effect(() => {
+		if (!showing) {
+			position = null;
+			return;
+		}
+		// Every read that moves the anchor or resizes the list re-places it.
+		void view?.end;
+		void view?.items;
+		place();
+		// The `edit` event fires before the leaf re-renders the bytes; the rects are current a
+		// tick later.
+		const unsubscribe = events.on('edit', () => void tick().then(place));
+		window.addEventListener('scroll', place, true);
+		window.addEventListener('resize', place);
+		return () => {
+			unsubscribe();
+			window.removeEventListener('scroll', place, true);
+			window.removeEventListener('resize', place);
+		};
+	});
+
+	// The keys a list needs, taken at the root's capture phase so the focused block never sees
+	// them: the caret stays in the document and the author keeps typing the query.
+	$effect(() => {
+		const root = getEditorEl();
+		if (!showing || !root) return;
+		const onKeyDown = (e: KeyboardEvent) => {
+			// A composing Enter or Escape belongs to the IME's candidate window.
+			if (e.isComposing) return;
+			// The bare key alone: a chorded arrow (Shift to extend, Mod to jump) stays the document's.
+			const chord = eventToChord(e);
+			if (chord === 'ArrowDown') menu.move(1);
+			else if (chord === 'ArrowUp') menu.move(-1);
+			else if (chord === 'Enter' || chord === 'Tab') menu.commit();
+			else if (chord === 'Escape') menu.close();
+			else return;
+			e.preventDefault();
+			e.stopPropagation();
+		};
+		root.addEventListener('keydown', onKeyDown, true);
+		return () => root.removeEventListener('keydown', onKeyDown, true);
+	});
+
+	// The baseline a leaf's first bytes are read against, taken on beforeinput, which every input
+	// route fires, including the ones no caret move precedes.
+	$effect(() => {
+		const root = getEditorEl();
+		if (!root) return;
+		const onBeforeInput = () => menu.primeBaseline();
+		root.addEventListener('beforeinput', onBeforeInput, true);
+		return () => root.removeEventListener('beforeinput', onBeforeInput, true);
+	});
+
+	// Focus leaving the editor ends the session; the list itself never takes focus.
+	$effect(() => {
+		const root = getEditorEl();
+		if (view === null || !root) return;
+		const onFocusOut = (e: FocusEvent) => {
+			const next = e.relatedTarget instanceof Node ? e.relatedTarget : null;
+			if (!next || !root.contains(next)) menu.close();
+		};
+		root.addEventListener('focusout', onFocusOut);
+		return () => root.removeEventListener('focusout', onFocusOut);
+	});
+
+	$effect(() => {
+		void view?.activeIndex;
+		menuEl?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+{#if showing && view}
+	{@const Row = view.source.row}
+	<!-- A press on the list must not blur the document: the block under the caret commits on blur,
+	     and the pick needs that caret. -->
+	<div
+		bind:this={menuEl}
+		id={menu.listboxId}
+		class="md-menu inline-menu"
+		role="listbox"
+		{@attach menuPresence.track}
+		tabindex="-1"
+		aria-label={INLINE_MENU_LABEL}
+		data-inline-menu={view.source.name}
+		style:left="{position?.left ?? 0}px"
+		style:top="{position?.top ?? 0}px"
+		style:visibility={position ? 'visible' : 'hidden'}
+		onpointerdown={(e) => e.preventDefault()}
+	>
+		{#each view.items as item, i (item.id)}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				id={menu.optionId(item.id)}
+				class="md-menu-item inline-menu-item"
+				role="option"
+				tabindex="-1"
+				aria-selected={i === view.activeIndex}
+				data-active={i === view.activeIndex}
+				onpointermove={() => menu.setActive(i)}
+				onclick={() => menu.commit(i)}
+			>
+				{#if Row}
+					<Row {item} active={i === view.activeIndex} query={view.query} />
+				{:else}
+					{#if item.icon}<span class="md-menu-icon"><MenuIcon name={item.icon} /></span>{/if}
+					<span class="inline-menu-label">{item.label}</span>
+					{#if item.detail}<span class="inline-menu-detail">{item.detail}</span>{/if}
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	/* Surface and rows are the shared `.md-menu` family (editor.css). */
+	.inline-menu {
+		max-width: 360px;
+		max-height: 264px;
+		overflow-y: auto;
+	}
+
+	.inline-menu-label {
+		flex: 1 1 auto;
+		min-width: 4em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* No percentage width: the list sizes to its content, and a percentage there resolves
+	   against a width the content is still deciding, which clips a detail that would fit. */
+	.inline-menu-detail {
+		flex: 0 1 auto;
+		min-width: 0;
+		margin-left: auto;
+		padding-left: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--color-ui-muted, #93938d);
+	}
+</style>

package/dist/components/menu/InlineMenuHost.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { EditorEvents } from '../../editor-events';
+import type { InlineMenuState } from '../../inline-menu/inline-menu-state.svelte';
+import type { MenuPresence } from './menu-presence.svelte';
+type $$ComponentProps = {
+    menu: InlineMenuState;
+    events: EditorEvents;
+    menuPresence: MenuPresence;
+    getEditorEl: () => HTMLElement | null;
+    measureRange: (path: number[], start: number, end: number) => DOMRect[];
+};
+declare const InlineMenuHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type InlineMenuHost = ReturnType<typeof InlineMenuHost>;
+export default InlineMenuHost;

package/dist/components/menu/MenuIcon.svelte

@@ -1,107 +1,9 @@
 <script lang="ts" module>
-	/**
-	 * Lucide glyphs the editor's own chrome draws (menus, the selection bar, table affordances),
-	 * inlined as path data so the library carries no icon dependency. Every shape is a path so
-	 * the stroke styling below covers all of them.
-	 */
-	const GLYPHS = {
-		plus: ['M5 12h14', 'M12 5v14'],
-		type: ['M4 7V4h16v3', 'M9 20h6', 'M12 4v16'],
-		trash: [
-			'M3 6h18',
-			'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6',
-			'M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2',
-			'M10 11v6',
-			'M14 11v6'
-		],
-		'arrow-up': ['m5 12 7-7 7 7', 'M12 19V5'],
-		'arrow-down': ['M12 5v14', 'm19 12-7 7-7-7'],
-		'arrow-left': ['m12 19-7-7 7-7', 'M19 12H5'],
-		'arrow-right': ['M5 12h14', 'm12 5 7 7-7 7'],
-		scissors: [
-			'M9 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0',
-			'M8.12 8.12 12 12',
-			'M20 4 8.12 15.88',
-			'M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0',
-			'M14.8 14.8 20 20'
-		],
-		copy: [
-			'M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z',
-			'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'
-		],
-		clipboard: [
-			'M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z',
-			'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'
-		],
-		'align-left': ['M15 12H3', 'M17 18H3', 'M21 6H3'],
-		'align-center': ['M17 12H7', 'M19 18H5', 'M21 6H3'],
-		'align-right': ['M21 12H9', 'M21 18H7', 'M21 6H3'],
-		bold: ['M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'],
-		italic: ['M19 4h-9', 'M14 20H5', 'M15 4 9 20'],
-		strikethrough: ['M16 4H9a3 3 0 0 0-2.83 4', 'M14 12a4 4 0 0 1 0 8H6', 'M4 12h16'],
-		code: ['m16 18 6-6-6-6', 'm8 6-6 6 6 6'],
-		link: [
-			'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
-			'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'
-		],
-		heading: ['M6 12h12', 'M6 20V4', 'M18 20V4'],
-		list: ['M3 12h.01', 'M3 18h.01', 'M3 6h.01', 'M8 12h13', 'M8 18h13', 'M8 6h13'],
-		'list-ordered': [
-			'M10 12h11',
-			'M10 18h11',
-			'M10 6h11',
-			'M4 10h2',
-			'M4 6h1v4',
-			'M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'
-		],
-		'square-check': [
-			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-			'm9 12 2 2 4-4'
-		],
-		'text-quote': ['M17 6H3', 'M21 12H8', 'M21 18H8', 'M3 12v6'],
-		minus: ['M5 12h14'],
-		table: [
-			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-			'M12 3v18',
-			'M3 9h18',
-			'M3 15h18'
-		],
-		sigma: [
-			'M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2'
-		],
-		info: ['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0', 'M12 16v-4', 'M12 8h.01'],
-		'chevron-right': ['m9 18 6-6-6-6'],
-		'chevron-down': ['m6 9 6 6 6-6'],
-		'rows-2': [
-			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-			'M3 12h18'
-		],
-		'columns-2': [
-			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
-			'M12 3v18'
-		],
-		check: ['M20 6 9 17l-5-5'],
-		crop: ['M6 2v14a2 2 0 0 0 2 2h14', 'M18 22V8a2 2 0 0 0-2-2H2'],
-		captions: [
-			'M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z',
-			'M7 15h4',
-			'M15 15h2',
-			'M7 11h2',
-			'M13 11h4'
-		],
-		x: ['M18 6 6 18', 'm6 6 12 12'],
-		'grip-vertical': [
-			'M10 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
-			'M10 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
-			'M10 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
-			'M16 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
-			'M16 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
-			'M16 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0'
-		]
-	} as const;
+	/** One menu glyph by name: its stroked paths, or a letter for the three text marks. */
+	import { MENU_GLYPHS as GLYPHS, type MenuIconName } from '../../menu-icons';
 
 	/**
-	 * The marks as LETTERS, the way a formatting bar draws them: a bold B, a slanted I, an S with
+	 * The marks as letters, the way a formatting bar draws them: a bold B, a slanted I, an S with
 	 * its own line through it. Lucide's stroked outlines of these read as clip art at 16px.
 	 */
 	const LETTERS = {
@@ -109,8 +11,6 @@
 		italic: { text: 'I', weight: 500, italic: true, strike: false },
 		strikethrough: { text: 'S', weight: 600, italic: false, strike: true }
 	} as const;
-
-	export type MenuIconName = keyof typeof GLYPHS;
 </script>
 
 <script lang="ts">

package/dist/components/menu/MenuIcon.svelte.d.ts

@@ -1,47 +1,5 @@
-/**
- * Lucide glyphs the editor's own chrome draws (menus, the selection bar, table affordances),
- * inlined as path data so the library carries no icon dependency. Every shape is a path so
- * the stroke styling below covers all of them.
- */
-declare const GLYPHS: {
-    readonly plus: readonly ["M5 12h14", "M12 5v14"];
-    readonly type: readonly ["M4 7V4h16v3", "M9 20h6", "M12 4v16"];
-    readonly trash: readonly ["M3 6h18", "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", "M10 11v6", "M14 11v6"];
-    readonly 'arrow-up': readonly ["m5 12 7-7 7 7", "M12 19V5"];
-    readonly 'arrow-down': readonly ["M12 5v14", "m19 12-7 7-7-7"];
-    readonly 'arrow-left': readonly ["m12 19-7-7 7-7", "M19 12H5"];
-    readonly 'arrow-right': readonly ["M5 12h14", "m12 5 7 7-7 7"];
-    readonly scissors: readonly ["M9 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0", "M8.12 8.12 12 12", "M20 4 8.12 15.88", "M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0", "M14.8 14.8 20 20"];
-    readonly copy: readonly ["M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z", "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"];
-    readonly clipboard: readonly ["M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z", "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"];
-    readonly 'align-left': readonly ["M15 12H3", "M17 18H3", "M21 6H3"];
-    readonly 'align-center': readonly ["M17 12H7", "M19 18H5", "M21 6H3"];
-    readonly 'align-right': readonly ["M21 12H9", "M21 18H7", "M21 6H3"];
-    readonly bold: readonly ["M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"];
-    readonly italic: readonly ["M19 4h-9", "M14 20H5", "M15 4 9 20"];
-    readonly strikethrough: readonly ["M16 4H9a3 3 0 0 0-2.83 4", "M14 12a4 4 0 0 1 0 8H6", "M4 12h16"];
-    readonly code: readonly ["m16 18 6-6-6-6", "m8 6-6 6 6 6"];
-    readonly link: readonly ["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"];
-    readonly heading: readonly ["M6 12h12", "M6 20V4", "M18 20V4"];
-    readonly list: readonly ["M3 12h.01", "M3 18h.01", "M3 6h.01", "M8 12h13", "M8 18h13", "M8 6h13"];
-    readonly 'list-ordered': readonly ["M10 12h11", "M10 18h11", "M10 6h11", "M4 10h2", "M4 6h1v4", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"];
-    readonly 'square-check': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "m9 12 2 2 4-4"];
-    readonly 'text-quote': readonly ["M17 6H3", "M21 12H8", "M21 18H8", "M3 12v6"];
-    readonly minus: readonly ["M5 12h14"];
-    readonly table: readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M12 3v18", "M3 9h18", "M3 15h18"];
-    readonly sigma: readonly ["M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2"];
-    readonly info: readonly ["M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0", "M12 16v-4", "M12 8h.01"];
-    readonly 'chevron-right': readonly ["m9 18 6-6-6-6"];
-    readonly 'chevron-down': readonly ["m6 9 6 6 6-6"];
-    readonly 'rows-2': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M3 12h18"];
-    readonly 'columns-2': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M12 3v18"];
-    readonly check: readonly ["M20 6 9 17l-5-5"];
-    readonly crop: readonly ["M6 2v14a2 2 0 0 0 2 2h14", "M18 22V8a2 2 0 0 0-2-2H2"];
-    readonly captions: readonly ["M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "M7 15h4", "M15 15h2", "M7 11h2", "M13 11h4"];
-    readonly x: readonly ["M18 6 6 18", "m6 6 12 12"];
-    readonly 'grip-vertical': readonly ["M10 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M10 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M10 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0"];
-};
-export type MenuIconName = keyof typeof GLYPHS;
+/** One menu glyph by name: its stroked paths, or a letter for the three text marks. */
+import { type MenuIconName } from '../../menu-icons';
 type $$ComponentProps = {
     name: MenuIconName;
     size?: number;