Simple formatting

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/editor-state-to-comment-content.test.ts

@@ -1,17 +1,87 @@
 import { createHeadlessEditor } from "@lexical/headless";
-import { $createParagraphNode, $createTextNode, $getRoot } from "lexical";
-import { expect, test } from "vitest";
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  LexicalEditor,
+} from "lexical";
+import { beforeEach, expect, test } from "vitest";
 import { editorStateToCommentContent } from "./editor-state-to-comment-content";
 
-test("simple string", () => {
-  const editor = createHeadlessEditor();
-  editor.update(() =>
+let editor: LexicalEditor;
+beforeEach(() => {
+  editor = createHeadlessEditor({
+    namespace: "",
+    onError: (error) => {
+      throw error;
+    },
+  });
+});
+
+async function update(updateFn: () => void) {
+  editor.update(updateFn);
+  await Promise.resolve();
+}
+
+test("simple string", async () => {
+  await update(() => {
     $getRoot().append(
       $createParagraphNode().append($createTextNode("Hello, world!")),
-    ),
-  );
+    );
+  });
 
-  expect(editorStateToCommentContent(editor.getEditorState())).toEqual(
+  expect(editorStateToCommentContent(editor.getEditorState())).toEqual([
     "Hello, world!",
-  );
+  ]);
+});
+
+test("empty state", () => {
+  expect(editorStateToCommentContent(editor.getEditorState())).toEqual([]);
+});
+
+test("bold", async () => {
+  await update(() => {
+    $getRoot().append(
+      $createParagraphNode().append(
+        $createTextNode("Hello, "),
+        $createTextNode("world").toggleFormat("bold"),
+        $createTextNode("!"),
+      ),
+    );
+  });
+
+  expect(editorStateToCommentContent(editor.getEditorState())).toEqual([
+    "Hello, ",
+    {
+      content: "world",
+      facets: [
+        { $type: "fyi.frontpage.richtext.facet#format", format: "bold" },
+      ],
+    },
+    "!",
+  ]);
+});
+
+test("bold and italic", async () => {
+  await update(() => {
+    $getRoot().append(
+      $createParagraphNode().append(
+        $createTextNode("Hello, "),
+        $createTextNode("world").toggleFormat("bold").toggleFormat("italic"),
+        $createTextNode("!"),
+      ),
+    );
+  });
+
+  expect(editorStateToCommentContent(editor.getEditorState())).toEqual([
+    "Hello, ",
+    {
+      content: "world",
+      facets: [
+        { $type: "fyi.frontpage.richtext.facet#format", format: "bold" },
+        { $type: "fyi.frontpage.richtext.facet#format", format: "italic" },
+      ],
+    },
+    "!",
+  ]);
 });

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/editor-state-to-comment-content.ts

@@ -26,29 +26,33 @@ type CommentFacet =
       uri: string;
     };
 
-type CommentContent =
-  | string
-  | { content: CommentContent; facets: CommentFacet[] }
-  | CommentContent[];
+type CommentContent = string | { content: string; facets: CommentFacet[] };
 
-function $nodeToCommentContent(node: LexicalNode): CommentContent {
+function $nodeToCommentContent(node: LexicalNode): CommentContent[] {
   if ($isTextNode(node)) {
-    console.log("text node", node);
     const formats = FORMATS.filter((format) => node.hasFormat(format));
     if (formats.length === 0) {
-      return node.getTextContent();
+      return [node.getTextContent()];
     }
 
-    return {
-      content: node.getTextContent(),
-      facets: formats.map((format) => ({
-        $type: "fyi.frontpage.richtext.facet#format",
-        format,
-      })),
-    };
+    return [
+      {
+        content: node.getTextContent(),
+        facets: formats.map((format) => ({
+          $type: "fyi.frontpage.richtext.facet#format",
+          format,
+        })),
+      },
+    ];
   } else if ($isElementNode(node)) {
-    console.log("element node", node);
-    return node.getChildren().map($nodeToCommentContent);
+    const children = node.getChildren();
+    if (children.length === 0) {
+      return [];
+    }
+    if (children.length === 1) {
+      return $nodeToCommentContent(children[0]!);
+    }
+    return children.map($nodeToCommentContent).flat();
   } else {
     throw new Error("Unknown node type");
   }