Added support for linebreak node

TODO.md

@@ -4,6 +4,7 @@
 
 - [Collectibles] Create page for gallery
 - [Collectibles] Create page for scans
+- Rich text, handle linebreak node type, remove spacer
 
 ## Long term
 

astro.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from "astro/config";
 import node from "@astrojs/node";
 import astroMetaTags from "astro-meta-tags";
 import { loadEnv } from "vite";
-const { ASTRO_PORT, ASTRO_HOST } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
+const { ASTRO_PORT, ASTRO_HOST } = loadEnv(process.env.NODE_ENV ?? "dev", process.cwd(), "");
 
 // https://astro.build/config
 export default defineConfig({
@@ -24,9 +24,7 @@ export default defineConfig({
   ],
   // devToolbar: { enabled: false },
   server: {
-    port: parseInt(ASTRO_PORT),
-    host: ASTRO_HOST,
+    port: parseInt(ASTRO_PORT ?? "4321"),
+    host: ASTRO_HOST ?? true,
   },
 });
-
-console.log(import.meta.env)

src/components/RichText/components/RTLinebreak.astro

@@ -0,0 +1,13 @@
+---
+import type { RichTextContext } from "src/utils/richText";
+import type { RichTextLinebreakNode } from "src/shared/payload/payload-sdk";
+
+interface Props {
+  node: RichTextLinebreakNode;
+  context: RichTextContext;
+}
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<br />

src/components/RichText/components/RTNode.astro

@@ -7,6 +7,7 @@ import RTBlock from "./RTBlock/RTBlock.astro";
 import type { RichTextContext } from "src/utils/richText";
 import {
   isNodeBlockNode,
+  isNodeLinebreakNode,
   isNodeLinkNode,
   isNodeListNode,
   isNodeParagraphNode,
@@ -16,6 +17,7 @@ import {
 } from "src/shared/payload/payload-sdk";
 import RTTab from "./RTTab.astro";
 import ErrorMessage from "components/ErrorMessage.astro";
+import RTLinebreak from "./RTLinebreak.astro";
 
 interface Props {
   node: RichTextNode;
@@ -34,6 +36,8 @@ const { node, context } = Astro.props;
     <RTList node={node} context={context} />
   ) : isNodeTextNode(node) ? (
     <RTText node={node} context={context} />
+  ) : isNodeLinebreakNode(node) ? (
+    <RTLinebreak node={node} context={context} />
   ) : isNodeLinkNode(node) ? (
     <RTLink node={node} context={context} />
   ) : isNodeBlockNode(node) ? (

src/pages/[locale]/dev/rich-text.astro

@@ -15,5 +15,15 @@ import AppLayout from "components/AppLayout/AppLayout.astro";
       instead. Simply press the <kbd>Tab</kbd> key a few times on your keyboard to create additional
       spaces between words. Be mindful of the use of these spaces.
     </p>
+
+    <h2>Add space between paragraph/elements</h2>
+
+    <p>
+      By default, empty paragraphs are not displayed. This is why adding empty paragraph (by
+      pressing <kbd>Enter</kbd>) will not result in additional space between elements. In order to
+      add empty space, put your carret at the end of the paragraph and press <kbd>Shift</kbd>+<kbd>
+        Enter
+      </kbd> to create a linebreak.
+    </p>
   </div>
 </AppLayout>

src/shared/payload/payload-sdk.ts

@@ -1137,6 +1137,10 @@ export interface RichTextListCheckNode extends RichTextListNode {
   listType: "check";
 }
 
+export interface RichTextLinebreakNode extends RichTextNode {
+  type: "linebreak";
+}
+
 export interface RichTextTextNode extends RichTextNode {
   type: "text";
   format: number;
@@ -1208,6 +1212,9 @@ export const isListNodeBulletListNode = (node: RichTextListNode): node is RichTe
 export const isListNodeCheckListNode = (node: RichTextListNode): node is RichTextListCheckNode =>
   node.listType === "check";
 
+export const isNodeLinebreakNode = (node: RichTextNode): node is RichTextLinebreakNode =>
+  node.type === "linebreak";
+
 export const isNodeTextNode = (node: RichTextNode): node is RichTextTextNode =>
   node.type === "text";