From d2bd896367fd69e31366a7d707cbaf0e5bc24aeb Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Fri, 16 Sep 2022 16:28:43 +0800
Subject: [PATCH] fix: inline menu position (#433)

---
 .../src/menu/inline-menu/Container.tsx        | 24 ++++++++++---------
 libs/components/ui/src/theme/theme.ts         |  2 ++
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
index f515f8114..405721ffa 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
@@ -1,12 +1,7 @@
-import { useState, useEffect } from 'react';
+import { MuiGrow as Grow, styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
-import {
-    MuiClickAwayListener as ClickAwayListener,
-    MuiGrow as Grow,
-    styled,
-} from '@toeverything/components/ui';
-
-import { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
+import { SelectionInfo, Virgo } from '@toeverything/framework/virgo';
+import { useEffect, useState } from 'react';
 import { InlineMenuToolbar } from './Toolbar';
 
 export type InlineMenuContainerProps = {
@@ -47,11 +42,18 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
 
             // This is relative to window
             const rect = browserSelection.getRangeAt(0).getBoundingClientRect();
-            const { top, left } = editor.container.getBoundingClientRect();
+
+            const { top, left, right } =
+                editor.container.getBoundingClientRect();
+            let menuLeft = rect.left - left;
+            if (right - rect.right < 500) {
+                // If the inline-menu is further away from the right than the button itself, a scroll bar will appear
+                menuLeft -= 500;
+            }
             setSelectionInfo(info);
             setShowMenu(true);
             setContainerStyle({
-                left: rect.left - left,
+                left: menuLeft,
                 top: rect.top - top - 64,
             });
         });
@@ -89,6 +91,6 @@ const ToolbarContainer = styled('div')(({ theme }) => ({
     alignItems: 'center',
     padding: '0 12px',
     borderRadius: '10px',
-    boxShadow: theme.affine.shadows.shadow1,
+    boxShadow: theme.affine.shadows.shadow3,
     backgroundColor: '#fff',
 }));
diff --git a/libs/components/ui/src/theme/theme.ts b/libs/components/ui/src/theme/theme.ts
index ce05c7b54..ad3576dba 100644
--- a/libs/components/ui/src/theme/theme.ts
+++ b/libs/components/ui/src/theme/theme.ts
@@ -237,6 +237,8 @@ export const Theme = {
             '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
         shadow2:
             '0px 6px 16px -8px rgba(0,0,0,0.08), 0px 9px 14px 0px rgba(0,0,0,0.05), 0px 12px 24px 16px rgba(0,0,0,0.03)',
+        shadow3:
+            '0px 1px 10px -6px rgb(24 39 75 / 50%), 0px 3px 16px -6px rgb(24 39 75 / 30%)',
     },
     border: ['none'],
     spacing: {