client: update tocs

This commit is contained in:
fantasticit 2022-05-28 13:10:05 +08:00
parent 2eea71c3e5
commit ff5ee8de29
4 changed files with 44 additions and 27 deletions

View File

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

View File

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

View File

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

View File

@ -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 = () => {