fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client: update tocs

pull/60/head
fantasticit 2022-05-28 15:42:04 +08:00
parent 6f1a31cc3d
commit cd31c2c765
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/client/src/tiptap/editor/tocs/index.tsx
View File

@ -1,12 +1,12 @@
import { IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-icons';
import { Anchor, Button } from '@douyinfe/semi-ui';
import { Editor } from '@tiptap/core';
import { useDocumentStyle, Width } from 'hooks/use-document-style';
import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect } from 'react';
import { TableOfContents } from 'tiptap/core/extensions/table-of-contents';
import { findNode } from 'tiptap/prose-utils';
import { Editor } from '../react';
import styles from './index.module.scss';
interface IToc {
@ -39,7 +39,7 @@ const Toc = ({ toc, collapsed }) => {
export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
const [hasToc, toggleHasToc] = useToggle(false);
const { width } = useDocumentStyle();
const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
const [collapsed, toggleCollapsed] = useToggle(true);
const getContainer = useCallback(() => {
return document.querySelector(`#js-tocs-container`);
@ -81,7 +81,12 @@ export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [
></Button>
</header>
<main>
<Anchor maxHeight={500} getContainer={getContainer} maxWidth={collapsed ? 56 : 180}>
<Anchor
railTheme={'muted'}
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>