fix: remove redundant box around EditableWrapper, minor style tweaks …

…to change highlight positioning
sanity-io · May 13, 2024 · 63dd0ff · 63dd0ff
1 parent 2821945
commit 63dd0ff
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 18 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Editor.tsx
@@ -13,13 +13,7 @@ import {
   type RenderStyleFunction,
 } from '@sanity/portable-text-editor'
 import {type Path} from '@sanity/types'
-import {
-  BoundaryElementProvider,
-  Box,
-  useBoundaryElement,
-  useGlobalKeyDown,
-  useLayer,
-} from '@sanity/ui'
+import {BoundaryElementProvider, useBoundaryElement, useGlobalKeyDown, useLayer} from '@sanity/ui'
 // eslint-disable-next-line camelcase
 import {getTheme_v2} from '@sanity/ui/theme'
 import {type ReactNode, useCallback, useMemo} from 'react'
@@ -210,16 +204,11 @@ export function Editor(props: EditorProps): ReactNode {
 
       <EditableCard flex={1} tone={readOnly ? 'transparent' : 'default'}>
         <Scroller ref={setScrollElement}>
-          <Box>
-            <EditableWrapper
-              $isFullscreen={isFullscreen}
-              tone={readOnly ? 'transparent' : 'default'}
-            >
-              <BoundaryElementProvider element={isFullscreen ? scrollElement : boundaryElement}>
-                {editable}
-              </BoundaryElementProvider>
-            </EditableWrapper>
-          </Box>
+          <EditableWrapper $isFullscreen={isFullscreen} tone={readOnly ? 'transparent' : 'default'}>
+            <BoundaryElementProvider element={isFullscreen ? scrollElement : boundaryElement}>
+              {editable}
+            </BoundaryElementProvider>
+          </EditableWrapper>
         </Scroller>
 
         <div data-portal="" ref={setPortalElement} />

diff --git a/packages/sanity/src/core/form/inputs/PortableText/_common/ReviewChangesHighlightBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/_common/ReviewChangesHighlightBlock.tsx
@@ -11,7 +11,7 @@ export const ReviewChangesHighlightBlock = styled.div(({theme}) => {
     top: -${space[2]}px;
     bottom: -${space[1] + space[1]}px;
     left: ${space[4] + space[1]}px;
-    right: 0;
+    right: ${space[2]}px;
     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
@@ -168,6 +168,7 @@ export const ChangeIndicatorWrapper = styled.div<{$hasChanges: boolean}>(
       top: 0;
       bottom: 0;
       padding-left: ${space[1]}px;
+      padding-right: ${space[3]}px;
       user-select: none;
 
       ${!$hasChanges &&