fix(admin): support heading levels four through six (#2200)

Author: masonjames

.changeset/add-editor-heading-levels.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Adds heading levels 4 through 6 to the content editor menus and stored content.

packages/admin/src/components/PortableTextEditor.tsx

@@ -52,6 +52,9 @@ import {
 	TextHOne,
 	TextHTwo,
 	TextHThree,
+	TextHFour,
+	TextHFive,
+	TextHSix,
 	List,
 	ListNumbers,
 	Quotes,
@@ -1134,6 +1137,36 @@ const defaultSlashCommands: SlashCommandItem[] = [
 			editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
 		},
 	},
+	{
+		id: "heading4",
+		title: msg`Heading 4`,
+		description: msg`Smaller section heading`,
+		icon: TextHFour,
+		aliases: ["h4"],
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 4 }).run();
+		},
+	},
+	{
+		id: "heading5",
+		title: msg`Heading 5`,
+		description: msg`Minor section heading`,
+		icon: TextHFive,
+		aliases: ["h5"],
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 5 }).run();
+		},
+	},
+	{
+		id: "heading6",
+		title: msg`Heading 6`,
+		description: msg`Smallest section heading`,
+		icon: TextHSix,
+		aliases: ["h6"],
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 6 }).run();
+		},
+	},
 	{
 		id: "bulletList",
 		title: msg`Bullet List`,
@@ -2493,7 +2526,7 @@ export function PortableTextEditor({
 		() => [
 			StarterKit.configure({
 				heading: {
-					levels: [1, 2, 3],
+					levels: [1, 2, 3, 4, 5, 6],
 				},
 				dropcursor: {
 					color: "#3b82f6",
@@ -3651,7 +3684,7 @@ function EditorToolbar({
 
 			{/* Headings */}
 			<ToolbarGroup>
-				<HeadingDropdownMenu editor={editor} levels={[1, 2, 3]} />
+				<HeadingDropdownMenu editor={editor} />
 			</ToolbarGroup>
 
 			<ToolbarSeparator />

packages/admin/src/components/editor/BlockMenu.tsx

@@ -21,6 +21,9 @@ import {
 	TextHOne,
 	TextHTwo,
 	TextHThree,
+	TextHFour,
+	TextHFive,
+	TextHSix,
 	Quotes,
 	Code,
 	List,
@@ -81,6 +84,30 @@ const blockTransforms: BlockTransform[] = [
 			editor.chain().focus().setNode("heading", { level: 3 }).run();
 		},
 	},
+	{
+		id: "heading4",
+		label: msg`Heading 4`,
+		icon: TextHFour,
+		transform: (editor) => {
+			editor.chain().focus().setNode("heading", { level: 4 }).run();
+		},
+	},
+	{
+		id: "heading5",
+		label: msg`Heading 5`,
+		icon: TextHFive,
+		transform: (editor) => {
+			editor.chain().focus().setNode("heading", { level: 5 }).run();
+		},
+	},
+	{
+		id: "heading6",
+		label: msg`Heading 6`,
+		icon: TextHSix,
+		transform: (editor) => {
+			editor.chain().focus().setNode("heading", { level: 6 }).run();
+		},
+	},
 	{
 		id: "blockquote",
 		label: msg`Quote`,

packages/admin/src/styles.css

@@ -307,7 +307,10 @@ body {
 	margin-bottom: 0.4em !important;
 }
 
-.ProseMirror.prose > h3 {
+.ProseMirror.prose > h3,
+.ProseMirror.prose > h4,
+.ProseMirror.prose > h5,
+.ProseMirror.prose > h6 {
 	margin-top: 0.3em !important;
 	margin-bottom: 0.3em !important;
 }

packages/admin/tests/editor/PortableTextEditor.test.tsx

@@ -152,7 +152,7 @@ function typeIntoEditor(editor: Editor, text: string) {
 function textBlock(
 	text: string,
 	opts: {
-		style?: "normal" | "h1" | "h2" | "h3" | "blockquote";
+		style?: "normal" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "blockquote";
 		marks?: string[];
 		listItem?: "bullet" | "number";
 		level?: number;
@@ -313,6 +313,14 @@ describe("Portable Text ↔ ProseMirror conversion", () => {
 		expect(h1!.textContent).toBe("Title");
 	});
 
+	it("renders an h6 heading", async () => {
+		await render(<PortableTextEditor value={[textBlock("Detail", { style: "h6" })]} />);
+		const pm = await waitForEditor();
+		const h6 = pm.querySelector("h6");
+		expect(h6).toBeTruthy();
+		expect(h6!.textContent).toBe("Detail");
+	});
+
 	it("renders bold text", async () => {
 		await render(<PortableTextEditor value={[textBlock("Bold text", { marks: ["strong"] })]} />);
 		const pm = await waitForEditor();
@@ -691,6 +699,9 @@ describe("Toolbar", () => {
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 1" })).toBeInTheDocument();
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 2" })).toBeInTheDocument();
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 3" })).toBeInTheDocument();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 4" })).toBeInTheDocument();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 5" })).toBeInTheDocument();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 6" })).toBeInTheDocument();
 	});
 
 	it("has list buttons", async () => {

packages/admin/tests/editor/block-menu.test.tsx

@@ -243,6 +243,9 @@ describe("BlockMenu", () => {
 			expect(findButtonByText(updatedMenu, "Heading 1")).toBeTruthy();
 			expect(findButtonByText(updatedMenu, "Heading 2")).toBeTruthy();
 			expect(findButtonByText(updatedMenu, "Heading 3")).toBeTruthy();
+			expect(findButtonByText(updatedMenu, "Heading 4")).toBeTruthy();
+			expect(findButtonByText(updatedMenu, "Heading 5")).toBeTruthy();
+			expect(findButtonByText(updatedMenu, "Heading 6")).toBeTruthy();
 			expect(findButtonByText(updatedMenu, "Quote")).toBeTruthy();
 			expect(findButtonByText(updatedMenu, "Code Block")).toBeTruthy();
 			expect(findButtonByText(updatedMenu, "Bullet List")).toBeTruthy();

packages/admin/tests/editor/slash-menu.test.tsx

@@ -455,7 +455,7 @@ describe("Slash Command Menu", () => {
 		const menu = await waitForSlashMenu();
 		const items = getSlashMenuItems(menu);
 
-		// Default commands: heading1-3, bullet/numbered list, quote, code block, divider, image, section
+		// Default commands: heading1-6, bullet/numbered list, quote, code block, divider, image, section
 		expect(items.length).toBeGreaterThanOrEqual(8);
 	});
 
@@ -471,6 +471,9 @@ describe("Slash Command Menu", () => {
 		expect(titles).toContain("Heading 1");
 		expect(titles).toContain("Heading 2");
 		expect(titles).toContain("Heading 3");
+		expect(titles).toContain("Heading 4");
+		expect(titles).toContain("Heading 5");
+		expect(titles).toContain("Heading 6");
 		expect(titles).toContain("Bullet List");
 		expect(titles).toContain("Numbered List");
 		expect(titles).toContain("Quote");

packages/admin/tests/editor/toolbar.test.tsx

@@ -177,7 +177,7 @@ function expectAlignmentState(
 
 async function getHeadingMenuItem(
 	screen: Awaited<ReturnType<typeof render>>,
-	name: "Heading 1" | "Heading 2" | "Heading 3",
+	name: "Heading 1" | "Heading 2" | "Heading 3" | "Heading 4" | "Heading 5" | "Heading 6",
 ) {
 	const trigger = getToolbarButton(screen, "Headings");
 	trigger.element().click();
@@ -224,6 +224,9 @@ describe("Toolbar Presence and Structure", () => {
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 1" })).toBeVisible();
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 2" })).toBeVisible();
 		await expect.element(screen.getByRole("menuitem", { name: "Heading 3" })).toBeVisible();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 4" })).toBeVisible();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 5" })).toBeVisible();
+		await expect.element(screen.getByRole("menuitem", { name: "Heading 6" })).toBeVisible();
 		expect(
 			screen
 				.getByRole("menuitem", { name: "Heading 1" })
@@ -235,7 +238,16 @@ describe("Toolbar Presence and Structure", () => {
 			document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
 			(item) => item.textContent?.trim(),
 		);
-		expect(headingLabels).not.toContain("Heading 4");
+		expect(headingLabels).toEqual(
+			expect.arrayContaining([
+				"Heading 1",
+				"Heading 2",
+				"Heading 3",
+				"Heading 4",
+				"Heading 5",
+				"Heading 6",
+			]),
+		);
 	});
 
 	it("has all list buttons", async () => {
@@ -499,6 +511,19 @@ describe("Formatting Button Toggle States", () => {
 		});
 	});
 
+	it("Heading 6: click changes to h6", async () => {
+		const { screen, editor } = await renderEditor();
+		editor.commands.focus();
+
+		const { trigger, item } = await getHeadingMenuItem(screen, "Heading 6");
+		item.element().click();
+
+		await vi.waitFor(() => {
+			expect(trigger.element().hasAttribute("aria-pressed")).toBe(false);
+			expect(editor.isActive("heading", { level: 6 })).toBe(true);
+		});
+	});
+
 	it("Bullet List: click toggles aria-pressed to true", async () => {
 		const { screen, editor } = await renderEditor();
 		editor.commands.focus();