From bbaeeebf3f938db6cccdddba7e51a45d24397e76 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 2 Jun 2022 17:54:23 +0800
Subject: [PATCH] client: fix tocs detect

---
 packages/client/src/tiptap/editor/tocs/index.module.scss | 3 +--
 packages/client/src/tiptap/editor/tocs/index.tsx         | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/tiptap/editor/tocs/index.module.scss b/packages/client/src/tiptap/editor/tocs/index.module.scss
index 601bf435..0908e570 100644
--- a/packages/client/src/tiptap/editor/tocs/index.module.scss
+++ b/packages/client/src/tiptap/editor/tocs/index.module.scss
@@ -1,8 +1,7 @@
 .wrapper {
   position: fixed;
   padding-top: 2rem;
-  padding-right: 1rem;
-  padding-left: 2rem;
+  padding-left: 32px;
 
   .dot {
     font-size: 8px;
diff --git a/packages/client/src/tiptap/editor/tocs/index.tsx b/packages/client/src/tiptap/editor/tocs/index.tsx
index 93a5b94c..fcb1802a 100644
--- a/packages/client/src/tiptap/editor/tocs/index.tsx
+++ b/packages/client/src/tiptap/editor/tocs/index.tsx
@@ -39,7 +39,7 @@ const Toc = ({ toc, collapsed }) => {
   );
 };
 
-const TOCS_WIDTH = 198; // 目录展开的宽度
+const TOCS_WIDTH = 156 + 16 * 2; // 目录展开的宽度
 
 export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }> = ({ editor, getContainer }) => {
   const [collapsed, toggleCollapsed] = useToggle(true);
@@ -52,7 +52,7 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
     if (!el) return;
 
     const handler = () => {
-      const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth;
+      const diffWidth = (el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth) / 2;
       toggleCollapsed(diffWidth <= TOCS_WIDTH);
     };
 
@@ -130,7 +130,9 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
         railTheme={collapsed ? 'muted' : 'tertiary'}
         maxHeight={'calc(100vh - 360px)'}
         getContainer={getContainer}
-        maxWidth={collapsed ? 56 : 150}
+        style={{
+          width: collapsed ? 56 : 156,
+        }}
       >
         {collapsed
           ? headings.map((toc) => {