luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add useBlocksuiteEditor hooks (#5366)

Browse Source
This commit is contained in:
JimmFly
2023-12-28 08:36:35 +00:00
parent 431f7cfac9
commit e11e8277ca
6 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/component/src/components/block-suite-editor/index.jotai.ts
View File

@@ -1,4 +0,0 @@
import type { AffineEditorContainer } from '@blocksuite/presets';
import { atom } from 'jotai';
export const editorContainerAtom = atom<AffineEditorContainer | null>(null);

10
packages/frontend/component/src/components/block-suite-editor/index.tsx
View File

@@ -1,9 +1,9 @@
import { assertExists } from '@blocksuite/global/utils'; import { assertExists } from '@blocksuite/global/utils';
import { AffineEditorContainer } from '@blocksuite/presets'; import { AffineEditorContainer } from '@blocksuite/presets';
import type { Page } from '@blocksuite/store'; import type { Page } from '@blocksuite/store';
import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
import clsx from 'clsx'; import clsx from 'clsx';
import { use } from 'foxact/use'; import { use } from 'foxact/use';
import { useAtom } from 'jotai';
import type { CSSProperties, ReactElement } from 'react'; import type { CSSProperties, ReactElement } from 'react';
import { import {
memo, memo,
@@ -20,11 +20,8 @@ import {
blockSuiteEditorHeaderStyle, blockSuiteEditorHeaderStyle,
blockSuiteEditorStyle, blockSuiteEditorStyle,
} from './index.css'; } from './index.css';
import { editorContainerAtom } from './index.jotai';
import { editorSpecs } from './specs'; import { editorSpecs } from './specs';
export { editorContainerAtom } from './index.jotai';
interface BlockElement extends Element { interface BlockElement extends Element {
path: string[]; path: string[];
} }
@@ -151,7 +148,7 @@ const BlockSuiteEditorImpl = ({
}: EditorProps): ReactElement => { }: EditorProps): ReactElement => {
usePageRoot(page); usePageRoot(page);
const [, setEditorContainer] = useAtom(editorContainerAtom); const [, setEditorContainer] = useBlocksuiteEditor();
assertExists(page, 'page should not be null'); assertExists(page, 'page should not be null');
const editorRef = useRef<AffineEditorContainer | null>(null); const editorRef = useRef<AffineEditorContainer | null>(null);
if (editorRef.current === null) { if (editorRef.current === null) {
@@ -191,8 +188,6 @@ const BlockSuiteEditorImpl = ({
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
const editor = editorRef.current;
assertExists(editor);
const container = containerRef.current; const container = containerRef.current;
if (!container) { if (!container) {
return; return;
@@ -201,6 +196,7 @@ const BlockSuiteEditorImpl = ({
setEditorContainer(editor); setEditorContainer(editor);
return () => { return () => {
editor.remove(); editor.remove();
setEditorContainer(null);
}; };
}, [editor, setEditorContainer]); }, [editor, setEditorContainer]);

11
packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.tsx
View File

@@ -1,8 +1,7 @@
import { editorContainerAtom } from '@affine/component/block-suite-editor';
import { assertExists } from '@blocksuite/global/utils'; import { assertExists } from '@blocksuite/global/utils';
import { AiIcon } from '@blocksuite/icons'; import { AiIcon } from '@blocksuite/icons';
import { CopilotPanel } from '@blocksuite/presets'; import { CopilotPanel } from '@blocksuite/presets';
import { useAtom } from 'jotai'; import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import type { EditorExtension } from '../types'; import type { EditorExtension } from '../types';
@@ -11,7 +10,7 @@ import * as styles from './outline.css';
// A wrapper for CopilotPanel // A wrapper for CopilotPanel
const EditorCopilotPanel = () => { const EditorCopilotPanel = () => {
const copilotPanelRef = useRef<CopilotPanel | null>(null); const copilotPanelRef = useRef<CopilotPanel | null>(null);
const [editorContainer] = useAtom(editorContainerAtom); const [editor] = useBlocksuiteEditor();
const onRefChange = useCallback((container: HTMLDivElement | null) => { const onRefChange = useCallback((container: HTMLDivElement | null) => {
if (container) { if (container) {
@@ -23,7 +22,7 @@ const EditorCopilotPanel = () => {
} }
}, []); }, []);
if (!editorContainer) { if (!editor) {
return; return;
} }
@@ -31,8 +30,8 @@ const EditorCopilotPanel = () => {
copilotPanelRef.current = new CopilotPanel(); copilotPanelRef.current = new CopilotPanel();
} }
if (editorContainer !== copilotPanelRef.current?.editor) { if (editor !== copilotPanelRef.current?.editor) {
(copilotPanelRef.current as CopilotPanel).editor = editorContainer; (copilotPanelRef.current as CopilotPanel).editor = editor;
// (copilotPanelRef.current as CopilotPanel).fitPadding = [20, 20, 20, 20]; // (copilotPanelRef.current as CopilotPanel).fitPadding = [20, 20, 20, 20];
} }

12
packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.tsx
View File

@@ -1,8 +1,7 @@
import { editorContainerAtom } from '@affine/component/block-suite-editor';
import { assertExists } from '@blocksuite/global/utils'; import { assertExists } from '@blocksuite/global/utils';
import { FrameIcon } from '@blocksuite/icons'; import { FrameIcon } from '@blocksuite/icons';
import { FramePanel } from '@blocksuite/presets'; import { FramePanel } from '@blocksuite/presets';
import { useAtom } from 'jotai'; import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import type { EditorExtension } from '../types'; import type { EditorExtension } from '../types';
@@ -11,7 +10,8 @@ import * as styles from './frame.css';
// A wrapper for FramePanel // A wrapper for FramePanel
const EditorFramePanel = () => { const EditorFramePanel = () => {
const framePanelRef = useRef<FramePanel | null>(null); const framePanelRef = useRef<FramePanel | null>(null);
const [editorContainer] = useAtom(editorContainerAtom);
const [editor] = useBlocksuiteEditor();
const onRefChange = useCallback((container: HTMLDivElement | null) => { const onRefChange = useCallback((container: HTMLDivElement | null) => {
if (container) { if (container) {
@@ -20,7 +20,7 @@ const EditorFramePanel = () => {
} }
}, []); }, []);
if (!editorContainer) { if (!editor) {
return; return;
} }
@@ -28,8 +28,8 @@ const EditorFramePanel = () => {
framePanelRef.current = new FramePanel(); framePanelRef.current = new FramePanel();
} }
if (editorContainer !== framePanelRef.current?.editor) { if (editor !== framePanelRef.current?.editor) {
(framePanelRef.current as FramePanel).editor = editorContainer; (framePanelRef.current as FramePanel).editor = editor;
(framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20]; (framePanelRef.current as FramePanel).fitPadding = [20, 20, 20, 20];
} }

11
packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.tsx
View File

@@ -1,8 +1,7 @@
import { editorContainerAtom } from '@affine/component/block-suite-editor';
import { assertExists } from '@blocksuite/global/utils'; import { assertExists } from '@blocksuite/global/utils';
import { TocIcon } from '@blocksuite/icons'; import { TocIcon } from '@blocksuite/icons';
import { TOCPanel } from '@blocksuite/presets'; import { TOCPanel } from '@blocksuite/presets';
import { useAtom } from 'jotai'; import { useBlocksuiteEditor } from '@toeverything/hooks/use-block-suite-editor';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import type { EditorExtension } from '../types'; import type { EditorExtension } from '../types';
@@ -11,7 +10,7 @@ import * as styles from './outline.css';
// A wrapper for TOCNotesPanel // A wrapper for TOCNotesPanel
const EditorOutline = () => { const EditorOutline = () => {
const tocPanelRef = useRef<TOCPanel | null>(null); const tocPanelRef = useRef<TOCPanel | null>(null);
const [editorContainer] = useAtom(editorContainerAtom); const [editor] = useBlocksuiteEditor();
const onRefChange = useCallback((container: HTMLDivElement | null) => { const onRefChange = useCallback((container: HTMLDivElement | null) => {
if (container) { if (container) {
@@ -20,7 +19,7 @@ const EditorOutline = () => {
} }
}, []); }, []);
if (!editorContainer) { if (!editor) {
return; return;
} }
@@ -28,8 +27,8 @@ const EditorOutline = () => {
tocPanelRef.current = new TOCPanel(); tocPanelRef.current = new TOCPanel();
} }
if (editorContainer !== tocPanelRef.current?.editor) { if (editor !== tocPanelRef.current?.editor) {
(tocPanelRef.current as TOCPanel).editor = editorContainer; (tocPanelRef.current as TOCPanel).editor = editor;
(tocPanelRef.current as TOCPanel).fitPadding = [20, 20, 20, 20]; (tocPanelRef.current as TOCPanel).fitPadding = [20, 20, 20, 20];
} }

13
packages/frontend/hooks/src/use-block-suite-editor.ts Normal file
View File

@@ -0,0 +1,13 @@
import type { AffineEditorContainer } from '@blocksuite/presets';
import { atom, type SetStateAction, useAtom } from 'jotai';
const editorContainerAtom = atom<AffineEditorContainer | null>(null);
export function useBlocksuiteEditor(): [
AffineEditorContainer | null,
React.Dispatch<SetStateAction<AffineEditorContainer | null>>,
] {
const [editorContainer, setEditorContainer] = useAtom(editorContainerAtom);
return [editorContainer, setEditorContainer];
}