fix: exhibition of edgeless

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,

packages/app/src/components/page-list/date-cell.tsx

@@ -18,7 +18,7 @@ export const DateCell = ({
     <TableCell ellipsis={true}>
       {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')}
     </TableCell>
   );
 };

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 = ({
             <TableCell proportion={0.5}>Documents</TableCell>
             <TableCell proportion={0.2}>Created</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Moved to Trash' : 'Uploaded'}
+              {isTrash ? 'Moved to Trash' : 'Updated'}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -61,13 +66,18 @@ export const PageList = ({
               <StyledTableRow key={`${pageMeta.id}-${index}`}>
                 <TableCell>
                   <StyledTitleWrapper>
-                    <Link
+                    <StyledTitleLink
                       href={{ pathname: '/', query: { pageId: pageMeta.id } }}
                     >
-                      <StyledTitleContent>
-                        {pageMeta.title || pageMeta.id}
-                      </StyledTitleContent>
-                    </Link>
+                      {pageMeta.mode === 'edgeless' ? (
+                        <EdgelessIcon />
+                      ) : (
+                        <PaperIcon />
+                      )}
+                      <Content ellipsis={true} color="inherit">
+                        {pageMeta.title || 'Untitled'}
+                      </Content>
+                    </StyledTitleLink>
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                   </StyledTitleWrapper>
                 </TableCell>

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 }>(

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',
   };
 });
 

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<Page>();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   const [editor, setEditor] = useState<EditorContainer>();
-  const [mode, setMode] = useState<EditorContainer['mode']>('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;

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

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<EditorContainer['mode']>('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;

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 = {

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);
+};