bug fix: text renderer crashing due to empty content nodes (#799)

Co-authored-by: Rajat <hi@rajatsaxena.dev>

Author: rajat1saxena

apps/web/components/community/__tests__/text-renderer.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+
+import { TextRenderer } from "../../../../../packages/page-blocks/src/components/text-renderer";
+
+jest.mock("@courselit/text-editor", () => ({
+    createExtensions: jest.fn(() => []),
+    createId: jest.fn((text: string) =>
+        text.toLowerCase().replace(/\s+/g, "-"),
+    ),
+    emptyDoc: { type: "doc", content: [] },
+    extractTextFromNode: jest.fn((node) =>
+        node?.content?.map((child) => child.text ?? "").join(""),
+    ),
+}));
+
+jest.mock("@tiptap/static-renderer", () => ({
+    renderToReactElement: jest.fn(({ content }) => {
+        const hasEmptyTextNode = (node: any): boolean => {
+            if (node?.type === "text" && node.text === "") {
+                return true;
+            }
+
+            return Array.isArray(node?.content)
+                ? node.content.some(hasEmptyTextNode)
+                : false;
+        };
+
+        if (hasEmptyTextNode(content)) {
+            throw new RangeError("Empty text nodes are not allowed");
+        }
+
+        return <p>{content.content[0].content[0].text}</p>;
+    }),
+}));
+
+describe("TextRenderer", () => {
+    it("renders content with empty text nodes", () => {
+        expect(() =>
+            render(
+                <TextRenderer
+                    json={
+                        {
+                            type: "doc",
+                            content: [
+                                {
+                                    type: "paragraph",
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: "Post body",
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "paragraph",
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: "",
+                                        },
+                                    ],
+                                },
+                            ],
+                        } as any
+                    }
+                />,
+            ),
+        ).not.toThrow();
+
+        expect(screen.getByText("Post body")).toBeInTheDocument();
+    });
+});

packages/page-blocks/src/components/text-renderer.tsx

@@ -21,9 +21,35 @@ interface TextRendererProps {
     className?: string;
     theme?: ThemeStyle;
 }
+
+function removeEmptyTextNodes(node: any): any {
+    if (!node || typeof node !== "object") {
+        return node;
+    }
+
+    if (node.type === "text" && node.text === "") {
+        return undefined;
+    }
+
+    if (!Array.isArray(node.content)) {
+        return node;
+    }
+
+    const content = node.content
+        .map(removeEmptyTextNodes)
+        .filter((child: any) => child !== undefined);
+
+    return {
+        ...node,
+        content,
+    };
+}
+
 export function TextRenderer({ json, className, theme }: TextRendererProps) {
     const extensions = createExtensions();
-    const content = ((json as any) ?? (emptyDoc as any)) as TextEditorContent;
+    const content = removeEmptyTextNodes(
+        (json as any) ?? (emptyDoc as any),
+    ) as TextEditorContent;
 
     const rendered = renderToReactElement({
         extensions,