refactor(editor): remove global types in config (#10143)

Closes: [BS-2554](https://linear.app/affine-design/issue/BS-2554/remove-global-types-in-block-config)
This commit is contained in:
Saul-Mirone
2025-02-13 04:35:35 +00:00
parent dbf1d0038a
commit 9321ce94a7
34 changed files with 98 additions and 153 deletions
@@ -1,3 +1,4 @@
import { ConfigExtensionFactory } from '@blocksuite/block-std';
import type { BundledLanguageInfo, ThemeInput } from 'shiki';
export interface CodeBlockConfig {
@@ -13,3 +14,6 @@ export interface CodeBlockConfig {
*/
showLineNumbers?: boolean;
}
export const CodeBlockConfigExtension =
ConfigExtensionFactory<CodeBlockConfig>('affine:code');
@@ -12,6 +12,7 @@ import {
} from 'shiki';
import getWasm from 'shiki/wasm';
import { CodeBlockConfigExtension } from './code-block-config.js';
import {
CODE_BLOCK_DEFAULT_DARK_THEME,
CODE_BLOCK_DEFAULT_LIGHT_THEME,
@@ -27,7 +28,10 @@ export class CodeBlockService extends BlockService {
highlighter$: Signal<HighlighterCore | null> = signal(null);
get langs() {
return this.std.getConfig('affine:code')?.langs ?? bundledLanguagesInfo;
return (
this.std.getOptional(CodeBlockConfigExtension.identifier)?.langs ??
bundledLanguagesInfo
);
}
get themeKey() {
@@ -46,7 +50,9 @@ export class CodeBlockService extends BlockService {
engine: createOnigurumaEngine(() => getWasm),
})
.then(async highlighter => {
const config = this.std.getConfig('affine:code');
const config = this.std.getOptional(
CodeBlockConfigExtension.identifier
);
const darkTheme = config?.theme?.dark ?? CODE_BLOCK_DEFAULT_DARK_THEME;
const lightTheme =
config?.theme?.light ?? CODE_BLOCK_DEFAULT_LIGHT_THEME;
@@ -32,6 +32,7 @@ import { classMap } from 'lit/directives/class-map.js';
import type { ThemedToken } from 'shiki';
import { CodeClipboardController } from './clipboard/index.js';
import { CodeBlockConfigExtension } from './code-block-config.js';
import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
import type { CodeBlockService } from './code-block-service.js';
import { codeBlockStyles } from './styles.js';
@@ -383,7 +384,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
override renderBlock(): TemplateResult<1> {
const showLineNumbers =
this.std.getConfig('affine:code')?.showLineNumbers ?? true;
this.std.getOptional(CodeBlockConfigExtension.identifier)
?.showLineNumbers ?? true;
return html`
<div
@@ -1,5 +1,4 @@
import { CodeBlockComponent } from './code-block';
import type { CodeBlockConfig } from './code-block-config';
import {
AFFINE_CODE_TOOLBAR_WIDGET,
AffineCodeToolbarWidget,
@@ -17,12 +16,6 @@ export function effects() {
}
declare global {
namespace BlockSuite {
interface BlockConfigs {
'affine:code': CodeBlockConfig;
}
}
interface HTMLElementTagNameMap {
'language-list-button': LanguageListButton;
'affine-code-toolbar': AffineCodeToolbar;
@@ -1,6 +1,10 @@
import type { MenuOptions } from '@blocksuite/affine-components/context-menu';
import { type DatabaseBlockModel } from '@blocksuite/affine-model';
import { ConfigExtensionFactory } from '@blocksuite/block-std';
export interface DatabaseOptionsConfig {
configure: (model: DatabaseBlockModel, options: MenuOptions) => MenuOptions;
}
export const DatabaseConfigExtension =
ConfigExtensionFactory<DatabaseOptionsConfig>('affine:database');
@@ -48,7 +48,10 @@ import { computed, signal } from '@preact/signals-core';
import { css, html, nothing, unsafeCSS } from 'lit';
import { popSideDetail } from './components/layout.js';
import type { DatabaseOptionsConfig } from './config.js';
import {
DatabaseConfigExtension,
type DatabaseOptionsConfig,
} from './config.js';
import { HostContextKey } from './context/host-context.js';
import { DatabaseBlockDataSource } from './data-source.js';
import { BlockRenderer } from './detail-panel/block-renderer.js';
@@ -343,7 +346,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
get optionsConfig(): DatabaseOptionsConfig {
return {
configure: (_model, options) => options,
...this.std.getConfig('affine:database'),
...this.std.getOptional(DatabaseConfigExtension.identifier),
};
}
@@ -1,6 +1,5 @@
import { CenterPeek } from './components/layout';
import { DatabaseTitle } from './components/title';
import type { DatabaseOptionsConfig } from './config';
import { DatabaseBlockComponent } from './database-block';
import { BlockRenderer } from './detail-panel/block-renderer';
import { NoteRenderer } from './detail-panel/note-renderer';
@@ -37,11 +36,3 @@ export function effects() {
customElements.define('affine-database-link-node', LinkNode);
customElements.define('affine-database', DatabaseBlockComponent);
}
declare global {
namespace BlockSuite {
interface BlockConfigs {
'affine:database': Partial<DatabaseOptionsConfig>;
}
}
}
@@ -1,6 +1,6 @@
export * from './adapters';
export * from './commands';
export type { DatabaseOptionsConfig } from './config';
export * from './config';
export * from './data-source';
export * from './database-block';
export * from './database-spec';
@@ -35,6 +35,7 @@ import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { NoteConfigExtension } from '../config';
import { isPageBlock } from '../utils';
import * as styles from './edgeless-note-background.css';
@@ -148,7 +149,7 @@ export class EdgelessNoteBackground extends SignalWatcher(
private _renderHeader() {
const header = this.std
.getConfig('affine:note')
.getOptional(NoteConfigExtension.identifier)
?.edgelessNoteHeader({ note: this.note, std: this.std });
return header;
@@ -11,6 +11,7 @@ import { consume } from '@lit/context';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { NoteConfigExtension } from '../config';
import { isPageBlock } from '../utils';
import * as styles from './edgeless-page-block-title.css';
@@ -23,10 +24,12 @@ export class EdgelessPageBlockTitle extends SignalWatcher(
override render() {
if (!isPageBlock(this.std, this.note)) return;
const title = this.std.getConfig('affine:note')?.pageBlockTitle({
note: this.note,
std: this.std,
});
const title = this.std
.getOptional(NoteConfigExtension.identifier)
?.pageBlockTitle({
note: this.note,
std: this.std,
});
return html`<div class=${styles.pageBlockTitle}>${title}</div>`;
}
+6 -4
View File
@@ -1,5 +1,8 @@
import type { NoteBlockModel } from '@blocksuite/affine-model';
import { type BlockStdScope, ConfigExtension } from '@blocksuite/block-std';
import {
type BlockStdScope,
ConfigExtensionFactory,
} from '@blocksuite/block-std';
import type { TemplateResult } from 'lit';
type NoteBlockContext = {
@@ -12,6 +15,5 @@ export type NoteConfig = {
pageBlockTitle: (context: NoteBlockContext) => TemplateResult;
};
export function NoteConfigExtension(config: NoteConfig) {
return ConfigExtension('affine:note', config);
}
export const NoteConfigExtension =
ConfigExtensionFactory<NoteConfig>('affine:note');
@@ -1,7 +1,6 @@
import { EdgelessNoteBackground } from './components/edgeless-note-background';
import { EdgelessNoteMask } from './components/edgeless-note-mask';
import { EdgelessPageBlockTitle } from './components/edgeless-page-block-title';
import type { NoteConfig } from './config';
import { NoteBlockComponent } from './note-block';
import {
AFFINE_EDGELESS_NOTE,
@@ -15,11 +14,3 @@ export function effects() {
customElements.define('edgeless-note-background', EdgelessNoteBackground);
customElements.define('edgeless-page-block-title', EdgelessPageBlockTitle);
}
declare global {
namespace BlockSuite {
interface BlockConfigs {
'affine:note': NoteConfig;
}
}
}
@@ -1,16 +1,7 @@
import { SurfaceBlockComponent } from './surface-block.js';
import { SurfaceBlockVoidComponent } from './surface-block-void.js';
import type { SurfaceBlockService } from './surface-service.js';
export function effects() {
customElements.define('affine-surface-void', SurfaceBlockVoidComponent);
customElements.define('affine-surface', SurfaceBlockComponent);
}
declare global {
namespace BlockSuite {
interface BlockServices {
'affine:surface': SurfaceBlockService;
}
}
}
@@ -0,0 +1,7 @@
import { ConfigExtensionFactory } from '@blocksuite/block-std';
import type { ToolbarMoreMenuConfig } from './types';
export const ToolbarMoreMenuConfigExtension = ConfigExtensionFactory<
Partial<ToolbarMoreMenuConfig>
>('affine-toolbar-more-menu');
@@ -8,6 +8,7 @@ import { EditorToolbarSeparator } from './separator.js';
import { EditorToolbar } from './toolbar.js';
import { Tooltip } from './tooltip.js';
export { ToolbarMoreMenuConfigExtension } from './config.js';
export { EditorIconButton } from './icon-button.js';
export {
EditorMenuAction,
@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { join } from 'lit/directives/join.js';
import { repeat } from 'lit/directives/repeat.js';
import { ToolbarMoreMenuConfigExtension } from './config.js';
import type { MenuContext } from './menu-context.js';
import type {
FatMenuItems,
@@ -112,10 +113,6 @@ export function renderToolbarSeparator() {
export function getMoreMenuConfig(std: BlockStdScope): ToolbarMoreMenuConfig {
return {
configure: <T extends MenuContext>(groups: MenuItemGroup<T>[]) => groups,
...(
std.getConfig('affine:page' as BlockSuite.ConfigKeys) as null | {
toolbarMoreMenu: Partial<ToolbarMoreMenuConfig>;
}
)?.toolbarMoreMenu,
...std.getOptional(ToolbarMoreMenuConfigExtension.identifier),
};
}
-9
View File
@@ -142,7 +142,6 @@ import {
FramePreview,
PageRootBlockComponent,
PreviewRootBlockComponent,
type RootBlockConfig,
} from './root-block/index.js';
import { AIFinishTip } from './root-block/widgets/ai-panel/components/finish-tip.js';
import { GeneratingPlaceholder } from './root-block/widgets/ai-panel/components/generating-placeholder.js';
@@ -393,11 +392,3 @@ export function effects() {
customElements.define(AFFINE_SURFACE_REF_TOOLBAR, AffineSurfaceRefToolbar);
customElements.define(AFFINE_FORMAT_BAR_WIDGET, AffineFormatBarWidget);
}
declare global {
namespace BlockSuite {
interface BlockConfigs {
'affine:page': RootBlockConfig;
}
}
}
+1
View File
@@ -95,6 +95,7 @@ export {
renderActions,
renderGroups,
renderToolbarSeparator,
ToolbarMoreMenuConfigExtension,
Tooltip,
} from '@blocksuite/affine-components/toolbar';
export * from '@blocksuite/affine-model';
@@ -31,7 +31,7 @@ import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/inde
import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/index.js';
import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
import { AFFINE_SLASH_MENU_WIDGET } from '../widgets/slash-menu/index.js';
import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
@@ -23,7 +23,7 @@ import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/
import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
import { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from '../widgets/keyboard-toolbar/index.js';
import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/index.js';
import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
import { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from '../widgets/page-dragging-area/page-dragging-area.js';
import { AFFINE_SLASH_MENU_WIDGET } from '../widgets/slash-menu/index.js';
@@ -1,10 +1,12 @@
import type { ToolbarMoreMenuConfig } from '@blocksuite/affine-components/toolbar';
import { ConfigExtensionFactory } from '@blocksuite/block-std';
import type { KeyboardToolbarConfig } from './widgets/keyboard-toolbar/config.js';
import type { LinkedWidgetConfig } from './widgets/linked-doc/index.js';
export interface RootBlockConfig {
linkedWidget?: Partial<LinkedWidgetConfig>;
toolbarMoreMenu?: Partial<ToolbarMoreMenuConfig>;
keyboardToolbar?: Partial<KeyboardToolbarConfig>;
}
export const RootBlockConfigExtension =
ConfigExtensionFactory<RootBlockConfig>('affine:root-block');
+1 -1
View File
@@ -13,7 +13,7 @@ import type { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from './widgets/embed-card-tool
import type { AFFINE_FORMAT_BAR_WIDGET } from './widgets/format-bar/format-bar.js';
import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js';
import type { AFFINE_INNER_MODAL_WIDGET } from './widgets/inner-modal/inner-modal.js';
import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/index.js';
import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/config.js';
import type { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
import type { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from './widgets/page-dragging-area/page-dragging-area.js';
import type { AFFINE_SLASH_MENU_WIDGET } from './widgets/slash-menu/index.js';
@@ -7,6 +7,7 @@ import { signal } from '@preact/signals-core';
import { html, nothing } from 'lit';
import type { PageRootBlockComponent } from '../../page/page-root-block.js';
import { RootBlockConfigExtension } from '../../root-config.js';
import { defaultKeyboardToolbarConfig } from './config.js';
export * from './config.js';
@@ -41,7 +42,8 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<
get config() {
return {
...defaultKeyboardToolbarConfig,
...this.std.getConfig('affine:page')?.keyboardToolbar,
...this.std.getOptional(RootBlockConfigExtension.identifier)
?.keyboardToolbar,
};
}
@@ -259,3 +259,5 @@ export const LinkedWidgetUtils = {
createNewDocMenuGroup,
insertLinkedNode,
};
export const AFFINE_LINKED_DOC_WIDGET = 'affine-linked-doc-widget';
@@ -1,5 +1,6 @@
import { AFFINE_LINKED_DOC_WIDGET } from './config.js';
import { ImportDoc } from './import-doc/import-doc.js';
import { AFFINE_LINKED_DOC_WIDGET, AffineLinkedDocWidget } from './index.js';
import { AffineLinkedDocWidget } from './index.js';
import { LinkedDocPopover } from './linked-doc-popover.js';
import { AffineMobileLinkedDocMenu } from './mobile-linked-doc-menu.js';
@@ -20,8 +20,12 @@ import { choose } from 'lit/directives/choose.js';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { PageRootBlockComponent } from '../../index.js';
import {
type PageRootBlockComponent,
RootBlockConfigExtension,
} from '../../index.js';
import {
type AFFINE_LINKED_DOC_WIDGET,
getMenus,
type LinkedDocContext,
type LinkedWidgetConfig,
@@ -29,8 +33,6 @@ import {
import { linkedDocWidgetStyles } from './styles.js';
export { type LinkedWidgetConfig } from './config.js';
export const AFFINE_LINKED_DOC_WIDGET = 'affine-linked-doc-widget';
export class AffineLinkedDocWidget extends WidgetComponent<
RootBlockModel,
PageRootBlockComponent
@@ -218,7 +220,8 @@ export class AffineLinkedDocWidget extends WidgetComponent<
scrollContainer: getViewportElement(this.std.host) ?? window,
scrollTopOffset: 46,
},
...this.std.getConfig('affine:page')?.linkedWidget,
...this.std.getOptional(RootBlockConfigExtension.identifier)
?.linkedWidget,
};
}
@@ -50,13 +50,3 @@ export const HeadingBlockSchema = defineBlockSchema({
export class HeadingBlockModel extends BlockModel<
ReturnType<(typeof HeadingBlockSchema)['model']['props']>
> {}
declare global {
namespace BlockSuite {
interface BlockModels {
'test:page': RootBlockModel;
'test:note': NoteBlockModel;
'test:heading': HeadingBlockModel;
}
}
}
@@ -1,3 +1,4 @@
import type { ServiceIdentifier } from '@blocksuite/global/di';
import type { ExtensionType } from '@blocksuite/store';
import { ConfigIdentifier } from '../identifier.js';
@@ -15,17 +16,25 @@ import { ConfigIdentifier } from '../identifier.js';
*
* @example
* ```ts
* import { ConfigExtension } from '@blocksuite/block-std';
* const MyConfigExtension = ConfigExtension('my-flavour', config);
* import { ConfigExtensionFactory } from '@blocksuite/block-std';
* const MyConfigExtensionFactory = ConfigExtensionFactory<ConfigType>('my-flavour');
* const MyConfigExtension = MyConfigExtensionFactory({
* option1: 'value1',
* option2: 'value2',
* });
* ```
*/
export function ConfigExtension(
flavor: string,
config: Record<string, unknown>
): ExtensionType {
return {
export function ConfigExtensionFactory<Config extends Record<string, any>>(
flavor: string
): ((config: Config) => ExtensionType) & {
identifier: ServiceIdentifier<Config>;
} {
const identifier = ConfigIdentifier(flavor) as ServiceIdentifier<Config>;
const extensionFactory = (config: Config): ExtensionType => ({
setup: di => {
di.addImpl(ConfigIdentifier(flavor), () => config);
},
};
});
extensionFactory.identifier = identifier;
return extensionFactory;
}
@@ -18,7 +18,6 @@ import { SurfaceMiddlewareExtension } from '../gfx/surface-middleware.js';
import { ViewManager } from '../gfx/view/view-manager.js';
import {
BlockViewIdentifier,
ConfigIdentifier,
LifeCycleWatcherIdentifier,
StdIdentifier,
} from '../identifier.js';
@@ -137,19 +136,6 @@ export class BlockStdScope {
});
}
getConfig<Key extends BlockSuite.ConfigKeys>(
flavour: Key
): BlockSuite.BlockConfigs[Key] | null;
getConfig(flavour: string) {
const config = this.provider.getOptional(ConfigIdentifier(flavour));
if (!config) {
return null;
}
return config;
}
getView(flavour: string) {
return this.getOptional(BlockViewIdentifier(flavour));
}
@@ -191,11 +177,3 @@ export class BlockStdScope {
});
}
}
declare global {
namespace BlockSuite {
interface BlockConfigs {}
type ConfigKeys = string & keyof BlockConfigs;
}
}
@@ -859,13 +859,3 @@ describe('getBlock', () => {
assert.equal(invalid, null);
});
});
declare global {
namespace BlockSuite {
interface BlockModels {
'affine:page': BlockModel;
'affine:paragraph': BlockModel;
'affine:note': BlockModel;
}
}
}
@@ -1,7 +1,6 @@
import { literal } from 'lit/static-html.js';
import { describe, expect, it, vi } from 'vitest';
import type { BlockModel } from '../model/block/block-model.js';
import { defineBlockSchema } from '../model/block/zod.js';
// import some blocks
import { SchemaValidateError } from '../schema/error.js';
@@ -124,12 +123,3 @@ describe('schema', () => {
});
});
});
declare global {
namespace BlockSuite {
interface BlockModels {
'affine:note-block-video': BlockModel;
'affine:note-invalid-block-video': BlockModel;
}
}
}
@@ -133,11 +133,3 @@ test('snapshot to model', async () => {
expect(item.content.toString()).toBe(`item ${index + 1}`);
});
});
declare global {
namespace BlockSuite {
interface BlockModels {
page: BlockModel;
}
}
}
@@ -1,6 +1,6 @@
import type { Page } from '@playwright/test';
import { assertImageOption } from 'utils/asserts.js';
import { assertImageOption } from '../asserts.js';
import { getIndexCoordinate, waitNextFrame } from './misc.js';
export async function dragBetweenCoords(
@@ -9,15 +9,10 @@ import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
import { EditorSettingService } from '@affine/core/modules/editor-setting';
import { AppThemeService } from '@affine/core/modules/theme';
import { mixpanel } from '@affine/track';
import {
ConfigExtension,
LifeCycleWatcher,
StdIdentifier,
} from '@blocksuite/affine/block-std';
import { LifeCycleWatcher, StdIdentifier } from '@blocksuite/affine/block-std';
import type {
DocDisplayMetaExtension,
DocDisplayMetaParams,
RootBlockConfig,
Signal,
SpecBuilder,
TelemetryEventMap,
@@ -27,14 +22,17 @@ import {
CodeBlockSpec,
ColorScheme,
createSignalFromObservable,
DatabaseConfigExtension,
DocDisplayMetaProvider,
EditorSettingExtension,
ImageBlockSpec,
ParagraphBlockSpec,
referenceToNode,
RootBlockConfigExtension,
SpecProvider,
TelemetryProvider,
ThemeExtensionIdentifier,
ToolbarMoreMenuConfigExtension,
} from '@blocksuite/affine/blocks';
import type { Container } from '@blocksuite/affine/global/di';
import type { ExtensionType } from '@blocksuite/affine/store';
@@ -231,11 +229,11 @@ function getEditorConfigExtension(
const editorSettingService = framework.get(EditorSettingService);
return [
EditorSettingExtension(editorSettingService.editorSetting.settingSignal),
ConfigExtension('affine:database', createDatabaseOptionsConfig(framework)),
ConfigExtension('affine:page', {
DatabaseConfigExtension(createDatabaseOptionsConfig(framework)),
RootBlockConfigExtension({
linkedWidget: createLinkedWidgetConfig(framework),
toolbarMoreMenu: createToolbarMoreMenuConfig(framework),
} satisfies RootBlockConfig),
}),
ToolbarMoreMenuConfigExtension(createToolbarMoreMenuConfig(framework)),
];
}