feat: move templates into AFFiNE (#5750)

Related to toeverything/blocksuite#6156

### Change
Move the edgeless templates to AFFiNE. All templates are stored as zip files. Run `node build-edgeless.mjs` in `@affine/templates` to generate JSON-format templates and importing script. The template will be generated automatically during building and dev (`yarn dev`).

.eslintignore

@@ -12,3 +12,4 @@ static
 web-static
 public
 packages/frontend/i18n/src/i18n-generated.ts
+packages/frontend/templates/edgeless-templates.gen.ts

.gitignore

@@ -79,3 +79,6 @@ lib
 affine.db
 apps/web/next-routes.conf
 .nx
+
+packages/frontend/templates/edgeless
+packages/frontend/core/public/static/templates

.prettierignore

@@ -16,6 +16,7 @@ packages/frontend/i18n/src/i18n-generated.ts
 packages/frontend/graphql/src/graphql/index.ts
 tests/affine-legacy/**/static
 .yarnrc.yml
+packages/frontend/templates/edgeless-templates.gen.ts
 packages/frontend/templates/templates.gen.ts
 packages/frontend/templates/onboarding
 

packages/frontend/core/src/bootstrap/edgeless-template.ts

@@ -0,0 +1,7 @@
+import { builtInTemplates } from '@affine/templates/edgeless';
+import {
+ EdgelessTemplatePanel,
+ type TemplateManager,
+} from '@blocksuite/blocks';
+
+EdgelessTemplatePanel.templates.extend(builtInTemplates as TemplateManager);

packages/frontend/core/src/bootstrap/setup.ts

@@ -1,4 +1,5 @@
 import './register-blocksuite-components';
+import './edgeless-template';
 
 import { setupGlobal } from '@affine/env/global';
 import * as Sentry from '@sentry/react';

packages/frontend/templates/build-edgeless.mjs

@@ -0,0 +1,314 @@
+import { existsSync, mkdirSync, readFileSync, statSync } from 'node:fs';
+import fs from 'node:fs/promises';
+import path, { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import JSZip from 'jszip';
+
+const __dirname = join(fileURLToPath(import.meta.url), '..');
+const ZIP_PATH = join(__dirname, './edgeless-snapshot');
+const ASSETS_PREFIX = `/static/templates`;
+const ASSETS_PATH = join(__dirname, '../core/public/', ASSETS_PREFIX);
+const TEMPLATE_PATH = join(__dirname, './edgeless');
+
+const getZipFilesInCategroies = () => {
+ return fs.readdir(ZIP_PATH).then(folders => {
+ return Promise.all(
+ folders
+ .filter(folder => {
+ return statSync(join(ZIP_PATH, folder)).isDirectory();
+ })
+ .map(async folder => {
+ const files = await fs.readdir(join(ZIP_PATH, folder));
+ return {
+ category: folder,
+ files: files.filter(file => path.extname(file) === '.zip'),
+ };
+ })
+ );
+ });
+};
+
+const setupFolder = async () => {
+ if (!existsSync(ASSETS_PATH)) {
+ mkdirSync(ASSETS_PATH);
+ }
+
+ if (!existsSync(TEMPLATE_PATH)) {
+ mkdirSync(TEMPLATE_PATH);
+ }
+};
+
+/**
+ * @typedef Block
+ * @type {object}
+ * @property {string} flavour
+ * @property {Array<Block> | undefined} children
+ * @property {object} props
+ * @property {string} props.sourceId
+ */
+
+/**
+ * @param {Block} block
+ */
+const convertSourceId = (block, assetsExtMap) => {
+ if (block.props?.sourceId) {
+ const extname = assetsExtMap[block.props.sourceId];
+ if (!extname) {
+ console.warn(`No extname found for ${block.props.sourceId}`);
+ }
+ block.props.sourceId = `${ASSETS_PREFIX}/${block.props.sourceId}${
+ extname ?? ''
+ }`;
+ }
+
+ if (block.children && Array.isArray(block.children)) {
+ block.children.forEach(block => convertSourceId(block, assetsExtMap));
+ }
+};
+
+const parseSnapshot = async () => {
+ const filesInCategroies = await getZipFilesInCategroies();
+ await setupFolder();
+ /**
+ * @type {Array<{ category: string, templates: string[] }}>}
+ */
+ const templatesInCategory = [];
+
+ for (let cate of filesInCategroies) {
+ const templates = [];
+ const assetsExtentionMap = {};
+
+ for (let file of cate.files) {
+ const templateName = path.basename(file, '.zip');
+ const zip = new JSZip();
+ const { files: unarchivedFiles } = await zip.loadAsync(
+ readFileSync(join(ZIP_PATH, cate.category, file))
+ );
+ /**
+ * @type {Array<JSZip.JSZipObject>}
+ */
+ const assetsFiles = [];
+ /**
+ * @type {Array<JSZip.JSZipObject>}
+ */
+ const snapshotFiles = [];
+
+ Object.entries(unarchivedFiles).forEach(([name, fileObj]) => {
+ if (name.includes('MACOSX') || name.includes('__MACOSX')) return;
+
+ if (name.startsWith('assets/') && !fileObj.dir) {
+ assetsFiles.push(fileObj);
+ return;
+ }
+
+ if (name.endsWith('.snapshot.json')) {
+ snapshotFiles.push(fileObj);
+ return;
+ }
+ });
+
+ await Promise.all(
+ assetsFiles.map(async file => {
+ const blob = await file.async('blob');
+ const arrayBuffer = await blob.arrayBuffer();
+ const buffer = Buffer.from(arrayBuffer, 'binary');
+ const extname = path.extname(file.name);
+
+ assetsExtentionMap[
+ file.name.replace('assets/', '').replace(extname, '')
+ ] = extname;
+
+ await fs.writeFile(
+ join(ASSETS_PATH, file.name.replace('assets/', '')),
+ buffer
+ );
+ })
+ );
+
+ await Promise.all(
+ snapshotFiles.map(async snapshot => {
+ const json = await snapshot.async('text');
+ const snapshotContent = JSON.parse(json);
+ const previewPath = join(
+ ZIP_PATH,
+ cate.category,
+ `${templateName}.svg`
+ );
+ let previewContent = '';
+
+ if (existsSync(previewPath)) {
+ const previewFile = readFileSync(previewPath, 'utf-8');
+ previewContent = previewFile
+ .replace(/\n/g, '')
+ .replace(/\s+/g, ' ')
+ .replace('fill="white"', 'fill="currentColor"');
+ } else {
+ console.warn(`No preview found for ${templateName}`);
+ }
+
+ convertSourceId(snapshotContent.blocks, assetsExtentionMap);
+
+ const template = {
+ name: templateName,
+ type: 'template',
+ preview: previewContent,
+ content: snapshotContent,
+ };
+
+ await fs.writeFile(
+ join(join(TEMPLATE_PATH, `${templateName}.json`)),
+ JSON.stringify(template, undefined, 2)
+ );
+
+ templates.push(templateName);
+ })
+ );
+ }
+
+ templatesInCategory.push({
+ category: cate.category,
+ templates,
+ });
+ }
+
+ return templatesInCategory;
+};
+
+function numberToWords(n) {
+ const ones = [
+ 'Zero',
+ 'One',
+ 'Two',
+ 'Three',
+ 'Four',
+ 'Five',
+ 'Six',
+ 'Seven',
+ 'Eight',
+ 'Nine',
+ ];
+
+ if (n < 10) {
+ return ones[n];
+ } else {
+ throw new Error(`Not implemented: ${n}`);
+ }
+}
+
+const camelCaseNumber = variable => {
+ const words = variable.split(' ');
+ return words
+ .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+ .join('');
+};
+
+const toVariableName = name => {
+ const converted = Array.from(name).reduce((pre, char) => {
+ if (char >= '0' && char <= '9') {
+ return pre + numberToWords(char - '0');
+ }
+
+ return pre + char;
+ }, '');
+
+ return camelCaseNumber(converted);
+};
+
+/**
+ *
+ * @param {Array<{category: string, templates: string[]}} templatesInGroup
+ */
+const buildScript = async templatesInGroup => {
+ const templates = [];
+ const templateVariableMap = {};
+
+ templatesInGroup.forEach(group => {
+ group.templates.forEach(template => {
+ templates.push(template);
+ templateVariableMap[template] = toVariableName(template);
+ });
+ });
+
+ const importStatements = templates
+ .map(template => {
+ return `import ${toVariableName(
+ template
+ )} from './edgeless/${template}.json';`;
+ })
+ .join('\n');
+ const templatesDeclaration = templatesInGroup.map(group => {
+ return `'${group.category}': [
+ ${group.templates
+ .map(template => templateVariableMap[template])
+ .join(',\n ')}
+ ]`;
+ });
+
+ const code = `${importStatements}
+
+const templates = {
+ ${templatesDeclaration.join(',\n ')}
+}
+
+function lcs(text1: string, text2: string) {
+ const dp: number[][] = Array.from({ length: text1.length + 1 })
+ .fill(null)
+ .map(() => Array.from<number>({length: text2.length + 1}).fill(0));
+
+ for (let i = 1; i <= text1.length; i++) {
+ for (let j = 1; j <= text2.length; j++) {
+ if (text1[i - 1] === text2[j - 1]) {
+ dp[i][j] = dp[i - 1][j - 1] + 1;
+ } else {
+ dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+ }
+ }
+ }
+
+ return dp[text1.length][text2.length];
+}
+
+export const builtInTemplates = {
+ list: async (category: string) => {
+ // @ts-expect-error type should be asserted when using
+ return templates[category] ?? []
+ },
+
+ categories: async () => {
+ return Object.keys(templates)
+ },
+
+ search: async(query: string) => {
+ const candidates: unknown[] = [];
+ const cates = Object.keys(templates);
+
+ query = query.toLowerCase();
+
+ for(let cate of cates) {
+ // @ts-expect-error type should be asserted when using
+ const templatesOfCate = templates[cate];
+
+ for(let temp of templatesOfCate) {
+ if(lcs(query, temp.name.toLowerCase()) === query.length) {
+ candidates.push(temp);
+ }
+ }
+ }
+
+ return candidates;
+ },
+}
+`;
+
+ await fs.writeFile(join(__dirname, './edgeless-templates.gen.ts'), code, {
+ encoding: 'utf-8',
+ });
+};
+
+async function main() {
+ const templatesInGroup = await parseSnapshot();
+ await buildScript(templatesInGroup);
+}
+
+main();