[form-builder] PTE: Fix issues with popover editing and change indica…

…tors ref-elements
sanity-io · Oct 6, 2020 · 4c09332 · 4c09332
1 parent aebc7af
commit 4c09332
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 58 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/BlockExtras.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/BlockExtras.tsx
@@ -3,7 +3,7 @@ import {isEqual} from 'lodash'
 import classNames from 'classnames'
 import {ChangeIndicatorWithProvidedFullPath} from '@sanity/base/lib/change-indicators'
 import Markers from 'part:@sanity/form-builder/input/block-editor/block-markers'
-import {Marker, Path} from '@sanity/types'
+import {isKeySegment, Marker, Path} from '@sanity/types'
 import {
   PortableTextBlock,
   PortableTextEditor,
@@ -29,6 +29,7 @@ export default function BlockExtras(props: Props) {
   const warnings = blockValidation.filter(mrkr => mrkr.level === 'warning')
   const selection = PortableTextEditor.getSelection(editor)
   const hasFocus = !!selection && isEqual(selection.focus.path[0], {_key: block._key})
+  const empty = markers.length === 0 && !blockActions
   const content = (
     <div className={styles.content} style={{height: `${height}px`}}>
       {markers.length > 0 && (
@@ -43,20 +44,24 @@ export default function BlockExtras(props: Props) {
         </div>
       )}
       {blockActions && <div className={styles.blockActions}>{blockActions}</div>}
+      {/* Make sure it gets proper height (has content). Insert an zero-width-space if empty */}
+      {empty && <>&#8203;</>}
     </div>
   )
-  const returned = isFullscreen ? (
-    <ChangeIndicatorWithProvidedFullPath
-      compareDeep
-      value={block}
-      hasFocus={hasFocus}
-      path={[{_key: block._key}]}
-    >
-      {content}
-    </ChangeIndicatorWithProvidedFullPath>
-  ) : (
-    content
-  )
+  const path = PortableTextEditor.getSelection(editor)?.focus.path
+  const returned =
+    isFullscreen && path && isKeySegment(path[0]) ? (
+      <ChangeIndicatorWithProvidedFullPath
+        compareDeep
+        value={block}
+        hasFocus={path && hasFocus ? path[0]._key === block._key : false}
+        path={[{_key: block._key}]}
+      >
+        {content}
+      </ChangeIndicatorWithProvidedFullPath>
+    ) : (
+      content
+    )
   return (
     <div
       className={classNames([

diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/BlockExtrasOverlay.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/BlockExtrasOverlay.tsx
@@ -73,12 +73,13 @@ function BlockExtrasWithBlockActionsAndHeight(
     renderCustomMarkers,
     value
   } = props
+  const editor = usePortableTextEditor()
   const blockMarkers = findBlockMarkers(block, markers)
-  const element = document.querySelectorAll(`[data-pte-key="${block._key}"]`)[0] as HTMLElement
-  const rect = useMemo(() => element && element.getBoundingClientRect(), [element])
+  const element = PortableTextEditor.findDOMNode(editor, block) as HTMLElement
   if (!element) {
     return null
   }
+  const rect = element.getBoundingClientRect()
   let actions = null
   if (renderBlockActions) {
     const RenderComponent = renderBlockActions

diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/Input.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/Input.tsx
@@ -3,7 +3,6 @@ import classNames from 'classnames'
 import {Subject} from 'rxjs'
 import React, {useEffect, useState, useMemo} from 'react'
 import {FormFieldPresence} from '@sanity/base/presence'
-import {ChangeIndicatorWithProvidedFullPath} from '@sanity/base/lib/change-indicators'
 import {
   getPortableTextFeatures,
   OnCopyFn,
@@ -236,30 +235,28 @@ export default function PortableTextInput(props: Props) {
         />
       )
     }
-    return <div data-pte-key={block._key}>{returned}</div>
+    return returned
   }
 
   function renderChild(child, childType, attributes, defaultRender) {
     const isSpan = child._type === ptFeatures.types.span.name
     if (isSpan) {
-      return <span data-pte-key={child._key}>{defaultRender(child)}</span>
+      return defaultRender(child)
     }
     // eslint-disable-next-line react/prop-types
     const inlineMarkers = markers.filter(
       marker => isKeySegment(marker.path[2]) && marker.path[2]._key === child._key
     )
     return (
-      <span data-pte-key={child._key}>
-        <InlineObject
-          attributes={attributes}
-          markers={inlineMarkers}
-          onChange={handleFormBuilderEditObjectChange}
-          onFocus={onFocus}
-          readOnly={readOnly}
-          type={childType}
-          value={child}
-        />
-      </span>
+      <InlineObject
+        attributes={attributes}
+        markers={inlineMarkers}
+        onChange={handleFormBuilderEditObjectChange}
+        onFocus={onFocus}
+        readOnly={readOnly}
+        type={childType}
+        value={child}
+      />
     )
   }
 
@@ -278,7 +275,7 @@ export default function PortableTextInput(props: Props) {
         type={annotationType}
         value={annotation}
       >
-        <span data-pte-key={annotation._key}>{defaultRender()}</span>
+        {defaultRender()}
       </Annotation>
     )
   }
@@ -364,14 +361,7 @@ export default function PortableTextInput(props: Props) {
           onActivate={handleActivate}
           overlayClassName={styles.activateOnFocusOverlay}
         >
-          <ChangeIndicatorWithProvidedFullPath
-            compareDeep
-            value={value}
-            hasFocus={hasFocus}
-            path={[]}
-          >
-            {ptEditor}
-          </ChangeIndicatorWithProvidedFullPath>
+          {ptEditor}
         </ActivateOnFocus>
       )}
     </div>

diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/Objects/BlockObject.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/Objects/BlockObject.tsx
@@ -78,7 +78,7 @@ export const BlockObject: FunctionComponent<Props> = ({
     )
   }, [value, readOnly])
   return (
-    <div className={classnames} onDoubleClick={handleClickToOpen} data-pte-key={value._key}>
+    <div className={classnames} onDoubleClick={handleClickToOpen}>
       <div className={styles.previewContainer} style={readOnly ? {cursor: 'default'} : {}}>
         {blockPreview}
       </div>

diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/Objects/InlineObject.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/Objects/InlineObject.tsx
@@ -46,7 +46,7 @@ export const InlineObject: FunctionComponent<Props> = ({
   const isEmpty = !value || isEqual(Object.keys(value), ['_key', '_type'])
 
   return (
-    <span className={classnames} onClick={handleOpen} data-pte-key={value._key}>
+    <span className={classnames} onClick={handleOpen}>
       <span
         className={styles.previewContainer}
         style={readOnly ? {cursor: 'default'} : {}} // TODO: Probably move to styles aka. className?

diff --git a/...s/@sanity/form-builder/src/inputs/PortableText/Objects/renderers/PopoverObjectEditing.tsx b/...s/@sanity/form-builder/src/inputs/PortableText/Objects/renderers/PopoverObjectEditing.tsx
@@ -3,7 +3,13 @@ import React, {FunctionComponent} from 'react'
 
 import Popover from 'part:@sanity/components/dialogs/popover'
 
-import {PortableTextBlock, PortableTextChild, Type} from '@sanity/portable-text-editor'
+import {
+  PortableTextBlock,
+  PortableTextChild,
+  PortableTextEditor,
+  Type,
+  usePortableTextEditor
+} from '@sanity/portable-text-editor'
 import {FormFieldPresence, PresenceOverlay} from '@sanity/base/presence'
 import {Path, Marker, SchemaType} from '@sanity/types'
 import {FormBuilderInput} from '../../../../FormBuilderInput'
@@ -36,8 +42,9 @@ export const PopoverObjectEditing: FunctionComponent<Props> = ({
   readOnly,
   type
 }) => {
+  const editor = usePortableTextEditor()
   const handleChange = (patchEvent: PatchEvent): void => onChange(patchEvent, path)
-  const refElement = document.querySelectorAll(`[data-pte-key="${object._key}"]`)[0] as HTMLElement
+  const refElement = PortableTextEditor.findDOMNode(editor, object) as HTMLElement
   return (
     <Popover
       placement="bottom"

diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/PortableTextInput.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/PortableTextInput.tsx
@@ -177,25 +177,11 @@ const PortableTextInputWithRef = React.forwardRef(function PortableTextInput(
     }
   }
 
-  const formField = useMemo(
-    () => (
-      <FormField
-        description={type.description}
-        label={type.title}
-        level={level}
-        markers={markers}
-        presence={presence}
-      />
-    ),
-    [markers, presence]
-  )
-
   // Render error message and resolution
   let respondToInvalidContent = null
   if (invalidValue) {
     respondToInvalidContent = (
       <>
-        {formField}
         <RespondToInvalidContent
           onChange={handleEditorChange}
           onIgnore={handleIgnoreValidation}
@@ -219,7 +205,6 @@ const PortableTextInputWithRef = React.forwardRef(function PortableTextInput(
         type={type}
         value={valueTouchedByMarkers}
       >
-        {formField}
         {!readOnly && (
           <button
             type="button"
@@ -287,7 +272,18 @@ export default withPatchSubscriber(
       }
     }
     render() {
-      return <PortableTextInputWithRef {...this.props} ref={this.editorRef} />
+      const {type, level, markers, presence} = this.props
+      return (
+        <FormField
+          description={type.description}
+          label={type.title}
+          level={level}
+          markers={markers}
+          presence={presence}
+        >
+          <PortableTextInputWithRef {...this.props} ref={this.editorRef} />
+        </FormField>
+      )
     }
   }
 )