[field] PT: fix key issues

sanity-io · Oct 6, 2020 · 7550a39 · 7550a39
1 parent 4aef323
commit 7550a39
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx
@@ -21,11 +21,7 @@ export default function Annotation(props: Props) {
     : () => {}
 
   return (
-    <span
-      className={styles.root}
-      key={`annotation-${props.markDefKey}-${props.span._key}`}
-      onClick={handleClick}
-    >
+    <span className={styles.root} onClick={handleClick}>
       {props.children}
     </span>
   )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx
@@ -65,7 +65,7 @@ export default function Block(props: Props): JSX.Element {
         child.marks.filter(mark => isDecorator(mark, fromMap.schemaType as ObjectSchemaType)) || []
       ).map(mark => {
         returned = (
-          <Decorator block={block} mark={mark} span={child}>
+          <Decorator key={`decorator-${child._key}-${mark}`} block={block} mark={mark} span={child}>
             {returned}
           </Decorator>
         )
@@ -79,6 +79,7 @@ export default function Block(props: Props): JSX.Element {
         returned = (
           <Annotation
             block={block}
+            key={`annotation-${child._key}-${markDefKey}`}
             markDefKey={markDefKey}
             onClick={handleObjectFocus}
             span={child}
@@ -92,7 +93,7 @@ export default function Block(props: Props): JSX.Element {
 
   const renderSpan = (props: {child: PortableTextChild; diff: ObjectDiff}): React.ReactNode => {
     const {child, diff} = props
-    return <Span block={block} diff={diff} span={child} />
+    return <Span key={`span-${child._key}`} block={block} diff={diff} span={child} />
   }
 
   // Set up renderers for inline object types
@@ -102,7 +103,14 @@ export default function Block(props: Props): JSX.Element {
     diff: ObjectDiff
   }): React.ReactNode => {
     const {child, diff} = props
-    return <InlineObject object={child} diff={diff} onClick={handleObjectFocus} />
+    return (
+      <InlineObject
+        key={`inline-object-${child._key}`}
+        object={child}
+        diff={diff}
+        onClick={handleObjectFocus}
+      />
+    )
   }
   const renderInvalidInlineObjectType = () => {
     return <span>Invalid inline object type</span>

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Decorator.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Decorator.tsx
@@ -10,7 +10,7 @@ type Props = {
 }
 export default function Decorator(props: Props) {
   return (
-    <span key={`decorator-${props.span._key}-${props.mark}`} className={`${styles[props.mark]}`}>
+    <span className={`${styles[props.mark]}`}>
       {props.children}
     </span>
   )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Span.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Span.tsx
@@ -20,5 +20,5 @@ export default function Span(props: Props) {
       returned = <AnnotatedStringDiff diff={textDiff} />
     }
   }
-  return <span key={`span-${span._key}`} className={styles.root}>{returned}</span>
+  return <span className={styles.root}>{returned}</span>
 }