diff --git a/packages/app/package.json b/packages/app/package.json index e33b403f95..f713e830d1 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx index 7b3f07fcfe..5f03b6c85e 100644 --- a/packages/app/src/components/quick-search/footer.tsx +++ b/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 ( { - const pageId = await createPage?.(); + const pageId = await createPage({ title: query }); if (pageId) { openPage(pageId); } diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 1045586547..02f7c093f7 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/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 = () => { { - const pageId = await createPage?.(); + const pageId = await createPage(); if (pageId) { openPage(pageId); } diff --git a/packages/app/src/hooks/use-page-helper.ts b/packages/app/src/hooks/use-page-helper.ts index 58c2c5497c..e4bf4f2957 100644 --- a/packages/app/src/hooks/use-page-helper.ts +++ b/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; + createPage: (params?: { + pageId?: string; + title?: string; + }) => Promise; 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) { diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx index 6b1dfe1586..560220e5a3 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx +++ b/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(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); diff --git a/packages/app/src/pages/workspace/[workspaceId]/index.tsx b/packages/app/src/pages/workspace/[workspaceId]/index.tsx index b3bf95f8c5..39a1ad121b 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/index.tsx +++ b/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(() => { diff --git a/packages/app/src/providers/app-state-provider/context.ts b/packages/app/src/providers/app-state-provider/context.ts index 054472d1a1..5dda7ddbd6 100644 --- a/packages/app/src/providers/app-state-provider/context.ts +++ b/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; loadPage: (pageId: string) => Promise; - createPage: (pageId?: string) => Promise; } export const AppState = createContext({ @@ -57,7 +56,6 @@ export const AppState = createContext({ 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: () => {}, diff --git a/packages/app/src/providers/app-state-provider/hooks.ts b/packages/app/src/providers/app-state-provider/hooks.ts index 59d1ac318b..6996bd03ef 100644 --- a/packages/app/src/providers/app-state-provider/hooks.ts +++ b/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; } diff --git a/packages/app/src/providers/app-state-provider/provider.tsx b/packages/app/src/providers/app-state-provider/provider.tsx index 386f7becb7..cd67d11365 100644 --- a/packages/app/src/providers/app-state-provider/provider.tsx +++ b/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(() => - Promise.resolve(null) - ); - - createPage.current = ( - pageId: string = uuidv4IdGenerator().replaceAll('-', '') - ) => - new Promise(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] ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5b079ef53..918152b6c3 100644 --- a/pnpm-lock.yaml +++ b/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: