[field] PT: code quality pass

sanity-io · Oct 6, 2020 · 931f2e3 · 931f2e3
1 parent 49b3a5c
commit 931f2e3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 40 deletions.
diff --git a/packages/@sanity/field/src/types/portableText/diff/PTDiff.css b/packages/@sanity/field/src/types/portableText/diff/PTDiff.css
@@ -4,14 +4,15 @@
 }
 
 .block {
-  /* @nest .added & {
-    border: 1px solid green;
+  /* border: 1px solid #ccc;
+  @nest .added & {
+    border-color: green;
   }
   @nest .changed & {
-    border: 1px solid blue;
+   border-color: blue;
   }
   @nest .removed & {
-    border: 1px solid red;
+    border-color: red;
   } */
 }
 
@@ -20,6 +21,3 @@
   font-size: var(--font-size-xsmall);
   color: var(--text-muted);
 }
-
-.summary li {
-}
diff --git a/packages/@sanity/field/src/types/portableText/diff/PTDiff.tsx b/packages/@sanity/field/src/types/portableText/diff/PTDiff.tsx
@@ -14,16 +14,8 @@ export const PTDiff: DiffComponent<ObjectDiff> = function PTDiff({
   schemaType: ObjectSchemaType
 }) {
   const childMap = useMemo(() => createChildMap(diff, schemaType), [diff])
-  const isRemoved = diff.action === 'removed'
-  const isAdded = diff.action === 'added'
-  const isChanged = diff.action === 'changed'
   const portableText = useMemo(() => <Block diff={diff} childMap={childMap} />, [diff])
-  const classNames = [
-    styles.root,
-    ...[isAdded ? styles.added : []],
-    ...[isRemoved ? styles.removed : []],
-    ...[isChanged ? styles.changed : []]
-  ].join(' ')
+  const classNames = [styles.root, styles[diff.action]].join(' ')
   return (
     <div className={classNames}>
       {/* Diff */}

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx
@@ -1,6 +1,6 @@
 import React, {SyntheticEvent} from 'react'
 import {PortableTextBlock, PortableTextChild, ChildMap} from '../types'
-import {isDecorator, isHeader, childIsSpan, diffDidRemove, MISSING_TYPE_NAME} from '../helpers'
+import {isDecorator, isHeader, childIsSpan, diffDidRemove, UNKNOWN_TYPE_NAME} from '../helpers'
 
 import Annotation from './Annotation'
 import Decorator from './Decorator'
@@ -50,7 +50,7 @@ export default function Block(props: Props): JSX.Element {
 
   const renderChild = (child: PortableTextChild) => {
     const fromMap = childMap[child._key]
-    const diff = fromMap.diffs[0] as ObjectDiff
+    const diff = fromMap.diff as ObjectDiff
     const isSpan = childIsSpan(child)
     // Render span or inline object?
     const renderInlineObject = renderObjectTypes[child._type]
@@ -124,7 +124,7 @@ export default function Block(props: Props): JSX.Element {
         renderObjectTypes[child._type] = renderInlineObject
       } else {
         // This should not happen at this point. But have a fallback for rendering missing types anyway.
-        renderObjectTypes[MISSING_TYPE_NAME] = renderInvalidInlineObjectType
+        renderObjectTypes[UNKNOWN_TYPE_NAME] = renderInvalidInlineObjectType
       }
     })
 

diff --git a/packages/@sanity/field/src/types/portableText/diff/helpers.ts b/packages/@sanity/field/src/types/portableText/diff/helpers.ts
@@ -3,7 +3,7 @@ import {startCase} from 'lodash'
 import {ChildMap, PortableTextBlock, PortableTextChild, SpanTypeSchema} from './types'
 import {SchemaType, ObjectSchemaType} from '../../../types'
 
-export const MISSING_TYPE_NAME = 'MISSING_TYPE'
+export const UNKNOWN_TYPE_NAME = '_UNKOWN_TYPE_'
 
 export function isPTSchemaType(schemaType: SchemaType) {
   return schemaType.jsonType === 'object' && schemaType.name === 'block'
@@ -20,17 +20,15 @@ export function createChildMap(blockDiff: ObjectDiff, schemaType: ObjectSchemaTy
   const childMap: ChildMap = {}
   const children = block.children || []
   children.forEach(child => {
-    // Fallback for renderer
+    let summary: string[] = []
+    // Fallback type for renderer (unkown types)
     if (typeof child !== 'object' || typeof child._type !== 'string') {
-      child._type = MISSING_TYPE_NAME
+      child._type = UNKNOWN_TYPE_NAME
     }
-    const childDiffs = findChildDiffs(blockDiff, child)
-    let summary: React.ReactNode[] = []
     const cSchemaType = getChildSchemaType(schemaType.fields, child)
+    const cDiff = findChildDiff(blockDiff, child)
 
-    // Summarize all diffs to this child
-    // eslint-disable-next-line complexity
-    childDiffs.forEach(cDiff => {
+    if (cDiff) {
       const textDiff = cDiff.fields.text as StringDiff
       if (textDiff && textDiff.isChanged) {
         if (textDiff.action === 'changed') {
@@ -57,14 +55,13 @@ export function createChildMap(blockDiff: ObjectDiff, schemaType: ObjectSchemaTy
       if (isAddInlineObject(cDiff) || isChangeInlineObject(cDiff) || isRemoveInlineObject(cDiff)) {
         summary.push(`${startCase(cDiff.action)} inline object`)
       }
-    })
-
-    if (childDiffs.length !== 0 && summary.length === 0) {
-      summary.push(`Uknown diff: ${JSON.stringify(childDiffs, null, 2)}`)
+    }
+    if (cDiff && summary.length === 0) {
+      summary.push(`Unkown diff ${JSON.stringify(cDiff)}`)
     }
 
     childMap[child._key] = {
-      diffs: childDiffs,
+      diff: cDiff,
       child,
       schemaType: cSchemaType,
       summary
@@ -73,14 +70,14 @@ export function createChildMap(blockDiff: ObjectDiff, schemaType: ObjectSchemaTy
   return childMap
 }
 
-export function findChildDiffs(diff: ObjectDiff, child: PortableTextChild): ObjectDiff[] {
+export function findChildDiff(diff: ObjectDiff, child: PortableTextChild): ObjectDiff {
   const childrenDiff = diff.fields.children as ArrayDiff
   return childrenDiff.items
     .filter(
       item => item.diff.isChanged && (item.diff.toValue === child || item.diff.fromValue === child)
     )
     .map(item => item.diff)
-    .map(childDiff => childDiff as ObjectDiff)
+    .map(childDiff => childDiff as ObjectDiff)[0]
 }
 
 function isAddInlineObject(cDiff: ObjectDiff) {
@@ -124,7 +121,7 @@ function isAddMark(cDiff: ObjectDiff, cSchemaType?: SchemaType) {
     Array.isArray(cDiff.fields.marks.toValue) &&
     cDiff.fields.marks.toValue.length > 0 &&
     cSchemaType.jsonType === 'object' &&
-    cDiff.fields.marks.toValue.every(
+    cDiff.fields.marks.toValue.some(
       mark => typeof mark === 'string' && cSchemaType && isDecorator(mark, cSchemaType)
     )
   )

diff --git a/packages/@sanity/field/src/types/portableText/diff/types.ts b/packages/@sanity/field/src/types/portableText/diff/types.ts
@@ -1,5 +1,4 @@
 import {ArrayDiff, ObjectDiff} from '../../../diff'
-import {ReactNode} from 'react'
 import {SchemaType} from '../../../types'
 
 export type PortableTextBlock = {
@@ -17,14 +16,14 @@ export type PortableTextChild = {
   text?: string
 }
 
+export type SpanTypeSchema = SchemaType & {decorators?: {title: string; value: string}[]}
+
 export type ChildMap = Record<
   string,
   {
     child: PortableTextChild
-    diffs: ObjectDiff[] | ArrayDiff[]
-    summary: ReactNode[]
+    diff: ObjectDiff | ArrayDiff
+    summary: string[]
     schemaType?: SchemaType // May be removed from the PT schema (but data remains referring to removed types)
   }
 >
-
-export type SpanTypeSchema = SchemaType & {decorators?: {title: string; value: string}[]}