@tmagic/editor 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/types/src/Editor.vue.d.ts

@@ -63,6 +63,10 @@ declare const _default: DefineComponent<{
     stageRect: {
         type: PropType<StageRect>;
     };
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
@@ -122,11 +126,16 @@ declare const _default: DefineComponent<{
     stageRect: {
         type: PropType<StageRect>;
     };
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
     propsConfigs: Record<string, FormConfig>;

package/dist/types/src/layouts/Framework.vue.d.ts

@@ -1,11 +1,23 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import type { MApp } from '@tmagic/schema';
 import { GetColumnWidth } from '../type';
-declare const _default: DefineComponent<{}, {
+declare const _default: DefineComponent<{
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, {
     root: ComputedRef<MApp | undefined>;
     pageLength: ComputedRef<number>;
     showSrc: ComputedRef<boolean | undefined>;
     columnWidth: ComputedRef<GetColumnWidth | undefined>;
     saveCode(value: string): void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    codeOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>>, {
+    codeOptions: Record<string, any>;
+}>;
 export default _default;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -43,25 +43,32 @@
     "typescript"
   ],
   "dependencies": {
+    "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.1",
-    "@tmagic/form": "^1.0.0-rc.1",
-    "@tmagic/schema": "^1.0.0-rc.1",
-    "@tmagic/stage": "^1.0.0-rc.1",
-    "@tmagic/utils": "^1.0.0-rc.1",
+    "@tmagic/core": "^1.0.0-rc.2",
+    "@tmagic/form": "^1.0.0-rc.2",
+    "@tmagic/schema": "^1.0.0-rc.2",
+    "@tmagic/stage": "^1.0.0-rc.2",
+    "@tmagic/utils": "^1.0.0-rc.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
     "events": "^3.3.0",
+    "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },
+  "peerDependencies": {
+    "@tmagic/form": "^1.0.0-rc.1",
+    "element-plus": "^2.2.0",
+    "vue": "^3.2.0"
+  },
   "devDependencies": {
     "@types/events": "^3.0.0",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.5.1",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
@@ -70,6 +77,7 @@
     "@vue/compiler-sfc": "^3.2.0",
     "@vue/test-utils": "^2.0.0-rc.20",
     "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "babel-jest": "^27.0.6",
     "jest": "^27.5.1",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
@@ -80,5 +88,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
+  "gitHead": "3e309780ed33640ab3fc986a93dd0e7b15c167e5"
 }

package/src/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <framework>
+  <framework :code-options="codeOptions">
     <template #nav>
       <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
     </template>
@@ -136,6 +136,11 @@ export default defineComponent({
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
+
+    codeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],

package/src/layouts/CodeEditor.vue

@@ -94,11 +94,7 @@ export default defineComponent({
       const options = {
         value: values.value,
         language: props.language,
-        tabSize: 2,
         theme: 'vs-dark',
-        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-        fontSize: 14,
-        formatOnPaste: true,
         ...props.options,
       };
 
@@ -117,6 +113,7 @@ export default defineComponent({
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
+          e.stopPropagation();
           emit('save', getEditorValue());
         }
       });

package/src/layouts/Framework.vue

@@ -2,7 +2,13 @@
   <div class="m-editor">
     <slot name="nav" class="m-editor-nav-menu"></slot>
 
-    <magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor>
+    <magic-code-editor
+      v-if="showSrc"
+      class="m-editor-content"
+      :init-values="root"
+      :options="codeOptions"
+      @save="saveCode"
+    ></magic-code-editor>
 
     <div class="m-editor-content" v-else>
       <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
@@ -48,6 +54,13 @@ export default defineComponent({
     Resizer,
   },
 
+  props: {
+    codeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
   setup() {
     const { editorService, uiService } = inject<Services>('services') || {};
 

package/src/layouts/PropsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <m-form
     :class="`m-editor-props-panel ${propsPanelSize}`"
-    popper-class="m-editor-props-panel-popper"
+    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
     ref="configForm"
     :size="propsPanelSize"
     :init-values="values"

package/src/layouts/workspace/Stage.vue

@@ -209,6 +209,7 @@ export default defineComponent({
           const { scrollTop, scrollLeft } = stage.mask;
           if (layout === Layout.ABSOLUTE) {
             config.style = {
+              ...(config.style || {}),
               position: 'absolute',
               top: e.clientY - containerRect.top + scrollTop,
               left: e.clientX - containerRect.left + scrollLeft,

package/src/layouts/workspace/Workspace.vue

@@ -65,8 +65,13 @@ export default defineComponent({
       workspace.value?.focus();
     };
 
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+
     onMounted(() => {
       workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
 
       keycon = new KeyController(workspace.value);
 
@@ -75,85 +80,84 @@ export default defineComponent({
       const ctrl = isMac ? 'meta' : 'ctrl';
 
       keycon
+        .keydown((e) => {
+          console.log(e);
+          e.inputEvent.preventDefault();
+        })
         .keyup('delete', (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
           services?.editorService.remove(node.value);
         })
-        .keydown([ctrl, 'c'], (e) => {
+        .keyup('backspace', (e) => {
           e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'c'], () => {
           node.value && services?.editorService.copy(node.value);
         })
-        .keydown([ctrl, 'v'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'v'], () => {
           node.value && services?.editorService.paste();
         })
-        .keydown([ctrl, 'x'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'x'], () => {
           if (!node.value || isPage(node.value)) return;
           services?.editorService.copy(node.value);
           services?.editorService.remove(node.value);
         })
-        .keydown([ctrl, 'z'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'z'], () => {
           services?.editorService.undo();
         })
-        .keydown([ctrl, 'shift', 'z'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'shift', 'z'], () => {
           services?.editorService.redo();
         })
-        .keydown('up', (e) => {
-          e.inputEvent.preventDefault();
+        .keydown('up', () => {
           services?.editorService.move(0, -1);
         })
-        .keydown('down', (e) => {
-          e.inputEvent.preventDefault();
+        .keydown('down', () => {
           services?.editorService.move(0, 1);
         })
-        .keydown('left', (e) => {
-          e.inputEvent.preventDefault();
+        .keydown('left', () => {
           services?.editorService.move(-1, 0);
         })
-        .keydown('right', (e) => {
-          e.inputEvent.preventDefault();
+        .keydown('right', () => {
           services?.editorService.move(1, 0);
         })
-        .keydown([ctrl, 'up'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'up'], () => {
           services?.editorService.move(0, -10);
         })
-        .keydown([ctrl, 'down'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'down'], () => {
           services?.editorService.move(0, 10);
         })
-        .keydown([ctrl, 'left'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'left'], () => {
           services?.editorService.move(-10, 0);
         })
-        .keydown([ctrl, 'right'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'right'], () => {
           services?.editorService.move(10, 0);
         })
-        .keydown('tab', (e) => {
-          e.inputEvent.preventDefault();
+        .keydown('tab', () => {
           services?.editorService.selectNextNode();
         })
-        .keydown([ctrl, 'tab'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'tab'], () => {
           services?.editorService.selectNextPage();
         })
-        .keydown([ctrl, '='], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, '='], () => {
           services?.uiService.zoom(0.1);
         })
-        .keydown([ctrl, '-'], (e) => {
-          e.inputEvent.preventDefault();
+        .keydown([ctrl, 'numpadplus'], () => {
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], () => {
+          services?.uiService.zoom(-0.1);
+        })
+        .keydown([ctrl, 'numpad-'], () => {
           services?.uiService.zoom(-0.1);
         });
     });
 
     onUnmounted(() => {
       workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
       keycon.destroy();
     });
 

package/src/theme/props-panel.scss

@@ -23,9 +23,11 @@
 }
 
 .m-editor-props-panel-popper {
-  span,
-  a,
-  p {
-    font-size: 12px;
+  &.small {
+    span,
+    a,
+    p {
+      font-size: 12px;
+    }
   }
 }

package/src/utils/polyfills.ts

@@ -1,22 +1,8 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 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.
- */
-
 // serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
-if (typeof (window as any).global === 'undefined') {
+if (typeof global === 'undefined') {
   (window as any).global = window;
 }
+
+if (typeof globalThis === 'undefined') {
+  (window as any).globalThis = window;
+}