From fcd3ab4b96886a85d011758d4126c584d9847550 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sun, 10 Mar 2024 21:41:34 +0100
Subject: [PATCH] Added support for linebreak node

---
 TODO.md                                             |  1 +
 astro.config.ts                                     |  8 +++-----
 .../RichText/components/RTLinebreak.astro           | 13 +++++++++++++
 src/components/RichText/components/RTNode.astro     |  4 ++++
 src/pages/[locale]/dev/rich-text.astro              | 10 ++++++++++
 src/shared/payload/payload-sdk.ts                   |  7 +++++++
 6 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/components/RichText/components/RTLinebreak.astro

diff --git a/TODO.md b/TODO.md
index 4ae27f5..d352aaf 100644
--- a/TODO.md
+++ b/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
 
diff --git a/astro.config.ts b/astro.config.ts
index 4a1bd86..0236276 100644
--- a/astro.config.ts
+++ b/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)
diff --git a/src/components/RichText/components/RTLinebreak.astro b/src/components/RichText/components/RTLinebreak.astro
new file mode 100644
index 0000000..cfdbed2
--- /dev/null
+++ b/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 />
diff --git a/src/components/RichText/components/RTNode.astro b/src/components/RichText/components/RTNode.astro
index c2dc25f..135457e 100644
--- a/src/components/RichText/components/RTNode.astro
+++ b/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) ? (
diff --git a/src/pages/[locale]/dev/rich-text.astro b/src/pages/[locale]/dev/rich-text.astro
index a749c86..0deaa09 100644
--- a/src/pages/[locale]/dev/rich-text.astro
+++ b/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>
diff --git a/src/shared/payload/payload-sdk.ts b/src/shared/payload/payload-sdk.ts
index 8e9aabf..f413942 100644
--- a/src/shared/payload/payload-sdk.ts
+++ b/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";