fix: keep inline taxonomy terms Unicode-safe

Author: ascorbic

.changeset/fix-inline-unicode-taxonomies.md

@@ -0,0 +1,6 @@
+---
+"emdash": patch
+"@emdash-cms/admin": patch
+---
+
+Fixes inline taxonomy term creation for Unicode-only labels and adds numeric suffixes when generated term slugs collide.

packages/admin/src/components/TaxonomyManager.tsx

@@ -434,7 +434,7 @@ function TermFormDialog({
 	const createMutation = useMutation({
 		mutationFn: () =>
 			createTerm(taxonomyName, {
-				slug,
+				...(autoSlug ? {} : { slug }),
 				label,
 				parentId: parentId || undefined,
 				description: description || undefined,

packages/admin/src/components/TaxonomySidebar.tsx

@@ -17,7 +17,7 @@ import * as React from "react";
 import { apiFetch, parseApiResponse, throwResponseError } from "../lib/api/client.js";
 import { createTerm, withLocale } from "../lib/api/taxonomies.js";
 import { rankTermMatches, termExactMatches } from "../lib/taxonomy-match.js";
-import { cn, slugify } from "../lib/utils.js";
+import { cn } from "../lib/utils.js";
 
 interface TaxonomyTerm {
 	id: string;
@@ -367,7 +367,6 @@ function TaxonomySection({
 	const createTermMutation = useMutation({
 		mutationFn: (label: string) =>
 			createTerm(taxonomy.name, {
-				slug: slugify(label),
 				label,
 				// Create the term in the entry's locale so it resolves on this entry.
 				...(entryLocale ? { locale: entryLocale } : {}),

packages/admin/src/lib/api/taxonomies.ts

@@ -71,7 +71,7 @@ export interface CreateTaxonomyInput {
 }
 
 export interface CreateTermInput {
-	slug: string;
+	slug?: string;
 	label: string;
 	parentId?: string;
 	description?: string;

packages/admin/tests/components/TaxonomyManager.test.tsx

@@ -2,6 +2,7 @@ import { Toasty } from "@cloudflare/kumo";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
+import { userEvent } from "vitest/browser";
 
 import {
 	getAvailableParentTerms,
@@ -344,6 +345,42 @@ describe("TaxonomyManager", () => {
 		await expect.element(screen.getByText("Description (optional)")).toBeInTheDocument();
 	});
 
+	it("lets the server derive an auto-generated term slug", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+		await screen.getByRole("button", { name: ADD_CATEGORY_BUTTON_REGEX }).click();
+		await screen.getByLabelText("Name").fill("音楽");
+		await expect.element(screen.getByLabelText("Slug")).toHaveValue("音楽");
+
+		await userEvent.keyboard("{Enter}");
+
+		await vi.waitFor(() => {
+			const call = vi.mocked(apiFetch).mock.calls.find(([, init]) => init?.method === "POST");
+			expect(call).toBeDefined();
+			const body = typeof call?.[1]?.body === "string" ? JSON.parse(call[1].body) : undefined;
+			expect(body).toMatchObject({ label: "音楽" });
+			expect(body).not.toHaveProperty("slug");
+		});
+	});
+
+	it("sends a manually edited term slug", async () => {
+		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
+			wrapper: Wrapper,
+		});
+		await screen.getByRole("button", { name: ADD_CATEGORY_BUTTON_REGEX }).click();
+		await screen.getByLabelText("Name").fill("Music");
+		await screen.getByLabelText("Slug").fill("custom-music");
+
+		await userEvent.keyboard("{Enter}");
+
+		await vi.waitFor(() => {
+			const call = vi.mocked(apiFetch).mock.calls.find(([, init]) => init?.method === "POST");
+			const body = typeof call?.[1]?.body === "string" ? JSON.parse(call[1].body) : undefined;
+			expect(body).toMatchObject({ label: "Music", slug: "custom-music" });
+		});
+	});
+
 	it("shows parent selector for hierarchical taxonomies", async () => {
 		const screen = await render(<TaxonomyManager taxonomyName="categories" />, {
 			wrapper: Wrapper,

packages/admin/tests/components/TaxonomySidebar.test.tsx

@@ -357,13 +357,28 @@ describe("TaxonomySidebar", () => {
 				"/_emdash/api/taxonomies/tags/terms",
 				expect.objectContaining({
 					method: "POST",
-					body: JSON.stringify({ slug: "gamma", label: "Gamma" }),
+					body: JSON.stringify({ label: "Gamma" }),
 				}),
 			);
 		});
 		expect(onChange).toHaveBeenCalledWith("tags", ["term_created"]);
 	});
 
+	it("lets the server derive the slug for an inline Unicode term", async () => {
+		mockApiFetch({ terms: [] });
+		const screen = await render(<TaxonomySidebar collection="products" />, { wrapper: Wrapper });
+
+		await screen.getByLabelText("Add Tags").fill("音楽");
+		await screen.getByText('Create "音楽"').click();
+
+		await vi.waitFor(() => {
+			const call = vi.mocked(apiFetch).mock.calls.find(([, init]) => init?.method === "POST");
+			expect(call).toBeDefined();
+			const body = typeof call?.[1]?.body === "string" ? JSON.parse(call[1].body) : undefined;
+			expect(body).toEqual({ label: "音楽" });
+		});
+	});
+
 	it("continues to render hierarchical taxonomies as a checkbox tree", async () => {
 		mockApiFetch({ taxonomies: [categoriesTaxonomy], terms: [alphaTerm] });
 

packages/core/src/api/handlers/taxonomies.ts

@@ -812,7 +812,7 @@ export async function handleTermCreate(
 	db: Kysely<Database>,
 	taxonomyName: string,
 	input: {
-		slug: string;
+		slug?: string;
 		label: string;
 		parentId?: string | null;
 		description?: string;
@@ -829,19 +829,21 @@ export async function handleTermCreate(
 		if (!lookup.success) return lookup;
 
 		const repo = new TaxonomyRepository(db);
+		const generatedSlug = input.slug === undefined;
+		const slug = input.slug ?? (await repo.generateUniqueSlug(taxonomyName, input.label, locale));
 
 		// Coerce empty-string parentId to undefined (treat as "no parent").
 		const parentId =
 			input.parentId === "" || input.parentId === undefined ? undefined : input.parentId;
 
 		// Conflict check is scoped to locale (per-locale slugs are unique).
-		const existing = await repo.findBySlug(taxonomyName, input.slug, locale);
+		const existing = generatedSlug ? null : await repo.findBySlug(taxonomyName, slug, locale);
 		if (existing) {
 			return {
 				success: false,
 				error: {
 					code: "CONFLICT",
-					message: `Term '${input.slug}' already exists in '${taxonomyName}' (${locale})`,
+					message: `Term '${slug}' already exists in '${taxonomyName}' (${locale})`,
 				},
 			};
 		}
@@ -875,7 +877,7 @@ export async function handleTermCreate(
 
 		const term = await repo.create({
 			name: taxonomyName,
-			slug: input.slug,
+			slug,
 			label: input.label,
 			parentId: parentId ?? undefined,
 			data: input.description ? { description: input.description } : undefined,

packages/core/src/api/schemas/taxonomies.ts

@@ -52,7 +52,11 @@ export const updateTaxonomyDefBody = z
 
 export const createTermBody = z
 	.object({
-		slug: z.string().min(1),
+		slug: z
+			.string()
+			.min(1)
+			.optional()
+			.meta({ description: "Term slug. Omit to derive a unique slug from the label." }),
 		label: z.string().min(1),
 		parentId: z.string().nullish(),
 		description: z.string().optional(),

packages/core/src/database/repositories/taxonomy.ts

@@ -2,6 +2,7 @@ import { sql, type Kysely, type Selectable } from "kysely";
 import { ulid } from "ulidx";
 
 import { invalidateTaxonomyObjectCache } from "../../object-cache/index.js";
+import { slugify } from "../../utils/slugify.js";
 import { withTransaction } from "../transaction.js";
 import type { Database, TaxonomyTable } from "../types.js";
 import { validateIdentifier } from "../validate.js";
@@ -18,6 +19,7 @@ export interface SiblingPosition {
  * statement inside D1's 100-parameter ceiling.
  */
 const GROUPS_PER_UPDATE = 32;
+const NUMERIC_SUFFIX_PATTERN = /^\d+$/;
 
 /** Deal the listed groups back out over the slots they hold, in the order given. */
 function permuteWithinSlots(
@@ -216,6 +218,29 @@ export class TaxonomyRepository {
 		return row ? this.rowToTaxonomy(row) : null;
 	}
 
+	/** Generate a locale-scoped term slug, adding a numeric suffix when needed. */
+	async generateUniqueSlug(name: string, text: string, locale?: string): Promise<string> {
+		const baseSlug = slugify(text);
+		let query = this.db
+			.selectFrom("taxonomies")
+			.select("slug")
+			.where("name", "=", name)
+			.where((eb) => eb.or([eb("slug", "=", baseSlug), eb("slug", "like", `${baseSlug}-%`)]));
+		if (locale !== undefined) query = query.where("locale", "=", locale);
+		const candidates = await query.execute();
+		if (!candidates.some((candidate) => candidate.slug === baseSlug)) return baseSlug;
+
+		let maxSuffix = 0;
+		const prefix = `${baseSlug}-`;
+		for (const candidate of candidates) {
+			if (!candidate.slug.startsWith(prefix)) continue;
+			const suffix = candidate.slug.slice(prefix.length);
+			if (!NUMERIC_SUFFIX_PATTERN.test(suffix)) continue;
+			maxSuffix = Math.max(maxSuffix, Number.parseInt(suffix, 10));
+		}
+		return `${baseSlug}-${maxSuffix + 1}`;
+	}
+
 	/**
 	 * Get all terms for a taxonomy (e.g., all categories).
 	 *

packages/core/src/mcp/server.ts

@@ -2528,7 +2528,11 @@ export function createMcpServer(
 				"new term beneath a chain of 100+ existing ancestors are rejected.",
 			inputSchema: z.object({
 				taxonomy: z.string().describe("Taxonomy name (e.g. 'categories', 'tags')"),
-				slug: z.string().describe("URL-safe identifier for the term"),
+				slug: z
+					.string()
+					.min(1)
+					.optional()
+					.describe("URL identifier for the term; omit to derive it from the label"),
 				label: z.string().describe("Display name"),
 				parentId: z.string().optional().describe("Parent term ID for hierarchical taxonomies"),
 				description: z.string().optional().describe("Description of the term"),