editor: hide expand/collapse icon for empty headings

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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);
+});

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;
 

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;
 }