From 449b08c9c207e76edb23c4bbbd0bea81bab97e18 Mon Sep 17 00:00:00 2001 From: Yifeng Wang Date: Fri, 6 Jan 2023 13:26:10 +0800 Subject: [PATCH 1/6] feat: compat with surface block structure --- packages/app/src/components/import/index.tsx | 5 +++-- packages/app/src/hooks/use-props-updated.ts | 2 +- packages/app/src/pages/playground/templates.tsx | 5 +++-- .../app/src/pages/workspace/[workspaceId]/[pageId].tsx | 9 +++++---- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index 7387cb5de..96a383dad 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -31,9 +31,10 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => { setTimeout(() => { const editor = document.querySelector('editor-container'); if (editor) { - const groupId = page.addBlock({ flavour: 'affine:group' }, pageId); + page.addBlock({ flavour: 'affine:surface' }, null); + const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId); // TODO blocksuite should offer a method to import markdown from store - editor.clipboard.importMarkdown(template.source, `${groupId}`); + editor.clipboard.importMarkdown(template.source, `${frameId}`); page.resetHistory(); editor.requestUpdate(); } diff --git a/packages/app/src/hooks/use-props-updated.ts b/packages/app/src/hooks/use-props-updated.ts index d76ada43d..ad6fc2525 100644 --- a/packages/app/src/hooks/use-props-updated.ts +++ b/packages/app/src/hooks/use-props-updated.ts @@ -17,7 +17,7 @@ export const usePropsUpdated: UsePropsUpdated = () => { return; } setTimeout(() => { - editor.model?.propsUpdated.on(() => { + editor.pageBlockModel?.propsUpdated.on(() => { callbackQueue.current.forEach(callback => { callback(editor); }); diff --git a/packages/app/src/pages/playground/templates.tsx b/packages/app/src/pages/playground/templates.tsx index 051749887..d32cbaa3f 100644 --- a/packages/app/src/pages/playground/templates.tsx +++ b/packages/app/src/pages/playground/templates.tsx @@ -46,9 +46,10 @@ const All = () => { setTimeout(() => { const editor = document.querySelector('editor-container'); if (editor) { - const groupId = page.addBlock({ flavour: 'affine:group' }, pageId); + page.addBlock({ flavour: 'affine:surface' }, null); + const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId); // TODO blocksuite should offer a method to import markdown from store - editor.clipboard.importMarkdown(template.source, `${groupId}`); + editor.clipboard.importMarkdown(template.source, `${frameId}`); page.resetHistory(); editor.requestUpdate(); } diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx index 619f8e037..998ec2994 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx @@ -55,14 +55,15 @@ const Page: NextPageWithLayout = () => { flavour: 'affine:page', title, }); - const groupId = currentPage!.addBlock( - { flavour: 'affine:group' }, + currentPage!.addBlock({ flavour: 'affine:surface' }, null); + const frameId = currentPage!.addBlock( + { flavour: 'affine:frame' }, pageId ); - currentPage!.addBlock({ flavour: 'affine:group' }, pageId); + currentPage!.addBlock({ flavour: 'affine:frame' }, pageId); // If this is a first page in workspace, init an introduction markdown if (isFirstPage) { - editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`); + editor.clipboard.importMarkdown(exampleMarkdown, `${frameId}`); currentWorkspace!.setPageMeta(currentPage!.id, { title }); } currentPage!.resetHistory(); From cc13bf8265255564b5668320afe070f5cf351803 Mon Sep 17 00:00:00 2001 From: himself65 Date: Fri, 6 Jan 2023 14:37:21 +0800 Subject: [PATCH 2/6] chore: bump version --- packages/app/package.json | 6 ++-- pnpm-lock.yaml | 69 +++++++++++++++++++++++++++++++++------ 2 files changed, 62 insertions(+), 13 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index ab9571a95..9dac686ae 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -11,10 +11,10 @@ }, "dependencies": { "@affine/datacenter": "workspace:*", - "@blocksuite/blocks": "0.3.1", - "@blocksuite/editor": "0.3.1", + "@blocksuite/blocks": "=0.3.1-20230106060050-1aad55d", + "@blocksuite/editor": "=0.3.1-20230106060050-1aad55d", "@blocksuite/icons": "^2.0.2", - "@blocksuite/store": "0.3.1", + "@blocksuite/store": "=0.3.1-20230106060050-1aad55d", "@emotion/css": "^11.10.0", "@emotion/react": "^11.10.4", "@emotion/server": "^11.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cbf408c5d..4ccb8a629 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,10 +45,10 @@ importers: packages/app: specifiers: '@affine/datacenter': workspace:* - '@blocksuite/blocks': 0.3.1 - '@blocksuite/editor': 0.3.1 + '@blocksuite/blocks': '=0.3.1-20230106060050-1aad55d' + '@blocksuite/editor': '=0.3.1-20230106060050-1aad55d' '@blocksuite/icons': ^2.0.2 - '@blocksuite/store': 0.3.1 + '@blocksuite/store': '=0.3.1-20230106060050-1aad55d' '@emotion/css': ^11.10.0 '@emotion/react': ^11.10.4 '@emotion/server': ^11.10.0 @@ -87,10 +87,10 @@ importers: yjs: ^13.5.44 dependencies: '@affine/datacenter': link:../data-center - '@blocksuite/blocks': 0.3.1_yjs@13.5.44 - '@blocksuite/editor': 0.3.1_yjs@13.5.44 + '@blocksuite/blocks': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 + '@blocksuite/editor': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 '@blocksuite/icons': 2.0.4_w5j4k42lgipnm43s3brx6h3c34 - '@blocksuite/store': 0.3.1_yjs@13.5.44 + '@blocksuite/store': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 '@emotion/css': 11.10.0 '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34 '@emotion/server': 11.10.0_@emotion+css@11.10.0 @@ -1496,6 +1496,26 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true + /@blocksuite/blocks/0.3.1-20230106060050-1aad55d_yjs@13.5.44: + resolution: {integrity: sha512-qRNXmhjw+GAGsV1mI2XXPxYTlHfsFHv9ttTCNQ6IIcxvc5Hh6lWmdwVibxvlpYUkgEc1zv3/GxOEsR/ngpZXzQ==} + dependencies: + '@blocksuite/phasor': 0.3.1_yjs@13.5.44 + '@blocksuite/store': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 + '@tldraw/intersect': 1.8.0 + autosize: 5.0.2 + highlight.js: 11.7.0 + hotkeys-js: 3.10.1 + lit: 2.5.0 + perfect-freehand: 1.2.0 + quill: 1.3.7 + quill-cursors: 4.0.0 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + - yjs + dev: false + /@blocksuite/blocks/0.3.1_yjs@13.5.44: resolution: {integrity: sha512-b0dGz2MG4yIgngJPRumaMY58wAsd2FEVSZl3tpCXlagK9I0HD165Bq70PxcaRHVjBSV1Gf29ZVHUF6BVTYogPw==} dependencies: @@ -1515,11 +1535,11 @@ packages: - yjs dev: false - /@blocksuite/editor/0.3.1_yjs@13.5.44: - resolution: {integrity: sha512-ycKcyvPW6R8R2GZOFneGH1xNi5gJBx5WtWjW9YwcQslFzXVWMCCBips1Bud2uL4kkbWQoodyua6k2vsXxGAKLw==} + /@blocksuite/editor/0.3.1-20230106060050-1aad55d_yjs@13.5.44: + resolution: {integrity: sha512-wSlAF9XVxIkHFJ1qCzn7oQ/gwXybFYMrzRl35UTJV509D+DuWZefRZWvpdIDCOUJ24uQscr1HxwsON11ltfWgA==} dependencies: - '@blocksuite/blocks': 0.3.1_yjs@13.5.44 - '@blocksuite/store': 0.3.1_yjs@13.5.44 + '@blocksuite/blocks': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 + '@blocksuite/store': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 lit: 2.5.0 marked: 4.2.5 turndown: 7.1.1 @@ -1540,6 +1560,35 @@ packages: react: 18.2.0 dev: false + /@blocksuite/phasor/0.3.1_yjs@13.5.44: + resolution: {integrity: sha512-aJmAQn2qoF6HxFZWgq7xa/pWVyzg3MmD6dynIHAKdfN7rBdKk3PNA+lRX919QkD2e270N/zgHEGFFQI1Nj5xrA==} + peerDependencies: + yjs: ^13 + dependencies: + yjs: 13.5.44 + dev: false + + /@blocksuite/store/0.3.1-20230106060050-1aad55d_yjs@13.5.44: + resolution: {integrity: sha512-dRy+YzlWMwiYq0Im9NogK/NTkV+NKK+lgejYq56m6nH2m16/G9AMODqP0oQy/XeYFevUpL9i9RdV0rHsJ2gc0Q==} + peerDependencies: + yjs: ^13 + dependencies: + '@types/flexsearch': 0.7.3 + '@types/quill': 1.3.10 + buffer: 6.0.3 + flexsearch: 0.7.21 + idb-keyval: 6.2.0 + ky: 0.33.1 + lib0: 0.2.58 + y-protocols: 1.0.5 + y-webrtc: 10.2.3 + yjs: 13.5.44 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + dev: false + /@blocksuite/store/0.3.1_yjs@13.5.44: resolution: {integrity: sha512-kynVTDfNCSChz2JI2rtGHxRIV2YrLzvAgVajcbfDVCuXKG0siBoEjLasG1a0kvevbvW/FabrNAj+xaIplklioA==} peerDependencies: From b1a39fa2e77a02c7f9b7a29a43df66c0b734b20c Mon Sep 17 00:00:00 2001 From: x1a0t <405028157@qq.com> Date: Fri, 6 Jan 2023 15:03:42 +0800 Subject: [PATCH 3/6] feat: compatiable with async importMarkdown() --- packages/app/src/hooks/use-props-updated.ts | 2 +- packages/app/src/pages/playground/templates.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/app/src/hooks/use-props-updated.ts b/packages/app/src/hooks/use-props-updated.ts index ad6fc2525..f0df6ffd4 100644 --- a/packages/app/src/hooks/use-props-updated.ts +++ b/packages/app/src/hooks/use-props-updated.ts @@ -26,7 +26,7 @@ export const usePropsUpdated: UsePropsUpdated = () => { return () => { callbackQueue.current = []; - editor?.model?.propsUpdated.dispose(); + editor?.model?.propsUpdated?.dispose(); }; }, [editor]); diff --git a/packages/app/src/pages/playground/templates.tsx b/packages/app/src/pages/playground/templates.tsx index d32cbaa3f..a83d25e51 100644 --- a/packages/app/src/pages/playground/templates.tsx +++ b/packages/app/src/pages/playground/templates.tsx @@ -43,13 +43,16 @@ const All = () => { if (page) { currentWorkspace?.setPageMeta(page.id, { title }); if (page && page.root === null) { - setTimeout(() => { + setTimeout(async () => { const editor = document.querySelector('editor-container'); if (editor) { page.addBlock({ flavour: 'affine:surface' }, null); const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId); // TODO blocksuite should offer a method to import markdown from store - editor.clipboard.importMarkdown(template.source, `${frameId}`); + await editor.clipboard.importMarkdown( + template.source, + `${frameId}` + ); page.resetHistory(); editor.requestUpdate(); } From 274075d7745797742b607614c3e9476a67e02ab6 Mon Sep 17 00:00:00 2001 From: himself65 Date: Fri, 6 Jan 2023 15:29:30 +0800 Subject: [PATCH 4/6] fix: code --- packages/app/src/components/header/editor-header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/components/header/editor-header.tsx b/packages/app/src/components/header/editor-header.tsx index c1b52ec46..7f433de46 100644 --- a/packages/app/src/components/header/editor-header.tsx +++ b/packages/app/src/components/header/editor-header.tsx @@ -22,14 +22,14 @@ export const EditorHeader = () => { useEffect(() => { onPropsUpdated(editor => { - setTitle(editor.model?.title || 'Untitled'); + setTitle(editor.pageBlockModel?.title || 'Untitled'); }); }, [onPropsUpdated]); useEffect(() => { setTimeout(() => { // If first time in, need to wait for editor to be inserted into DOM - setTitle(editor?.model?.title || 'Untitled'); + setTitle(editor?.pageBlockModel?.title || 'Untitled'); }, 300); }, [editor]); From 49fdaf4a18e1605431158eddf1352c1bf2951b05 Mon Sep 17 00:00:00 2001 From: x1a0t <405028157@qq.com> Date: Fri, 6 Jan 2023 16:07:15 +0800 Subject: [PATCH 5/6] fix: build error --- packages/app/src/hooks/use-props-updated.ts | 2 +- packages/data-center/package.json | 4 +- pnpm-lock.yaml | 48 ++------------------- 3 files changed, 7 insertions(+), 47 deletions(-) diff --git a/packages/app/src/hooks/use-props-updated.ts b/packages/app/src/hooks/use-props-updated.ts index f0df6ffd4..1bbd8d2cd 100644 --- a/packages/app/src/hooks/use-props-updated.ts +++ b/packages/app/src/hooks/use-props-updated.ts @@ -26,7 +26,7 @@ export const usePropsUpdated: UsePropsUpdated = () => { return () => { callbackQueue.current = []; - editor?.model?.propsUpdated?.dispose(); + editor?.pageBlockModel?.propsUpdated?.dispose(); }; }, [editor]); diff --git a/packages/data-center/package.json b/packages/data-center/package.json index 5d0ebc843..fe639b306 100644 --- a/packages/data-center/package.json +++ b/packages/data-center/package.json @@ -26,8 +26,8 @@ "typescript": "^4.8.4" }, "dependencies": { - "@blocksuite/blocks": "^0.3.1", - "@blocksuite/store": "^0.3.1", + "@blocksuite/blocks": "=0.3.1-20230106060050-1aad55d", + "@blocksuite/store": "=0.3.1-20230106060050-1aad55d", "debug": "^4.3.4", "encoding": "^0.1.13", "firebase": "^9.15.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4ccb8a629..26f0cce6b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,8 +131,8 @@ importers: packages/data-center: specifiers: - '@blocksuite/blocks': ^0.3.1 - '@blocksuite/store': ^0.3.1 + '@blocksuite/blocks': '=0.3.1-20230106060050-1aad55d' + '@blocksuite/store': '=0.3.1-20230106060050-1aad55d' '@playwright/test': ^1.29.1 '@types/debug': ^4.1.7 debug: ^4.3.4 @@ -148,8 +148,8 @@ importers: y-protocols: ^1.0.5 yjs: ^13.5.44 dependencies: - '@blocksuite/blocks': 0.3.1_yjs@13.5.44 - '@blocksuite/store': 0.3.1_yjs@13.5.44 + '@blocksuite/blocks': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 + '@blocksuite/store': 0.3.1-20230106060050-1aad55d_yjs@13.5.44 debug: 4.3.4 encoding: 0.1.13 firebase: 9.15.0_encoding@0.1.13 @@ -1516,25 +1516,6 @@ packages: - yjs dev: false - /@blocksuite/blocks/0.3.1_yjs@13.5.44: - resolution: {integrity: sha512-b0dGz2MG4yIgngJPRumaMY58wAsd2FEVSZl3tpCXlagK9I0HD165Bq70PxcaRHVjBSV1Gf29ZVHUF6BVTYogPw==} - dependencies: - '@blocksuite/store': 0.3.1_yjs@13.5.44 - '@tldraw/intersect': 1.8.0 - autosize: 5.0.2 - highlight.js: 11.7.0 - hotkeys-js: 3.10.1 - lit: 2.5.0 - perfect-freehand: 1.2.0 - quill: 1.3.7 - quill-cursors: 4.0.0 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - - yjs - dev: false - /@blocksuite/editor/0.3.1-20230106060050-1aad55d_yjs@13.5.44: resolution: {integrity: sha512-wSlAF9XVxIkHFJ1qCzn7oQ/gwXybFYMrzRl35UTJV509D+DuWZefRZWvpdIDCOUJ24uQscr1HxwsON11ltfWgA==} dependencies: @@ -1589,27 +1570,6 @@ packages: - utf-8-validate dev: false - /@blocksuite/store/0.3.1_yjs@13.5.44: - resolution: {integrity: sha512-kynVTDfNCSChz2JI2rtGHxRIV2YrLzvAgVajcbfDVCuXKG0siBoEjLasG1a0kvevbvW/FabrNAj+xaIplklioA==} - peerDependencies: - yjs: ^13 - dependencies: - '@types/flexsearch': 0.7.3 - '@types/quill': 1.3.10 - buffer: 6.0.3 - flexsearch: 0.7.21 - idb-keyval: 6.2.0 - ky: 0.33.1 - lib0: 0.2.58 - y-protocols: 1.0.5 - y-webrtc: 10.2.3 - yjs: 13.5.44 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - dev: false - /@changesets/apply-release-plan/6.1.3: resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==} dependencies: From 82c4a35648a824a1a93a868d57766ff5a8c45a3f Mon Sep 17 00:00:00 2001 From: x1a0t <405028157@qq.com> Date: Fri, 6 Jan 2023 16:31:27 +0800 Subject: [PATCH 6/6] fix: unit test --- tests/quick-search.spec.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts index 242e09bc5..1fd1b1efb 100644 --- a/tests/quick-search.spec.ts +++ b/tests/quick-search.spec.ts @@ -7,10 +7,13 @@ loadPage(); const openQuickSearchByShortcut = async (page: Page) => await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 })); -async function assertTitleTexts(page: Page, texts: string[]) { - const actual = await page - .locator('.affine-default-page-block-title') - .allTextContents(); +async function assertTitleTexts(page: Page, texts: string) { + const actual = await page.evaluate(() => { + const titleElement = ( + document.querySelector('.affine-default-page-block-title') + ); + return titleElement.value; + }); expect(actual).toEqual(texts); } async function assertResultList(page: Page, texts: string[]) { @@ -55,7 +58,7 @@ test.describe('Add new page in quick search', () => { const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); await addNewPage.click(); await page.waitForTimeout(200); - await assertTitleTexts(page, ['']); + await assertTitleTexts(page, ''); }); test('Create a new page with keyword', async ({ page }) => { @@ -65,7 +68,7 @@ test.describe('Add new page in quick search', () => { const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); await addNewPage.click(); await page.waitForTimeout(200); - await assertTitleTexts(page, ['test123456']); + await assertTitleTexts(page, 'test123456'); }); }); @@ -81,6 +84,6 @@ test.describe('Search and select', () => { await page.keyboard.insertText('test123456'); await assertResultList(page, ['test123456']); await page.keyboard.press('Enter', { delay: 50 }); - await assertTitleTexts(page, ['test123456']); + await assertTitleTexts(page, 'test123456'); }); });