vue-admin-core/es/components/msg-editor/src/index.mjs

A Component Library for Vue 3

import { defineComponent, ref, shallowRef, computed, watchEffect, onMounted, h } from 'vue';
import { coreCreateEditor } from '@wangeditor/core';
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from 'element-plus';
import withVariable from './plugin.mjs';
import withParagraph from './paragraph/plugin.mjs';
import Popper from './Popper.mjs';
import { getPrefixCls } from '../../../utils/const.mjs';
import emitter from './mitt.mjs';
import { nodeToText, textToNode, textToHtml } from './utils.mjs';
import { isEmpty } from 'lodash-es';
import { onClickOutside } from '@vueuse/core';

const prefixCls = getPrefixCls("msg-editor");
var MsgEditor = defineComponent({
  name: "VacMsgEditor",
  props: {
    /**
     * 编辑器内容
     */
    modelValue: {
      type: String,
      default: ""
    },
    /**
     * 变量下拉选项数据
     */
    options: {
      type: Array,
      default: () => []
    },
    /**
     * 占位符
     */
    placeholder: {
      type: String
    },
    /** 是否禁用 */
    disabled: {
      type: Boolean
    },
    readOnly: {
      type: Boolean
    },
    /**
     * 变量前缀
     */
    prefix: {
      type: String,
      default: "\\$\\{"
    },
    /**
     * 变量后缀
     */
    suffix: {
      type: String,
      default: "\\}"
    }
  },
  emits: [
    CHANGE_EVENT,
    UPDATE_MODEL_EVENT,
    /**
     * 创建完成事件
     * @params editor
     */
    "created",
    /**
     * 销毁事件
     * @params editor
     */
    "destroyed",
    "maxLength",
    /**
     * 获取焦点
     * @params editor
     */
    "focus",
    /**
     * 失去焦点
     * @params editor
     */
    "blur",
    "customAlert",
    /**
     * 自定义粘贴
     * @params editor, event
     * @return res
     */
    "customPaste"
  ],
  setup(props, context) {
    const selector = ref();
    const visible = ref(false);
    const editorRef = shallowRef(null);
    const curValue = ref("");
    const position = ref();
    const editor = ref();
    const popper = ref();
    const selectValue = ref();
    let isCreated = false;
    const optionMap = computed(() => props.options.reduce((acc, item) => ({
      ...acc,
      [item.value]: item
    }), {}));
    const initEditor = () => {
      if (!selector.value)
        return;
      editor.value = coreCreateEditor({
        selector: selector.value,
        config: {
          placeholder: props.placeholder,
          readOnly: props.disabled || props.readOnly,
          onCreated(editor2) {
            editorRef.value = editor2;
            setTimeout(() => isCreated = true);
          },
          onChange(editor2) {
            const editorHtml = editor2.getHtml();
            curValue.value = editorHtml;
            if (isCreated) {
              context.emit("update:modelValue", nodeToText(editor2.children, {
                prefix: props.prefix,
                suffix: props.suffix
              }));
              context.emit("change", nodeToText(editor2.children, {
                prefix: props.prefix,
                suffix: props.suffix
              }), editor2);
            }
          },
          onDestroyed(editor2) {
            context.emit("destroyed", editor2);
          },
          onMaxLength(editor2) {
            context.emit("maxLength", editor2);
          },
          onFocus(editor2) {
            context.emit("focus", editor2);
          },
          onBlur(editor2) {
            context.emit("blur", editor2);
          },
          customAlert(info, type) {
            context.emit("customAlert", info, type);
          },
          customPaste: (editor2, event) => {
            const clipboardData = event.clipboardData;
            const pastedText = clipboardData == null ? void 0 : clipboardData.getData("text");
            editor2.insertNode(textToNode({
              prefix: props.prefix,
              suffix: props.suffix
            }, pastedText, optionMap.value));
            return false;
          }
        },
        html: textToHtml(props.modelValue, optionMap.value, {
          prefix: props.prefix,
          suffix: props.suffix
        }),
        //curValue.value,
        plugins: [withParagraph, withVariable]
      });
      emitter.on("show", ({
        value,
        ..._position
      }) => {
        var _a;
        position.value = _position;
        visible.value = true;
        selectValue.value = value;
        if (value)
          (_a = popper.value) == null ? void 0 : _a.setValue(optionMap.value[value]);
      });
      emitter.on("hide", () => {
        visible.value = false;
      });
      onClickOutside(selector.value, (event) => {
        var _a, _b;
        if (!((_b = (_a = popper.value) == null ? void 0 : _a.target.value) == null ? void 0 : _b.contains(event.target))) {
          visible.value = false;
        }
      });
    };
    watchEffect(() => {
      if (!editor.value)
        return;
      if (props.disabled || props.readOnly) {
        emitter.emit("hide", editor.value);
        editor.value.disable();
      } else {
        editor.value.enable();
      }
    });
    function setHtml(newHtml) {
      const editor2 = editorRef.value;
      if (editor2 == null)
        return;
      editor2.setHtml(newHtml);
    }
    onMounted(() => {
      initEditor();
    });
    watchEffect(() => {
      if (isEmpty(optionMap.value))
        return;
      const _val = textToHtml(props.modelValue, optionMap.value, {
        prefix: props.prefix,
        suffix: props.suffix
      });
      if (_val === curValue.value)
        return;
      setHtml(_val);
    });
    return () => h("div", {
      ...context.attrs,
      class: [prefixCls, "el-textarea", context.attrs.class]
    }, {
      default: () => [h("div", {
        ref: selector,
        class: [`${prefixCls}__content`, {
          "is-disabled": props.disabled
        }],
        onKeydown: (e) => {
          if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
            if (visible.value) {
              e.preventDefault();
              emitter.emit(e.key, e);
            }
          }
        }
      }), h(Popper, {
        ref: popper,
        class: `${prefixCls}__popper`,
        visible: visible.value,
        position,
        editor: editor.value,
        value: selectValue.value,
        options: props.options
      })]
    });
  }
});

export { MsgEditor as default };
//# sourceMappingURL=index.mjs.map