From 08f8045d9e0a955c9eb88b86ed11b673ca05baf6 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Wed, 17 Dec 2025 12:15:06 +0500
Subject: [PATCH] editor: hide expand/collapse icon for empty headings
 Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

---
 .../extensions/heading/__tests__/heading.test.ts | 16 ++++++++++++++++
 .../editor/src/extensions/heading/heading.ts     | 10 ++++++++++
 packages/editor/styles/styles.css                | 12 ++++++------
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/extensions/heading/__tests__/heading.test.ts b/packages/editor/src/extensions/heading/__tests__/heading.test.ts
index 8f6a8a46d..ac007953c 100644
--- a/packages/editor/src/extensions/heading/__tests__/heading.test.ts
+++ b/packages/editor/src/extensions/heading/__tests__/heading.test.ts
@@ -109,3 +109,19 @@ for (const { name, setNode } of nodes) {
     expect(editor.getHTML()).toMatchSnapshot();
   });
 }
+
+test("empty heading should have empty class", () => {
+  const { editor } = createEditor({
+    extensions: {
+      heading: Heading.configure({ levels: [1, 2, 3, 4, 5, 6] })
+    },
+    initialContent: "<h1></h1>"
+  });
+
+  const headingElement = editor.view.dom.querySelector("h1");
+  expect(headingElement?.classList.contains("empty")).toBe(true);
+
+  editor.commands.setTextSelection(0);
+  editor.commands.insertContent("Some content");
+  expect(headingElement?.classList.contains("empty")).toBe(false);
+});
diff --git a/packages/editor/src/extensions/heading/heading.ts b/packages/editor/src/extensions/heading/heading.ts
index de72ca45c..5ac71eec6 100644
--- a/packages/editor/src/extensions/heading/heading.ts
+++ b/packages/editor/src/extensions/heading/heading.ts
@@ -173,6 +173,10 @@ export const Heading = TiptapHeading.extend({
         heading.setAttribute(attr, HTMLAttributes[attr]);
       }
 
+      if (node.textContent === "") {
+        heading.classList.add("empty");
+      }
+
       if (node.attrs.collapsed) heading.dataset.collapsed = "true";
       else delete heading.dataset.collapsed;
 
@@ -264,6 +268,12 @@ export const Heading = TiptapHeading.extend({
             return false;
           }
 
+          if (updatedNode.textContent === "") {
+            heading.classList.add("empty");
+          } else {
+            heading.classList.remove("empty");
+          }
+
           if (updatedNode.attrs.collapsed) heading.dataset.collapsed = "true";
           else delete heading.dataset.collapsed;
 
diff --git a/packages/editor/styles/styles.css b/packages/editor/styles/styles.css
index ffd3f9435..26ec1cca2 100644
--- a/packages/editor/styles/styles.css
+++ b/packages/editor/styles/styles.css
@@ -956,12 +956,12 @@ del.diffdel {
   opacity: 1;
 }
 
-.ProseMirror h1.is-empty::after,
-.ProseMirror h2.is-empty::after,
-.ProseMirror h3.is-empty::after,
-.ProseMirror h4.is-empty::after,
-.ProseMirror h5.is-empty::after,
-.ProseMirror h6.is-empty::after {
+.ProseMirror h1.empty::after,
+.ProseMirror h2.empty::after,
+.ProseMirror h3.empty::after,
+.ProseMirror h4.empty::after,
+.ProseMirror h5.empty::after,
+.ProseMirror h6.empty::after {
   display: none !important;
 }