fix(pte): don't render the PTE block extras container when not in use…

…, disable pointer events on highlights (#6620) * fix(pte): don't unnecessarily render PTE block actions container * fix: remove pointer-events from validation + change highlight blocks
sanity-io · May 14, 2024 · 4c73ded · 4c73ded
1 parent 800149f
commit 4c73ded
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/_common/ReviewChangesHighlightBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/_common/ReviewChangesHighlightBlock.tsx
@@ -13,5 +13,6 @@ export const ReviewChangesHighlightBlock = styled.div(({theme}) => {
     left: ${space[4] + space[1]}px;
     right: 0;
     background-color: ${bg};
+    pointer-events: none;
   `
 })
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.styles.ts
@@ -41,6 +41,7 @@ function textBlockStyle(props: TextBlockStyleProps & {theme: Theme}) {
       background-color: var(--marker-bg-color);
       // This is to make sure the marker is always behind the text
       z-index: -1;
+      pointer-events: none;
     }
 
     &[data-markers] {

diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -263,6 +263,9 @@ export function TextBlock(props: TextBlockProps) {
     [Markers, markers, renderCustomMarkers, tooltipEnabled, validation],
   )
 
+  const blockActionsVisible = renderBlockActions && focused && !readOnly
+  const changeIndicatorVisible = isFullscreen && memberItem
+
   return useMemo(
     () => (
       <Box
@@ -295,40 +298,47 @@ export function TextBlock(props: TextBlockProps) {
               </Tooltip>
             </Box>
 
-            <BlockExtrasContainer contentEditable={false}>
-              <BlockActionsOuter marginRight={1}>
-                <BlockActionsInner>
-                  {renderBlockActions && focused && !readOnly && (
-                    <BlockActions
-                      onChange={onChange}
-                      block={value}
-                      renderBlockActions={renderBlockActions}
+            {/*
+              Note that we only render this container if any children are present, as an
+              empty element will still occupy text space and display an invalid cursor on hover.
+            */}
+            {(blockActionsVisible || changeIndicatorVisible) && (
+              <BlockExtrasContainer contentEditable={false}>
+                {blockActionsVisible && (
+                  <BlockActionsOuter marginRight={1}>
+                    <BlockActionsInner>
+                      <BlockActions
+                        onChange={onChange}
+                        block={value}
+                        renderBlockActions={renderBlockActions}
+                      />
+                    </BlockActionsInner>
+                  </BlockActionsOuter>
+                )}
+                {changeIndicatorVisible && (
+                  <ChangeIndicatorWrapper
+                    $hasChanges={memberItem.member.item.changed}
+                    onMouseEnter={handleChangeIndicatorMouseEnter}
+                    onMouseLeave={handleChangeIndicatorMouseLeave}
+                  >
+                    <StyledChangeIndicatorWithProvidedFullPath
+                      hasFocus={focused}
+                      isChanged={memberItem.member.item.changed}
+                      path={memberItem.member.item.path}
+                      withHoverEffect={false}
                     />
-                  )}
-                </BlockActionsInner>
-              </BlockActionsOuter>
-
-              {isFullscreen && memberItem && (
-                <ChangeIndicatorWrapper
-                  $hasChanges={memberItem.member.item.changed}
-                  onMouseEnter={handleChangeIndicatorMouseEnter}
-                  onMouseLeave={handleChangeIndicatorMouseLeave}
-                >
-                  <StyledChangeIndicatorWithProvidedFullPath
-                    hasFocus={focused}
-                    isChanged={memberItem.member.item.changed}
-                    path={memberItem.member.item.path}
-                    withHoverEffect={false}
-                  />
-                </ChangeIndicatorWrapper>
-              )}
-            </BlockExtrasContainer>
+                  </ChangeIndicatorWrapper>
+                )}
+              </BlockExtrasContainer>
+            )}
             {reviewChangesHovered && <ReviewChangesHighlightBlock />}
           </Flex>
         </TextBlockFlexWrapper>
       </Box>
     ),
     [
+      blockActionsVisible,
+      changeIndicatorVisible,
       componentProps,
       focused,
       handleChangeIndicatorMouseEnter,
@@ -337,7 +347,6 @@ export function TextBlock(props: TextBlockProps) {
       hasMarkers,
       hasWarning,
       innerPaddingProps,
-      isFullscreen,
       memberItem,
       onChange,
       outerPaddingProps,