@heyramzi/ui 2.22.1 → 2.24.0

package/src/components/language-flag/language-flag.svelte

@@ -3,22 +3,14 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
-
-	// =========================
-	// CONSTANTS
-	// =========================
-	// The host serves these files from /flags. Pass `flags` for another set or path.
-	const DEFAULT_FLAGS: Record<string, string> = {
-		en: "/flags/US.svg",
-		fr: "/flags/FR.svg",
-	};
+	import { LANGUAGE_FLAGS } from "./flags.js";
 
 	// =========================
 	// PROPS
 	// =========================
 	interface Props {
 		language: string;
-		/** Language code to image URL. */
+		/** Language code to image URL, for another set or path. */
 		flags?: Record<string, string>;
 		size?: "sm" | "md";
 		showLabel?: boolean;
@@ -27,7 +19,7 @@
 
 	let {
 		language,
-		flags = DEFAULT_FLAGS,
+		flags = LANGUAGE_FLAGS,
 		size = "sm",
 		showLabel = false,
 		class: className,

package/src/components/list-page/empty-state.svelte

@@ -2,8 +2,10 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import type { Snippet } from "svelte";
 	import { Button } from "../../shadcn/button/index.js";
 	import * as Empty from "../../shadcn/empty/index.js";
+	import { cn } from "../../lib/utils.js";
 	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 	// =========================
@@ -12,25 +14,93 @@
 	interface Props {
 		icon?: PhosphorIcon;
 		iconWeight?: IconWeight;
+		/** Replaces the muted colour of a bare icon. Ignored by the tile, which stays foreground. */
+		iconClass?: string;
 		title: string;
 		description?: string;
 		actionLabel?: string;
 		actionHref?: string;
 		onAction?: () => void;
+		/** Several ways out, drawn in one row after the single action. */
+		actions?: Snippet;
+		/** `card` fills the white panel; `dashed` frames a whole dashboard section. */
+		surface?: "plain" | "card" | "dashed";
+		/** `sm` fits a 280px rail: a bare icon and one line of small type. */
+		size?: "default" | "sm";
+		class?: string;
 	}
 
+	/** A null `icon` draws the icon in a white tile. */
+	type Look = {
+		root: string;
+		icon: string | null;
+		header: string;
+		title: string;
+		description: string;
+	};
+
 	// =========================
 	// PROPS
 	// =========================
 	let {
 		icon: Icon,
 		iconWeight,
+		iconClass,
 		title,
 		description,
 		actionLabel,
 		actionHref,
 		onAction,
+		actions,
+		surface = "plain",
+		size = "default",
+		class: className,
 	}: Props = $props();
+
+	// =========================
+	// CONSTANTS
+	// =========================
+	// A white tile, not a brand tint: the accent marks the one action (DESIGN.md rule 1).
+	const PAGE: Look = {
+		root: "py-16",
+		icon: null,
+		header: "max-w-md",
+		title: "font-heading text-base font-semibold text-balance [overflow-wrap:anywhere]",
+		description: "",
+	};
+
+	const RAIL: Look = {
+		root: "gap-2 px-6 py-12",
+		icon: "size-6",
+		header: "max-w-none",
+		title: "",
+		description: "max-w-56 text-xs leading-relaxed",
+	};
+
+	// A dashed box stands in for a whole dashboard section, so it takes a heading's size.
+	const SECTION: Look = {
+		root: "p-10 text-wrap",
+		icon: "size-10",
+		header: "max-w-md gap-1.5",
+		title: "font-heading text-lg font-semibold tracking-normal",
+		description: "text-sm",
+	};
+
+	// A framed box sizes as a block, so a caller's `m-4` insets it instead of pushing it 32px wide.
+	const SURFACE: Record<NonNullable<Props["surface"]>, string> = {
+		plain: "",
+		card: "w-auto flex-initial bg-card",
+		dashed: "w-auto flex-initial border-2 border-border",
+	};
+
+	// =========================
+	// DERIVED
+	// =========================
+	let look = $derived(size === "sm" ? RAIL : surface === "dashed" ? SECTION : PAGE);
+	// Dashboard empties carry their own `t-enter`, and a rail empty flips on every filter keystroke.
+	let reveal = $derived(look === PAGE);
+	let heading = $derived(look === SECTION);
+	let hasAction = $derived(Boolean(actionLabel && (actionHref || onAction)));
 </script>
 
 <!-- =========================== -->
@@ -38,29 +108,37 @@
 <!-- =========================== -->
 <!-- transitions-dev texts reveal: the parts arrive in reading order, so the page reads as
      loaded and empty. Reduced motion keeps the fade. -->
-<Empty.Root class="t-empty py-16">
-	<Empty.Header class="max-w-md">
-		{#if Icon}
-			<!-- A white tile, not a brand tint: the accent marks the one action (DESIGN.md
-			     rule 1), and the button below is it. -->
+<Empty.Root class={cn(reveal && "t-empty", look.root, SURFACE[surface], className)}>
+	{#if Icon && look.icon}
+		<Icon
+			weight={iconWeight}
+			class={cn(look.icon, iconClass ?? "text-muted-foreground")}
+			aria-hidden="true"
+		/>
+	{/if}
+	<Empty.Header class={look.header}>
+		{#if Icon && !look.icon}
 			<Empty.Media class="mb-3 size-12 rounded-xl bg-card text-foreground shadow-card">
 				<Icon weight={iconWeight} class="size-6" />
 			</Empty.Media>
 		{/if}
-		<Empty.Title class="font-heading text-base font-semibold text-balance [overflow-wrap:anywhere]"
-			>{title}</Empty.Title
+		<Empty.Title
+			class={look.title}
+			role={heading ? "heading" : undefined}
+			aria-level={heading ? 2 : undefined}>{title}</Empty.Title
 		>
 		{#if description}
-			<Empty.Description>{description}</Empty.Description>
+			<Empty.Description class={look.description}>{description}</Empty.Description>
 		{/if}
 	</Empty.Header>
-	{#if actionLabel && (actionHref || onAction)}
-		<Empty.Content>
-			{#if actionHref}
+	{#if hasAction || actions}
+		<Empty.Content class="max-w-md flex-row flex-wrap justify-center gap-2">
+			{#if hasAction && actionHref}
 				<Button href={actionHref}>{actionLabel}</Button>
-			{:else}
+			{:else if hasAction}
 				<Button onclick={onAction}>{actionLabel}</Button>
 			{/if}
+			{@render actions?.()}
 		</Empty.Content>
 	{/if}
 </Empty.Root>

package/src/components/list-page/filter-popover.svelte

@@ -8,6 +8,7 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import CountChip from "../chip/count-chip.svelte";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 	// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
@@ -70,11 +71,7 @@
 			{@render trailing()}
 		{/if}
 		{#if hasCount}
-			<span
-				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/12 px-1 text-xs leading-none font-semibold text-brand tabular-nums dark:text-brand-light"
-			>
-				{count.toLocaleString()}
-			</span>
+			<CountChip {count} size="sm" tone="brand" class="ml-0.5" />
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content class={cn("p-2", width, contentClass)} {align}>

package/src/components/list-page/grouped-list.svelte

@@ -6,6 +6,7 @@
 	import { SvelteSet } from "svelte/reactivity";
 	import { CaretDown, Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -110,10 +111,7 @@
 					/>
 					{@render header(group, { collapsed: isCollapsed })}
 					{#if getCount}
-						<span
-							class="rounded-full bg-foreground/6 px-1.5 text-xs leading-5 font-medium text-muted-foreground tabular-nums"
-							>{getCount(group)}</span
-						>
+						<CountChip count={getCount(group)} />
 					{/if}
 				</button>
 				{#if actions}

package/src/components/list-page/index.ts

@@ -1,6 +1,5 @@
-export { default as DetailEmpty } from "./detail-empty.svelte";
 export { default as DetailHeader } from "./detail-header.svelte";
-export { default as DetailPanel } from "./detail-panel.svelte";
+export { default as DetailPanel } from "../../lib/panel.svelte";
 export { default as DetailRow } from "./detail-row.svelte";
 export { default as DetailStack } from "./detail-stack.svelte";
 export { default as EmptyState } from "./empty-state.svelte";
@@ -9,7 +8,6 @@ export { default as PrevNext } from "./prev-next.svelte";
 export { stepTo } from "./step.js";
 export { default as NoticeBar } from "./notice-bar.svelte";
 export { default as RailBody } from "./rail-body.svelte";
-export { default as RailEmpty } from "./rail-empty.svelte";
 export { default as RailHead } from "./rail-head.svelte";
 export { default as RailRow } from "./rail-row.svelte";
 export { default as SectionLabel } from "../section-header/section-label.svelte";

package/src/components/section-header/section-header.svelte

@@ -4,6 +4,7 @@
 	// =========================
 	import type { Snippet } from "svelte";
 	import SectionLabel from "./section-label.svelte";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -36,12 +37,7 @@
 		<svelte:element this={`h${level}`} class="flex items-center gap-2">
 			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
-				<span
-					class="shrink-0 rounded-full bg-foreground/6 px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
-					aria-label={`${count.toLocaleString()} ${countLabel}`}
-				>
-					{count.toLocaleString()}
-				</span>
+				<CountChip {count} size="sm" aria-label={`${count.toLocaleString()} ${countLabel}`} />
 			{/if}
 		</svelte:element>
 		{#if description}

package/src/components/segmented/segment.svelte

@@ -30,8 +30,8 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -47,7 +47,7 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { label, count, icon, image, done = false, badge, active = false }: Props = $props();
+	let { label, count, icon: Icon, image, done = false, badge, active = false }: Props = $props();
 
 	// =========================
 	// DERIVED
@@ -69,8 +69,8 @@
 			auto && "group-data-[state=active]/segment:opacity-100",
 		)}
 	/>
-{:else if icon}
-	<Icon {icon} size={16} class="shrink-0" />
+{:else if Icon}
+	<Icon size={16} class="shrink-0" />
 {/if}
 
 {label}
@@ -80,21 +80,15 @@
 {/if}
 
 {#if count != null}
-	<span
-		class={cn(
-			// WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill.
-
-			// WHY min-width equals height with 4px padding: `min-w-5 px-1.5` made a digit
-			// 20 by 18, so `rounded-full` drew an ellipse.
-			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
-			"bg-foreground/8 text-muted-foreground",
-			on && "bg-brand/14 text-brand",
-			auto &&
-				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
-		)}
-	>
-		{count.toLocaleString()}
-	</span>
+	<!-- WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill. -->
+	<CountChip
+		{count}
+		size="sm"
+		tone={on ? "brand" : "neutral"}
+		class={auto
+			? "group-data-[state=active]/segment:bg-brand/12 group-data-[state=active]/segment:text-brand dark:group-data-[state=active]/segment:text-brand-light"
+			: undefined}
+	/>
 {:else if done}
 	<span
 		class={cn(

package/src/components/segmented/segmented-filter.svelte

@@ -13,7 +13,6 @@
 		splitSegments,
 	} from "./collapse.js";
 	import { segmentedTriggerClass } from "./segmented.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
 	import { CaretDown } from "phosphor-svelte";
 	import { Picker } from "../picker/index.js";
@@ -162,7 +161,7 @@
 							)}
 						/>
 					{:else if markOnly && option.icon}
-						<Icon icon={option.icon} size={16} class="shrink-0" />
+						<option.icon size={16} class="shrink-0" />
 					{:else}
 						<Segment
 							label={option.label}

package/src/components/table-view/table-view.svelte

@@ -11,12 +11,12 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
+	import { CaretDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import * as Table from "../../shadcn/table/index.js";
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { Checkbox } from "../../shadcn/checkbox/index.js";
-	import { TableSkeleton } from "../data-table/index.js";
+	import { SortableHead, TableSkeleton } from "../data-table/index.js";
 	import { toggleSort, type SortState } from "../data-table/data-table.js";
 
 	// =========================
@@ -174,12 +174,6 @@
 		return value === null || value === undefined ? "" : String(value);
 	}
 
-	function ariaSort(column: TableColumn<Row>): "ascending" | "descending" | "none" | undefined {
-		if (!column.sortable) return undefined;
-		if (sort?.key !== column.key) return "none";
-		return sort.direction === "asc" ? "ascending" : "descending";
-	}
-
 	function toggleRow(row: Row, on: boolean) {
 		const next = new Set(selected);
 		if (on) next.add(rowKey(row));
@@ -358,43 +352,35 @@
 					</Table.Head>
 				{/if}
 				{#each columns as column (column.key)}
-					<Table.Head
-						class={cn(
-							"whitespace-normal",
-							column.numeric && "text-end",
-							column.sortable && "h-8 p-0",
-							column.hideBelow && HIDE[column.hideBelow],
-							column.sticky && "bg-card sticky left-0 z-20",
-							column.headClass ?? column.class,
-						)}
-						style={column.width ? `width: ${column.width}` : undefined}
-						aria-sort={ariaSort(column)}
-					>
-						{#if column.sortable}
-							{@const dir = sort?.key === column.key ? sort.direction : null}
-							<button
-								type="button"
-								class={cn(
-									"t-press transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 flex h-8 w-full items-center gap-1 px-2 text-xs font-medium outline-none focus-visible:shadow-(--ring-focus-inset)",
-									column.numeric ? "justify-end" : "justify-start",
-								)}
-								onclick={() => (sort = toggleSort(sort, column.key as keyof Row & string))}
-							>
-								{#if head}{@render head(column)}{:else}{column.label}{/if}
-								{#if dir === "asc"}
-									<CaretUp class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else if dir === "desc"}
-									<CaretDown class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else}
-									<CaretUpDown class="text-muted-foreground size-3.5" aria-hidden="true" />
-								{/if}
-							</button>
-						{:else if head}
-							{@render head(column)}
-						{:else}
-							{column.label}
-						{/if}
-					</Table.Head>
+					{@const headClass = cn(
+						"whitespace-normal",
+						column.numeric && "text-end",
+						column.hideBelow && HIDE[column.hideBelow],
+						column.sticky && "bg-card sticky left-0 z-20",
+						column.headClass ?? column.class,
+					)}
+					{@const headStyle = column.width ? `width: ${column.width}` : undefined}
+					{#if column.sortable}
+						<!-- A sticky head keeps its card under the hover tint, or rows show through it. -->
+						<SortableHead
+							key={column.key as keyof Row & string}
+							{sort}
+							onSort={(key) => (sort = toggleSort(sort, key))}
+							numeric={column.numeric}
+							class={cn(
+								headClass,
+								column.sticky &&
+									"hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,var(--color-card))]",
+							)}
+							style={headStyle}
+						>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</SortableHead>
+					{:else}
+						<Table.Head class={headClass} style={headStyle}>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</Table.Head>
+					{/if}
 				{/each}
 				{#if rowHref}
 					<th class="w-0 p-0"><span class="sr-only">Open</span></th>

package/src/components/table-view/table-view.test.ts

@@ -64,14 +64,17 @@ describe("TableView extensions", () => {
     { key: "total", label: "Total", numeric: true, sortable: true },
   ];
 
-  it("sorts from a head button and sets aria-sort", () => {
+  it("sorts from a head, by click or Enter, and sets aria-sort", () => {
     const { target, done } = render({ columns: sortable, sort: { key: "name", direction: "asc" } });
-    const heads = target.querySelectorAll("thead th");
+    const heads = target.querySelectorAll<HTMLElement>("thead th");
     expect(heads[0].getAttribute("aria-sort")).toBe("ascending");
     expect(heads[1].getAttribute("aria-sort")).toBe("none");
-    (heads[1].querySelector("button") as HTMLButtonElement).click();
+    heads[1].click();
     flushSync();
     expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("ascending");
+    heads[1].dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    flushSync();
+    expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("descending");
     done();
   });
 

package/src/components/work-parts/group-head.svelte

@@ -3,7 +3,7 @@
 	import { Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
-	import CountChip from "./count-chip.svelte";
+	import CountChip from "../chip/count-chip.svelte";
 
 	interface Props {
 		label: string;

package/src/components/work-parts/index.ts

@@ -1,4 +1,4 @@
-export { default as CountChip } from "./count-chip.svelte";
+export { default as CountChip } from "../chip/count-chip.svelte";
 export { default as GroupHead } from "./group-head.svelte";
 export { default as PropertyRow } from "./property-row.svelte";
 export { default as WorkCard } from "./work-card.svelte";

package/src/editor/doc-blocks.ts

@@ -5,6 +5,7 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { copyText } from "../components/copy/clipboard.js";
 import { anchorIds } from "./anchors.js";
 
 const LINK_ICON = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0A54.86 54.86 0 0 1 240 88.23ZM109 185.66l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 54.63 0 8 8 0 0 0 11.31-11.31 54.65 54.65 0 0 0-77.3 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34Z"/></svg>`;
@@ -59,7 +60,7 @@ export const HeadingAnchors = Extension.create<HeadingAnchorsOptions>({
                     button.addEventListener("click", () => {
                       const { origin, pathname, search } = window.location;
                       const url = `${origin}${pathname}${search}#${id}`;
-                      void navigator.clipboard?.writeText(url).catch(() => {});
+                      void copyText(url);
                       button.dataset.copied = "true";
                       setTimeout(() => delete button.dataset.copied, 1400);
                       options.oncopy?.(url, id);

package/src/editor/editor.svelte

@@ -8,6 +8,7 @@
 	import "./doc-page.css";
 	import { buildExtensions } from "./extensions.js";
 	import { buildSlashItems, type SlashItem } from "./slash-items.js";
+	import { SLASH_WINDOW, slashQueryAt } from "./slash-query.js";
 	import { parseYoutubeUrl } from "./youtube-url.js";
 	import EditorToolbar from "./editor-toolbar.svelte";
 	import SlashMenu from "./slash-menu.svelte";
@@ -238,7 +239,8 @@
 			content: content ?? { type: "doc", content: [{ type: "paragraph" }] },
 			editorProps: {
 				handleKeyDown: (_view, event) => {
-					if (showSlashMenu) {
+					// 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") {
 							event.preventDefault();
 							slashSelectedIndex = (slashSelectedIndex + 1) % slashItems.length;
@@ -294,11 +296,11 @@
 				onchange?.(e.getJSON());
 
 				const { from } = e.state.selection;
-				const textBefore = e.state.doc.textBetween(Math.max(0, from - 20), from, "\n");
-				const slashMatch = textBefore.match(/\/([a-zA-Z0-9 ]*)$/);
+				const textBefore = e.state.doc.textBetween(Math.max(0, from - SLASH_WINDOW), from, "\n");
+				const query = slashQueryAt(textBefore);
 
-				if (slashMatch) {
-					slashQuery = slashMatch[1];
+				if (query !== null) {
+					slashQuery = query;
 					slashMenuPos = getCaretCoords();
 					showSlashMenu = true;
 				} else if (showSlashMenu) {

package/src/editor/safe-url.ts

@@ -0,0 +1,32 @@
+const SAFE_SCHEME = /^(?:https?:|mailto:|tel:)/i;
+const ANY_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+// WHY no SVG: an SVG can carry script, and pasted images are stored as these data: URLs.
+const SAFE_IMAGE_DATA = /^data:image\/(?:png|jpe?g|gif|webp|avif);base64,/i;
+
+// WHY: browsers drop tabs, newlines and control bytes from a URL, so "java\tscript:" runs as javascript:.
+function clean(raw: string): string {
+  return [...raw]
+    .filter((c) => c.charCodeAt(0) > 31 && c.charCodeAt(0) !== 127)
+    .join("")
+    .trim();
+}
+
+// The URL when it's safe to put in an href, else null.
+export function safeUrl(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  const href = clean(raw);
+  // Relative URLs and same-page anchors carry no scheme, so they are safe.
+  if (href.startsWith("#") || href.startsWith("/") || href.startsWith(".")) return href;
+  if (SAFE_SCHEME.test(href)) return href;
+  if (!ANY_SCHEME.test(href)) return href;
+  return null; // javascript:, data:, vbscript:, ...
+}
+
+// The URL when it's safe to put in an img src, else null.
+export function safeImageUrl(raw: string | null | undefined): string | null {
+  const url = safeUrl(raw);
+  if (url !== null) return url;
+  if (!raw) return null;
+  const src = clean(raw);
+  return SAFE_IMAGE_DATA.test(src) ? src : null;
+}

package/src/editor/serializer.test.ts

@@ -87,6 +87,64 @@ describe("renderTiptapContent", () => {
   });
 });
 
+function linkDoc(href: string) {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content: [{ type: "text", text: "click", marks: [{ type: "link", attrs: { href } }] }],
+      },
+    ],
+  };
+}
+
+function imageDoc(src: string) {
+  return { type: "doc", content: [{ type: "image", attrs: { src } }] };
+}
+
+describe("unsafe URLs", () => {
+  it("keeps the text and drops a javascript: href", () => {
+    const html = renderTiptapContent(linkDoc("javascript:alert(1)"));
+    expect(html).toContain("click");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("href=");
+  });
+
+  it("drops a javascript: href hidden by a tab inside the scheme", () => {
+    const html = renderTiptapContent(linkDoc("java\tscript:alert(1)"));
+    expect(html).toContain("click");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("href=");
+  });
+
+  it.each(["data:text/html,x", "vbscript:x"])("drops the %s href", (href) => {
+    expect(renderTiptapContent(linkDoc(href))).not.toContain("href=");
+  });
+
+  it.each(["https://example.com/a?b=1", "/docs", "#top", "mailto:a@example.com"])(
+    "keeps the %s href",
+    (href) => {
+      expect(renderTiptapContent(linkDoc(href))).toContain(`href="${href}"`);
+    },
+  );
+
+  it("drops an image with a javascript: src", () => {
+    expect(renderTiptapContent(imageDoc("javascript:alert(1)"))).not.toContain("<img");
+  });
+
+  it.each(["https://example.com/a.png", "data:image/png;base64,AAAA"])(
+    "keeps an image with the %s src",
+    (src) => {
+      expect(renderTiptapContent(imageDoc(src))).toContain("<img");
+    },
+  );
+
+  it("drops an image with an SVG data: src", () => {
+    expect(renderTiptapContent(imageDoc("data:image/svg+xml;base64,AAAA"))).not.toContain("<img");
+  });
+});
+
 describe("youtube node", () => {
   function youtubeDoc(attrs: Record<string, unknown>) {
     return { type: "doc", content: [{ type: "youtube", attrs }] };