yanzhen-design-vue/lib/components/rich-text/src/use-rich-text.cjs

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const utils = require("@yanzhen-libs/utils");
const core = require("@vueuse/core");
const core$1 = require("@yanzhen-lowcode/core");
const lodashEs = require("lodash-es");
const utilsVue = require("@yanzhen-libs/utils-vue");
require("../../../utils/index.cjs");
const richTextProps = require("./rich-text-props.cjs");
const constants = require("./constants.cjs");
const log = require("../../../utils/log.cjs");
function useRichText(props, emit) {
  const [DefineRichText, ReusableRichText] = core.createReusableTemplate();
  const _toolbarRef = vue.shallowRef();
  const _editorRef = vue.shallowRef();
  const _ref = vue.computed(() => {
    return {
      toolbar: vue.unref(_toolbarRef),
      editor: vue.unref(_editorRef)
    };
  });
  const open = vue.ref(false);
  const _api = core$1.provideApiConfig(props);
  const _props = vue.computed(() => {
    return {
      style: {
        zIndex: props.zIndex
      }
    };
  });
  const _uploadConfig = vue.computed(() => {
    var _a;
    const editor = vue.unref(_editorRef);
    const config2 = vue.unref(_api);
    const accept = props.accept ? (_a = props.accept) == null ? void 0 : _a.split(",") : [];
    const allowedFileTypes = lodashEs.uniq(((props == null ? void 0 : props.allowedFileTypes) ?? []).concat(accept));
    const allowedVideoTypes = allowedFileTypes == null ? void 0 : allowedFileTypes.filter(
      (value) => typeof value === "string" && value.startsWith("video/")
    );
    const allowedImageTypes = allowedFileTypes == null ? void 0 : allowedFileTypes.filter(
      (value) => typeof value === "string" && value.startsWith("image/")
    );
    const {
      fieldName,
      maxFileSize: _maxFileSize,
      maxNumberOfFiles,
      timeout,
      base64LimitSize: _base64LimitSize
    } = props;
    const maxFileSize = lodashEs.isString(_maxFileSize) ? utils.bytes.parse(_maxFileSize) : _maxFileSize;
    const base64LimitSize = lodashEs.isString(_base64LimitSize) ? utils.bytes.parse(_base64LimitSize) : _base64LimitSize;
    return {
      fieldName,
      maxFileSize,
      maxNumberOfFiles,
      timeout,
      base64LimitSize,
      server: (_api == null ? void 0 : _api.value.action) ?? "#",
      allowedFileTypes,
      allowedVideoTypes,
      allowedImageTypes,
      // 自定义增加 http  header
      headers: config2 == null ? void 0 : config2.headers,
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: props.withCredentials,
      // 上传之前触发
      async onBeforeUpload(file, config3) {
        if (typeof props.onBeforeUpload === "function") {
          return props.onBeforeUpload(file);
        }
        if (maxFileSize && maxFileSize < file.size) {
          log.throwError(richTextProps.richTextName, `单个文件超出最大限制：${utils.bytes.format(maxFileSize)}`);
        }
        if (allowedFileTypes && allowedFileTypes.length > 0) {
          const allowed = allowedFileTypes.some((type) => {
            if (type.endsWith("/*")) {
              const t = type.replace("/*", "/\\w{1,}");
              return new RegExp(t, "i").test(file.type);
            }
            return file.type === type;
          });
          if (!allowed) {
            log.throwError(richTextProps.richTextName, `允许的文件类型：${allowedFileTypes.join("|")}`);
          }
        }
      },
      // 上传进度的回调函数
      async onProgress(progress) {
        editor == null ? void 0 : editor.showProgressBar(progress);
      },
      // 单个文件上传成功之后
      async onSuccess(file, res) {
        log.message.info(`${file.name} 上传成功`);
      },
      // 单个文件上传失败
      async onFailed(file, res) {
        log.message.info(`${file.name} 上传失败`);
      },
      // 上传错误，或者触发 timeout 超时
      async onError(file, err, res) {
        log.message.info(`${file.name} 上传出错`);
      }
    };
  });
  const handleCustomUpload = async (file, insertFn, _config) => {
    const { onBeforeUpload, onError } = vue.unref(_config);
    if (typeof onBeforeUpload === "function") {
      await onBeforeUpload(file, vue.unref(_config));
    }
    const result = await (_api == null ? void 0 : _api.value.request(
      { file, ...vue.unref(_config) },
      richTextProps.richTextApis.upload
    ));
    if ((result == null ? void 0 : result.code) === 0) {
      insertFn(result == null ? void 0 : result.data, "alt", "href");
      return;
    }
    if (typeof onError === "function") {
      const message2 = (result == null ? void 0 : result.message) ?? "上传失败";
      onError(file, log.throwError(richTextProps.richTextName, message2), result, vue.unref(_config));
    }
  };
  const config = vue.computed(() => {
    const { allowedFileTypes, allowedVideoTypes, allowedImageTypes, ...uploadConfig } = vue.unref(_uploadConfig);
    const uploadVideoConfig = {
      allowedFileTypes: allowedVideoTypes,
      ...uploadConfig,
      customUpload(file, insertFn) {
        return handleCustomUpload(file, insertFn, uploadVideoConfig);
      }
    };
    const uploadImageConfig = {
      allowedFileTypes: allowedImageTypes,
      ...uploadConfig,
      customUpload(file, insertFn) {
        return handleCustomUpload(file, insertFn, uploadImageConfig);
      }
    };
    const toolbar = {
      toolbarKeys: !utils.isEmptyArray(props.toolbarKeys) ? props.toolbarKeys : constants.richTextToolbarBaseKeys
      // insertKeys: [], // 可以在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单。
      // excludeKeys,
    };
    const editor = {
      placeholder: "请输入内容...",
      autoFocus: false,
      readOnly: props.disabled,
      MENU_CONF: {
        // 字号
        fontSize: {
          fontSizeList: [
            // 元素支持两种形式
            //   1. 字符串；
            //   2. { name: 'xxx', value: 'xxx' }
            "12px",
            "16px",
            { name: "24px", value: "24px" },
            "40px"
          ]
        },
        // image 上传
        uploadImage: uploadImageConfig,
        // Video 上传
        uploadVideo: uploadVideoConfig
      },
      customAlert: async (info, type) => {
        if (typeof props.customAlert === "function") {
          return props.customAlert(info, type);
        }
        if (log.message[type]) {
          log.message[type](info);
        }
        if (type === "error") {
          log.throwError(richTextProps.richTextName, info);
        } else {
          log.logs[type === "warning" ? "warn" : type](info);
        }
      }
    };
    return {
      mode: props.mode,
      // or 'simple'
      toolbar,
      editor
    };
  });
  const watcher = utilsVue.createWatcher();
  watcher.set("disabled", {
    source: () => props.disabled,
    handler(disabled) {
      const editor = vue.unref(_editorRef);
      switch (true) {
        case (disabled && lodashEs.isFunction(editor == null ? void 0 : editor.disable)):
          editor == null ? void 0 : editor.blur();
          editor == null ? void 0 : editor.disable();
          break;
        case lodashEs.isFunction(editor == null ? void 0 : editor.enable):
          editor == null ? void 0 : editor.enable();
          break;
      }
    },
    immediate: true,
    debounce: 300
  });
  const modelValue = core.useVModel(props, "value", emit);
  const _modelValue = vue.computed({
    get() {
      return modelValue.value ?? "";
    },
    set(value) {
      const editor = _editorRef.value;
      if (!editor) return;
      modelValue.value = editor.isEmpty() ? "" : value;
    }
  });
  const notSupport = vue.computed(() => {
    return lodashEs.isString(props.nativeTag) && props.nativeTag.startsWith("edit-table");
  });
  const handleCreated = (editor) => {
    _editorRef.value = editor;
  };
  vue.onBeforeUnmount(() => {
    watcher.stop();
    const editor = _editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
  return {
    _props,
    _ref,
    _toolbarRef,
    _editorRef,
    _modelValue,
    open,
    notSupport,
    config,
    handleCreated,
    DefineRichText,
    ReusableRichText
  };
}
exports.useRichText = useRichText;