From 0525866b6d2555abe454b458ee664753a064a703 Mon Sep 17 00:00:00 2001 From: alt0 Date: Wed, 21 Dec 2022 14:43:33 +0800 Subject: [PATCH] fix: remove unused file --- .../editor-provider/editor-provider.tsx | 112 ------------ .../editor-provider/editor-reactor.tsx | 162 ------------------ .../editor-provider/example-markdown.ts | 62 ------- .../editor-provider/hooks/useEditorHandler.ts | 79 --------- .../hooks/useHistoryUpdated.ts | 34 ---- .../editor-provider/hooks/useMode.ts | 43 ----- .../editor-provider/hooks/usePropsUpdated.ts | 35 ---- .../providers/editor-provider/interface.ts | 38 ---- .../src/providers/editor-provider/loading.tsx | 30 ---- .../src/providers/editor-provider/utils.ts | 76 -------- 10 files changed, 671 deletions(-) delete mode 100644 packages/app/src/providers/editor-provider/editor-provider.tsx delete mode 100644 packages/app/src/providers/editor-provider/editor-reactor.tsx delete mode 100644 packages/app/src/providers/editor-provider/example-markdown.ts delete mode 100644 packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts delete mode 100644 packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts delete mode 100644 packages/app/src/providers/editor-provider/hooks/useMode.ts delete mode 100644 packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts delete mode 100644 packages/app/src/providers/editor-provider/interface.ts delete mode 100644 packages/app/src/providers/editor-provider/loading.tsx delete mode 100644 packages/app/src/providers/editor-provider/utils.ts diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx deleted file mode 100644 index 824532c527..0000000000 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import type { EditorContainer } from '@blocksuite/editor'; -import { - createContext, - useContext, - useEffect, - useState, - useCallback, -} from 'react'; -import type { PropsWithChildren } from 'react'; -import { useRouter } from 'next/router'; -import dynamic from 'next/dynamic'; -import Loading from './loading'; -import { Page, Workspace } from '@blocksuite/store'; -import useEditorHandler from './hooks/useEditorHandler'; -import { - EditorHandlers, - PageMeta, - EditorContextValue, - EditorContextProps, -} from './interface'; -import usePropsUpdated from './hooks/usePropsUpdated'; -import useHistoryUpdated from './hooks/useHistoryUpdated'; -import useMode from './hooks/useMode'; -// Blocksuite has to be imported dynamically since it has a lot of effects -const DynamicEditor = dynamic(() => import('./editor-reactor'), { - ssr: false, -}); - -export const EditorContext = createContext({ - mode: 'page', - setMode: () => {}, - pageList: [], - page: undefined, - onPropsUpdated: () => {}, - onHistoryUpdated: () => {}, - editor: undefined, - ...({} as EditorHandlers), -}); - -export const useEditor = () => useContext(EditorContext); - -export const EditorProvider = ({ - children, -}: PropsWithChildren) => { - const router = useRouter(); - const [workspace, setWorkspace] = useState(); - const [page, _setPage] = useState(); - const setPage = useCallback( - (page: Page) => { - _setPage(page); - // router.push(`/workspace/${workspaceId}/${page.id.replace('space:', '')}`); - }, - [_setPage] - ); - const [pageList, setPageList] = useState([]); - const [editor, setEditor] = useState(); - - const { mode, setMode } = useMode({ workspace, page }); - - const editorHandlers = useEditorHandler({ workspace, editor, page }); - const onPropsUpdated = usePropsUpdated(editor); - const onHistoryUpdated = useHistoryUpdated(page); - // Modify the updatedDate when history change - useEffect(() => { - if (!workspace) { - return; - } - onHistoryUpdated(page => { - workspace.setPageMeta(page.id, { updatedDate: +new Date() }); - }); - }, [workspace, onHistoryUpdated]); - - useEffect(() => { - if (!workspace) { - return; - } - setPageList(workspace.meta.pageMetas as PageMeta[]); - workspace.meta.pagesUpdated.on(res => { - setPageList(workspace.meta.pageMetas as PageMeta[]); - }); - return () => { - // TODO: Does it need to be removed? - workspace.meta.pagesUpdated.dispose(); - }; - }, [workspace]); - - return ( - - - {workspace && page && editor ? children : } - - ); -}; - -export default EditorProvider; diff --git a/packages/app/src/providers/editor-provider/editor-reactor.tsx b/packages/app/src/providers/editor-provider/editor-reactor.tsx deleted file mode 100644 index 080de28c3c..0000000000 --- a/packages/app/src/providers/editor-provider/editor-reactor.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import '@blocksuite/blocks'; -import '@blocksuite/blocks/style'; -import type { EditorContainer } from '@blocksuite/editor'; -import { BlockSchema, createEditor } from '@blocksuite/editor'; -import { - generateDefaultPageId, - getEditor, - initIntroduction, - initIntroductionMeta, -} from './utils'; -import { useEffect, useRef } from 'react'; -import pkg from '../../../package.json'; -import { - createWebsocketDocProvider, - Workspace, - IndexedDBDocProvider, - Page, -} from '@blocksuite/store'; -import { useRouter } from 'next/router'; -import { createPage } from '@/providers/editor-provider/utils'; - -const getEditorParams = (workspaceId: string) => { - const providers = []; - const params = new URLSearchParams(location.search); - // const room = params.get('room') ?? 'AFFINE-pathfinder'; - if (params.get('syncMode') === 'websocket') { - const WebsocketDocProvider = createWebsocketDocProvider( - `ws://${window.location.host}/collaboration/` - ); - providers.push(WebsocketDocProvider); - } - - providers.push(IndexedDBDocProvider); - - return { - room: workspaceId, - providers, - }; -}; - -const EditorReactor = ({ - workspace, - currentPage, - setEditor, - setWorkspace, - setCurrentPage, -}: { - workspace: Workspace | void; - currentPage: Page | void; - setEditor: (editor: EditorContainer) => void; - setWorkspace: (workspace: Workspace) => void; - setCurrentPage: (Page: Page) => void; -}) => { - const shouldInitIntroduction = useRef(false); - const { - query: { pageId0: routerPageId }, - } = useRouter(); - const workspaceId = 'sfas'; - - useEffect(() => { - const workspace = new Workspace({ - ...getEditorParams(workspaceId as string), - }).register(BlockSchema); - //@ts-ignore - window.workspace = workspace; - const indexDBProvider = workspace.providers.find( - p => p instanceof IndexedDBDocProvider - ); - if (indexDBProvider) { - (indexDBProvider as IndexedDBDocProvider)?.on('synced', () => { - setWorkspace(workspace); - }); - } else { - setWorkspace(workspace); - } - }, [setWorkspace, workspaceId]); - - useEffect(() => { - if (!workspace) { - return; - } - - if (routerPageId) { - const pageId = routerPageId.toString(); - const page = workspace.getPage(pageId); - if (page) { - setCurrentPage(page); - } else { - createPage(workspace!, pageId).then(page => { - shouldInitIntroduction.current = true; - initIntroductionMeta(workspace!, page); - setCurrentPage(page); - }); - } - return; - } - - const savedPageId = workspace.meta.pageMetas[0]?.id; - if (savedPageId) { - setCurrentPage(workspace.getPage(savedPageId) as Page); - return; - } - - createPage(workspace!, generateDefaultPageId()).then(page => { - shouldInitIntroduction.current = true; - initIntroductionMeta(workspace!, page); - setCurrentPage(page); - }); - }, [workspace, routerPageId, setCurrentPage]); - - useEffect(() => { - if (!currentPage) { - return; - } - const editor = createEditor(currentPage); - const pageMeta = workspace?.meta.pageMetas.find( - p => p.id === currentPage.pageId.replace('space:', '') - ); - - if (pageMeta?.mode) { - // @ts-ignore - editor.mode = pageMeta.mode; - } - - if (pageMeta?.trash) { - // @ts-ignore - editor.readonly = true; - } - - const onEditorInsertHandler = () => { - const editor = getEditor(); - // Editor is different from the previous one witch is not inserted into the DOM - setEditor(editor as EditorContainer); - if (shouldInitIntroduction.current) { - shouldInitIntroduction.current = false; - initIntroduction(workspace!, editor as EditorContainer); - } - }; - - editor.addEventListener( - 'DOMNodeInsertedIntoDocument', - onEditorInsertHandler - ); - setEditor(editor); - - return () => { - editor.removeEventListener( - 'DOMNodeInsertedIntoDocument', - onEditorInsertHandler - ); - }; - }, [workspace, currentPage, setEditor]); - - useEffect(() => { - const version = pkg.dependencies['@blocksuite/editor'].substring(1); - console.log(`BlockSuite version: ${version}`); - }, []); - - return
; -}; - -export default EditorReactor; diff --git a/packages/app/src/providers/editor-provider/example-markdown.ts b/packages/app/src/providers/editor-provider/example-markdown.ts deleted file mode 100644 index 30210ed2c3..0000000000 --- a/packages/app/src/providers/editor-provider/example-markdown.ts +++ /dev/null @@ -1,62 +0,0 @@ -export 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; diff --git a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts deleted file mode 100644 index a209aebd0f..0000000000 --- a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { createPage, generateDefaultPageId, initPage } from '../utils'; -import { Workspace, Page } from '@blocksuite/store'; -import { useRouter } from 'next/router'; -import { EditorHandlers, PageMeta } from '../interface'; -import { EditorContainer } from '@blocksuite/editor'; -import toast from '@/ui/toast'; -export const useEditorHandler = ({ - editor, - workspace, - page, -}: { - workspace?: Workspace; - page?: Page; - editor?: EditorContainer; -}): EditorHandlers => { - const router = useRouter(); - - return { - createPage: async ({ - pageId = generateDefaultPageId(), - title = '', - } = {}) => { - const page = await createPage(workspace!, pageId); - initPage(workspace!, page, { title }); - return page; - }, - getPageMeta(pageId) { - pageId = (pageId ?? page!.id).replace('space:', ''); - return workspace!.meta.pageMetas.find( - page => page.id === pageId - ) as PageMeta; - }, - openPage: (pageId, query = {}) => { - pageId = pageId.replace('space:', ''); - return router.push({ - pathname: '/', - query: { - pageId, - ...query, - }, - }); - }, - toggleDeletePage: pageId => { - const pageMeta = workspace!.meta.pageMetas.find(p => p.id === pageId); - if (pageMeta) { - workspace!.setPageMeta(pageId, { - trash: !pageMeta.trash, - trashDate: +new Date(), - }); - - if (pageMeta.trash) { - toast('Removed to trash'); - const editor = document.querySelector('editor-container'); - // @ts-ignore - editor?.setAttribute('readonly', 'false'); - } - } - }, - permanentlyDeletePage: pageId => { - // TODO: workspace.meta.removePage or workspace.removePage? - workspace!.meta.removePage(pageId); - }, - toggleFavoritePage: pageId => { - const pageMeta = workspace?.meta.pageMetas.find(p => p.id === pageId); - if (pageMeta) { - workspace!.setPageMeta(pageId, { favorite: !pageMeta.favorite }); - toast( - pageMeta.favorite ? 'Removed to Favourites' : 'Added to Favourites' - ); - } - }, - changeEditorMode: (pageId: string) => { - editor!.mode = editor!.mode === 'page' ? 'edgeless' : 'page'; - workspace?.setPageMeta(pageId, { mode: editor!.mode }); - }, - }; -}; - -export default useEditorHandler; diff --git a/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts b/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts deleted file mode 100644 index 558925d32b..0000000000 --- a/packages/app/src/providers/editor-provider/hooks/useHistoryUpdated.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { useEffect, useRef } from 'react'; -import { Page } from '@blocksuite/store'; -import { EventCallBack } from '../interface'; - -export type UseHistoryUpdated = (page?: Page) => EventCallBack; - -export const useHistoryUpdate: UseHistoryUpdated = page => { - const callbackQueue = useRef<((page: Page) => void)[]>([]); - - useEffect(() => { - if (!page) { - return; - } - - setTimeout(() => { - page.signals.historyUpdated.on(() => { - callbackQueue.current.forEach(callback => { - callback(page); - }); - }); - }, 300); - - return () => { - callbackQueue.current = []; - page.signals.historyUpdated.dispose(); - }; - }, [page]); - - return callback => { - callbackQueue.current.push(callback); - }; -}; - -export default useHistoryUpdate; diff --git a/packages/app/src/providers/editor-provider/hooks/useMode.ts b/packages/app/src/providers/editor-provider/hooks/useMode.ts deleted file mode 100644 index 61d7208a30..0000000000 --- a/packages/app/src/providers/editor-provider/hooks/useMode.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Page, Workspace } from '@blocksuite/store'; -import { EditorContainer } from '@blocksuite/editor'; - -export const useMode = ({ - page, - workspace, -}: { - page?: Page; - workspace?: Workspace; -}) => { - const [mode, setMode] = useState('page'); - - useEffect(() => { - if (!page || !workspace) { - return; - } - const pageMeta = workspace.meta.pageMetas.find( - p => p.id === page.pageId.replace('space:', '') - ); - - if (pageMeta?.mode) { - // @ts-ignore - setMode(pageMeta.mode); - } - }, [page, workspace]); - - useEffect(() => { - // FIXME - const editorContainer = document.querySelector('editor-container'); - editorContainer?.setAttribute('mode', mode as string); - if (page && workspace) { - workspace.setPageMeta(page.id, { mode }); - } - }, [workspace, page, mode]); - - return { - mode, - setMode, - }; -}; - -export default useMode; diff --git a/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts b/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts deleted file mode 100644 index 0b21cadbca..0000000000 --- a/packages/app/src/providers/editor-provider/hooks/usePropsUpdated.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useEffect, useRef } from 'react'; -import { EditorContainer } from '@blocksuite/editor'; -import { EventCallBack } from '../interface'; - -export type UsePropsUpdated = ( - editor?: EditorContainer -) => EventCallBack; - -export const usePropsUpdated: UsePropsUpdated = editor => { - const callbackQueue = useRef<((editor: EditorContainer) => void)[]>([]); - - useEffect(() => { - if (!editor) { - return; - } - setTimeout(() => { - editor.model?.propsUpdated.on(() => { - callbackQueue.current.forEach(callback => { - callback(editor); - }); - }); - }, 300); - - return () => { - callbackQueue.current = []; - editor?.model?.propsUpdated.dispose(); - }; - }, [editor]); - - return callback => { - callbackQueue.current.push(callback); - }; -}; - -export default usePropsUpdated; diff --git a/packages/app/src/providers/editor-provider/interface.ts b/packages/app/src/providers/editor-provider/interface.ts deleted file mode 100644 index a2e893f374..0000000000 --- a/packages/app/src/providers/editor-provider/interface.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { PropsWithChildren } from 'react'; -import { Page } from '@blocksuite/store'; -import { PageMeta as OriginalPageMeta } from '@blocksuite/store'; -import { EditorContainer } from '@blocksuite/editor'; - -export type EventCallBack = (callback: (props: T) => void) => void; -export type EditorContextProps = PropsWithChildren<{}>; - -export type EditorContextValue = { - mode: EditorContainer['mode']; - setMode: (mode: EditorContainer['mode']) => void; - page: Page | void; - editor: EditorContainer | void; - pageList: PageMeta[]; - onHistoryUpdated: EventCallBack; - onPropsUpdated: EventCallBack; -} & EditorHandlers; - -export type PageMeta = { - favorite: boolean; - trash: boolean; - trashDate: number | void; - updatedDate: number | void; - mode: EditorContainer['mode']; -} & OriginalPageMeta; - -export type EditorHandlers = { - createPage: (params?: { pageId?: string; title?: string }) => Promise; - openPage: ( - pageId: string, - query?: { [key: string]: string } - ) => Promise; - getPageMeta: (pageId?: string) => PageMeta; - toggleDeletePage: (pageId: string) => void; - toggleFavoritePage: (pageId: string) => void; - permanentlyDeletePage: (pageId: string) => void; - changeEditorMode: (pageId: string) => void; -}; diff --git a/packages/app/src/providers/editor-provider/loading.tsx b/packages/app/src/providers/editor-provider/loading.tsx deleted file mode 100644 index 829d2a80fc..0000000000 --- a/packages/app/src/providers/editor-provider/loading.tsx +++ /dev/null @@ -1,30 +0,0 @@ -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: '15px', - fontWeight: '600', - }, - }; -}); - -export const Loading = () => { - return ( - -
- -

Loading...

-
- - ); -}; - -export default Loading; diff --git a/packages/app/src/providers/editor-provider/utils.ts b/packages/app/src/providers/editor-provider/utils.ts deleted file mode 100644 index 12dbcadbfa..0000000000 --- a/packages/app/src/providers/editor-provider/utils.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { EditorContainer } from '@blocksuite/editor'; -import exampleMarkdown from '@/providers/editor-provider/example-markdown'; -import { Page, Workspace } from '@blocksuite/store'; - -export const initIntroductionMeta = (workspace: Workspace, page: Page) => { - workspace!.meta.setPage(page.id.replace('space:', ''), { - title: 'Welcome to the AFFiNE Alpha', - }); -}; -export const initIntroduction = ( - workspace: Workspace, - editor: EditorContainer -) => { - const { page } = editor; - const title = 'Welcome to the AFFiNE Alpha'; - const pageId = page.addBlock({ - flavour: 'affine:page', - title, - }); - const groupId = page.addBlock({ flavour: 'affine:group' }, pageId); - editor.clipboard.importMarkdown(exampleMarkdown, `${groupId}`); - workspace.setPageMeta(page.id, { title }); - page.resetHistory(); -}; - -export const createPage = ( - workspace: Workspace, - pageId: string -): Promise => { - return new Promise(resolve => { - workspace.createPage(pageId); - workspace.signals.pageAdded.once(addedPageId => { - const page = workspace!.getPage(addedPageId); - resolve(page as Page); - }); - }); -}; - -export const initEmptyPage = (page: Page) => { - const pageBlockId = page.addBlock({ flavour: 'affine:page' }); - const groupId = page.addBlock({ flavour: 'affine:group' }, pageBlockId); - page.addBlock({ flavour: 'affine:paragraph' }, groupId); - return page; -}; - -export const initPage = ( - workspace: Workspace, - page: Page, - { title = '' }: { title?: string } = {} -) => { - const pageBlockId = page.addBlock({ flavour: 'affine:page', title }); - const groupId = page.addBlock({ flavour: 'affine:group' }, pageBlockId); - page.addBlock({ flavour: 'affine:paragraph' }, groupId); - if (title) { - workspace!.meta.setPage(page.id.replace('space:', ''), { title }); - } - return page; -}; - -export const generateDefaultPageId = () => { - return new Date().getTime().toString(); -}; - -export const getEditor = () => { - return document.querySelector('editor-container') as EditorContainer | null; -}; - -export const getEditorMode = () => { - const editorContainer = document.querySelector('editor-container'); - return editorContainer?.mode; -}; - -export const setEditorMode = (mode: EditorContainer['mode']) => { - const editorContainer = document.querySelector('editor-container'); - editorContainer?.setAttribute('mode', mode as string); -};