From dff68b9aae8b03979979470d4ad3ca6f66e6ac2c Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Fri, 21 Feb 2025 17:16:53 +0800 Subject: [PATCH] fix(core): blocksuite editor runtime configs in correct timing (#10344) --- .../blocksuite-editor-container.tsx | 2 +- .../block-suite-editor/blocksuite-editor.tsx | 56 ++++++++----------- .../workspace/detail-page/detail-page.tsx | 7 +-- .../workspace/detail/mobile-detail-page.tsx | 16 +++--- .../view/doc-preview/doc-peek-view.tsx | 5 +- 5 files changed, 37 insertions(+), 49 deletions(-) diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx index 5302a4bef3..db9df44a53 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx @@ -42,7 +42,7 @@ export interface AffineEditorContainer extends HTMLElement { page: Store; doc: Store; docTitle: DocTitle; - host: EditorHost; + host?: EditorHost; model: RootBlockModel | null; updateComplete: Promise; mode: DocMode; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx index 0d5f0f926a..4bf4890832 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx @@ -67,46 +67,38 @@ const BlockSuiteEditorImpl = ({ let canceled = false; const disposableGroup = new DisposableGroup(); - if (onEditorReady) { - // Invoke onLoad once the editor has been mounted to the DOM. - editor.updateComplete - .then(() => { - if (canceled) { - return; - } - // host should be ready + // Invoke onLoad once the editor has been mounted to the DOM. + if (canceled) { + return; + } - // provide image proxy endpoint to blocksuite - const imageProxyUrl = new URL( - BUILD_CONFIG.imageProxyUrl, - server.baseUrl - ).toString(); - const linkPreviewUrl = new URL( - BUILD_CONFIG.linkPreviewUrl, - server.baseUrl - ).toString(); + // provide image proxy endpoint to blocksuite + const imageProxyUrl = new URL( + BUILD_CONFIG.imageProxyUrl, + server.baseUrl + ).toString(); - editor.host?.std.clipboard.use( - customImageProxyMiddleware(imageProxyUrl) - ); + const linkPreviewUrl = new URL( + BUILD_CONFIG.linkPreviewUrl, + server.baseUrl + ).toString(); - page.get(LinkPreviewerService).setEndpoint(linkPreviewUrl); + editor.std.clipboard.use(customImageProxyMiddleware(imageProxyUrl)); + page.get(LinkPreviewerService).setEndpoint(linkPreviewUrl); + page.get(ImageProxyService).setImageProxyURL(imageProxyUrl); - page.get(ImageProxyService).setImageProxyURL(imageProxyUrl); - - return editor.host?.updateComplete; - }) - .then(() => { - if (canceled) { - return; - } + editor.updateComplete + .then(() => { + if (onEditorReady) { const dispose = onEditorReady(editor); if (dispose) { disposableGroup.add(dispose); } - }) - .catch(console.error); - } + } + }) + .catch(error => { + console.error('Error updating editor', error); + }); return () => { canceled = true; diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx index be87018e99..00ee9fd7e6 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx @@ -167,10 +167,7 @@ const DetailPageImpl = memo(function DetailPageImpl() { const onLoad = useCallback( (editorContainer: AffineEditorContainer) => { - // blocksuite editor host - const editorHost = editorContainer.host; - - const std = editorHost?.std; + const std = editorContainer.std; const disposable = new DisposableGroup(); if (std) { const refNodeSlots = std.getOptional(RefNodeSlotsProvider); @@ -179,7 +176,7 @@ const DetailPageImpl = memo(function DetailPageImpl() { // the event should not be emitted by AffineReference refNodeSlots.docLinkClicked.on( ({ pageId, params, openMode, event, host }) => { - if (host !== editorHost) { + if (host !== editorContainer.host) { return; } openMode ??= diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx index 9b055ed0f9..10979b3de4 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx @@ -139,9 +139,6 @@ const DetailPageImpl = () => { const onLoad = useCallback( (editorContainer: AffineEditorContainer) => { - // blocksuite editor host - const editorHost = editorContainer.host; - // provide image proxy endpoint to blocksuite const imageProxyUrl = new URL( BUILD_CONFIG.imageProxyUrl, @@ -153,14 +150,19 @@ const DetailPageImpl = () => { server.baseUrl ).toString(); - editorHost?.std.clipboard.use(customImageProxyMiddleware(imageProxyUrl)); - editorHost?.doc.get(ImageProxyService).setImageProxyURL(imageProxyUrl); + editorContainer.std.clipboard.use( + customImageProxyMiddleware(imageProxyUrl) + ); + editorContainer.doc + .get(ImageProxyService) + .setImageProxyURL(imageProxyUrl); // provide link preview endpoint to blocksuite - editorHost?.doc.get(LinkPreviewerService).setEndpoint(linkPreviewUrl); + editorContainer.doc.get(LinkPreviewerService).setEndpoint(linkPreviewUrl); // provide page mode and updated date to blocksuite - const refNodeService = editorHost?.std.getOptional(RefNodeSlotsProvider); + const refNodeService = + editorContainer.std.getOptional(RefNodeSlotsProvider); const disposable = new DisposableGroup(); if (refNodeService) { disposable.add( diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx index b781d1e41f..9ae14c5209 100644 --- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx @@ -96,12 +96,9 @@ function DocPeekPreviewEditor({ const handleOnEditorReady = useCallback( (editorContainer: AffineEditorContainer) => { - if (!editorContainer.host) { - return; - } const disposableGroup = new DisposableGroup(); const refNodeSlots = - editorContainer.host.std.getOptional(RefNodeSlotsProvider); + editorContainer.std.getOptional(RefNodeSlotsProvider); if (!refNodeSlots) return; // doc change event inside peek view should be handled by peek view disposableGroup.add(