feat(editor): text gfx extension (#11951)

Closes: BS-3213

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",

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[] = [

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,
   ];

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

blocksuite/affine/all/src/gfx/text/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-text/store';

blocksuite/affine/all/src/gfx/text/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-text/view';

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,

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,

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,

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);

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",

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);
+  }
+}

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);
+    }
+  }
+}

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" },

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>[] = [

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',

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:*"