[field] PT: minor code tidy

packages/@sanity/field/src/diff/components/portableText/PortableText.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {PortableTextBlock, PortableTextChild, ChildMap} from './types'
-import {isDecorator, isHeader, diffDidRemove, MISSING_TYPE_NAME} from './helpers'
+import {isDecorator, isHeader, childIsSpan, diffDidRemove, MISSING_TYPE_NAME} from './helpers'
 
 import Annotation from './previews/Annotation'
 import Decorator from './previews/Decorator'
@@ -42,41 +42,17 @@ export const PortableText = (props: Props): JSX.Element => {
     }
     return <>{returned}</>
   }
-  const renderInlineObject = (props: {child: PortableTextChild}): React.ReactNode => {
-    const {child} = props
-    return <InlineObject object={child} />
-  }
-
-  const invalidInlineObjectType = (props: any) => {
-    return <span className={styles.inlineObjectDiff}>Invalid type</span>
-  }
-
-  const otherTypes = {}
-  Object.keys(childMap)
-    .map(key => childMap[key])
-    .forEach(mapEntry => {
-      const {child} = mapEntry
-      const type = typeof child === 'object' && (child._type as string)
-      const isSpan = child && typeof child._type === 'string' && child._type === 'span'
-      if (!isSpan && type) {
-        otherTypes[type] = renderInlineObject
-      } else {
-        // This should not happen. But have a fallback for missing types anyway.
-        // 'undefined' key is set when building the childMap (helpers) when there is no schema found for this object
-        // TODO: remove this when diffs don't have references to leftover types.
-        otherTypes[MISSING_TYPE_NAME] = props => invalidInlineObjectType(props)
-      }
-    })
 
   const renderChild = (child: PortableTextChild) => {
     const fromMap = childMap[child._key]
     // Render span or inline object?
-    const inlineObject = otherTypes[child._type]
-    const renderSpanOrInline = inlineObject ? inlineObject : () => child.text
+    const renderInlineObject = renderObjectTypes[child._type]
+    const renderSpanOrInline = renderInlineObject ? renderInlineObject : () => child.text
+    const isSpan = childIsSpan(child)
     let returned: React.ReactNode =
       fromMap && fromMap.annotation ? fromMap.annotation : renderSpanOrInline({child})
     // Render decorators
-    !inlineObject &&
+    isSpan &&
       child.marks &&
       (
         child.marks.filter(mark => isDecorator(mark, fromMap.schemaType as ObjectSchemaType)) || []
@@ -88,7 +64,7 @@ export const PortableText = (props: Props): JSX.Element => {
         )
       })
     // Render annotations
-    !inlineObject &&
+    isSpan &&
       child.marks &&
       (
         child.marks.filter(mark => !isDecorator(mark, fromMap.schemaType as ObjectSchemaType)) || []
@@ -102,7 +78,29 @@ export const PortableText = (props: Props): JSX.Element => {
     return returned
   }
 
-  // Do the final render
+  // Set up renderers for object types (inlines and annotations)
+  const renderInlineObject = (props: {child: PortableTextChild}): React.ReactNode => {
+    const {child} = props
+    return <InlineObject object={child} />
+  }
+  const renderInvalidInlineObjectType = () => {
+    return <span className={styles.inlineObjectDiff}>Invalid inline object type</span>
+  }
+  const renderObjectTypes = {}
+  Object.keys(childMap)
+    .map(key => childMap[key])
+    .forEach(mapEntry => {
+      const {child} = mapEntry
+      const type = typeof child === 'object' && (child._type as string)
+      const isSpan = childIsSpan(child)
+      if (!isSpan && type) {
+        renderObjectTypes[type] = renderInlineObject
+      } else {
+        // This should not happen. But have a fallback for rendering missing types anyway.
+        renderObjectTypes[MISSING_TYPE_NAME] = renderInvalidInlineObjectType
+      }
+    })
+
   let block = blockDiff.toValue as PortableTextBlock
 
   // If something is removed, we should show the beforeValue?
@@ -111,9 +109,8 @@ export const PortableText = (props: Props): JSX.Element => {
     block = blockDiff.fromValue as PortableTextBlock
   }
 
-  const children = block.children || []
   return renderBlock({
     block,
-    children: children.map(child => renderChild(child))
+    children: (block.children || []).map(child => renderChild(child))
   })
 }

packages/@sanity/field/src/diff/components/portableText/previews/Paragraph.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styles from './Paragraph.css'
 import {PortableTextBlock} from '../types'
 
-interface Props {
+type Props = {
   block: PortableTextBlock
   children: React.ReactNode
 }