From 2200bd7b70bd4489a4c3c005086731fecd0596ee Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Thu, 24 Apr 2025 03:21:54 +0000
Subject: [PATCH] feat(editor): text gfx extension (#11951)

Closes: BS-3213
---
 blocksuite/affine/all/package.json            |  4 ++-
 .../affine/all/src/extensions/migrating.ts    | 21 ---------------
 blocksuite/affine/all/src/extensions/store.ts |  2 ++
 blocksuite/affine/all/src/extensions/view.ts  |  2 ++
 .../all/src/gfx/{text.ts => text/index.ts}    |  0
 blocksuite/affine/all/src/gfx/text/store.ts   |  1 +
 blocksuite/affine/all/src/gfx/text/view.ts    |  1 +
 .../blocks/root/src/common-specs/index.ts     | 17 ------------
 .../src/edgeless/configs/toolbar/index.ts     |  3 ---
 blocksuite/affine/blocks/root/src/effects.ts  |  6 -----
 .../affine/gfx/group/src/element-view.ts      |  9 ++++++-
 blocksuite/affine/gfx/text/package.json       |  5 +++-
 blocksuite/affine/gfx/text/src/store.ts       | 19 +++++++++++++
 blocksuite/affine/gfx/text/src/view.ts        | 27 +++++++++++++++++++
 blocksuite/affine/gfx/text/tsconfig.json      |  1 +
 .../src/blocksuite/ai/mini-mindmap/spec.ts    | 14 +++++++---
 tools/utils/src/workspace.gen.ts              |  1 +
 yarn.lock                                     |  1 +
 18 files changed, 81 insertions(+), 53 deletions(-)
 rename blocksuite/affine/all/src/gfx/{text.ts => text/index.ts} (100%)
 create mode 100644 blocksuite/affine/all/src/gfx/text/store.ts
 create mode 100644 blocksuite/affine/all/src/gfx/text/view.ts
 create mode 100644 blocksuite/affine/gfx/text/src/store.ts
 create mode 100644 blocksuite/affine/gfx/text/src/view.ts

diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 373d14a687..e07a7d5fd9 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -173,7 +173,9 @@
     "./fragments/doc-title": "./src/fragments/doc-title.ts",
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",
-    "./gfx/text": "./src/gfx/text.ts",
+    "./gfx/text": "./src/gfx/text/index.ts",
+    "./gfx/text/store": "./src/gfx/text/store.ts",
+    "./gfx/text/view": "./src/gfx/text/view.ts",
     "./gfx/brush": "./src/gfx/brush/index.ts",
     "./gfx/brush/store": "./src/gfx/brush/store.ts",
     "./gfx/brush/view": "./src/gfx/brush/view.ts",
diff --git a/blocksuite/affine/all/src/extensions/migrating.ts b/blocksuite/affine/all/src/extensions/migrating.ts
index 254fff7364..348385a96f 100644
--- a/blocksuite/affine/all/src/extensions/migrating.ts
+++ b/blocksuite/affine/all/src/extensions/migrating.ts
@@ -11,14 +11,6 @@ import {
   PageSurfaceBlockSpec,
   SurfaceBlockAdapterExtensions,
 } from '@blocksuite/affine-block-surface';
-import {
-  groupToMarkdownAdapterMatcher,
-  groupToPlainTextAdapterMatcher,
-} from '@blocksuite/affine-gfx-group';
-import {
-  textToMarkdownAdapterMatcher,
-  textToPlainTextAdapterMatcher,
-} from '@blocksuite/affine-gfx-text';
 import { inlinePresetExtensions } from '@blocksuite/affine-inline-preset';
 import {
   DefaultOpenDocExtension,
@@ -28,25 +20,12 @@ import {
 } from '@blocksuite/affine-shared/services';
 import type { ExtensionType } from '@blocksuite/store';
 
-const elementToPlainTextAdapterMatchers = [
-  groupToPlainTextAdapterMatcher,
-  textToPlainTextAdapterMatcher,
-];
-
-const elementToMarkdownAdapterMatchers = [
-  groupToMarkdownAdapterMatcher,
-  textToMarkdownAdapterMatcher,
-];
-
 const CommonBlockSpecs: ExtensionType[] = [
   inlinePresetExtensions,
   DocDisplayMetaService,
   EditPropsStore,
   DefaultOpenDocExtension,
   FontLoaderService,
-
-  elementToPlainTextAdapterMatchers,
-  elementToMarkdownAdapterMatchers,
 ].flat();
 
 const PageFirstPartyBlockSpecs: ExtensionType[] = [
diff --git a/blocksuite/affine/all/src/extensions/store.ts b/blocksuite/affine/all/src/extensions/store.ts
index cb2cb5647d..a9919566b6 100644
--- a/blocksuite/affine/all/src/extensions/store.ts
+++ b/blocksuite/affine/all/src/extensions/store.ts
@@ -20,6 +20,7 @@ import { ConnectorStoreExtension } from '@blocksuite/affine-gfx-connector/store'
 import { GroupStoreExtension } from '@blocksuite/affine-gfx-group/store';
 import { MindmapStoreExtension } from '@blocksuite/affine-gfx-mindmap/store';
 import { ShapeStoreExtension } from '@blocksuite/affine-gfx-shape/store';
+import { TextStoreExtension } from '@blocksuite/affine-gfx-text/store';
 import { FootnoteStoreExtension } from '@blocksuite/affine-inline-footnote/store';
 import { LatexStoreExtension as InlineLatexStoreExtension } from '@blocksuite/affine-inline-latex/store';
 import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
@@ -59,6 +60,7 @@ export function getInternalStoreExtensions() {
     MindmapStoreExtension,
     ConnectorStoreExtension,
     GroupStoreExtension,
+    TextStoreExtension,
 
     MigratingStoreExtension,
   ];
diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts
index a782e8489e..7d0b40e347 100644
--- a/blocksuite/affine/all/src/extensions/view.ts
+++ b/blocksuite/affine/all/src/extensions/view.ts
@@ -22,6 +22,7 @@ import { MindmapViewExtension } from '@blocksuite/affine-gfx-mindmap/view';
 import { NoteViewExtension as GfxNoteViewExtension } from '@blocksuite/affine-gfx-note/view';
 import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { TemplateViewExtension } from '@blocksuite/affine-gfx-template/view';
+import { TextViewExtension } from '@blocksuite/affine-gfx-text/view';
 import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
 import { LatexViewExtension as InlineLatexViewExtension } from '@blocksuite/affine-inline-latex/view';
 import { LinkViewExtension } from '@blocksuite/affine-inline-link/view';
@@ -40,6 +41,7 @@ export function getInternalViewExtensions() {
     MindmapViewExtension,
     ConnectorViewExtension,
     GroupViewExtension,
+    TextViewExtension,
     TemplateViewExtension,
 
     // Block
diff --git a/blocksuite/affine/all/src/gfx/text.ts b/blocksuite/affine/all/src/gfx/text/index.ts
similarity index 100%
rename from blocksuite/affine/all/src/gfx/text.ts
rename to blocksuite/affine/all/src/gfx/text/index.ts
diff --git a/blocksuite/affine/all/src/gfx/text/store.ts b/blocksuite/affine/all/src/gfx/text/store.ts
new file mode 100644
index 0000000000..991754fd5c
--- /dev/null
+++ b/blocksuite/affine/all/src/gfx/text/store.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-text/store';
diff --git a/blocksuite/affine/all/src/gfx/text/view.ts b/blocksuite/affine/all/src/gfx/text/view.ts
new file mode 100644
index 0000000000..0b438ab8f0
--- /dev/null
+++ b/blocksuite/affine/all/src/gfx/text/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-text/view';
diff --git a/blocksuite/affine/blocks/root/src/common-specs/index.ts b/blocksuite/affine/blocks/root/src/common-specs/index.ts
index 070f11cb16..5fd177db23 100644
--- a/blocksuite/affine/blocks/root/src/common-specs/index.ts
+++ b/blocksuite/affine/blocks/root/src/common-specs/index.ts
@@ -1,8 +1,4 @@
 import { FileDropExtension } from '@blocksuite/affine-components/drop-indicator';
-import {
-  TextElementRendererExtension,
-  TextElementView,
-} from '@blocksuite/affine-gfx-text';
 import { NoteBlockSchema } from '@blocksuite/affine-model';
 import {
   AutoClearSelectionService,
@@ -29,17 +25,6 @@ import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
 import { viewportOverlayWidget } from './widgets';
 
-/**
- * Why do we add these extensions into CommonSpecs?
- * Because in some cases we need to create edgeless elements in page mode.
- * And these view may contain some logic when elements initialize.
- */
-const EdgelessElementViews = [TextElementView];
-
-export const EdgelessElementRendererExtension: ExtensionType[] = [
-  TextElementRendererExtension,
-];
-
 export const CommonSpecs: ExtensionType[] = [
   FlavourExtension('affine:page'),
   DocModeService,
@@ -52,8 +37,6 @@ export const CommonSpecs: ExtensionType[] = [
   AutoClearSelectionService,
   ...RootBlockAdapterExtensions,
   ...clipboardConfigs,
-  ...EdgelessElementViews,
-  ...EdgelessElementRendererExtension,
   SlashMenuExtension,
   linkedDocWidget,
   dragHandleWidget,
diff --git a/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/index.ts b/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/index.ts
index 0b3168fe6c..1e1cf7883f 100644
--- a/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/index.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/index.ts
@@ -1,4 +1,3 @@
-import { textToolbarExtension } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -6,8 +5,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
-  textToolbarExtension,
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:*'),
     config: builtinMiscToolbarConfig,
diff --git a/blocksuite/affine/blocks/root/src/effects.ts b/blocksuite/affine/blocks/root/src/effects.ts
index 23445602c2..172a7584d1 100644
--- a/blocksuite/affine/blocks/root/src/effects.ts
+++ b/blocksuite/affine/blocks/root/src/effects.ts
@@ -1,4 +1,3 @@
-import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
 import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
 import { effects as widgetMobileToolbarEffects } from '@blocksuite/affine-widget-keyboard-toolbar/effects';
 import { effects as widgetLinkedDocEffects } from '@blocksuite/affine-widget-linked-doc/effects';
@@ -54,7 +53,6 @@ export function effects() {
 
   // Register components by category
   registerRootComponents();
-  registerGfxEffects();
   registerWidgets();
   registerEdgelessToolbarComponents();
   registerMiscComponents();
@@ -70,10 +68,6 @@ function registerRootComponents() {
   );
 }
 
-function registerGfxEffects() {
-  gfxCanvasTextEffects();
-}
-
 function registerWidgets() {
   customElements.define(
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
diff --git a/blocksuite/affine/gfx/group/src/element-view.ts b/blocksuite/affine/gfx/group/src/element-view.ts
index 721df9ecf5..bc7712078a 100644
--- a/blocksuite/affine/gfx/group/src/element-view.ts
+++ b/blocksuite/affine/gfx/group/src/element-view.ts
@@ -14,7 +14,14 @@ export class GroupElementView extends GfxElementModelView<GroupElementModel> {
 
   private _initDblClickToEdit(): void {
     this.on('dblclick', () => {
-      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
+      const rootId = this.std.store.root?.id;
+      if (!rootId) {
+        console.error(
+          'GroupElementView: rootId is not found when dblclick to edit'
+        );
+        return;
+      }
+      const edgeless = this.std.view.getBlock(rootId);
 
       if (edgeless && !this.model.isLocked()) {
         mountGroupTitleEditor(this.model, edgeless);
diff --git a/blocksuite/affine/gfx/text/package.json b/blocksuite/affine/gfx/text/package.json
index 7fc47ae47e..256475b9e9 100644
--- a/blocksuite/affine/gfx/text/package.json
+++ b/blocksuite/affine/gfx/text/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -33,7 +34,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
   },
   "files": [
     "src",
diff --git a/blocksuite/affine/gfx/text/src/store.ts b/blocksuite/affine/gfx/text/src/store.ts
new file mode 100644
index 0000000000..370236a597
--- /dev/null
+++ b/blocksuite/affine/gfx/text/src/store.ts
@@ -0,0 +1,19 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import {
+  textToMarkdownAdapterMatcher,
+  textToPlainTextAdapterMatcher,
+} from './adapter';
+
+export class TextStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-text-gfx';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(textToMarkdownAdapterMatcher);
+    context.register(textToPlainTextAdapterMatcher);
+  }
+}
diff --git a/blocksuite/affine/gfx/text/src/view.ts b/blocksuite/affine/gfx/text/src/view.ts
new file mode 100644
index 0000000000..a9a16e6763
--- /dev/null
+++ b/blocksuite/affine/gfx/text/src/view.ts
@@ -0,0 +1,27 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { TextElementRendererExtension } from './element-renderer';
+import { TextElementView } from './element-view';
+import { textToolbarExtension } from './toolbar';
+
+export class TextViewExtension extends ViewExtensionProvider {
+  override name = 'affine-text-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(TextElementView);
+    context.register(TextElementRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(textToolbarExtension);
+    }
+  }
+}
diff --git a/blocksuite/affine/gfx/text/tsconfig.json b/blocksuite/affine/gfx/text/tsconfig.json
index 4af984eb19..05c8f632c6 100644
--- a/blocksuite/affine/gfx/text/tsconfig.json
+++ b/blocksuite/affine/gfx/text/tsconfig.json
@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
diff --git a/packages/frontend/core/src/blocksuite/ai/mini-mindmap/spec.ts b/packages/frontend/core/src/blocksuite/ai/mini-mindmap/spec.ts
index 79f2e8d48f..1d864feb3c 100644
--- a/packages/frontend/core/src/blocksuite/ai/mini-mindmap/spec.ts
+++ b/packages/frontend/core/src/blocksuite/ai/mini-mindmap/spec.ts
@@ -1,6 +1,11 @@
-import { EdgelessElementRendererExtension } from '@blocksuite/affine/blocks/root';
 import { SurfaceBlockSchema } from '@blocksuite/affine/blocks/surface';
-import { MindMapView } from '@blocksuite/affine/gfx/mindmap';
+import { ConnectorElementRendererExtension } from '@blocksuite/affine/gfx/connector';
+import {
+  MindmapElementRendererExtension,
+  MindMapView,
+} from '@blocksuite/affine/gfx/mindmap';
+import { ShapeElementRendererExtension } from '@blocksuite/affine/gfx/shape';
+import { TextElementRendererExtension } from '@blocksuite/affine/gfx/text';
 import { RootBlockSchema } from '@blocksuite/affine/model';
 import {
   DocModeService,
@@ -24,7 +29,10 @@ export const MiniMindmapSpecs: ExtensionType[] = [
   MindMapView,
   MindmapSurfaceBlockService,
   BlockViewExtension('affine:surface', literal`mini-mindmap-surface-block`),
-  ...EdgelessElementRendererExtension,
+  TextElementRendererExtension,
+  MindmapElementRendererExtension,
+  ShapeElementRendererExtension,
+  ConnectorElementRendererExtension,
 ];
 
 export const MiniMindmapSchema: z.infer<typeof BlockSchema>[] = [
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 4a7ba4d324..d4f9d8c58c 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -622,6 +622,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
diff --git a/yarn.lock b/yarn.lock
index e058eb91ce..e50eb43b23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3313,6 +3313,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"