[field] PT: Make annotation text segments group within Annotation com…

…ponent
sanity-io · Oct 6, 2020 · 76bbda3 · 76bbda3
1 parent 45cbd4f
commit 76bbda3
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Annotation.css b/packages/@sanity/field/src/types/portableText/diff/components/Annotation.css
@@ -7,6 +7,8 @@
   border: 0;
   padding: 0;
   border-bottom: 2px dotted color(var(--text-color) a(100%));
+
+  box-shadow: inset 0 0 0 1px var(--hairline-color);
   cursor: pointer;
   white-space: nowrap;
   align-items: center;
@@ -19,15 +21,23 @@
   cursor: pointer;
 }
 
-div > .root:last-of-type .previewContainer,
-div > .root:first-of-type .previewContainer {
-  padding-right: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' fill='none' stroke='%23000' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' width='1em' height='1em' stroke-opacity='0.5'%0A%3E%3Cpath d='M17 10L12.5 15.5L8 10' /%3E%3C/svg%3E");
-  background-position: right center;
-  background-repeat: no-repeat;
-}
-
 .popoverContent {
   min-width: 160px;
   padding: calc(var(--medium-padding) - var(--extra-small-padding));
 }
+
+.previewContainer {
+  padding-left: var(--extra-small-padding);
+  display: inline-flex;
+  @nest & > svg {
+    display: block;
+    font-size: 17px;
+    line-height: var(--line-height-base);
+    margin: 2px 0 -2px 2px;
+    opacity: 0.5;
+
+    @nest .root:hover & {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx b/packages/@sanity/field/src/types/portableText/diff/components/Annotation.tsx
@@ -83,6 +83,7 @@ function AnnnotationWithDiff({
           <Popover content={popoverContent} open={open}>
             <span className={styles.previewContainer}>
               <span>{children}</span>
+              <ChevronDownIcon />
             </span>
           </Popover>
         </span>

diff --git a/packages/@sanity/field/src/types/portableText/diff/components/PortableText.tsx b/packages/@sanity/field/src/types/portableText/diff/components/PortableText.tsx
@@ -53,7 +53,7 @@ export default function PortableText(props: Props): JSX.Element {
     : []
 
   const renderChild = (child: PortableTextChild) => {
-    const spanSchemaType = getChildSchemaType(schemaType.fields, child)
+    const spanSchemaType = getChildSchemaType(schemaType.fields, child) as SpanTypeSchema
     let decoratorTypes: {title: string; value: string}[] = []
     if (spanSchemaType) {
       decoratorTypes = getDecorators(spanSchemaType)
@@ -65,6 +65,7 @@ export default function PortableText(props: Props): JSX.Element {
           childrenDiff.items[0].diff.fields.text.segments) ||
         []
       const returnedChildren: React.ReactNode[] = []
+      let annotationSegments: React.ReactNode[] = []
 
       // Special case for new empty PT-block (single span child with empty text)
       if (isEmptyTextChange(block, diff)) {
@@ -85,6 +86,8 @@ export default function PortableText(props: Props): JSX.Element {
       }
       // Run through all the segments from the PortableTextDiff
       let childIndex = -1
+      let currentAnnotation: {mark: string; object: PortableTextChild} | undefined
+      let isAnnotation = false
       segments.forEach(seg => {
         const isInline = TextSymbols.INLINE_SYMBOLS.includes(seg.text)
         const isMarkStart = allSymbolsStart.includes(seg.text)
@@ -97,6 +100,20 @@ export default function PortableText(props: Props): JSX.Element {
           }
           // No output
         } else if (isMarkStart || isMarkEnd) {
+          if (isMarkStart && annotationSymbolsStart.includes(seg.text)) {
+            isAnnotation = true
+            const object =
+              block.markDefs && block.markDefs[annotationSymbolsStart.indexOf(seg.text)]
+            if (object) {
+              currentAnnotation = {
+                mark: object._key,
+                object
+              }
+            }
+          }
+          if (isMarkEnd && annotationSymbolsEnd.includes(seg.text)) {
+            isAnnotation = false
+          }
           // No output
         } else if (isInline) {
           // Render inline object
@@ -119,17 +136,53 @@ export default function PortableText(props: Props): JSX.Element {
           }
         } else if (seg.text) {
           // Render text
-          returnedChildren.push(
-            <>
-              {renderTextSegment({
+          if (isAnnotation) {
+            annotationSegments.push(
+              renderTextSegment({
                 diff: diff,
                 child: block.children[childIndex],
                 decoratorTypes,
                 seg,
                 spanSchemaType
-              })}
-            </>
-          )
+              })
+            )
+          } else {
+            // Render collected texts inside an annotation
+            if (annotationSegments.length > 0 && currentAnnotation) {
+              const annotationDiff = findAnnotationDiff(diff.origin, currentAnnotation.mark)
+              const objectSchemaType =
+                currentAnnotation &&
+                spanSchemaType.annotations &&
+                spanSchemaType.annotations.find(
+                  type =>
+                    currentAnnotation &&
+                    currentAnnotation.object &&
+                    type.name === currentAnnotation.object._type
+                )
+              returnedChildren.push(
+                <Annotation
+                  object={currentAnnotation.object}
+                  diff={annotationDiff}
+                  schemaType={objectSchemaType}
+                >
+                  <>{annotationSegments}</>
+                </Annotation>
+              )
+            }
+            annotationSegments = []
+            // Render text segment
+            returnedChildren.push(
+              <>
+                {renderTextSegment({
+                  diff: diff,
+                  child: block.children[childIndex],
+                  decoratorTypes,
+                  seg,
+                  spanSchemaType
+                })}
+              </>
+            )
+          }
         }
       })
       return React.createElement('div', {key: block._key}, ...returnedChildren)
@@ -219,26 +272,6 @@ function renderTextSegment({
     activeMarks.forEach(mark => {
       if (isDecorator(mark, spanSchemaType)) {
         children = <Decorator mark={mark}>{children}</Decorator>
-      } else {
-        const annotationDiff = findAnnotationDiff(diff.origin, mark)
-        const annotationObject =
-          annotationDiff &&
-          ((annotationDiff.toValue || annotationDiff.fromValue) as PortableTextChild)
-        const objectSchemaType =
-          annotationObject &&
-          spanSchemaType.annotations &&
-          spanSchemaType.annotations.find(type => type.name === annotationObject._type)
-        if (annotationObject) {
-          children = (
-            <Annotation
-              object={annotationObject}
-              diff={annotationDiff}
-              schemaType={objectSchemaType}
-            >
-              {children}
-            </Annotation>
-          )
-        }
       }
     })
   }