fix: correct types

charlie-tango · Nov 8, 2024 · d8e00db · d8e00db
1 parent 0702500
commit d8e00db
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/src/UmbracoRichText.tsx b/src/UmbracoRichText.tsx
@@ -112,23 +112,25 @@ function RichTextElement({
 
     return null;
   }
-
+  let children: Array<React.ReactNode> | undefined = undefined;
   if (isHtmlElement(element)) {
-    const children: React.ReactNode =
-      element.elements.map((node, index) => (
-        <RichTextElement
-          key={index}
-          element={node}
-          blocks={blocks}
-          renderBlock={renderBlock}
-          renderNode={renderNode}
-          meta={{
-            ancestor: element.tag,
-            previous: element.elements?.[index - 1]?.tag,
-            next: element.elements?.[index + 1]?.tag,
-          }}
-        />
-      )) || null;
+    children = element.elements?.map((node, index) => (
+      <RichTextElement
+        key={index}
+        element={node}
+        blocks={blocks}
+        renderBlock={renderBlock}
+        renderNode={renderNode}
+        meta={{
+          ancestor: element.tag,
+          previous: element.elements?.[index - 1]?.tag,
+          next: element.elements?.[index + 1]?.tag,
+        }}
+      />
+    ));
+    if (children?.length === 0) {
+      children = undefined;
+    }
 
     const {
       route,
@@ -193,7 +195,7 @@ export function UmbracoRichText(props: RichTextProps) {
   if (isRootElement(rootElement)) {
     return (
       <>
-        {rootElement.elements.map((element, index) => (
+        {rootElement.elements?.map((element, index) => (
           <RichTextElement
             key={index}
             element={element}

diff --git a/src/types/RichTextTypes.ts b/src/types/RichTextTypes.ts
@@ -3,7 +3,7 @@ import type { Overwrite } from "../utils/helper-types";
 export function isRootElement(data: RichTextElementModel | undefined): data is {
   tag: "#root";
   attributes?: Record<string, unknown>;
-  elements: RichTextElementModel[];
+  elements?: RichTextElementModel[];
   blocks?: Array<UmbracoBlockContext>;
 } {
   return !!data && data.tag === "#root";
@@ -21,6 +21,12 @@ export function isCommentElement(
   return data.tag === "#comment";
 }
 
+export function hasElements(
+  data: RichTextElementModel,
+): data is { tag: string; elements: RichTextElementModel[] } {
+  return "elements" in data;
+}
+
 export function isUmbracoBlock(data: RichTextElementModel): data is {
   tag: string;
   attributes: {
@@ -34,9 +40,15 @@ export function isUmbracoBlock(data: RichTextElementModel): data is {
 export function isHtmlElement(data: RichTextElementModel): data is {
   tag: keyof HTMLElementTagNameMap;
   attributes: Record<string, unknown> & { route?: RouteAttributes };
-  elements: RichTextElementModel[];
+  elements?: RichTextElementModel[];
 } {
-  return "elements" in data;
+  return (
+    "attributes" in data &&
+    "tag" in data &&
+    data.tag !== "#text" &&
+    data.tag !== "#comment" &&
+    data.tag !== "#root"
+  );
 }
 
 interface BaseBlockItemModel {

diff --git a/src/utils/rich-text-converter.ts b/src/utils/rich-text-converter.ts
@@ -1,8 +1,8 @@
 import { decode } from "html-entities";
 import {
   type RichTextElementModel,
+  hasElements,
   isCommentElement,
-  isHtmlElement,
   isTextElement,
 } from "../types/RichTextTypes";
 
@@ -29,11 +29,14 @@ function iterateRichText(
     return acc;
   }
 
-  if (isCommentElement(data) || options.ignoreTags?.includes(data.tag)) {
+  if (
+    isCommentElement(data) ||
+    options.ignoreTags?.includes(data.tag as keyof HTMLElementTagNameMap)
+  ) {
     return acc;
   }
 
-  if (isHtmlElement(data)) {
+  if (hasElements(data)) {
     for (let i = 0; i < data.elements.length; i++) {
       iterateRichText(data.elements[i], acc, options);
       if (options.maxLength && arrayContentLength(acc) >= options.maxLength) {
@@ -49,7 +52,7 @@ function iterateRichText(
  */
 function findElement(
   data: RichTextElementModel,
-  tag: RichTextElementModel["tag"],
+  tag: string,
 ): RichTextElementModel | undefined {
   if (data.tag === tag) {
     // Ensure the element is or has text content before returning it.
@@ -60,7 +63,7 @@ function findElement(
     return undefined;
   }
 
-  if (isHtmlElement(data)) {
+  if (hasElements(data)) {
     for (let i = 0; i < data.elements.length; i++) {
       const result = findElement(data.elements[i], tag);
       if (result) {
@@ -74,7 +77,7 @@ function findElement(
 type Options = {
   firstParagraph?: boolean;
   maxLength?: number;
-  ignoreTags?: Array<RichTextElementModel["tag"]>;
+  ignoreTags?: Array<keyof HTMLElementTagNameMap>;
 };
 
 /**