@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/src/services/BaseService.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -77,7 +77,7 @@ const doAction = async (
  *
  *   editorService.usePlugin({
  *     beforeAdd(value) { return [value] },
- *     afterAdd(value, result) {},
+ *     afterAdd(result, value) { return result },
  *   });
  *
  *   editorService.add(); 最终会变成  () => {
@@ -169,6 +169,15 @@ export default class extends EventEmitter {
     });
   }
 
+  public removeAllPlugins() {
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
+  }
+
   private async doTask() {
     this.doingTask = true;
     let task = this.taskList.shift();

package/src/services/codeBlock.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,12 +19,12 @@
 import { reactive } from 'vue';
 import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
 
-import { Id, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode } from '@tmagic/schema';
 
 import editorService from '../services/editor';
-import type { CodeBlockContent, CodeBlockDSL, CodeState } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
-import { error, info } from '../utils/logger';
+import type { CodeRelation, CodeState, HookData } from '../type';
+import { CODE_DRAFT_STORAGE_KEY } from '../type';
+import { info } from '../utils/logger';
 
 import BaseService from './BaseService';
 
@@ -34,9 +34,9 @@ class CodeBlock extends BaseService {
     codeDsl: null,
     id: '',
     editable: true,
-    mode: CodeEditorMode.EDITOR,
     combineIds: [],
     undeletableList: [],
+    relations: {},
   });
 
   constructor() {
@@ -49,7 +49,6 @@ class CodeBlock extends BaseService {
       'setCodeDslById',
       'setCodeEditorShowStatus',
       'setEditStatus',
-      'setMode',
       'setCombineIds',
       'setUndeleteableList',
       'deleteCodeDslByIds',
@@ -70,22 +69,27 @@ class CodeBlock extends BaseService {
 
   /**
    * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+   * 方法要支持钩子添加扩展，会被重写为异步方法,因此这里显示写为异步以提醒调用者需以异步形式调用
    * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
    * @returns {CodeBlockDSL | null}
    */
   public async getCodeDsl(forceRefresh = false): Promise<CodeBlockDSL | null> {
+    return this.getCodeDslSync(forceRefresh);
+  }
+
+  public getCodeDslSync(forceRefresh = false): CodeBlockDSL | null {
     if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = await editorService.getCodeDsl();
+      this.state.codeDsl = editorService.getCodeDslSync();
     }
     return this.state.codeDsl;
   }
 
   /**
    * 根据代码块id获取代码块内容
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  public async getCodeContentById(id: string): Promise<CodeBlockContent | null> {
+  public async getCodeContentById(id: Id): Promise<CodeBlockContent | null> {
     if (!id) return null;
     const totalCodeDsl = await this.getCodeDsl();
     if (!totalCodeDsl) return null;
@@ -94,16 +98,24 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置代码块ID和代码内容到源dsl
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
     let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      // 在保存的时候转换代码内容
+      // eslint-disable-next-line no-eval
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
     if (!codeDsl) {
       // dsl中无代码块字段
       codeDsl = {
-        [id]: codeConfig,
+        [id]: {
+          ...codeConfigProcessed,
+        },
       };
     } else {
       const existContent = codeDsl[id] || {};
@@ -111,7 +123,7 @@ class CodeBlock extends BaseService {
         ...codeDsl,
         [id]: {
           ...existContent,
-          ...codeConfig,
+          ...codeConfigProcessed,
         },
       };
     }
@@ -148,10 +160,10 @@ class CodeBlock extends BaseService {
   /**
    * 设置代码编辑面板展示状态及展示内容
    * @param {boolean} status 是否展示代码编辑面板
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setCodeEditorContent(status: boolean, id: string): void {
+  public setCodeEditorContent(status: boolean, id: Id): void {
     if (!id) return;
     this.setId(id);
     this.state.isShowCodeEditor = status;
@@ -161,7 +173,7 @@ class CodeBlock extends BaseService {
    * 获取当前选中的代码块内容
    * @returns {CodeBlockContent | null}
    */
-  public async getCurrentDsl() {
+  public async getCurrentDsl(): Promise<CodeBlockContent | null> {
     return await this.getCodeContentById(this.state.id);
   }
 
@@ -184,39 +196,22 @@ class CodeBlock extends BaseService {
 
   /**
    * 设置当前选中的代码块ID
-   * @param {string} id 代码块id
+   * @param {Id} id 代码块id
    * @returns {void}
    */
-  public setId(id: string) {
+  public setId(id: Id): void {
     if (!id) return;
     this.state.id = id;
   }
 
   /**
    * 获取当前选中的代码块ID
-   * @returns {string} id 代码块id
+   * @returns {Id} id 代码块id
    */
-  public getId(): string {
+  public getId(): Id {
     return this.state.id;
   }
 
-  /**
-   * 获取当前模式
-   * @returns {CodeEditorMode}
-   */
-  public getMode(): CodeEditorMode {
-    return this.state.mode;
-  }
-
-  /**
-   * 设置当前模式
-   * @param {CodeEditorMode} mode 模式
-   * @returns {void}
-   */
-  public async setMode(mode: CodeEditorMode): Promise<void> {
-    this.state.mode = mode;
-  }
-
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -235,98 +230,70 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 设置绑定关系
-   * @param {Id} 组件id
-   * @param {string[]} diffCodeIds 代码块id数组
-   * @param {CodeSelectOp} opFlag 操作类型
-   * @param {string} hook 代码块挂载hook名称
-   * @returns {void}
+   * 刷新绑定关系
+   * @returns {CodeRelation | null}
    */
-  public async setCombineRelation(compId: Id, diffCodeIds: string[], opFlag: CodeSelectOp, hook: string) {
-    const codeDsl = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl) return;
-    if (opFlag === CodeSelectOp.DELETE) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const index = compsContent?.[compId].findIndex((item) => item === hook);
-          if (typeof index !== 'undefined' && index !== -1) {
-            compsContent?.[compId].splice(index, 1);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('解绑代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.ADD) {
-      try {
-        diffCodeIds.forEach((codeId) => {
-          const compsContent = codeDsl[codeId].comps;
-          const existHooks = compsContent?.[compId];
-          if (isEmpty(existHooks)) {
-            // comps属性不存在，或者comps为空：新增
-            codeDsl[codeId].comps = {
-              ...(codeDsl[codeId].comps || {}),
-              [compId]: [hook],
-            };
-          } else {
-            // 往已有的关系中添加hook
-            existHooks?.push(hook);
-          }
-        });
-      } catch (e) {
-        error(e);
-        throw new Error('绑定代码块失败');
-      }
-    } else if (opFlag === CodeSelectOp.CHANGE) {
-      // 单选修改
-      forIn(codeDsl, (codeBlockContent, codeId) => {
-        if (codeId === diffCodeIds[0]) {
-          // 增加
-          codeBlockContent.comps = {
-            ...(codeBlockContent?.comps || {}),
-            [compId]: [hook],
-          };
-        } else if (isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
-          // 清空或者移除之前的选项
-          const compHooks = codeBlockContent?.comps?.[compId];
-          // continue
-          if (!compHooks) return true;
-          const index = compHooks.findIndex((hookName) => hookName === hook);
-          if (index !== -1) {
-            compHooks.splice(index, 1);
-            // break
-            return false;
-          }
-        }
-      });
-    }
-    this.setCodeDsl(codeDsl);
+  public refreshCombineInfo(): CodeRelation | null {
+    const root = editorService.get('root');
+    if (!root) return null;
+    const relations = {};
+    this.recurseMNode(root, relations);
+    this.state.relations = relations;
+    return this.state.relations;
+  }
+
+  /**
+   * 获取绑定关系
+   * @returns {CodeRelation}
+   */
+  public getCombineInfo(): CodeRelation {
+    return this.state.relations;
   }
 
   /**
    * 获取不可删除列表
-   * @returns {string[]}
+   * @returns {Id[]}
    */
-  public getUndeletableList(): string[] {
+  public getUndeletableList(): Id[] {
     return this.state.undeletableList;
   }
 
   /**
    * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
-   * @param {string[]} codeIds 代码块id数组
+   * @param {Id[]} codeIds 代码块id数组
    * @returns {void}
    */
-  public async setUndeleteableList(codeIds: string[]): Promise<void> {
+  public async setUndeleteableList(codeIds: Id[]): Promise<void> {
     this.state.undeletableList = codeIds;
   }
 
+  /**
+   * 设置代码草稿
+   */
+  public setCodeDraft(codeId: Id, content: string): void {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+
+  /**
+   * 获取代码草稿
+   */
+  public getCodeDraft(codeId: Id): string | null {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
+  /**
+   * 删除代码草稿
+   */
+  public removeCodeDraft(codeId: Id): void {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+
   /**
    * 在dsl数据源中删除指定id的代码块
-   * @param {string[]} codeIds 需要删除的代码块id数组
+   * @param {Id[]} codeIds 需要删除的代码块id数组
    * @returns {CodeBlockDSL} 删除后的code dsl
    */
-  public async deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL> {
+  public async deleteCodeDslByIds(codeIds: Id[]): Promise<CodeBlockDSL> {
     const currentDsl = await this.getCodeDsl();
     const newDsl = omit(currentDsl, codeIds);
     await this.setCodeDsl(newDsl);
@@ -335,9 +302,9 @@ class CodeBlock extends BaseService {
 
   /**
    * 生成代码块唯一id
-   * @returns {string} 代码块唯一id
+   * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<string> {
+  public async getUniqueId(): Promise<Id> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -346,57 +313,40 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
 
-  /**
-   * 一对一解除绑定关系  功能隐藏，暂时注释
-   * @param {string} compId 组件id
-   * @param {string} codeId 代码块id
-   * @param {string[]} codeHooks 代码块挂载hook名称
-   * @returns {boolean} 结果
-   */
-  // public async unbind(compId: Id, codeId: string, codeHooks: string[]): Promise<boolean> {
-  //   const nodeInfo = editorService.getNodeById(compId);
-  //   if (!nodeInfo) return false;
-  //   // 更新node节点信息
-  //   codeHooks.forEach((hook) => {
-  //     if (!isEmpty(nodeInfo[hook])) {
-  //       const newHookInfo = nodeInfo[hook].filter((item: string) => item !== codeId);
-  //       nodeInfo[hook] = newHookInfo;
-  //       editorService.update(nodeInfo);
-  //     }
-  //   });
-  //   // 更新绑定关系
-  //   const oldRelation = await this.getCompRelation();
-  //   const oldCodeIds = oldRelation[compId];
-  //   // 不能直接splice修改原数组,会导致绑定关系更新错乱
-  //   const newCodeIds = oldCodeIds.filter((item) => item !== codeId);
-  //   this.setCompRelation(compId, newCodeIds);
-  //   return true;
-  // }
-
   /**
    * 通过组件id解除绑定关系（删除组件）
    * @param {MNode} compId 组件节点
    * @returns void
    */
-  public async deleteCompsInRelation(node: MNode) {
+  public async deleteCompsInRelation(node: MNode): Promise<void> {
     const codeDsl = cloneDeep(await this.getCodeDsl());
     if (!codeDsl) return;
-    this.recurseNodes(node, codeDsl);
+    this.refreshRelationDeep(node, codeDsl);
     this.setCodeDsl(codeDsl);
   }
 
-  public destroy() {
+  public resetState() {
     this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
     this.state.id = '';
     this.state.editable = true;
-    this.state.mode = CodeEditorMode.EDITOR;
     this.state.combineIds = [];
     this.state.undeletableList = [];
   }
 
-  // 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
-  private recurseNodes(node: MNode, codeDsl: CodeBlockDSL) {
+  public destroy(): void {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+
+  /**
+   * 删除组件时 如果是容器 需要遍历删除其包含节点的绑定信息
+   * @param {MNode} node 节点信息
+   * @param {CodeBlockDSL} codeDsl 代码块
+   * @returns void
+   */
+  private refreshRelationDeep(node: MNode, codeDsl: CodeBlockDSL): void {
     if (!node.id) return;
     forIn(codeDsl, (codeBlockContent) => {
       const compsContent = codeBlockContent.comps || {};
@@ -404,7 +354,47 @@ class CodeBlock extends BaseService {
     });
     if (!isEmpty(node.items)) {
       node.items.forEach((item: MNode) => {
-        this.recurseNodes(item, codeDsl);
+        this.refreshRelationDeep(item, codeDsl);
+      });
+    }
+  }
+
+  /**
+   * 递归遍历dsl中挂载了代码块的节点，并更新绑定关系数据
+   * @param {MContainer} node 节点信息
+   * @returns void
+   */
+  private recurseMNode(node: MNode, relations: CodeRelation): void {
+    forIn(node, (value, key) => {
+      let unConfirmedValue: MNode = { id: node.id };
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem: HookData) => {
+          // continue
+          if (!relationItem.codeId) return;
+          if (!relations[relationItem.codeId]) {
+            relations[relationItem.codeId] = {};
+          }
+          const codeItem = relations[relationItem.codeId];
+          if (isEmpty(codeItem[node.id])) {
+            codeItem[node.id] = [];
+          }
+          codeItem[node.id].push(key);
+        });
+        // continue
+        return;
+      }
+      if (typeof value === 'object') {
+        // 检查value内部是否有嵌套
+        unConfirmedValue = {
+          ...unConfirmedValue,
+          ...value,
+        };
+        this.recurseMNode(unConfirmedValue, relations);
+      }
+    });
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item: MNode) => {
+        this.recurseMNode(item, relations);
       });
     }
   }

package/src/services/componentList.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -42,9 +42,14 @@ class ComponentList extends BaseService {
     return this.state.list;
   }
 
-  public destroy() {
+  public resetState() {
     this.state.list = [];
+  }
+
+  public destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 }