refactor(editor): move gfx frame title to widget (#11021)

blocksuite/affine/blocks/block-frame/package.json

@@ -14,8 +14,10 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@floating-ui/dom": "^1.6.13",

blocksuite/affine/blocks/block-frame/src/frame-highlight-manager.ts

@@ -1,8 +1,3 @@
-import {
-  type EdgelessFrameManager,
-  type FrameOverlay,
-  isFrameBlock,
-} from '@blocksuite/affine-block-frame';
 import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
 import {
   type FrameBlockModel,
@@ -18,6 +13,12 @@ import {
   TransformExtension,
 } from '@blocksuite/block-std/gfx';
 
+import {
+  type EdgelessFrameManager,
+  type FrameOverlay,
+  isFrameBlock,
+} from './frame-manager';
+
 export class FrameHighlightManager extends TransformExtension {
   static override key = 'frame-highlight-manager';
 

blocksuite/affine/blocks/block-frame/src/frame-tool.ts

@@ -1,7 +1,3 @@
-import {
-  EdgelessFrameManagerIdentifier,
-  type FrameOverlay,
-} from '@blocksuite/affine-block-frame';
 import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import {
@@ -15,6 +11,11 @@ import { Bound, Vec } from '@blocksuite/global/gfx';
 import { Text } from '@blocksuite/store';
 import * as Y from 'yjs';
 
+import {
+  EdgelessFrameManagerIdentifier,
+  type FrameOverlay,
+} from './frame-manager';
+
 export class FrameTool extends BaseTool {
   static override toolName = 'frame';
 
@@ -40,6 +41,7 @@ export class FrameTool extends BaseTool {
       this.doc.transact(() => {
         frame.pop('xywh');
       });
+      // @ts-expect-error TODO: refactor gfx tool
       this.gfx.tool.setTool('default');
       this.gfx.selection.set({
         elements: [frame.id],
@@ -106,9 +108,3 @@ export class FrameTool extends BaseTool {
     this._startPoint = this._toModelCoord(point);
   }
 }
-
-declare module '@blocksuite/block-std/gfx' {
-  interface GfxToolsMap {
-    frame: FrameTool;
-  }
-}

blocksuite/affine/blocks/block-frame/src/frame-toolbar.ts

@@ -1,4 +1,3 @@
-import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import {
   packColor,
@@ -9,6 +8,7 @@ import {
   DEFAULT_NOTE_HEIGHT,
   DefaultTheme,
   FrameBlockModel,
+  FrameBlockSchema,
   NoteBlockModel,
   NoteBlockSchema,
   NoteDisplayMode,
@@ -16,6 +16,7 @@ import {
   SurfaceRefBlockSchema,
 } from '@blocksuite/affine-model';
 import {
+  type ToolbarContext,
   type ToolbarModuleConfig,
   ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -23,14 +24,25 @@ import {
   getMostCommonResolvedValue,
   matchModels,
 } from '@blocksuite/affine-shared/utils';
-import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import { mountFrameTitleEditor } from '@blocksuite/affine-widget-frame-title';
+import {
+  type BlockComponent,
+  BlockFlavourIdentifier,
+} from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/gfx';
 import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
 import type { ExtensionType } from '@blocksuite/store';
 import { html } from 'lit';
 
-import { mountFrameTitleEditor } from '../../utils/text';
-import { getEdgelessWith } from './utils';
+import { EdgelessFrameManagerIdentifier } from './frame-manager';
+
+function getRootBlock(ctx: ToolbarContext): BlockComponent | null {
+  const rootModel = ctx.store.root;
+  if (!rootModel) return null;
+
+  return ctx.view.getBlock(rootModel.id);
+}
 
 const builtinSurfaceToolbarConfig = {
   actions: [
@@ -87,10 +99,10 @@ const builtinSurfaceToolbarConfig = {
         const model = ctx.getCurrentModelByType(FrameBlockModel);
         if (!model) return;
 
-        const edgeless = getEdgelessWith(ctx);
-        if (!edgeless) return;
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
 
-        mountFrameTitleEditor(model, edgeless);
+        mountFrameTitleEditor(model, rootBlock);
       },
     },
     {
@@ -101,8 +113,8 @@ const builtinSurfaceToolbarConfig = {
         const models = ctx.getSurfaceModelsByType(FrameBlockModel);
         if (!models.length) return;
 
-        const edgeless = getEdgelessWith(ctx);
-        if (!edgeless) return;
+        const crud = ctx.std.get(EdgelessCRUDIdentifier);
+        const gfx = ctx.std.get(GfxControllerIdentifier);
 
         ctx.store.captureSync();
 
@@ -113,10 +125,10 @@ const builtinSurfaceToolbarConfig = {
         }
 
         for (const model of models) {
-          edgeless.service.removeElement(model);
+          crud.removeElement(model.id);
         }
 
-        edgeless.service.selection.clear();
+        gfx.selection.clear();
       },
     },
     {
@@ -172,7 +184,7 @@ const builtinSurfaceToolbarConfig = {
   when: ctx => ctx.getSurfaceModelsByType(FrameBlockModel).length > 0,
 } as const satisfies ToolbarModuleConfig;
 
-export const createFrameToolbarConfig = (flavour: string): ExtensionType => {
+const createFrameToolbarConfig = (flavour: string): ExtensionType => {
   const name = flavour.split(':').pop();
 
   return ToolbarModuleExtension({
@@ -180,3 +192,7 @@ export const createFrameToolbarConfig = (flavour: string): ExtensionType => {
     config: builtinSurfaceToolbarConfig,
   });
 };
+
+export const frameToolbarExtension = createFrameToolbarConfig(
+  FrameBlockSchema.model.flavour
+);

blocksuite/affine/blocks/block-frame/src/index.ts

@@ -1,4 +1,21 @@
-export * from './frame-block.js';
-export * from './frame-manager.js';
-export * from './frame-spec.js';
-export * from './tool.js';
+import type { FrameTool } from './frame-tool';
+import type { PresentTool, PresentToolOption } from './preset-tool';
+
+export * from './frame-block';
+export * from './frame-highlight-manager';
+export * from './frame-manager';
+export * from './frame-spec';
+export * from './frame-tool';
+export * from './frame-toolbar';
+export * from './preset-tool';
+
+declare module '@blocksuite/block-std/gfx' {
+  interface GfxToolsMap {
+    frameNavigator: PresentTool;
+    frame: FrameTool;
+  }
+
+  interface GfxToolsOption {
+    frameNavigator: PresentToolOption;
+  }
+}

blocksuite/affine/blocks/block-frame/src/preset-tool.ts

@@ -2,20 +2,10 @@ import { BaseTool } from '@blocksuite/block-std/gfx';
 
 import type { NavigatorMode } from './frame-manager';
 
-type PresentToolOption = {
+export type PresentToolOption = {
   mode?: NavigatorMode;
 };
 
 export class PresentTool extends BaseTool<PresentToolOption> {
   static override toolName: string = 'frameNavigator';
 }
-
-declare module '@blocksuite/block-std/gfx' {
-  interface GfxToolsMap {
-    frameNavigator: PresentTool;
-  }
-
-  interface GfxToolsOption {
-    frameNavigator: PresentToolOption;
-  }
-}

blocksuite/affine/blocks/block-frame/tsconfig.json

@@ -11,6 +11,7 @@
     { "path": "../../components" },
     { "path": "../../model" },
     { "path": "../../shared" },
+    { "path": "../../widgets/widget-frame-title" },
     { "path": "../../../framework/block-std" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/inline" },

blocksuite/affine/blocks/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts

@@ -1,185 +0,0 @@
-import { FrameBlockModel } from '@blocksuite/affine-model';
-import type { RichText } from '@blocksuite/affine-rich-text';
-import {
-  AFFINE_FRAME_TITLE_WIDGET,
-  type AffineFrameTitleWidget,
-  frameTitleStyleVars,
-} from '@blocksuite/affine-widget-frame-title';
-import {
-  type BlockComponent,
-  RANGE_SYNC_EXCLUDE_ATTR,
-  ShadowlessElement,
-} from '@blocksuite/block-std';
-import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
-import { Bound } from '@blocksuite/global/gfx';
-import { WithDisposable } from '@blocksuite/global/lit';
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { css, html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-export class EdgelessFrameTitleEditor extends WithDisposable(
-  ShadowlessElement
-) {
-  static override styles = css`
-    .frame-title-editor {
-      display: flex;
-      align-items: center;
-      transform-origin: top left;
-      border-radius: 4px;
-      width: fit-content;
-      padding: 0 4px;
-      outline: none;
-      z-index: 1;
-      border: 1px solid var(--affine-primary-color);
-      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
-      overflow: hidden;
-      font-family: var(--affine-font-family);
-    }
-  `;
-
-  get editorHost() {
-    return this.edgeless.host;
-  }
-
-  get inlineEditor() {
-    return this.richText?.inlineEditor;
-  }
-
-  get gfx() {
-    return this.edgeless.std.get(GfxControllerIdentifier);
-  }
-
-  get selection() {
-    return this.gfx.selection;
-  }
-
-  private _unmount() {
-    // dispose in advance to avoid execute `this.remove()` twice
-    this.disposables.dispose();
-    this.selection.set({
-      elements: [],
-      editing: false,
-    });
-    this.remove();
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
-  }
-
-  override firstUpdated(): void {
-    const dispatcher = this.edgeless.std.event;
-    this.updateComplete
-      .then(() => {
-        if (!this.inlineEditor) return;
-
-        this.inlineEditor.selectAll();
-
-        this.inlineEditor.slots.renderComplete.subscribe(() => {
-          this.requestUpdate();
-        });
-
-        this.disposables.add(
-          dispatcher.add('keyDown', ctx => {
-            const state = ctx.get('keyboardState');
-            if (state.raw.key === 'Enter' && !state.raw.isComposing) {
-              this._unmount();
-              return true;
-            }
-            requestAnimationFrame(() => {
-              this.requestUpdate();
-            });
-            return false;
-          })
-        );
-        this.disposables.add(
-          this.gfx.viewport.viewportUpdated.subscribe(() => {
-            this.requestUpdate();
-          })
-        );
-
-        this.disposables.add(dispatcher.add('click', () => true));
-        this.disposables.add(dispatcher.add('doubleClick', () => true));
-
-        if (!this.inlineEditor.rootElement) return;
-        this.disposables.addFromEvent(
-          this.inlineEditor.rootElement,
-          'blur',
-          () => {
-            this._unmount();
-          }
-        );
-      })
-      .catch(console.error);
-  }
-
-  override async getUpdateComplete(): Promise<boolean> {
-    const result = await super.getUpdateComplete();
-    await this.richText?.updateComplete;
-    return result;
-  }
-
-  override render() {
-    const rootBlockId = this.editorHost.doc.root?.id;
-    if (!rootBlockId) return nothing;
-
-    const viewport = this.gfx.viewport;
-    const bound = Bound.deserialize(this.frameModel.xywh);
-    const [x, y] = viewport.toViewCoord(bound.x, bound.y);
-    const isInner = this.gfx.grid.has(
-      this.frameModel.elementBound,
-      true,
-      true,
-      model => model !== this.frameModel && model instanceof FrameBlockModel
-    );
-
-    const frameTitleWidget = this.edgeless.std.view.getWidget(
-      AFFINE_FRAME_TITLE_WIDGET,
-      rootBlockId
-    ) as AffineFrameTitleWidget | null;
-
-    if (!frameTitleWidget) return nothing;
-
-    const frameTitle = frameTitleWidget.getFrameTitle(this.frameModel);
-
-    const colors = frameTitle?.colors ?? {
-      background: cssVarV2('edgeless/frame/background/white'),
-      text: 'var(--affine-text-primary-color)',
-    };
-
-    const inlineEditorStyle = styleMap({
-      fontSize: frameTitleStyleVars.fontSize + 'px',
-      position: 'absolute',
-      left: (isInner ? x + 4 : x) + 'px',
-      top: (isInner ? y + 4 : y - (frameTitleStyleVars.height + 8 / 2)) + 'px',
-      minWidth: '8px',
-      height: frameTitleStyleVars.height + 'px',
-      background: colors.background,
-      color: colors.text,
-    });
-
-    const richTextStyle = styleMap({
-      height: 'fit-content',
-    });
-
-    return html`<div class="frame-title-editor" style=${inlineEditorStyle}>
-      <rich-text
-        .yText=${this.frameModel.props.title.yText}
-        .enableFormat=${false}
-        .enableAutoScrollHorizontally=${false}
-        style=${richTextStyle}
-      ></rich-text>
-    </div>`;
-  }
-
-  @property({ attribute: false })
-  accessor edgeless!: BlockComponent;
-
-  @property({ attribute: false })
-  accessor frameModel!: FrameBlockModel;
-
-  @query('rich-text')
-  accessor richText: RichText | null = null;
-}

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

@@ -54,7 +54,7 @@ import { mountConnectorLabelEditor } from '../../utils/text';
 import { LINE_STYLE_LIST } from './consts';
 import { createTextActions } from './text-common';
 import type { MenuItem } from './types';
-import { getEdgelessWith, renderMenu } from './utils';
+import { getRootBlock, renderMenu } from './utils';
 
 const FRONT_ENDPOINT_STYLE_LIST = [
   {
@@ -333,10 +333,10 @@ export const builtinConnectorToolbarConfig = {
         const rootModel = ctx.store.root;
         if (!rootModel) return;
 
-        const edgeless = getEdgelessWith(ctx);
-        if (!edgeless) return;
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
 
-        mountConnectorLabelEditor(model, edgeless);
+        mountConnectorLabelEditor(model, rootBlock);
       },
     },
     // id: `g.text`

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

@@ -13,7 +13,7 @@ import { Bound } from '@blocksuite/global/gfx';
 import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
 
 import { mountGroupTitleEditor } from '../../utils/text';
-import { getEdgelessWith } from './utils';
+import { getEdgelessWith, getRootBlock } from './utils';
 
 export const builtinGroupToolbarConfig = {
   actions: [
@@ -70,10 +70,10 @@ export const builtinGroupToolbarConfig = {
         const model = ctx.getCurrentModelByType(GroupElementModel);
         if (!model) return;
 
-        const edgeless = getEdgelessWith(ctx);
-        if (!edgeless) return;
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
 
-        mountGroupTitleEditor(model, edgeless);
+        mountGroupTitleEditor(model, rootBlock);
       },
     },
     {

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

@@ -1,4 +1,4 @@
-import { FrameBlockSchema } from '@blocksuite/affine-model';
+import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -6,7 +6,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
 import { builtinEdgelessTextToolbarConfig } from './edgeless-text';
-import { createFrameToolbarConfig } from './frame';
 import { builtinGroupToolbarConfig } from './group';
 import { builtinMindmapToolbarConfig } from './mindmap';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
@@ -14,7 +13,7 @@ import { builtinShapeToolbarConfig } from './shape';
 import { builtinTextToolbarConfig } from './text';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
-  createFrameToolbarConfig(FrameBlockSchema.model.flavour),
+  frameToolbarExtension,
 
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:group'),

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

@@ -43,7 +43,7 @@ import {
   createMindmapStyleActionMenu,
 } from './mindmap';
 import { createTextActions } from './text-common';
-import { getEdgelessWith, renderMenu } from './utils';
+import { getRootBlock, renderMenu } from './utils';
 
 export const builtinShapeToolbarConfig = {
   actions: [
@@ -316,10 +316,10 @@ export const builtinShapeToolbarConfig = {
         const model = ctx.getCurrentModelByType(ShapeElementModel);
         if (!model) return;
 
-        const edgeless = getEdgelessWith(ctx);
-        if (!edgeless) return;
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
 
-        mountShapeTextEditor(model, edgeless);
+        mountShapeTextEditor(model, rootBlock);
       },
     },
     // id: `g.text`

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

@@ -1,5 +1,6 @@
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import type { ToolbarContext } from '@blocksuite/affine-shared/services';
+import type { BlockComponent } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -77,3 +78,10 @@ export function getEdgelessWith(ctx: ToolbarContext) {
 
   return edgeless;
 }
+
+export function getRootBlock(ctx: ToolbarContext): BlockComponent | null {
+  const rootModel = ctx.store.root;
+  if (!rootModel) return null;
+
+  return ctx.view.getBlock(rootModel.id);
+}

blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts

@@ -1,4 +1,8 @@
-import { PresentTool } from '@blocksuite/affine-block-frame';
+import {
+  FrameHighlightManager,
+  FrameTool,
+  PresentTool,
+} from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import { TextTool } from '@blocksuite/affine-gfx-text';
 import {
@@ -10,7 +14,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { EdgelessElementToolbarExtension } from './configs/toolbar';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { ConnectorFilter } from './element-transform/connector-filter.js';
-import { FrameHighlightManager } from './element-transform/frame-highlight-manager.js';
 import { MindMapDragExtension } from './element-transform/mind-map-drag.js';
 import { SnapExtension } from './element-transform/snap-manager.js';
 import { MindMapIndicatorOverlay } from './element-transform/utils/indicator-overlay.js';
@@ -19,7 +22,6 @@ import { ConnectorTool } from './gfx-tool/connector-tool.js';
 import { DefaultTool } from './gfx-tool/default-tool.js';
 import { EmptyTool } from './gfx-tool/empty-tool.js';
 import { EraserTool } from './gfx-tool/eraser-tool.js';
-import { FrameTool } from './gfx-tool/frame-tool.js';
 import { LassoTool } from './gfx-tool/lasso-tool.js';
 import { NoteTool } from './gfx-tool/note-tool.js';
 import { PanTool } from './gfx-tool/pan-tool.js';

blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/default-tool.ts

@@ -29,6 +29,7 @@ import {
   handleNativeRangeAtPoint,
   resetNativeSelection,
 } from '@blocksuite/affine-shared/utils';
+import { mountFrameTitleEditor } from '@blocksuite/affine-widget-frame-title';
 import type { BlockComponent, PointerEventState } from '@blocksuite/block-std';
 import {
   BaseTool,
@@ -51,7 +52,6 @@ import { calPanDelta } from '../utils/panning-utils.js';
 import { isCanvasElement, isEdgelessTextBlock } from '../utils/query.js';
 import {
   mountConnectorLabelEditor,
-  mountFrameTitleEditor,
   mountGroupTitleEditor,
   mountShapeTextEditor,
 } from '../utils/text.js';

blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/index.ts

@@ -3,7 +3,6 @@ export { ConnectorTool, type ConnectorToolOptions } from './connector-tool.js';
 export { DefaultTool } from './default-tool.js';
 export { EmptyTool } from './empty-tool.js';
 export { EraserTool } from './eraser-tool.js';
-export { FrameTool } from './frame-tool.js';
 export { LassoTool, type LassoToolOption } from './lasso-tool.js';
 export { NoteTool, type NoteToolOption } from './note-tool.js';
 export { PanTool, type PanToolOption } from './pan-tool.js';

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

@@ -1,7 +1,6 @@
 import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import type {
   ConnectorElementModel,
-  FrameBlockModel,
   GroupElementModel,
 } from '@blocksuite/affine-model';
 import { ShapeElementModel } from '@blocksuite/affine-model';
@@ -13,7 +12,6 @@ import { Bound } from '@blocksuite/global/gfx';
 import * as Y from 'yjs';
 
 import { EdgelessConnectorLabelEditor } from '../components/text/edgeless-connector-label-editor.js';
-import { EdgelessFrameTitleEditor } from '../components/text/edgeless-frame-title-editor.js';
 import { EdgelessGroupTitleEditor } from '../components/text/edgeless-group-title-editor.js';
 import { EdgelessShapeTextEditor } from '../components/text/edgeless-shape-text-editor.js';
 
@@ -60,33 +58,6 @@ export function mountShapeTextEditor(
   mountElm.append(shapeEditor);
 }
 
-export function mountFrameTitleEditor(
-  frame: FrameBlockModel,
-  edgeless: BlockComponent
-) {
-  const mountElm = edgeless.querySelector('.edgeless-mount-point');
-  if (!mountElm) {
-    throw new BlockSuiteError(
-      ErrorCode.ValueNotExists,
-      "edgeless block's mount point does not exist"
-    );
-  }
-
-  const gfx = edgeless.std.get(GfxControllerIdentifier);
-
-  gfx.tool.setTool('default');
-  gfx.selection.set({
-    elements: [frame.id],
-    editing: true,
-  });
-
-  const frameEditor = new EdgelessFrameTitleEditor();
-  frameEditor.frameModel = frame;
-  frameEditor.edgeless = edgeless;
-
-  mountElm.append(frameEditor);
-}
-
 export function mountGroupTitleEditor(
   group: GroupElementModel,
   edgeless: BlockComponent

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

@@ -28,7 +28,6 @@ import {
   EdgelessSelectedRectWidget,
 } from './edgeless/components/rects/edgeless-selected-rect.js';
 import { EdgelessConnectorLabelEditor } from './edgeless/components/text/edgeless-connector-label-editor.js';
-import { EdgelessFrameTitleEditor } from './edgeless/components/text/edgeless-frame-title-editor.js';
 import { EdgelessGroupTitleEditor } from './edgeless/components/text/edgeless-group-title-editor.js';
 import { EdgelessShapeTextEditor } from './edgeless/components/text/edgeless-shape-text-editor.js';
 import { EdgelessBrushMenu } from './edgeless/components/toolbar/brush/brush-menu.js';
@@ -239,10 +238,6 @@ function registerEdgelessEditorComponents() {
     'edgeless-group-title-editor',
     EdgelessGroupTitleEditor
   );
-  customElements.define(
-    'edgeless-frame-title-editor',
-    EdgelessFrameTitleEditor
-  );
 }
 
 function registerMiscComponents() {
@@ -324,7 +319,6 @@ declare global {
     'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
     'edgeless-connector-label-editor': EdgelessConnectorLabelEditor;
-    'edgeless-frame-title-editor': EdgelessFrameTitleEditor;
     'edgeless-group-title-editor': EdgelessGroupTitleEditor;
     'edgeless-shape-text-editor': EdgelessShapeTextEditor;
     'edgeless-toolbar-widget': EdgelessToolbarWidget;