From 0709b5557cbad3adfe64427705079dec0f3407a1 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:31:00 +0800 Subject: [PATCH] refactor: switch to useEditor --- libs/components/editor-core/src/RenderRoot.tsx | 6 +++--- libs/components/editor-core/src/contexts.tsx | 18 +++--------------- libs/components/editor-core/src/hooks.ts | 16 ++++++++-------- libs/components/editor-core/src/index.ts | 1 - .../editor-core/src/kanban/kanban.ts | 2 +- .../src/render-block/RenderBlock.tsx | 8 ++++---- 6 files changed, 19 insertions(+), 32 deletions(-) diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index aed9ebea50..f7a3638818 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/libs/components/editor-core/src/RenderRoot.tsx @@ -2,7 +2,7 @@ import type { BlockEditor } from './editor'; import { styled, usePatchNodes } from '@toeverything/components/ui'; import type { FC, PropsWithChildren } from 'react'; import React, { useEffect, useRef, useState, useCallback } from 'react'; -import { RootContext } from './contexts'; +import { EditorProvider } from './Contexts'; import { SelectionRect, SelectionRef } from './Selection'; import { Protocol, @@ -151,7 +151,7 @@ export const RenderRoot: FC> = ({ }; return ( - + { @@ -183,7 +183,7 @@ export const RenderRoot: FC> = ({ {editor.isWhiteboard ? null : } {patchedNodes} - + ); }; diff --git a/libs/components/editor-core/src/contexts.tsx b/libs/components/editor-core/src/contexts.tsx index cdd4dbf305..418fe0e8b4 100644 --- a/libs/components/editor-core/src/contexts.tsx +++ b/libs/components/editor-core/src/contexts.tsx @@ -1,9 +1,8 @@ import { createContext, useContext } from 'react'; import type { BlockEditor, AsyncBlock } from './editor'; -import type { Column } from '@toeverything/datasource/db-service'; import { genErrorObj } from '@toeverything/utils'; -export const RootContext = createContext<{ +const RootContext = createContext<{ editor: BlockEditor; // TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top editorElement: () => JSX.Element; @@ -14,6 +13,8 @@ export const RootContext = createContext<{ ) as any ); +export const EditorProvider = RootContext.Provider; + export const useEditor = () => { return useContext(RootContext); }; @@ -22,16 +23,3 @@ export const useEditor = () => { * @deprecated */ export const BlockContext = createContext(null as any); - -/** - * Context of column information - * - * @deprecated - */ -export const ColumnsContext = createContext<{ - fromId: string; - columns: Column[]; -}>({ - fromId: '', - columns: [], -}); diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts index d7d1a00cef..948cc4a156 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/libs/components/editor-core/src/hooks.ts @@ -7,7 +7,7 @@ import { } from './editor'; import { noop, Point } from '@toeverything/utils'; import { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { RootContext } from './contexts'; +import { useEditor } from './Contexts'; function useRequestReRender() { const [, setUpdateCounter] = useState(0); @@ -56,7 +56,7 @@ function useRequestReRender() { export const useBlock = (blockId: string) => { const [block, setBlock] = useState(); const requestReRender = useRequestReRender(); - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { if (!blockId) { return undefined; @@ -95,7 +95,7 @@ export const useOnSelect = ( blockId: string, cb: (isSelect: boolean) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.observe(blockId, SelectEventTypes.onSelect, cb); return () => { @@ -117,7 +117,7 @@ export const useOnSelectActive = ( blockId: string, cb: (position: Point | undefined) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.observe(blockId, SelectEventTypes.active, cb); return () => { @@ -139,7 +139,7 @@ export const useOnSelectSetSelection = ( blockId: string, cb: (args: SelectionSettingsMap[T]) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.observe( blockId, @@ -162,7 +162,7 @@ export const useOnSelectSetSelection = ( * @export */ export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.onSelectionChange(cb); return () => { @@ -177,7 +177,7 @@ export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => { * @export */ export const useOnSelectEnd = (cb: (info: SelectionInfo) => void) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.onSelectEnd(cb); return () => { @@ -195,7 +195,7 @@ export const useOnSelectStartWith = ( blockId: string, cb: (args: MouseEvent) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.mouseManager.onSelectStartWith(blockId, cb); return () => { diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index 70f87d3091..bea2fed3a0 100644 --- a/libs/components/editor-core/src/index.ts +++ b/libs/components/editor-core/src/index.ts @@ -1,4 +1,3 @@ -export { ColumnsContext, RootContext } from './contexts'; export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot'; export * from './render-block'; export * from './hooks'; diff --git a/libs/components/editor-core/src/kanban/kanban.ts b/libs/components/editor-core/src/kanban/kanban.ts index ff33b17f1d..218476ac44 100644 --- a/libs/components/editor-core/src/kanban/kanban.ts +++ b/libs/components/editor-core/src/kanban/kanban.ts @@ -1,6 +1,6 @@ import { Protocol } from '@toeverything/datasource/db-service'; import { useCallback, useContext, useEffect, useState } from 'react'; -import { useEditor } from '../contexts'; +import { useEditor } from '../Contexts'; import { AsyncBlock } from '../editor'; import { useRecastView } from '../recast-block'; import { useRecastBlock } from '../recast-block/Context'; diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 46f068af2b..74f6c659cf 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -1,8 +1,8 @@ -import { styled, Theme } from '@toeverything/components/ui'; -import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react'; +import { styled } from '@toeverything/components/ui'; +import { FC, useLayoutEffect, useMemo, useRef } from 'react'; // import { RenderChildren } from './RenderChildren'; -import { RootContext } from '../contexts'; +import { useEditor } from '../Contexts'; import { useBlock } from '../hooks'; interface RenderBlockProps { @@ -14,7 +14,7 @@ export const RenderBlock: FC = ({ blockId, hasContainer = true, }) => { - const { editor, editorElement } = useContext(RootContext); + const { editor, editorElement } = useEditor(); const { block } = useBlock(blockId); const blockRef = useRef(null);