client: update tocs

packages/client/src/hooks/use-document-style.ts

@@ -1,5 +1,5 @@
 import { getStorage, setStorage } from 'helpers/storage';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useQuery } from 'react-query';
 
 export enum Width {
@@ -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 = () => {
+export const useDocumentStyle = (onChange = null) => {
   const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
     if (typeof window !== 'undefined') {
       return {
@@ -27,15 +27,22 @@ export const useDocumentStyle = () => {
     };
   });
 
-  const setWidth = (width: Width) => {
+  const setWidth = useCallback(
+    (width: Width) => {
       setStorage(WIDTH_KEY, width);
       refetch();
-  };
+      onChange && onChange(width);
+    },
+    [refetch, onChange]
+  );
 
-  const setFontSize = (fontSize: number) => {
+  const setFontSize = useCallback(
+    (fontSize: number) => {
       setStorage(FONT_SIZE_KEY, fontSize);
       refetch();
-  };
+    },
+    [refetch]
+  );
 
   useEffect(() => {
     refetch();

packages/client/src/tiptap/core/wrappers/table-of-contents/index.tsx

@@ -5,14 +5,22 @@ import { useCallback, useEffect, useState } from 'react';
 import styles from './index.module.scss';
 
 const arrToTree = (tocs) => {
-  const levels = [{ children: [] }];
-  tocs.forEach(function (o) {
-    levels.length = o.level;
-    levels[o.level - 1].children = levels[o.level - 1].children || [];
-    levels[o.level - 1].children.push(o);
-    levels[o.level] = o;
+  const result = [];
+  const levels = [result];
+
+  tocs.forEach((o) => {
+    let offset = -1;
+    let parent = levels[o.level + offset];
+
+    while (!parent) {
+      offset -= 1;
+      parent = levels[o.level + offset];
+    }
+
+    parent.push({ ...o, children: (levels[o.level] = []) });
   });
-  return levels[0].children;
+
+  return result;
 };
 
 export const TableOfContentsWrapper = ({ editor }) => {
@@ -45,6 +53,8 @@ export const TableOfContentsWrapper = ({ editor }) => {
     transaction.setMeta('addToHistory', false);
     transaction.setMeta('preventUpdate', true);
     editor.view.dispatch(transaction);
+    console.log(headings, arrToTree(headings));
+
     setItems(headings);
     editor.eventEmitter.emit('TableOfContents', arrToTree(headings));
   }, [editor]);

packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx

@@ -143,8 +143,9 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
     if (!editor) return;
 
     const collectHeadings = (headings) => {
-      console.log({ headings });
+      if (headings && headings.length) {
         setHeadings(headings);
+      }
     };
 
     editor.eventEmitter.on('TableOfContents', collectHeadings);
@@ -176,7 +177,7 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
 
       <main ref={$mainContainer} id={editable ? 'js-tocs-container' : ''}>
         <EditorContent editor={editor} />
-        {!isMobile && editor ? <Tocs tocs={headings} editor={editor} /> : null}
+        {!isMobile && editor && headings.length ? <Tocs tocs={headings} editor={editor} /> : null}
         {protals}
       </main>
 

packages/client/src/tiptap/editor/tocs/index.tsx

@@ -39,19 +39,18 @@ const Toc = ({ toc, collapsed }) => {
 export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
   const [hasToc, toggleHasToc] = useToggle(false);
   const [collapsed, toggleCollapsed] = useToggle(true);
-  const { width } = useDocumentStyle();
 
-  const getContainer = useCallback(() => {
-    return document.querySelector(`#js-tocs-container`);
-  }, []);
-
-  useEffect(() => {
+  useDocumentStyle((width) => {
     if (width === Width.fullWidth) {
       toggleCollapsed(true);
     } else {
       toggleCollapsed(false);
     }
-  }, [width, toggleCollapsed]);
+  });
+
+  const getContainer = useCallback(() => {
+    return document.querySelector(`#js-tocs-container`);
+  }, []);
 
   useEffect(() => {
     const listener = () => {