refactor(editor): separate the element renders (#11461)

blocksuite/affine/blocks/block-root/src/common-specs/index.ts

@@ -1,9 +1,26 @@
 import { FileDropExtension } from '@blocksuite/affine-components/drop-indicator';
-import { ConnectorElementView } from '@blocksuite/affine-gfx-connector';
-import { GroupElementView } from '@blocksuite/affine-gfx-group';
-import { MindMapView } from '@blocksuite/affine-gfx-mindmap';
-import { ShapeElementView } from '@blocksuite/affine-gfx-shape';
-import { TextElementView } from '@blocksuite/affine-gfx-text';
+import { BrushElementRendererExtension } from '@blocksuite/affine-gfx-brush';
+import {
+  ConnectorElementRendererExtension,
+  ConnectorElementView,
+} from '@blocksuite/affine-gfx-connector';
+import {
+  GroupElementRendererExtension,
+  GroupElementView,
+} from '@blocksuite/affine-gfx-group';
+import {
+  MindmapElementRendererExtension,
+  MindMapView,
+} from '@blocksuite/affine-gfx-mindmap';
+import {
+  HighlighterElementRendererExtension,
+  ShapeElementRendererExtension,
+  ShapeElementView,
+} from '@blocksuite/affine-gfx-shape';
+import {
+  TextElementRendererExtension,
+  TextElementView,
+} from '@blocksuite/affine-gfx-text';
 import { NoteBlockSchema } from '@blocksuite/affine-model';
 import {
   DNDAPIExtension,
@@ -45,6 +62,16 @@ const EdgelessElementViews = [
   ShapeElementView,
 ];
 
+export const EdgelessElementRendererExtension: ExtensionType[] = [
+  BrushElementRendererExtension,
+  HighlighterElementRendererExtension,
+  ShapeElementRendererExtension,
+  TextElementRendererExtension,
+  ConnectorElementRendererExtension,
+  GroupElementRendererExtension,
+  MindmapElementRendererExtension,
+];
+
 export const CommonSpecs: ExtensionType[] = [
   FlavourExtension('affine:page'),
   DocModeService,
@@ -57,7 +84,7 @@ export const CommonSpecs: ExtensionType[] = [
   ...RootBlockAdapterExtensions,
   ...clipboardConfigs,
   ...EdgelessElementViews,
-
+  ...EdgelessElementRendererExtension,
   modalWidget,
   innerModalWidget,
   SlashMenuExtension,

blocksuite/affine/blocks/block-root/src/edgeless/clipboard/clipboard.ts

@@ -5,8 +5,8 @@ import {
   EdgelessCRUDIdentifier,
   ExportManager,
   getSurfaceComponent,
-  TextUtils,
 } from '@blocksuite/affine-block-surface';
+import { splitIntoLines } from '@blocksuite/affine-gfx-text';
 import type { ShapeElementModel } from '@blocksuite/affine-model';
 import {
   BookmarkStyles,
@@ -609,7 +609,7 @@ export class EdgelessClipboardController extends PageClipboard {
     });
 
     if (typeof content === 'string') {
-      TextUtils.splitIntoLines(content).forEach((line, idx) => {
+      splitIntoLines(content).forEach((line, idx) => {
         this.crud.addBlock(
           'affine:paragraph',
           { text: new Y.Text(line) },

blocksuite/affine/blocks/block-root/src/edgeless/components/auto-complete/auto-complete-panel.ts

@@ -1,4 +1,3 @@
-import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
 import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import {
   CanvasElementType,
@@ -13,7 +12,10 @@ import {
   SHAPE_OVERLAY_WIDTH,
   ShapeComponentConfig,
 } from '@blocksuite/affine-gfx-shape';
-import { mountTextElementEditor } from '@blocksuite/affine-gfx-text';
+import {
+  insertEdgelessTextCommand,
+  mountTextElementEditor,
+} from '@blocksuite/affine-gfx-text';
 import type {
   Connection,
   ConnectorElementModel,

blocksuite/affine/blocks/block-root/src/edgeless/components/rects/edgeless-selected-rect.ts

@@ -1,5 +1,4 @@
 import type { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
-import { EDGELESS_TEXT_BLOCK_MIN_WIDTH } from '@blocksuite/affine-block-edgeless-text';
 import {
   EMBED_HTML_MIN_HEIGHT,
   EMBED_HTML_MIN_WIDTH,
@@ -14,14 +13,15 @@ import {
 import {
   CanvasElementType,
   isNoteBlock,
-  normalizeShapeBound,
   OverlayIdentifier,
-  TextUtils,
 } from '@blocksuite/affine-block-surface';
 import { isMindmapNode } from '@blocksuite/affine-gfx-mindmap';
+import { normalizeShapeBound } from '@blocksuite/affine-gfx-shape';
+import { normalizeTextBound } from '@blocksuite/affine-gfx-text';
 import {
   type BookmarkBlockModel,
   ConnectorElementModel,
+  EDGELESS_TEXT_BLOCK_MIN_WIDTH,
   type EdgelessTextBlockModel,
   type EmbedHtmlModel,
   type EmbedSyncedDocModel,
@@ -1278,7 +1278,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
       } = element;
       // If the width of the text element has been changed by dragging,
       // We need to set hasMaxWidth to true for wrapping the text
-      bound = TextUtils.normalizeTextBound(
+      bound = normalizeTextBound(
         {
           yText,
           fontFamily,

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

@@ -6,7 +6,10 @@ import {
 } from '@blocksuite/affine-gfx-brush';
 import { connectorToolbarExtension } from '@blocksuite/affine-gfx-connector';
 import { groupToolbarExtension } from '@blocksuite/affine-gfx-group';
-import { mindmapToolbarExtension } from '@blocksuite/affine-gfx-mindmap';
+import {
+  mindmapToolbarExtension,
+  shapeMindmapToolbarExtension,
+} from '@blocksuite/affine-gfx-mindmap';
 import { shapeToolbarExtension } from '@blocksuite/affine-gfx-shape';
 import { textToolbarExtension } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
@@ -26,14 +29,16 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   connectorToolbarExtension,
 
+  shapeToolbarExtension,
+
+  shapeMindmapToolbarExtension,
+
   mindmapToolbarExtension,
 
   textToolbarExtension,
 
   edgelessTextToolbarExtension,
 
-  shapeToolbarExtension,
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:*'),
     config: builtinMiscToolbarConfig,

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

@@ -5,7 +5,6 @@ import {
 } from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import {
-  BrushElementRendererExtension,
   BrushTool,
   EraserTool,
   HighlighterTool,
@@ -53,10 +52,6 @@ export const EdgelessToolExtension: ExtensionType[] = [
   HighlighterTool,
 ];
 
-export const EdgelessElementRendererExtension: ExtensionType[] = [
-  BrushElementRendererExtension,
-];
-
 export const EdgelessEditExtensions: ExtensionType[] = [
   ElementTransformManager,
   ConnectorFilter,
@@ -79,5 +74,4 @@ export const EdgelessBuiltInSpecs: ExtensionType[] = [
   EdgelessToolExtension,
   EdgelessBuiltInManager,
   EdgelessEditExtensions,
-  EdgelessElementRendererExtension,
 ].flat();

blocksuite/affine/blocks/block-root/src/edgeless/element-transform/dblclick-add-edgeless-text.ts

@@ -1,5 +1,7 @@
-import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
-import { addText } from '@blocksuite/affine-gfx-text';
+import {
+  addText,
+  insertEdgelessTextCommand,
+} from '@blocksuite/affine-gfx-text';
 import {
   FeatureFlagService,
   TelemetryProvider,