diff --git a/packages/client/src/hooks/use-document-style.ts b/packages/client/src/hooks/use-document-style.ts
index 5a9ef5eb..00857689 100644
--- a/packages/client/src/hooks/use-document-style.ts
+++ b/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) => {
- setStorage(WIDTH_KEY, width);
- refetch();
- };
+ const setWidth = useCallback(
+ (width: Width) => {
+ setStorage(WIDTH_KEY, width);
+ refetch();
+ onChange && onChange(width);
+ },
+ [refetch, onChange]
+ );
- const setFontSize = (fontSize: number) => {
- setStorage(FONT_SIZE_KEY, fontSize);
- refetch();
- };
+ const setFontSize = useCallback(
+ (fontSize: number) => {
+ setStorage(FONT_SIZE_KEY, fontSize);
+ refetch();
+ },
+ [refetch]
+ );
useEffect(() => {
refetch();
diff --git a/packages/client/src/tiptap/core/wrappers/table-of-contents/index.tsx b/packages/client/src/tiptap/core/wrappers/table-of-contents/index.tsx
index e1908def..db7fc163 100644
--- a/packages/client/src/tiptap/core/wrappers/table-of-contents/index.tsx
+++ b/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]);
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
index 6ee1cea2..4e405d2c 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
+++ b/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 });
- setHeadings(headings);
+ if (headings && headings.length) {
+ setHeadings(headings);
+ }
};
editor.eventEmitter.on('TableOfContents', collectHeadings);
@@ -176,7 +177,7 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
- {!isMobile && editor ? : null}
+ {!isMobile && editor && headings.length ? : null}
{protals}
diff --git a/packages/client/src/tiptap/editor/tocs/index.tsx b/packages/client/src/tiptap/editor/tocs/index.tsx
index 250e21c8..69a4a49b 100644
--- a/packages/client/src/tiptap/editor/tocs/index.tsx
+++ b/packages/client/src/tiptap/editor/tocs/index.tsx
@@ -39,19 +39,18 @@ const Toc = ({ toc, collapsed }) => {
export const Tocs: React.FC<{ tocs: Array; 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 = () => {