Merge pull request #3566 from udecode/hover-selection

Fix width issues caused by hover scrollbars.
udecode · Sep 23, 2024 · da72fc6 · da72fc6
2 parents f83cd77 + f5d49b3
commit da72fc6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/rare-zoos-shout.md b/.changeset/rare-zoos-shout.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': patch
+---
+
+Fix width issues caused by hover scrollbars.
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -368,7 +368,7 @@ export default function PlaygroundDemo({
                   variant="ghost"
                   className={cn(
                     editableProps.className,
-                    ' overflow-x-hidden px-[var(--editor-px)]',
+                    'overflow-x-auto px-[var(--editor-px)]',
                     !id && 'pb-[20vh] pt-4',
                     id && 'pb-8 pt-2'
                   )}

diff --git a/packages/selection/src/internal/SelectionArea.ts b/packages/selection/src/internal/SelectionArea.ts
@@ -102,16 +102,16 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
           speedDivider: 10,
           ...opt.behaviour?.scrolling,
           startScrollMargins: {
-            x: 0,
-            y: 0,
+            x: 20,
+            y: 20,
             ...opt.behaviour?.scrolling?.startScrollMargins,
           },
         },
         startThreshold: opt.behaviour?.startThreshold
           ? typeof opt.behaviour.startThreshold === 'number'
             ? opt.behaviour.startThreshold
-            : { x: 10, y: 10, ...opt.behaviour.startThreshold }
-          : { x: 10, y: 10 },
+            : { x: 20, y: 20, ...opt.behaviour.startThreshold }
+          : { x: 20, y: 20 },
       },
 
       features: {