feat(editor): gfx template package (#11480)

blocksuite/affine/all/package.json

@@ -39,6 +39,7 @@
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
+    "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
     "@blocksuite/affine-inline-footnote": "workspace:*",
@@ -128,6 +129,7 @@
     "./gfx/mindmap": "./src/gfx/mindmap.ts",
     "./gfx/connector": "./src/gfx/connector.ts",
     "./gfx/group": "./src/gfx/group.ts",
+    "./gfx/template": "./src/gfx/template.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/gfx/template.ts

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

blocksuite/affine/all/tsconfig.json

@@ -36,6 +36,7 @@
     { "path": "../gfx/mindmap" },
     { "path": "../gfx/note" },
     { "path": "../gfx/shape" },
+    { "path": "../gfx/template" },
     { "path": "../gfx/text" },
     { "path": "../gfx/turbo-renderer" },
     { "path": "../inlines/footnote" },

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

@@ -33,6 +33,7 @@
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
+    "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",

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

@@ -4,10 +4,8 @@ import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
 import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
 import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
 import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
-import {
-  QuickToolExtension,
-  SeniorToolExtension,
-} from '@blocksuite/affine-widget-edgeless-toolbar';
+import { templateSeniorTool } from '@blocksuite/affine-gfx-template';
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
@@ -30,14 +28,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
-  return {
-    name: 'Template',
-    content: html`<edgeless-template-button .edgeless=${block}>
-    </edgeless-template-button>`,
-  };
-});
-
 export const quickTools = [
   defaultQuickTool,
   frameQuickTool,

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

@@ -6,6 +6,7 @@ import {
   type SurfaceBlockModel,
   type SurfaceContext,
 } from '@blocksuite/affine-block-surface';
+import { TemplateJob } from '@blocksuite/affine-gfx-template';
 import {
   type ConnectorElementModel,
   RootBlockSchema,
@@ -31,7 +32,6 @@ import { effect } from '@preact/signals-core';
 import clamp from 'lodash-es/clamp';
 
 import { RootService } from '../root-service.js';
-import { TemplateJob } from './services/template.js';
 import { getCursorMode } from './utils/query.js';
 
 export class EdgelessRootService extends RootService implements SurfaceContext {

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

@@ -1,12 +1,9 @@
 export * from './clipboard/clipboard';
 export * from './clipboard/command';
-export { EdgelessTemplatePanel } from './components/toolbar/template/template-panel.js';
-export * from './components/toolbar/template/template-type.js';
 export * from './edgeless-root-block.js';
 export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './gfx-tool';
-export * from './services/template.js';
 export * from './utils/clipboard-utils.js';
 export { sortEdgelessElements } from './utils/clone-utils.js';
 export { isCanvasElement } from './utils/query.js';

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

@@ -4,6 +4,7 @@ import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects
 import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
 import { effects as gfxNoteEffects } from '@blocksuite/affine-gfx-note/effects';
 import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/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';
 
@@ -26,10 +27,6 @@ import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
-import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
-import { AffineTemplateLoading } from './edgeless/components/toolbar/template/template-loading.js';
-import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/template-panel.js';
-import { EdgelessTemplateButton } from './edgeless/components/toolbar/template/template-tool-button.js';
 import {
   AffineModalWidget,
   EdgelessRootBlockComponent,
@@ -97,6 +94,7 @@ function registerGfxEffects() {
   gfxMindmapEffects();
   gfxGroupEffects();
   gfxBrushEffects();
+  gfxTemplateEffects();
 }
 
 function registerWidgets() {
@@ -124,7 +122,6 @@ function registerEdgelessToolbarComponents() {
   );
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
-  customElements.define('edgeless-template-button', EdgelessTemplateButton);
 
   // Menus
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
@@ -139,12 +136,10 @@ function registerMiscComponents() {
 
   // Loading and preview components
   customElements.define('loader-element', Loader);
-  customElements.define('affine-template-loading', AffineTemplateLoading);
 
   // Toolbar and UI components
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
-  customElements.define('overlay-scrollbar', OverlayScrollbar);
 
   // Auto-complete components
   customElements.define(
@@ -155,7 +150,6 @@ function registerMiscComponents() {
 
   // Note and template components
   customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
-  customElements.define('edgeless-templates-panel', EdgelessTemplatePanel);
 
   // Navigation components
   customElements.define(
@@ -189,9 +183,6 @@ declare global {
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
-    'overlay-scrollbar': OverlayScrollbar;
-    'affine-template-loading': AffineTemplateLoading;
-    'edgeless-templates-panel': EdgelessTemplatePanel;
     'affine-page-root': PageRootBlockComponent;
     'zoom-bar-toggle-button': ZoomBarToggleButton;
     'edgeless-zoom-toolbar': EdgelessZoomToolbar;

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

@@ -4,8 +4,6 @@ export * from './common-specs/index.js';
 export * from './edgeless/edgeless-builtin-spec.js';
 export * from './edgeless/edgeless-root-spec.js';
 export * from './edgeless/index.js';
-export { TemplateJob } from './edgeless/services/template.js';
-export * as TemplateMiddlewares from './edgeless/services/template-middlewares.js';
 export * from './page/page-root-block.js';
 export { PageRootService } from './page/page-root-service.js';
 export * from './page/page-root-spec.js';

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

@@ -30,6 +30,7 @@
     { "path": "../../gfx/mindmap" },
     { "path": "../../gfx/note" },
     { "path": "../../gfx/shape" },
+    { "path": "../../gfx/template" },
     { "path": "../../gfx/text" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },

blocksuite/affine/gfx/template/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@blocksuite/affine-gfx-template",
+  "description": "Gfx template for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-gfx-text": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.10",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

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

@@ -0,0 +1,20 @@
+import { OverlayScrollbar } from './toolbar/overlay-scrollbar';
+import { AffineTemplateLoading } from './toolbar/template-loading';
+import { EdgelessTemplatePanel } from './toolbar/template-panel';
+import { EdgelessTemplateButton } from './toolbar/template-tool-button';
+
+export function effects() {
+  customElements.define('edgeless-templates-panel', EdgelessTemplatePanel);
+  customElements.define('overlay-scrollbar', OverlayScrollbar);
+  customElements.define('edgeless-template-button', EdgelessTemplateButton);
+  customElements.define('affine-template-loading', AffineTemplateLoading);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-templates-panel': EdgelessTemplatePanel;
+    'overlay-scrollbar': OverlayScrollbar;
+    'edgeless-template-button': EdgelessTemplateButton;
+    'affine-template-loading': AffineTemplateLoading;
+  }
+}

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

@@ -0,0 +1,5 @@
+export * from './services/template.js';
+export * from './template-tool.js';
+export * from './toolbar/senior-tool.js';
+export * from './toolbar/template-panel.js';
+export * from './toolbar/template-type.js';

blocksuite/affine/gfx/template/src/template-tool.ts

@@ -0,0 +1,11 @@
+import { BaseTool } from '@blocksuite/std/gfx';
+
+export class TemplateTool extends BaseTool {
+  static override toolName: string = 'template';
+}
+
+declare module '@blocksuite/std/gfx' {
+  interface GfxToolsMap {
+    template: TemplateTool;
+  }
+}

blocksuite/affine/gfx/template/src/toolbar/senior-tool.ts

@@ -0,0 +1,13 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const templateSeniorTool = SeniorToolExtension(
+  'template',
+  ({ block }) => {
+    return {
+      name: 'Template',
+      content: html`<edgeless-template-button .edgeless=${block}>
+      </edgeless-template-button>`,
+    };
+  }
+);

blocksuite/affine/gfx/template/src/toolbar/template-panel.ts

@@ -22,8 +22,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-import { EdgelessRootService } from '../../../edgeless-root-service.js';
-import { createTemplateJob } from '../../../services/template.js';
+import { createTemplateJob } from '../services/template.js';
 import { builtInTemplates } from './builtin-templates.js';
 import { defaultPreview, Triangle } from './cards.js';
 import type { Template } from './template-type.js';
@@ -271,10 +270,6 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
     });
   }
 
-  get service() {
-    return this.edgeless.std.get(EdgelessRootService);
-  }
-
   get gfx() {
     return this.edgeless.std.get(GfxControllerIdentifier);
   }
@@ -319,6 +314,7 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
       }
     } finally {
       this._loadingTemplate = null;
+      // @ts-expect-error FIXME: resolve after gfx tool refactor
       this.gfx.tool.setTool('default');
     }
   }

blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts

@@ -138,6 +138,7 @@ export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(
         this.setEdgelessTool(this._prevTool);
         this._prevTool = null;
       } else {
+        // @ts-expect-error FIXME: resolve after gfx tool refactor
         this.setEdgelessTool('default');
       }
     }

blocksuite/affine/gfx/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../text" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}

blocksuite/integration-test/src/__tests__/edgeless/template.spec.ts

@@ -2,7 +2,7 @@ import {
   EdgelessTemplatePanel,
   type Template,
   type TemplateManager,
-} from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/gfx/template';
 import { beforeEach, expect, test } from 'vitest';
 
 import { setupEditor } from '../utils/setup.js';

blocksuite/playground/apps/_common/setup.ts

@@ -2,8 +2,8 @@ import type {
   Template,
   TemplateCategory,
   TemplateManager,
-} from '@blocksuite/affine/blocks/root';
-import { EdgelessTemplatePanel } from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/gfx/template';
+import { EdgelessTemplatePanel } from '@blocksuite/affine/gfx/template';
 
 export function setupEdgelessTemplate() {
   const playgroundTemplates = [