fixup! feat(markdown): add removeEmptyParagraphs prop

Author: Kiarokh

src/components/markdown/examples/markdown-remove-empty-paragraphs.tsx

@@ -1,5 +1,11 @@
 import { Component, h, Host } from '@stencil/core';
 
+const zeroWidthHexCodes = ['200B', '200C', '200D', 'FEFF'];
+const zeroWidthSequence = zeroWidthHexCodes
+    .map((hexCode) => String.fromCodePoint(Number.parseInt(hexCode, 16)))
+    .join('');
+const zeroWidthCharacter = zeroWidthSequence.charAt(0);
+
 const markdownWithEmptyParagraphs = `
 <p>In some use cases, empty paragraphs may be desired to keep certain spacing
 in the content, while in other cases they may be unwanted and just add
@@ -17,6 +23,8 @@ by pressing the <kbd>Enter</kbd> key multiple times, while typing an email.</p>
 <p><span style="font-size:10.5pt; color:#333333">&nbsp;</span></p>
 <p><span></span></p>
 <p> </p>
+<p>${zeroWidthSequence}</p>
+<p><span>${zeroWidthCharacter}</span></p>
 <p>Rendering all the empty paragraphs that you see in this example would just add lots
 of vertical scrolling to large content.</p>
 `;

src/components/markdown/remove-empty-paragraphs-plugin.spec.ts

@@ -36,6 +36,31 @@ describe('remove empty paragraphs plugin', () => {
         expect(tree.children[0]).toBe(paragraph);
     });
 
+    it('removes paragraphs containing only line breaks', () => {
+        const tree = createRoot([
+            createParagraph([createElement('br')]),
+            createParagraph([createElement('span', [createElement('br')])]),
+        ]);
+
+        runPlugin(tree, true);
+
+        expect(tree.children).toHaveLength(0);
+    });
+
+    it('removes paragraphs containing only zero-width whitespace characters', () => {
+        const zeroWidthText = '\u200B\u200C\u200D\uFEFF';
+        const tree = createRoot([
+            createParagraph([createText(zeroWidthText)]),
+            createParagraph([
+                createElement('span', [createText(zeroWidthText)]),
+            ]),
+        ]);
+
+        runPlugin(tree, true);
+
+        expect(tree.children).toHaveLength(0);
+    });
+
     it('keeps text content inside paragraphs', () => {
         const paragraph = createParagraph([
             createElement('span', [createText('Meaningful text')]),

src/components/markdown/remove-empty-paragraphs-plugin.ts

@@ -16,6 +16,7 @@ export const createRemoveEmptyParagraphsPlugin = (enabled = false): Plugin => {
 };
 
 const NBSP_REGEX = /\u00A0/g;
+const ZERO_WIDTH_HEX_CODES = ['200B', '200C', '200D', 'FEFF'];
 const MEANINGFUL_VOID_ELEMENTS = new Set([
     'audio',
     'canvas',
@@ -30,6 +31,17 @@ const MEANINGFUL_VOID_ELEMENTS = new Set([
 
 const TREAT_AS_EMPTY_ELEMENTS = new Set(['br']);
 
+const stripZeroWidthCharacters = (text: string): string => {
+    let cleaned = text;
+
+    for (const hexCode of ZERO_WIDTH_HEX_CODES) {
+        const character = String.fromCodePoint(Number.parseInt(hexCode, 16));
+        cleaned = cleaned.split(character).join('');
+    }
+
+    return cleaned;
+};
+
 const pruneEmptyParagraphs = (node: any, parent: any) => {
     if (!node || typeof node !== 'object') {
         return;
@@ -115,5 +127,9 @@ const isWhitespace = (value: string): boolean => {
         return true;
     }
 
-    return value.replaceAll(NBSP_REGEX, ' ').trim() === '';
+    const normalized = stripZeroWidthCharacters(
+        value.replaceAll(NBSP_REGEX, ' ')
+    );
+
+    return normalized.trim() === '';
 };