withEmptyBlockPlaceholder

Author: volser

demo/react-source-utils.ts

@@ -49,10 +49,11 @@ export const serializeReactNode = (node: React.ReactNode, depth = 0): string =>
 
   const openTag = `<${tag}${props.length ? ` ${props.join(' ')}` : ''}>`;
   const closeTag = `</${tag}>`;
+  const selfClosingTag = `<${tag}${props.length ? ` ${props.join(' ')}` : ''} />`;
   const children = serializeReactNode(node.props?.children, depth + 1);
 
   if (!children) {
-    return `${'  '.repeat(depth)}${openTag}${closeTag}`;
+    return `${'  '.repeat(depth)}${selfClosingTag}`;
   }
 
   return `${'  '.repeat(depth)}${openTag}\n${children}\n${'  '.repeat(depth)}${closeTag}`;

src/renderers/react/__tests__/blocks.test.ts

@@ -22,6 +22,11 @@ describe('ReactRenderer – blocks', () => {
         expect(html).toBe(`<div><h${level}>Heading ${level}</h${level}></div>`);
       }
     });
+
+    it('should render empty header with <br/>', () => {
+      const html = renderDelta(d({ insert: '\n', attributes: { header: 2 } }));
+      expect(html).toBe('<div><h2><br/></h2></div>');
+    });
   });
 
   describe('blockquotes', () => {
@@ -31,6 +36,11 @@ describe('ReactRenderer – blocks', () => {
       );
       expect(html).toBe('<div><blockquote>A quote</blockquote></div>');
     });
+
+    it('should render empty blockquote with <br/>', () => {
+      const html = renderDelta(d({ insert: '\n', attributes: { blockquote: true } }));
+      expect(html).toBe('<div><blockquote><br/></blockquote></div>');
+    });
   });
 
   describe('code blocks', () => {
@@ -63,6 +73,11 @@ describe('ReactRenderer – blocks', () => {
         '<div><pre><code class="ql-syntax language-javascript">const x = 1;</code></pre></div>',
       );
     });
+
+    it('should render an empty code block container', () => {
+      const html = renderDelta(d({ insert: '\n', attributes: { 'code-block': true } }));
+      expect(html).toBe('<div><pre><code class="ql-syntax"></code></pre></div>');
+    });
   });
 
   describe('paragraphs', () => {
@@ -77,5 +92,10 @@ describe('ReactRenderer – blocks', () => {
       );
       expect(html).toBe('<div><p>First paragraph</p><p>Second paragraph</p></div>');
     });
+
+    it('should render empty paragraph with <br/>', () => {
+      const html = renderDelta(d({ insert: '\n' }));
+      expect(html).toBe('<div><p><br/></p></div>');
+    });
   });
 });

src/renderers/react/__tests__/lists.test.ts

@@ -39,6 +39,11 @@ describe('ReactRenderer – lists', () => {
     );
   });
 
+  it('should render empty checklist item with <br/>', () => {
+    const html = renderDelta(d({ insert: '\n', attributes: { list: 'unchecked' } }));
+    expect(html).toBe('<div><ul><li data-checked="false"><br/></li></ul></div>');
+  });
+
   it('should render nested bullet lists', () => {
     const html = renderDelta(
       d(

src/renderers/react/functions/build-renderer-config.ts

@@ -102,6 +102,17 @@ function sanitizeUrl(url: string, cfg: ResolvedReactConfig): string | undefined
   return url;
 }
 
+/**
+ * React equivalent of HTML renderers' `children || '<br/>'` behavior.
+ * Keeps empty block lines visible and structurally consistent.
+ */
+function withEmptyBlockPlaceholder(children: ReactNode): ReactNode {
+  if (children === null || children === undefined || children === false || children === '') {
+    return createElement('br');
+  }
+  return children;
+}
+
 // ─── Node Override Helpers ─────────────────────────────────────────────────
 
 function renderCodeBlockContainer(node: TNode, cfg: ResolvedReactConfig): ReactNode {
@@ -148,18 +159,18 @@ export function buildRendererConfig(
     blocks: {
       paragraph: withCustomComponent(cfg, 'paragraph', (node, children) => {
         const tag = resolveTag(cfg, 'paragraph', node, 'p');
-        return createElement(tag, null, children || null);
+        return createElement(tag, null, withEmptyBlockPlaceholder(children));
       }),
 
       header: withCustomComponent(cfg, 'header', (node, children) => {
         const level = getHeaderLevel(node);
         const tag = resolveTag(cfg, 'header', node, `h${level}`);
-        return createElement(tag, null, children || null);
+        return createElement(tag, null, withEmptyBlockPlaceholder(children));
       }),
 
       blockquote: withCustomComponent(cfg, 'blockquote', (node, children) => {
         const tag = resolveTag(cfg, 'blockquote', node, 'blockquote');
-        return createElement(tag, null, children || null);
+        return createElement(tag, null, withEmptyBlockPlaceholder(children));
       }),
 
       'code-block': withCustomComponent(cfg, 'code-block', {
@@ -168,7 +179,7 @@ export function buildRendererConfig(
           const props: Record<string, unknown> = { className: meta.className };
           if (meta.language) props['data-language'] = meta.language;
           const tag = resolveTag(cfg, 'code-block', node, 'pre');
-          return createElement(tag, props, children || null);
+          return createElement(tag, props, withEmptyBlockPlaceholder(children));
         },
         toProps: (meta) => {
           const props: Record<string, unknown> = { className: meta.className };
@@ -183,7 +194,11 @@ export function buildRendererConfig(
           const props: Record<string, unknown> = {};
           if (checked !== undefined) props['data-checked'] = checked;
           const tag = resolveTag(cfg, 'list-item', node, 'li');
-          return createElement(tag, Object.keys(props).length > 0 ? props : null, children || null);
+          return createElement(
+            tag,
+            Object.keys(props).length > 0 ? props : null,
+            withEmptyBlockPlaceholder(children),
+          );
         },
         toProps: (checked) => {
           if (checked !== undefined) return { 'data-checked': checked };