client: fix tocs

This commit is contained in:
fantasticit 2022-05-29 23:41:29 +08:00
parent 3d5cf24ee5
commit 188cfca6d7
5 changed files with 65 additions and 16 deletions

View File

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

View File

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

View File

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

View File

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

View File

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