refactor(editor): move text toolbar config and components to its package (#11083)

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/text/text-menu.ts

@@ -1,48 +0,0 @@
-import { DefaultTheme } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import type { ColorEvent } from '@blocksuite/affine-shared/utils';
-import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
-import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
-import { computed } from '@preact/signals-core';
-import { css, html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-
-export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
-  static override styles = css`
-    :host {
-      display: flex;
-      position: absolute;
-      z-index: -1;
-    }
-  `;
-
-  private readonly _theme$ = computed(() => {
-    return this.edgeless.std.get(ThemeProvider).theme$.value;
-  });
-
-  override type: GfxToolsFullOptionValue['type'] = 'text';
-
-  override render() {
-    if (this.edgelessTool.type !== 'text') return nothing;
-
-    return html`
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <edgeless-color-panel
-            class="one-way"
-            .value=${this.color}
-            .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorShortPalettes}
-            @select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
-          ></edgeless-color-panel>
-        </div>
-      </edgeless-slide-menu>
-    `;
-  }
-
-  @property({ attribute: false })
-  accessor color!: string;
-
-  @property({ attribute: false })
-  accessor onChange!: (props: Record<string, unknown>) => void;
-}

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts

@@ -1,4 +1,5 @@
 import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
+import { textToolbarConfig } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -10,7 +11,6 @@ import { builtinGroupToolbarConfig } from './group';
 import { builtinMindmapToolbarConfig } from './mindmap';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
 import { builtinShapeToolbarConfig } from './shape';
-import { builtinTextToolbarConfig } from './text';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
   frameToolbarExtension,
@@ -37,7 +37,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:text'),
-    config: builtinTextToolbarConfig,
+    config: textToolbarConfig,
   }),
 
   ToolbarModuleExtension({

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text.ts

@@ -1,48 +0,0 @@
-import {
-  EdgelessCRUDIdentifier,
-  TextUtils,
-} from '@blocksuite/affine-block-surface';
-import { TextElementModel } from '@blocksuite/affine-model';
-import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
-import { createTextActions } from '@blocksuite/affine-widget-edgeless-toolbar';
-import { Bound } from '@blocksuite/global/gfx';
-
-export const builtinTextToolbarConfig = {
-  actions: createTextActions(TextElementModel, 'text', (ctx, model, props) => {
-    // No need to adjust element bounds
-    if (props['textAlign']) {
-      ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props);
-      return;
-    }
-
-    const { text: yText, hasMaxWidth } = model;
-    const textStyle = {
-      fontFamily: model.fontFamily,
-      fontStyle: model.fontStyle,
-      fontSize: model.fontSize,
-      fontWeight: model.fontWeight,
-      ...props,
-    };
-
-    const { fontFamily, fontStyle, fontSize, fontWeight } = textStyle;
-
-    const bounds = TextUtils.normalizeTextBound(
-      {
-        yText,
-        fontFamily,
-        fontStyle,
-        fontSize,
-        fontWeight,
-        hasMaxWidth,
-      },
-      Bound.fromXYWH(model.deserializedXYWH)
-    );
-
-    ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, {
-      ...textStyle,
-      xywh: bounds.serialize(),
-    });
-  }),
-
-  when: ctx => ctx.getSurfaceModelsByType(TextElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;

blocksuite/affine/blocks/block-root/src/effects.ts

@@ -55,7 +55,6 @@ import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay
 import { AffineTemplateLoading } from './edgeless/components/toolbar/template/template-loading.js';
 import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/template-panel.js';
 import { EdgelessTemplateButton } from './edgeless/components/toolbar/template/template-tool-button.js';
-import { EdgelessTextMenu } from './edgeless/components/toolbar/text/text-menu.js';
 import {
   AffineImageToolbarWidget,
   AffineModalWidget,
@@ -174,7 +173,6 @@ function registerEdgelessToolbarComponents() {
   customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
   customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu);
   customElements.define('edgeless-note-menu', EdgelessNoteMenu);
-  customElements.define('edgeless-text-menu', EdgelessTextMenu);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
 
   // Toolbar components
@@ -318,7 +316,6 @@ declare global {
     'overlay-scrollbar': OverlayScrollbar;
     'affine-template-loading': AffineTemplateLoading;
     'edgeless-templates-panel': EdgelessTemplatePanel;
-    'edgeless-text-menu': EdgelessTextMenu;
     'affine-page-root': PageRootBlockComponent;
     'zoom-bar-toggle-button': ZoomBarToggleButton;
     'edgeless-zoom-toolbar': EdgelessZoomToolbar;