@tmagic/editor 1.2.3 → 1.2.5

package/dist/tmagic-editor.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, inject, createCommentVNode, ref, withModifiers, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
 import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, isObject, uniq, difference, union } from 'lodash-es';
+import { isEmpty, map, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, omit, keys } from 'lodash-es';
 import { createValues, MForm } from '@tmagic/form';
 import { HookType, NodeType } from '@tmagic/schema';
 import { TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
@@ -704,62 +704,51 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-  ColumnLayout2["LEFT"] = "left";
-  ColumnLayout2["CENTER"] = "center";
-  ColumnLayout2["RIGHT"] = "right";
-  return ColumnLayout2;
-})(ColumnLayout || {});
-var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-  LayerOffset2["TOP"] = "top";
-  LayerOffset2["BOTTOM"] = "bottom";
-  return LayerOffset2;
-})(LayerOffset || {});
-var Layout = /* @__PURE__ */ ((Layout2) => {
-  Layout2["FLEX"] = "flex";
-  Layout2["FIXED"] = "fixed";
-  Layout2["RELATIVE"] = "relative";
-  Layout2["ABSOLUTE"] = "absolute";
-  return Layout2;
-})(Layout || {});
-var Keys = /* @__PURE__ */ ((Keys2) => {
-  Keys2["ESCAPE"] = "Space";
-  return Keys2;
-})(Keys || {});
-const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
-  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
-  CodeDeleteErrorType2["BIND"] = "bind";
-  return CodeDeleteErrorType2;
-})(CodeDeleteErrorType || {});
-const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
-
-const log = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.log("magic editor: ", ...args);
+class UndoRedo {
+  elementList;
+  listCursor;
+  listMaxSize;
+  constructor(listMaxSize = 200) {
+    const minListMaxSize = 2;
+    this.elementList = [];
+    this.listCursor = 0;
+    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
   }
-};
-const info = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.info("magic editor: ", ...args);
+  pushElement(element) {
+    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
+    this.listCursor += 1;
+    if (this.elementList.length > this.listMaxSize) {
+      this.elementList.shift();
+      this.listCursor -= 1;
+    }
   }
-};
-const warn = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.warn("magic editor: ", ...args);
+  canUndo() {
+    return this.listCursor > 1;
   }
-};
-const debug = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.debug("magic editor: ", ...args);
+  undo() {
+    if (!this.canUndo()) {
+      return null;
+    }
+    this.listCursor -= 1;
+    return this.getCurrentElement();
   }
-};
-const error = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.error("magic editor: ", ...args);
+  canRedo() {
+    return this.elementList.length > this.listCursor;
   }
-};
+  redo() {
+    if (!this.canRedo()) {
+      return null;
+    }
+    this.listCursor += 1;
+    return this.getCurrentElement();
+  }
+  getCurrentElement() {
+    if (this.listCursor < 1) {
+      return null;
+    }
+    return cloneDeep(this.elementList[this.listCursor - 1]);
+  }
+}
 
 const compose = (middleware) => {
   if (!Array.isArray(middleware))
@@ -883,272 +872,6 @@ class BaseService extends EventEmitter {
   }
 }
 
-class CodeBlock extends BaseService {
-  state = reactive({
-    isShowCodeEditor: false,
-    codeDsl: null,
-    id: "",
-    editable: true,
-    combineIds: [],
-    undeletableList: [],
-    relations: {}
-  });
-  constructor() {
-    super([
-      "setCodeDsl",
-      "getCodeDsl",
-      "getCodeContentById",
-      "getCodeDslByIds",
-      "getCurrentDsl",
-      "setCodeDslById",
-      "setCodeEditorShowStatus",
-      "setEditStatus",
-      "setCombineIds",
-      "setUndeleteableList",
-      "deleteCodeDslByIds"
-    ]);
-  }
-  async setCodeDsl(codeDsl2) {
-    this.state.codeDsl = codeDsl2;
-    await editorService.setCodeDsl(this.state.codeDsl);
-    info("[code-block]:code-dsl-change", this.state.codeDsl);
-    this.emit("code-dsl-change", this.state.codeDsl);
-  }
-  async getCodeDsl(forceRefresh = false) {
-    return this.getCodeDslSync(forceRefresh);
-  }
-  getCodeDslSync(forceRefresh = false) {
-    if (!this.state.codeDsl || forceRefresh) {
-      this.state.codeDsl = editorService.getCodeDslSync();
-    }
-    return this.state.codeDsl;
-  }
-  async getCodeContentById(id2) {
-    if (!id2)
-      return null;
-    const totalCodeDsl = await this.getCodeDsl();
-    if (!totalCodeDsl)
-      return null;
-    return totalCodeDsl[id2] ?? null;
-  }
-  async setCodeDslById(id, codeConfig) {
-    let codeDsl = await this.getCodeDsl();
-    const codeConfigProcessed = codeConfig;
-    if (codeConfig.content) {
-      codeConfigProcessed.content = eval(codeConfig.content);
-    }
-    if (!codeDsl) {
-      codeDsl = {
-        [id]: {
-          ...codeConfigProcessed
-        }
-      };
-    } else {
-      const existContent = codeDsl[id] || {};
-      codeDsl = {
-        ...codeDsl,
-        [id]: {
-          ...existContent,
-          ...codeConfigProcessed
-        }
-      };
-    }
-    await this.setCodeDsl(codeDsl);
-  }
-  async getCodeDslByIds(ids) {
-    const codeDsl2 = await this.getCodeDsl();
-    return pick(codeDsl2, ids);
-  }
-  async setCodeEditorShowStatus(status) {
-    this.state.isShowCodeEditor = status;
-  }
-  getCodeEditorShowStatus() {
-    return this.state.isShowCodeEditor;
-  }
-  setCodeEditorContent(status, id2) {
-    if (!id2)
-      return;
-    this.setId(id2);
-    this.state.isShowCodeEditor = status;
-  }
-  async getCurrentDsl() {
-    return await this.getCodeContentById(this.state.id);
-  }
-  getEditStatus() {
-    return this.state.editable;
-  }
-  async setEditStatus(status) {
-    this.state.editable = status;
-  }
-  setId(id2) {
-    if (!id2)
-      return;
-    this.state.id = id2;
-  }
-  getId() {
-    return this.state.id;
-  }
-  async setCombineIds(ids) {
-    this.state.combineIds = ids;
-  }
-  getCombineIds() {
-    return this.state.combineIds;
-  }
-  refreshCombineInfo() {
-    const root = editorService.get("root");
-    if (!root)
-      return null;
-    const relations = {};
-    this.recurseMNode(root, relations);
-    this.state.relations = relations;
-    return this.state.relations;
-  }
-  getCombineInfo() {
-    return this.state.relations;
-  }
-  getUndeletableList() {
-    return this.state.undeletableList;
-  }
-  async setUndeleteableList(codeIds) {
-    this.state.undeletableList = codeIds;
-  }
-  setCodeDraft(codeId, content) {
-    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
-  }
-  getCodeDraft(codeId) {
-    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
-  }
-  removeCodeDraft(codeId) {
-    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
-  }
-  async deleteCodeDslByIds(codeIds) {
-    const currentDsl = await this.getCodeDsl();
-    const newDsl = omit(currentDsl, codeIds);
-    await this.setCodeDsl(newDsl);
-    return newDsl;
-  }
-  async getUniqueId() {
-    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
-    const dsl = await this.getCodeDsl();
-    const existedIds = keys(dsl);
-    if (!existedIds.includes(newId))
-      return newId;
-    return await this.getUniqueId();
-  }
-  async deleteCompsInRelation(node) {
-    const codeDsl2 = cloneDeep(await this.getCodeDsl());
-    if (!codeDsl2)
-      return;
-    this.refreshRelationDeep(node, codeDsl2);
-    this.setCodeDsl(codeDsl2);
-  }
-  resetState() {
-    this.state.isShowCodeEditor = false;
-    this.state.codeDsl = null;
-    this.state.id = "";
-    this.state.editable = true;
-    this.state.combineIds = [];
-    this.state.undeletableList = [];
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-  refreshRelationDeep(node, codeDsl2) {
-    if (!node.id)
-      return;
-    forIn(codeDsl2, (codeBlockContent) => {
-      const compsContent = codeBlockContent.comps || {};
-      codeBlockContent.comps = omit(compsContent, node.id);
-    });
-    if (!isEmpty(node.items)) {
-      node.items.forEach((item) => {
-        this.refreshRelationDeep(item, codeDsl2);
-      });
-    }
-  }
-  recurseMNode(node, relations) {
-    forIn(node, (value, key) => {
-      let unConfirmedValue = { id: node.id };
-      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
-        value.hookData.forEach((relationItem) => {
-          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);
-        });
-        return;
-      }
-      if (typeof value === "object") {
-        unConfirmedValue = {
-          ...unConfirmedValue,
-          ...value
-        };
-        this.recurseMNode(unConfirmedValue, relations);
-      }
-    });
-    if (!isEmpty(node.items)) {
-      node.items.forEach((item) => {
-        this.recurseMNode(item, relations);
-      });
-    }
-  }
-}
-const codeBlockService = new CodeBlock();
-
-class UndoRedo {
-  elementList;
-  listCursor;
-  listMaxSize;
-  constructor(listMaxSize = 200) {
-    const minListMaxSize = 2;
-    this.elementList = [];
-    this.listCursor = 0;
-    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
-  }
-  pushElement(element) {
-    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
-    this.listCursor += 1;
-    if (this.elementList.length > this.listMaxSize) {
-      this.elementList.shift();
-      this.listCursor -= 1;
-    }
-  }
-  canUndo() {
-    return this.listCursor > 1;
-  }
-  undo() {
-    if (!this.canUndo()) {
-      return null;
-    }
-    this.listCursor -= 1;
-    return this.getCurrentElement();
-  }
-  canRedo() {
-    return this.elementList.length > this.listCursor;
-  }
-  redo() {
-    if (!this.canRedo()) {
-      return null;
-    }
-    this.listCursor += 1;
-    return this.getCurrentElement();
-  }
-  getCurrentElement() {
-    if (this.listCursor < 1) {
-      return null;
-    }
-    return cloneDeep(this.elementList[this.listCursor - 1]);
-  }
-}
-
 class History extends BaseService {
   state = reactive({
     pageSteps: {},
@@ -1317,6 +1040,37 @@ class WebStorage extends BaseService {
 }
 const storageService = new WebStorage();
 
+var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+  ColumnLayout2["LEFT"] = "left";
+  ColumnLayout2["CENTER"] = "center";
+  ColumnLayout2["RIGHT"] = "right";
+  return ColumnLayout2;
+})(ColumnLayout || {});
+var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+  LayerOffset2["TOP"] = "top";
+  LayerOffset2["BOTTOM"] = "bottom";
+  return LayerOffset2;
+})(LayerOffset || {});
+var Layout = /* @__PURE__ */ ((Layout2) => {
+  Layout2["FLEX"] = "flex";
+  Layout2["FIXED"] = "fixed";
+  Layout2["RELATIVE"] = "relative";
+  Layout2["ABSOLUTE"] = "absolute";
+  return Layout2;
+})(Layout || {});
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["ESCAPE"] = "Space";
+  return Keys2;
+})(Keys || {});
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+  CodeDeleteErrorType2["BIND"] = "bind";
+  return CodeDeleteErrorType2;
+})(CodeDeleteErrorType || {});
+const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const getPageList = (app) => {
   if (app.items && Array.isArray(app.items)) {
@@ -1949,7 +1703,6 @@ class Editor$1 extends BaseService {
       stage?.select(parent.id);
     }
     this.addModifiedNodeId(parent.id);
-    codeBlockService.deleteCompsInRelation(node);
   }
   async remove(nodeOrNodeList) {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -2017,7 +1770,6 @@ class Editor$1 extends BaseService {
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
     this.pushHistoryState();
     this.emit("update", newNodes);
-    codeBlockService.refreshCombineInfo();
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
   async sort(id1, id2) {
@@ -2256,6 +2008,7 @@ class Editor$1 extends BaseService {
       await this.select(value.nodeId);
       this.get("stage")?.select(value.nodeId);
     }, 0);
+    this.emit("history-change", value.data);
   }
   async toggleFixedPosition(dist, src, root) {
     const newConfig = cloneDeep(dist);
@@ -2556,6 +2309,32 @@ const fillConfig = (config = []) => [
   }
 ];
 
+const log = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.log("magic editor: ", ...args);
+  }
+};
+const info = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.info("magic editor: ", ...args);
+  }
+};
+const warn = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.warn("magic editor: ", ...args);
+  }
+};
+const debug = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.debug("magic editor: ", ...args);
+  }
+};
+const error = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.error("magic editor: ", ...args);
+  }
+};
+
 const state = reactive({
   uiSelectMode: false,
   showSrc: false,
@@ -3736,15 +3515,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
     const codeCombineInfo = ref(null);
     const getBindCompsByCodeId = (codeId) => {
-      if (!codeCombineInfo.value || !codeCombineInfo.value[codeId])
+      if (!codeCombineInfo.value)
         return [];
-      const bindCompsId = Object.keys(codeCombineInfo.value[codeId]);
-      return bindCompsId.map((compId) => ({
-        compId,
-        compName: getCompName(compId)
-      }));
+      const bindsComp = [];
+      forIn(codeCombineInfo.value, (codeIds, compId) => {
+        if (codeIds.includes(codeId)) {
+          bindsComp.push({
+            compId,
+            compName: getCompName(compId)
+          });
+        }
+      });
+      return bindsComp;
     };
-    const initList = async () => {
+    const refreshCodeList = async () => {
       const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
       codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
       if (!codeDsl || !codeCombineInfo.value)
@@ -3761,12 +3545,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       });
     };
     watch(
-      [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.refreshCombineInfo()],
+      () => services?.editorService.get("root"),
+      () => {
+        services?.codeBlockService.refreshAllRelations();
+        refreshCodeList();
+      }
+    );
+    watch(
+      [() => services?.codeBlockService.getCodeDslSync(), () => services?.codeBlockService.getCombineInfo()],
       () => {
-        initList();
+        refreshCodeList();
       },
       {
-        immediate: true,
         deep: true
       }
     );
@@ -4664,7 +4454,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
             return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
-              key: index,
+              key: config.$key || index,
               name: config.text
             }, {
               label: withCtx(() => [
@@ -5799,6 +5589,236 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
+class CodeBlock extends BaseService {
+  state = reactive({
+    isShowCodeEditor: false,
+    codeDsl: null,
+    id: "",
+    editable: true,
+    combineIds: [],
+    undeletableList: [],
+    relations: {}
+  });
+  constructor() {
+    super([
+      "setCodeDsl",
+      "getCodeDsl",
+      "getCodeContentById",
+      "getCodeDslByIds",
+      "getCurrentDsl",
+      "setCodeDslById",
+      "setCodeEditorShowStatus",
+      "setEditStatus",
+      "setCombineIds",
+      "setUndeleteableList",
+      "deleteCodeDslByIds"
+    ]);
+  }
+  async setCodeDsl(codeDsl2) {
+    this.state.codeDsl = codeDsl2;
+    await editorService.setCodeDsl(this.state.codeDsl);
+    info("[code-block]:code-dsl-change", this.state.codeDsl);
+    this.emit("code-dsl-change", this.state.codeDsl);
+  }
+  async getCodeDsl(forceRefresh = false) {
+    return this.getCodeDslSync(forceRefresh);
+  }
+  getCodeDslSync(forceRefresh = false) {
+    if (!this.state.codeDsl || forceRefresh) {
+      this.state.codeDsl = editorService.getCodeDslSync();
+    }
+    return this.state.codeDsl;
+  }
+  async getCodeContentById(id2) {
+    if (!id2)
+      return null;
+    const totalCodeDsl = await this.getCodeDsl();
+    if (!totalCodeDsl)
+      return null;
+    return totalCodeDsl[id2] ?? null;
+  }
+  async setCodeDslById(id, codeConfig) {
+    let codeDsl = await this.getCodeDsl();
+    const codeConfigProcessed = codeConfig;
+    if (codeConfig.content) {
+      codeConfigProcessed.content = eval(codeConfig.content);
+    }
+    if (!codeDsl) {
+      codeDsl = {
+        [id]: {
+          ...codeConfigProcessed
+        }
+      };
+    } else {
+      const existContent = codeDsl[id] || {};
+      codeDsl = {
+        ...codeDsl,
+        [id]: {
+          ...existContent,
+          ...codeConfigProcessed
+        }
+      };
+    }
+    await this.setCodeDsl(codeDsl);
+  }
+  async getCodeDslByIds(ids) {
+    const codeDsl2 = await this.getCodeDsl();
+    return pick(codeDsl2, ids);
+  }
+  async setCodeEditorShowStatus(status) {
+    this.state.isShowCodeEditor = status;
+  }
+  getCodeEditorShowStatus() {
+    return this.state.isShowCodeEditor;
+  }
+  setCodeEditorContent(status, id2) {
+    if (!id2)
+      return;
+    this.setId(id2);
+    this.state.isShowCodeEditor = status;
+  }
+  async getCurrentDsl() {
+    return await this.getCodeContentById(this.state.id);
+  }
+  getEditStatus() {
+    return this.state.editable;
+  }
+  async setEditStatus(status) {
+    this.state.editable = status;
+  }
+  setId(id2) {
+    if (!id2)
+      return;
+    this.state.id = id2;
+  }
+  getId() {
+    return this.state.id;
+  }
+  async setCombineIds(ids) {
+    this.state.combineIds = ids;
+  }
+  getCombineIds() {
+    return this.state.combineIds;
+  }
+  addCodeRelationListener() {
+    editorService.on("update", (nodes) => {
+      const relations = cloneDeep(this.state.relations);
+      nodes.forEach((node) => {
+        if (node?.id) {
+          relations[node.id] = [];
+          this.getNodeRelation(node, relations);
+        }
+      });
+      this.state.relations = { ...relations };
+    });
+    editorService.on("remove", (nodes) => {
+      nodes.forEach((node) => {
+        this.state.relations = this.deleteNodeRelation(node, this.state.relations);
+      });
+    });
+    editorService.on("history-change", (page) => {
+      const relations = {};
+      this.getNodeRelation(page, relations, true);
+      this.state.relations = relations;
+    });
+  }
+  refreshAllRelations() {
+    const root = editorService.get("root");
+    if (!root)
+      return;
+    const relations = {};
+    this.getNodeRelation(root, relations, true);
+    this.state.relations = relations;
+  }
+  getCombineInfo() {
+    return this.state.relations;
+  }
+  getUndeletableList() {
+    return this.state.undeletableList;
+  }
+  async setUndeleteableList(codeIds) {
+    this.state.undeletableList = codeIds;
+  }
+  setCodeDraft(codeId, content) {
+    globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+  }
+  getCodeDraft(codeId) {
+    return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+  removeCodeDraft(codeId) {
+    globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+  }
+  async deleteCodeDslByIds(codeIds) {
+    const currentDsl = await this.getCodeDsl();
+    const newDsl = omit(currentDsl, codeIds);
+    await this.setCodeDsl(newDsl);
+    return newDsl;
+  }
+  async getUniqueId() {
+    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
+    const dsl = await this.getCodeDsl();
+    const existedIds = keys(dsl);
+    if (!existedIds.includes(newId))
+      return newId;
+    return await this.getUniqueId();
+  }
+  resetState() {
+    this.state.isShowCodeEditor = false;
+    this.state.codeDsl = null;
+    this.state.id = "";
+    this.state.editable = true;
+    this.state.combineIds = [];
+    this.state.undeletableList = [];
+  }
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  getNodeRelation(node, relation, deep = false) {
+    forIn(node, (value, key) => {
+      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+        value.hookData.forEach((relationItem) => {
+          if (relationItem.codeId) {
+            relation[node.id] = union(relation[node.id], [relationItem.codeId]);
+          }
+        });
+        return;
+      }
+      let isContinue = false;
+      try {
+        isContinue = key !== "items" && typeof value === "object" && JSON.stringify(value).includes("hookType");
+      } catch (error) {
+        console.error(error);
+      }
+      if (isContinue) {
+        const unConfirmedValue = {
+          id: node.id,
+          ...value
+        };
+        this.getNodeRelation(unConfirmedValue, relation);
+      }
+      if (key === "items" && !isEmpty(value) && deep) {
+        value.forEach((item) => {
+          this.getNodeRelation(item, relation, deep);
+        });
+      }
+    });
+  }
+  deleteNodeRelation(node, relations) {
+    if (!node.id)
+      return {};
+    let newRelations = omit(relations, [node.id]);
+    if (!isEmpty(node.items)) {
+      node.items.forEach((item) => {
+        newRelations = this.deleteNodeRelation(item, newRelations);
+      });
+    }
+    return newRelations;
+  }
+}
+const codeBlockService = new CodeBlock();
+
 class ComponentList extends BaseService {
   state = reactive({
     list: []
@@ -6033,6 +6053,7 @@ const _sfc_main = defineComponent({
         disabledDragStart: props.disabledDragStart
       })
     );
+    codeBlockService.addCodeRelationListener();
     return services;
   }
 });