refactor: switch to useEditor

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<PropsWithChildren<RenderRootProps>> = ({
     };
 
     return (
-        <RootContext.Provider value={{ editor, editorElement }}>
+        <EditorProvider value={{ editor, editorElement }}>
             <Container
                 isWhiteboard={editor.isWhiteboard}
                 ref={ref => {
@@ -183,7 +183,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
                 {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
                 {patchedNodes}
             </Container>
-        </RootContext.Provider>
+        </EditorProvider>
     );
 };
 

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<AsyncBlock>(null as any);
-
-/**
- * Context of column information
- *
- * @deprecated
- */
-export const ColumnsContext = createContext<{
-    fromId: string;
-    columns: Column[];
-}>({
-    fromId: '',
-    columns: [],
-});

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<AsyncBlock>();
     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 = <T extends keyof SelectionSettingsMap>(
     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 = <T extends keyof SelectionSettingsMap>(
  * @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 () => {

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';

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';

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -1,8 +1,8 @@
-import { styled, Theme } from '@toeverything/components/ui';
+import { styled } from '@toeverything/components/ui';
-import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+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<RenderBlockProps> = ({
     blockId,
     hasContainer = true,
 }) => {
-    const { editor, editorElement } = useContext(RootContext);
+    const { editor, editorElement } = useEditor();
     const { block } = useBlock(blockId);
     const blockRef = useRef<HTMLDivElement>(null);