@tmagic/editor 1.0.0-beta.1

package/src/components/ToolButton.vue

@@ -0,0 +1,188 @@
+<template>
+  <div v-if="display" class="menu-item">
+    <el-divider v-if="item.type === 'divider'" direction="vertical"></el-divider>
+    <div v-else-if="item.type === 'text'" class="menu-item-text">{{ item.text }}</div>
+
+    <template v-else-if="item.type === 'zoom'">
+      <m-icon :icon="ZoomIn" @click="zoomInHandler"></m-icon>
+      <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
+      <m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon>
+    </template>
+
+    <el-tooltip
+      v-else-if="item.type === 'button'"
+      effect="dark"
+      placement="bottom-start"
+      :content="item.tooltip || item.text"
+    >
+      <el-button size="small" type="text" :disabled="disabled" @click="buttonHandler(item)"
+        ><m-icon :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+      >
+    </el-tooltip>
+
+    <el-dropdown v-else-if="item.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
+      <span class="el-dropdown-link menubar-menu-button">
+        {{ item.text }}<el-icon class="el-icon--right"><arrow-down></arrow-down></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu v-if="item.items && item.items.length">
+          <el-dropdown-item v-for="(subItem, index) in item.items" :key="index" :command="{ item, subItem }">{{
+            subItem.text
+          }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <component v-else-if="item.type === 'component'" v-bind="item.props || {}" :is="item.component"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
+
+export default defineComponent({
+  components: { MIcon, ArrowDown },
+
+  props: {
+    data: {
+      type: [Object, String] as PropType<MenuItem | string>,
+      require: true,
+      default: () => ({
+        type: 'text',
+        display: false,
+      }),
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+    const uiService = services?.uiService;
+
+    const zoomInHandler = () => uiService?.set('zoom', zoom.value + 0.1);
+    const zoomOutHandler = () => uiService?.set('zoom', zoom.value - 0.1);
+
+    const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+    const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+    const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+
+    const item = computed((): MenuButton | MenuComponent => {
+      if (typeof props.data !== 'string') {
+        return props.data;
+      }
+      switch (props.data) {
+        case '/':
+          return {
+            type: 'divider',
+          };
+        case 'zoom':
+          return {
+            type: 'zoom',
+          };
+        case 'delete':
+          return {
+            type: 'button',
+            icon: Delete,
+            tooltip: '刪除',
+            disabled: () => services?.editorService.get('node')?.type === 'page',
+            handler: () => services?.editorService.remove(services?.editorService.get('node')),
+          };
+        case 'undo':
+          return {
+            type: 'button',
+            icon: Back,
+            tooltip: '后退',
+            disabled: () => !services?.historyService.state.canUndo,
+            handler: () => services?.editorService.undo(),
+          };
+        case 'redo':
+          return {
+            type: 'button',
+            icon: Right,
+            tooltip: '前进',
+            disabled: () => !services?.historyService.state.canRedo,
+            handler: () => services?.editorService.redo(),
+          };
+        case 'zoom-in':
+          return {
+            type: 'button',
+            icon: ZoomIn,
+            tooltip: '放大',
+            handler: zoomInHandler,
+          };
+        case 'zoom-out':
+          return {
+            type: 'button',
+            icon: ZoomOut,
+            tooltip: '縮小',
+            handler: zoomOutHandler,
+          };
+        case 'rule':
+          return {
+            type: 'button',
+            icon: ScaleToOriginal,
+            tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+            handler: () => uiService?.set('showRule', !showRule.value),
+          };
+        case 'guides':
+          return {
+            type: 'button',
+            icon: Grid,
+            tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+            handler: () => uiService?.set('showGuides', !showGuides.value),
+          };
+        default:
+          return {
+            type: 'text',
+            text: props.data,
+          };
+      }
+    });
+
+    const disabled = computed(() => {
+      if (typeof item.value === 'string') return false;
+      if (item.value.type === 'component') return false;
+      if (typeof item.value.disabled === 'function') {
+        return item.value.disabled(services);
+      }
+      return item.value.disabled;
+    });
+
+    return {
+      ZoomIn,
+      ZoomOut,
+
+      item,
+      zoom,
+      disabled,
+      display: computed(() => {
+        if (!item.value) return false;
+        if (typeof item.value === 'string') return true;
+        if (typeof item.value.display === 'function') {
+          return item.value.display(services);
+        }
+        return item.value.display ?? true;
+      }),
+
+      zoomInHandler,
+      zoomOutHandler,
+
+      dropdownHandler(command: any) {
+        if (command.item.handler) {
+          command.item.handler(services);
+        }
+      },
+
+      buttonHandler(item: MenuButton | MenuComponent) {
+        if (disabled.value) return;
+        if (typeof (item as MenuButton).handler === 'function') {
+          (item as MenuButton).handler?.(services);
+        }
+      },
+    };
+  },
+});
+</script>

package/src/fields/Code.vue

@@ -0,0 +1,35 @@
+<template>
+  <magic-code-editor
+    :style="`height: ${height}`"
+    :init-values="model[name]"
+    :language="language"
+    @save="save"
+  ></magic-code-editor>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'm-fields-vs-code',
+
+  props: ['model', 'name', 'config', 'prop'],
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const language = computed(() => props.config.language || 'javascript');
+    const height = computed(() => `${document.body.clientHeight - 168}px`);
+
+    return {
+      height,
+      language,
+
+      save(v: string) {
+        props.model[props.name] = v;
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>

package/src/fields/CodeLink.vue

@@ -0,0 +1,81 @@
+<template>
+  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watchEffect } from 'vue';
+import serialize from 'serialize-javascript';
+
+interface CodeLinkConfig {
+  type: 'code-link';
+  name: string;
+  text?: string;
+  formTitle?: string;
+}
+
+export default defineComponent({
+  name: 'm-fields-code-link',
+
+  props: {
+    config: {
+      type: Object as PropType<CodeLinkConfig>,
+    },
+
+    model: {
+      type: Object,
+    },
+
+    name: {
+      type: String,
+    },
+
+    prop: {
+      type: String,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const modelValue = ref<{ form: Record<string, any> }>({
+      form: {},
+    });
+
+    watchEffect(() => {
+      if (!props.model || !props.name) return;
+      modelValue.value.form[props.name] = serialize(props.model[props.name], {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: ');
+    });
+
+    return {
+      modelValue,
+
+      formConfig: computed(() => ({
+        ...props.config,
+        text: '',
+        type: 'link',
+        form: [
+          {
+            name: props.name,
+            type: 'vs-code',
+          },
+        ],
+      })),
+
+      changeHandler(v: Record<string, any>) {
+        if (!props.name || !props.model) return;
+
+        try {
+          // eslint-disable-next-line no-eval
+          props.model[props.name] = eval(`${v[props.name]}`);
+          emit('change', props.model[props.name]);
+        } catch (e) {
+          console.error(e);
+        }
+      },
+    };
+  },
+});
+</script>

package/src/fields/UISelect.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
+    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+  </div>
+  <div class="m-fields-ui-select" v-else @click="startSelect">
+    <i class="el-icon-thumb"></i>
+    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
+    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import { FormState } from '@tmagic/form';
+
+import { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-fields-ui-select',
+
+  props: {
+    labelWidth: String,
+    config: Object,
+    model: Object,
+    prop: {
+      type: String,
+      default() {
+        return '';
+      },
+    },
+    name: String,
+  },
+
+  emits: ['change'],
+
+  setup(props: any, { emit }) {
+    const services = inject<Services>('services');
+    const mForm = inject<FormState>('mForm');
+    const val = computed(() => props.model[props.name]);
+    const uiSelectMode = ref(false);
+
+    const cancelHandler = () => {
+      if (!services?.uiService) return;
+      services.uiService.set<boolean>('uiSelectMode', false);
+      uiSelectMode.value = false;
+      globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+    };
+
+    const clickHandler = ({ detail }: Event & { detail: any }) => {
+      if (detail.id) {
+        props.model[props.name] = detail.id;
+        emit('change', detail.id);
+        mForm?.$emit('field-change', props.prop, detail.id);
+      }
+
+      if (cancelHandler) {
+        cancelHandler();
+      }
+    };
+
+    return {
+      val,
+      uiSelectMode,
+      toName: computed(() => {
+        const config = services?.editorService.getNodeById(val.value);
+        return config?.name || '';
+      }),
+
+      startSelect() {
+        if (!services?.uiService) return;
+        services.uiService.set<boolean>('uiSelectMode', true);
+        uiSelectMode.value = true;
+        globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+      },
+
+      cancelHandler,
+
+      deleteHandler() {
+        if (props.model) {
+          props.model[props.name] = '';
+          emit('change', '');
+          mForm?.$emit('field-change', props.prop, '');
+        }
+      },
+    };
+  },
+});
+</script>
+<style lang="scss">
+.m-fields-ui-select {
+  cursor: pointer;
+  i {
+    margin-right: 3px;
+  }
+  span {
+    color: #2882e0;
+  }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+import { App } from 'vue';
+
+import Code from './fields/Code.vue';
+import CodeLink from './fields/CodeLink.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 { MoveableOptions } from '@tmagic/stage';
+export * from './type';
+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 eventsService } from './services/events';
+export { default as uiService } from './services/ui';
+export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
+export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as PropsPanel } from './layouts/PropsPanel.vue';
+
+const defaultInstallOpt: InstallOptions = {
+  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+};
+
+export default {
+  install: (app: App, opt?: 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, Editor);
+    app.component(uiSelect.name, uiSelect);
+    app.component(CodeLink.name, CodeLink);
+    app.component(Code.name, Code);
+    app.component(CodeEditor.name, CodeEditor);
+  },
+};

package/src/layouts/AddPageBox.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="m-editor-empty-panel">
+    <div class="m-editor-empty-content">
+      <div class="m-editor-empty-button" @click="clickHandler">
+        <div>
+          <el-icon><plus /></el-icon>
+        </div>
+        <p>新增页面</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons';
+
+import { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils';
+
+export default defineComponent({
+  components: { Plus },
+
+  setup() {
+    const services = inject<Services>('services');
+
+    return {
+      clickHandler() {
+        const { editorService } = services || {};
+
+        if (!editorService) return;
+
+        editorService.add({
+          type: 'page',
+          name: generatePageNameByApp(toRaw(editorService.get('root'))),
+        });
+      },
+    };
+  },
+});
+</script>

package/src/layouts/CodeEditor.vue

@@ -0,0 +1,188 @@
+<template>
+  <div ref="codeEditor" class="magic-code-editor"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import serialize from 'serialize-javascript';
+
+import { asyncLoadJs } from '@tmagic/utils';
+
+const initEditor = () => {
+  if ((globalThis as any).monaco) {
+    Promise.resolve((globalThis as any).monaco);
+  }
+
+  return asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
+    (globalThis as any).require.config({
+      paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` },
+    });
+    return new Promise((resolve) => {
+      (globalThis as any).require(['vs/editor/editor.main'], () => {
+        resolve((globalThis as any).monaco);
+      });
+    });
+  });
+};
+
+const toString = (v: any, language: string): string => {
+  let value = '';
+  if (typeof v !== 'string') {
+    value = serialize(v, {
+      space: 2,
+      unsafe: true,
+    }).replace(/"(\w+)":\s/g, '$1: ');
+  } else {
+    value = v;
+  }
+  if (language === 'javascript' && value.startsWith('{') && value.endsWith('}')) {
+    value = `(${value})`;
+  }
+  return value;
+};
+
+export default defineComponent({
+  name: 'magic-code-editor',
+
+  props: {
+    initValues: {
+      type: [String, Object],
+    },
+
+    modifiedValues: {
+      type: [String, Object],
+    },
+
+    type: {
+      type: [String],
+      default: () => '',
+    },
+
+    language: {
+      type: [String],
+      default: () => 'javascript',
+    },
+  },
+
+  emits: ['inited', 'save'],
+
+  setup(props, { emit }) {
+    let vsEditor: any = null;
+    const values = ref('');
+    const loading = ref(false);
+    const codeEditor = ref<HTMLDivElement>();
+
+    const setEditorValue = (v: any, m: any) => {
+      values.value = toString(v, props.language);
+
+      if (props.type === 'diff') {
+        const originalModel = (globalThis as any).monaco.editor.createModel(values.value, 'text/javascript');
+        const modifiedModel = (globalThis as any).monaco.editor.createModel(
+          toString(m, props.language),
+          'text/javascript',
+        );
+
+        return vsEditor.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        });
+      }
+
+      return vsEditor.setValue?.(values.value);
+    };
+
+    const resizeHandler = () => {
+      vsEditor?.layout();
+    };
+
+    const getEditorValue = () => vsEditor.getValue?.() || '';
+
+    const init = async () => {
+      if (!codeEditor.value) return;
+
+      vsEditor = (globalThis as any).monaco.editor[props.type === 'diff' ? 'createDiffEditor' : 'create'](
+        codeEditor.value,
+        {
+          value: values.value,
+          language: props.language,
+          tabSize: 2,
+          theme: 'vs-dark',
+          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+          fontSize: 15,
+          formatOnPaste: true,
+        },
+      );
+
+      setEditorValue(props.initValues, props.modifiedValues);
+
+      loading.value = false;
+
+      emit('inited', vsEditor);
+
+      codeEditor.value.addEventListener('keydown', (e) => {
+        if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+          e.preventDefault();
+          emit('save', getEditorValue());
+        }
+      });
+
+      if (props.type !== 'diff') {
+        vsEditor.onDidBlurEditorWidget(() => {
+          emit('save', getEditorValue());
+        });
+      }
+
+      globalThis.addEventListener('resize', resizeHandler);
+    };
+
+    watch(
+      () => props.initValues,
+      (v, preV) => {
+        if (vsEditor && v !== preV) {
+          setEditorValue(props.initValues, props.modifiedValues);
+        }
+      },
+      {
+        deep: true,
+        immediate: true,
+      },
+    );
+
+    onMounted(async () => {
+      loading.value = true;
+
+      await initEditor();
+      if (!(globalThis as any).monaco) {
+        const interval = setInterval(() => {
+          if ((globalThis as any).monaco) {
+            clearInterval(interval);
+            init();
+          }
+        }, 300);
+      } else {
+        init();
+      }
+    });
+
+    onUnmounted(() => {
+      globalThis.removeEventListener('resize', resizeHandler);
+    });
+
+    return {
+      values,
+      loading,
+      codeEditor,
+
+      getEditor() {
+        return vsEditor;
+      },
+
+      setEditorValue,
+
+      focus() {
+        vsEditor.focus();
+      },
+    };
+  },
+});
+</script>