diff --git a/blocksuite/blocks/src/_common/types.ts b/blocksuite/blocks/src/_common/types.ts index fc35e8f84c..9b00589ae9 100644 --- a/blocksuite/blocks/src/_common/types.ts +++ b/blocksuite/blocks/src/_common/types.ts @@ -1,16 +1,9 @@ import type { BrushElementModel, ConnectorElementModel, - DocMode, GroupElementModel, } from '@blocksuite/affine-model'; import type { GfxModel } from '@blocksuite/block-std/gfx'; -import type { Store } from '@blocksuite/store'; - -export type AbstractEditor = { - doc: Store; - mode: DocMode; -} & HTMLElement; export type Connectable = Exclude< GfxModel, diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts index 760282e44b..4415427491 100644 --- a/blocksuite/blocks/src/index.ts +++ b/blocksuite/blocks/src/index.ts @@ -9,7 +9,6 @@ import { isCanvasElement } from './root-block/edgeless/utils/query.js'; export * from './_common/adapters/index.js'; export { type NavigatorMode } from './_common/edgeless/frame/consts.js'; export * from './_common/transformers/index.js'; -export { type AbstractEditor } from './_common/types.js'; export * from './_specs/index.js'; export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js'; export type { diff --git a/blocksuite/playground/apps/_common/components/starter-debug-menu.ts b/blocksuite/playground/apps/_common/components/starter-debug-menu.ts index 0c1e9c7cf7..13dd30fdd0 100644 --- a/blocksuite/playground/apps/_common/components/starter-debug-menu.ts +++ b/blocksuite/playground/apps/_common/components/starter-debug-menu.ts @@ -57,6 +57,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import * as lz from 'lz-string'; import type { Pane } from 'tweakpane'; +import { createTestEditor } from '../../starter/utils/extensions.js'; import { mockEdgelessTheme } from '../mock-services.js'; import { AdaptersPanel } from './adapters-panel.js'; import type { CustomFramePanel } from './custom-frame-panel.js'; @@ -643,8 +644,7 @@ export class StarterDebugMenu extends ShadowlessElement { ).length; if (currentEditorCount === 1) { // Add a second editor - const newEditor = document.createElement('affine-editor-container'); - newEditor.doc = this.doc; + const newEditor = createTestEditor(this.doc, this.collection); app.append(newEditor); app.childNodes.forEach(child => { if (child instanceof AffineEditorContainer) { diff --git a/blocksuite/playground/apps/_common/history.ts b/blocksuite/playground/apps/_common/history.ts index 51e7b1a27f..a7c8c0321a 100644 --- a/blocksuite/playground/apps/_common/history.ts +++ b/blocksuite/playground/apps/_common/history.ts @@ -2,7 +2,6 @@ import type { DocModeProvider } from '@blocksuite/blocks'; import { assertExists } from '@blocksuite/global/utils'; import type { AffineEditorContainer } from '@blocksuite/presets'; import type { Doc, Store, Workspace } from '@blocksuite/store'; -import type { LitElement } from 'lit'; export function getDocFromUrlParams(collection: Workspace, url: URL) { let doc: Store | null = null; @@ -41,9 +40,9 @@ export function setDocModeFromUrlParams( export function listenHashChange( collection: Workspace, - editor: AffineEditorContainer, - panel?: LitElement + editor: AffineEditorContainer ) { + const panel = document.querySelector('docs-panel'); window.addEventListener('hashchange', () => { const url = new URL(location.toString()); const doc = getDocFromUrlParams(collection, url); diff --git a/blocksuite/playground/apps/_common/mock-services.ts b/blocksuite/playground/apps/_common/mock-services.ts index 84111892ab..e1a6648a44 100644 --- a/blocksuite/playground/apps/_common/mock-services.ts +++ b/blocksuite/playground/apps/_common/mock-services.ts @@ -37,10 +37,10 @@ export function removeModeFromStorage(docId: string) { const DEFAULT_MODE: DocMode = 'page'; const slotMap = new Map>(); -export function mockDocModeService( - getEditorModeCallback: () => DocMode, - setEditorModeCallback: (mode: DocMode) => void -) { +export function mockDocModeService(editor: AffineEditorContainer) { + const getEditorModeCallback: () => DocMode = () => editor.mode; + const setEditorModeCallback: (mode: DocMode) => void = mode => + editor.switchEditor(mode); const docModeService: DocModeProvider = { getPrimaryMode: (docId: string) => { try { diff --git a/blocksuite/playground/apps/starter/data/multiple-editor.ts b/blocksuite/playground/apps/starter/data/multiple-editor.ts index dbbd9201d6..f195f369cf 100644 --- a/blocksuite/playground/apps/starter/data/multiple-editor.ts +++ b/blocksuite/playground/apps/starter/data/multiple-editor.ts @@ -1,7 +1,6 @@ -import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text'; -import { AffineEditorContainer } from '@blocksuite/presets'; import { Text, type Workspace } from '@blocksuite/store'; +import { createTestEditor } from '../utils/extensions.js'; import type { InitFn } from './utils.js'; export const multiEditor: InitFn = (collection: Workspace, id: string) => { @@ -24,18 +23,7 @@ export const multiEditor: InitFn = (collection: Workspace, id: string) => { const app = document.getElementById('app'); if (app) { - const editor = new AffineEditorContainer(); - editor.doc = doc; - editor.std - .get(RefNodeSlotsProvider) - .docLinkClicked.on(({ pageId: docId }) => { - const target = collection.getDoc(docId); - if (!target) { - throw new Error(`Failed to jump to doc ${docId}`); - } - target.load(); - editor.doc = target; - }); + const editor = createTestEditor(doc, collection); editor.style.borderRight = '1px solid var(--affine-border-color)'; app.append(editor); @@ -70,18 +58,7 @@ export const multiEditorVertical: InitFn = ( const app = document.getElementById('app'); if (app) { - const editor = new AffineEditorContainer(); - editor.doc = doc; - editor.std - .get(RefNodeSlotsProvider) - .docLinkClicked.on(({ pageId: docId }) => { - const target = collection.getDoc(docId); - if (!target) { - throw new Error(`Failed to jump to doc ${docId}`); - } - target.load(); - editor.doc = target; - }); + const editor = createTestEditor(doc, collection); editor.style.borderBottom = '1px solid var(--affine-border-color)'; app.append(editor); diff --git a/blocksuite/playground/apps/starter/main.ts b/blocksuite/playground/apps/starter/main.ts index 3d3fa4a262..4b9c287f78 100644 --- a/blocksuite/playground/apps/starter/main.ts +++ b/blocksuite/playground/apps/starter/main.ts @@ -14,7 +14,7 @@ import { createStarterDocCollection, initStarterDocCollection, } from './utils/collection.js'; -import { mountDefaultDocEditor } from './utils/editor.js'; +import { mountDefaultDocEditor } from './utils/setup-playground'; import { prepareTestApp } from './utils/test'; blocksEffects(); diff --git a/blocksuite/playground/apps/starter/utils/app.ts b/blocksuite/playground/apps/starter/utils/app.ts new file mode 100644 index 0000000000..d6ce141131 --- /dev/null +++ b/blocksuite/playground/apps/starter/utils/app.ts @@ -0,0 +1,73 @@ +import { CommentPanel } from '@blocksuite/presets'; +import type { Store, Workspace } from '@blocksuite/store'; + +import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel'; +import { CustomFramePanel } from '../../_common/components/custom-frame-panel'; +import { CustomOutlinePanel } from '../../_common/components/custom-outline-panel'; +import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer'; +import { DocsPanel } from '../../_common/components/docs-panel'; +import { LeftSidePanel } from '../../_common/components/left-side-panel'; +import { StarterDebugMenu } from '../../_common/components/starter-debug-menu'; +import { createTestEditor } from './extensions'; + +export async function createTestApp(doc: Store, collection: Workspace) { + const app = document.querySelector('#app'); + if (!app) { + throw new Error('Cannot find app root element(#app).'); + } + const editor = createTestEditor(doc, collection); + + app.append(editor); + await editor.updateComplete; + + const debugMenu = new StarterDebugMenu(); + const docsPanel = new DocsPanel(); + const framePanel = new CustomFramePanel(); + const outlinePanel = new CustomOutlinePanel(); + const outlineViewer = new CustomOutlineViewer(); + const leftSidePanel = new LeftSidePanel(); + const commentPanel = new CommentPanel(); + const attachmentViewerPanel = new AttachmentViewerPanel(); + + docsPanel.editor = editor; + framePanel.editor = editor; + outlinePanel.editor = editor; + outlineViewer.editor = editor; + outlineViewer.toggleOutlinePanel = () => { + outlinePanel.toggleDisplay(); + }; + + debugMenu.collection = collection; + debugMenu.editor = editor; + debugMenu.outlinePanel = outlinePanel; + debugMenu.outlineViewer = outlineViewer; + debugMenu.framePanel = framePanel; + debugMenu.leftSidePanel = leftSidePanel; + debugMenu.docsPanel = docsPanel; + + debugMenu.commentPanel = commentPanel; + + commentPanel.editor = editor; + + document.body.append(attachmentViewerPanel); + document.body.append(outlinePanel); + document.body.append(outlineViewer); + document.body.append(framePanel); + document.body.append(leftSidePanel); + document.body.append(debugMenu); + + 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; + }, + }); + + return editor; +} diff --git a/blocksuite/playground/apps/starter/utils/editor.ts b/blocksuite/playground/apps/starter/utils/editor.ts deleted file mode 100644 index 537f6bb79e..0000000000 --- a/blocksuite/playground/apps/starter/utils/editor.ts +++ /dev/null @@ -1,190 +0,0 @@ -import { BlockServiceWatcher, type EditorHost } from '@blocksuite/block-std'; -import { - AffineFormatBarWidget, - CommunityCanvasTextFonts, - DocModeProvider, - EditorSettingExtension, - FontConfigExtension, - GenerateDocUrlExtension, - NotificationExtension, - OverrideThemeExtension, - type PageRootService, - ParseDocUrlExtension, - RefNodeSlotsProvider, - SpecProvider, - toolbarDefaultConfig, -} from '@blocksuite/blocks'; -import { AffineEditorContainer, CommentPanel } from '@blocksuite/presets'; -import type { ExtensionType, Workspace } from '@blocksuite/store'; - -import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel.js'; -import { CustomFramePanel } from '../../_common/components/custom-frame-panel.js'; -import { CustomOutlinePanel } from '../../_common/components/custom-outline-panel.js'; -import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer.js'; -import { DocsPanel } from '../../_common/components/docs-panel.js'; -import { LeftSidePanel } from '../../_common/components/left-side-panel.js'; -import { StarterDebugMenu } from '../../_common/components/starter-debug-menu.js'; -import { - getDocFromUrlParams, - listenHashChange, - setDocModeFromUrlParams, -} from '../../_common/history.js'; -import { - mockDocModeService, - mockEditorSetting, - mockGenerateDocUrlService, - mockNotificationService, - mockParseDocUrlService, - themeExtension, -} from '../../_common/mock-services'; - -function configureFormatBar(formatBar: AffineFormatBarWidget) { - toolbarDefaultConfig(formatBar); -} - -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(); - - class PatchPageServiceWatcher extends BlockServiceWatcher { - static override readonly flavour = 'affine:page'; - - override mounted() { - const pageRootService = this.blockService as PageRootService; - const onFormatBarConnected = pageRootService.specSlots.widgetConnected.on( - view => { - if (view.component instanceof AffineFormatBarWidget) { - configureFormatBar(view.component); - } - } - ); - pageRootService.disposables.add(onFormatBarConnected); - } - } - - const extensions: ExtensionType[] = [ - PatchPageServiceWatcher, - FontConfigExtension(CommunityCanvasTextFonts), - ParseDocUrlExtension(mockParseDocUrlService(collection)), - GenerateDocUrlExtension(mockGenerateDocUrlService(collection)), - NotificationExtension(mockNotificationService(editor)), - OverrideThemeExtension(themeExtension), - EditorSettingExtension(mockEditorSetting()), - { - setup: di => { - di.override(DocModeProvider, () => - mockDocModeService(getEditorModeCallback, setEditorModeCallBack) - ); - }, - }, - ]; - - const pageSpecs = SpecProvider.getInstance().getSpec('page'); - const setEditorModeCallBack = editor.switchEditor.bind(editor); - const getEditorModeCallback = () => editor.mode; - pageSpecs.extend([...extensions]); - editor.pageSpecs = pageSpecs.value; - - const edgelessSpecs = SpecProvider.getInstance().getSpec('edgeless'); - edgelessSpecs.extend([...extensions]); - editor.edgelessSpecs = edgelessSpecs.value; - - SpecProvider.getInstance().extendSpec('edgeless:preview', [ - OverrideThemeExtension(themeExtension), - ]); - - editor.mode = 'page'; - editor.doc = doc; - editor.std - .get(RefNodeSlotsProvider) - .docLinkClicked.on(({ pageId: docId }) => { - const target = collection.getDoc(docId); - if (!target) { - throw new Error(`Failed to jump to doc ${docId}`); - } - target.load(); - editor.doc = target; - }); - - app.append(editor); - await editor.updateComplete; - const modeService = editor.std.provider.get(DocModeProvider); - editor.mode = modeService.getPrimaryMode(doc.id); - setDocModeFromUrlParams(modeService, url.searchParams, doc.id); - - const outlinePanel = new CustomOutlinePanel(); - outlinePanel.editor = editor; - - const outlineViewer = new CustomOutlineViewer(); - outlineViewer.editor = editor; - outlineViewer.toggleOutlinePanel = () => { - outlinePanel.toggleDisplay(); - }; - - const framePanel = new CustomFramePanel(); - framePanel.editor = editor; - - const leftSidePanel = new LeftSidePanel(); - - const docsPanel = new DocsPanel(); - docsPanel.editor = editor; - - const commentPanel = new CommentPanel(); - commentPanel.editor = editor; - - const debugMenu = new StarterDebugMenu(); - debugMenu.collection = collection; - debugMenu.editor = editor; - debugMenu.outlinePanel = outlinePanel; - debugMenu.outlineViewer = outlineViewer; - debugMenu.framePanel = framePanel; - debugMenu.leftSidePanel = leftSidePanel; - debugMenu.docsPanel = docsPanel; - debugMenu.commentPanel = commentPanel; - - document.body.append(attachmentViewerPanel); - document.body.append(outlinePanel); - document.body.append(outlineViewer); - document.body.append(framePanel); - document.body.append(leftSidePanel); - document.body.append(debugMenu); - - // for multiple editor - const params = new URLSearchParams(location.search); - const init = params.get('init'); - if (init && init.startsWith('multiple-editor')) { - app.childNodes.forEach(node => { - if (node instanceof AffineEditorContainer) { - node.style.flex = '1'; - if (init === 'multiple-editor-vertical') { - node.style.overflow = 'auto'; - } - } - }); - } - - // 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; -} diff --git a/blocksuite/playground/apps/starter/utils/extensions.ts b/blocksuite/playground/apps/starter/utils/extensions.ts new file mode 100644 index 0000000000..f0b9c546eb --- /dev/null +++ b/blocksuite/playground/apps/starter/utils/extensions.ts @@ -0,0 +1,62 @@ +import { + CommunityCanvasTextFonts, + DocModeProvider, + EdgelessEditorBlockSpecs, + EditorSettingExtension, + FeatureFlagService, + FontConfigExtension, + PageEditorBlockSpecs, + ParseDocUrlExtension, + RefNodeSlotsProvider, +} from '@blocksuite/blocks'; +import { type AffineEditorContainer } from '@blocksuite/presets'; +import type { ExtensionType, Store, Workspace } from '@blocksuite/store'; + +import { + mockDocModeService, + mockEditorSetting, + mockParseDocUrlService, +} from '../../_common/mock-services'; + +export function getTestCommonExtensions( + editor: AffineEditorContainer +): ExtensionType[] { + return [ + FontConfigExtension(CommunityCanvasTextFonts), + EditorSettingExtension(mockEditorSetting()), + ParseDocUrlExtension(mockParseDocUrlService(editor.doc.workspace)), + { + setup: di => { + di.override(DocModeProvider, mockDocModeService(editor)); + }, + }, + ]; +} + +export function createTestEditor(store: Store, workspace: Workspace) { + store + .get(FeatureFlagService) + .setFlag('enable_advanced_block_visibility', true); + + const editor = document.createElement('affine-editor-container'); + + editor.autofocus = true; + editor.doc = store; + + const defaultExtensions = getTestCommonExtensions(editor); + editor.pageSpecs = [...PageEditorBlockSpecs, ...defaultExtensions]; + editor.edgelessSpecs = [...EdgelessEditorBlockSpecs, ...defaultExtensions]; + + editor.std + .get(RefNodeSlotsProvider) + .docLinkClicked.on(({ pageId: docId }) => { + const target = workspace.getDoc(docId); + if (!target) { + throw new Error(`Failed to jump to doc ${docId}`); + } + target.load(); + editor.doc = target; + }); + + return editor; +} diff --git a/blocksuite/playground/apps/starter/utils/setup-playground.ts b/blocksuite/playground/apps/starter/utils/setup-playground.ts new file mode 100644 index 0000000000..b2cfd9f04d --- /dev/null +++ b/blocksuite/playground/apps/starter/utils/setup-playground.ts @@ -0,0 +1,42 @@ +import { DocModeProvider } from '@blocksuite/blocks'; +import { AffineEditorContainer } from '@blocksuite/presets'; +import type { Workspace } from '@blocksuite/store'; + +import { + getDocFromUrlParams, + listenHashChange, + setDocModeFromUrlParams, +} from '../../_common/history.js'; +import { createTestApp } from './app.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 editor = await createTestApp(doc, collection); + + const modeService = editor.std.provider.get(DocModeProvider); + editor.mode = modeService.getPrimaryMode(doc.id); + setDocModeFromUrlParams(modeService, url.searchParams, doc.id); + + // for multiple editor + const params = new URLSearchParams(location.search); + const init = params.get('init'); + if (init && init.startsWith('multiple-editor')) { + app.childNodes.forEach(node => { + if (node instanceof AffineEditorContainer) { + node.style.flex = '1'; + if (init === 'multiple-editor-vertical') { + node.style.overflow = 'auto'; + } + } + }); + } + + listenHashChange(collection, editor); + + return editor; +} diff --git a/blocksuite/playground/apps/starter/utils/test.ts b/blocksuite/playground/apps/starter/utils/test.ts index 95e20b5d8b..454448e89e 100644 --- a/blocksuite/playground/apps/starter/utils/test.ts +++ b/blocksuite/playground/apps/starter/utils/test.ts @@ -1,34 +1,18 @@ -import { - type BlockSuiteFlags, - CommunityCanvasTextFonts, - DocModeProvider, - EditorSettingExtension, - FeatureFlagService, - FontConfigExtension, - ParseDocUrlProvider, - RefNodeSlotsProvider, -} from '@blocksuite/blocks'; -import type { Container } from '@blocksuite/global/di'; -import type { ExtensionType, Store, Workspace } from '@blocksuite/store'; +import type { Store, Workspace } from '@blocksuite/store'; -import { - mockDocModeService, - mockEditorSetting, -} from '../../_common/mock-services'; +import { createTestApp } from './app'; export async function prepareTestApp(collection: Workspace) { const params = new URLSearchParams(location.search); - const allFlags = params.getAll('flag'); - const flags = allFlags.reduce( - (acc, flag) => { - acc[flag] = true; - return acc; - }, - {} as Record - ); const noInit = params.get('noInit') === 'true'; + const store = await getStore(collection, noInit); - await createTestApp(store, collection, flags); + store.load(); + if (!store.root) { + await new Promise(resolve => store.slots.rootAdded.once(resolve)); + } + + await createTestApp(store, collection); } async function getStore( @@ -63,114 +47,3 @@ async function getStore( return promise; } - -async function createTestApp( - doc: Store, - collection: Workspace, - flags: Partial = {} -) { - doc.load(); - - if (!doc.root) { - await new Promise(resolve => doc.slots.rootAdded.once(resolve)); - } - - // add app root from https://github.com/toeverything/blocksuite/commit/947201981daa64c5ceeca5fd549460c34e2dabfa - const appRoot = document.querySelector('#app'); - if (!appRoot) { - throw new Error('Cannot find app root element(#app).'); - } - - const editor = createEditor(doc, collection, appRoot, flags); - await editor.updateComplete; - - const debugMenu = document.createElement('starter-debug-menu'); - const docsPanel = document.createElement('docs-panel'); - const framePanel = document.createElement('custom-frame-panel'); - const outlinePanel = document.createElement('custom-outline-panel'); - const outlineViewer = document.createElement('custom-outline-viewer'); - const leftSidePanel = document.createElement('left-side-panel'); - docsPanel.editor = editor; - framePanel.editor = editor; - outlinePanel.editor = editor; - outlineViewer.editor = editor; - debugMenu.collection = collection; - debugMenu.editor = editor; - debugMenu.docsPanel = docsPanel; - debugMenu.framePanel = framePanel; - debugMenu.outlineViewer = outlineViewer; - debugMenu.outlinePanel = outlinePanel; - debugMenu.leftSidePanel = leftSidePanel; - document.body.append(debugMenu); - document.body.append(leftSidePanel); - document.body.append(framePanel); - document.body.append(outlinePanel); - document.body.append(outlineViewer); - - 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; - }, - }); -} - -function createEditor( - doc: Store, - collection: Workspace, - appRoot: Element, - flags: Partial = {} -) { - const editor = document.createElement('affine-editor-container'); - for (const [key, value] of Object.entries(flags)) { - doc.get(FeatureFlagService).setFlag(key as keyof BlockSuiteFlags, value); - } - doc.get(FeatureFlagService).setFlag('enable_advanced_block_visibility', true); - - editor.doc = doc; - editor.autofocus = true; - const defaultExtensions: ExtensionType[] = [ - FontConfigExtension(CommunityCanvasTextFonts), - EditorSettingExtension(mockEditorSetting()), - { - setup: (di: Container) => { - di.addImpl(ParseDocUrlProvider, { - parseDocUrl() { - return undefined; - }, - }); - }, - }, - { - setup: (di: Container) => { - di.override( - DocModeProvider, - mockDocModeService( - () => editor.mode, - (mode: 'page' | 'edgeless') => editor.switchEditor(mode) - ) - ); - }, - }, - ]; - editor.pageSpecs = [...editor.pageSpecs, ...defaultExtensions]; - editor.edgelessSpecs = [...editor.edgelessSpecs, ...defaultExtensions]; - - editor.std - .get(RefNodeSlotsProvider) - .docLinkClicked.on(({ pageId: docId }) => { - const newDoc = collection.getDoc(docId); - if (!newDoc) { - throw new Error(`Failed to jump to page ${docId}`); - } - editor.doc = newDoc; - }); - appRoot.append(editor); - return editor; -} diff --git a/blocksuite/presets/src/__tests__/utils/setup.ts b/blocksuite/presets/src/__tests__/utils/setup.ts index d59d3a10a0..cfe23adc50 100644 --- a/blocksuite/presets/src/__tests__/utils/setup.ts +++ b/blocksuite/presets/src/__tests__/utils/setup.ts @@ -12,7 +12,9 @@ effects(); import { CommunityCanvasTextFonts, type DocMode, + EdgelessEditorBlockSpecs, FontConfigExtension, + PageEditorBlockSpecs, StoreExtensions, } from '@blocksuite/blocks'; import { AffineSchemas } from '@blocksuite/blocks/schemas'; @@ -71,14 +73,16 @@ async function createEditor( const editor = new AffineEditorContainer(); editor.doc = doc; editor.mode = mode; - editor.pageSpecs = editor.pageSpecs.concat([ + editor.pageSpecs = [ + ...PageEditorBlockSpecs, FontConfigExtension(CommunityCanvasTextFonts), ...extensions, - ]); - editor.edgelessSpecs = editor.edgelessSpecs.concat([ + ]; + editor.edgelessSpecs = [ + ...EdgelessEditorBlockSpecs, FontConfigExtension(CommunityCanvasTextFonts), ...extensions, - ]); + ]; app.append(editor); window.editor = editor; diff --git a/blocksuite/presets/src/editors/editor-container.ts b/blocksuite/presets/src/editors/editor-container.ts index e12d5b7337..bf939b1882 100644 --- a/blocksuite/presets/src/editors/editor-container.ts +++ b/blocksuite/presets/src/editors/editor-container.ts @@ -1,11 +1,5 @@ import { BlockStdScope, ShadowlessElement } from '@blocksuite/block-std'; -import { - type AbstractEditor, - type DocMode, - EdgelessEditorBlockSpecs, - PageEditorBlockSpecs, - ThemeProvider, -} from '@blocksuite/blocks'; +import { type DocMode, ThemeProvider } from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { type BlockModel, @@ -18,10 +12,9 @@ import { property } from 'lit/decorators.js'; import { keyed } from 'lit/directives/keyed.js'; import { when } from 'lit/directives/when.js'; -export class AffineEditorContainer - extends SignalWatcher(WithDisposable(ShadowlessElement)) - implements AbstractEditor -{ +export class AffineEditorContainer extends SignalWatcher( + WithDisposable(ShadowlessElement) +) { static override styles = css` .affine-page-viewport { position: relative; @@ -90,13 +83,11 @@ export class AffineEditorContainer private readonly _doc = signal(); - private readonly _edgelessSpecs = signal( - EdgelessEditorBlockSpecs - ); + private readonly _edgelessSpecs = signal([]); private readonly _mode = signal('page'); - private readonly _pageSpecs = signal(PageEditorBlockSpecs); + private readonly _pageSpecs = signal([]); private readonly _specs = computed(() => this._mode.value === 'page' @@ -163,9 +154,6 @@ export class AffineEditorContainer return this._std.value; } - /** - * @deprecated need to refactor - */ override connectedCallback() { super.connectedCallback(); diff --git a/blocksuite/presets/src/editors/page-editor.ts b/blocksuite/presets/src/editors/page-editor.ts index 2b5c472383..1948185a65 100644 --- a/blocksuite/presets/src/editors/page-editor.ts +++ b/blocksuite/presets/src/editors/page-editor.ts @@ -77,12 +77,7 @@ export class PageEditor extends SignalWatcher( const std = this.std; const theme = std.get(ThemeProvider).app$.value; return html` -
+
${guard([std], () => std.render())}
`; @@ -103,9 +98,6 @@ export class PageEditor extends SignalWatcher( @property({ attribute: false }) accessor doc!: Store; - @property({ type: Boolean }) - accessor hasViewport = true; - @property({ attribute: false }) accessor specs = PageEditorBlockSpecs; diff --git a/blocksuite/tests-legacy/e2e/basic.spec.ts b/blocksuite/tests-legacy/e2e/basic.spec.ts index ad3c98d270..21d1dc8d5c 100644 --- a/blocksuite/tests-legacy/e2e/basic.spec.ts +++ b/blocksuite/tests-legacy/e2e/basic.spec.ts @@ -121,7 +121,6 @@ test( const pageB = await context.newPage(); await enterPlaygroundRoom(pageB, { - flags: {}, room, noInit: true, }); @@ -181,7 +180,7 @@ test( const room = await enterPlaygroundRoom(pageA); const pageB = await browser.newPage(); - await enterPlaygroundRoom(pageB, { flags: {}, room }); + await enterPlaygroundRoom(pageB, { room }); await disconnectByClick(pageA); await disconnectByClick(pageB); diff --git a/blocksuite/tests-legacy/e2e/edgeless/color-picker.spec.ts b/blocksuite/tests-legacy/e2e/edgeless/color-picker.spec.ts index d5e1ef210b..bb0831e9be 100644 --- a/blocksuite/tests-legacy/e2e/edgeless/color-picker.spec.ts +++ b/blocksuite/tests-legacy/e2e/edgeless/color-picker.spec.ts @@ -15,7 +15,7 @@ import { parseStringToRgba } from '../utils/bs-alternative.js'; import { test } from '../utils/playwright.js'; async function setupWithColorPickerFunction(page: Page) { - await enterPlaygroundRoom(page, { flags: { enable_color_picker: true } }); + await enterPlaygroundRoom(page); await initEmptyEdgelessState(page); await switchEditorMode(page); } diff --git a/blocksuite/tests-legacy/e2e/utils/actions/misc.ts b/blocksuite/tests-legacy/e2e/utils/actions/misc.ts index 0133473da1..34d917f2d6 100644 --- a/blocksuite/tests-legacy/e2e/utils/actions/misc.ts +++ b/blocksuite/tests-legacy/e2e/utils/actions/misc.ts @@ -1,7 +1,6 @@ import '../declare-test-window.js'; import type { - BlockSuiteFlags, DatabaseBlockModel, ListType, RichText, @@ -111,7 +110,6 @@ export function expectConsoleMessage( } export type PlaygroundRoomOptions = { - flags?: Partial; room?: string; blobSource?: ('idb' | 'mock')[]; noInit?: boolean; @@ -128,11 +126,6 @@ export async function enterPlaygroundRoom( } url.searchParams.set('room', room); url.searchParams.set('blobSource', blobSource?.join(',') || 'idb'); - for (const [key, value] of Object.entries(ops?.flags || {})) { - if (value) { - url.searchParams.append('flag', key); - } - } if (ops?.noInit) { url.searchParams.set('noInit', 'true'); } diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index 6644d54517..8c2909cf39 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx @@ -343,7 +343,6 @@ export const BlocksuiteDocEditor = forwardRef< ref={onDocRef} doc={page} specs={specs} - hasViewport={false} />