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-provider.tsx

@@ -1,42 +0,0 @@
-import type { EditorContainer } from '@blocksuite/editor';
-
-import { createContext, useContext, useEffect, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-
-type EditorContextValue = {
-  editor: EditorContainer | null;
-  mode: EditorContainer['mode'];
-  setEditor: (editor: EditorContainer) => void;
-  setMode: (mode: EditorContainer['mode']) => void;
-};
-
-type EditorContextProps = PropsWithChildren<{}>;
-
-export const EditorContext = createContext<EditorContextValue>({
-  editor: null,
-  mode: 'page',
-  setEditor: () => {},
-  setMode: () => {},
-});
-
-export const useEditor = () => useContext(EditorContext);
-
-export const EditorProvider = ({
-  children,
-}: PropsWithChildren<EditorContextProps>) => {
-  const [editor, setEditor] = useState<EditorContainer | null>(null);
-  const [mode, setMode] = useState<EditorContainer['mode']>('page');
-
-  useEffect(() => {
-    const event = new CustomEvent('affine.switch-mode', { detail: mode });
-    window.dispatchEvent(event);
-  }, [mode]);
-
-  return (
-    <EditorContext.Provider value={{ editor, setEditor, mode, setMode }}>
-      {children}
-    </EditorContext.Provider>
-  );
-};
-
-export default EditorProvider;

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/example-markdown.ts

@@ -1,62 +0,0 @@
-const exampleMarkdown = `The AFFiNE Alpha is here! You can also view our [Official Website](https://affine.pro/)!
-
-**What's different in AFFiNE Alpha?**
-
-1.  A much ~smoother editing~ experience, with much ~greater stability~;
-2.  More complete ~Markdown~ support and improved ~keyboard shortcuts~;
-3.  New features such as ~dark mode~;
-    *   **Switch between view styles using the** ☀ **and** 🌙.
-4.  ~Clean and modern UI/UX~ design.
-
-**Looking for Markdown syntax or keyboard shortcuts?**
-
-*   Find the (?) in the bottom right, then the ️⌨️, to view a full list of \`Keyboard Shortcuts\`
-
-**Have an enjoyable editing experience !!!** 😃
-
-Have some feedback or just want to get in touch? Use the (?), then 🎧 to get in touch and join our communities.
-
-**Still in development**
-
-There are also some things you should consider about this AFFiNE Alpha including some ~limitations~:
-
-*   Single page editing - currently editing multiple docs/pages is not supported;
-*   Changes are not automatically stored, to save changes you should export your data. Options can be found by going to the top right and finding the \`⋮\` icon;
-*   Without an import/open feature you are still able to access your data by copying it back in.
-
-**Keyboard Shortcuts:**
-
-1.  Undo: \`⌘+Z\` or \`Ctrl+Z\`
-2.  Redo: \`⌘+⇧+Z\` or \`Ctrl+Shift+Z\`
-3.  Bold: \`⌘+B\` or \`Ctrl+B\`
-4.  Italic: \`⌘+I\` or \`Ctrl+I\`
-5.  Underline: \`⌘+U\` or \`Ctrl+U\`
-6.  Strikethrough: \`⌘+⇧+S\` or \`Ctrl+Shift+S\`
-7.  Inline code: \`⌘+E\` or \`Ctrl+E\`
-8.  Link: \`⌘+K\` or \`Ctrl+K\`
-9.  Body text: \`⌘+⌥+0\` or \`Ctrl+Shift+0\`
-10.  Heading 1: \`⌘+⌥+1\` or \`Ctrl+Shift+1\`
-11.  Heading 2: \`⌘+⌥+2\` or \`Ctrl+Shift+2\`
-12.  Heading 3: \`⌘+⌥+3\` or \`Ctrl+Shift+3\`
-13.  Heading 4: \`⌘+⌥+4\` or \`Ctrl+Shift+4\`
-14.  Heading 5: \`⌘+⌥+5\` or \`Ctrl+Shift+5\`
-15.  Heading 6: \`⌘+⌥+6\` or \`Ctrl+Shift+6\`
-16.  Increase indent: \`Tab\`
-17.  Reduce indent: \`⇧+Tab\` or \`Shift+Tab\`
-
-**Markdown Syntax:**
-
-1.  Bold: \`**text**\`
-2.  Italic: \`*text*\`
-3.  Underline: \`~text~\`
-4.  Strikethrough: \`~~text~~\`
-5.  Inline code: \`\` \`text\` \`\`
-6.  Heading 1: \`# text\`
-7.  Heading 2: \`## text\`
-8.  Heading 3: \`### text\`
-9.  Heading 4: \`#### text\`
-10.  Heading 5: \`##### text\`
-11.  Heading 6: \`###### text\`
-`;
-
-export default exampleMarkdown;

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/global-modal-provider.tsx

@@ -1,53 +0,0 @@
-import { createContext, useContext, useState } from 'react';
-import type { PropsWithChildren } from 'react';
-import ShortcutsModal from './shortcuts-modal';
-import ContactModal from '@/components/contact-modal';
-
-type ModalContextValue = {
-  shortcutsModalHandler: (visible: boolean) => void;
-  contactModalHandler: (visible: boolean) => void;
-};
-type ModalContextProps = PropsWithChildren<{}>;
-
-export const ModalContext = createContext<ModalContextValue>({
-  shortcutsModalHandler: () => {},
-  contactModalHandler: () => {},
-});
-
-export const useModal = () => useContext(ModalContext);
-
-export const ModalProvider = ({
-  children,
-}: PropsWithChildren<ModalContextProps>) => {
-  const [openContactModal, setOpenContactModal] = useState(false);
-  const [openShortcutsModal, setOpenShortcutsModal] = useState(false);
-
-  return (
-    <ModalContext.Provider
-      value={{
-        shortcutsModalHandler: visible => {
-          setOpenShortcutsModal(visible);
-        },
-        contactModalHandler: visible => {
-          setOpenContactModal(visible);
-        },
-      }}
-    >
-      <ContactModal
-        open={openContactModal}
-        onClose={() => {
-          setOpenContactModal(false);
-        }}
-      ></ContactModal>
-      <ShortcutsModal
-        open={openShortcutsModal}
-        onClose={() => {
-          setOpenShortcutsModal(false);
-        }}
-      ></ShortcutsModal>
-      {children}
-    </ModalContext.Provider>
-  );
-};
-
-export default ModalProvider;

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