fix(frontend): Prevent rendering error if rich text contains tab characters (#66)

Lexical rich text supports entering tab characters. I just want to
render these as normal space characters.
!release

Author: felixmokross

apps/frontend/app/components/rich-text/rich-text.test.tsx

@@ -17,6 +17,7 @@ import {
   unsupportedElementWithoutChildren,
   lineBreak,
   listitem,
+  tab,
 } from "@fxmk/shared";
 import type { PropsWithChildren } from "react";
 
@@ -305,6 +306,16 @@ test("line breaks are rendered as <br /> elements.", () => {
   `);
 });
 
+test("tabs are rendered as whitespace.", () => {
+  render(
+    <RichText
+      content={richTextRoot(paragraph(text("hello"), tab(), text("world")))}
+    />,
+  );
+
+  expect(screen.getByText("hello world")).toBeInTheDocument();
+});
+
 describe("custom elements", () => {
   test("if a custom bold element is specified, it is used for bold text nodes", () => {
     function CustomHighlight({ children }: PropsWithChildren) {

apps/frontend/app/components/rich-text/rich-text.tsx

@@ -275,6 +275,11 @@ function RenderedNode({ node, isLast }: { node: Node; isLast: boolean }) {
     return <elements.linebreak />;
   }
 
+  // Lexical tab nodes shall just render a normal space
+  if (node.type === "tab") {
+    return " ";
+  }
+
   return <RenderedElementNode node={node} isLast={isLast} />;
 }
 

libs/shared/src/rich-text.builders.ts

@@ -12,6 +12,7 @@ import {
   type LinkElementNode,
   type LineBreakNode,
   type ParagraphElementNode,
+  type TabNode,
 } from "./rich-text.model";
 
 export function richTextRoot(...children: ElementNode[]): RichTextObject {
@@ -49,6 +50,10 @@ export function lineBreak(): LineBreakNode {
   return { type: "linebreak" };
 }
 
+export function tab(): TabNode {
+  return { type: "tab" };
+}
+
 export function bold(t: string): TextNode {
   return text(t, { bold: true });
 }

libs/shared/src/rich-text.model.tsx

@@ -21,10 +21,12 @@ export type ElementNode =
   | HeadingElementNode
   | BlockElementNode;
 
-export type Node = ElementNode | TextNode | LineBreakNode;
+export type Node = ElementNode | TextNode | LineBreakNode | TabNode;
 
 export type LineBreakNode = { type: "linebreak" };
 
+export type TabNode = { type: "tab" };
+
 type ElementNodeWithChildren = { children: Node[] };
 
 export type ListItemElementNode = ElementNodeWithChildren & {