[field] Fix lint errors and improve readability of InlineObject

packages/@sanity/field/src/types/portableText/diff/components/Block.tsx

@@ -6,7 +6,7 @@ import {ObjectDiff, DiffCard, DiffTooltip, useDiffAnnotationColor} from '../../.
 import {ObjectSchemaType} from '../../../../types'
 import Annotation from './Annotation'
 import Decorator from './Decorator'
-import InlineObject from './InlineObject'
+import {InlineObject} from './InlineObject'
 import Blockquote from './Blockquote'
 import Header from './Header'
 import Paragraph from './Paragraph'

packages/@sanity/field/src/types/portableText/diff/components/Experimental.tsx

@@ -25,10 +25,11 @@ import {
   ObjectDiff,
   useDiffAnnotationColor
 } from '../../../../diff'
+
 import {ObjectSchemaType, SchemaType} from '../../../../types'
 import Annotation from './Annotation'
 import Decorator from './Decorator'
-import InlineObject from './InlineObject'
+import {InlineObject} from './InlineObject'
 import Blockquote from './Blockquote'
 import Header from './Header'
 import Paragraph from './Paragraph'

packages/@sanity/field/src/types/portableText/diff/components/InlineObject.css

@@ -1,14 +1,13 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  border: 1px solid var(--hairline-color);
   border-radius: var(--border-radius-small);
-  margin: 0 2px;
+  box-shadow: inset 0 0 0 1px var(--hairline-color);
   padding: 0 2px;
   cursor: pointer;
 }
 
 .removed {
-  opacity: 0.5;
+  /* opacity: 0.5; */
   text-decoration: line-through;
 }

packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx

@@ -1,45 +1,54 @@
-import React, {SyntheticEvent} from 'react'
+import classNames from 'classnames'
+import React from 'react'
 import {PortableTextChild} from '../types'
 import {DiffTooltip, ObjectDiff, useDiffAnnotationColor} from '../../../../diff'
-import styles from './InlineObject.css'
 
-const noop = () => {
-  // Nothing
-}
+import styles from './InlineObject.css'
 
-type Props = {
+interface InlineObjectProps {
   diff?: ObjectDiff
-  blockDiff?: ObjectDiff
   object: PortableTextChild
-  onClick?: (event: SyntheticEvent<HTMLSpanElement>) => void
+  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void
   children?: React.ReactNode
 }
-export default function InlineObject(props: Props): JSX.Element {
-  const children = props.children || props.object._type
-  const {diff, onClick} = props
-  let returned = <span className={styles.root}>{children}</span>
+
+export function InlineObject({children: childrenProp, diff, object, onClick}: InlineObjectProps) {
+  const children = childrenProp || object._type
+
   if (diff) {
-    const color = useDiffAnnotationColor(diff, [])
-    const style = color ? {background: color.background, color: color.text} : {}
-    const classNames = [styles.root, ...[diff.action === 'removed' ? [styles.removed] : []]].join(
-      ' '
-    )
-
-    // Click handler
-    const handleClick = onClick
-      ? (event: SyntheticEvent<HTMLSpanElement>) => {
-          onClick(event)
-        }
-      : noop
-
-    // Wrap in inline object
-    returned = (
-      <span className={classNames} style={style} onClick={handleClick}>
+    return <InlineObjectWithDiff diff={diff} object={object} />
+  }
+
+  return (
+    <span className={styles.root} onClick={onClick}>
+      {children}
+    </span>
+  )
+}
+
+interface InlineObjectWithDiffProps {
+  diff: ObjectDiff
+  object: PortableTextChild
+  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void
+  children?: React.ReactNode
+}
+
+function InlineObjectWithDiff({
+  children: childrenProp,
+  diff,
+  object,
+  onClick
+}: InlineObjectWithDiffProps) {
+  const children = childrenProp || object._type
+  const color = useDiffAnnotationColor(diff, [])
+  const style = color ? {background: color.background, color: color.text} : {}
+  const className = classNames(styles.root, diff.action === 'removed' && styles.removed)
+
+  return (
+    <DiffTooltip diff={diff}>
+      <span className={className} style={style} onClick={onClick}>
         {children}
       </span>
-    )
-    // Wrap in tooltip
-    returned = <DiffTooltip diff={diff}>{returned}</DiffTooltip>
-  }
-  return returned
+    </DiffTooltip>
+  )
 }