@tmagic/editor 1.3.6 → 1.3.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.6",
+  "version": "1.3.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -23,11 +23,6 @@
     "./*": "./*"
   },
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "clear:type": "rimraf ./types"
-  },
   "engines": {
     "node": ">=18"
   },
@@ -47,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.6",
-    "@tmagic/dep": "1.3.6",
-    "@tmagic/design": "1.3.6",
-    "@tmagic/form": "1.3.6",
-    "@tmagic/schema": "1.3.6",
-    "@tmagic/stage": "1.3.6",
-    "@tmagic/table": "1.3.6",
-    "@tmagic/utils": "1.3.6",
+    "@tmagic/core": "1.3.8",
+    "@tmagic/dep": "1.3.8",
+    "@tmagic/design": "1.3.8",
+    "@tmagic/form": "1.3.8",
+    "@tmagic/schema": "1.3.8",
+    "@tmagic/stage": "1.3.8",
+    "@tmagic/table": "1.3.8",
+    "@tmagic/utils": "1.3.8",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -67,8 +62,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.6",
-    "@tmagic/form": "1.3.6",
+    "@tmagic/design": "1.3.8",
+    "@tmagic/form": "1.3.8",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },
@@ -86,5 +81,10 @@
     "typescript": "^5.0.4",
     "vite": "^5.0.7",
     "vue-tsc": "^1.8.25"
+  },
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   }
-}
+}

package/src/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <Framework>
+  <Framework :disabled-page-fragment="disabledPageFragment">
     <template #header>
       <slot name="header"></slot>
     </template>
@@ -16,7 +16,7 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -58,11 +58,9 @@
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <Workspace :stage-content-menu="stageContentMenu">
+        <Workspace :stage-content-menu="stageContentMenu" :custom-content-menu="customContentMenu">
           <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
-          <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
-          <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
         </Workspace>
       </slot>
     </template>
@@ -72,6 +70,8 @@
         <PropsPanel
           :extend-state="extendFormState"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+          @form-error="(e: any) => $emit('props-form-error', e)"
+          @submit-error="(e: any) => $emit('props-submit-error', e)"
         >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
@@ -89,6 +89,10 @@
     <template #footer>
       <slot name="footer"></slot>
     </template>
+
+    <template #page-bar><slot name="page-bar"></slot></template>
+    <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+    <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
   </Framework>
 </template>
 
@@ -135,6 +139,8 @@ defineOptions({
 const emit = defineEmits<{
   'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
   'update:modelValue': [value: MApp | null];
+  'props-form-error': [e: any];
+  'props-submit-error': [e: any];
 }>();
 
 const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
@@ -155,8 +161,8 @@ const services: Services = {
 
 initServiceEvents(props, emit, services);
 initServiceState(props, services);
-keybindingService.registe(keybindingConfig);
-keybindingService.registeEl('global');
+keybindingService.register(keybindingConfig);
+keybindingService.registerEl('global');
 
 provide('services', services);
 
@@ -176,6 +182,8 @@ provide(
     containerHighlightType: props.containerHighlightType,
     disabledDragStart: props.disabledDragStart,
     renderType: props.renderType,
+    guidesOptions: props.guidesOptions,
+    disabledMultiSelect: props.disabledMultiSelect,
   }),
 );
 

package/src/components/CodeBlockEditor.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onUnmounted, ref } from 'vue';
+import { computed, inject, onBeforeUnmount, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
@@ -85,7 +85,7 @@ const windowReizehandler = () => {
 
 globalThis.addEventListener('resize', windowReizehandler);
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   globalThis.removeEventListener('resize', windowReizehandler);
 });
 

package/src/components/ContentMenu.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -99,7 +99,7 @@ const clickHandler = () => {
   hide();
 };
 
-const outsideClickhideHandler = (e: MouseEvent) => {
+const outsideClickHideHandler = (e: MouseEvent) => {
   if (!props.autoHide) return;
 
   const target = e.target as HTMLElement | undefined;
@@ -173,13 +173,13 @@ const mouseenterHandler = () => {
 onMounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.addEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (props.isSubMenu) return;
 
-  globalThis.removeEventListener('mousedown', outsideClickhideHandler, true);
+  globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);
 });
 
 defineExpose({

package/src/components/ScrollBar.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -53,7 +53,7 @@ onMounted(() => {
   bar.value?.addEventListener('wheel', wheelHandler, false);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (gesto) gesto.off();
   bar.value?.removeEventListener('wheel', wheelHandler, false);
 });

package/src/components/ScrollViewer.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -94,7 +94,7 @@ onMounted(() => {
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   scrollViewer.destroy();
 });
 

package/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -110,7 +110,7 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizerObserver.disconnect();
 });
 

package/src/components/Tree.vue

@@ -15,7 +15,7 @@
         </template>
       </TreeNode>
     </template>
-    <div v-else>
+    <div v-else class="m-editor-tree-empty">
       <p>{{ emptyText }}</p>
     </div>
   </div>

package/src/components/TreeNode.vue

@@ -18,7 +18,7 @@
     >
       <MIcon
         class="expand-icon"
-        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
+        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
         :icon="expanded ? ArrowDown : ArrowRight"
         @click="expandHandler"
       ></MIcon>
@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <div v-if="hasChilren && expanded" class="m-editor-tree-node-children">
+    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
       <TreeNode
         v-for="item in data.items"
         :key="item.id"
@@ -114,7 +114,7 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChilren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
 
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);

package/src/editorProps.ts

@@ -1,14 +1,15 @@
 import type { EventOption } from '@tmagic/core';
-import { CustomTargetOptions } from '@tmagic/dep';
+import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
-  CustomizeMoveableOptionsCallbackConfig,
-  MoveableOptions,
+  type CustomizeMoveableOptionsCallbackConfig,
+  type GuidesOptions,
+  type MoveableOptions,
   RenderType,
-  UpdateDragEl,
+  type UpdateDragEl,
 } from '@tmagic/stage';
 
 import type {
@@ -71,6 +72,13 @@ export interface EditorProps {
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
   collectorOptions?: CustomTargetOptions;
+  /** 标尺配置 */
+  guidesOptions?: Partial<GuidesOptions>;
+  /** 禁止多选 */
+  disabledMultiSelect?: boolean;
+  /** 禁用页面片 */
+  disabledPageFragment?: boolean;
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }
 
 export const defaultEditorProps = {
@@ -91,4 +99,6 @@ export const defaultEditorProps = {
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
   renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
+  disabledPageFragment: false,
 };

package/src/fields/PageFragmentSelect.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="m-fields-page-fragment-select">
+    <div class="page-fragment-select-container">
+      <!-- 页面片下拉框 -->
+      <m-form-container
+        class="select"
+        :config="selectConfig"
+        :model="model"
+        :size="size"
+        @change="changeHandler"
+      ></m-form-container>
+      <!-- 编辑按钮 -->
+      <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+import { FieldProps } from '@tmagic/form';
+import { Id, NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { PageFragmentSelectConfig, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorPageFragmentSelect',
+});
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
+  disabled: false,
+});
+const pageList = computed(() =>
+  services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
+);
+
+const selectConfig = {
+  type: 'select',
+  name: props.name,
+  options: () => {
+    if (pageList.value) {
+      return pageList.value.map((item) => ({
+        text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        value: item.id,
+      }));
+    }
+    return [];
+  },
+};
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
+};
+
+const editPageFragment = (id: Id) => {
+  services?.editorService.select(id);
+};
+</script>

package/src/hooks/use-getso.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
 export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
@@ -24,7 +24,7 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
       });
   });
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     getso?.unset();
     isDraging.value = false;
   });

package/src/hooks/use-stage.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -44,13 +44,30 @@ export const useStage = (stageOptions: StageOptions) => {
     },
     moveableOptions: stageOptions.moveableOptions,
     updateDragEl: stageOptions.updateDragEl,
+    guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect,
   });
 
+  watch(
+    () => editorService.get('disabledMultiSelect'),
+    (disabledMultiSelect) => {
+      if (disabledMultiSelect) {
+        stage.disableMultiSelect();
+      } else {
+        stage.enableMultiSelect();
+      }
+    },
+  );
+
   stage.mask.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
 
+  stage.on('page-el-update', () => {
+    editorService.set('stageLoading', false);
+  });
+
   stage.on('select', (el: HTMLElement) => {
     if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);

package/src/index.ts

@@ -30,6 +30,7 @@ import DataSourceMocks from './fields/DataSourceMocks.vue';
 import DataSourceSelect from './fields/DataSourceSelect.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';
@@ -79,6 +80,7 @@ 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 PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -108,5 +110,6 @@ export default {
     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);
   },
 };

package/src/initService.ts

@@ -1,4 +1,4 @@
-import { onUnmounted, reactive, toRaw, watch } from 'vue';
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
@@ -11,7 +11,7 @@ import {
   DepTargetType,
   Target,
 } from '@tmagic/dep';
-import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { getNodes } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
@@ -47,6 +47,16 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.disabledMultiSelect,
+    (disabledMultiSelect) => {
+      editorService.set('disabledMultiSelect', disabledMultiSelect || false);
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.componentGroupList,
     (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
@@ -165,7 +175,7 @@ export const initServiceState = (
     },
   );
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
     propsService.resetState();
@@ -340,7 +350,7 @@ export const initServiceEvents = (
   };
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
-  const historyChangeHandler = (page: MPage) => {
+  const historyChangeHandler = (page: MPage | MPageFragment) => {
     depService.collect([page], true);
   };
 
@@ -405,7 +415,7 @@ export const initServiceEvents = (
     depService.addTarget(createRelatedCompTarget(props.collectorOptions));
   }
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
     depService.off('dep-update', depUpdateHandler);

package/src/layouts/AddPageBox.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="m-editor-empty-panel">
     <div class="m-editor-empty-content">
-      <div class="m-editor-empty-button" @click="clickHandler">
+      <div class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE)">
         <div>
           <MIcon :icon="Plus"></MIcon>
         </div>
         <p>新增页面</p>
       </div>
+
+      <div v-if="!disabledPageFragment" class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE_FRAGMENT)">
+        <div>
+          <MIcon :icon="Plus"></MIcon>
+        </div>
+        <p>新增页面片</p>
+      </div>
     </div>
   </div>
 </template>
@@ -25,9 +32,13 @@ defineOptions({
   name: 'MEditorAddPageBox',
 });
 
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
 const services = inject<Services>('services');
 
-const clickHandler = () => {
+const clickHandler = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
   const { editorService } = services || {};
 
   if (!editorService) return;
@@ -36,8 +47,9 @@ const clickHandler = () => {
   if (!root) throw new Error('root 不能为空');
 
   editorService.add({
-    type: NodeType.PAGE,
-    name: generatePageNameByApp(root),
+    type,
+    name: generatePageNameByApp(root, type),
+    items: [],
   });
 };
 </script>

package/src/layouts/CodeEditor.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
@@ -188,7 +188,7 @@ onMounted(async () => {
   init();
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 

package/src/layouts/Framework.vue

@@ -11,6 +11,8 @@
     </slot>
 
     <SplitView
+      v-loading="stageLoading"
+      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -29,13 +31,20 @@
       </template>
 
       <template #center>
-        <slot v-if="pageLength > 0" name="workspace"></slot>
+        <slot v-if="page" name="workspace"></slot>
         <slot v-else name="empty">
-          <AddPageBox></AddPageBox>
+          <AddPageBox :disabled-page-fragment="disabledPageFragment"></AddPageBox>
+        </slot>
+
+        <slot name="page-bar">
+          <PageBar :disabled-page-fragment="disabledPageFragment">
+            <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+            <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+          </PageBar>
         </slot>
       </template>
 
-      <template v-if="pageLength > 0" #right>
+      <template v-if="page" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -56,6 +65,7 @@ import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
+import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
 import CodeEditor from './CodeEditor.vue';
 
@@ -65,6 +75,10 @@ defineOptions({
   name: 'MEditorFramework',
 });
 
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
@@ -75,8 +89,10 @@ const content = ref<HTMLDivElement>();
 const splitView = ref<InstanceType<typeof SplitView>>();
 
 const root = computed(() => editorService?.get('root'));
+const page = computed(() => editorService?.get('page'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';