vue-admin-core/lib/components/msg-editor/src/index.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@wangeditor/core');
var elementPlus = require('element-plus');
var plugin$1 = require('./plugin.js');
var plugin = require('./paragraph/plugin.js');
var Popper = require('./Popper.js');
var _const = require('../../../utils/const.js');
var mitt = require('./mitt.js');
var utils = require('./utils.js');
var lodashEs = require('lodash-es');
var core$1 = require('@vueuse/core');

const prefixCls = _const.getPrefixCls("msg-editor");
var MsgEditor = vue.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: [
    elementPlus.CHANGE_EVENT,
    elementPlus.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 = vue.ref();
    const visible = vue.ref(false);
    const editorRef = vue.shallowRef(null);
    const curValue = vue.ref("");
    const position = vue.ref();
    const editor = vue.ref();
    const popper = vue.ref();
    const selectValue = vue.ref();
    let isCreated = false;
    const optionMap = vue.computed(() => props.options.reduce((acc, item) => ({
      ...acc,
      [item.value]: item
    }), {}));
    const initEditor = () => {
      if (!selector.value)
        return;
      editor.value = core.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", utils.nodeToText(editor2.children, {
                prefix: props.prefix,
                suffix: props.suffix
              }));
              context.emit("change", utils.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(utils.textToNode({
              prefix: props.prefix,
              suffix: props.suffix
            }, pastedText, optionMap.value));
            return false;
          }
        },
        html: utils.textToHtml(props.modelValue, optionMap.value, {
          prefix: props.prefix,
          suffix: props.suffix
        }),
        //curValue.value,
        plugins: [plugin.default, plugin$1.default]
      });
      mitt.default.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]);
      });
      mitt.default.on("hide", () => {
        visible.value = false;
      });
      core$1.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;
        }
      });
    };
    vue.watchEffect(() => {
      if (!editor.value)
        return;
      if (props.disabled || props.readOnly) {
        mitt.default.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);
    }
    vue.onMounted(() => {
      initEditor();
    });
    vue.watchEffect(() => {
      if (lodashEs.isEmpty(optionMap.value))
        return;
      const _val = utils.textToHtml(props.modelValue, optionMap.value, {
        prefix: props.prefix,
        suffix: props.suffix
      });
      if (_val === curValue.value)
        return;
      setHtml(_val);
    });
    return () => vue.h("div", {
      ...context.attrs,
      class: [prefixCls, "el-textarea", context.attrs.class]
    }, {
      default: () => [vue.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();
              mitt.default.emit(e.key, e);
            }
          }
        }
      }), vue.h(Popper.default, {
        ref: popper,
        class: `${prefixCls}__popper`,
        visible: visible.value,
        position,
        editor: editor.value,
        value: selectValue.value,
        options: props.options
      })]
    });
  }
});

exports.default = MsgEditor;
//# sourceMappingURL=index.js.map