[field] PT: mode DiffCard for text to Text component

sanity-io · Oct 6, 2020 · 4583898 · 4583898
1 parent f61a694
commit 4583898
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 38 deletions.
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/PortableText.tsx b/packages/@sanity/field/src/types/portableText/diff/components/PortableText.tsx
@@ -144,6 +144,8 @@ export default function PortableText(props: Props): JSX.Element {
               cld => cld.text && cld.text.match(escapeRegExp(seg.text))
             ) as PortableTextChild
           const child = block.children[childToIndex] || getChildFromFromValue()
+          const childDiff = child && findSpanDiffFromChild(diff.origin, child)
+
           if (!child) {
             throw new Error('Could not find child')
           }
@@ -185,11 +187,17 @@ export default function PortableText(props: Props): JSX.Element {
           }
           annotationSegments = []
           if (!isAnnotation) {
+            const textDiff = childDiff?.fields?.text
+              ? (childDiff?.fields?.text as StringDiff)
+              : undefined
             // Render text segment
             returnedChildren.push(
               <Text
+                diff={textDiff}
+                child={child}
                 key={`text-${child._key}-${segIndex}`}
                 path={[{_key: block._key}, 'children', {_key: child._key}]}
+                segment={seg}
               >
                 {renderTextSegment({
                   diff: diff,
@@ -242,38 +250,6 @@ function renderTextSegment({
     </span>
   )
   const spanDiff = child && findSpanDiffFromChild(diff.origin, child)
-  const textDiff = spanDiff?.fields?.text ? (spanDiff?.fields?.text as StringDiff) : undefined
-  let hasChangedText = false
-  if (seg.action !== 'unchanged') {
-    if (textDiff && textDiff.action !== 'unchanged') {
-      hasChangedText = true
-      children = (
-        <DiffCard
-          annotation={textDiff.annotation}
-          as={seg.action === 'removed' ? 'del' : 'ins'}
-          key={`diffcard-${child._key}-${segIndex}`}
-          tooltip={{description: `${startCase(seg.action)} text`}}
-        >
-          {children}
-        </DiffCard>
-      )
-    } else {
-      children = (
-        <DiffCard
-          annotation={
-            (diff.origin && diff.origin.action !== 'unchanged' && diff.origin.annotation) ||
-            undefined
-          }
-          as={seg.action === 'removed' ? 'del' : 'ins'}
-          key={`diffcard-${child._key}-${segIndex}`}
-          tooltip={{description: `${startCase(seg.action)} text`}}
-        >
-          {children}
-        </DiffCard>
-      )
-    }
-  }
-
   const hasChangedMarkDefs = renderMarkDefs({
     child,
     diff,
@@ -286,8 +262,7 @@ function renderTextSegment({
   }
   // Render mark diff info
   const activeMarks = child.marks || []
-  const hasOtherChanges = hasChangedMarkDefs || hasChangedText
-  if (!hasOtherChanges && spanDiff) {
+  if (!hasChangedMarkDefs && spanDiff) {
     children = renderMarks({
       activeMarks,
       decoratorTypes,

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Text.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Text.tsx
@@ -1,21 +1,27 @@
 import classNames from 'classnames'
-import {startCase} from 'lodash'
 import {isKeySegment, Path} from '@sanity/types'
 import React, {useCallback} from 'react'
 import {ConnectorContext} from '@sanity/base/lib/change-indicators'
-import {DiffContext} from '../../../../diff'
-import {SpanTypeSchema} from '../types'
+import {startCase} from 'lodash'
+import {DiffCard, DiffContext, StringDiff, StringDiffSegment} from '../../../../diff'
+import {PortableTextChild, SpanTypeSchema} from '../types'
 import styles from './Text.css'
 
 interface TextProps {
+  diff?: StringDiff
+  child: PortableTextChild
   children: JSX.Element
   path: Path
   schemaType?: SpanTypeSchema
+  segment: StringDiffSegment
 }
 
 export function Text({
+  diff,
+  child,
   children,
   path,
+  segment,
   ...restProps
 }: TextProps & Omit<React.HTMLProps<HTMLSpanElement>, 'onClick'>) {
   const {onSetFocus} = React.useContext(ConnectorContext)
@@ -30,12 +36,23 @@ export function Text({
   )
   const focusPath = prefix.concat(path)
 
+  const diffCard =
+    diff && diff.action !== 'unchanged' && segment.action !== 'unchanged' ? (
+      <DiffCard
+        annotation={diff.annotation}
+        as={segment.action === 'removed' ? 'del' : 'ins'}
+        tooltip={{description: `${startCase(segment.action)} text`}}
+      >
+        {children}
+      </DiffCard>
+    ) : null
+
   const handleClick = useCallback(() => {
     onSetFocus(focusPath)
   }, [focusPath])
   return (
     <span {...restProps} className={className} onClick={handleClick}>
-      <span className={styles.previewContainer}>{children}</span>
+      <span className={styles.previewContainer}>{diffCard ? diffCard : children}</span>
     </span>
   )
 }