feat(editor): new Container EmailNode

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/editor",
-  "version": "0.0.0-experimental.39",
+  "version": "0.0.0-experimental.40",
   "description": "",
   "sideEffects": [
     "**/*.css"

packages/editor/src/core/is-document-visually-empty.spec.ts

@@ -1,76 +1,121 @@
-import type { Node } from '@tiptap/pm/model';
+import { Schema } from '@tiptap/pm/model';
 import { describe, expect, it } from 'vitest';
 import { isDocumentVisuallyEmpty } from './is-document-visually-empty';
 
-type MockDoc = {
-  childCount: number;
-  child: (index: number) => {
-    type: { name: string };
-    textContent: string;
-    content: { childCount: number };
-  };
-};
-
-function createDoc(
-  nodes: Array<{ type: string; textContent?: string; childCount?: number }>,
-): Node {
-  const doc: MockDoc = {
-    childCount: nodes.length,
-    child: (index) => ({
-      type: { name: nodes[index]!.type },
-      textContent: nodes[index]!.textContent ?? '',
-      content: { childCount: nodes[index]!.childCount ?? 0 },
-    }),
-  };
-
-  return doc as unknown as Node;
-}
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'block+' },
+    paragraph: { group: 'block', content: 'inline*' },
+    text: { group: 'inline' },
+    globalContent: { group: 'block', atom: true },
+    container: { group: 'block', content: 'block+' },
+    image: { group: 'block', atom: true },
+  },
+});
 
 describe('isDocumentVisuallyEmpty', () => {
-  it('returns true when document only contains global content', () => {
-    const doc = createDoc([{ type: 'globalContent' }]);
+  describe('without container', () => {
+    it('returns true when document only contains global content', () => {
+      const doc = schema.node('doc', null, [schema.node('globalContent')]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(true);
-  });
+      expect(isDocumentVisuallyEmpty(doc)).toBe(true);
+    });
 
-  it('returns true when document contains global content and one empty paragraph', () => {
-    const doc = createDoc([
-      { type: 'globalContent' },
-      { type: 'paragraph', textContent: '   ', childCount: 0 },
-    ]);
+    it('returns true when document contains global content and one empty paragraph', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('globalContent'),
+        schema.node('paragraph'),
+      ]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(true);
-  });
+      expect(isDocumentVisuallyEmpty(doc)).toBe(true);
+    });
 
-  it('returns false when document contains one empty paragraph with inline content', () => {
-    const doc = createDoc([
-      { type: 'paragraph', textContent: '   ', childCount: 1 },
-    ]);
+    it('returns false when paragraph contains whitespace text', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('paragraph', null, [schema.text('   ')]),
+      ]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(false);
-  });
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
 
-  it('returns false when document contains multiple empty paragraphs', () => {
-    const doc = createDoc([
-      { type: 'paragraph', textContent: '', childCount: 0 },
-      { type: 'paragraph', textContent: '   ', childCount: 0 },
-    ]);
+    it('returns false when document contains multiple empty paragraphs', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('paragraph'),
+        schema.node('paragraph'),
+      ]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(false);
-  });
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
+
+    it('returns false when document contains only an image node', () => {
+      const doc = schema.node('doc', null, [schema.node('image')]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
+
+    it('returns false when document contains both an image and text', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('image'),
+        schema.node('paragraph', null, [schema.text('hello world')]),
+      ]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
 
-  it('returns false when document contains only an image node', () => {
-    const doc = createDoc([{ type: 'image' }]);
+    it('considers just white spaces as not empty', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('paragraph', null, [schema.text('                 ')]),
+      ]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
   });
 
-  it('returns false when document contains both an image and pasted text', () => {
-    const doc = createDoc([
-      { type: 'image' },
-      { type: 'paragraph', textContent: 'hello world' },
-    ]);
+  describe('with container', () => {
+    it('returns true when container holds one empty paragraph', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('container', null, [schema.node('paragraph')]),
+      ]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(true);
+    });
+
+    it('returns true when global content precedes a container with one empty paragraph', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('globalContent'),
+        schema.node('container', null, [schema.node('paragraph')]),
+      ]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(true);
+    });
+
+    it('returns false when container holds a paragraph with text', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('container', null, [
+          schema.node('paragraph', null, [schema.text('hello')]),
+        ]),
+      ]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
+
+    it('returns false when container holds multiple empty paragraphs', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('container', null, [
+          schema.node('paragraph'),
+          schema.node('paragraph'),
+        ]),
+      ]);
+
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
+
+    it('returns false when container holds an image node', () => {
+      const doc = schema.node('doc', null, [
+        schema.node('container', null, [schema.node('image')]),
+      ]);
 
-    expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+      expect(isDocumentVisuallyEmpty(doc)).toBe(false);
+    });
   });
 });

packages/editor/src/core/is-document-visually-empty.ts

@@ -2,11 +2,7 @@ import type { Node } from '@tiptap/pm/model';
 
 export function isDocumentVisuallyEmpty(doc: Node): boolean {
   let nonGlobalNodeCount = 0;
-  let firstNonGlobalNode: {
-    type: { name: string };
-    textContent: string;
-    childCount: number;
-  } | null = null;
+  let firstNonGlobalNode: Node | null = null;
 
   for (let index = 0; index < doc.childCount; index += 1) {
     const node = doc.child(index);
@@ -18,11 +14,7 @@ export function isDocumentVisuallyEmpty(doc: Node): boolean {
     nonGlobalNodeCount += 1;
 
     if (firstNonGlobalNode === null) {
-      firstNonGlobalNode = {
-        type: node.type,
-        textContent: node.textContent,
-        childCount: node.content.childCount,
-      };
+      firstNonGlobalNode = node;
     }
   }
 
@@ -34,9 +26,25 @@ export function isDocumentVisuallyEmpty(doc: Node): boolean {
     return false;
   }
 
-  return (
-    firstNonGlobalNode?.type.name === 'paragraph' &&
-    firstNonGlobalNode.textContent.trim().length === 0 &&
-    firstNonGlobalNode.childCount === 0
-  );
+  if (firstNonGlobalNode!.type.name === 'container') {
+    return hasOnlyEmptyParagraph(firstNonGlobalNode!);
+  }
+
+  return isEmptyParagraph(firstNonGlobalNode!);
+}
+
+function hasOnlyEmptyParagraph(node: Node): boolean {
+  if (node.childCount === 0) {
+    return true;
+  }
+
+  if (node.childCount !== 1) {
+    return false;
+  }
+
+  return isEmptyParagraph(node.child(0));
+}
+
+function isEmptyParagraph(node: Node): boolean {
+  return node.type.name === 'paragraph' && node.textContent.length === 0;
 }

packages/editor/src/core/serializer/default-base-template.tsx

@@ -1,4 +1,4 @@
-import { Body, Head, Html, Preview, Section } from '@react-email/components';
+import { Body, Head, Html, Preview } from '@react-email/components';
 import type * as React from 'react';
 
 type BaseTemplateProps = {
@@ -23,17 +23,7 @@ export function DefaultBaseTemplate({
       </Head>
       {previewText && previewText !== '' && <Preview>{previewText}</Preview>}
 
-      <Body>
-        <Section width="100%" align="center">
-          <Section
-            style={{
-              width: '100%',
-            }}
-          >
-            {children}
-          </Section>
-        </Section>
-      </Body>
+      <Body>{children}</Body>
     </Html>
   );
 }

packages/editor/src/core/use-editor.ts

@@ -7,6 +7,7 @@ import {
 } from '@tiptap/react';
 import * as React from 'react';
 import { StarterKit } from '../extensions';
+import { hasCollaborationExtension } from '../utils/is-collaboration';
 import { createDropHandler } from './create-drop-handler';
 import {
   createPasteHandler,
@@ -15,15 +16,6 @@ import {
 } from './create-paste-handler';
 import { isDocumentVisuallyEmpty } from './is-document-visually-empty';
 
-const COLLABORATION_EXTENSION_NAMES = new Set([
-  'liveblocksExtension',
-  'collaboration',
-]);
-
-function hasCollaborationExtension(exts: Extensions): boolean {
-  return exts.some((ext) => COLLABORATION_EXTENSION_NAMES.has(ext.name));
-}
-
 type Merge<A, B> = A & Omit<B, keyof A>;
 
 export function useEditor({