fix(core): avoid side effects (#8245)

packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts

@@ -10,7 +10,7 @@ import { createLitPortal, HoverController } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -38,7 +38,6 @@ export type AskAIButtonOptions = {
   panelWidth?: number;
 };
 
-@customElement('ask-ai-button')
 export class AskAIButton extends WithDisposable(LitElement) {
   get _edgeless() {
     const rootService = getRootService(this.host);

packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts

@@ -5,12 +5,11 @@ import {
   scrollbarStyle,
 } from '@blocksuite/blocks';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { getRootService } from '../../utils/selection-utils';
 
-@customElement('ask-ai-panel')
 export class AskAIPanel extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/_common/components/chat-action-list.ts

@@ -5,14 +5,13 @@ import type {
 } from '@blocksuite/block-std';
 import { type ImageSelection, NotificationProvider } from '@blocksuite/blocks';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { insertBelow } from '../../utils/editor-actions';
 import type { ChatAction } from '../chat-actions-handle';
 
-@customElement('chat-action-list')
 export class ChatActionList extends LitElement {
   static override styles = css`
     .actions-container {

packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts

@@ -11,7 +11,7 @@ import {
 } from '@blocksuite/blocks';
 import { noop } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { type ChatAction } from '../../_common/chat-actions-handle';
@@ -20,7 +20,6 @@ import { copyText } from '../../utils/editor-actions';
 
 noop(Tooltip);
 
-@customElement('chat-copy-more')
 export class ChatCopyMore extends WithDisposable(LitElement) {
   static override styles = css`
     .copy-more {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/action-wrapper.ts

@@ -1,7 +1,7 @@
 import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/block-std';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 import {
   ActionIcon,
@@ -59,7 +59,6 @@ const icons: Record<string, TemplateResult<1>> = {
   'Convert to sticker': AIImageIcon,
 };
 
-@customElement('action-wrapper')
 export class ActionWrapper extends WithDisposable(LitElement) {
   static override styles = css`
     .action-name {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/chat-text.ts

@@ -3,11 +3,10 @@ import './action-wrapper';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { createTextRenderer } from '../../messages/text';
 import { renderImages } from '../components/images';
-@customElement('chat-text')
 export class ChatText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host!: EditorHost;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/image-to-text.ts

@@ -3,13 +3,12 @@ import './action-wrapper';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 
-@customElement('action-image-to-text')
 export class ActionImageToText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/image.ts

@@ -3,13 +3,12 @@ import './action-wrapper';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 
-@customElement('action-image')
 export class ActionImage extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/make-real.ts

@@ -3,13 +3,12 @@ import './action-wrapper';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { createIframeRenderer } from '../../messages/wrapper';
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-make-real')
 export class ActionMakeReal extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/mindmap.ts

@@ -5,14 +5,13 @@ import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { MiniMindmapPreview } from '@blocksuite/blocks';
 import { noop } from '@blocksuite/global/utils';
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 
 noop(MiniMindmapPreview);
 
-@customElement('action-mindmap')
 export class ActionMindmap extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/slides.ts

@@ -4,12 +4,11 @@ import '../../messages/slides-renderer';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-slides')
 export class ActionSlides extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/text.ts

@@ -3,13 +3,12 @@ import './action-wrapper';
 import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/block-std';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { createTextRenderer } from '../../messages/text';
 import type { ChatAction } from '../chat-context';
 
-@customElement('action-text')
 export class ActionText extends WithDisposable(LitElement) {
   static override styles = css`
     .original-text {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/ai-loading.ts

@@ -1,10 +1,9 @@
 import { WithDisposable } from '@blocksuite/block-std';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { AIStarIconWithAnimation } from '../_common/icons';
 
-@customElement('ai-loading')
 export class AILoading extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts

@@ -15,7 +15,7 @@ import {
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -94,7 +94,6 @@ type Card = CardText | CardImage | CardBlock;
 
 const MAX_CARDS = 3;
 
-@customElement('chat-cards')
 export class ChatCards extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-input.ts

@@ -3,7 +3,7 @@ import { WithDisposable } from '@blocksuite/block-std';
 import { type AIError, openFileOrFiles } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import {
@@ -25,7 +25,6 @@ function getFirstTwoLines(text: string) {
   return lines.slice(0, 2);
 }
 
-@customElement('chat-panel-input')
 export class ChatPanelInput extends WithDisposable(LitElement) {
   static override styles = css`
     .chat-panel-input {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts

@@ -23,7 +23,7 @@ import {
   UnauthorizedError,
 } from '@blocksuite/blocks';
 import { css, html, nothing, type PropertyValues } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -38,7 +38,6 @@ import type { ChatContextValue, ChatItem, ChatMessage } from './chat-context';
 import { HISTORY_IMAGE_ACTIONS } from './const';
 import { AIPreloadConfig } from './preload-config';
 
-@customElement('chat-panel-messages')
 export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     chat-panel-messages {

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts

@@ -7,7 +7,7 @@ import { NotificationProvider } from '@blocksuite/blocks';
 import { debounce } from '@blocksuite/global/utils';
 import type { Doc } from '@blocksuite/store';
 import { css, html, type PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { AIHelpIcon, SmallHintIcon } from '../_common/icons';
@@ -19,7 +19,6 @@ import {
 import type { ChatAction, ChatContextValue, ChatItem } from './chat-context';
 import type { ChatPanelMessages } from './chat-panel-messages';
 
-@customElement('chat-panel')
 export class ChatPanel extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     chat-panel {

packages/frontend/core/src/blocksuite/presets/ai/index.ts

@@ -6,3 +6,4 @@ export * from './entries/index';
 export * from './messages/index';
 export { AIChatBlockPeekViewTemplate } from './peek-view/chat-block-peek-view';
 export * from './provider';
+export * from './setup';

packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts

@@ -5,14 +5,13 @@ import {
   UnauthorizedError,
 } from '@blocksuite/blocks';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { ErrorTipIcon } from '../_common/icons';
 import { AIProvider } from '../provider';
 
-@customElement('ai-error-wrapper')
-class AIErrorWrapper extends WithDisposable(LitElement) {
+export class AIErrorWrapper extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor text!: TemplateResult<1>;
 

packages/frontend/core/src/blocksuite/presets/ai/messages/slides-renderer.ts

@@ -8,7 +8,7 @@ import { AffineSchemas } from '@blocksuite/blocks/schemas';
 import type { Doc } from '@blocksuite/store';
 import { DocCollection, Schema } from '@blocksuite/store';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 
 import { getAIPanel } from '../ai-panel';
@@ -48,7 +48,6 @@ export const createSlidesRenderer: (
   };
 };
 
-@customElement('ai-slides-renderer')
 export class AISlidesRenderer extends WithDisposable(LitElement) {
   static override styles = css``;
 

packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts

@@ -15,7 +15,7 @@ import {
 } from '@blocksuite/blocks';
 import { BlockViewType, type Doc, type Query } from '@blocksuite/store';
 import { css, html, LitElement, type PropertyValues } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
 
@@ -75,7 +75,6 @@ type TextRendererOptions = {
   customHeading?: boolean;
 };
 
-@customElement('ai-answer-text')
 export class AIAnswerText extends WithDisposable(LitElement) {
   static override styles = css`
     .ai-answer-text-editor.affine-page-viewport {

packages/frontend/core/src/blocksuite/presets/ai/messages/wrapper.ts

@@ -1,7 +1,7 @@
 import type { EditorHost } from '@blocksuite/block-std';
 import type { AffineAIPanelWidgetConfig } from '@blocksuite/blocks';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { getAIPanel } from '../ai-panel';
 import { preprocessHtml } from '../utils/html';
@@ -10,7 +10,6 @@ type AIAnswerWrapperOptions = {
   height: number;
 };
 
-@customElement('ai-answer-wrapper')
 export class AIAnswerWrapper extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-input.ts

@@ -2,7 +2,7 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { type AIError, openFileOrFiles } from '@blocksuite/blocks';
 import { type ChatMessage } from '@blocksuite/presets';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -20,7 +20,6 @@ import type { ChatContext } from './types';
 
 const MaximumImageCount = 8;
 
-@customElement('chat-block-input')
 export class ChatBlockInput extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-peek-view.ts

@@ -19,7 +19,7 @@ import {
   ChatMessagesSchema,
 } from '@blocksuite/presets';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -35,7 +35,6 @@ import { PeekViewStyles } from './styles';
 import type { ChatContext } from './types';
 import { calcChildBound } from './utils';
 
-@customElement('ai-chat-block-peek-view')
 export class AIChatBlockPeekView extends LitElement {
   static override styles = PeekViewStyles;
 

packages/frontend/core/src/blocksuite/presets/ai/peek-view/date-time.ts

@@ -1,8 +1,7 @@
 import { i18nTime } from '@affine/i18n';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
-@customElement('date-time')
 export class DateTime extends LitElement {
   static override styles = css`
     :host {

packages/frontend/core/src/blocksuite/presets/ai/setup.ts

@@ -0,0 +1,50 @@
+import { AskAIButton } from './_common/components/ask-ai-button';
+import { AskAIPanel } from './_common/components/ask-ai-panel';
+import { ChatActionList } from './_common/components/chat-action-list';
+import { ChatCopyMore } from './_common/components/copy-more';
+import { ChatPanel } from './chat-panel';
+import { ActionWrapper } from './chat-panel/actions/action-wrapper';
+import { ChatText } from './chat-panel/actions/chat-text';
+import { ActionImage } from './chat-panel/actions/image';
+import { ActionImageToText } from './chat-panel/actions/image-to-text';
+import { ActionMakeReal } from './chat-panel/actions/make-real';
+import { ActionMindmap } from './chat-panel/actions/mindmap';
+import { ActionSlides } from './chat-panel/actions/slides';
+import { ActionText } from './chat-panel/actions/text';
+import { AILoading } from './chat-panel/ai-loading';
+import { ChatCards } from './chat-panel/chat-cards';
+import { ChatPanelInput } from './chat-panel/chat-panel-input';
+import { ChatPanelMessages } from './chat-panel/chat-panel-messages';
+import { AIAnswerText, AIAnswerWrapper } from './messages';
+import { AIErrorWrapper } from './messages/error';
+import { AISlidesRenderer } from './messages/slides-renderer';
+import { ChatBlockInput } from './peek-view/chat-block-input';
+import { AIChatBlockPeekView } from './peek-view/chat-block-peek-view';
+import { DateTime } from './peek-view/date-time';
+
+export function registerAICustomComponents() {
+  customElements.define('ask-ai-button', AskAIButton);
+  customElements.define('ask-ai-panel', AskAIPanel);
+  customElements.define('chat-action-list', ChatActionList);
+  customElements.define('chat-copy-more', ChatCopyMore);
+  customElements.define('action-wrapper', ActionWrapper);
+  customElements.define('chat-text', ChatText);
+  customElements.define('action-image-to-text', ActionImageToText);
+  customElements.define('action-image', ActionImage);
+  customElements.define('action-make-real', ActionMakeReal);
+  customElements.define('action-mindmap', ActionMindmap);
+  customElements.define('action-slides', ActionSlides);
+  customElements.define('action-text', ActionText);
+  customElements.define('ai-loading', AILoading);
+  customElements.define('chat-cards', ChatCards);
+  customElements.define('chat-panel-input', ChatPanelInput);
+  customElements.define('chat-panel-messages', ChatPanelMessages);
+  customElements.define('chat-panel', ChatPanel);
+  customElements.define('ai-error-wrapper', AIErrorWrapper);
+  customElements.define('ai-slides-renderer', AISlidesRenderer);
+  customElements.define('ai-answer-wrapper', AIAnswerWrapper);
+  customElements.define('ai-answer-text', AIAnswerText);
+  customElements.define('chat-block-input', ChatBlockInput);
+  customElements.define('ai-chat-block-peek-view', AIChatBlockPeekView);
+  customElements.define('date-time', DateTime);
+}

packages/frontend/core/src/bootstrap/blocksuite.ts

@@ -1,13 +0,0 @@
-import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless';
-import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers';
-import type { TemplateManager } from '@blocksuite/blocks';
-import { EdgelessTemplatePanel } from '@blocksuite/blocks';
-
-export function setupBlocksuite() {
-  EdgelessTemplatePanel.templates.extend(
-    builtInStickersTemplates as TemplateManager
-  );
-  EdgelessTemplatePanel.templates.extend(
-    builtInEdgelessTemplates as TemplateManager
-  );
-}

packages/frontend/core/src/bootstrap/index.ts

@@ -12,5 +12,3 @@ export async function setupBrowser() {
   await polyfillBrowser();
   setupEnvironment();
 }
-
-export { setupBlocksuite } from './blocksuite';

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx

@@ -1,5 +1,4 @@
 import { Skeleton } from '@affine/component';
-import { getFontConfigExtension } from '@affine/core/components/blocksuite/block-suite-editor';
 import type { EditorSettingSchema } from '@affine/core/modules/editor-settting';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import type { EditorHost } from '@blocksuite/block-std';
@@ -72,10 +71,7 @@ export const EdgelessSnapshot = (props: Props) => {
 
     const editorHost = new BlockStdScope({
       doc,
-      extensions: [
-        ...SpecProvider.getInstance().getSpec('edgeless:preview').value,
-        getFontConfigExtension(),
-      ],
+      extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value,
     }).render();
     docRef.current = doc;
     editorHostRef.current = editorHost;

packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts

@@ -1,13 +1,16 @@
-export * from './blocksuite-editor';
-export { getFontConfigExtension } from './specs/font-extension';
-
+import { registerAICustomComponents } from '@affine/core/blocksuite/presets/ai';
 import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 import { setupAIProvider } from './ai/setup-provider';
+import { effects as edgelessEffects } from './specs/edgeless';
 import { effects as patchEffects } from './specs/preview';
 
 blocksEffects();
 presetsEffects();
 patchEffects();
 setupAIProvider();
+edgelessEffects();
+registerAICustomComponents();
+
+export * from './blocksuite-editor';

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -55,6 +55,7 @@ export function createPageRootBlockSpec(
   return [
     enableAI ? AIPageRootBlockSpec : PageRootBlockSpec,
     FontLoaderService,
+    getFontConfigExtension(),
     getTelemetryExtension(),
     getEditorConfigExtension(framework),
   ].flat();

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/edgeless.ts

@@ -1,8 +1,12 @@
+import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless';
+import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers';
 import type { ExtensionType } from '@blocksuite/block-std';
+import type { TemplateManager } from '@blocksuite/blocks';
 import {
   EdgelessNoteBlockSpec,
   EdgelessSurfaceBlockSpec,
   EdgelessSurfaceRefBlockSpec,
+  EdgelessTemplatePanel,
   EdgelessTextBlockSpec,
   FrameBlockSpec,
 } from '@blocksuite/blocks';
@@ -26,3 +30,12 @@ export function createEdgelessModeSpecs(
     createEdgelessRootBlockSpec(framework, enableAI),
   ].flat();
 }
+
+export function effects() {
+  EdgelessTemplatePanel.templates.extend(
+    builtInStickersTemplates as TemplateManager
+  );
+  EdgelessTemplatePanel.templates.extend(
+    builtInEdgelessTemplates as TemplateManager
+  );
+}

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/preview.ts

@@ -2,7 +2,12 @@ import type { ExtensionType } from '@blocksuite/block-std';
 import { SpecProvider } from '@blocksuite/blocks';
 import { AIChatBlockSpec } from '@blocksuite/presets';
 
-const CustomSpecs: ExtensionType[] = [AIChatBlockSpec].flat();
+import { getFontConfigExtension } from './font-extension';
+
+const CustomSpecs: ExtensionType[] = [
+  AIChatBlockSpec,
+  getFontConfigExtension(),
+].flat();
 
 function patchPreviewSpec(id: string, specs: ExtensionType[]) {
   const specProvider = SpecProvider.getInstance();