@tmagic/editor 1.5.3 → 1.5.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.3",
+  "version": "1.5.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.3",
-    "@tmagic/form": "1.5.3",
-    "@tmagic/table": "1.5.3",
-    "@tmagic/stage": "1.5.3",
-    "@tmagic/utils": "1.5.3"
+    "@tmagic/design": "1.5.4",
+    "@tmagic/stage": "1.5.4",
+    "@tmagic/form": "1.5.4",
+    "@tmagic/table": "1.5.4",
+    "@tmagic/utils": "1.5.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -83,7 +83,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.3"
+    "@tmagic/core": "1.5.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -104,14 +104,14 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
+const magicVsEditorRef = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
-  if (!magicVsEditor.value || !formBox.value?.form) {
+  if (!magicVsEditorRef.value || !formBox.value?.form) {
     return;
   }
 
-  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+  formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
 
   difVisible.value = false;
 };

package/src/components/CodeParams.vue

@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = useTemplateRef<InstanceType<typeof MForm>>('form');
+const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {
@@ -61,7 +61,7 @@ const codeParamsConfig = computed(() =>
  */
 const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const value = await form.value?.submitForm(true);
+    const value = await formRef.value?.submitForm(true);
     emit('change', value, eventData);
   } catch (e) {
     error(e);

package/src/components/ContentMenu.vue

@@ -69,9 +69,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = useTemplateRef<HTMLDivElement>('menu');
-const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
-const subMenu = useTemplateRef<any>('subMenu');
+const menuEl = useTemplateRef<HTMLDivElement>('menu');
+const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
@@ -88,13 +88,13 @@ const menuStyle = computed(() => ({
   zIndex: curZIndex.value,
 }));
 
-const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+const contains = (el: HTMLElement) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
 
 const hide = () => {
   if (!visible.value) return;
 
   visible.value = false;
-  subMenu.value?.hide();
+  subMenuRef.value?.hide();
 
   emit('hide');
 };
@@ -121,7 +121,7 @@ const outsideClickHideHandler = (e: MouseEvent) => {
 };
 
 const setPosition = (e: { clientY: number; clientX: number }) => {
-  const menuHeight = menu.value?.clientHeight || 0;
+  const menuHeight = menuEl.value?.clientHeight || 0;
 
   let top = e.clientY;
   if (menuHeight + e.clientY > document.body.clientHeight) {
@@ -158,15 +158,15 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
       return;
     }
 
-    if (menu.value) {
+    if (menuEl.value) {
       // 将子菜单放置在按钮右侧，与按钮齐平
-      let y = menu.value.offsetTop;
-      if (buttons.value?.[index].$el) {
-        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+      let y = menuEl.value.offsetTop;
+      if (buttonRefs.value?.[index].$el) {
+        const rect = buttonRefs.value?.[index].$el.getBoundingClientRect();
         y = rect.top;
       }
-      subMenu.value?.show({
-        clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+      subMenuRef.value?.show({
+        clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
         clientY: y,
       });
     }
@@ -190,7 +190,7 @@ onBeforeUnmount(() => {
 });
 
 defineExpose({
-  menu,
+  menu: menuEl,
   menuPosition,
   hide,
   show,

package/src/components/FloatingBox.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body" v-if="visible">
     <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
-      <div ref="titleEl" class="m-editor-float-box-title">
+      <div ref="title" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
         </slot>
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = useTemplateRef<HTMLDivElement>('target');
-const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
+const targetEl = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('title');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
@@ -59,8 +59,8 @@ const bodyHeight = computed(() => {
     return height.value - titleHeight.value;
   }
 
-  if (target.value) {
-    return target.value.clientHeight - titleHeight.value;
+  if (targetEl.value) {
+    return targetEl.value.clientHeight - titleHeight.value;
   }
 
   return 'auto';
@@ -87,7 +87,7 @@ let moveable: VanillaMoveable | null = null;
 const initMoveable = () => {
   moveable = new VanillaMoveable(globalThis.document.body, {
     className: 'm-editor-floating-box-moveable',
-    target: target.value,
+    target: targetEl.value,
     draggable: true,
     resizable: true,
     edge: true,
@@ -126,7 +126,7 @@ watch(
       await nextTick();
       curZIndex.value = zIndex.nextZIndex();
 
-      const targetRect = target.value?.getBoundingClientRect();
+      const targetRect = targetEl.value?.getBoundingClientRect();
       if (targetRect) {
         width.value = targetRect.width;
         height.value = targetRect.height;
@@ -168,11 +168,11 @@ const nextZIndex = () => {
   curZIndex.value = zIndex.nextZIndex();
 };
 
-provide('parentFloating', target);
+provide('parentFloating', targetEl);
 
 defineExpose({
   bodyHeight,
-  target,
+  target: targetEl,
   titleEl,
 });
 </script>

package/src/components/Resizer.vue

@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = useTemplateRef<HTMLSpanElement>('target');
-const { isDragging } = useGetSo(target, emit);
+const targetEl = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(targetEl, emit);
 </script>

package/src/components/ScrollBar.vue

@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = useTemplateRef<HTMLDivElement>('bar');
-const thumb = useTemplateRef<HTMLDivElement>('thumb');
+const barEl = useTemplateRef<HTMLDivElement>('bar');
+const thumbEl = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
@@ -35,9 +35,8 @@ const thumbStyle = computed(() => ({
 let gesto: Gesto;
 
 onMounted(() => {
-  if (!thumb.value) return;
-  const thumbEl = thumb.value;
-  gesto = new Gesto(thumbEl, {
+  if (!thumbEl.value) return;
+  gesto = new Gesto(thumbEl.value, {
     container: window,
   });
 
@@ -50,12 +49,12 @@ onMounted(() => {
       scrollBy(getDelta(e));
     });
 
-  bar.value?.addEventListener('wheel', wheelHandler, false);
+  barEl.value?.addEventListener('wheel', wheelHandler, false);
 });
 
 onBeforeUnmount(() => {
   if (gesto) gesto.off();
-  bar.value?.removeEventListener('wheel', wheelHandler, false);
+  barEl.value?.removeEventListener('wheel', wheelHandler, false);
 });
 
 const wheelHandler = (e: WheelEvent) => {

package/src/components/ScrollViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-scroll-viewer-container" ref="container">
-    <div ref="el" :style="style">
+    <div ref="target" :style="style">
       <slot></slot>
     </div>
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = useTemplateRef<HTMLDivElement>('container');
-const el = useTemplateRef<HTMLDivElement>('el');
+const containerEl = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('target');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -80,9 +80,9 @@ const scrollHeight = ref(0);
 let scrollViewer: ScrollViewer;
 
 onMounted(() => {
-  if (!container.value || !el.value) return;
+  if (!containerEl.value || !el.value) return;
   scrollViewer = new ScrollViewer({
-    container: container.value,
+    container: containerEl.value,
     target: el.value,
     zoom: props.zoom,
     correctionScrollSize: props.correctionScrollSize,
@@ -123,6 +123,6 @@ const hScrollHandler = (delta: number) => {
 };
 
 defineExpose({
-  container,
+  container: containerEl,
 });
 </script>

package/src/components/SplitView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
+  <div ref="target" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = useTemplateRef<HTMLElement>('el');
+const el = useTemplateRef<HTMLElement>('target');
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');

package/src/fields/DataSourceInput.vue

@@ -83,12 +83,12 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
+const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
-const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
@@ -112,7 +112,7 @@ const mouseupHandler = async () => {
 
   isFocused.value = true;
   await nextTick();
-  autocomplete.value?.focus();
+  autocompleteRef.value?.focus();
 
   if (focusOffset && input.value) {
     input.value.setSelectionRange(anchorOffset, focusOffset);

package/src/fields/DataSourceMethods.vue

@@ -51,7 +51,7 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const codeConfig = ref<CodeBlockContent>();
-const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
 
@@ -94,7 +94,7 @@ const methodColumns: ColumnConfig[] = [
           editIndex = index;
 
           nextTick(() => {
-            codeBlockEditor.value?.show();
+            codeBlockEditorRef.value?.show();
           });
         },
       },
@@ -121,7 +121,7 @@ const createCodeHandler = () => {
   editIndex = -1;
 
   nextTick(() => {
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   });
 };
 
@@ -157,6 +157,6 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
   editIndex = -1;
   codeConfig.value = void 0;
 
-  codeBlockEditor.value?.hide();
+  codeBlockEditorRef.value?.hide();
 };
 </script>

package/src/hooks/use-code-block-edit.ts

@@ -10,7 +10,7 @@ import type { CodeBlockService } from '@editor/services/codeBlock';
 export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
   const codeConfig = ref<CodeBlockContent>();
   const codeId = ref<string>();
-  const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+  const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {
@@ -29,7 +29,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await nextTick();
 
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 编辑代码块
@@ -54,7 +54,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
 
   // 删除代码块
@@ -67,13 +67,13 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await codeBlockService?.setCodeDslById(codeId.value, values);
 
-    codeBlockEditor.value?.hide();
+    codeBlockEditorRef.value?.hide();
   };
 
   return {
     codeId,
     codeConfig,
-    codeBlockEditor,
+    codeBlockEditor: codeBlockEditorRef,
 
     createCodeBlock,
     editCode,

package/src/initService.ts

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type TMagicCore from '@tmagic/core';
 import type {
   CodeBlockContent,
   DataSourceSchema,
@@ -263,67 +264,46 @@ export const initServiceEvents = (
 
       if (!node) return;
 
-      collectIdle([node], true).then(() => {
-        afterUpdateNodes([node]);
-      });
+      collectIdle([node], true);
+      updateStage([node]);
     });
   });
 
-  const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
-
-  const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => {
-    const root = editorService.get('root');
-    const app = getApp();
-
-    if (root && app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
+  const getApp = () => {
+    const renderer = stage.value?.renderer;
+    if (!renderer) {
+      return undefined;
     }
 
-    if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    if (renderer.runtime) {
+      return renderer.runtime.getApp?.();
     }
 
-    if (!root || !stage.value) return;
+    return new Promise<TMagicCore | undefined>((resolve) => {
+      const timeout = globalThis.setTimeout(() => {
+        resolve(undefined);
+      }, 10000);
 
-    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.value?.update({
-            config: cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: cloneDeep(root),
-          });
+      renderer.on('runtime-ready', () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+        }
+        resolve(renderer.runtime?.getApp?.());
       });
     });
   };
 
-  const afterUpdateNodes = (nodes: MNode[]) => {
+  const updateDataSourceSchema = async () => {
     const root = editorService.get('root');
-    if (!root) return;
-    for (const node of nodes) {
-      stage.value?.update({
-        config: cloneDeep(node),
-        parentId: editorService.getParentById(node.id)?.id,
-        root: cloneDeep(root),
-      });
+    const app = await getApp();
+
+    if (root && app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    if (root?.dataSources) {
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
 
@@ -360,18 +340,72 @@ export const initServiceEvents = (
     }
   };
 
-  const depCollectedHandler = () => {
+  /**
+   * 修改dsl后会执行依赖收集并调用此方法
+   * 所以这个方法是会被执行两次，当时updateStage应当时一次，所以通过inDeps参数来区分调用时机
+   * inDeps为true是则更新依赖收集到的节点，否则则更新没有依赖的节点
+   * @param nodes 需要更新的节点
+   * @param inDeps 是否依赖收集完成事件中执行的
+   * @returns
+   */
+  const updateStage = (nodes: MNode[], inDeps = false) => {
     const root = editorService.get('root');
     if (!root) return;
-    const app = getApp();
+
+    const update = (node: MNode) =>
+      stage.value?.update({
+        config: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root),
+      });
+
+    nodes.forEach((node) => {
+      const inDepsNodeId: Id[] = [];
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        Object.keys(dep).forEach((id) => {
+          inDepsNodeId.push(id);
+        });
+      });
+
+      if (inDeps) {
+        if (inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      } else {
+        if (!inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      }
+    });
+  };
+
+  const dsDepCollectedHandler = async (nodes: MNode[], deep: boolean) => {
+    const root = editorService.get('root');
+    if (!root) return;
+    const app = await getApp();
     if (app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
     }
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode<MNode>(
+          node,
+          (node) => {
+            updateStage([node], true);
+          },
+          [],
+          true,
+        );
+      });
+    } else {
+      updateStage(nodes, true);
+    }
   };
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('collected', depCollectedHandler);
+  depService.on('ds-collected', dsDepCollectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -396,9 +430,9 @@ export const initServiceEvents = (
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true).then(() => {
-      afterUpdateNodes(nodes);
-    });
+    collectIdle(nodes, true);
+
+    updateStage(nodes);
   };
 
   // 节点更新，收集依赖
@@ -430,11 +464,10 @@ export const initServiceEvents = (
     });
 
     if (needRecollectNodes.length) {
-      collectIdle(needRecollectNodes, true).then(() => {
-        afterUpdateNodes(needRecollectNodes);
-      });
+      collectIdle(needRecollectNodes, true);
+      updateStage(needRecollectNodes);
     } else if (normalNodes.length) {
-      afterUpdateNodes(normalNodes);
+      updateStage(normalNodes);
     }
   };
 
@@ -446,7 +479,7 @@ export const initServiceEvents = (
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
     collectIdle([page], true).then(() => {
-      updateDataSourceSchema([page], true);
+      updateDataSourceSchema();
     });
   };
 
@@ -472,12 +505,16 @@ export const initServiceEvents = (
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
   codeBlockService.on('remove', codeBlockRemoveHandler);
 
-  const dataSourceAddHandler = (config: DataSourceSchema) => {
+  const dataSourceAddHandler = async (config: DataSourceSchema) => {
     initDataSourceDepTarget(config);
-    getApp()?.dataSourceManager?.addDataSource(config);
+    const app = await getApp();
+    app?.dataSourceManager?.addDataSource(config);
   };
 
-  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
+  const dataSourceUpdateHandler = async (
+    config: DataSourceSchema,
+    { changeRecords }: { changeRecords: ChangeRecord[] },
+  ) => {
     let needRecollectDep = false;
     for (const changeRecord of changeRecords) {
       if (!changeRecord.propPath) {
@@ -506,11 +543,12 @@ export const initServiceEvents = (
         initDataSourceDepTarget(config);
 
         collectIdle(root.items, true).then(() => {
-          updateDataSourceSchema(root?.items || [], true);
+          updateDataSourceSchema();
         });
       }
     } else if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      const app = await getApp();
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
 
@@ -525,7 +563,7 @@ export const initServiceEvents = (
     const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
     const nodes = getNodes(nodeIds, root?.items);
     collectIdle(nodes, false).then(() => {
-      updateDataSourceSchema(nodes, false);
+      updateDataSourceSchema();
     });
 
     removeDataSourceTarget(id);
@@ -538,7 +576,7 @@ export const initServiceEvents = (
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('collected', depCollectedHandler);
+    depService.off('ds-collected', dsDepCollectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);