fix(edgeless): export template job and image upload api (#8980)

### What changed?
- Exposed `uploadBlobForImage` utility function
- Refactor `createTemplateJob` for reuse
- Exposed `TemplateJob` and `TemplateMiddlewares` APIs

Support issue [BS-2085](https://linear.app/affine-design/issue/BS-2085).

packages/affine/shared/src/services/telemetry-service/types.ts

@@ -35,7 +35,7 @@ export interface DocCreatedEvent extends TelemetryEvent {
 
 export interface ElementCreationEvent extends TelemetryEvent {
   segment?: 'toolbar' | 'whiteboard' | 'right sidebar';
-  page: 'whiteboard editor';
+  page?: 'doc editor' | 'whiteboard editor';
   module?: 'toolbar' | 'canvas' | 'ai chat panel';
   control?: ElementCreationSource;
 }

packages/blocks/src/image-block/index.ts

@@ -2,4 +2,5 @@ export * from './adapters/markdown.js';
 export * from './image-block.js';
 export * from './image-edgeless-block.js';
 export * from './image-service.js';
+export { uploadBlobForImage } from './utils.js';
 export { ImageSelection } from '@blocksuite/affine-shared/selection';

packages/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts

@@ -1,5 +1,3 @@
-import type { IBound } from '@blocksuite/global/utils';
-
 import {
   darkToolbarStyles,
   EditPropsStore,
@@ -10,11 +8,7 @@ import {
   requestConnectedFrame,
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
-import {
-  Bound,
-  getCommonBound,
-  WithDisposable,
-} from '@blocksuite/global/utils';
+import { type Bound, WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -23,15 +17,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
-import type { TemplateJob } from '../../../services/template.js';
 import type { Template } from './template-type.js';
 
-import {
-  createInsertPlaceMiddleware,
-  createRegenerateIndexMiddleware,
-  createStickerMiddleware,
-  replaceIdMiddleware,
-} from '../../../services/template-middlewares.js';
 import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { builtInTemplates } from './builtin-templates.js';
 import { ArrowIcon, defaultPreview } from './icon.js';
@@ -219,43 +206,6 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
     this.dispatchEvent(new CustomEvent('closepanel'));
   }
 
-  private _createTemplateJob(type: string, center: { x: number; y: number }) {
-    const middlewares: ((job: TemplateJob) => void)[] = [];
-    const service = this.edgeless.service;
-
-    if (type === 'template') {
-      const currentContentBound = getCommonBound(
-        (
-          service.blocks.map(block => Bound.deserialize(block.xywh)) as IBound[]
-        ).concat(service.elements)
-      );
-
-      if (currentContentBound) {
-        currentContentBound.x +=
-          currentContentBound.w + 20 / service.viewport.zoom;
-        middlewares.push(createInsertPlaceMiddleware(currentContentBound));
-      }
-
-      const idxGenerator = service.layer.createIndexGenerator();
-
-      middlewares.push(createRegenerateIndexMiddleware(() => idxGenerator()));
-    }
-
-    if (type === 'sticker') {
-      middlewares.push(
-        createStickerMiddleware(center, () => service.layer.generateIndex())
-      );
-    }
-
-    middlewares.push(replaceIdMiddleware);
-
-    return this.edgeless.service.TemplateJob.create({
-      model: this.edgeless.surfaceBlockModel,
-      type,
-      middlewares,
-    });
-  }
-
   private _fetch(fn: (state: { canceled: boolean }) => Promise<unknown>) {
     if (this._fetchJob) {
       this._fetchJob.cancel();
@@ -330,7 +280,10 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
       x: bound.x + bound.w / 2,
       y: bound.y + bound.h / 2,
     };
-    const templateJob = this._createTemplateJob(template.type, center);
+    const templateJob = this.edgeless.service.createTemplateJob(
+      template.type,
+      center
+    );
     const service = this.edgeless.service;
 
     try {

packages/blocks/src/root-block/edgeless/components/toolbar/template/template-type.ts

@@ -23,7 +23,7 @@ export type Template = {
    * `template`: normal template, looks like an article
    * `sticker`: sticker template, only contains one image block under surface block
    */
-  type: string;
+  type: 'template' | 'sticker';
 };
 
 export type TemplateCategory = {

packages/blocks/src/root-block/edgeless/edgeless-root-service.ts

@@ -6,7 +6,6 @@ import type {
   PointTestOptions,
   ReorderingDirection,
 } from '@blocksuite/block-std/gfx';
-import type { IBound } from '@blocksuite/global/utils';
 
 import {
   type ElementRenderer,
@@ -314,15 +313,17 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
     return groupId;
   }
 
-  createTemplateJob(type: 'template' | 'sticker') {
+  createTemplateJob(
+    type: 'template' | 'sticker',
+    center?: { x: number; y: number }
+  ) {
     const middlewares: ((job: TemplateJob) => void)[] = [];
 
     if (type === 'template') {
-      const currentContentBound = getCommonBound(
-        (
-          this.blocks.map(block => Bound.deserialize(block.xywh)) as IBound[]
-        ).concat(this.elements)
+      const bounds = [...this.blocks, ...this.elements].map(i =>
+        Bound.deserialize(i.xywh)
       );
+      const currentContentBound = getCommonBound(bounds);
 
       if (currentContentBound) {
         currentContentBound.x +=
@@ -337,7 +338,7 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
 
     if (type === 'sticker') {
       middlewares.push(
-        createStickerMiddleware(this.viewport.center, () =>
+        createStickerMiddleware(center || this.viewport.center, () =>
           this.layer.generateIndex()
         )
       );

packages/blocks/src/root-block/index.ts

@@ -3,6 +3,8 @@ export * from './clipboard/index.js';
 export * from './configs/index.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';

packages/blocks/src/surface-block/mini-mindmap/mindmap-preview.ts

@@ -135,10 +135,7 @@ export class MiniMindmapPreview extends WithDisposable(LitElement) {
       this._mindmap!.style = style;
     });
 
-    this.ctx.set({
-      ...this.ctx.get(),
-      style,
-    });
+    this.ctx.set({ style });
     this.requestUpdate();
   }