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

blocksuite/affine/gfx/text/src/effects.ts

@@ -1,11 +1,14 @@
 import { EdgelessTextEditor } from './edgeless-text-editor';
+import { EdgelessTextMenu } from './toolbar/text-menu';
 
 export function effects() {
   customElements.define('edgeless-text-editor', EdgelessTextEditor);
+  customElements.define('edgeless-text-menu', EdgelessTextMenu);
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'edgeless-text-editor': EdgelessTextEditor;
+    'edgeless-text-menu': EdgelessTextMenu;
   }
 }

blocksuite/affine/gfx/text/src/index.ts

@@ -1,3 +1,4 @@
 export * from './edgeless-text-editor';
 export * from './mount-text-editor';
 export * from './tool';
+export * from './toolbar';

blocksuite/affine/gfx/text/src/toolbar/config.ts

@@ -0,0 +1,48 @@
+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 textToolbarConfig = {
+  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/gfx/text/src/toolbar/index.ts

@@ -0,0 +1 @@
+export * from './config';

blocksuite/affine/gfx/text/src/toolbar/text-menu.ts

@@ -0,0 +1,48 @@
+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;
+}