@tmagic/editor 1.1.6 → 1.2.0-beta.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.0-beta.10",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,14 +45,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.1.6",
-    "@tmagic/form": "1.1.6",
-    "@tmagic/schema": "1.1.6",
-    "@tmagic/stage": "1.1.6",
-    "@tmagic/utils": "1.1.6",
+    "@tmagic/core": "1.2.0-beta.10",
+    "@tmagic/design": "1.2.0-beta.10",
+    "@tmagic/form": "1.2.0-beta.10",
+    "@tmagic/schema": "1.2.0-beta.10",
+    "@tmagic/stage": "1.2.0-beta.10",
+    "@tmagic/utils": "1.2.0-beta.10",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.2.17",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.6",
-    "element-plus": "^2.2.17",
+    "@tmagic/design": "1.2.0-beta.10",
+    "@tmagic/form": "1.2.0-beta.10",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
@@ -79,6 +79,7 @@
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
-    "vue-tsc": "^0.39.4"
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.0.8"
   }
 }

package/src/Editor.vue

@@ -1,12 +1,12 @@
 <template>
-  <framework :code-options="codeOptions">
+  <Framework :code-options="codeOptions">
     <template #nav>
-      <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
+      <slot name="nav" :editorService="editorService"><NavMenu :data="menu"></NavMenu></slot>
     </template>
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar">
+        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu">
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>
@@ -22,33 +22,45 @@
           <template #component-list-item="{ component }">
             <slot name="component-list-item" :component="component"></slot>
           </template>
-        </sidebar>
+
+          <template #code-block-panel-header>
+            <slot name="code-block-panel-header"></slot>
+          </template>
+
+          <template #code-block-panel-tool="{ id, data }">
+            <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+          </template>
+
+          <template #code-block-edit-panel-header="{ id }">
+            <slot name="code-block-edit-panel-header" :id="id"></slot>
+          </template>
+        </Sidebar>
       </slot>
     </template>
 
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
-        <workspace>
+        <Workspace :stage-content-menu="stageContentMenu">
           <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>
+        </Workspace>
       </slot>
     </template>
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <PropsPanel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
-        </props-panel>
+        </PropsPanel>
       </slot>
     </template>
 
     <template #empty><slot name="empty" :editorService="editorService"></slot></template>
-  </framework>
+  </Framework>
 </template>
 
 <script lang="ts">
@@ -65,6 +77,7 @@ import NavMenu from './layouts/NavMenu.vue';
 import PropsPanel from './layouts/PropsPanel.vue';
 import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
+import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
 import editorService from './services/editor';
 import eventsService from './services/events';
@@ -216,7 +229,9 @@ export default defineComponent({
     // 初始值变化，重新设置节点信息
     watch(
       () => props.modelValue,
-      (modelValue) => editorService.set('root', modelValue),
+      (modelValue) => {
+        editorService.set('root', modelValue);
+      },
       {
         immediate: true,
       },
@@ -288,6 +303,7 @@ export default defineComponent({
       uiService.destroy();
       componentListService.destroy();
       storageService.destroy();
+      codeBlockService.destroy();
     });
 
     const services: Services = {
@@ -298,12 +314,11 @@ export default defineComponent({
       editorService,
       uiService,
       storageService,
+      codeBlockService,
     };
 
     provide('services', services);
 
-    provide('layerContentMenu', props.layerContentMenu);
-    provide('stageContentMenu', props.stageContentMenu);
     provide(
       'stageOptions',
       reactive({

package/src/components/ContentMenu.vue

@@ -1,14 +1,14 @@
 <template>
-  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
-      <tool-button
+      <ToolButton
         v-for="(item, index) in menuData"
         event-type="mouseup"
         :data="item"
         :key="index"
         @mouseup="hide"
         @mouseenter="showSubMenu(item)"
-      ></tool-button>
+      ></ToolButton>
     </div>
     <teleport to="body">
       <content-menu
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorContentMenu">
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '../type';

package/src/components/Icon.vue

@@ -1,16 +1,18 @@
 <template>
-  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
-  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+  <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
+  <TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
     ><img :src="icon"
-  /></el-icon>
+  /></TMagicIcon>
   <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
-  <el-icon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></el-icon>
+  <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorIcon">
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
+import { TMagicIcon } from '@tmagic/design';
+
 defineProps<{
   icon?: any;
 }>();

package/src/{layouts → components}/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el">
+  <div ref="el" class="m-editor-layout">
     <template v-if="typeof props.left !== 'undefined'">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -20,10 +20,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorLayout">
 import { onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from './Resizer.vue';
+import Resizer from '../layouts/Resizer.vue';
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
@@ -74,8 +74,13 @@ const center = ref(0);
 
 const changeLeft = (deltaX: number) => {
   if (typeof props.left === 'undefined') return;
-  const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+  let left = Math.max(props.left + deltaX, props.minLeft) || 0;
   emit('update:left', left);
+
+  if (clientWidth - left - (props.right || 0) <= 0) {
+    left = props.left;
+  }
+
   center.value = clientWidth - left - (props.right || 0);
 
   emit('change', {
@@ -87,8 +92,13 @@ const changeLeft = (deltaX: number) => {
 
 const changeRight = (deltaX: number) => {
   if (typeof props.right === 'undefined') return;
-  const right = Math.max(props.right - deltaX, props.minRight) || 0;
+  let right = Math.max(props.right - deltaX, props.minRight) || 0;
   emit('update:right', right);
+
+  if (clientWidth - (props.left || 0) - right <= 0) {
+    right = props.right;
+  }
+
   center.value = clientWidth - (props.left || 0) - right;
 
   emit('change', {

package/src/components/ScrollBar.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollBar">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 

package/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollViewer">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { ScrollViewerEvent } from '../type';
@@ -37,6 +37,10 @@ const props = withDefaults(
     wrapWidth?: number;
     wrapHeight?: number;
     zoom?: number;
+    correctionScrollSize?: {
+      width: number;
+      height: number;
+    };
   }>(),
   {
     width: 0,
@@ -44,6 +48,10 @@ const props = withDefaults(
     wrapWidth: 0,
     wrapHeight: 0,
     zoom: 1,
+    correctionScrollSize: () => ({
+      width: 0,
+      height: 0,
+    }),
   },
 );
 
@@ -69,6 +77,7 @@ onMounted(() => {
     container: container.value,
     target: el.value,
     zoom: props.zoom,
+    correctionScrollSize: props.correctionScrollSize,
   });
 
   scrollViewer.on('scroll', (data: ScrollViewerEvent) => {

package/src/components/ToolButton.vue

@@ -7,41 +7,56 @@
     @mousedown="mousedownHandler(data, $event)"
     @mouseup="mouseupHandler(data, $event)"
   >
-    <el-divider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></el-divider>
+    <TMagicDivider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></TMagicDivider>
     <div v-else-if="data.type === 'text'" class="menu-item-text">{{ data.text }}</div>
 
     <template v-else-if="data.type === 'button'">
-      <el-tooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <el-button size="small" text :disabled="disabled"
-          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></el-button
+      <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
+        <TMagicButton size="small" text :disabled="disabled"
+          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
-      </el-tooltip>
-      <el-button v-else size="small" text :disabled="disabled"
-        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></el-button
+      </TMagicTooltip>
+      <TMagicButton v-else size="small" text :disabled="disabled"
+        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>
 
-    <el-dropdown v-else-if="data.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
+    <TMagicDropdown
+      v-else-if="data.type === 'dropdown'"
+      trigger="click"
+      :disabled="disabled"
+      @command="dropdownHandler"
+    >
       <span class="el-dropdown-link menubar-menu-button">
-        {{ data.text }}<el-icon class="el-icon--right"><ArrowDown></ArrowDown></el-icon>
+        {{ data.text }}<TMagicIcon class="el-icon--right"><ArrowDown></ArrowDown></TMagicIcon>
       </span>
       <template #dropdown>
-        <el-dropdown-menu v-if="data.items && data.items.length">
-          <el-dropdown-item v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
+        <TMagicDropdownMenu v-if="data.items && data.items.length">
+          <TMagicDropdownItem v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
             subItem.text
-          }}</el-dropdown-item>
-        </el-dropdown-menu>
+          }}</TMagicDropdownItem>
+        </TMagicDropdownMenu>
       </template>
-    </el-dropdown>
+    </TMagicDropdown>
 
     <component v-else-if="data.type === 'component'" v-bind="data.props || {}" :is="data.component"></component>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorToolButton">
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
+import {
+  TMagicButton,
+  TMagicDivider,
+  TMagicDropdown,
+  TMagicDropdownItem,
+  TMagicDropdownMenu,
+  TMagicIcon,
+  TMagicTooltip,
+} from '@tmagic/design';
+
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 

package/src/fields/Code.vue

@@ -3,11 +3,12 @@
     :style="`height: ${height}`"
     :init-values="model[name]"
     :language="language"
+    :options="config.options"
     @save="save"
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCode">
 import { computed } from 'vue';
 
 const emit = defineEmits(['change']);
@@ -17,12 +18,14 @@ const props = defineProps<{
   name: string;
   config: {
     language?: string;
+    options?: Object;
+    height?: string;
   };
   prop: string;
 }>();
 
 const language = computed(() => props.config.language || 'javascript');
-const height = computed(() => `${document.body.clientHeight - 168}px`);
+const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
 
 const save = (v: string) => {
   props.model[props.name] = v;

package/src/fields/CodeLink.vue

@@ -2,7 +2,7 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeLink">
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
@@ -12,6 +12,7 @@ const props = defineProps<{
     name: string;
     text?: string;
     formTitle?: string;
+    codeOptions?: Object;
   };
   model: any;
   name: string;
@@ -20,17 +21,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const formConfig = computed(() => ({
-  ...props.config,
-  text: '',
-  type: 'link',
-  form: [
-    {
-      name: props.name,
-      type: 'vs-code',
-    },
-  ],
-}));
+const formConfig = computed(() => {
+  const { codeOptions, ...config } = props.config;
+  return {
+    ...config,
+    text: '',
+    type: 'link',
+    form: [
+      {
+        name: props.name,
+        type: 'vs-code',
+        options: {
+          tabSize: 2,
+          ...(codeOptions || {}),
+        },
+      },
+    ],
+  };
+});
 
 const modelValue = reactive<{ form: Record<string, string> }>({
   form: {

package/src/fields/CodeSelect.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="m-fields-code-select" :key="fieldKey">
+    <TMagicCard shadow="never">
+      <template #header>
+        <m-fields-select
+          :config="selectConfig"
+          :model="model"
+          :prop="prop"
+          :name="name"
+          :size="size"
+          @change="changeHandler"
+        ></m-fields-select>
+      </template>
+      <div class="tool-bar">
+        <TMagicTooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
+          <svg
+            @click="viewHandler"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+            width="15px"
+            height="15px"
+            data-v-65a7fb6c=""
+          >
+            <path
+              fill="currentColor"
+              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
+            ></path>
+          </svg>
+        </TMagicTooltip>
+      </div>
+    </TMagicCard>
+  </div>
+</template>
+
+<script lang="ts" setup name="MEditorCodeSelect">
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
+import { map, xor } from 'lodash-es';
+
+import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
+import { FormState, SelectConfig } from '@tmagic/form';
+
+import type { Services } from '../type';
+import { CodeEditorMode, CodeSelectOp } from '../type';
+const services = inject<Services>('services');
+const form = inject<FormState>('mForm');
+const emit = defineEmits(['change']);
+
+const props = defineProps<{
+  config: {
+    selectConfig?: SelectConfig;
+  };
+  model: any;
+  prop: string;
+  name: string;
+  size: string;
+}>();
+
+const selectConfig = computed(() => {
+  const defaultConfig = {
+    multiple: true,
+    options: async () => {
+      const codeDsl = await services?.codeBlockService.getCodeDsl();
+      if (codeDsl) {
+        return map(codeDsl, (value, key) => ({
+          text: `${value.name}（${key}）`,
+          label: `${value.name}（${key}）`,
+          value: key,
+        }));
+      }
+      return [];
+    },
+  };
+  return {
+    ...defaultConfig,
+    ...props.config.selectConfig,
+  };
+});
+const fieldKey = ref('');
+const multiple = ref(true);
+const lastTagSnapshot = ref<string[]>([]);
+
+watchEffect(async () => {
+  if (!props.model[props.name]) return;
+  const combineNames = await Promise.all(
+    props.model[props.name].map(async (id: string) => {
+      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
+      return name;
+    }),
+  );
+  fieldKey.value = combineNames.join('-');
+});
+
+const changeHandler = async (value: any) => {
+  let codeIds = value;
+  if (typeof value === 'string') {
+    multiple.value = false;
+    codeIds = value ? [value] : [];
+  }
+  await setCombineRelation(codeIds);
+  emit('change', value);
+};
+
+// 同步绑定关系
+const setCombineRelation = async (codeIds: string[]) => {
+  // 组件id
+  const { id = '' } = services?.editorService.get('node') || {};
+
+  // 兼容单选
+  let opFlag = CodeSelectOp.CHANGE;
+  let diffValues = codeIds;
+  if (multiple.value) {
+    // initValues为表单初始值，当表单内容发生变化时，initValues也会更新，可以理解为上一次表单内容的快照
+    lastTagSnapshot.value = form?.initValues[props.name] || [];
+    opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+    diffValues = xor(codeIds, lastTagSnapshot.value) as string[];
+  }
+  // 记录绑定关系
+  await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+};
+
+const viewHandler = async () => {
+  if (props.model[props.name].length === 0) {
+    tMagicMessage.error('请先绑定代码块');
+    return;
+  }
+  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
+  await services?.codeBlockService.setCombineIds(props.model[props.name]);
+  await services?.codeBlockService.setMode(CodeEditorMode.LIST);
+  services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
+};
+</script>

package/src/fields/UISelect.vue

@@ -1,21 +1,22 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
+    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
   </div>
   <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <el-tooltip v-if="val" content="清除">
-      <el-button style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
-    </el-tooltip>
-    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
-    </el-tooltip>
+    <TMagicTooltip v-if="val" content="清除">
+      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+    </TMagicTooltip>
+    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorUISelect">
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
 
 import { Services } from '../type';

package/src/index.ts

@@ -19,6 +19,7 @@ import { App } from 'vue';
 
 import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
+import CodeSelect from './fields/CodeSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -38,12 +39,16 @@ export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
+export { default as codeBlockService } from './services/codeBlock';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as CodeSelect } from './fields/CodeSelect.vue';
+export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.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 Layout } from './components/Layout.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项
@@ -56,11 +61,11 @@ export default {
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
-
     app.component(Editor.name, Editor);
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component(CodeEditor.name, CodeEditor);
+    app.component('magic-code-editor', CodeEditor);
+    app.component('m-fields-code-select', CodeSelect);
   },
 };