From e11e8277ca705f197edb6a31fbd8092f05657f68 Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Thu, 28 Dec 2023 08:36:35 +0000 Subject: [PATCH] feat: add useBlocksuiteEditor hooks (#5366) --- .../components/block-suite-editor/index.jotai.ts | 4 ---- .../src/components/block-suite-editor/index.tsx | 10 +++------- .../editor-sidebar/extensions/copilot.tsx | 11 +++++------ .../detail-page/editor-sidebar/extensions/frame.tsx | 12 ++++++------ .../editor-sidebar/extensions/outline.tsx | 11 +++++------ .../frontend/hooks/src/use-block-suite-editor.ts | 13 +++++++++++++ 6 files changed, 32 insertions(+), 29 deletions(-) delete mode 100644 packages/frontend/component/src/components/block-suite-editor/index.jotai.ts create mode 100644 packages/frontend/hooks/src/use-block-suite-editor.ts diff --git a/packages/frontend/component/src/components/block-suite-editor/index.jotai.ts b/packages/frontend/component/src/components/block-suite-editor/index.jotai.ts deleted file mode 100644 index 8f3af298e4..0000000000 --- a/packages/frontend/component/src/components/block-suite-editor/index.jotai.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { AffineEditorContainer } from '@blocksuite/presets'; -import { atom } from 'jotai'; - -export const editorContainerAtom = atom(null); diff --git a/packages/frontend/component/src/components/block-suite-editor/index.tsx b/packages/frontend/component/src/components/block-suite-editor/index.tsx index 43bec257af..4b5fdbe92c 100644 --- a/packages/frontend/component/src/components/block-suite-editor/index.tsx +++ b/packages/frontend/component/src/components/block-suite-editor/index.tsx @@ -1,9 +1,9 @@ import { assertExists } from '@blocksuite/global/utils'; import { AffineEditorContainer } from '@blocksuite/presets'; import type { Page } from '@blocksuite/store'; +import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor'; import clsx from 'clsx'; import { use } from 'foxact/use'; -import { useAtom } from 'jotai'; import type { CSSProperties, ReactElement } from 'react'; import { memo, @@ -20,11 +20,8 @@ import { blockSuiteEditorHeaderStyle, blockSuiteEditorStyle, } from './index.css'; -import { editorContainerAtom } from './index.jotai'; import { editorSpecs } from './specs'; -export { editorContainerAtom } from './index.jotai'; - interface BlockElement extends Element { path: string[]; } @@ -151,7 +148,7 @@ const BlockSuiteEditorImpl = ({ }: EditorProps): ReactElement => { usePageRoot(page); - const [, setEditorContainer] = useAtom(editorContainerAtom); + const [, setEditorContainer] = useBlocksuiteEditor(); assertExists(page, 'page should not be null'); const editorRef = useRef(null); if (editorRef.current === null) { @@ -191,8 +188,6 @@ const BlockSuiteEditorImpl = ({ const containerRef = useRef(null); useEffect(() => { - const editor = editorRef.current; - assertExists(editor); const container = containerRef.current; if (!container) { return; @@ -201,6 +196,7 @@ const BlockSuiteEditorImpl = ({ setEditorContainer(editor); return () => { editor.remove(); + setEditorContainer(null); }; }, [editor, setEditorContainer]); diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx index db04dbce69..01f1068cec 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx @@ -1,8 +1,7 @@ -import { editorContainerAtom } from '@affine/component/block-suite-editor'; import { assertExists } from '@blocksuite/global/utils'; import { AiIcon } from '@blocksuite/icons'; import { CopilotPanel } from '@blocksuite/presets'; -import { useAtom } from 'jotai'; +import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor'; import { useCallback, useRef } from 'react'; import type { EditorExtension } from '../types'; @@ -11,7 +10,7 @@ import * as styles from './outline.css'; // A wrapper for CopilotPanel const EditorCopilotPanel = () => { const copilotPanelRef = useRef(null); - const [editorContainer] = useAtom(editorContainerAtom); + const [editor] = useBlocksuiteEditor(); const onRefChange = useCallback((container: HTMLDivElement | null) => { if (container) { @@ -23,7 +22,7 @@ const EditorCopilotPanel = () => { } }, []); - if (!editorContainer) { + if (!editor) { return; } @@ -31,8 +30,8 @@ const EditorCopilotPanel = () => { copilotPanelRef.current = new CopilotPanel(); } - if (editorContainer !== copilotPanelRef.current?.editor) { - (copilotPanelRef.current as CopilotPanel).editor = editorContainer; + if (editor !== copilotPanelRef.current?.editor) { + (copilotPanelRef.current as CopilotPanel).editor = editor; // (copilotPanelRef.current as CopilotPanel).fitPadding = [20, 20, 20, 20]; } diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx index 1a661bd18b..dc9263e141 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx @@ -1,8 +1,7 @@ -import { editorContainerAtom } from '@affine/component/block-suite-editor'; import { assertExists } from '@blocksuite/global/utils'; import { FrameIcon } from '@blocksuite/icons'; import { FramePanel } from '@blocksuite/presets'; -import { useAtom } from 'jotai'; +import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor'; import { useCallback, useRef } from 'react'; import type { EditorExtension } from '../types'; @@ -11,7 +10,8 @@ import * as styles from './frame.css'; // A wrapper for FramePanel const EditorFramePanel = () => { const framePanelRef = useRef(null); - const [editorContainer] = useAtom(editorContainerAtom); + + const [editor] = useBlocksuiteEditor(); const onRefChange = useCallback((container: HTMLDivElement | null) => { if (container) { @@ -20,7 +20,7 @@ const EditorFramePanel = () => { } }, []); - if (!editorContainer) { + if (!editor) { return; } @@ -28,8 +28,8 @@ const EditorFramePanel = () => { framePanelRef.current = new FramePanel(); } - if (editorContainer !== framePanelRef.current?.editor) { - (framePanelRef.current as FramePanel).editor = editorContainer; + if (editor !== framePanelRef.current?.editor) { + (framePanelRef.current as FramePanel).editor = editor; (framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20]; } diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx index f28c281760..cae97db2a3 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx @@ -1,8 +1,7 @@ -import { editorContainerAtom } from '@affine/component/block-suite-editor'; import { assertExists } from '@blocksuite/global/utils'; import { TocIcon } from '@blocksuite/icons'; import { TOCPanel } from '@blocksuite/presets'; -import { useAtom } from 'jotai'; +import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor'; import { useCallback, useRef } from 'react'; import type { EditorExtension } from '../types'; @@ -11,7 +10,7 @@ import * as styles from './outline.css'; // A wrapper for TOCNotesPanel const EditorOutline = () => { const tocPanelRef = useRef(null); - const [editorContainer] = useAtom(editorContainerAtom); + const [editor] = useBlocksuiteEditor(); const onRefChange = useCallback((container: HTMLDivElement | null) => { if (container) { @@ -20,7 +19,7 @@ const EditorOutline = () => { } }, []); - if (!editorContainer) { + if (!editor) { return; } @@ -28,8 +27,8 @@ const EditorOutline = () => { tocPanelRef.current = new TOCPanel(); } - if (editorContainer !== tocPanelRef.current?.editor) { - (tocPanelRef.current as TOCPanel).editor = editorContainer; + if (editor !== tocPanelRef.current?.editor) { + (tocPanelRef.current as TOCPanel).editor = editor; (tocPanelRef.current as TOCPanel).fitPadding = [20, 20, 20, 20]; } diff --git a/packages/frontend/hooks/src/use-block-suite-editor.ts b/packages/frontend/hooks/src/use-block-suite-editor.ts new file mode 100644 index 0000000000..f48dcbd57f --- /dev/null +++ b/packages/frontend/hooks/src/use-block-suite-editor.ts @@ -0,0 +1,13 @@ +import type { AffineEditorContainer } from '@blocksuite/presets'; +import { atom, type SetStateAction, useAtom } from 'jotai'; + +const editorContainerAtom = atom(null); + +export function useBlocksuiteEditor(): [ + AffineEditorContainer | null, + React.Dispatch>, +] { + const [editorContainer, setEditorContainer] = useAtom(editorContainerAtom); + + return [editorContainer, setEditorContainer]; +}