From a588f818037846fde1937ed5b7ef937840b84ff6 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 17 Feb 2024 23:10:18 +0100
Subject: [PATCH] Added rich text parsing

---
 src/components/RichText/RichText.astro        | 41 ++++++++++++++++
 .../RichText/components/RTError.astro         | 19 ++++++++
 .../RichText/components/RTLink/RTLink.astro   | 45 +++++++++++++++++
 .../RTLink/components/RTCustomLink.astro      | 16 +++++++
 .../RTLink/components/RTInternalLink.astro    | 23 +++++++++
 .../RichText/components/RTList/RTList.astro   | 48 +++++++++++++++++++
 .../RTList/components/RTBasicListItem.astro   | 23 +++++++++
 .../RTList/components/RTCheckListItem.astro   | 40 ++++++++++++++++
 .../RichText/components/RTNode.astro          | 42 ++++++++++++++++
 .../RichText/components/RTParagraph.astro     | 34 +++++++++++++
 .../RichText/components/RTText/RTText.astro   | 47 ++++++++++++++++++
 .../components/RTText/components/RTBold.astro |  5 ++
 .../RTText/components/RTInlineCode.astro      | 12 +++++
 .../RTText/components/RTItalic.astro          |  5 ++
 .../RTText/components/RTLineThrough.astro     | 11 +++++
 .../RTText/components/RTSubscript.astro       |  5 ++
 .../RTText/components/RTSuperscript.astro     |  5 ++
 .../RTText/components/RTUnderline.astro       | 11 +++++
 18 files changed, 432 insertions(+)
 create mode 100644 src/components/RichText/RichText.astro
 create mode 100644 src/components/RichText/components/RTError.astro
 create mode 100644 src/components/RichText/components/RTLink/RTLink.astro
 create mode 100644 src/components/RichText/components/RTLink/components/RTCustomLink.astro
 create mode 100644 src/components/RichText/components/RTLink/components/RTInternalLink.astro
 create mode 100644 src/components/RichText/components/RTList/RTList.astro
 create mode 100644 src/components/RichText/components/RTList/components/RTBasicListItem.astro
 create mode 100644 src/components/RichText/components/RTList/components/RTCheckListItem.astro
 create mode 100644 src/components/RichText/components/RTNode.astro
 create mode 100644 src/components/RichText/components/RTParagraph.astro
 create mode 100644 src/components/RichText/components/RTText/RTText.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTBold.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTInlineCode.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTItalic.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTLineThrough.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTSubscript.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTSuperscript.astro
 create mode 100644 src/components/RichText/components/RTText/components/RTUnderline.astro

diff --git a/src/components/RichText/RichText.astro b/src/components/RichText/RichText.astro
new file mode 100644
index 0000000..1539035
--- /dev/null
+++ b/src/components/RichText/RichText.astro
@@ -0,0 +1,41 @@
+---
+import RTNode from "./components/RTNode.astro";
+
+interface Props {
+  content: {
+    root: {
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+    };
+  };
+}
+
+const { content } = Astro.props;
+---
+
+{
+  /* ------------------------------------------- HTML ------------------------------------------- */
+}
+
+<div class="rich-text">
+  {content.root.children.map((node) => <RTNode node={node} />)}
+</div>
+
+{
+  /* ------------------------------------------- CSS -------------------------------------------- */
+}
+
+<style>
+  .rich-text {
+    & li[checkbox]::marker {
+      content: "☐";
+    }
+
+    & li[checkbox][checked]::marker {
+      content: "☒";
+    }
+  }
+</style>
diff --git a/src/components/RichText/components/RTError.astro b/src/components/RichText/components/RTError.astro
new file mode 100644
index 0000000..ce78012
--- /dev/null
+++ b/src/components/RichText/components/RTError.astro
@@ -0,0 +1,19 @@
+---
+type BasicNode = {
+  type: string;
+  version: number;
+  [k: string]: unknown;
+};
+
+interface Props {
+  node: BasicNode;
+}
+
+const { node } = Astro.props;
+---
+
+<p>
+  {
+    `Unknown node type: ${node.type}. Please contact website technical administrator.`
+  }
+</p>
diff --git a/src/components/RichText/components/RTLink/RTLink.astro b/src/components/RichText/components/RTLink/RTLink.astro
new file mode 100644
index 0000000..c7b0bbd
--- /dev/null
+++ b/src/components/RichText/components/RTLink/RTLink.astro
@@ -0,0 +1,45 @@
+---
+import RTError from "../RTError.astro";
+import RTNode from "../RTNode.astro";
+import RTCustomLink from "./components/RTCustomLink.astro";
+import RTInternalLink from "./components/RTInternalLink.astro";
+
+interface Props {
+  node: {
+    type: string;
+    children: {
+      type: string;
+      version: number;
+      [k: string]: unknown;
+    }[];
+    version: number;
+    fields: {
+      linkType: "internal" | "custom";
+      doc: any;
+      url: string;
+      newTab: boolean;
+    };
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+{
+  node.fields.linkType === "custom" ? (
+    <RTCustomLink href={node.fields.url} newTab={node.fields.newTab}>
+      {node.children.map((node) => (
+        <RTNode node={node} />
+      ))}
+    </RTCustomLink>
+  ) : node.fields.linkType === "internal" ? (
+    <RTInternalLink doc={node.fields.doc}>
+      {node.children.map((node) => (
+        <RTNode node={node} />
+      ))}
+    </RTInternalLink>
+  ) : (
+    <RTError node={node} />
+  )
+}
diff --git a/src/components/RichText/components/RTLink/components/RTCustomLink.astro b/src/components/RichText/components/RTLink/components/RTCustomLink.astro
new file mode 100644
index 0000000..381abaf
--- /dev/null
+++ b/src/components/RichText/components/RTLink/components/RTCustomLink.astro
@@ -0,0 +1,16 @@
+---
+interface Props {
+  href: string;
+  newTab: boolean;
+}
+
+const { href, newTab } = Astro.props;
+---
+
+<a
+  href={href}
+  target={newTab ? "_blank" : undefined}
+  rel={newTab ? "noopener noreferrer" : undefined}
+>
+  <slot />
+</a>
diff --git a/src/components/RichText/components/RTLink/components/RTInternalLink.astro b/src/components/RichText/components/RTLink/components/RTInternalLink.astro
new file mode 100644
index 0000000..72dfb4f
--- /dev/null
+++ b/src/components/RichText/components/RTLink/components/RTInternalLink.astro
@@ -0,0 +1,23 @@
+---
+import { getI18n } from "translations/translations";
+
+interface Props {
+  doc: {
+    relationTo: string;
+    value: any;
+  };
+}
+
+const { doc } = Astro.props;
+const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+---
+
+{
+  doc.relationTo === "folders" ? (
+    <a href={getLocalizedUrl(`/folders/${doc.value.slug}`)}>
+      <slot />
+    </a>
+  ) : (
+    <p>{`Unknown internal link: ${doc.relationTo}. Please contact website technical administrator.`}</p>
+  )
+}
diff --git a/src/components/RichText/components/RTList/RTList.astro b/src/components/RichText/components/RTList/RTList.astro
new file mode 100644
index 0000000..572979e
--- /dev/null
+++ b/src/components/RichText/components/RTList/RTList.astro
@@ -0,0 +1,48 @@
+---
+import RTBasicListItem from "./components/RTBasicListItem.astro";
+import RTCheckListItem from "./components/RTCheckListItem.astro";
+
+interface Props {
+  node: {
+    type: string;
+    version: number;
+    format: number;
+    text: string;
+    listType: string;
+    children: {
+      type: string;
+      version: number;
+      [k: string]: unknown;
+    }[];
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+{
+  node.listType === "number" ? (
+    <ol>
+      {node.children.map((node) => (
+        <RTBasicListItem node={node} />
+      ))}
+    </ol>
+  ) : node.listType === "bullet" ? (
+    <ul>
+      {node.children.map((node) => (
+        <RTBasicListItem node={node} />
+      ))}
+    </ul>
+  ) : node.listType === "check" ? (
+    <ul>
+      {node.children.map((node) => (
+        <RTCheckListItem node={node} />
+      ))}
+    </ul>
+  ) : (
+    <p>
+      {`Unknown list type: ${node.listType}. Please contact website technical administrator.`}
+    </p>
+  )
+}
diff --git a/src/components/RichText/components/RTList/components/RTBasicListItem.astro b/src/components/RichText/components/RTList/components/RTBasicListItem.astro
new file mode 100644
index 0000000..b26762a
--- /dev/null
+++ b/src/components/RichText/components/RTList/components/RTBasicListItem.astro
@@ -0,0 +1,23 @@
+---
+import RTNode from "../../RTNode.astro";
+
+interface Props {
+  node: {
+    children: {
+      type: string;
+      version: number;
+      [k: string]: unknown;
+    }[];
+    type: string;
+    version: number;
+    format: number;
+    text: string;
+    listType: string;
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+<li>{node.children.map((node) => <RTNode node={node} />)}</li>
diff --git a/src/components/RichText/components/RTList/components/RTCheckListItem.astro b/src/components/RichText/components/RTList/components/RTCheckListItem.astro
new file mode 100644
index 0000000..f85d785
--- /dev/null
+++ b/src/components/RichText/components/RTList/components/RTCheckListItem.astro
@@ -0,0 +1,40 @@
+---
+import { Icon } from "astro-icon/components";
+import RTNode from "../../RTNode.astro";
+
+interface Props {
+  node: {
+    children: {
+      type: string;
+      version: number;
+      [k: string]: unknown;
+    }[];
+    type: string;
+    version: number;
+    format: number;
+    text: string;
+    listType: string;
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+<li>
+  <Icon
+    name={node.checked
+      ? "material-symbols:check-box"
+      : "material-symbols:check-box-outline-blank"}
+  />
+  {node.children.map((node) => <RTNode node={node} />)}
+</li>
+
+<style>
+  li {
+    &::marker {
+      content: ""
+    }
+    margin-left: -16px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/RichText/components/RTNode.astro b/src/components/RichText/components/RTNode.astro
new file mode 100644
index 0000000..eb67dda
--- /dev/null
+++ b/src/components/RichText/components/RTNode.astro
@@ -0,0 +1,42 @@
+---
+import RTParagraph from "./RTParagraph.astro";
+import RTList from "./RTList/RTList.astro";
+import RTError from "./RTError.astro";
+import RTText from "./RTText/RTText.astro";
+import RTLink from "./RTLink/RTLink.astro";
+
+interface Props {
+  node: {
+    type: string;
+    version: number;
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+
+let NodeElement;
+switch (node.type) {
+  case "paragraph":
+    NodeElement = RTParagraph;
+    break;
+
+  case "list":
+    NodeElement = RTList;
+    break;
+
+  case "text":
+    NodeElement = RTText;
+    break;
+
+  case "link":
+    NodeElement = RTLink;
+    break;
+
+  default:
+    NodeElement = RTError;
+    break;
+}
+---
+
+<NodeElement node={node} />
diff --git a/src/components/RichText/components/RTParagraph.astro b/src/components/RichText/components/RTParagraph.astro
new file mode 100644
index 0000000..5d91bc2
--- /dev/null
+++ b/src/components/RichText/components/RTParagraph.astro
@@ -0,0 +1,34 @@
+---
+import RTNode from "./RTNode.astro";
+
+interface Props {
+  node: {
+    type: string;
+    version: number;
+    children: {
+      type: string;
+      version: number;
+      [k: string]: unknown;
+    }[];
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+{
+  /* ------------------------------------------- HTML ------------------------------------------- */
+}
+
+<p>{node.children.map((node) => <RTNode node={node} />)}</p>
+
+{
+  /* ------------------------------------------- CSS -------------------------------------------- */
+}
+
+<style>
+  p {
+    margin-bottom: 1em;
+  }
+</style>
diff --git a/src/components/RichText/components/RTText/RTText.astro b/src/components/RichText/components/RTText/RTText.astro
new file mode 100644
index 0000000..5ae3132
--- /dev/null
+++ b/src/components/RichText/components/RTText/RTText.astro
@@ -0,0 +1,47 @@
+---
+import ConditionalWrapper from "components/ConditionalWrapper.astro";
+import RTBold from "./components/RTBold.astro";
+import RTItalic from "./components/RTItalic.astro";
+import RTUnderline from "./components/RTUnderline.astro";
+import RTLineThrough from "./components/RTLineThrough.astro";
+import RTSubscript from "./components/RTSubscript.astro";
+import RTSuperscript from "./components/RTSuperscript.astro";
+import RTInlineCode from "./components/RTInlineCode.astro";
+
+interface Props {
+  node: {
+    type: string;
+    version: number;
+    format: number;
+    text: string;
+    [k: string]: unknown;
+  };
+}
+
+const { node } = Astro.props;
+---
+
+<ConditionalWrapper wrapper={RTBold} condition={Boolean(node.format & 1)}>
+  <ConditionalWrapper wrapper={RTItalic} condition={Boolean(node.format & 2)}>
+    <ConditionalWrapper wrapper={RTLineThrough} condition={Boolean(node.format & 4)}>
+      <ConditionalWrapper wrapper={RTUnderline} condition={Boolean(node.format & 8)}>
+        <ConditionalWrapper
+          wrapper={RTInlineCode}
+          condition={Boolean(node.format & 16)}
+        >
+          <ConditionalWrapper
+            wrapper={RTSubscript}
+            condition={Boolean(node.format & 32)}
+          >
+            <ConditionalWrapper
+              wrapper={RTSuperscript}
+              condition={Boolean(node.format & 64)}
+            >
+              {node.text}
+            </ConditionalWrapper>
+          </ConditionalWrapper>
+        </ConditionalWrapper>
+      </ConditionalWrapper>
+    </ConditionalWrapper>
+  </ConditionalWrapper>
+</ConditionalWrapper>
diff --git a/src/components/RichText/components/RTText/components/RTBold.astro b/src/components/RichText/components/RTText/components/RTBold.astro
new file mode 100644
index 0000000..e4ce892
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTBold.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<b><slot /></b>
diff --git a/src/components/RichText/components/RTText/components/RTInlineCode.astro b/src/components/RichText/components/RTText/components/RTInlineCode.astro
new file mode 100644
index 0000000..b8fabd2
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTInlineCode.astro
@@ -0,0 +1,12 @@
+---
+
+---
+
+<span><slot /></span>
+
+<style>
+ 
+  span {
+    font-family: monospace;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/RichText/components/RTText/components/RTItalic.astro b/src/components/RichText/components/RTText/components/RTItalic.astro
new file mode 100644
index 0000000..c1cc7f7
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTItalic.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<i><slot /></i>
diff --git a/src/components/RichText/components/RTText/components/RTLineThrough.astro b/src/components/RichText/components/RTText/components/RTLineThrough.astro
new file mode 100644
index 0000000..e4a6cac
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTLineThrough.astro
@@ -0,0 +1,11 @@
+---
+
+---
+
+<span><slot /></span>
+
+<style>
+  span {
+    text-decoration: line-through;
+  }
+</style>
diff --git a/src/components/RichText/components/RTText/components/RTSubscript.astro b/src/components/RichText/components/RTText/components/RTSubscript.astro
new file mode 100644
index 0000000..0ae64a7
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTSubscript.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<sub><slot /></sub>
diff --git a/src/components/RichText/components/RTText/components/RTSuperscript.astro b/src/components/RichText/components/RTText/components/RTSuperscript.astro
new file mode 100644
index 0000000..3dceaaa
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTSuperscript.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<sup><slot /></sup>
diff --git a/src/components/RichText/components/RTText/components/RTUnderline.astro b/src/components/RichText/components/RTText/components/RTUnderline.astro
new file mode 100644
index 0000000..f7cfe88
--- /dev/null
+++ b/src/components/RichText/components/RTText/components/RTUnderline.astro
@@ -0,0 +1,11 @@
+---
+
+---
+
+<span><slot /></span>
+
+<style>
+  span {
+    text-decoration: underline;
+  }
+</style>