feat(editor): template gfx extension (#11939)

Closes: BS-3212

blocksuite/affine/all/package.json

@@ -187,7 +187,8 @@
     "./gfx/mindmap/view": "./src/gfx/mindmap/view.ts",
     "./gfx/connector": "./src/gfx/connector.ts",
     "./gfx/group": "./src/gfx/group.ts",
-    "./gfx/template": "./src/gfx/template.ts",
+    "./gfx/template": "./src/gfx/template/index.ts",
+    "./gfx/template/view": "./src/gfx/template/view.ts",
     "./gfx/turbo-renderer": "./src/gfx/turbo-renderer.ts",
     "./components/block-selection": "./src/components/block-selection.ts",
     "./components/block-zero-width": "./src/components/block-zero-width.ts",

blocksuite/affine/all/src/extensions/view.ts

@@ -19,6 +19,7 @@ import { BrushViewExtension } from '@blocksuite/affine-gfx-brush/view';
 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 { 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';
@@ -34,7 +35,7 @@ export function getInternalViewExtensions() {
     BrushViewExtension,
     ShapeViewExtension,
     MindmapViewExtension,
-    // template
+    TemplateViewExtension,
 
     // Block
     AttachmentViewExtension,

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

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

blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.ts

@@ -1,5 +1,4 @@
 import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
-import { templateSeniorTool } from '@blocksuite/affine-gfx-template';
 import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
@@ -25,5 +24,3 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
 });
 
 export const quickTools = [defaultQuickTool, connectorQuickTool, linkQuickTool];
-
-export const seniorTools = [templateSeniorTool];

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

@@ -6,7 +6,6 @@ import {
 } from '@blocksuite/affine-gfx-connector';
 import type * as NoteEffect from '@blocksuite/affine-gfx-note';
 import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
-import { TemplateTool } from '@blocksuite/affine-gfx-template';
 import { TextTool } from '@blocksuite/affine-gfx-text';
 import { InteractivityManager } from '@blocksuite/std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
@@ -32,7 +31,6 @@ export const EdgelessToolExtension: ExtensionType[] = [
   PanTool,
   TextTool,
   ConnectorTool,
-  TemplateTool,
   EmptyTool,
 ];
 

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

@@ -35,7 +35,7 @@ import { EdgelessClipboardController } from './clipboard/clipboard.js';
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
 import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
 import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
-import { quickTools, seniorTools } from './components/toolbar/tools.js';
+import { quickTools } from './components/toolbar/tools.js';
 import { EdgelessRootService } from './edgeless-root-service.js';
 
 export const edgelessZoomToolbarWidget = WidgetViewExtension(
@@ -91,7 +91,6 @@ const EdgelessCommonExtension: ExtensionType[] = [
   EdgelessRootService,
   ViewportElementExtension('.affine-edgeless-viewport'),
   ...quickTools,
-  ...seniorTools,
   ...EdgelessClipboardConfigs,
 ].flat();
 

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

@@ -1,6 +1,5 @@
 import { effects as gfxConnectorEffects } from '@blocksuite/affine-gfx-connector/effects';
 import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects';
-import { effects as gfxTemplateEffects } from '@blocksuite/affine-gfx-template/effects';
 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';
@@ -77,7 +76,6 @@ function registerGfxEffects() {
   gfxCanvasTextEffects();
   gfxConnectorEffects();
   gfxGroupEffects();
-  gfxTemplateEffects();
 }
 
 function registerWidgets() {

blocksuite/affine/gfx/connector/src/toolbar/quick-tool.ts

@@ -9,6 +9,7 @@ export const connectorQuickTool = QuickToolExtension(
       content: html`<edgeless-connector-tool-button
         .edgeless=${block}
       ></edgeless-connector-tool-button>`,
+      priority: 80,
     };
   }
 );

blocksuite/affine/gfx/template/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
@@ -35,7 +36,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/gfx/template/src/view.ts

@@ -0,0 +1,25 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { TemplateTool } from './template-tool';
+import { templateSeniorTool } from './toolbar/senior-tool';
+
+export class TemplateViewExtension extends ViewExtensionProvider {
+  override name = 'affine-template-view';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(TemplateTool);
+      context.register(templateSeniorTool);
+    }
+  }
+}

blocksuite/affine/gfx/template/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../text" },
     { "path": "../../model" },
     { "path": "../../rich-text" },

tools/utils/src/workspace.gen.ts

@@ -603,6 +603,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',

yarn.lock

@@ -3281,6 +3281,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"