import { defineComponent, shallowRef, ref, computed, onBeforeUnmount, watch, nextTick, resolveComponent, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, createElementVNode, createCommentVNode } from 'vue';
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
import '../../../utils/index.mjs';
import { FALLBACK_IMAGE, richTextEditorEmits, richTextEditorProps } from './rich-text-editor.mjs';
import '@wangeditor/editor/dist/css/style.css';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlRichTextEditor" },
  __name: "rich-text-editor",
  props: richTextEditorProps,
  emits: richTextEditorEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const bem = createNamespace("rich-text-editor");
    const props = __props;
    const emits = __emit;
    const editorRef = shallowRef();
    const innerValue = ref(props.value);
    const loading = ref(props.loading);
    const allImages = ref([]);
    const editorConfig = computed(() => {
      return {
        MENU_CONF: {
          uploadImage: {
            async onBeforeUpload(file) {
              if (props.onBeforeUploadImage) {
                const res = await props.onBeforeUploadImage(file);
                return res ? file : false;
              }
              return file;
            },
            async customUpload(file, insertFn) {
              loading.value = true;
              try {
                const res = await props.customUploadImage(file);
                insertFn(res);
                loading.value = false;
              } catch (error) {
                editorRef.value.alert("\u9519\u8BEF\u4FE1\u606F", props.uploadImageError);
                loading.value = false;
              }
            },
            base64LimitSize: 5 * 1024
          },
          insertImage: {
            async onInsertedImage(imageNode) {
              allImages.value.push(imageNode);
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              if (props.customUploadVideo) {
                loading.value = true;
                try {
                  const res = await props.customUploadVideo(file);
                  insertFn(res, FALLBACK_IMAGE);
                  loading.value = false;
                } catch (error) {
                  editorRef.value.alert("\u9519\u8BEF\u4FE1\u606F", props.uploadImageError);
                  loading.value = false;
                }
              }
            }
          }
        },
        ...props.editorConfig
      };
    });
    const handleCreated = (editor) => {
      editorRef.value = editor;
      allImages.value = editor.getElemsByType("image");
      emits("created", editor);
    };
    const onEditorUpdate = (value) => {
      innerValue.value = value;
      emits("update:value", value);
    };
    const handleChange = (editor) => {
      emits("change", editor);
    };
    const handleDestroyed = (editor) => {
      emits("destroyed", editor);
    };
    const handleFocus = (editor) => {
      emits("focus", editor);
    };
    const handleBlur = (editor) => {
      emits("blur", editor);
    };
    const customAlert = (info, type) => {
      emits("alert", [info, type]);
    };
    const getEditorImage = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      return {
        allImages: allImages.value,
        currentImages: editor.getElemsByType("image")
      };
    };
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    watch(
      () => props.loading,
      (val) => {
        loading.value = val;
      }
    );
    watch(
      () => props.value,
      (newValue) => {
        if (newValue !== innerValue.value) {
          innerValue.value = newValue;
        }
      },
      { deep: true }
    );
    watch(
      () => [props.disabled, loading.value],
      async (val) => {
        const editor = editorRef.value;
        if (editor == null) return;
        await nextTick();
        if (val[0] || val[1]) {
          editor.disable();
        } else {
          editor.enable();
        }
      },
      {
        deep: true
      }
    );
    __expose({
      editorRef: editorRef.value,
      getEditorImage
    });
    return (_ctx, _cache) => {
      const _component_a_spin = resolveComponent("a-spin");
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(unref(bem).b())
        },
        [
          createVNode(_component_a_spin, { spinning: loading.value }, {
            default: withCtx(() => [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).e("container"))
                },
                [
                  createVNode(unref(Toolbar), {
                    class: normalizeClass(unref(bem).e("toolbar-container")),
                    editor: editorRef.value,
                    "default-config": props.toolbarConfig,
                    mode: props.mode
                  }, null, 8, ["class", "editor", "default-config", "mode"]),
                  createCommentVNode("  "),
                  createVNode(unref(Editor), {
                    "model-value": innerValue.value,
                    class: normalizeClass(unref(bem).e("editor-container")),
                    "default-config": editorConfig.value,
                    mode: props.mode,
                    "onUpdate:modelValue": onEditorUpdate,
                    onOnCreated: handleCreated,
                    onOnChange: handleChange,
                    onOnDestroyed: handleDestroyed,
                    onOnFocus: handleFocus,
                    onOnBlur: handleBlur,
                    onCustomAlert: customAlert
                  }, null, 8, ["model-value", "class", "default-config", "mode"])
                ],
                2
                /* CLASS */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["spinning"])
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=rich-text-editor.vue2.mjs.map
