From cac0b7fd660b143678c42684377af65e1a4e3290 Mon Sep 17 00:00:00 2001 From: Yifeng Wang Date: Thu, 9 Jan 2025 14:01:48 +0800 Subject: [PATCH] refactor(editor): remove default entry (#9600) --- blocksuite/playground/apps/default/main.ts | 26 ---- .../apps/default/specs-examples/index.ts | 14 -- .../apps/default/utils/collection.ts | 115 --------------- .../playground/apps/default/utils/editor.ts | 135 ------------------ .../playground/apps/default/utils/notify.ts | 26 ---- blocksuite/playground/index.html | 22 +-- blocksuite/playground/starter/index.html | 56 -------- blocksuite/playground/vite.config.ts | 1 - blocksuite/tests-legacy/utils/actions/misc.ts | 2 +- 9 files changed, 13 insertions(+), 384 deletions(-) delete mode 100644 blocksuite/playground/apps/default/main.ts delete mode 100644 blocksuite/playground/apps/default/specs-examples/index.ts delete mode 100644 blocksuite/playground/apps/default/utils/collection.ts delete mode 100644 blocksuite/playground/apps/default/utils/editor.ts delete mode 100644 blocksuite/playground/apps/default/utils/notify.ts delete mode 100644 blocksuite/playground/starter/index.html diff --git a/blocksuite/playground/apps/default/main.ts b/blocksuite/playground/apps/default/main.ts deleted file mode 100644 index 5ec6fbde8b..0000000000 --- a/blocksuite/playground/apps/default/main.ts +++ /dev/null @@ -1,26 +0,0 @@ -import '../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; - -import { setupEdgelessTemplate } from '../_common/setup.js'; -import { - createDefaultDocCollection, - initDefaultDocCollection, -} from './utils/collection.js'; -import { mountDefaultDocEditor } from './utils/editor.js'; - -blocksEffects(); -presetsEffects(); - -async function main() { - if (window.collection) return; - - setupEdgelessTemplate(); - - const collection = await createDefaultDocCollection(); - await initDefaultDocCollection(collection); - await mountDefaultDocEditor(collection); -} - -main().catch(console.error); diff --git a/blocksuite/playground/apps/default/specs-examples/index.ts b/blocksuite/playground/apps/default/specs-examples/index.ts deleted file mode 100644 index c0fe99686d..0000000000 --- a/blocksuite/playground/apps/default/specs-examples/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - EdgelessEditorBlockSpecs, - PageEditorBlockSpecs, -} from '@blocksuite/blocks'; - -export function getExampleSpecs() { - const pageModeSpecs = PageEditorBlockSpecs; - const edgelessModeSpecs = EdgelessEditorBlockSpecs; - - return { - pageModeSpecs, - edgelessModeSpecs, - }; -} diff --git a/blocksuite/playground/apps/default/utils/collection.ts b/blocksuite/playground/apps/default/utils/collection.ts deleted file mode 100644 index 70da6a6724..0000000000 --- a/blocksuite/playground/apps/default/utils/collection.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { AffineSchemas } from '@blocksuite/blocks'; -import type { BlockSuiteFlags } from '@blocksuite/global/types'; -import { Job, nanoid, Schema, Text } from '@blocksuite/store'; -import { - type DocCollectionOptions, - TestWorkspace, -} from '@blocksuite/store/test'; -import { - BroadcastChannelAwarenessSource, - BroadcastChannelDocSource, - IndexedDBBlobSource, - IndexedDBDocSource, -} from '@blocksuite/sync'; -import * as Y from 'yjs'; - -import { WebSocketAwarenessSource } from '../../_common/sync/websocket/awareness'; -import { WebSocketDocSource } from '../../_common/sync/websocket/doc'; - -const BASE_WEBSOCKET_URL = new URL(import.meta.env.PLAYGROUND_WS); - -export async function createDefaultDocCollection() { - const idGenerator = nanoid; - const schema = new Schema(); - schema.register(AffineSchemas); - - const params = new URLSearchParams(location.search); - let docSources: DocCollectionOptions['docSources'] = { - main: new IndexedDBDocSource(), - }; - let awarenessSources: DocCollectionOptions['awarenessSources']; - const room = params.get('room'); - if (room) { - const ws = new WebSocket(new URL(`/room/${room}`, BASE_WEBSOCKET_URL)); - await new Promise((resolve, reject) => { - ws.addEventListener('open', resolve); - ws.addEventListener('error', reject); - }) - .then(() => { - docSources = { - main: new IndexedDBDocSource(), - shadows: [new WebSocketDocSource(ws)], - }; - awarenessSources = [new WebSocketAwarenessSource(ws)]; - }) - .catch(() => { - docSources = { - main: new IndexedDBDocSource(), - shadows: [new BroadcastChannelDocSource()], - }; - awarenessSources = [ - new BroadcastChannelAwarenessSource('collabPlayground'), - ]; - }); - } - - const flags: Partial = Object.fromEntries( - [...params.entries()] - .filter(([key]) => key.startsWith('enable_')) - .map(([k, v]) => [k, v === 'true']) - ); - - const options: DocCollectionOptions = { - id: 'collabPlayground', - schema, - idGenerator, - blobSources: { - main: new IndexedDBBlobSource('collabPlayground'), - }, - docSources, - awarenessSources, - defaultFlags: { - enable_synced_doc_block: true, - enable_pie_menu: true, - enable_lasso_tool: true, - enable_color_picker: true, - ...flags, - }, - }; - const collection = new TestWorkspace(options); - collection.start(); - - // debug info - window.collection = collection; - window.blockSchemas = AffineSchemas; - window.job = new Job({ - schema: collection.schema, - blobCRUD: collection.blobSync, - docCRUD: { - create: (id: string) => collection.createDoc({ id }), - get: (id: string) => collection.getDoc(id), - delete: (id: string) => collection.removeDoc(id), - }, - }); - window.Y = Y; - - return collection; -} - -export async function initDefaultDocCollection(collection: TestWorkspace) { - const params = new URLSearchParams(location.search); - - await collection.waitForSynced(); - - const shouldInit = collection.docs.size === 0 && !params.get('room'); - if (shouldInit) { - collection.meta.initialize(); - const doc = collection.createDoc({ id: 'doc:home' }); - doc.load(); - const rootId = doc.addBlock('affine:page', { - title: new Text(), - }); - doc.addBlock('affine:surface', {}, rootId); - doc.resetHistory(); - } -} diff --git a/blocksuite/playground/apps/default/utils/editor.ts b/blocksuite/playground/apps/default/utils/editor.ts deleted file mode 100644 index a74ec19aa1..0000000000 --- a/blocksuite/playground/apps/default/utils/editor.ts +++ /dev/null @@ -1,135 +0,0 @@ -import type { EditorHost } from '@blocksuite/block-std'; -import { - CommunityCanvasTextFonts, - DocModeExtension, - DocModeProvider, - EditorSettingExtension, - FontConfigExtension, - GenerateDocUrlExtension, - GenerateDocUrlProvider, - NotificationExtension, - OverrideThemeExtension, - ParseDocUrlExtension, - RefNodeSlotsProvider, - SpecProvider, -} from '@blocksuite/blocks'; -import { AffineEditorContainer } from '@blocksuite/presets'; -import type { ExtensionType, Workspace } from '@blocksuite/store'; - -import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel.js'; -import { CollabDebugMenu } from '../../_common/components/collab-debug-menu.js'; -import { DocsPanel } from '../../_common/components/docs-panel.js'; -import { LeftSidePanel } from '../../_common/components/left-side-panel.js'; -import { - getDocFromUrlParams, - listenHashChange, - setDocModeFromUrlParams, -} from '../../_common/history.js'; -import { - mockDocModeService, - mockEditorSetting, - mockGenerateDocUrlService, - mockNotificationService, - mockParseDocUrlService, - mockPeekViewExtension, - themeExtension, -} from '../../_common/mock-services.js'; -import { getExampleSpecs } from '../specs-examples/index.js'; - -export async function mountDefaultDocEditor(collection: Workspace) { - const app = document.getElementById('app'); - if (!app) return; - - const url = new URL(location.toString()); - const doc = getDocFromUrlParams(collection, url); - - const attachmentViewerPanel = new AttachmentViewerPanel(); - - const editor = new AffineEditorContainer(); - const specs = getExampleSpecs(); - editor.pageSpecs = patchPageRootSpec([...specs.pageModeSpecs]); - editor.edgelessSpecs = patchPageRootSpec([...specs.edgelessModeSpecs]); - - SpecProvider.getInstance().extendSpec('edgeless:preview', [ - OverrideThemeExtension(themeExtension), - ]); - editor.doc = doc; - editor.mode = 'page'; - editor.std - .get(RefNodeSlotsProvider) - .docLinkClicked.on(({ pageId: docId }) => { - const target = collection.getDoc(docId); - if (!target) { - throw new Error(`Failed to jump to doc ${docId}`); - } - - const url = editor.std - .get(GenerateDocUrlProvider) - .generateDocUrl(target.id); - if (url) history.pushState({}, '', url); - - target.load(); - editor.doc = target; - }); - - app.append(editor); - await editor.updateComplete; - const modeService = editor.host!.std.get(DocModeProvider); - editor.mode = modeService.getPrimaryMode(doc.id); - setDocModeFromUrlParams(modeService, url.searchParams, doc.id); - editor.slots.docUpdated.on(({ newDocId }) => { - editor.mode = modeService.getPrimaryMode(newDocId); - }); - - const leftSidePanel = new LeftSidePanel(); - - const docsPanel = new DocsPanel(); - docsPanel.editor = editor; - - const collabDebugMenu = new CollabDebugMenu(); - collabDebugMenu.collection = collection; - collabDebugMenu.editor = editor; - collabDebugMenu.leftSidePanel = leftSidePanel; - collabDebugMenu.docsPanel = docsPanel; - - document.body.append(attachmentViewerPanel); - document.body.append(leftSidePanel); - document.body.append(collabDebugMenu); - - // debug info - window.editor = editor; - window.doc = doc; - Object.defineProperty(globalThis, 'host', { - get() { - return document.querySelector('editor-host'); - }, - }); - Object.defineProperty(globalThis, 'std', { - get() { - return document.querySelector('editor-host')?.std; - }, - }); - - listenHashChange(collection, editor, docsPanel); - - return editor; - - function patchPageRootSpec(spec: ExtensionType[]) { - const setEditorModeCallBack = editor.switchEditor.bind(editor); - const getEditorModeCallback = () => editor.mode; - const newSpec: typeof spec = [ - ...spec, - DocModeExtension( - mockDocModeService(getEditorModeCallback, setEditorModeCallBack) - ), - OverrideThemeExtension(themeExtension), - ParseDocUrlExtension(mockParseDocUrlService(collection)), - GenerateDocUrlExtension(mockGenerateDocUrlService(collection)), - NotificationExtension(mockNotificationService(editor)), - FontConfigExtension(CommunityCanvasTextFonts), - mockPeekViewExtension(attachmentViewerPanel), - EditorSettingExtension(mockEditorSetting()), - ]; - return newSpec; - } -} diff --git a/blocksuite/playground/apps/default/utils/notify.ts b/blocksuite/playground/apps/default/utils/notify.ts deleted file mode 100644 index 3614012195..0000000000 --- a/blocksuite/playground/apps/default/utils/notify.ts +++ /dev/null @@ -1,26 +0,0 @@ -function escapeHtml(html: string) { - const div = document.createElement('div'); - div.textContent = html; - return div.innerHTML; -} - -// Custom function to emit toast notifications -export function notify( - message: string, - variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary', - icon = 'info-circle', - duration = 2000 -) { - const alert = Object.assign(document.createElement('sl-alert'), { - variant, - closable: true, - duration: duration, - innerHTML: ` - - ${escapeHtml(message)} - `, - }); - - document.body.append(alert); - return alert.toast(); -} diff --git a/blocksuite/playground/index.html b/blocksuite/playground/index.html index bff4200e2c..c4fc2a09fc 100644 --- a/blocksuite/playground/index.html +++ b/blocksuite/playground/index.html @@ -5,15 +5,11 @@ - - + BlockSuite Playground - - - - -
-
-
- - diff --git a/blocksuite/playground/vite.config.ts b/blocksuite/playground/vite.config.ts index c5b126c241..aecfcd2337 100644 --- a/blocksuite/playground/vite.config.ts +++ b/blocksuite/playground/vite.config.ts @@ -213,7 +213,6 @@ export default defineConfig(({ mode }) => { }, input: { main: resolve(__dirname, 'index.html'), - 'starter/': resolve(__dirname, 'starter/index.html'), 'examples/basic/page': resolve( __dirname, 'examples/basic/page/index.html' diff --git a/blocksuite/tests-legacy/utils/actions/misc.ts b/blocksuite/tests-legacy/utils/actions/misc.ts index e849449170..fbf06ccfb4 100644 --- a/blocksuite/tests-legacy/utils/actions/misc.ts +++ b/blocksuite/tests-legacy/utils/actions/misc.ts @@ -36,7 +36,7 @@ declare global { } export const defaultPlaygroundURL = new URL( - `http://localhost:${process.env.CI ? 4173 : 5173}/starter/` + `http://localhost:${process.env.CI ? 4173 : 5173}/` ); const NEXT_FRAME_TIMEOUT = 50;