[field] Expose annotated tooltip components, refactor diff components

packages/@sanity/desk-tool/src/diffs/array/arrayFieldDiff.tsx

@@ -4,11 +4,12 @@ import {
   DiffComponent as SanityDiffComponent,
   ArrayDiff,
   ItemDiff,
-  SchemaType
+  SchemaType,
+  getAnnotationColor
 } from '@sanity/field/diff'
 import {FallbackDiff} from '../_fallback/FallbackDiff'
 import {resolveDiffComponent} from '../resolveDiffComponent'
-import {getAnnotationColor, getObjectKey} from '../helpers'
+import {getObjectKey} from '../helpers'
 import {isPTSchemaType, PTDiff} from '../portableText'
 
 import styles from './arrayFieldDiff.css'

packages/@sanity/desk-tool/src/diffs/boolean/BooleanFieldDiff.tsx

@@ -1,28 +1,19 @@
-import {useUserColorManager} from '@sanity/base/user-color'
 import React from 'react'
-import {DiffComponent, BooleanDiff} from '@sanity/field/diff'
-import {AnnotationTooltip} from '../annotationTooltip'
-import {getAnnotationColor} from '../helpers'
-
+import {DiffComponent, BooleanDiff, DiffAnnotation} from '@sanity/field/diff'
 import styles from './BooleanFieldDiff.css'
 
 export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff}) => {
-  const userColorManager = useUserColorManager()
   const {fromValue, toValue} = diff
-  const annotation = diff.isChanged ? diff.annotation : null
-  const color = getAnnotationColor(userColorManager, annotation)
 
   return (
-    <AnnotationTooltip annotation={annotation}>
-      <div className={styles.root} style={{background: color.background, color: color.text}}>
-        {fromValue !== undefined && fromValue !== null && (
-          <input type="checkbox" checked={fromValue} readOnly />
-        )}
-        {diff.action === 'changed' && <span>&rarr;</span>}
-        {toValue !== undefined && toValue !== null && (
-          <input type="checkbox" checked={toValue} readOnly />
-        )}
-      </div>
-    </AnnotationTooltip>
+    <DiffAnnotation as="div" className={styles.root} diff={diff}>
+      {fromValue !== undefined && fromValue !== null && (
+        <input type="checkbox" checked={fromValue} readOnly />
+      )}
+      {diff.action === 'changed' && <span>&rarr;</span>}
+      {toValue !== undefined && toValue !== null && (
+        <input type="checkbox" checked={toValue} readOnly />
+      )}
+    </DiffAnnotation>
   )
 }

packages/@sanity/desk-tool/src/diffs/helpers.ts

@@ -1,23 +1,5 @@
-import {UserColorManager, UserColor} from '@sanity/base/user-color'
-import {Annotation} from '@sanity/field/diff'
 import {TypedObject, KeyedObject} from '../panes/documentPane/changesPanel/types'
 
-export function getAnnotationColor(
-  colorManager: UserColorManager,
-  annotation: Annotation
-): UserColor {
-  if (!annotation) {
-    return {
-      background: '#fcc',
-      text: '#f00',
-      // @todo CHANGE BEFORE RELEASING - USING RED TO INDICATE MISSING ANNOTATION
-      border: 'red'
-    }
-  }
-
-  return colorManager.get(annotation.author)
-}
-
 export function getObjectKey(obj: unknown, fallback: string | number) {
   if (isKeyedObject(obj)) {
     return obj._key || fallback

packages/@sanity/desk-tool/src/diffs/image/ImageFieldDiff.tsx

@@ -1,17 +1,6 @@
 import * as React from 'react'
-import {useUserColorManager} from '@sanity/base/user-color'
-import {
-  Annotation,
-  DiffComponent,
-  ObjectDiff,
-  ReferenceDiff,
-  StringDiff,
-  StringSegmentChanged
-} from '@sanity/field/diff'
+import {DiffComponent, ObjectDiff, DiffAnnotation} from '@sanity/field/diff'
 import Preview from 'part:@sanity/base/preview?'
-import {AnnotationTooltip} from '../annotationTooltip'
-import {getAnnotationColor} from '../helpers'
-
 import styles from './ImageFieldDiff.css'
 
 interface Image {
@@ -47,15 +36,12 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
     )
   }
 
-  const userColorManager = useUserColorManager()
   const {fromValue, toValue} = diff
   const prev = fromValue?.asset?._ref
   const next = toValue?.asset?._ref
-  const annotation = getRefFieldAnnotation(diff)
-  const color = getAnnotationColor(userColorManager, annotation)
 
-  const content = (
-    <div className={styles.root} style={{background: color.background, color: color.text}}>
+  return (
+    <DiffAnnotation as="div" className={styles.root} diff={diff} path="asset._ref">
       {prev && (
         <div className={styles.removed}>
           <Preview type={schemaType} value={fromValue} layout="card" />
@@ -65,39 +51,6 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
       {prev && <div>⇩</div>}
 
       {next && <Preview type={schemaType} value={toValue} layout="card" />}
-    </div>
-  )
-
-  return annotation ? (
-    <AnnotationTooltip annotation={annotation}>{content}</AnnotationTooltip>
-  ) : (
-    content
-  )
-}
-
-function getStringFieldAnnotation(diff: StringDiff): Annotation | null {
-  const changed = diff.segments.find(
-    (segment): segment is StringSegmentChanged =>
-      (segment.type === 'added' || segment.type === 'removed') && Boolean(segment.annotation)
+    </DiffAnnotation>
   )
-
-  return changed ? changed.annotation : null
-}
-
-function getRefFieldAnnotation(diff: ObjectDiff<Image>): Annotation | null {
-  const assetFieldDiff = diff.fields.asset as ReferenceDiff
-  if (!assetFieldDiff || assetFieldDiff.action === 'unchanged') {
-    return null
-  }
-
-  if (assetFieldDiff.type !== 'object') {
-    return null
-  }
-
-  const refField = assetFieldDiff.fields._ref
-  if (!refField || refField.type !== 'string') {
-    return null
-  }
-
-  return getStringFieldAnnotation(refField)
 }

packages/@sanity/desk-tool/src/diffs/number/NumberFieldDiff.tsx

@@ -1,33 +1,20 @@
 import React from 'react'
-import {useUserColorManager} from '@sanity/base/user-color'
-import {DiffComponent, NumberDiff} from '@sanity/field/diff'
-import {AnnotationTooltip} from '../annotationTooltip'
-import {getAnnotationColor} from '../helpers'
+import {DiffComponent, NumberDiff, DiffAnnotation} from '@sanity/field/diff'
 
 import styles from './NumberFieldDiff.css'
 
 export const NumberFieldDiff: DiffComponent<NumberDiff> = ({diff}) => {
-  const userColorManager = useUserColorManager()
   const {fromValue, toValue} = diff
-  const annotation = diff.isChanged ? diff.annotation : null
-  const color = getAnnotationColor(userColorManager, annotation)
-
-  const inlineStyle = {
-    background: color.background,
-    color: color.text
-  }
 
   return (
-    <AnnotationTooltip annotation={annotation}>
-      <div className={styles.root}>
-        {fromValue !== undefined && (
-          <>
-            <del style={inlineStyle}>{fromValue}</del>
-            <span>&rarr;</span>
-          </>
-        )}
-        <ins style={inlineStyle}>{toValue}</ins>
-      </div>
-    </AnnotationTooltip>
+    <DiffAnnotation as="div" className={styles.root} diff={diff}>
+      {fromValue !== undefined && (
+        <>
+          <del>{fromValue}</del>
+          <span>&rarr;</span>
+        </>
+      )}
+      <ins>{toValue}</ins>
+    </DiffAnnotation>
   )
 }

packages/@sanity/desk-tool/src/diffs/reference/ReferenceFieldDiff.tsx

@@ -1,30 +1,15 @@
 import * as React from 'react'
-import {useUserColorManager} from '@sanity/base/user-color'
 import Preview from 'part:@sanity/base/preview?'
-import {
-  Annotation,
-  DiffComponent,
-  ReferenceDiff,
-  StringDiff,
-  StringSegmentChanged,
-  StringDiffSegment
-} from '@sanity/field/diff'
-import {AnnotationTooltip} from '../annotationTooltip'
-import {getAnnotationColor} from '../helpers'
-
+import {DiffComponent, ReferenceDiff, DiffAnnotation} from '@sanity/field/diff'
 import styles from './ReferenceFieldDiff.css'
 
 export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
-  const userColorManager = useUserColorManager()
   const {fromValue, toValue} = diff
   const prev = fromValue && fromValue._ref
   const next = toValue && toValue._ref
-  const annotation = getAnnotation(diff)
-
-  const color = getAnnotationColor(userColorManager, annotation)
 
-  const content = (
-    <div className={styles.root} style={{background: color.background, color: color.text}}>
+  return (
+    <DiffAnnotation as="div" className={styles.root} diff={diff} path="_ref">
       {prev && (
         <div className={styles.removed}>
           <Preview type={schemaType} value={fromValue} layout="default" />
@@ -34,35 +19,6 @@ export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaTy
       {prev && <div>⇩</div>}
 
       {next && <Preview type={schemaType} value={toValue} layout="default" />}
-    </div>
-  )
-
-  return annotation ? (
-    <AnnotationTooltip annotation={annotation}>{content}</AnnotationTooltip>
-  ) : (
-    content
+    </DiffAnnotation>
   )
 }
-
-function getAnnotation(diff: ReferenceDiff): Annotation {
-  const refChange = diff.fields._ref
-  if (refChange && refChange.type === 'string') {
-    return getStringFieldAnnotation(refChange)
-  }
-
-  // Fall back to other fields if _ref field was not changed (eg, weak was changed)
-  const modified = Object.values(diff.fields).find(
-    fieldDiff => fieldDiff.action !== 'unchanged' && fieldDiff.type === 'string'
-  )
-
-  return modified ? getStringFieldAnnotation(modified as StringDiff) : null
-}
-
-function isStringChangedSegment(segment: StringDiffSegment): segment is StringSegmentChanged {
-  return segment.type === 'added' || segment.type === 'unchanged'
-}
-
-function getStringFieldAnnotation(diff: StringDiff): Annotation | null {
-  const changed = diff.segments.find(isStringChangedSegment)
-  return changed ? changed.annotation : null
-}

packages/@sanity/desk-tool/src/diffs/string/StringFieldDiff.css

@@ -6,20 +6,3 @@
   border-radius: 4px;
   white-space: pre-line;
 }
-
-.segment {
-  position: relative;
-  /* white-space: pre-wrap; */
-}
-
-.add {
-  composes: segment;
-  text-decoration: none;
-  mix-blend-mode: multiply;
-}
-
-.remove {
-  composes: segment;
-  text-decoration: line-through;
-  mix-blend-mode: multiply;
-}