fix: add keys

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>
+    )
   },
 
   /**