Merge pull request #617 from toeverything/fix/create-pageg-with-title

Fix/create pageg with title

packages/app/package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@affine/data-services": "workspace:@affine/data-services@*",
-    "@blocksuite/blocks": "0.3.0-20221225075400-9710eea",
-    "@blocksuite/editor": "0.3.0-20221225075400-9710eea",
+    "@blocksuite/blocks": "0.3.0-20221228162706-9576a3a",
+    "@blocksuite/editor": "0.3.0-20221228162706-9576a3a",
     "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/store": "0.3.0-20221225075400-9710eea",
+    "@blocksuite/store": "0.3.0-20221228162706-9576a3a",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",

packages/app/src/components/quick-search/footer.tsx

@@ -2,21 +2,19 @@ import React from 'react';
 import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/global-modal-provider';
-import { useAppState } from '@/providers/app-state-provider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
 
 export const Footer = (props: { query: string }) => {
-  const { createPage } = useAppState();
   const { triggerQuickSearchModal } = useModal();
-  const { openPage } = usePageHelper();
+  const { openPage, createPage } = usePageHelper();
   const query = props.query;
 
   return (
     <Command.Item
       data-testid="quickSearch-addNewPage"
       onSelect={async () => {
-        const pageId = await createPage?.();
+        const pageId = await createPage({ title: query });
         if (pageId) {
           openPage(pageId);
         }

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -67,8 +67,8 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
-  const { createPage, currentWorkspaceId } = useAppState();
-  const { openPage } = usePageHelper();
+  const { currentWorkspaceId } = useAppState();
+  const { openPage, createPage } = usePageHelper();
   const router = useRouter();
 
   const [showTip, setShowTip] = useState(false);
@@ -164,7 +164,7 @@ export const WorkSpaceSliderBar = () => {
           </Link>
           <StyledNewPageButton
             onClick={async () => {
-              const pageId = await createPage?.();
+              const pageId = await createPage();
               if (pageId) {
                 openPage(pageId);
               }

packages/app/src/hooks/use-page-helper.ts

@@ -1,4 +1,4 @@
-import { Workspace } from '@blocksuite/store';
+import { Workspace, uuidv4 } from '@blocksuite/store';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
 import { PageMeta, useAppState } from '@/providers/app-state-provider';
 import { EditorContainer } from '@blocksuite/editor';
@@ -6,7 +6,10 @@ import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useRouter } from 'next/router';
 
 export type EditorHandlers = {
-  // createPage: (params?: { pageId?: string; title?: string }) => Promise<Page>;
+  createPage: (params?: {
+    pageId?: string;
+    title?: string;
+  }) => Promise<string | null>;
   openPage: (
     pageId: string,
     query?: { [key: string]: string },
@@ -33,6 +36,21 @@ export const usePageHelper = (): EditorHandlers => {
   const { currentWorkspace, editor, currentWorkspaceId } = useAppState();
 
   return {
+    createPage: ({
+      pageId = uuidv4().replaceAll('-', ''),
+      title = '',
+    } = {}) => {
+      return new Promise(resolve => {
+        if (!currentWorkspace) {
+          return resolve(null);
+        }
+        currentWorkspace.createPage(pageId);
+        currentWorkspace.signals.pageAdded.once(addedPageId => {
+          currentWorkspace.setPageMeta(addedPageId, { title });
+          resolve(addedPageId);
+        });
+      });
+    },
     toggleFavoritePage: async pageId => {
       const pageMeta = getPageMeta(currentWorkspace, pageId);
       if (!pageMeta) {

packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -15,7 +15,8 @@ import exampleMarkdown from '@/templates/Welcome-to-the-AFFiNE-Alpha.md';
 import type { NextPageWithLayout } from '../..//_app';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { useRouter } from 'next/router';
-
+import { usePageHelper } from '@/hooks/use-page-helper';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 const StyledEditorContainer = styled('div')(() => {
   return {
     height: 'calc(100vh - 60px)',
@@ -26,6 +27,7 @@ const Page: NextPageWithLayout = () => {
   const editorContainer = useRef<HTMLDivElement>(null);
   const { createEditor, setEditor, currentPage, currentWorkspace } =
     useAppState();
+  const { title: metaTitle } = useCurrentPageMeta() || {};
 
   useEffect(() => {
     const ret = () => {
@@ -41,7 +43,8 @@ const Page: NextPageWithLayout = () => {
       setEditor?.current?.(editor);
       if (currentPage!.isEmpty) {
         const isFirstPage = currentWorkspace?.meta.pageMetas.length === 1;
-        const title = isFirstPage ? 'Welcome to the AFFiNE Alpha' : '';
+        const title =
+          metaTitle || isFirstPage ? 'Welcome to the AFFiNE Alpha' : '';
         const pageId = currentPage!.addBlock({
           flavour: 'affine:page',
           title,
@@ -61,7 +64,7 @@ const Page: NextPageWithLayout = () => {
     }
 
     return ret;
-  }, [currentWorkspace, currentPage, createEditor, setEditor]);
+  }, [currentWorkspace, currentPage, createEditor, setEditor, metaTitle]);
 
   return (
     <>
@@ -76,7 +79,9 @@ const Page: NextPageWithLayout = () => {
 const PageDefender = ({ children }: PropsWithChildren) => {
   const router = useRouter();
   const [pageLoaded, setPageLoaded] = useState(false);
-  const { currentWorkspace, createPage, loadPage } = useAppState();
+  const { currentWorkspace, loadPage } = useAppState();
+  const { createPage } = usePageHelper();
+
   useEffect(() => {
     const initPage = async () => {
       const pageId = router.query.pageId as string;
@@ -84,7 +89,7 @@ const PageDefender = ({ children }: PropsWithChildren) => {
         p => p.id === pageId
       );
       if (!isPageExist) {
-        await createPage(pageId);
+        await createPage({ pageId });
       }
       await loadPage(pageId);
       setPageLoaded(true);

packages/app/src/pages/workspace/[workspaceId]/index.tsx

@@ -3,10 +3,12 @@ import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import { PageLoading } from '@/components/loading';
+import usePageHelper from '@/hooks/use-page-helper';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
-  const { createPage, currentWorkspaceId, currentWorkspace } = useAppState();
+  const { currentWorkspaceId, currentWorkspace } = useAppState();
+  const { createPage } = usePageHelper();
   const { workspaceLoaded } = useEnsureWorkspace();
 
   useEffect(() => {

packages/app/src/providers/app-state-provider/context.ts

@@ -37,7 +37,6 @@ export interface AppStateContext extends AppStateValue {
   setEditor?: MutableRefObject<((page: EditorContainer) => void) | undefined>;
   loadWorkspace: (workspaceId: string) => Promise<StoreWorkspace | null>;
   loadPage: (pageId: string) => Promise<StorePage | null>;
-  createPage: (pageId?: string) => Promise<string | null>;
 }
 
 export const AppState = createContext<AppStateContext>({
@@ -57,7 +56,6 @@ export const AppState = createContext<AppStateContext>({
   setEditor: undefined,
   loadWorkspace: () => Promise.resolve(null),
   loadPage: () => Promise.resolve(null),
-  createPage: () => Promise.resolve(null),
   synced: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   refreshWorkspacesMeta: () => {},

packages/app/src/providers/app-state-provider/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAppState } from './context';
-
+import { usePageHelper } from '@/hooks/use-page-helper';
 export const useLoadWorkspace = () => {
   const router = useRouter();
   const { loadWorkspace, currentWorkspace, currentWorkspaceId } = useAppState();
@@ -17,8 +17,8 @@ export const useLoadWorkspace = () => {
 
 export const useLoadPage = () => {
   const router = useRouter();
-  const { loadPage, currentPage, createPage, currentWorkspaceId } =
-    useAppState();
+  const { loadPage, currentPage, currentWorkspaceId } = useAppState();
+  const { createPage } = usePageHelper();
   const workspace = useLoadWorkspace();
 
   const pageId = router.query.pageId as string;
@@ -39,7 +39,7 @@ export const useLoadPage = () => {
       return;
     }
 
-    createPage?.()?.then(async pageId => {
+    createPage().then(async pageId => {
       if (!pageId) {
         return;
       }

packages/app/src/providers/app-state-provider/provider.tsx

@@ -14,7 +14,6 @@ import type {
 } from './context';
 import { Page, Workspace as StoreWorkspace } from '@blocksuite/store';
 import { EditorContainer } from '@blocksuite/editor';
-import { uuidv4 as uuidv4IdGenerator } from '@blocksuite/store';
 const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
   ssr: false,
 });
@@ -151,25 +150,6 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     setState(state => ({ ...state, editor }));
   };
 
-  const createPage = useRef<AppStateContext['createPage']>(() =>
-    Promise.resolve(null)
-  );
-
-  createPage.current = (
-    pageId: string = uuidv4IdGenerator().replaceAll('-', '')
-  ) =>
-    new Promise<string | null>(resolve => {
-      const { currentWorkspace } = state;
-      if (!currentWorkspace) {
-        resolve(null);
-        return;
-      }
-      currentWorkspace.createPage(pageId);
-      currentWorkspace.signals.pageAdded.once(addedPageId => {
-        resolve(addedPageId);
-      });
-    });
-
   useEffect(() => {
     if (!loadWorkspaceHandler) {
       return;
@@ -211,7 +191,6 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
       setEditor,
       loadWorkspace: loadWorkspace.current,
       loadPage: loadPage.current,
-      createPage: createPage.current,
     }),
     [state, setState, loadPage, loadWorkspace]
   );

pnpm-lock.yaml

@@ -43,10 +43,10 @@ importers:
   packages/app:
     specifiers:
       '@affine/data-services': workspace:@affine/data-services@*
-      '@blocksuite/blocks': 0.3.0-20221225075400-9710eea
-      '@blocksuite/editor': 0.3.0-20221225075400-9710eea
+      '@blocksuite/blocks': 0.3.0-20221228162706-9576a3a
+      '@blocksuite/editor': 0.3.0-20221228162706-9576a3a
       '@blocksuite/icons': ^2.0.2
-      '@blocksuite/store': 0.3.0-20221225075400-9710eea
+      '@blocksuite/store': 0.3.0-20221228162706-9576a3a
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
       '@emotion/server': ^11.10.0
@@ -83,10 +83,10 @@ importers:
       yjs: ^13.5.43
     dependencies:
       '@affine/data-services': link:../data-services
-      '@blocksuite/blocks': 0.3.0-20221225075400-9710eea_yjs@13.5.43
-      '@blocksuite/editor': 0.3.0-20221225075400-9710eea_yjs@13.5.43
+      '@blocksuite/blocks': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
+      '@blocksuite/editor': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
       '@blocksuite/icons': 2.0.2_w5j4k42lgipnm43s3brx6h3c34
-      '@blocksuite/store': 0.3.0-20221225075400-9710eea_yjs@13.5.43
+      '@blocksuite/store': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/server': 11.10.0_@emotion+css@11.10.0
@@ -525,10 +525,10 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@blocksuite/blocks/0.3.0-20221225075400-9710eea_yjs@13.5.43:
-    resolution: {integrity: sha512-/8BChYFh5Pb9zDWCq9ysmpZGPe7WHbcz0lByFd0JE+lwA5smZ5cQEPz2weS9EGG21VCUuY7g7GtZ2Sm7TQtR1g==}
+  /@blocksuite/blocks/0.3.0-20221228162706-9576a3a_yjs@13.5.43:
+    resolution: {integrity: sha512-gBwqynM0WQuUbsJbazBKIe+jkyoXYZPalYQlz0f1TT51kXmvyhQ1TlvsnZx94aW1JwT2st3z65Q197MmfZ8jSw==}
     dependencies:
-      '@blocksuite/store': 0.3.0-20221225075400-9710eea_yjs@13.5.43
+      '@blocksuite/store': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
       '@tldraw/intersect': 1.8.0
       highlight.js: 11.7.0
       hotkeys-js: 3.10.1
@@ -543,11 +543,11 @@ packages:
       - yjs
     dev: false
 
-  /@blocksuite/editor/0.3.0-20221225075400-9710eea_yjs@13.5.43:
-    resolution: {integrity: sha512-SI1o446Gl362ZLgDYh1eb5gqG7ifcSU5J6vqp5gDmcu+PvUVXFx7SILZ+p5zzwNQNPCL1oQbnlC5HhpmZkP8qQ==}
+  /@blocksuite/editor/0.3.0-20221228162706-9576a3a_yjs@13.5.43:
+    resolution: {integrity: sha512-J2D2RpAqBWRH3Gmtpzr3nKTES80LmfAVcnkB3zsA7j4bsK30RZhEAAwjDWe9STcCAfN/vVPbEFkJksrI+6+Xjg==}
     dependencies:
-      '@blocksuite/blocks': 0.3.0-20221225075400-9710eea_yjs@13.5.43
-      '@blocksuite/store': 0.3.0-20221225075400-9710eea_yjs@13.5.43
+      '@blocksuite/blocks': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
+      '@blocksuite/store': 0.3.0-20221228162706-9576a3a_yjs@13.5.43
       lit: 2.5.0
       marked: 4.2.5
       turndown: 7.1.1
@@ -568,8 +568,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@blocksuite/store/0.3.0-20221225075400-9710eea_yjs@13.5.43:
-    resolution: {integrity: sha512-24Gv9u2jknJuGPOhkuV46mKXl13sntuWYSN8//FIOotqLXfF3hFW6+w8RBvSqMxTGRpl3wC9dyCIyJ5oBmpYvA==}
+  /@blocksuite/store/0.3.0-20221228162706-9576a3a_yjs@13.5.43:
+    resolution: {integrity: sha512-uMbLD+zfhHasDwCmE1ZTtFtK9GNwN37Iaugbj/rtdwhQbdE6qfKHidSY0UzwKtNrQaUdAmp2IpnBpQ0vgk0ArQ==}
     peerDependencies:
       yjs: ^13
     dependencies: