@tmagic/editor 1.4.8 → 1.4.10

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
+    <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="03图标" transform="translate(-561.000000, -2356.000000)">
+        <g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)">
+          <g id="路径">
+            <mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask>
+            <use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
+            <path
+              d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z"
+              id="形状"
+              fill="#1D1F24"
+              mask="url(#mask-2)"
+            ></path>
+          </g>
+        </g>
+        <g id="icon切图" transform="translate(226.000000, 1782.000000)"></g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

package/src/icons/FolderMinusIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    class="bi bi-folder-minus"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+    />
+    <path fill-rule="evenodd" d="M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorFolderMinusIcon',
+});
+</script>

package/src/icons/PinIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pin"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" />
+    <line x1="9" y1="15" x2="4.5" y2="19.5" />
+    <line x1="14.5" y1="4" x2="20" y2="9.5" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinIcon',
+});
+</script>

package/src/icons/PinnedIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pinned"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 4v6l-2 4v2h10v-2l-2 -4v-6" />
+    <line x1="12" y1="16" x2="12" y2="21" />
+    <line x1="8" y1="4" x2="16" y2="4" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinnedIcon',
+});
+</script>

package/src/index.ts

@@ -0,0 +1,124 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { App } from 'vue';
+
+import Code from './fields/Code.vue';
+import CodeLink from './fields/CodeLink.vue';
+import CodeSelect from './fields/CodeSelect.vue';
+import CodeSelectCol from './fields/CodeSelectCol.vue';
+import CondOpSelect from './fields/CondOpSelect.vue';
+import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
+import DataSourceMocks from './fields/DataSourceMocks.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
+import DisplayConds from './fields/DisplayConds.vue';
+import EventSelect from './fields/EventSelect.vue';
+import KeyValue from './fields/KeyValue.vue';
+import PageFragmentSelect from './fields/PageFragmentSelect.vue';
+import uiSelect from './fields/UISelect.vue';
+import CodeEditor from './layouts/CodeEditor.vue';
+import { setConfig } from './utils/config';
+import Editor from './Editor.vue';
+import type { InstallOptions } from './type';
+
+import './theme/index.scss';
+
+export type { OnDrag } from 'gesto';
+
+export { DepTargetType } from '@tmagic/dep';
+export type { MoveableOptions } from '@tmagic/stage';
+export * from './type';
+export * from './hooks';
+export * from './utils';
+export { default as TMagicEditor } from './Editor.vue';
+export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
+export { default as editorService } from './services/editor';
+export { default as propsService } from './services/props';
+export { default as historyService } from './services/history';
+export { default as storageService } from './services/storage';
+export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
+export { default as stageOverlayService } from './services/stageOverlay';
+export { default as uiService } from './services/ui';
+export { default as codeBlockService } from './services/codeBlock';
+export { default as depService } from './services/dep';
+export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
+export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
+export { default as CodeSelect } from './fields/CodeSelect.vue';
+export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
+export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceMocks } from './fields/DataSourceMocks.vue';
+export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
+export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
+export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect/Index.vue';
+export { default as EventSelect } from './fields/EventSelect.vue';
+export { default as KeyValue } from './fields/KeyValue.vue';
+export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
+export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as ToolButton } from './components/ToolButton.vue';
+export { default as ContentMenu } from './components/ContentMenu.vue';
+export { default as Icon } from './components/Icon.vue';
+export { default as LayoutContainer } from './components/SplitView.vue';
+export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
+export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
+export { default as FloatingBox } from './components/FloatingBox.vue';
+export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
+export { default as DisplayConds } from './fields/DisplayConds.vue';
+export { default as CondOpSelect } from './fields/CondOpSelect.vue';
+
+const defaultInstallOpt: InstallOptions = {
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
+};
+
+export default {
+  install: (app: App, opt?: Partial<InstallOptions>): void => {
+    const option = Object.assign(defaultInstallOpt, opt || {});
+
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$TMAGIC_EDITOR = option;
+    setConfig(option);
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
+    app.component('m-fields-ui-select', uiSelect);
+    app.component('m-fields-code-link', CodeLink);
+    app.component('m-fields-vs-code', Code);
+    app.component('m-fields-code-select', CodeSelect);
+    app.component('m-fields-code-select-col', CodeSelectCol);
+    app.component('m-fields-event-select', EventSelect);
+    app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-data-source-mocks', DataSourceMocks);
+    app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
+    app.component('m-fields-page-fragment-select', PageFragmentSelect);
+    app.component('m-fields-display-conds', DisplayConds);
+    app.component('m-fields-cond-op-select', CondOpSelect);
+  },
+};

package/src/initService.ts

@@ -0,0 +1,448 @@
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { EventOption } from '@tmagic/core';
+import {
+  createCodeBlockTarget,
+  createDataSourceCondTarget,
+  createDataSourceMethodTarget,
+  createDataSourceTarget,
+  DepTargetType,
+  Target,
+} from '@tmagic/dep';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import PropsPanel from './layouts/PropsPanel.vue';
+import { EditorProps } from './editorProps';
+import { Services } from './type';
+import { traverseNode } from './utils';
+
+export declare type LooseRequired<T> = {
+  [P in string & keyof T]: T[P];
+};
+
+export const initServiceState = (
+  props: EditorProps,
+  {
+    editorService,
+    historyService,
+    componentListService,
+    propsService,
+    eventsService,
+    uiService,
+    codeBlockService,
+    keybindingService,
+    dataSourceService,
+  }: Services,
+) => {
+  // 初始值变化，重新设置节点信息
+  watch(
+    () => props.modelValue,
+    (modelValue) => {
+      editorService.set('root', modelValue || null);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.disabledMultiSelect,
+    (disabledMultiSelect) => {
+      editorService.set('disabledMultiSelect', disabledMultiSelect || false);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.componentGroupList,
+    (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceList,
+    (datasourceList) => datasourceList && dataSourceService.set('datasourceTypeList', datasourceList),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.propsConfigs,
+    (configs) => configs && propsService.setPropsConfigs(configs),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.propsValues,
+    (values) => values && propsService.setPropsValues(values),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.eventMethodList,
+    (eventMethodList) => {
+      const eventsList: Record<string, EventOption[]> = {};
+      const methodsList: Record<string, EventOption[]> = {};
+
+      eventMethodList &&
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+      eventsService.setEvents(eventsList);
+      eventsService.setMethods(methodsList);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceConfigs,
+    (configs) => {
+      configs &&
+        Object.entries(configs).forEach(([key, value]) => {
+          dataSourceService.setFormConfig(key, value);
+        });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceValues,
+    (values) => {
+      values &&
+        Object.entries(values).forEach(([key, value]) => {
+          dataSourceService.setFormValue(key, value);
+        });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.datasourceEventMethodList,
+    (eventMethodList) => {
+      const eventsList: Record<string, EventOption[]> = {};
+      const methodsList: Record<string, EventOption[]> = {};
+
+      eventMethodList &&
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+      Object.entries(eventsList).forEach(([key, value]) => {
+        dataSourceService.setFormEvent(key, value);
+      });
+      Object.entries(methodsList).forEach(([key, value]) => {
+        dataSourceService.setFormMethod(key, value);
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.defaultSelected,
+    (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.stageRect,
+    (stageRect) => stageRect && uiService.set('stageRect', stageRect),
+    {
+      immediate: true,
+    },
+  );
+
+  onBeforeUnmount(() => {
+    editorService.resetState();
+    historyService.resetState();
+    propsService.resetState();
+    uiService.resetState();
+    componentListService.resetState();
+    codeBlockService.resetState();
+    keybindingService.reset();
+  });
+};
+
+export const initServiceEvents = (
+  props: EditorProps,
+  emit: ((event: 'props-panel-mounted', instance: InstanceType<typeof PropsPanel>) => void) &
+    ((event: 'update:modelValue', value: MApp | null) => void),
+  { editorService, codeBlockService, dataSourceService, depService }: Services,
+) => {
+  const getApp = () => {
+    const stage = editorService.get('stage');
+    return stage?.renderer.runtime?.getApp?.();
+  };
+
+  const updateDataSourceSchema = () => {
+    const root = editorService.get('root');
+
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+
+  const targetAddHandler = (target: Target) => {
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+
+    if (root?.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root?.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
+  };
+
+  const collectedHandler = (nodes: MNode[], deep: boolean) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSourceSchema();
+
+    const allNodes: MNode[] = [];
+
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode<MNode>(node, (node) => {
+          if (!allNodes.includes(node)) {
+            allNodes.push(node);
+          }
+        });
+      });
+    } else {
+      allNodes.push(...nodes);
+    }
+
+    const deps = Object.values(root.dataSourceDeps || {});
+    deps.forEach((dep) => {
+      Object.keys(dep).forEach((id) => {
+        const node = allNodes.find((node) => node.id === id);
+        node &&
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+      });
+    });
+  };
+
+  depService.on('add-target', targetAddHandler);
+  depService.on('remove-target', targetRemoveHandler);
+  depService.on('collected', collectedHandler);
+
+  const initDataSourceDepTarget = (ds: DataSourceSchema) => {
+    depService.addTarget(createDataSourceTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
+  };
+
+  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
+    if (!value) return;
+
+    value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
+
+    codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set('dataSources', value.dataSources);
+
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
+
+    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    });
+
+    dataSourceService.get('dataSources').forEach((ds) => {
+      initDataSourceDepTarget(ds);
+    });
+
+    if (Array.isArray(value.items)) {
+      value.items.forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
+    } else {
+      depService.clear();
+      delete value.dataSourceDeps;
+    }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
+  };
+
+  const collectIdle = (nodes: MNode[], deep: boolean) => {
+    nodes.forEach((node) => {
+      let pageId: Id | undefined;
+
+      if (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      depService.collectIdle([node], { pageId }, deep);
+    });
+  };
+
+  // 新增节点，收集依赖
+  const nodeAddHandler = (nodes: MNode[]) => {
+    collectIdle(nodes, true);
+  };
+
+  // 节点更新，收集依赖
+  const nodeUpdateHandler = (nodes: MNode[]) => {
+    collectIdle(nodes, false);
+  };
+
+  // 节点删除，清除对齐的依赖收集
+  const nodeRemoveHandler = (nodes: MNode[]) => {
+    depService.clear(nodes);
+  };
+
+  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
+  const historyChangeHandler = (page: MPage | MPageFragment) => {
+    depService.collectIdle([page], { pageId: page.id }, true);
+  };
+
+  editorService.on('history-change', historyChangeHandler);
+  editorService.on('root-change', rootChangeHandler);
+  editorService.on('add', nodeAddHandler);
+  editorService.on('remove', nodeRemoveHandler);
+  editorService.on('update', nodeUpdateHandler);
+
+  const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
+    if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK)!.name = codeBlock.name;
+      return;
+    }
+
+    depService.addTarget(createCodeBlockTarget(id, codeBlock));
+  };
+
+  const codeBlockRemoveHandler = (id: Id) => {
+    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
+  };
+
+  codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
+  codeBlockService.on('remove', codeBlockRemoveHandler);
+
+  const dataSourceAddHandler = (config: DataSourceSchema) => {
+    initDataSourceDepTarget(config);
+    getApp()?.dataSourceManager?.addDataSource(config);
+  };
+
+  const dataSourceUpdateHandler = (config: DataSourceSchema) => {
+    const root = editorService.get('root');
+    removeDataSourceTarget(config.id);
+    initDataSourceDepTarget(config);
+
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
+  };
+
+  const removeDataSourceTarget = (id: string) => {
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_COND);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
+  };
+
+  const dataSourceRemoveHandler = (id: string) => {
+    removeDataSourceTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
+  };
+
+  dataSourceService.on('add', dataSourceAddHandler);
+  dataSourceService.on('update', dataSourceUpdateHandler);
+  dataSourceService.on('remove', dataSourceRemoveHandler);
+
+  onBeforeUnmount(() => {
+    depService.off('add-target', targetAddHandler);
+    depService.off('remove-target', targetRemoveHandler);
+    depService.off('collected', collectedHandler);
+
+    editorService.off('history-change', historyChangeHandler);
+    editorService.off('root-change', rootChangeHandler);
+    editorService.off('add', nodeAddHandler);
+    editorService.off('remove', nodeRemoveHandler);
+    editorService.off('update', nodeUpdateHandler);
+
+    codeBlockService.off('addOrUpdate', codeBlockAddOrUpdateHandler);
+    codeBlockService.off('remove', codeBlockRemoveHandler);
+
+    dataSourceService.off('add', dataSourceAddHandler);
+    dataSourceService.off('update', dataSourceUpdateHandler);
+    dataSourceService.off('remove', dataSourceRemoveHandler);
+  });
+};