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