From e4704dda389f5d1fa8df8a8b2a096003f07c31e8 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Wed, 14 Dec 2022 18:38:48 +0800 Subject: [PATCH] fix: exhibition of edgeless --- .../src/components/edgeless-toolbar/style.ts | 2 +- .../src/components/page-list/date-cell.tsx | 2 +- .../app/src/components/page-list/index.tsx | 28 ++++++++---- .../app/src/components/page-list/styles.ts | 19 ++++++-- packages/app/src/pages/_app.tsx | 1 + .../editor-provider/editor-provider.tsx | 16 +++---- .../editor-provider/editor-reactor.tsx | 14 +++++- .../editor-provider/hooks/useMode.ts | 43 +++++++++++++++++++ .../providers/editor-provider/interface.ts | 1 + .../src/providers/editor-provider/utils.ts | 12 +++++- 10 files changed, 110 insertions(+), 28 deletions(-) create mode 100644 packages/app/src/providers/editor-provider/hooks/useMode.ts diff --git a/packages/app/src/components/edgeless-toolbar/style.ts b/packages/app/src/components/edgeless-toolbar/style.ts index 0b3a6d0b82..9f5150acd7 100644 --- a/packages/app/src/components/edgeless-toolbar/style.ts +++ b/packages/app/src/components/edgeless-toolbar/style.ts @@ -2,7 +2,7 @@ import { styled, displayFlex } from '@/styles'; export const StyledEdgelessToolbar = styled.div(({ theme }) => ({ height: '320px', - position: 'fixed', + position: 'absolute', left: '12px', top: 0, bottom: 0, diff --git a/packages/app/src/components/page-list/date-cell.tsx b/packages/app/src/components/page-list/date-cell.tsx index e041bd79ac..249a07c99e 100644 --- a/packages/app/src/components/page-list/date-cell.tsx +++ b/packages/app/src/components/page-list/date-cell.tsx @@ -18,7 +18,7 @@ export const DateCell = ({ {pageMeta[dateKey] === undefined ? '--' - : dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')} + : dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:mm')} ); }; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 3512694338..70b232d026 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -1,16 +1,21 @@ import { PageMeta, useEditor } from '@/providers/editor-provider'; -import { FavouritedIcon, FavouritesIcon } from '@blocksuite/icons'; +import { + FavouritedIcon, + FavouritesIcon, + PaperIcon, + EdgelessIcon, +} from '@blocksuite/icons'; import { StyledFavoriteButton, StyledTableContainer, StyledTableRow, - StyledTitleContent, + StyledTitleLink, StyledTitleWrapper, } from './styles'; import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table'; import { OperationCell, TrashOperationCell } from './operation-cell'; import Empty from './empty'; -import Link from 'next/link'; +import { Content } from '@/ui/layout'; import React from 'react'; import DateCell from '@/components/page-list/date-cell'; const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => { @@ -50,7 +55,7 @@ export const PageList = ({ Documents Created - {isTrash ? 'Moved to Trash' : 'Uploaded'} + {isTrash ? 'Moved to Trash' : 'Updated'} @@ -61,13 +66,18 @@ export const PageList = ({ - - - {pageMeta.title || pageMeta.id} - - + {pageMeta.mode === 'edgeless' ? ( + + ) : ( + + )} + + {pageMeta.title || 'Untitled'} + + {showFavoriteTag && } diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts index 46909847d5..629f0ffbfc 100644 --- a/packages/app/src/components/page-list/styles.ts +++ b/packages/app/src/components/page-list/styles.ts @@ -1,5 +1,6 @@ import { displayFlex, styled, textEllipsis } from '@/styles'; import { TableRow } from '@/ui/table'; +import Link from 'next/link'; export const StyledTableContainer = styled.div(() => { return { @@ -22,11 +23,23 @@ export const StyledTitleWrapper = styled.div(({ theme }) => { }, }; }); -export const StyledTitleContent = styled.div(({ theme }) => { +export const StyledTitleLink = styled(Link)(({ theme }) => { return { - maxWidth: '90%', + maxWidth: '80%', marginRight: '18px', - ...textEllipsis(1), + ...displayFlex('flex-start', 'center'), + color: theme.colors.textColor, + '>svg': { + fontSize: '24px', + marginRight: '12px', + color: theme.colors.iconColor, + }, + ':hover': { + color: theme.colors.textColor, + '>svg': { + color: theme.colors.primaryColor, + }, + }, }; }); export const StyledFavoriteButton = styled.button<{ favorite: boolean }>( diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index b64264e83c..5311547382 100644 --- a/packages/app/src/pages/_app.tsx +++ b/packages/app/src/pages/_app.tsx @@ -30,6 +30,7 @@ const StyledPage = styled('div')(({ theme }) => { const StyledWrapper = styled('div')(({ theme }) => { return { flexGrow: 1, + position: 'relative', }; }); diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index b177ffa65f..9956cec2bf 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -11,9 +11,9 @@ import { EditorContextValue, EditorContextProps, } from './interface'; -import usePropsUpdated from '@/providers/editor-provider/hooks/usePropsUpdated'; -import useHistoryUpdated from '@/providers/editor-provider/hooks/useHistoryUpdated'; - +import usePropsUpdated from './hooks/usePropsUpdated'; +import useHistoryUpdated from './hooks/useHistoryUpdated'; +import useMode from './hooks/useMode'; // Blocksuite has to be imported dynamically since it has a lot of effects const DynamicEditor = dynamic(() => import('./editor-reactor'), { ssr: false, @@ -39,12 +39,12 @@ export const EditorProvider = ({ const [page, setPage] = useState(); const [pageList, setPageList] = useState([]); const [editor, setEditor] = useState(); - const [mode, setMode] = useState('page'); + + const { mode, setMode } = useMode({ workspace, page }); const editorHandlers = useEditorHandler({ workspace, editor }); const onPropsUpdated = usePropsUpdated(editor); const onHistoryUpdated = useHistoryUpdated(page); - // Modify the updatedDate when history change useEffect(() => { if (!workspace) { @@ -55,12 +55,6 @@ export const EditorProvider = ({ }); }, [workspace, onHistoryUpdated]); - useEffect(() => { - // FIXME - const editorContainer = document.querySelector('editor-container'); - editorContainer?.setAttribute('mode', mode as string); - }, [mode]); - useEffect(() => { if (!workspace) { return; diff --git a/packages/app/src/providers/editor-provider/editor-reactor.tsx b/packages/app/src/providers/editor-provider/editor-reactor.tsx index 1637d8f278..99387ab192 100644 --- a/packages/app/src/providers/editor-provider/editor-reactor.tsx +++ b/packages/app/src/providers/editor-provider/editor-reactor.tsx @@ -103,8 +103,18 @@ const EditorReactor = ({ if (!currentPage) { return; } - setEditor(createEditor(currentPage)); - }, [currentPage, setEditor]); + const editor = createEditor(currentPage); + const pageMeta = workspace?.meta.pageMetas.find( + p => p.id === currentPage.pageId.replace('space:', '') + ); + + if (pageMeta?.mode) { + // @ts-ignore + editor.mode = pageMeta.mode; + } + + setEditor(editor); + }, [workspace, currentPage, setEditor]); useEffect(() => { const version = pkg.dependencies['@blocksuite/editor'].substring(1); diff --git a/packages/app/src/providers/editor-provider/hooks/useMode.ts b/packages/app/src/providers/editor-provider/hooks/useMode.ts new file mode 100644 index 0000000000..61d7208a30 --- /dev/null +++ b/packages/app/src/providers/editor-provider/hooks/useMode.ts @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react'; +import { Page, Workspace } from '@blocksuite/store'; +import { EditorContainer } from '@blocksuite/editor'; + +export const useMode = ({ + page, + workspace, +}: { + page?: Page; + workspace?: Workspace; +}) => { + const [mode, setMode] = useState('page'); + + useEffect(() => { + if (!page || !workspace) { + return; + } + const pageMeta = workspace.meta.pageMetas.find( + p => p.id === page.pageId.replace('space:', '') + ); + + if (pageMeta?.mode) { + // @ts-ignore + setMode(pageMeta.mode); + } + }, [page, workspace]); + + useEffect(() => { + // FIXME + const editorContainer = document.querySelector('editor-container'); + editorContainer?.setAttribute('mode', mode as string); + if (page && workspace) { + workspace.setPageMeta(page.id, { mode }); + } + }, [workspace, page, mode]); + + return { + mode, + setMode, + }; +}; + +export default useMode; diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts index 997cd8a776..f4e876c7e4 100644 --- a/packages/app/src/providers/editor-provider/interface.ts +++ b/packages/app/src/providers/editor-provider/interface.ts @@ -22,6 +22,7 @@ export type PageMeta = { trash: boolean; trashDate: number | void; updatedDate: number | void; + mode: EditorContainer['mode']; } & OriginalPageMeta; export type EditorHandlers = { diff --git a/packages/app/src/providers/editor-provider/utils.ts b/packages/app/src/providers/editor-provider/utils.ts index 39bb4b68b0..3c0ced7fc6 100644 --- a/packages/app/src/providers/editor-provider/utils.ts +++ b/packages/app/src/providers/editor-provider/utils.ts @@ -21,7 +21,7 @@ export const createPage = ( workspace.createPage(pageId); workspace.signals.pageAdded.once(addedPageId => { const page = workspace!.getPage(addedPageId); - resolve(page); + resolve(page as Page); }); }); }; @@ -36,3 +36,13 @@ export const initialPage = (page: Page) => { export const generateDefaultPageId = () => { return new Date().getTime().toString(); }; + +export const getEditorMode = () => { + const editorContainer = document.querySelector('editor-container'); + return editorContainer?.mode; +}; + +export const setEditorMode = (mode: EditorContainer['mode']) => { + const editorContainer = document.querySelector('editor-container'); + editorContainer?.setAttribute('mode', mode as string); +};