fix: add keys

2024-02-16 15:50:11 +01:00
parent 7dab4c5231
commit fecf135a98
4 changed files with 168 additions and 45 deletions
--- a/components/Current/Aside/Puffs/Puff/renderOptions.tsx
+++ b/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>
+    )
  },
 }
--- a/components/Current/Preamble/renderOptions.tsx
+++ b/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>
+    )
  },
 }
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/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>
+    )
  },

  /**
--- a/components/JsonToHtml/utils.tsx
+++ b/components/JsonToHtml/utils.tsx
@@ -21,65 +21,98 @@ 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) => {
+    return {
+      ...nodeToHtml(node, embeds, fullRenderOptions),
+      key: `child-rte-${i}`,
+    }
+  })
 }

-export function textNodeToHtml(node: RTETextNode, fullRenderOptions: RenderOptions) {
-  let text = <>{node.text}</>;
+export function textNodeToHtml(
+  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))
 }