[field] Add popover with diffs for InlineObject

sanity-io · Oct 6, 2020 · d3173e5 · d3173e5
1 parent a326a24
commit d3173e5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 12 deletions.
diff --git a/packages/@sanity/field/src/@types/parts.d.ts b/packages/@sanity/field/src/@types/parts.d.ts
@@ -49,6 +49,10 @@ declare module 'part:@sanity/base/arrow-right' {
   export default ArrowRightIcon
 }
 
+declare module 'part:@sanity/base/chevron-down-icon' {
+  export {default} from '@sanity/base/src/components/icons/ChevronDown'
+}
+
 declare module 'part:@sanity/base/close-icon' {
   export {default} from '@sanity/base/src/components/icons/CloseIcon'
 }

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Block.tsx
@@ -178,7 +178,7 @@ export default function Block(props: Props): JSX.Element {
         key={`inline-object-${cProps.child._key}`}
         object={cProps.child}
         diff={cProps.diff}
-        onClick={handleObjectFocus}
+        // onClick={handleObjectFocus}
         schemaType={inlineObjectSchemaType}
       />
     )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Experimental.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Experimental.tsx
@@ -279,7 +279,7 @@ export default function Experimental(props: Props): JSX.Element {
         key={`inline-object-${cProps.child._key}`}
         object={cProps.child}
         diff={cProps.diff}
-        onClick={handleObjectFocus}
+        // onClick={handleObjectFocus}
         schemaType={inlineObjectSchemaType}
       />
     )

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.css b/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.css
@@ -5,9 +5,41 @@
   box-shadow: inset 0 0 0 1px var(--hairline-color);
   padding: 0 2px;
   cursor: pointer;
+  white-space: nowrap;
+  align-items: center;
 }
 
 .removed {
-  /* opacity: 0.5; */
   text-decoration: line-through;
 }
+
+.popoverContent {
+  padding: calc(var(--medium-padding) - var(--extra-small-padding));
+}
+
+.previewContainer {
+  display: inline-flex;
+  vertical-align: top;
+  max-width: 80px;
+  margin: 0;
+  padding: 0 0 3px;
+
+  @nest & > span:first-child {
+    display: block;
+    flex: 1;
+    min-width: 0;
+    margin: 2px 0 -2px;
+  }
+
+  @nest & > svg {
+    display: block;
+    font-size: 17px;
+    line-height: 17px;
+    margin: 2px -2px -2px 2px;
+    opacity: 0.5;
+
+    @nest .root:hover & {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx b/packages/@sanity/field/src/types/portableText/diff/components/InlineObject.tsx
@@ -1,7 +1,10 @@
 import classNames from 'classnames'
+import ChevronDownIcon from 'part:@sanity/base/chevron-down-icon'
 import SanityPreview from 'part:@sanity/base/preview'
-import React from 'react'
-import {DiffTooltip, ObjectDiff, ObjectSchemaType, useDiffAnnotationColor} from '../../../../diff'
+import {ClickOutside} from 'part:@sanity/components/click-outside'
+import {Popover} from 'part:@sanity/components/popover'
+import React, {useCallback, useState} from 'react'
+import {ChangeList, ObjectDiff, ObjectSchemaType, useDiffAnnotationColor} from '../../../../diff'
 import {PortableTextChild} from '../types'
 
 import styles from './InlineObject.css'
@@ -17,7 +20,7 @@ export function InlineObject({
   object,
   schemaType,
   ...restProps
-}: InlineObjectProps & React.HTMLProps<HTMLSpanElement>) {
+}: InlineObjectProps & Omit<React.HTMLProps<HTMLSpanElement>, 'onClick'>) {
   if (!schemaType) {
     return (
       <span {...restProps} className={styles.root}>
@@ -50,16 +53,38 @@ function InlineObjectWithDiff({
   object,
   schemaType,
   ...restProps
-}: InlineObjectWithDiffProps & React.HTMLProps<HTMLSpanElement>) {
+}: InlineObjectWithDiffProps & Omit<React.HTMLProps<HTMLSpanElement>, 'onClick'>) {
   const color = useDiffAnnotationColor(diff, [])
   const style = color ? {background: color.background, color: color.text} : {}
   const className = classNames(styles.root, diff.action === 'removed' && styles.removed)
+  const [open, setOpen] = useState(false)
+
+  const handleClick = useCallback(() => {
+    setOpen(true)
+  }, [])
+
+  const popoverContent = (
+    <div className={styles.popoverContent}>
+      <ChangeList diff={diff} schemaType={schemaType} />
+    </div>
+  )
+
+  const handleClickOutside = useCallback(() => {
+    setOpen(false)
+  }, [])
 
   return (
-    <DiffTooltip diff={diff}>
-      <span {...restProps} className={className} style={style}>
-        <SanityPreview type={schemaType} value={object} layout="inline" />
-      </span>
-    </DiffTooltip>
+    <ClickOutside onClickOutside={handleClickOutside}>
+      {ref => (
+        <span {...restProps} className={className} onClick={handleClick} ref={ref} style={style}>
+          <Popover content={popoverContent} open={open}>
+            <span className={styles.previewContainer}>
+              <SanityPreview type={schemaType} value={object} layout="inline" />
+              <ChevronDownIcon />
+            </span>
+          </Popover>
+        </span>
+      )}
+    </ClickOutside>
   )
 }