Merged in fix/add-keys (pull request #30)

fix: add keys in rte

Approved-by: Michael Zetterberg
Approved-by: Arvid Norlin

components/Current/Aside/Puffs/Puff/renderOptions.tsx

@@ -8,6 +8,10 @@ import type { RenderOptions } from "@/types/rte/option"
 
 export const renderOptions: RenderOptions = {
   [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
-    return <p className={styles.p}>{next(node.children, embeds, fullRenderOptions)}</p>
+    return (
+      <p key={node.uid} className={styles.p}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
   },
 }

components/Current/Preamble/renderOptions.tsx

@@ -8,6 +8,10 @@ import type { RenderOptions } from "@/types/rte/option"
 
 export const renderOptions: RenderOptions = {
   [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
-    return <p className={styles.preamble}>{next(node.children, embeds, fullRenderOptions)}</p>
+    return (
+      <p key={node.uid} className={styles.preamble}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
   },
 }

components/JsonToHtml/renderOptions.tsx

@@ -38,6 +38,7 @@ export const renderOptions: RenderOptions = {
           {...props}
           href={node.attrs.url}
           target={node.attrs.target ?? "_blank"}
+          key={node.uid}
         >
           {next(node.children, embeds, fullRenderOptions)}
         </a>
@@ -48,12 +49,20 @@ export const renderOptions: RenderOptions = {
 
   [RTETypeEnum.blockquote]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <blockquote {...props}>{next(node.children, embeds, fullRenderOptions)}</blockquote>
+    return (
+      <blockquote key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </blockquote>
+    )
   },
 
   [RTETypeEnum.code]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <code {...props}>{next(node.children, embeds, fullRenderOptions)}</code>
+    return (
+      <code key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </code>
+    )
   },
 
   [RTETypeEnum.embed]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
@@ -68,7 +77,7 @@ export const renderOptions: RenderOptions = {
       return null
     }
     return (
-      <iframe {...props}>
+      <iframe key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
       </iframe>
     )
@@ -76,32 +85,56 @@ export const renderOptions: RenderOptions = {
 
   [RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h1 {...props}>{next(node.children, embeds, fullRenderOptions)}</h1>
+    return (
+      <h1 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h1>
+    )
   },
 
   [RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h2 {...props}>{next(node.children, embeds, fullRenderOptions)}</h2>
+    return (
+      <h2 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h2>
+    )
   },
 
   [RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h3 {...props}>{next(node.children, embeds, fullRenderOptions)}</h3>
+    return (
+      <h3 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h3>
+    )
   },
 
   [RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h4 {...props}>{next(node.children, embeds, fullRenderOptions)}</h4>
+    return (
+      <h4 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h4>
+    )
   },
 
   [RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h5 {...props}>{next(node.children, embeds, fullRenderOptions)}</h5>
+    return (
+      <h5 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h5>
+    )
   },
 
   [RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <h6 {...props}>{next(node.children, embeds, fullRenderOptions)}</h6>
+    return (
+      <h6 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h6>
+    )
   },
 
   [RTETypeEnum.hr]: () => {
@@ -110,17 +143,29 @@ export const renderOptions: RenderOptions = {
 
   [RTETypeEnum.li]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <li {...props}>{next(node.children, embeds, fullRenderOptions)}</li>
+    return (
+      <li key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </li>
+    )
   },
 
   [RTETypeEnum.ol]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <ol {...props}>{next(node.children, embeds, fullRenderOptions)}</ol>
+    return (
+      <ol key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ol>
+    )
   },
 
   [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <p {...props}>{next(node.children, embeds, fullRenderOptions)}</p>
+    return (
+      <p {...props} key={node.uid}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
   },
 
   [RTETypeEnum.reference]: (node: RTENode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
@@ -132,6 +177,7 @@ export const renderOptions: RenderOptions = {
           const alt = image?.node?.title ?? node.attrs.alt
           return (
             <Image
+              key={node.uid}
               alt={alt}
               className={styles.image}
               height={image.node.dimension.height}
@@ -143,7 +189,7 @@ export const renderOptions: RenderOptions = {
       } else {
         const props = extractPossibleAttributes(node.attrs)
         return (
-          <Link {...props} href={node.attrs.href}>
+          <Link {...props} href={node.attrs.href} key={node.uid}>
             {next(node.children, embeds, fullRenderOptions)}
           </Link>
         )
@@ -155,42 +201,74 @@ export const renderOptions: RenderOptions = {
 
   [RTETypeEnum.table]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <table {...props}>{next(node.children, embeds, fullRenderOptions)}</table>
+    return (
+      <table key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </table>
+    )
   },
 
   [RTETypeEnum.thead]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <thead {...props}>{next(node.children, embeds, fullRenderOptions)}</thead>
+    return (
+      <thead key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </thead>
+    )
   },
 
   [RTETypeEnum.tbody]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <tbody {...props}>{next(node.children, embeds, fullRenderOptions)}</tbody>
+    return (
+      <tbody key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tbody>
+    )
   },
 
   [RTETypeEnum.tfoot]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <tfoot {...props}>{next(node.children, embeds, fullRenderOptions)}</tfoot>
+    return (
+      <tfoot key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tfoot>
+    )
   },
 
   [RTETypeEnum.tr]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <tr {...props}>{next(node.children, embeds, fullRenderOptions)}</tr>
+    return (
+      <tr key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tr>
+    )
   },
 
   [RTETypeEnum.th]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <th {...props}>{next(node.children, embeds, fullRenderOptions)}</th>
+    return (
+      <th key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </th>
+    )
   },
 
   [RTETypeEnum.td]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <td {...props}>{next(node.children, embeds, fullRenderOptions)}</td>
+    return (
+      <td key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </td>
+    )
   },
 
   [RTETypeEnum.ul]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
     const props = extractPossibleAttributes(node.attrs)
-    return <ul {...props}>{next(node.children, embeds, fullRenderOptions)}</ul>
+    return (
+      <ul key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ul>
+    )
   },
 
   /** TextNode wrappers */
@@ -242,7 +320,11 @@ export const renderOptions: RenderOptions = {
     if (!id) {
       delete props.id
     }
-    return <span {...props}>{children}</span>
+    return (
+      <span key={id} {...props}>
+        {children}
+      </span>
+    )
   },
 
   /**

components/JsonToHtml/utils.tsx

@@ -21,65 +21,100 @@ export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
   return embedsByUid
 }
 
-export function nodeChildrenToHtml(nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions): any {
+
-  return nodes.map(node => nodeToHtml(node, embeds, fullRenderOptions))
+export function nodeChildrenToHtml(
+  nodes: RTENode[],
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+): any {
+  return nodes.map((node, i) => {
+    // This function either returns a JSX element or null
+    return {
+      ...nodeToHtml(node, embeds, fullRenderOptions),
+      key: `child-rte-${i}`,
+    }
+  })
 }
 
-export function textNodeToHtml(node: RTETextNode, fullRenderOptions: RenderOptions) {
+export function textNodeToHtml(
-  let text = <>{node.text}</>;
+  node: RTETextNode,
+  fullRenderOptions: RenderOptions
+) {
+  let text = <>{node.text}</>
 
   if (node.classname || node.id) {
-    text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(text, node.classname, node.id);
+    text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(
+      text,
+      node.classname,
+      node.id
+    )
   }
   if (node.break) {
-    text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text)
   }
   if (node.superscript) {
-    text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text)
   }
   if (node.subscript) {
-    text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text)
   }
   if (node.inlineCode) {
-    text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text)
   }
   if (node.strikethrough) {
-    text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text)
   }
   if (node.underline) {
-    text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text)
   }
   if (node.italic) {
-    text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text)
   }
   if (node.bold) {
-    text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text);
+    text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text)
   }
 
-  return text;
+  return text
 }
 
-function next(nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions) {
+function next(
+  nodes: RTENode[],
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+) {
   return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
 }
 
-export function nodeToHtml(node: RTENode, embeds: EmbedByUid, fullRenderOptions: RenderOptions) {
+export function nodeToHtml(
+  node: RTENode,
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+) {
   if ("type" in node === false) {
-    return textNodeToHtml(node, fullRenderOptions);
+    return textNodeToHtml(node, fullRenderOptions)
   } else {
     if (fullRenderOptions[node.type] !== undefined) {
       if (node.type === RTETypeEnum.doc) {
         return null
       }
-      return (fullRenderOptions[node.type] as RTERenderOptionComponent)(node, embeds, next, fullRenderOptions);
+      return (fullRenderOptions[node.type] as RTERenderOptionComponent)(
+        node,
+        embeds,
+        next,
+        fullRenderOptions
+      )
     } else {
-      return next(node.children, embeds, fullRenderOptions);
+      return next(node.children, embeds, fullRenderOptions)
     }
   }
 }
 
-export function nodesToHtml(nodes: RTENode[], embedsArray: Node<Embeds>[], overrideRenderOptions: RenderOptions) {
+export function nodesToHtml(
+  nodes: RTENode[],
+  embedsArray: Node<Embeds>[],
+  overrideRenderOptions: RenderOptions
+) {
   const embeds = groupEmbedsByUid(embedsArray)
   const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
-  return nodes.map(node => nodeToHtml(node, embeds, fullRenderOptions))
+  return nodes.map((node) => nodeToHtml(node, embeds, fullRenderOptions))
 }