client: fix tocs

packages/client/src/helpers/tree.ts

@@ -0,0 +1,18 @@
+export function flattenTree2Array(arr = []) {
+  const res = [];
+  const loopList = [...arr];
+
+  while (loopList.length) {
+    const node = loopList.pop();
+
+    res.push(node);
+
+    if (node?.children && node?.children.length) {
+      for (const sub of node.children) {
+        loopList.push(sub);
+      }
+    }
+  }
+
+  return res;
+}

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

@@ -55,7 +55,7 @@ export const TableOfContentsWrapper = ({ editor }) => {
     editor.view.dispatch(transaction);
 
     setItems(headings);
-    editor.eventEmitter.emit('TableOfContents', arrToTree(headings));
+    editor.eventEmitter && editor.eventEmitter.emit('TableOfContents', arrToTree(headings));
   }, [editor]);
 
   useEffect(() => {

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

@@ -196,7 +196,7 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
         ref={$mainContainer}
         id={'js-tocs-container'}
         style={{
-          padding: isMobile ? '0 24px' : '0 6rem',
+          padding: isMobile ? `0 24px ${editable ? '42px' : 0}` : `0 6rem ${editable ? '42px' : 0}`,
         }}
       >
         <div className={cls(styles.contentWrap, editorWrapClassNames)}>

packages/client/src/tiptap/editor/tocs/index.module.scss

@@ -17,11 +17,22 @@
     }
   }
 
-  .collapsedItem {
-    position: relative;
-    width: 10px;
-    height: 10px;
-    background-color: #d8d8d8;
-    border-radius: 50%;
+  .dotWrap {
+    display: flex;
+    flex-direction: column;
+    padding-left: 12px;
+
+    .dot {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      cursor: pointer;
+      background-color: var(--semi-color-text-3);
+      border-radius: 50%;
+
+      & + .dot {
+        margin-top: 10px;
+      }
+    }
   }
 }

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

@@ -2,6 +2,7 @@ import { IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-ic
 import { Anchor, Button, Tooltip } from '@douyinfe/semi-ui';
 import { Editor } from '@tiptap/core';
 import { throttle } from 'helpers/throttle';
+import { flattenTree2Array } from 'helpers/tree';
 import { useDocumentStyle, Width } from 'hooks/use-document-style';
 import { useToggle } from 'hooks/use-toggle';
 import React, { useCallback, useEffect } from 'react';
@@ -79,6 +80,8 @@ export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [
       toggleCollapsed(el.offsetWidth <= FULL_WIDTH);
     }, 200);
 
+    handler();
+
     window.addEventListener('resize', handler);
 
     return () => {
@@ -97,14 +100,31 @@ export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [
         ></Button>
       </header>
       <main>
-        <Anchor
-          railTheme={collapsed ? 'muted' : 'tertiary'}
-          maxHeight={'calc(100vh - 360px)'}
-          getContainer={getContainer}
-          maxWidth={collapsed ? 56 : 180}
-        >
-          {tocs.length && tocs.map((toc) => <Toc key={toc.text} toc={toc} collapsed={collapsed} />)}
-        </Anchor>
+        {collapsed ? (
+          <div
+            className={styles.dotWrap}
+            style={{
+              maxHeight: 'calc(100vh - 360px)',
+            }}
+          >
+            {flattenTree2Array(tocs).map((toc) => {
+              return (
+                <Tooltip key={toc.text} content={toc.text} position="right">
+                  <div className={styles.dot}></div>
+                </Tooltip>
+              );
+            })}
+          </div>
+        ) : (
+          <Anchor
+            railTheme={collapsed ? 'muted' : 'tertiary'}
+            maxHeight={'calc(100vh - 360px)'}
+            getContainer={getContainer}
+            maxWidth={collapsed ? 56 : 180}
+          >
+            {tocs.length && tocs.map((toc) => <Toc key={toc.text} toc={toc} collapsed={collapsed} />)}
+          </Anchor>
+        )}
       </main>
     </div>
   );