@heyramzi/ui 2.24.0 → 3.1.0

package/src/editor/editor-toolbar.svelte

@@ -38,7 +38,8 @@
 	// =========================
 	let linkUrl = $state("");
 	let showLinkPopover = $state(false);
-	let linkInputEl: HTMLInputElement | undefined = $state();
+	// null, not undefined: Input's ref falls back to null, and binding undefined to it throws.
+	let linkInputEl = $state<HTMLInputElement | null>(null);
 
 	// =========================
 	// DERIVED
@@ -57,7 +58,16 @@
 	// =========================
 	// FUNCTIONS
 	// =========================
-	function toggleLink() {
+	/**
+	 * Active state for a toolbar button. `editor` is the same object every transaction, so a
+	 * derived of it never re-runs the template; reading `tick` here does.
+	 */
+	function isActive(name: string, attributes?: Record<string, unknown>): boolean {
+		return tick >= 0 && (editor?.isActive(name, attributes) ?? false);
+	}
+
+	/** Opens the link field, or removes the link under the cursor. The editor binds Cmd+K to it. */
+	export function toggleLink() {
 		if (!editor) return;
 		if (editor.isActive("link")) {
 			editor.chain().focus().unsetLink().run();
@@ -106,7 +116,7 @@
 					}}
 				/>
 				<Button size="sm" icon onclick={applyLink} aria-label="Apply link">
-					<LinkSimple size={14} />
+					<LinkSimple aria-hidden="true" size={14} />
 				</Button>
 				<Button
 					variant="ghost"
@@ -115,8 +125,9 @@
 					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
 					onclick={cancelLink}
 					title="Cancel"
+					aria-label="Cancel link"
 				>
-					&times;
+					<span aria-hidden="true">&times;</span>
 				</Button>
 			</div>
 		{:else}
@@ -125,7 +136,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 1 })}
+				aria-pressed={isActive("heading", { level: 1 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
 				title="Heading 1"
 			>
@@ -136,7 +147,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 2 })}
+				aria-pressed={isActive("heading", { level: 2 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
 				title="Heading 2"
 			>
@@ -147,7 +158,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 3 })}
+				aria-pressed={isActive("heading", { level: 3 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
 				title="Heading 3"
 			>
@@ -161,38 +172,38 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("bold")}
+				aria-pressed={isActive("bold")}
 				onclick={() => editor?.chain().focus().toggleBold().run()}
 				title="Bold (Cmd+B)"
 			>
-				<TextB size={15} weight="bold" />
+				<TextB aria-hidden="true" size={15} weight="bold" />
 			</Button>
 			<Button
 				variant="ghost"
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("italic")}
+				aria-pressed={isActive("italic")}
 				onclick={() => editor?.chain().focus().toggleItalic().run()}
 				title="Italic (Cmd+I)"
 			>
-				<TextItalic size={15} />
+				<TextItalic aria-hidden="true" size={15} />
 			</Button>
 			<Button
 				variant="ghost"
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("strike")}
+				aria-pressed={isActive("strike")}
 				onclick={() => editor?.chain().focus().toggleStrike().run()}
 				title="Strikethrough"
 			>
-				<TextStrikethrough size={15} />
+				<TextStrikethrough aria-hidden="true" size={15} />
 			</Button>
 
 			<div class="toolbar-divider"></div>
 
-			{#if editor.isActive("link")}
+			{#if isActive("link")}
 				<Button
 					variant="ghost"
 					size="sm"
@@ -202,7 +213,7 @@
 					onclick={() => editor?.chain().focus().unsetLink().run()}
 					title="Remove link"
 				>
-					<LinkBreak size={15} />
+					<LinkBreak aria-hidden="true" size={15} />
 				</Button>
 			{:else}
 				<Button
@@ -213,7 +224,7 @@
 					onclick={toggleLink}
 					title="Add link (Cmd+K)"
 				>
-					<LinkSimple size={15} />
+					<LinkSimple aria-hidden="true" size={15} />
 				</Button>
 			{/if}
 
@@ -224,33 +235,33 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("bulletList")}
+				aria-pressed={isActive("bulletList")}
 				onclick={() => editor?.chain().focus().toggleBulletList().run()}
 				title="Bullet list"
 			>
-				<ListBullets size={15} />
+				<ListBullets aria-hidden="true" size={15} />
 			</Button>
 			<Button
 				variant="ghost"
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("orderedList")}
+				aria-pressed={isActive("orderedList")}
 				onclick={() => editor?.chain().focus().toggleOrderedList().run()}
 				title="Ordered list"
 			>
-				<ListNumbers size={15} />
+				<ListNumbers aria-hidden="true" size={15} />
 			</Button>
 			<Button
 				variant="ghost"
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("blockquote")}
+				aria-pressed={isActive("blockquote")}
 				onclick={() => editor?.chain().focus().toggleBlockquote().run()}
 				title="Quote"
 			>
-				<Quotes size={15} />
+				<Quotes aria-hidden="true" size={15} />
 			</Button>
 
 			{#if preset === "full"}
@@ -261,11 +272,11 @@
 					size="sm"
 					icon
 					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-					aria-pressed={editor.isActive("youtube")}
+					aria-pressed={isActive("youtube")}
 					onclick={onInsertYoutube}
 					title="Insert YouTube video"
 				>
-					<VideoCamera size={15} />
+					<VideoCamera aria-hidden="true" size={15} />
 				</Button>
 			{/if}
 		{/if}
@@ -276,33 +287,37 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	/* ---- PERSISTENT TOOLBAR ---- */
-	.editor-toolbar {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1px;
-		padding: 6px 8px;
-		border-bottom: 1px solid var(--color-border);
-		background: oklch(from var(--color-muted) l c h / 0.35);
-		border-top-left-radius: var(--radius-xl);
-		border-top-right-radius: var(--radius-xl);
-		min-height: 2.375rem;
-	}
+	@layer theme, base, components, utilities;
 
-	.toolbar-divider {
-		width: 1px;
-		height: 1rem;
-		background: var(--color-border);
-		margin: 0 4px;
-		opacity: 0.6;
-	}
+	@layer components {
+		/* ---- PERSISTENT TOOLBAR ---- */
+		.editor-toolbar {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 1px;
+			padding: 6px 8px;
+			border-bottom: 1px solid var(--color-border);
+			background: oklch(from var(--color-muted) l c h / 0.35);
+			border-top-left-radius: var(--radius-xl);
+			border-top-right-radius: var(--radius-xl);
+			min-height: 2.375rem;
+		}
+
+		.toolbar-divider {
+			width: 1px;
+			height: 1rem;
+			background: var(--color-border);
+			margin: 0 4px;
+			opacity: 0.6;
+		}
 
-	/* ---- LINK POPOVER ---- */
-	.link-popover {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 1px;
+		/* ---- LINK POPOVER ---- */
+		.link-popover {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			padding: 1px;
+		}
 	}
 </style>

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

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor: Editor | null;
+    /** Bumped by the parent on every transaction, so active states re-read. */
+    tick: number;
+    preset: "full" | "notes";
+    onInsertYoutube: () => void;
+}
+declare const $$Component: import("svelte").Component<Props, {
+    toggleLink: () => void;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;