@heyramzi/ui 2.24.0 → 3.0.0

package/src/editor/editor.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { Editor } from "@tiptap/core";
+	import { NodeSelection } from "@tiptap/pm/state";
 	import { untrack } from "svelte";
 	import "./content.css";
 	import "./doc-page.css";
@@ -19,7 +20,7 @@
 	// =========================
 	interface Props {
 		content?: Record<string, unknown> | null;
-		onchange?: (json: Record<string, unknown>) => void;
+		onContentChange?: (json: Record<string, unknown>) => void;
 		placeholder?: string;
 		minHeight?: string;
 		preset?: "full" | "notes";
@@ -32,9 +33,11 @@
 		/** The word on a heading's hover button, for `page`. */
 		copyLinkLabel?: string;
 		/** A heading's link was copied. */
-		oncopylink?: (url: string, id: string) => void;
+		onCopyLink?: (url: string, id: string) => void;
 		/** The live editor, for a host that needs focus or the document. */
 		instance?: Editor | null;
+		/** The editable region's accessible name. */
+		label?: string;
 	}
 
 	// =========================
@@ -42,15 +45,16 @@
 	// =========================
 	let {
 		content = null,
-		onchange,
+		onContentChange,
 		placeholder = "Start writing...",
 		minHeight = "28rem",
 		preset = "full",
 		blockIds = false,
 		variant = "box",
 		copyLinkLabel = "Copy link",
-		oncopylink,
+		onCopyLink,
 		instance = $bindable(null),
+		label = "Text editor",
 	}: Props = $props();
 
 	// =========================
@@ -66,6 +70,9 @@
 	let slashMenuPos = $state({ top: 0, left: 0 });
 	let slashSelectedIndex = $state(0);
 	let slashMenuEl: HTMLDivElement | undefined = $state();
+	const uid = $props.id();
+	const slashMenuId = `${uid}-slash`;
+	let toolbar: EditorToolbar | undefined = $state();
 
 	// Image toolbar
 	let showImageToolbar = $state(false);
@@ -101,6 +108,19 @@
 		}
 	});
 
+	// Focus stays in the text while the menu is open, so the text points at the highlighted command.
+	$effect(() => {
+		const dom = editor?.view.dom;
+		if (!dom) return;
+		if (showSlashMenu && slashItems.length > 0) {
+			dom.setAttribute("aria-controls", slashMenuId);
+			dom.setAttribute("aria-activedescendant", `${slashMenuId}-${slashSelectedIndex}`);
+		} else {
+			dom.removeAttribute("aria-controls");
+			dom.removeAttribute("aria-activedescendant");
+		}
+	});
+
 	// Close menus on outside click
 	$effect(() => {
 		if (!showSlashMenu && !showImageToolbar) return;
@@ -175,6 +195,18 @@
 		};
 	}
 
+	function openImageToolbar(img: HTMLImageElement) {
+		const rect = img.getBoundingClientRect();
+		const wrapperRect = editorElement?.getBoundingClientRect();
+		if (!wrapperRect) return;
+		activeImageElement = img;
+		imageToolbarPos = {
+			top: rect.top - wrapperRect.top - 40,
+			left: rect.left - wrapperRect.left + rect.width / 2 - 60,
+		};
+		showImageToolbar = true;
+	}
+
 	function setImageAlignment(align: "left" | "center" | "right") {
 		if (!editor || !activeImageElement) return;
 		const { state } = editor;
@@ -230,7 +262,7 @@
 			preset,
 			placeholder,
 			blockIds,
-			anchors: variant === "page" ? { label: copyLinkLabel, oncopy: oncopylink } : false,
+			anchors: variant === "page" ? { label: copyLinkLabel, onCopy: onCopyLink } : false,
 		});
 
 		editorInstance = new Editor({
@@ -238,7 +270,21 @@
 			extensions,
 			content: content ?? { type: "doc", content: [{ type: "paragraph" }] },
 			editorProps: {
+				// A function, so ProseMirror reads the current label on every update.
+				attributes: () => ({ "aria-label": label }),
 				handleKeyDown: (_view, event) => {
+					const mod = event.metaKey || event.ctrlKey;
+					if (
+						mod &&
+						!event.altKey &&
+						!event.shiftKey &&
+						event.key.toLowerCase() === "k" &&
+						toolbar
+					) {
+						event.preventDefault();
+						toolbar.toggleLink();
+						return true;
+					}
 					// No items means no menu on screen, so Enter and the arrows stay the editor's.
 					if (showSlashMenu && slashItems.length > 0) {
 						if (event.key === "ArrowDown") {
@@ -274,17 +320,8 @@
 				// this one needs only the event.
 				handleClick(_view, _pos, event) {
 					const target = event.target as HTMLElement;
-					if (preset === "full" && target?.tagName === "IMG") {
-						activeImageElement = target as HTMLImageElement;
-						const rect = target.getBoundingClientRect();
-						const wrapperRect = editorElement?.getBoundingClientRect();
-						if (wrapperRect) {
-							imageToolbarPos = {
-								top: rect.top - wrapperRect.top - 40,
-								left: rect.left - wrapperRect.left + rect.width / 2 - 60,
-							};
-							showImageToolbar = true;
-						}
+					if (preset === "full" && target instanceof HTMLImageElement) {
+						openImageToolbar(target);
 						return true;
 					}
 					showImageToolbar = false;
@@ -292,8 +329,22 @@
 					return false;
 				},
 			},
+			// Arrowing onto an image selects it as a node: the same toolbar opens, next in Tab order.
+			onSelectionUpdate: ({ editor: e }) => {
+				if (preset !== "full") return;
+				const { selection } = e.state;
+				const isImage = selection instanceof NodeSelection && selection.node.type.name === "image";
+				const dom = isImage ? e.view.nodeDOM(selection.from) : null;
+				const img =
+					dom instanceof HTMLImageElement ? dom : (dom as Element | null)?.querySelector("img");
+				if (img) openImageToolbar(img);
+				else if (showImageToolbar) {
+					showImageToolbar = false;
+					activeImageElement = null;
+				}
+			},
 			onUpdate: ({ editor: e }) => {
-				onchange?.(e.getJSON());
+				onContentChange?.(e.getJSON());
 
 				const { from } = e.state.selection;
 				const textBefore = e.state.doc.textBetween(Math.max(0, from - SLASH_WINDOW), from, "\n");
@@ -325,8 +376,8 @@
 		};
 	}
 
-	// Only the element mounts the editor. Read tracked, `content` (fed back by onchange) and the
-	// `tick++` each transaction makes would destroy and rebuild it until Svelte stops the loop.
+	// Only the element mounts the editor. Read tracked, `content` (fed back by onContentChange) and
+	// the `tick++` each transaction makes would destroy and rebuild it until Svelte stops the loop.
 	$effect(() => {
 		if (editorElement) return untrack(mount);
 	});
@@ -343,7 +394,13 @@
 	style="--editor-min-height: {minHeight};"
 >
 	{#if !isPage}
-		<EditorToolbar {editor} {tick} {preset} onInsertYoutube={insertYoutubeVideo} />
+		<EditorToolbar
+			bind:this={toolbar}
+			{editor}
+			{tick}
+			{preset}
+			onInsertYoutube={insertYoutubeVideo}
+		/>
 	{/if}
 
 	<!-- Editor surface -->
@@ -352,17 +409,18 @@
 	<!-- Slash command menu -->
 	{#if showSlashMenu && slashItems.length > 0}
 		<SlashMenu
+			id={slashMenuId}
 			items={slashItems}
 			pos={slashMenuPos}
 			bind:selectedIndex={slashSelectedIndex}
 			bind:el={slashMenuEl}
-			onselect={executeSlashCommand}
+			onSelect={executeSlashCommand}
 		/>
 	{/if}
 
 	<!-- Image toolbar (full preset only) -->
 	{#if preset === "full" && showImageToolbar}
-		<ImageToolbar pos={imageToolbarPos} onalign={setImageAlignment} ondelete={deleteActiveImage} />
+		<ImageToolbar pos={imageToolbarPos} onAlign={setImageAlignment} onDelete={deleteActiveImage} />
 	{/if}
 
 	<!-- Status bar -->
@@ -377,167 +435,170 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* ---- WRAPPER ---- */
-	.editor-wrapper {
-		position: relative;
-		border-radius: var(--radius-xl);
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		transition:
-			border-color var(--duration-quick) var(--ease-smooth-out),
-			box-shadow var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.editor-wrapper.focused {
-		border-color: oklch(from var(--color-brand) l c h / 0.25);
-		box-shadow: 0 0 0 3px oklch(from var(--color-brand) l c h / 0.06);
-	}
+	@layer components {
+		/* ---- WRAPPER ---- */
+		.editor-wrapper {
+			position: relative;
+			border-radius: var(--radius-xl);
+			background: var(--color-card);
+			border: 1px solid var(--color-border);
+			transition:
+				border-color var(--duration-quick) var(--ease-smooth-out),
+				box-shadow var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* A document page owns its frame, so the editor draws none. */
-	.editor-wrapper.page {
-		border: 0;
-		border-radius: 0;
-		background: transparent;
-	}
+		.editor-wrapper.focused {
+			border-color: oklch(from var(--color-brand) l c h / 0.25);
+			box-shadow: 0 0 0 3px oklch(from var(--color-brand) l c h / 0.06);
+		}
 
-	.editor-wrapper.page .editor-surface :global(.tiptap) {
-		outline: none;
-		min-height: var(--editor-min-height, 28rem);
-	}
+		/* A document page owns its frame, so the editor draws none. */
+		.editor-wrapper.page {
+			border: 0;
+			border-radius: 0;
+			background: transparent;
+		}
 
-	/* ---- EDITOR SURFACE ---- */
-	.editor-surface {
-		min-height: var(--editor-min-height, 28rem);
-	}
+		.editor-wrapper.page .editor-surface :global(.tiptap) {
+			outline: none;
+			min-height: var(--editor-min-height, 28rem);
+		}
 
-	.editor-wrapper:not(.page) .editor-surface :global(.tiptap) {
-		padding: 2rem 2.5rem;
-		outline: none;
-		min-height: var(--editor-min-height, 28rem);
-		font-size: 1rem;
-		line-height: 1.75;
-		color: var(--color-foreground);
-		caret-color: var(--color-brand);
-	}
+		/* ---- EDITOR SURFACE ---- */
+		.editor-surface {
+			min-height: var(--editor-min-height, 28rem);
+		}
 
-	/* Placeholder */
-	.editor-surface :global(.tiptap p.is-editor-empty:first-child::before) {
-		content: attr(data-placeholder);
-		color: var(--color-muted-foreground);
-		opacity: 0.4;
-		pointer-events: none;
-		float: left;
-		height: 0;
-	}
+		.editor-wrapper:not(.page) .editor-surface :global(.tiptap) {
+			padding: 2rem 2.5rem;
+			outline: none;
+			min-height: var(--editor-min-height, 28rem);
+			font-size: 1rem;
+			line-height: 1.75;
+			color: var(--color-foreground);
+			caret-color: var(--color-brand);
+		}
 
-	/* Node typography (h1-h4, p, ul/ol/li, blockquote, code, pre, a, img, hr, strong)
-	   lives in ./content.css which is imported at the top of this component.
-	   Editor-only chrome (cursor, hover outline) below. */
-	.editor-surface :global(.tiptap .image-wrapper) {
-		position: relative;
-		display: inline-block;
-		max-width: 100%;
-	}
+		/* Placeholder */
+		.editor-surface :global(.tiptap p.is-editor-empty:first-child::before) {
+			content: attr(data-placeholder);
+			color: var(--color-muted-foreground);
+			opacity: 0.4;
+			pointer-events: none;
+			float: left;
+			height: 0;
+		}
 
-	.editor-surface :global(.tiptap img) {
-		transition: box-shadow var(--duration-quick) var(--ease-smooth-out);
-		cursor: pointer;
-	}
+		/* Node typography (h1-h4, p, ul/ol/li, blockquote, code, pre, a, img, hr, strong)
+		   lives in ./content.css which is imported at the top of this component.
+		   Editor-only chrome (cursor, hover outline) below. */
+		.editor-surface :global(.tiptap .image-wrapper) {
+			position: relative;
+			display: inline-block;
+			max-width: 100%;
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.tiptap img:hover) {
-			box-shadow: 0 0 0 2px oklch(from var(--color-brand) l c h / 0.2);
+		.editor-surface :global(.tiptap img) {
+			transition: box-shadow var(--duration-quick) var(--ease-smooth-out);
+			cursor: pointer;
 		}
-	}
 
-	/* ---- DRAG HANDLE ---- */
-	.editor-surface :global(.drag-handle) {
-		position: absolute;
-		top: 0.25rem;
-		left: -1.5rem;
-		width: 1.25rem;
-		height: 1.25rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--color-muted-foreground);
-		cursor: grab;
-		opacity: 0;
-		transition: opacity var(--duration-fast) var(--ease-smooth-out);
-		border-radius: var(--radius-xs);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.tiptap img:hover) {
+				box-shadow: 0 0 0 2px oklch(from var(--color-brand) l c h / 0.2);
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.drag-handle:hover) {
-			background: var(--color-accent);
-			color: var(--color-foreground);
+		/* ---- DRAG HANDLE ---- */
+		.editor-surface :global(.drag-handle) {
+			position: absolute;
+			top: 0.25rem;
+			left: -1.5rem;
+			width: 1.25rem;
+			height: 1.25rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--color-muted-foreground);
+			cursor: grab;
+			opacity: 0;
+			transition: opacity var(--duration-fast) var(--ease-smooth-out);
+			border-radius: var(--radius-xs);
 		}
-	}
 
-	.editor-surface :global(.drag-handle:active) {
-		cursor: grabbing;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.drag-handle:hover) {
+				background: var(--color-accent);
+				color: var(--color-foreground);
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.tiptap > *:hover .drag-handle) {
-			opacity: 0.5;
+		.editor-surface :global(.drag-handle:active) {
+			cursor: grabbing;
 		}
-	}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.tiptap [data-node-view-wrapper]:hover .drag-handle) {
-			opacity: 0.5;
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.tiptap > *:hover .drag-handle) {
+				opacity: 0.5;
+			}
 		}
-	}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.tiptap > *:hover .drag-handle:hover) {
-			opacity: 1;
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.tiptap [data-node-view-wrapper]:hover .drag-handle) {
+				opacity: 0.5;
+			}
 		}
-	}
 
-	@media (hover: hover) and (pointer: fine) {
-		.editor-surface :global(.tiptap [data-node-view-wrapper]:hover .drag-handle:hover) {
-			opacity: 1;
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.tiptap > *:hover .drag-handle:hover) {
+				opacity: 1;
+			}
 		}
-	}
 
-	/* ---- STATUS BAR ---- */
-	.status-bar {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		padding: 0.5rem 1.25rem;
-		border-top: 1px solid oklch(from var(--color-border) l c h / 0.5);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.editor-surface :global(.tiptap [data-node-view-wrapper]:hover .drag-handle:hover) {
+				opacity: 1;
+			}
+		}
 
-	.status-hint {
-		font-size: 0.6875rem;
-		color: var(--color-muted-foreground);
-		opacity: 0.5;
-	}
+		/* ---- STATUS BAR ---- */
+		.status-bar {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			padding: 0.5rem 1.25rem;
+			border-top: 1px solid oklch(from var(--color-border) l c h / 0.5);
+		}
 
-	.status-hint kbd {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 1.125rem;
-		height: 1.125rem;
-		padding: 0 0.25rem;
-		margin: 0 0.125rem;
-		border: 1px solid oklch(from var(--color-border) l c h / 0.6);
-		border-radius: var(--radius-xs);
-		background: var(--color-muted);
-		font-family: var(--font-mono);
-		font-size: 0.625rem;
-		font-weight: 500;
-		line-height: 1;
-	}
+		.status-hint {
+			font-size: 0.6875rem;
+			color: var(--color-muted-foreground);
+		}
 
-	/* ---- REDUCED MOTION ---- */
-	@media (prefers-reduced-motion: reduce) {
-		.editor-wrapper {
-			transition: none;
+		.status-hint kbd {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 1.125rem;
+			height: 1.125rem;
+			padding: 0 0.25rem;
+			margin: 0 0.125rem;
+			border: 1px solid oklch(from var(--color-border) l c h / 0.6);
+			border-radius: var(--radius-xs);
+			background: var(--color-muted);
+			font-family: var(--font-mono);
+			font-size: 0.625rem;
+			font-weight: 500;
+			line-height: 1;
+		}
+
+		/* ---- REDUCED MOTION ---- */
+		@media (prefers-reduced-motion: reduce) {
+			.editor-wrapper {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/editor/editor.svelte.d.ts

@@ -0,0 +1,27 @@
+import { Editor } from "@tiptap/core";
+import "./content.css";
+import "./doc-page.css";
+interface Props {
+    content?: Record<string, unknown> | null;
+    onContentChange?: (json: Record<string, unknown>) => void;
+    placeholder?: string;
+    minHeight?: string;
+    preset?: "full" | "notes";
+    blockIds?: boolean;
+    /**
+     * `box` is the framed editor with a toolbar. `page` is a document: no frame, no toolbar,
+     * type set by `.doc-surface` (see doc-page.css), heading anchors on.
+     */
+    variant?: "box" | "page";
+    /** The word on a heading's hover button, for `page`. */
+    copyLinkLabel?: string;
+    /** A heading's link was copied. */
+    onCopyLink?: (url: string, id: string) => void;
+    /** The live editor, for a host that needs focus or the document. */
+    instance?: Editor | null;
+    /** The editable region's accessible name. */
+    label?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "instance">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/editor/extensions.ts

@@ -6,6 +6,7 @@ import { DragHandle } from "@tiptap/extension-drag-handle";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import { BlockIdExtension } from "./block-id.js";
+import { BlockMove } from "./block-move.js";
 import { CodeBlockChrome, HeadingAnchors } from "./doc-blocks.js";
 
 const CmsBlock = TiptapNode.create({
@@ -115,6 +116,20 @@ function dedupeExtensions(extensions: Extensions): Extensions {
 
 const DRAG_DOTS = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="2.5" cy="2.5" r="1" fill="currentColor"/><circle cx="2.5" cy="6" r="1" fill="currentColor"/><circle cx="2.5" cy="9.5" r="1" fill="currentColor"/><circle cx="6" cy="2.5" r="1" fill="currentColor"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="9.5" r="1" fill="currentColor"/></svg>`;
 
+/** The stock Image has no align, so the image toolbar's choice was dropped. content.css reads data-align. */
+const AlignedImage = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-align"),
+        renderHTML: (attrs) => (attrs.align ? { "data-align": attrs.align } : {}),
+      },
+    };
+  },
+});
+
 function dragHandle() {
   return DragHandle.configure({
     render() {
@@ -131,7 +146,7 @@ export type ExtensionOptions = {
   placeholder: string;
   blockIds: boolean;
   /** A document page: heading anchors with a hover "Copy link", and the label for it. */
-  anchors?: { label: string; oncopy?: (url: string, id: string) => void } | false;
+  anchors?: { label: string; onCopy?: (url: string, id: string) => void } | false;
 };
 
 /** The extension list for a preset: `full` adds CMS blocks, YouTube, images and H4. */
@@ -151,7 +166,7 @@ export function buildExtensions({
       ? [
           CmsBlock,
           Youtube,
-          Image.configure({ inline: false }),
+          AlignedImage.configure({ inline: false }),
           TaskList,
           TaskItem.configure({ nested: true }),
           Table.configure({ resizable: false }),
@@ -164,6 +179,7 @@ export function buildExtensions({
     ...(anchors ? [HeadingAnchors.configure(anchors)] : []),
     Placeholder.configure({ placeholder }),
     dragHandle(),
+    BlockMove,
     ...(blockIds ? [BlockIdExtension] : []),
   ]);
 }

package/src/editor/image-align.test.ts

@@ -0,0 +1,35 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import { Editor } from "@tiptap/core";
+import { buildExtensions } from "./extensions.js";
+
+let editor: Editor | null = null;
+
+afterEach(() => {
+  editor?.destroy();
+  editor = null;
+});
+
+describe("image alignment", () => {
+  it("keeps the align the image toolbar sets, as data-align", () => {
+    editor = new Editor({
+      extensions: buildExtensions({ preset: "full", placeholder: "", blockIds: false }),
+      content: '<p>a</p><img src="x.png">',
+    });
+    const pos = editor.state.doc.child(0).nodeSize;
+    const image = editor.state.doc.nodeAt(pos);
+    if (!image) throw new Error("no image");
+    editor.view.dispatch(
+      editor.state.tr.setNodeMarkup(pos, undefined, { ...image.attrs, align: "center" }),
+    );
+    expect(editor.state.doc.nodeAt(pos)?.attrs.align).toBe("center");
+    expect(editor.getHTML()).toContain('data-align="center"');
+  });
+
+  it("reads data-align back from HTML", () => {
+    editor = new Editor({
+      extensions: buildExtensions({ preset: "full", placeholder: "", blockIds: false }),
+      content: '<img src="x.png" data-align="right">',
+    });
+    expect(editor.state.doc.child(0).attrs.align).toBe("right");
+  });
+});