[field] Anchor annotation tooltips to individual changes

packages/@sanity/field/src/diff/annotations/DiffAnnotation.tsx

@@ -5,7 +5,7 @@ import {DiffAnnotationTooltip} from './DiffAnnotationTooltip'
 import {getAnnotationAtPath, getAnnotationColor} from './helpers'
 
 export interface AnnotationProps {
-  annotation: Annotation
+  annotation: Annotation | undefined | null
 }
 
 export interface AnnotatedDiffProps {

packages/@sanity/field/src/diff/components/Change.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Path} from '../../paths'
 import {PreviewComponent} from '../../preview/types'
-import {DiffAnnotationTooltip, DiffAnnotationCard} from '../annotations'
+import {DiffAnnotationTooltip, getAnnotationAtPath, useAnnotationColor} from '../annotations'
 import {Diff as DiffType, SchemaType} from '../../types'
 import {ChangeLayout} from './ChangeLayout'
 import styles from './Change.css'
@@ -19,37 +19,51 @@ interface ChangeProps {
 export function Change({
   layout = 'inline',
   diff,
+  path,
   className,
   schemaType,
   previewComponent: PreviewComponent
 }: ChangeProps) {
   const containerClassName = className ? `${styles.root} ${className}` : styles.root
   const {fromValue, toValue, action} = diff
+  const annotation = getAnnotationAtPath(diff, path || [])
+  const color = useAnnotationColor(annotation)
+  const colorStyle = color ? {background: color.background, color: color.text} : {}
 
   if (action === 'unchanged') {
     return <PreviewComponent value={toValue} schemaType={schemaType} />
   }
 
   const from = hasValue(fromValue) ? (
-    <DiffAnnotationCard as="del" className={styles.remove} diff={diff}>
+    <DiffAnnotationTooltip
+      as="del"
+      className={styles.remove}
+      annotation={annotation}
+      style={colorStyle}
+    >
       <PreviewComponent value={fromValue} schemaType={schemaType} />
-    </DiffAnnotationCard>
+    </DiffAnnotationTooltip>
   ) : (
     undefined
   )
 
   const to = hasValue(toValue) ? (
-    <DiffAnnotationCard as="ins" className={styles.add} diff={diff}>
+    <DiffAnnotationTooltip
+      as="ins"
+      className={styles.add}
+      annotation={annotation}
+      style={colorStyle}
+    >
       <PreviewComponent value={toValue} schemaType={schemaType} />
-    </DiffAnnotationCard>
+    </DiffAnnotationTooltip>
   ) : (
     undefined
   )
 
   return (
-    <DiffAnnotationTooltip className={containerClassName} diff={diff}>
+    <div className={containerClassName}>
       <ChangeLayout from={from} to={to} layout={layout} />
-    </DiffAnnotationTooltip>
+    </div>
   )
 }