From 7b6ba4cccad91994117b41868d27210454819159 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 28 May 2022 15:03:30 +0800
Subject: [PATCH] client: fix tocs collapsed detect

---
 packages/client/src/hooks/use-document-style.ts  |  5 ++---
 .../client/src/layouts/router-header/wiki.tsx    |  2 +-
 .../collaboration/index.module.scss              |  5 +++++
 packages/client/src/tiptap/editor/tocs/index.tsx | 16 +++++++++-------
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/hooks/use-document-style.ts b/packages/client/src/hooks/use-document-style.ts
index 0085768..826fcee 100644
--- a/packages/client/src/hooks/use-document-style.ts
+++ b/packages/client/src/hooks/use-document-style.ts
@@ -12,7 +12,7 @@ const FONT_SIZE_KEY = 'document-style-font-size';
 const DEFAULT_WIDTH = Width.standardWidth;
 const DEFAULT_FONT_SIZE = 16;
 
-export const useDocumentStyle = (onChange = null) => {
+export const useDocumentStyle = () => {
   const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
     if (typeof window !== 'undefined') {
       return {
@@ -31,9 +31,8 @@ export const useDocumentStyle = (onChange = null) => {
     (width: Width) => {
       setStorage(WIDTH_KEY, width);
       refetch();
-      onChange && onChange(width);
     },
-    [refetch, onChange]
+    [refetch]
   );
 
   const setFontSize = useCallback(
diff --git a/packages/client/src/layouts/router-header/wiki.tsx b/packages/client/src/layouts/router-header/wiki.tsx
index 3d63cc4..77fb3e1 100644
--- a/packages/client/src/layouts/router-header/wiki.tsx
+++ b/packages/client/src/layouts/router-header/wiki.tsx
@@ -78,7 +78,7 @@ const WikiContent = () => {
         normalContent={() => {
           return (
             <div className={styles.itemsWrap}>
-              {starWikis.length ? (
+              {starWikis && starWikis.length ? (
                 starWikis.map((wiki) => {
                   return (
                     <div className={styles.itemWrap} key={wiki.id}>
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss b/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
index a1f461d..19bd3b7 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
@@ -46,5 +46,10 @@
     display: flex;
     flex: 1;
     overflow: auto;
+
+    > div:first-of-type {
+      flex: 1;
+      width: 100%;
+    }
   }
 }
diff --git a/packages/client/src/tiptap/editor/tocs/index.tsx b/packages/client/src/tiptap/editor/tocs/index.tsx
index 8fc9737..d362849 100644
--- a/packages/client/src/tiptap/editor/tocs/index.tsx
+++ b/packages/client/src/tiptap/editor/tocs/index.tsx
@@ -38,19 +38,21 @@ const Toc = ({ toc, collapsed }) => {
 
 export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
   const [hasToc, toggleHasToc] = useToggle(false);
-  const { width } = useDocumentStyle((width) => {
-    if (width === Width.fullWidth) {
-      toggleCollapsed(true);
-    } else {
-      toggleCollapsed(false);
-    }
-  });
+  const { width } = useDocumentStyle();
   const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
 
   const getContainer = useCallback(() => {
     return document.querySelector(`#js-tocs-container`);
   }, []);
 
+  useEffect(() => {
+    if (width === Width.fullWidth) {
+      toggleCollapsed(true);
+    } else {
+      toggleCollapsed(false);
+    }
+  }, [width, toggleCollapsed]);
+
   useEffect(() => {
     const listener = () => {
       const nodes = findNode(editor, TableOfContents.name);