client: fix tocs collapsed detect

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(

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}>

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%;
+    }
   }
 }

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);