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

client: fix tocs collapsed detect

pull/60/head
fantasticit 2022-05-28 15:03:30 +08:00
parent 97ae2d929f
commit 7b6ba4ccca
4 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/client/src/hooks/use-document-style.ts
View File

@ -12,7 +12,7 @@ const FONT_SIZE_KEY = 'document-style-font-size';
const DEFAULT_WIDTH = Width.standardWidth; const DEFAULT_WIDTH = Width.standardWidth;
const DEFAULT_FONT_SIZE = 16; const DEFAULT_FONT_SIZE = 16;
export const useDocumentStyle = (onChange = null) => { export const useDocumentStyle = () => {
const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => { const { data, refetch } = useQuery(`/fe/mock/${WIDTH_KEY}/${FONT_SIZE_KEY}`, () => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
return { return {
@ -31,9 +31,8 @@ export const useDocumentStyle = (onChange = null) => {
(width: Width) => { (width: Width) => {
setStorage(WIDTH_KEY, width); setStorage(WIDTH_KEY, width);
refetch(); refetch();
onChange && onChange(width);
}, },
[refetch, onChange] [refetch]
); );
const setFontSize = useCallback( const setFontSize = useCallback(

2
packages/client/src/layouts/router-header/wiki.tsx
View File

@ -78,7 +78,7 @@ const WikiContent = () => {
normalContent={() => { normalContent={() => {
return ( return (
<div className={styles.itemsWrap}> <div className={styles.itemsWrap}>
{starWikis.length ? ( {starWikis && starWikis.length ? (
starWikis.map((wiki) => { starWikis.map((wiki) => {
return ( return (
<div className={styles.itemWrap} key={wiki.id}> <div className={styles.itemWrap} key={wiki.id}>

5
packages/client/src/tiptap/editor/collaboration/collaboration/index.module.scss
View File

@ -46,5 +46,10 @@
display: flex; display: flex;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
> div:first-of-type {
flex: 1;
width: 100%;
}
} }
} }

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

@ -38,19 +38,21 @@ const Toc = ({ toc, collapsed }) => {
export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => { export const Tocs: React.FC<{ tocs: Array<IToc>; editor: Editor }> = ({ tocs = [], editor }) => {
const [hasToc, toggleHasToc] = useToggle(false); const [hasToc, toggleHasToc] = useToggle(false);
const { width } = useDocumentStyle((width) => { const { width } = useDocumentStyle();
if (width === Width.fullWidth) {
toggleCollapsed(true);
} else {
toggleCollapsed(false);
}
});
const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth); const [collapsed, toggleCollapsed] = useToggle(width === Width.fullWidth);
const getContainer = useCallback(() => { const getContainer = useCallback(() => {
return document.querySelector(`#js-tocs-container`); return document.querySelector(`#js-tocs-container`);
}, []); }, []);
useEffect(() => {
if (width === Width.fullWidth) {
toggleCollapsed(true);
} else {
toggleCollapsed(false);
}
}, [width, toggleCollapsed]);
useEffect(() => { useEffect(() => {
const listener = () => { const listener = () => {
const nodes = findNode(editor, TableOfContents.name); const nodes = findNode(editor, TableOfContents.name);