chore(edgeless): move templates to AFFiNE side

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

@@ -21,7 +21,8 @@ export class ImageBlockTransformer extends BaseBlockTransformer<ImageBlockProps>
   ): Promise<SnapshotReturn<ImageBlockProps>> {
     const snapshotRet = await super.fromSnapshot(payload);
     const sourceId = snapshotRet.props.sourceId;
-    if (sourceId) await payload.assets.writeToBlob(sourceId);
+    if (sourceId && !sourceId.startsWith('/'))
+      await payload.assets.writeToBlob(sourceId);
 
     return snapshotRet;
   }

packages/blocks/src/index.ts

@@ -83,6 +83,12 @@ export * from './list-block/index.js';
 export * from './models.js';
 export * from './note-block/index.js';
 export { EdgelessComponentToolbar } from './page-block/edgeless/components/component-toolbar/component-toolbar.js';
+export { EdgelessTemplatePanel } from './page-block/edgeless/components/toolbar/template/template-panel.js';
+export type {
+  Template,
+  TemplateCategory,
+  TemplateManager,
+} from './page-block/edgeless/components/toolbar/template/template-type.js';
 export { EdgelessPageService } from './page-block/edgeless/edgeless-page-service.js';
 export * from './page-block/index.js';
 export * from './paragraph-block/index.js';

packages/blocks/src/page-block/edgeless/components/toolbar/template/builtin-templates.ts

@@ -2,55 +2,6 @@ import { keys } from '../../../../../_common/utils/iterable.js';
 import type { Template, TemplateManager } from './template-type.js';
 
 export const templates = [
-  {
-    name: 'Marketing',
-    templates: {
-      Storyboard: () =>
-        import('./templates/storyboard.js').then(val => val.default),
-      '4P Marketing Matrix': () =>
-        import('./templates/4p-marketing-matrix.js').then(val => val.default),
-      'User Journey Map': () =>
-        import('./templates/user-journey.js').then(val => val.default),
-    },
-  },
-  {
-    name: 'Project management',
-    templates: {
-      Gantt: () =>
-        import('./templates/gantt-chart.js').then(val => val.default),
-      Kanban: () => import('./templates/kanban.js').then(val => val.default),
-      'Montly Calendar': () =>
-        import('./templates/monthly-calendar.js').then(val => val.default),
-      Fishbone: () =>
-        import('./templates/fishbone.js').then(val => val.default),
-      'Project Planning': () =>
-        import('./templates/project-planning.js').then(val => val.default),
-    },
-  },
-  {
-    name: 'Brainstorming',
-    templates: {
-      SWOT: () => import('./templates/swot.js').then(val => val.default),
-      '5W2H': () => import('./templates/2h5w.js').then(val => val.default),
-      'Flow Chart': () =>
-        import('./templates/flow-chart.js').then(val => val.default),
-      'Concept Map': () =>
-        import('./templates/concept-map.js').then(val => val.default),
-      'SMART Principles': () =>
-        import('./templates/smart-principles.js').then(val => val.default),
-    },
-  },
-  {
-    name: 'Presentation',
-    templates: {
-      'Data Analysis': () =>
-        import('./templates/data-analysis.js').then(val => val.default),
-      'Simple Presentation': () =>
-        import('./templates/simple-presentation.js').then(val => val.default),
-      'Business Proposal': () =>
-        import('./templates/business-proposal.js').then(val => val.default),
-    },
-  },
   {
     name: 'Paws and pals',
     templates: () => import('./templates/stickers.js').then(val => val.default),
@@ -74,24 +25,51 @@ function lcs(text1: string, text2: string) {
 
   return dp[text1.length][text2.length];
 }
+const extendTemplate: TemplateManager[] = [];
+
+const flat = <T>(arr: T[][]) =>
+  arr.reduce((pre, current) => {
+    if (current) {
+      pre.concat(current);
+    }
+
+    return pre;
+  }, []);
 
 export const builtInTemplates = {
   list: async (category: string) => {
+    const extendTemplates = flat(
+      await Promise.all(extendTemplate.map(manager => manager.list(category)))
+    );
+
     const cate = templates.find(cate => cate.name === category);
-    if (!cate) return [];
+    if (!cate) return extendTemplates;
 
-    return cate.templates instanceof Function
-      ? await cate.templates()
-      : // @ts-ignore
-        Promise.all(keys(cate.templates).map(key => cate.templates[key]()));
+    const result: Template[] =
+      cate.templates instanceof Function
+        ? await cate.templates()
+        : await Promise.all(
+            // @ts-ignore
+            keys(cate.templates).map(key => cate.templates[key]())
+          );
+
+    return result.concat(extendTemplates);
   },
 
   categories: async () => {
-    return templates.map(cate => cate.name);
+    const extendCates = flat(
+      await Promise.all(extendTemplate.map(manager => manager.categories()))
+    );
+
+    return templates.map(cate => cate.name).concat(extendCates);
   },
 
   search: async (keyword: string, cateName?: string) => {
-    const candidates: Template[] = [];
+    const candidates: Template[] = flat(
+      await Promise.all(
+        extendTemplate.map(manager => manager.search(keyword, cateName))
+      )
+    );
 
     keyword = keyword.trim().toLocaleLowerCase();
 
@@ -107,7 +85,10 @@ export const builtInTemplates = {
 
         return Promise.all(
           keys(categroy.templates).map(async name => {
-            if (lcs(keyword, name.toLocaleLowerCase()) === keyword.length) {
+            if (
+              lcs(keyword, (name as string).toLocaleLowerCase()) ===
+              keyword.length
+            ) {
               // @ts-ignore
               const template = await categroy.templates[name]();
 
@@ -120,4 +101,10 @@ export const builtInTemplates = {
 
     return candidates;
   },
+
+  extend(manager: TemplateManager) {
+    if (extendTemplate.includes(manager)) return;
+
+    extendTemplate.push(manager);
+  },
 } satisfies TemplateManager;

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

@@ -5,6 +5,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 import {
   requestConnectedFrame,
@@ -116,15 +117,17 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
       width: 135px;
       height: 80px;
       box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.02);
-      background-color: #fff;
+      background-color: var(--affine-background-primary-color);
       border-radius: 4px;
       cursor: pointer;
     }
 
     .template-item > svg {
       display: block;
       margin: 0 auto;
-      transform: translateY(20%);
+      width: 135px;
+      height: 80px;
+      color: var(--affine-background-primary-color);
     }
 
     .template-item:hover::before {
@@ -438,10 +441,12 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
                       @click=${() => this._insertTemplate(template)}
                     >
                       ${template.preview
-                        ? html`<img
-                            src="${template.preview}"
-                            class="template-preview"
-                          />`
+                        ? template.preview.startsWith('<svg')
+                          ? html`${unsafeSVG(template.preview)}`
+                          : html`<img
+                              src="${template.preview}"
+                              class="template-preview"
+                            />`
                         : defaultPreview}
                       ${template === this._loadingTemplate
                         ? html`<affine-template-loading></affine-template-loading>`

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

@@ -19,4 +19,6 @@ export interface TemplateManager {
   categories(): Promise<string[]>;
 
   search(keyword: string, category?: string): Promise<Template[]>;
+
+  extend(manager: TemplateManager): void;
 }