feat: refactor provider

packages/app/src/components/Header/index.tsx

@@ -19,11 +19,11 @@ import {
   StyledCloseButton,
   StyledMenuItemWrapper,
 } from './styles';
-import { useEditor } from '@/components/editor-provider';
+import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
-import { useModal } from '@/components/global-modal-provider';
+import { useModal } from '@/providers/global-modal-provider';
 import CloseIcon from '@mui/icons-material/Close';
 import { getWarningMessage, shouldShowWarning } from './utils';
 import { Menu, MenuItem } from '@/ui/menu';

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -16,7 +16,7 @@ import {
 } from './icons';
 import { Tooltip } from '@/ui/tooltip';
 import Slide from '@mui/material/Slide';
-import { useEditor } from '@/components/editor-provider';
+import { useEditor } from '@/providers/editor-provider';
 
 const toolbarList1 = [
   {

packages/app/src/components/editor-mode-switch/index.tsx

@@ -11,9 +11,9 @@ import type {
   AnimateRadioProps,
   AnimateRadioItemProps,
 } from './type';
-import { useTheme } from '@/styles';
+import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
-import { useEditor } from '@/components/editor-provider';
+import { useEditor } from '@/providers/editor-provider';
 
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {

packages/app/src/components/editor.tsx

@@ -1,83 +1,21 @@
-import { useEditor } from '@/components/editor-provider';
-import '@blocksuite/blocks';
-import '@blocksuite/blocks/style';
-import type { EditorContainer } from '@blocksuite/editor';
-import { BlockSchema, createEditor } from '@blocksuite/editor';
-import { forwardRef, Suspense, useEffect, useRef } from 'react';
-import pkg from '../../package.json';
-import exampleMarkdown from './example-markdown';
-import { Store } from '@blocksuite/store';
-
-// eslint-disable-next-line react/display-name
-const BlockSuiteEditor = forwardRef<EditorContainer>(({}, ref) => {
-  const containerElement = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!containerElement.current) {
-      return;
-    }
-
-    const store = new Store({
-      // ...getEditorParams(),
-    });
-    const space = store.createSpace('page0').register(BlockSchema);
-    const editor = createEditor(space);
-
-    containerElement.current.appendChild(editor);
-    if (ref) {
-      if ('current' in ref) {
-        ref.current = editor;
-      } else {
-        ref(editor);
-      }
-    }
-    return () => {
-      editor.remove();
-    };
-  }, [ref]);
-  return <div id="editor" style={{ height: '100%' }} ref={containerElement} />;
-});
+import React, { useEffect, useRef } from 'react';
+import { useEditor, initDefaultContent } from '@/providers/editor-provider';
 
 export const Editor = () => {
-  const editorRef = useRef<EditorContainer>(null);
-  const { setEditor } = useEditor();
+  const editorContainer = useRef<HTMLDivElement>(null);
+  const { editor } = useEditor();
+  const ref = useRef<any>();
   useEffect(() => {
-    if (!editorRef.current) {
-      return;
+    if (editor && ref.current?.space.id !== editor?.space.id) {
+      ref.current?.remove();
+      ref.current = editor;
+
+      editorContainer.current?.appendChild(editor);
+
+      initDefaultContent(editor);
     }
-    setEditor(editorRef.current);
-    const { space } = editorRef.current as EditorContainer;
-    const pageId = space.addBlock({
-      flavour: 'affine:page',
-      title: 'Welcome to the AFFiNE Alpha',
-    });
-    const groupId = space.addBlock({ flavour: 'affine:group' }, pageId);
-    editorRef.current.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
-    space.resetHistory();
-  }, [setEditor]);
-
-  useEffect(() => {
-    const version = pkg.dependencies['@blocksuite/editor'].substring(1);
-    console.log(`BlockSuite live demo ${version}`);
-  }, []);
-
-  return (
-    <Suspense fallback={<div>Error!</div>}>
-      <BlockSuiteEditor ref={editorRef} />
-    </Suspense>
-  );
+  }, [editor]);
+  return <div id="editor" ref={editorContainer}></div>;
 };
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'editor-container': EditorContainer;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      // TODO fix types on react
-      'editor-container': EditorContainer;
-    }
-  }
-}
-
 export default Editor;

packages/app/src/components/faq/index.tsx

@@ -8,9 +8,9 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '@/ui/tooltip';
-import { useEditor } from '@/components/editor-provider';
-import { useModal } from '@/components/global-modal-provider';
-import { useTheme } from '@/styles';
+import { useEditor } from '@/providers/editor-provider';
+import { useModal } from '@/providers/global-modal-provider';
+import { useTheme } from '@/providers/themeProvider';
 
 export const FAQ = () => {
   const [showContent, setShowContent] = useState(false);

packages/app/src/components/theme-mode-switch/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useTheme } from '@/styles';
+import { useTheme } from '@/providers/themeProvider';
 import { MoonIcon, SunIcon } from './icons';
 import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
 

packages/app/src/pages/_app.tsx

@@ -3,8 +3,8 @@ import dynamic from 'next/dynamic';
 import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
-import { EditorProvider } from '@/components/editor-provider';
-import { ModalProvider } from '@/components/global-modal-provider';
+import { EditorProvider } from '@/providers/editor-provider';
+import { ModalProvider } from '@/providers/global-modal-provider';
 import { Logger } from '@toeverything/pathfinder-logger';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import '@fontsource/space-mono';
@@ -14,7 +14,7 @@ import { styled } from '@/styles';
 import type { ReactNode, PropsWithChildren, FC } from 'react';
 import { cloneElement } from 'react';
 
-const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
+const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,
 });
 
@@ -52,7 +52,6 @@ function MyApp({ Component, pageProps }: AppProps) {
         ]}
       >
         <StyledPage>
-          {/*<TestEditor />*/}
           <WorkSpaceSliderBar />
           <Component {...pageProps} />
         </StyledPage>

packages/app/src/pages/index.tsx

@@ -1,11 +1,11 @@
 import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
 import { styled } from '@/styles';
 import { Header } from '@/components/Header';
 import { FAQ } from '@/components/faq';
-import Loading from '@/components/loading';
 import EdgelessToolbar from '@/components/edgeless-toolbar';
 import MobileModal from '@/components/mobile-modal';
+import Editor from '@/components/editor';
+
 import '@/components/simple-counter';
 
 const StyledEditorContainer = styled('div')(({ theme }) => {
@@ -23,40 +23,13 @@ const StyledWrapper = styled('div')(({ theme }) => {
   };
 });
 
-const StyledLoadingContainer = styled('div')(({ theme }) => {
-  return {
-    height: '100vh',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.colors.primaryColor,
-    h1: {
-      fontSize: '2em',
-      marginTop: '150px',
-      fontWeight: '600',
-    },
-  };
-});
-
-const DynamicEditor = dynamic(() => import('../components/editor'), {
-  loading: () => (
-    <StyledLoadingContainer>
-      <div className="wrapper">
-        <Loading />
-        <h1>Loading...</h1>
-      </div>
-    </StyledLoadingContainer>
-  ),
-  ssr: false,
-});
-
 const Home: NextPage = () => {
   return (
     <StyledWrapper>
       <Header />
       <MobileModal />
       <StyledEditorContainer>
-        <DynamicEditor />
+        <Editor />
       </StyledEditorContainer>
       <FAQ />
       <EdgelessToolbar />

packages/app/src/providers/editor-provider/editor-provider.tsx

@@ -1,12 +1,16 @@
 import type { EditorContainer } from '@blocksuite/editor';
-
 import { createContext, useContext, useEffect, useState } from 'react';
 import type { PropsWithChildren } from 'react';
+import dynamic from 'next/dynamic';
+import Loading from './loading';
+
+const DynamicEditor = dynamic(() => import('./initial-editor'), {
+  ssr: false,
+});
 
 type EditorContextValue = {
   editor: EditorContainer | null;
   mode: EditorContainer['mode'];
-  setEditor: (editor: EditorContainer) => void;
   setMode: (mode: EditorContainer['mode']) => void;
 };
 
@@ -15,7 +19,6 @@ type EditorContextProps = PropsWithChildren<{}>;
 export const EditorContext = createContext<EditorContextValue>({
   editor: null,
   mode: 'page',
-  setEditor: () => {},
   setMode: () => {},
 });
 
@@ -33,8 +36,9 @@ export const EditorProvider = ({
   }, [mode]);
 
   return (
-    <EditorContext.Provider value={{ editor, setEditor, mode, setMode }}>
-      {children}
+    <EditorContext.Provider value={{ editor, mode, setMode }}>
+      <DynamicEditor setEditor={setEditor} />
+      {editor ? children : <Loading />}
     </EditorContext.Provider>
   );
 };

packages/app/src/providers/editor-provider/example-markdown.ts

@@ -1,4 +1,4 @@
-const exampleMarkdown = `The AFFiNE Alpha is here! You can also view our [Official Website](https://affine.pro/)!
+export const exampleMarkdown = `The AFFiNE Alpha is here! You can also view our [Official Website](https://affine.pro/)!
 
 **What's different in AFFiNE Alpha?**
 

packages/app/src/providers/editor-provider/index.ts

@@ -0,0 +1,3 @@
+export * from './editor-provider';
+export * from './example-markdown';
+export * from './utils';

packages/app/src/providers/editor-provider/initial-editor.tsx

@@ -0,0 +1,51 @@
+import '@blocksuite/blocks';
+import '@blocksuite/blocks/style';
+import type { EditorContainer } from '@blocksuite/editor';
+import { BlockSchema, createEditor } from '@blocksuite/editor';
+import { useEffect } from 'react';
+import pkg from '../../../package.json';
+import { createWebsocketDocProvider, Store } from '@blocksuite/store';
+
+const getEditorParams = () => {
+  const providers = [];
+  const params = new URLSearchParams(location.search);
+  if (params.get('syncModes') === 'websocket') {
+    const WebsocketDocProvider = createWebsocketDocProvider(
+      'ws://127.0.0.1:3000/collaboration/AFFiNE'
+    );
+    providers.push(WebsocketDocProvider);
+  }
+
+  return {
+    providers,
+  };
+};
+
+const InitialEditor = ({
+  setEditor,
+}: {
+  setEditor: (editor: EditorContainer) => void;
+}) => {
+  useEffect(() => {
+    const store = new Store({
+      ...getEditorParams(),
+    });
+    const space = store.createSpace('page0').register(BlockSchema);
+    const editor = createEditor(space);
+
+    setEditor(editor);
+
+    return () => {
+      editor.remove();
+    };
+  }, [setEditor]);
+
+  useEffect(() => {
+    const version = pkg.dependencies['@blocksuite/editor'].substring(1);
+    console.log(`BlockSuite live demo ${version}`);
+  }, []);
+
+  return <div />;
+};
+
+export default InitialEditor;

packages/app/src/providers/editor-provider/loading.tsx

@@ -0,0 +1,30 @@
+import { styled } from '@/styles';
+import CommonLoading from '@/components/loading';
+
+const StyledLoadingContainer = styled('div')(({ theme }) => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#6880FF',
+    h1: {
+      fontSize: '2em',
+      marginTop: '150px',
+      fontWeight: '600',
+    },
+  };
+});
+
+export const Loading = () => {
+  return (
+    <StyledLoadingContainer>
+      <div className="wrapper">
+        <CommonLoading />
+        <h1>Loading...</h1>
+      </div>
+    </StyledLoadingContainer>
+  );
+};
+
+export default Loading;

packages/app/src/providers/editor-provider/utils.ts

@@ -0,0 +1,13 @@
+import { EditorContainer } from '@blocksuite/editor';
+import exampleMarkdown from '@/providers/editor-provider/example-markdown';
+
+export const initDefaultContent = (editor: EditorContainer) => {
+  const { space } = editor;
+  const pageId = space.addBlock({
+    flavour: 'affine:page',
+    title: 'Welcome to the AFFiNE Alpha',
+  });
+  const groupId = space.addBlock({ flavour: 'affine:group' }, pageId);
+  editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`);
+  space.resetHistory();
+};

packages/app/src/providers/global-modal-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from 'react';
 import type { PropsWithChildren } from 'react';
-import ShortcutsModal from './shortcuts-modal';
+import ShortcutsModal from '@/components/shortcuts-modal';
 import ContactModal from '@/components/contact-modal';
 
 type ModalContextValue = {

packages/app/src/providers/themeProvider.tsx

@@ -3,17 +3,21 @@ import {
   Global,
   css,
 } from '@emotion/react';
-import { createContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import type { PropsWithChildren } from 'react';
 import {
   Theme,
   ThemeMode,
   ThemeProviderProps,
   ThemeProviderValue,
-} from './types';
-import { getLightTheme, getDarkTheme, globalThemeVariables } from './theme';
-import { SystemThemeHelper, localStorageThemeHelper } from './utils';
-import { useEditor } from '@/components/editor-provider';
+} from '@/styles/types';
+import {
+  getLightTheme,
+  getDarkTheme,
+  globalThemeVariables,
+} from '@/styles/theme';
+import { SystemThemeHelper, localStorageThemeHelper } from '@/styles/utils';
+import { useEditor } from '@/providers/editor-provider';
 
 export const ThemeContext = createContext<ThemeProviderValue>({
   mode: 'light',
@@ -21,6 +25,8 @@ export const ThemeContext = createContext<ThemeProviderValue>({
   theme: getLightTheme('page'),
 });
 
+export const useTheme = () => useContext(ThemeContext);
+
 export const ThemeProvider = ({
   defaultTheme = 'light',
   children,

packages/app/src/styles/hooks.ts

@@ -1,4 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from './themeProvider';
-
-export const useTheme = () => useContext(ThemeContext);

packages/app/src/styles/index.ts

@@ -1,7 +1,5 @@
 export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
 
 export * from './styled';
-export { ThemeProvider } from './themeProvider';
 export * from './theme';
-export { useTheme } from './hooks';
 export * from './helper';