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

client: fix tocs detect

This commit is contained in:
fantasticit 2022-06-02 17:54:23 +08:00
parent fa40d87aa4
commit bbaeeebf3f
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/tiptap/editor/tocs/index.module.scss
View File

@ -1,8 +1,7 @@
.wrapper { .wrapper {
position: fixed; position: fixed;
padding-top: 2rem; padding-top: 2rem;
padding-right: 1rem; padding-left: 32px;
padding-left: 2rem;
.dot { .dot {
font-size: 8px; font-size: 8px;

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

@ -39,7 +39,7 @@ const Toc = ({ toc, collapsed }) => {
); );
}; };
const TOCS_WIDTH = 198; // 目录展开的宽度 const TOCS_WIDTH = 156 + 16 * 2; // 目录展开的宽度
export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }> = ({ editor, getContainer }) => { export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }> = ({ editor, getContainer }) => {
const [collapsed, toggleCollapsed] = useToggle(true); const [collapsed, toggleCollapsed] = useToggle(true);
@ -52,7 +52,7 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
if (!el) return; if (!el) return;
const handler = () => { const handler = () => {
const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth; const diffWidth = (el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth) / 2;
toggleCollapsed(diffWidth <= TOCS_WIDTH); toggleCollapsed(diffWidth <= TOCS_WIDTH);
}; };
@ -130,7 +130,9 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
railTheme={collapsed ? 'muted' : 'tertiary'} railTheme={collapsed ? 'muted' : 'tertiary'}
maxHeight={'calc(100vh - 360px)'} maxHeight={'calc(100vh - 360px)'}
getContainer={getContainer} getContainer={getContainer}
maxWidth={collapsed ? 56 : 150} style={{
width: collapsed ? 56 : 156,
}}
> >
{collapsed {collapsed
? headings.map((toc) => { ? headings.map((toc) => {