vue-devui 1.5.13 → 1.5.15-feat.1

package/editor-md/index.es.js

@@ -1847,1084 +1847,6 @@ function refreshEditorCursor() {
   }
   window.dispatchEvent(event);
 }
-function useEditorMd(props, ctx) {
-  const {
-    imageUploadToServer,
-    hidePreviewView,
-    mode,
-    maxlength,
-    options,
-    toolbarConfig,
-    customToolbars,
-    customHintReplaceFn,
-    hintConfig,
-    disableChangeEvent,
-    modelValue
-  } = toRefs(props);
-  const toolbars = reactive(cloneDeep_1(DEFAULT_TOOLBARS));
-  const editorRef = ref();
-  const renderRef = ref();
-  const previewHtmlList = ref([]);
-  let editorIns;
-  let canPreviewScrollView = false;
-  let CodeMirror;
-  computed(() => {
-    const result = [];
-    for (const key in hintConfig == null ? void 0 : hintConfig.value) {
-      if (typeof (hintConfig == null ? void 0 : hintConfig.value[key]) === "function" || (hintConfig == null ? void 0 : hintConfig.value[key]) && typeof (hintConfig == null ? void 0 : hintConfig.value[key].handler) === "function") {
-        result.push(key);
-      }
-    }
-    return result;
-  });
-  const getEditorIns = () => editorIns;
-  const editorScroll = () => {
-    if (editorIns) {
-      const scrollInfo = editorIns.getScrollInfo();
-      const height = scrollInfo.height - scrollInfo.clientHeight;
-      const ratio = parseFloat(scrollInfo.top) / height;
-      const preview = renderRef.value.$el;
-      const move = (preview.scrollHeight - preview.clientHeight) * ratio;
-      preview.scrollTop = move;
-    }
-  };
-  const previewScroll = () => {
-    const preview = renderRef.value.$el;
-    const height = preview.scrollHeight - preview.clientHeight;
-    const ratio = parseFloat(preview.scrollTop) / height;
-    const move = (editorIns.getScrollInfo().height - editorIns.getScrollInfo().clientHeight) * ratio;
-    editorIns.scrollTo(0, move);
-  };
-  const previewContentChange = (html) => {
-    previewHtmlList.value = [];
-    const domList = parseHTMLStringToDomList(html);
-    domList.forEach((ele) => {
-      if (ele.outerHTML) {
-        previewHtmlList.value.push(ele.outerHTML);
-      }
-    });
-    setTimeout(() => {
-      editorScroll();
-    });
-    nextTick(() => {
-      ctx.emit("previewContentChange");
-    });
-  };
-  const onPreviewScroll = () => {
-    if (!canPreviewScrollView) {
-      return;
-    }
-    previewScroll();
-  };
-  const onPreviewMouseover = () => {
-    canPreviewScrollView = true;
-  };
-  const onPreviewMouseout = () => {
-    canPreviewScrollView = false;
-  };
-  const onChecked = (e) => {
-    ctx.emit("mdCheckedEvent", e);
-  };
-  const onChange = debounce(() => {
-    const content = editorIns.getValue();
-    if (!disableChangeEvent.value) {
-      ctx.emit("update:modelValue", content);
-      ctx.emit("contentChange", content);
-    }
-    if (!canPreviewScrollView) {
-      editorScroll();
-    }
-  }, disableChangeEvent.value ? 500 : 10, true);
-  const onScroll = () => {
-    if (!canPreviewScrollView) {
-      editorScroll();
-    }
-  };
-  const initEditor = () => {
-    var _a;
-    editorIns = CodeMirror.fromTextArea(editorRef.value, __spreadValues({
-      mode: "markdown",
-      lineNumbers: false,
-      lineWrapping: true
-    }, options.value));
-    if (maxlength.value) {
-      editorIns.setOption("maxLength", maxlength.value);
-    }
-    editorIns.setOption("readOnly", mode.value === "readonly");
-    const shortKeys = {};
-    const flatToolbarConfig = toolbarConfig.value.flat();
-    const tempToolbars = __spreadValues(__spreadValues({}, toolbars), customToolbars == null ? void 0 : customToolbars.value);
-    for (const key of Object.keys(tempToolbars)) {
-      const toolbarItem = tempToolbars[key];
-      if (toolbarItem.shortKey && flatToolbarConfig.includes(toolbarItem.id)) {
-        shortKeys[toolbarItem.shortKey.replace(/\+/g, "-")] = (_a = toolbarItem.handler) == null ? void 0 : _a.bind(null, editorIns, toolbarItem.params);
-      }
-    }
-    editorIns.setOption("extraKeys", shortKeys);
-    editorIns.on("beforeChange", _enforceMaxLength);
-    editorIns.setSize("auto", "100%");
-    refreshEditorCursor();
-    editorIns.setCursor(editorIns.lineCount(), 0);
-    ctx.emit("afterEditorInit", editorIns);
-    editorIns.on("change", onChange);
-    editorIns.on("scroll", onScroll);
-    setTimeout(() => {
-      ctx.emit("contentChange", editorIns.getValue());
-    }, 100);
-  };
-  const onPaste = (e) => {
-    const clipboardData = e.clipboardData;
-    if (!(clipboardData && clipboardData.items)) {
-      return;
-    }
-    if (clipboardData.items.length <= 3) {
-      for (let i = 0; i < clipboardData.items.length; i++) {
-        const item = clipboardData.items[i];
-        if (item.kind === "file" && item.type.indexOf("image") !== -1) {
-          const file = item.getAsFile();
-          if ((file == null ? void 0 : file.size) === 0) {
-            return;
-          }
-          if (imageUploadToServer.value) {
-            const callback = ({ name, imgUrl, title }) => {
-              editorIns.focus();
-              editorIns.replaceSelection(`![${name}](${imgUrl} '${title}')`);
-            };
-            ctx.emit("imageUpload", { file, callback });
-          }
-        }
-      }
-    }
-  };
-  onMounted(async () => {
-    await import("codemirror/addon/display/placeholder.js");
-    await import("codemirror/mode/markdown/markdown.js");
-    const module = await import("codemirror");
-    CodeMirror = module.default;
-    initEditor();
-  });
-  watch(modelValue, (val) => {
-    if (editorIns) {
-      if (val === editorIns.getValue()) {
-        return;
-      }
-      editorIns.setValue(val);
-    }
-  });
-  watch(imageUploadToServer, (val) => {
-    if (toolbars["image"].params) {
-      toolbars["image"].params.imageUploadToServer = val;
-    }
-    if (toolbars["image"].params && !toolbars["image"].params.imageUpload) {
-      toolbars["image"].params.imageUpload = (data) => {
-        ctx.emit("imageUpload", data);
-      };
-    }
-  }, { immediate: true });
-  watch(hidePreviewView, () => {
-    refreshEditorCursor();
-  });
-  watch(mode, (val) => {
-    setTimeout(() => {
-      if (editorIns) {
-        refreshEditorCursor();
-        editorIns.setOption("readOnly", val === "readonly");
-      }
-    });
-  });
-  watch(maxlength, (val) => {
-    if (editorIns) {
-      editorIns.setOption("maxLength", val);
-    }
-  });
-  return {
-    editorRef,
-    renderRef,
-    toolbars,
-    previewHtmlList,
-    getEditorIns,
-    onPaste,
-    previewContentChange,
-    onChecked,
-    onPreviewScroll,
-    onPreviewMouseout,
-    onPreviewMouseover
-  };
-}
-function useEditorMdTheme(callback) {
-  const isDarkMode = ref(false);
-  let themeService;
-  const themeChange = () => {
-    if (themeService) {
-      isDarkMode.value = themeService.currentTheme.id.indexOf("dark") !== -1;
-      callback();
-    }
-  };
-  onBeforeMount(() => {
-    themeService = window["devuiThemeService"];
-  });
-  onMounted(() => {
-    themeChange();
-    if (themeService && themeService.eventBus) {
-      themeService.eventBus.add("themeChanged", themeChange);
-    }
-  });
-  onBeforeUnmount(() => {
-    if (themeService && themeService.eventBus) {
-      themeService.eventBus.remove("themeChanged", themeChange);
-    }
-  });
-  return { isDarkMode };
-}
-const commonProps = {
-  baseUrl: {
-    type: String,
-    default: null
-  },
-  breaks: {
-    type: Boolean,
-    default: true
-  },
-  customParse: {
-    type: Function,
-    default: null
-  },
-  renderParse: {
-    type: Function,
-    default: null
-  },
-  mdRules: {
-    type: Object,
-    default: () => ({})
-  },
-  customRendererRules: {
-    type: Array,
-    default: () => []
-  },
-  customXssRules: {
-    type: Array,
-    default: () => []
-  },
-  mdPlugins: {
-    type: Array,
-    default: () => []
-  }
-};
-const editorMdProps = __spreadProps(__spreadValues({}, commonProps), {
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  options: {
-    type: Object,
-    default: () => ({})
-  },
-  mode: {
-    type: String,
-    default: "normal"
-  },
-  customThemeConfig: {
-    type: Object
-  },
-  customToolbars: {
-    type: Object
-  },
-  disableChangeEvent: {
-    type: Boolean,
-    default: false
-  },
-  editorContainerHeight: {
-    type: Number
-  },
-  imageUploadToServer: {
-    type: Boolean,
-    default: false
-  },
-  hidePreviewView: {
-    type: Boolean,
-    default: false
-  },
-  maxlength: {
-    type: Number,
-    default: null
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  toolbarConfig: {
-    type: Array,
-    default: () => DEFAULT_TOOLBAR_CONFIG
-  },
-  fullscreenZIndex: {
-    type: Number,
-    default: 10
-  },
-  hintConfig: {
-    type: Object
-  },
-  customHintReplaceFn: {
-    type: Function
-  }
-});
-const EditorMdInjectionKey = Symbol("d-editor-md");
-const mdRenderProps = __spreadProps(__spreadValues({}, commonProps), {
-  content: {
-    type: String,
-    default: ""
-  },
-  disableRender: {
-    type: Boolean,
-    default: false
-  }
-});
-const mdToolbarItemProps = {
-  config: {
-    type: Object,
-    default: () => ({})
-  }
-};
-const dropdownProps = {
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  trigger: {
-    type: String,
-    default: "click"
-  },
-  closeScope: {
-    type: String,
-    default: "all"
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  offset: {
-    type: [Number, Object],
-    default: 4
-  },
-  shiftOffset: {
-    type: Number
-  },
-  closeOnMouseLeaveMenu: {
-    type: Boolean,
-    default: false
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  overlayClass: {
-    type: String,
-    default: ""
-  },
-  destroyOnHide: {
-    type: Boolean,
-    default: true
-  }
-};
-const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
-const dropdownMap = /* @__PURE__ */ new Map();
-function subscribeEvent(dom, type, callback) {
-  dom == null ? void 0 : dom.addEventListener(type, callback);
-  return () => {
-    dom == null ? void 0 : dom.removeEventListener(type, callback);
-  };
-}
-const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
-  let overlayEnter = false;
-  let originEnter = false;
-  const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
-  const toggle = (status) => {
-    isOpen.value = status;
-    emit("toggle", isOpen.value);
-  };
-  const handleLeave = async (elementType, closeAll) => {
-    await new Promise((resolve) => setTimeout(resolve, 50));
-    if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
-      return;
-    }
-    if (closeAll) {
-      [...dropdownMap.values()].reverse().forEach((item) => {
-        setTimeout(() => {
-          var _a;
-          (_a = item.toggle) == null ? void 0 : _a.call(item);
-        }, 0);
-      });
-    }
-    toggle(false);
-  };
-  watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
-    const originEl = getElement(originVal);
-    const subscriptions = [];
-    setTimeout(() => {
-      subscriptions.push(subscribeEvent(document, "click", (e) => {
-        e.stopPropagation();
-        const dropdownValues = [...dropdownMap.values()];
-        if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
-          var _a;
-          return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
-        }) && dropdownValues.some((item) => {
-          var _a;
-          return (_a = item.menuEl) == null ? void 0 : _a.contains(e.target);
-        })) {
-          return;
-        }
-        [...dropdownMap.values()].reverse().forEach((item) => {
-          setTimeout(() => {
-            var _a, _b;
-            if (!((_a = item.toggleEl) == null ? void 0 : _a.contains(e.target))) {
-              (_b = item.toggle) == null ? void 0 : _b.call(item);
-            }
-          }, 0);
-        });
-        overlayEnter = false;
-      }));
-    }, 0);
-    if (triggerVal === "click") {
-      subscriptions.push(subscribeEvent(originEl, "click", () => toggle(!isOpen.value)), subscribeEvent(dropdownEl, "mouseleave", (e) => {
-        var _a;
-        if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
-          handleLeave("dropdown", true);
-        }
-      }));
-    } else if (triggerVal === "hover") {
-      subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
-        originEnter = true;
-        toggle(true);
-      }), subscribeEvent(originEl, "mouseleave", () => {
-        originEnter = false;
-        handleLeave("origin");
-      }), subscribeEvent(dropdownEl, "mouseenter", () => {
-        overlayEnter = true;
-        isOpen.value = true;
-      }), subscribeEvent(dropdownEl, "mouseleave", (e) => {
-        var _a;
-        overlayEnter = false;
-        if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
-          return;
-        }
-        handleLeave("dropdown", true);
-      }));
-    }
-    onInvalidate(() => subscriptions.forEach((v) => v()));
-  });
-};
-function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
-  const calcPopDirection = (dropdownEl) => {
-    const elementHeight = dropdownEl.offsetHeight;
-    const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
-    const isBottomEnough = bottomDistance >= elementHeight;
-    if (!isBottomEnough) {
-      popDirection.value = "top";
-    } else {
-      popDirection.value = "bottom";
-    }
-  };
-  watch(visible, (newVal, oldVal) => {
-    if (oldVal === void 0) {
-      return;
-    }
-    isOpen.value = newVal;
-    emit("toggle", isOpen.value);
-  }, { immediate: true });
-  watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
-    var _a;
-    if (isOpenVal) {
-      dropdownMap.set(id, __spreadProps(__spreadValues({}, dropdownMap.get(id)), {
-        menuEl: dropdownEl,
-        toggle: () => {
-          isOpen.value = false;
-          emit("toggle", isOpen.value);
-        }
-      }));
-      for (const value of dropdownMap.values()) {
-        if ((_a = value.menuEl) == null ? void 0 : _a.contains(origin.value)) {
-          value.child = dropdownEl;
-        }
-      }
-    }
-    if (dropdownEl) {
-      calcPopDirection(dropdownEl);
-    }
-  });
-  onMounted(() => {
-    dropdownMap.set(id, { toggleEl: origin.value });
-  });
-  onUnmounted(() => {
-    dropdownMap.delete(id);
-  });
-}
-function useOverlayProps(props, currentPosition, isOpen) {
-  const { showAnimation, overlayClass, destroyOnHide } = toRefs(props);
-  const overlayModelValue = ref(false);
-  const overlayShowValue = ref(false);
-  const styles = computed(() => ({
-    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
-    zIndex: "var(--devui-z-index-dropdown, 1052)"
-  }));
-  const classes = computed(() => ({
-    "fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
-    "fade-in-top": showAnimation.value && isOpen.value && currentPosition.value === "top",
-    [`${overlayClass.value}`]: true
-  }));
-  const handlePositionChange = (pos) => {
-    currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
-  };
-  watch(isOpen, (isOpenVal) => {
-    overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
-    overlayShowValue.value = isOpenVal;
-  });
-  return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
-}
-const fixedOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  lockScroll: {
-    type: Boolean,
-    default: true
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true
-  }
-};
-function useFixedOverlay(props, ctx) {
-  let lockScrollCb;
-  const onClick = (event) => {
-    event.preventDefault();
-    ctx.emit("click", event);
-    if (props.closeOnClickOverlay) {
-      ctx.emit("update:modelValue", false);
-    }
-  };
-  const removeBodyAdditions = () => {
-    lockScrollCb == null ? void 0 : lockScrollCb();
-  };
-  watch(() => props.modelValue, (val) => {
-    if (val) {
-      props.lockScroll && (lockScrollCb = lockScroll());
-    } else {
-      removeBodyAdditions();
-    }
-  });
-  onUnmounted(removeBodyAdditions);
-  return { onClick };
-}
-function createBem(namespace, element, modifier) {
-  let cls = namespace;
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-}
-function useNamespace(block, needDot = false) {
-  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
-  return {
-    b,
-    e,
-    m,
-    em
-  };
-}
-var fixedOverlay = "";
-defineComponent({
-  name: "DFixedOverlay",
-  inheritAttrs: false,
-  props: fixedOverlayProps,
-  emits: ["update:modelValue", "click"],
-  setup(props, ctx) {
-    const {
-      modelValue
-    } = toRefs(props);
-    const ns2 = useNamespace("fixed-overlay");
-    const {
-      onClick
-    } = useFixedOverlay(props, ctx);
-    return () => createVNode(Transition, {
-      "name": ns2.m("fade")
-    }, {
-      default: () => {
-        var _a, _b;
-        return [modelValue.value && createVNode("div", mergeProps({
-          "class": ns2.b()
-        }, ctx.attrs, {
-          "onClick": onClick
-        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
-      }
-    });
-  }
-});
-const flexibleOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  shiftOffset: {
-    type: Number
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  showArrow: {
-    type: Boolean,
-    default: false
-  },
-  isArrowCenter: {
-    type: Boolean,
-    default: true
-  },
-  clickEventBubble: {
-    type: Boolean,
-    default: false
-  }
-};
-function getScrollParent(element) {
-  const overflowRegex = /(auto|scroll|hidden)/;
-  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
-    const style = window.getComputedStyle(parent);
-    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
-      return parent;
-    }
-  }
-  return window;
-}
-function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
-  let { x, y } = point;
-  if (!isArrowCenter) {
-    const { width, height } = originRect;
-    if (x && placement.includes("start")) {
-      x = 12;
-    }
-    if (x && placement.includes("end")) {
-      x = Math.round(width - 24);
-    }
-    if (y && placement.includes("start")) {
-      y = 10;
-    }
-    if (y && placement.includes("end")) {
-      y = height - 14;
-    }
-  }
-  return { x, y };
-}
-function useOverlay(props, emit) {
-  const overlayRef = ref();
-  const arrowRef = ref();
-  let originParent = null;
-  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
-    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
-    const staticSide = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right"
-    }[placement.split("-")[0]];
-    Object.assign(arrowEl.style, {
-      left: x ? `${x}px` : "",
-      top: y ? `${y}px` : "",
-      right: "",
-      bottom: "",
-      [staticSide]: "-4px"
-    });
-  };
-  const updatePosition = async () => {
-    const hostEl = props.origin;
-    const overlayEl = unref(overlayRef.value);
-    const arrowEl = unref(arrowRef.value);
-    const middleware = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
-      strategy: "fixed",
-      middleware
-    });
-    let applyX = x;
-    let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
-    emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
-    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
-  };
-  watch(() => props.modelValue, () => {
-    if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
-      nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
-      window.addEventListener("resize", updatePosition);
-    } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
-    }
-  });
-  onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
-    window.removeEventListener("resize", updatePosition);
-  });
-  return { arrowRef, overlayRef, updatePosition };
-}
-var flexibleOverlay = "";
-const FlexibleOverlay = defineComponent({
-  name: "DFlexibleOverlay",
-  inheritAttrs: false,
-  props: flexibleOverlayProps,
-  emits: ["update:modelValue", "positionChange"],
-  setup(props, {
-    slots,
-    attrs,
-    emit,
-    expose
-  }) {
-    const ns2 = useNamespace("flexible-overlay");
-    const {
-      clickEventBubble
-    } = toRefs(props);
-    const {
-      arrowRef,
-      overlayRef,
-      updatePosition
-    } = useOverlay(props, emit);
-    expose({
-      updatePosition
-    });
-    return () => {
-      var _a;
-      return props.modelValue && createVNode("div", mergeProps({
-        "ref": overlayRef,
-        "class": ns2.b()
-      }, attrs, {
-        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
-        "onPointerup": withModifiers(() => ({}), ["stop"])
-      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
-        "ref": arrowRef,
-        "class": ns2.e("arrow")
-      }, null)]);
-    };
-  }
-});
-const isObject = (val) => val !== null && typeof val === "object";
-const ns = useNamespace("popper-trigger");
-function wrapContent(content) {
-  return h("span", { class: ns.b() }, content);
-}
-function getFirstValidChild(nodes) {
-  for (const child of nodes) {
-    if (isObject(child)) {
-      if (child.type === Comment) {
-        continue;
-      }
-      if (child.type === "svg" || child.type === Text) {
-        return wrapContent(child);
-      }
-      if (child.type === Fragment) {
-        return getFirstValidChild(child.children);
-      }
-      return child;
-    }
-    return wrapContent(child);
-  }
-  return null;
-}
-var PopperTrigger = defineComponent({
-  name: "DPopperTrigger",
-  setup(_, ctx) {
-    const {
-      slots,
-      attrs
-    } = ctx;
-    return () => {
-      var _a;
-      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
-      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
-      if (!defaultSlot) {
-        return null;
-      }
-      const firstValidChild = getFirstValidChild(defaultSlot);
-      if (!firstValidChild) {
-        return null;
-      }
-      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
-        mounted(el) {
-          triggerRef.value = el;
-        },
-        updated(el) {
-          triggerRef.value = el;
-        },
-        unmounted() {
-          triggerRef.value = null;
-        }
-      }]]);
-    };
-  }
-});
-var dropdown = "";
-let dropdownId = 1;
-var Dropdown = defineComponent({
-  name: "DDropdown",
-  inheritAttrs: false,
-  props: dropdownProps,
-  emits: ["toggle"],
-  setup(props, {
-    slots,
-    attrs,
-    emit,
-    expose
-  }) {
-    const {
-      visible,
-      position,
-      align,
-      offset: offset2,
-      destroyOnHide,
-      shiftOffset,
-      showAnimation
-    } = toRefs(props);
-    const origin = ref();
-    const dropdownRef = ref();
-    const overlayRef = ref();
-    const id = `dropdown_${dropdownId++}`;
-    const isOpen = ref(false);
-    const currentPosition = ref("bottom");
-    const ns2 = useNamespace("dropdown");
-    provide(POPPER_TRIGGER_TOKEN, origin);
-    useDropdownEvent({
-      id,
-      isOpen,
-      origin,
-      dropdownRef,
-      props,
-      emit
-    });
-    useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
-    const {
-      overlayModelValue,
-      overlayShowValue,
-      styles,
-      classes,
-      handlePositionChange
-    } = useOverlayProps(props, currentPosition, isOpen);
-    watch(overlayShowValue, (overlayShowValueVal) => {
-      nextTick(() => {
-        if (!destroyOnHide.value && overlayShowValueVal) {
-          overlayRef.value.updatePosition();
-        }
-      });
-    });
-    expose({
-      updatePosition: () => overlayRef.value.updatePosition()
-    });
-    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
-      default: () => {
-        var _a;
-        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
-      }
-    }), createVNode(Teleport, {
-      "to": "body"
-    }, {
-      default: () => [createVNode(Transition, {
-        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
-      }, {
-        default: () => [withDirectives(createVNode(FlexibleOverlay, {
-          "modelValue": overlayModelValue.value,
-          "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
-          "ref": overlayRef,
-          "origin": origin.value,
-          "position": position.value,
-          "align": align.value,
-          "offset": offset2.value,
-          "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
-          "onPositionChange": handlePositionChange,
-          "click-event-bubble": true,
-          "class": classes.value,
-          "style": styles.value
-        }, {
-          default: () => {
-            var _a;
-            return [createVNode("div", mergeProps({
-              "ref": dropdownRef,
-              "class": ns2.e("menu-wrap")
-            }, attrs), [(_a = slots.menu) == null ? void 0 : _a.call(slots)])];
-          }
-        }), [[vShow, overlayShowValue.value]])]
-      })]
-    })]);
-  }
-});
-const dropdownMenuProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  offset: {
-    type: [Number, Object],
-    default: 4
-  },
-  clickOutside: {
-    type: Function,
-    default: () => true
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  overlayClass: {
-    type: String,
-    default: ""
-  }
-};
-defineComponent({
-  name: "DDropdownMenu",
-  inheritAttrs: false,
-  props: dropdownMenuProps,
-  emits: ["update:modelValue"],
-  setup(props, {
-    slots,
-    attrs,
-    emit
-  }) {
-    const {
-      modelValue,
-      origin,
-      position,
-      align,
-      offset: offset2,
-      clickOutside,
-      showAnimation,
-      overlayClass
-    } = toRefs(props);
-    const dropdownMenuRef = ref(null);
-    const ns2 = useNamespace("dropdown");
-    onClickOutside(dropdownMenuRef, (value) => {
-      var _a, _b;
-      if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
-        emit("update:modelValue", false);
-      }
-    });
-    const currentPosition = ref("bottom");
-    const handlePositionChange = (pos) => {
-      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
-    };
-    const styles = computed(() => ({
-      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
-    }));
-    return () => createVNode(Teleport, {
-      "to": "body"
-    }, {
-      default: () => [createVNode(Transition, {
-        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
-      }, {
-        default: () => [createVNode(FlexibleOverlay, {
-          "modelValue": modelValue.value,
-          "onUpdate:modelValue": ($event) => modelValue.value = $event,
-          "origin": origin == null ? void 0 : origin.value,
-          "position": position.value,
-          "align": align.value,
-          "offset": offset2.value,
-          "onPositionChange": handlePositionChange,
-          "class": overlayClass.value,
-          "style": styles.value
-        }, {
-          default: () => {
-            var _a;
-            return [createVNode("div", mergeProps({
-              "ref": dropdownMenuRef,
-              "class": ns2.e("menu-wrap")
-            }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
-          }
-        })]
-      })]
-    });
-  }
-});
-const tooltipProps = {
-  content: {
-    type: String,
-    default: ""
-  },
-  position: {
-    type: [String, Array],
-    default: "top"
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  mouseEnterDelay: {
-    type: Number,
-    default: 150
-  },
-  mouseLeaveDelay: {
-    type: Number,
-    default: 100
-  },
-  enterable: {
-    type: Boolean,
-    default: true
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  hideAfter: {
-    type: Number,
-    default: 0
-  }
-};
 var lodash = { exports: {} };
 /**
  * @license
@@ -8207,135 +7129,1317 @@ var lodash = { exports: {} };
           return this[takeName](1).value()[0];
         };
       });
-      arrayEach2(["initial", "tail"], function(methodName, index2) {
-        var dropName = "drop" + (index2 ? "" : "Right");
-        LazyWrapper.prototype[methodName] = function() {
-          return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
-        };
+      arrayEach2(["initial", "tail"], function(methodName, index2) {
+        var dropName = "drop" + (index2 ? "" : "Right");
+        LazyWrapper.prototype[methodName] = function() {
+          return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
+        };
+      });
+      LazyWrapper.prototype.compact = function() {
+        return this.filter(identity);
+      };
+      LazyWrapper.prototype.find = function(predicate) {
+        return this.filter(predicate).head();
+      };
+      LazyWrapper.prototype.findLast = function(predicate) {
+        return this.reverse().find(predicate);
+      };
+      LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
+        if (typeof path == "function") {
+          return new LazyWrapper(this);
+        }
+        return this.map(function(value) {
+          return baseInvoke(value, path, args);
+        });
+      });
+      LazyWrapper.prototype.reject = function(predicate) {
+        return this.filter(negate(getIteratee(predicate)));
+      };
+      LazyWrapper.prototype.slice = function(start, end) {
+        start = toInteger(start);
+        var result2 = this;
+        if (result2.__filtered__ && (start > 0 || end < 0)) {
+          return new LazyWrapper(result2);
+        }
+        if (start < 0) {
+          result2 = result2.takeRight(-start);
+        } else if (start) {
+          result2 = result2.drop(start);
+        }
+        if (end !== undefined$1) {
+          end = toInteger(end);
+          result2 = end < 0 ? result2.dropRight(-end) : result2.take(end - start);
+        }
+        return result2;
+      };
+      LazyWrapper.prototype.takeRightWhile = function(predicate) {
+        return this.reverse().takeWhile(predicate).reverse();
+      };
+      LazyWrapper.prototype.toArray = function() {
+        return this.take(MAX_ARRAY_LENGTH);
+      };
+      baseForOwn(LazyWrapper.prototype, function(func, methodName) {
+        var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName), isTaker = /^(?:head|last)$/.test(methodName), lodashFunc = lodash2[isTaker ? "take" + (methodName == "last" ? "Right" : "") : methodName], retUnwrapped = isTaker || /^find/.test(methodName);
+        if (!lodashFunc) {
+          return;
+        }
+        lodash2.prototype[methodName] = function() {
+          var value = this.__wrapped__, args = isTaker ? [1] : arguments, isLazy = value instanceof LazyWrapper, iteratee2 = args[0], useLazy = isLazy || isArray2(value);
+          var interceptor = function(value2) {
+            var result3 = lodashFunc.apply(lodash2, arrayPush2([value2], args));
+            return isTaker && chainAll ? result3[0] : result3;
+          };
+          if (useLazy && checkIteratee && typeof iteratee2 == "function" && iteratee2.length != 1) {
+            isLazy = useLazy = false;
+          }
+          var chainAll = this.__chain__, isHybrid = !!this.__actions__.length, isUnwrapped = retUnwrapped && !chainAll, onlyLazy = isLazy && !isHybrid;
+          if (!retUnwrapped && useLazy) {
+            value = onlyLazy ? value : new LazyWrapper(this);
+            var result2 = func.apply(value, args);
+            result2.__actions__.push({ "func": thru, "args": [interceptor], "thisArg": undefined$1 });
+            return new LodashWrapper(result2, chainAll);
+          }
+          if (isUnwrapped && onlyLazy) {
+            return func.apply(this, args);
+          }
+          result2 = this.thru(interceptor);
+          return isUnwrapped ? isTaker ? result2.value()[0] : result2.value() : result2;
+        };
+      });
+      arrayEach2(["pop", "push", "shift", "sort", "splice", "unshift"], function(methodName) {
+        var func = arrayProto2[methodName], chainName = /^(?:push|sort|unshift)$/.test(methodName) ? "tap" : "thru", retUnwrapped = /^(?:pop|shift)$/.test(methodName);
+        lodash2.prototype[methodName] = function() {
+          var args = arguments;
+          if (retUnwrapped && !this.__chain__) {
+            var value = this.value();
+            return func.apply(isArray2(value) ? value : [], args);
+          }
+          return this[chainName](function(value2) {
+            return func.apply(isArray2(value2) ? value2 : [], args);
+          });
+        };
+      });
+      baseForOwn(LazyWrapper.prototype, function(func, methodName) {
+        var lodashFunc = lodash2[methodName];
+        if (lodashFunc) {
+          var key = lodashFunc.name + "";
+          if (!hasOwnProperty2.call(realNames, key)) {
+            realNames[key] = [];
+          }
+          realNames[key].push({ "name": methodName, "func": lodashFunc });
+        }
+      });
+      realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
+        "name": "wrapper",
+        "func": undefined$1
+      }];
+      LazyWrapper.prototype.clone = lazyClone;
+      LazyWrapper.prototype.reverse = lazyReverse;
+      LazyWrapper.prototype.value = lazyValue;
+      lodash2.prototype.at = wrapperAt;
+      lodash2.prototype.chain = wrapperChain;
+      lodash2.prototype.commit = wrapperCommit;
+      lodash2.prototype.next = wrapperNext;
+      lodash2.prototype.plant = wrapperPlant;
+      lodash2.prototype.reverse = wrapperReverse;
+      lodash2.prototype.toJSON = lodash2.prototype.valueOf = lodash2.prototype.value = wrapperValue;
+      lodash2.prototype.first = lodash2.prototype.head;
+      if (symIterator) {
+        lodash2.prototype[symIterator] = wrapperToIterator;
+      }
+      return lodash2;
+    };
+    var _ = runInContext();
+    if (freeModule) {
+      (freeModule.exports = _)._ = _;
+      freeExports._ = _;
+    } else {
+      root2._ = _;
+    }
+  }).call(commonjsGlobal);
+})(lodash, lodash.exports);
+function useEditorMd(props, ctx) {
+  const {
+    imageUploadToServer,
+    hidePreviewView,
+    mode,
+    maxlength,
+    options,
+    toolbarConfig,
+    customToolbars,
+    customHintReplaceFn,
+    hintConfig,
+    disableChangeEvent,
+    modelValue
+  } = toRefs(props);
+  const toolbars = reactive(cloneDeep_1(DEFAULT_TOOLBARS));
+  const editorRef = ref();
+  const renderRef = ref();
+  const overlayRef = ref();
+  const cursorRef = ref();
+  const isHintShow = ref();
+  const previewHtmlList = ref([]);
+  let editorIns;
+  let canPreviewScrollView = false;
+  let cursorHint = "";
+  let cursorHintEnd = -1;
+  let cursorHintStart = -1;
+  let prefix;
+  let hintShow = false;
+  let CodeMirror;
+  const prefixes = computed(() => {
+    const result = [];
+    for (const key in hintConfig == null ? void 0 : hintConfig.value) {
+      if (typeof (hintConfig == null ? void 0 : hintConfig.value[key]) === "function" || (hintConfig == null ? void 0 : hintConfig.value[key]) && typeof (hintConfig == null ? void 0 : hintConfig.value[key].handler) === "function") {
+        result.push(key);
+      }
+    }
+    return result;
+  });
+  const getEditorIns = () => editorIns;
+  const editorScroll = () => {
+    if (editorIns) {
+      const scrollInfo = editorIns.getScrollInfo();
+      const height = scrollInfo.height - scrollInfo.clientHeight;
+      const ratio = parseFloat(scrollInfo.top) / height;
+      const preview = renderRef.value.$el;
+      const move = (preview.scrollHeight - preview.clientHeight) * ratio;
+      preview.scrollTop = move;
+    }
+  };
+  const previewScroll = () => {
+    const preview = renderRef.value.$el;
+    const height = preview.scrollHeight - preview.clientHeight;
+    const ratio = parseFloat(preview.scrollTop) / height;
+    const move = (editorIns.getScrollInfo().height - editorIns.getScrollInfo().clientHeight) * ratio;
+    editorIns.scrollTo(0, move);
+  };
+  const previewContentChange = (html) => {
+    previewHtmlList.value = [];
+    const domList = parseHTMLStringToDomList(html);
+    domList.forEach((ele) => {
+      if (ele.outerHTML) {
+        previewHtmlList.value.push(ele.outerHTML);
+      }
+    });
+    setTimeout(() => {
+      editorScroll();
+    });
+    nextTick(() => {
+      ctx.emit("previewContentChange");
+    });
+  };
+  const onPreviewScroll = () => {
+    if (!canPreviewScrollView) {
+      return;
+    }
+    previewScroll();
+  };
+  const onPreviewMouseover = () => {
+    canPreviewScrollView = true;
+  };
+  const onPreviewMouseout = () => {
+    canPreviewScrollView = false;
+  };
+  const onChecked = (e) => {
+    ctx.emit("checkedChange", e);
+  };
+  let timer;
+  const attachOverlay = () => {
+    timer = setTimeout(() => {
+      var _a;
+      cursorRef.value = ((_a = editorRef.value) == null ? void 0 : _a.parentNode.querySelector(".CodeMirror-cursor")) || void 0;
+      overlayRef.value.updatePosition();
+      isHintShow.value = true;
+      hintShow = true;
+    });
+  };
+  const hideHint = () => {
+    clearTimeout(timer);
+    isHintShow.value = false;
+  };
+  const showHint = () => {
+    if (hintShow) {
+      hideHint();
+    }
+    attachOverlay();
+  };
+  const getHintList = () => {
+    let handler;
+    if (typeof hintConfig.value[prefix] === "function") {
+      handler = hintConfig.value[prefix];
+    } else if (hintConfig.value[prefix] && typeof hintConfig.value[prefix].handler === "function") {
+      handler = hintConfig.value[prefix].handler;
+    }
+    const callback = (replaceText) => {
+      const cursor = editorIns.getCursor();
+      const endCh = cursorHintEnd;
+      const startCh = cursorHintStart;
+      if (editorIns.getLine(cursor.line).length === cursor.ch) {
+        editorIns.replaceRange(replaceText + " ", { line: cursor.line, ch: startCh }, { line: cursor.line, ch: endCh });
+      } else {
+        editorIns.replaceRange(replaceText, { line: cursor.line, ch: startCh }, { line: cursor.line, ch: endCh });
+        editorIns.setCursor(cursor.line, editorIns.getCursor().ch + 1);
+      }
+      editorIns.focus();
+      hideHint();
+    };
+    handler && handler({ prefix, cursorHint, callback });
+  };
+  const cursorActivityHandler = () => {
+    const cursor = editorIns.getCursor();
+    let i = prefixes.value.length;
+    const value = editorIns.getLine(cursor.line).replace(/\t/g, " ");
+    const selection = editorIns.getSelection();
+    const isImgRegx = /^\!\[\S+/;
+    if (selection) {
+      return;
+    }
+    let nowPrefix = "";
+    let hint = "";
+    while (i >= 1) {
+      i--;
+      nowPrefix = prefixes.value[i];
+      const startPos = value.lastIndexOf(nowPrefix, cursor.ch);
+      const endPos = value.indexOf(" ", cursor.ch) > -1 ? value.indexOf(" ", cursor.ch) : value.length;
+      hint = value.slice(startPos, cursor.ch);
+      if (startPos > 0 && value[startPos - 1] !== " " || startPos < 0 || !hint.includes(nowPrefix) || hint.endsWith(" ") || isImgRegx.test(hint)) {
+        cursorHint = "";
+        cursorHintStart = -1;
+        cursorHintEnd = -1;
+      } else {
+        prefix = prefixes.value[i];
+        cursorHint = hint.slice(prefix.length);
+        cursorHintStart = startPos;
+        cursorHintEnd = endPos;
+        break;
+      }
+    }
+    if (cursorHintStart > -1 && hint[0]) {
+      const spacePosition = value.lastIndexOf(" ", cursor.ch);
+      if (spacePosition > cursorHintStart) {
+        return;
+      }
+      setTimeout(() => {
+        showHint();
+        getHintList();
+      });
+    } else {
+      hideHint();
+    }
+  };
+  const onChange = debounce(() => {
+    const content = editorIns.getValue();
+    if (!disableChangeEvent.value) {
+      ctx.emit("update:modelValue", content);
+      ctx.emit("contentChange", content);
+    }
+    if (!canPreviewScrollView) {
+      editorScroll();
+    }
+  }, disableChangeEvent.value ? 500 : 10, true);
+  const onScroll = () => {
+    if (!canPreviewScrollView) {
+      editorScroll();
+    }
+  };
+  const initEditor = () => {
+    var _a;
+    editorIns = CodeMirror.fromTextArea(editorRef.value, __spreadValues({
+      mode: "markdown",
+      lineNumbers: false,
+      lineWrapping: true
+    }, options.value));
+    if (maxlength.value) {
+      editorIns.setOption("maxLength", maxlength.value);
+    }
+    editorIns.setOption("readOnly", mode.value === "readonly");
+    const shortKeys = {};
+    const flatToolbarConfig = toolbarConfig.value.flat();
+    const tempToolbars = __spreadValues(__spreadValues({}, toolbars), customToolbars == null ? void 0 : customToolbars.value);
+    for (const key of Object.keys(tempToolbars)) {
+      const toolbarItem = tempToolbars[key];
+      if (toolbarItem.shortKey && flatToolbarConfig.includes(toolbarItem.id)) {
+        shortKeys[toolbarItem.shortKey.replace(/\+/g, "-")] = (_a = toolbarItem.handler) == null ? void 0 : _a.bind(null, editorIns, toolbarItem.params);
+      }
+    }
+    editorIns.setOption("extraKeys", Object.assign({
+      Esc: () => {
+        hideHint();
+      }
+    }), shortKeys);
+    editorIns.on("beforeChange", _enforceMaxLength);
+    editorIns.on("cursorActivity", lodash.exports.throttle(cursorActivityHandler, hintConfig.value && hintConfig.value.throttleTime || 300));
+    editorIns.setSize("auto", "100%");
+    refreshEditorCursor();
+    editorIns.setCursor(editorIns.lineCount(), 0);
+    ctx.emit("afterEditorInit", editorIns);
+    editorIns.on("change", onChange);
+    editorIns.on("scroll", onScroll);
+    setTimeout(() => {
+      ctx.emit("contentChange", editorIns.getValue());
+    }, 100);
+  };
+  const onPaste = (e) => {
+    const clipboardData = e.clipboardData;
+    if (!(clipboardData && clipboardData.items)) {
+      return;
+    }
+    if (clipboardData.items.length <= 3) {
+      for (let i = 0; i < clipboardData.items.length; i++) {
+        const item = clipboardData.items[i];
+        if (item.kind === "file" && item.type.indexOf("image") !== -1) {
+          const file = item.getAsFile();
+          if ((file == null ? void 0 : file.size) === 0) {
+            return;
+          }
+          if (imageUploadToServer.value) {
+            const callback = ({ name, imgUrl, title }) => {
+              editorIns.focus();
+              editorIns.replaceSelection(`![${name}](${imgUrl} '${title}')`);
+            };
+            ctx.emit("imageUpload", { file, callback });
+          }
+        }
+      }
+    }
+  };
+  onMounted(async () => {
+    await import("codemirror/addon/display/placeholder.js");
+    await import("codemirror/mode/markdown/markdown.js");
+    const module = await import("codemirror");
+    CodeMirror = module.default;
+    initEditor();
+  });
+  watch(modelValue, (val) => {
+    if (editorIns) {
+      if (val === editorIns.getValue()) {
+        return;
+      }
+      editorIns.setValue(val);
+    }
+  });
+  watch(imageUploadToServer, (val) => {
+    if (toolbars["image"].params) {
+      toolbars["image"].params.imageUploadToServer = val;
+    }
+    if (toolbars["image"].params && !toolbars["image"].params.imageUpload) {
+      toolbars["image"].params.imageUpload = (data) => {
+        ctx.emit("imageUpload", data);
+      };
+    }
+  }, { immediate: true });
+  watch(hidePreviewView, () => {
+    refreshEditorCursor();
+  });
+  watch(mode, (val) => {
+    setTimeout(() => {
+      if (editorIns) {
+        refreshEditorCursor();
+        editorIns.setOption("readOnly", val === "readonly");
+      }
+    });
+  });
+  watch(maxlength, (val) => {
+    if (editorIns) {
+      editorIns.setOption("maxLength", val);
+    }
+  });
+  return {
+    editorRef,
+    overlayRef,
+    cursorRef,
+    renderRef,
+    toolbars,
+    previewHtmlList,
+    isHintShow,
+    getEditorIns,
+    onPaste,
+    previewContentChange,
+    onChecked,
+    onPreviewScroll,
+    onPreviewMouseout,
+    onPreviewMouseover
+  };
+}
+function useEditorMdTheme(callback) {
+  const isDarkMode = ref(false);
+  let themeService;
+  const themeChange = () => {
+    if (themeService) {
+      isDarkMode.value = themeService.currentTheme.id.indexOf("dark") !== -1;
+      callback();
+    }
+  };
+  onBeforeMount(() => {
+    themeService = window["devuiThemeService"];
+  });
+  onMounted(() => {
+    themeChange();
+    if (themeService && themeService.eventBus) {
+      themeService.eventBus.add("themeChanged", themeChange);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (themeService && themeService.eventBus) {
+      themeService.eventBus.remove("themeChanged", themeChange);
+    }
+  });
+  return { isDarkMode };
+}
+const commonProps = {
+  baseUrl: {
+    type: String,
+    default: null
+  },
+  breaks: {
+    type: Boolean,
+    default: true
+  },
+  customParse: {
+    type: Function,
+    default: null
+  },
+  renderParse: {
+    type: Function,
+    default: null
+  },
+  mdRules: {
+    type: Object,
+    default: () => ({})
+  },
+  customRendererRules: {
+    type: Array,
+    default: () => []
+  },
+  customXssRules: {
+    type: Array,
+    default: () => []
+  },
+  mdPlugins: {
+    type: Array,
+    default: () => []
+  }
+};
+const editorMdProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  customThemeConfig: {
+    type: Object
+  },
+  customToolbars: {
+    type: Object
+  },
+  disableChangeEvent: {
+    type: Boolean,
+    default: false
+  },
+  editorContainerHeight: {
+    type: Number
+  },
+  imageUploadToServer: {
+    type: Boolean,
+    default: false
+  },
+  hidePreviewView: {
+    type: Boolean,
+    default: false
+  },
+  maxlength: {
+    type: Number,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  toolbarConfig: {
+    type: Array,
+    default: () => DEFAULT_TOOLBAR_CONFIG
+  },
+  fullscreenZIndex: {
+    type: Number,
+    default: 10
+  },
+  hintConfig: {
+    type: Object,
+    default: {}
+  },
+  customHintReplaceFn: {
+    type: Function
+  }
+});
+const EditorMdInjectionKey = Symbol("d-editor-md");
+const mdRenderProps = __spreadProps(__spreadValues({}, commonProps), {
+  content: {
+    type: String,
+    default: ""
+  },
+  disableRender: {
+    type: Boolean,
+    default: false
+  }
+});
+const mdToolbarItemProps = {
+  config: {
+    type: Object,
+    default: () => ({})
+  }
+};
+const dropdownProps = {
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  closeScope: {
+    type: String,
+    default: "all"
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  offset: {
+    type: [Number, Object],
+    default: 4
+  },
+  shiftOffset: {
+    type: Number
+  },
+  closeOnMouseLeaveMenu: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
+  },
+  destroyOnHide: {
+    type: Boolean,
+    default: true
+  }
+};
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
+const dropdownMap = /* @__PURE__ */ new Map();
+function subscribeEvent(dom, type, callback) {
+  dom == null ? void 0 : dom.addEventListener(type, callback);
+  return () => {
+    dom == null ? void 0 : dom.removeEventListener(type, callback);
+  };
+}
+const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
+  let overlayEnter = false;
+  let originEnter = false;
+  const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
+  const toggle = (status) => {
+    isOpen.value = status;
+    emit("toggle", isOpen.value);
+  };
+  const handleLeave = async (elementType, closeAll) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
+      return;
+    }
+    if (closeAll) {
+      [...dropdownMap.values()].reverse().forEach((item) => {
+        setTimeout(() => {
+          var _a;
+          (_a = item.toggle) == null ? void 0 : _a.call(item);
+        }, 0);
       });
-      LazyWrapper.prototype.compact = function() {
-        return this.filter(identity);
-      };
-      LazyWrapper.prototype.find = function(predicate) {
-        return this.filter(predicate).head();
-      };
-      LazyWrapper.prototype.findLast = function(predicate) {
-        return this.reverse().find(predicate);
-      };
-      LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
-        if (typeof path == "function") {
-          return new LazyWrapper(this);
+    }
+    toggle(false);
+  };
+  watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
+    const originEl = getElement(originVal);
+    const subscriptions = [];
+    setTimeout(() => {
+      subscriptions.push(subscribeEvent(document, "click", (e) => {
+        e.stopPropagation();
+        const dropdownValues = [...dropdownMap.values()];
+        if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
+          var _a;
+          return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
+        }) && dropdownValues.some((item) => {
+          var _a;
+          return (_a = item.menuEl) == null ? void 0 : _a.contains(e.target);
+        })) {
+          return;
         }
-        return this.map(function(value) {
-          return baseInvoke(value, path, args);
+        [...dropdownMap.values()].reverse().forEach((item) => {
+          setTimeout(() => {
+            var _a, _b;
+            if (!((_a = item.toggleEl) == null ? void 0 : _a.contains(e.target))) {
+              (_b = item.toggle) == null ? void 0 : _b.call(item);
+            }
+          }, 0);
         });
-      });
-      LazyWrapper.prototype.reject = function(predicate) {
-        return this.filter(negate(getIteratee(predicate)));
-      };
-      LazyWrapper.prototype.slice = function(start, end) {
-        start = toInteger(start);
-        var result2 = this;
-        if (result2.__filtered__ && (start > 0 || end < 0)) {
-          return new LazyWrapper(result2);
+        overlayEnter = false;
+      }));
+    }, 0);
+    if (triggerVal === "click") {
+      subscriptions.push(subscribeEvent(originEl, "click", () => toggle(!isOpen.value)), subscribeEvent(dropdownEl, "mouseleave", (e) => {
+        var _a;
+        if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
+          handleLeave("dropdown", true);
         }
-        if (start < 0) {
-          result2 = result2.takeRight(-start);
-        } else if (start) {
-          result2 = result2.drop(start);
+      }));
+    } else if (triggerVal === "hover") {
+      subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
+        originEnter = true;
+        toggle(true);
+      }), subscribeEvent(originEl, "mouseleave", () => {
+        originEnter = false;
+        handleLeave("origin");
+      }), subscribeEvent(dropdownEl, "mouseenter", () => {
+        overlayEnter = true;
+        isOpen.value = true;
+      }), subscribeEvent(dropdownEl, "mouseleave", (e) => {
+        var _a;
+        overlayEnter = false;
+        if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
+          return;
         }
-        if (end !== undefined$1) {
-          end = toInteger(end);
-          result2 = end < 0 ? result2.dropRight(-end) : result2.take(end - start);
+        handleLeave("dropdown", true);
+      }));
+    }
+    onInvalidate(() => subscriptions.forEach((v) => v()));
+  });
+};
+function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
+  const calcPopDirection = (dropdownEl) => {
+    const elementHeight = dropdownEl.offsetHeight;
+    const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
+    const isBottomEnough = bottomDistance >= elementHeight;
+    if (!isBottomEnough) {
+      popDirection.value = "top";
+    } else {
+      popDirection.value = "bottom";
+    }
+  };
+  watch(visible, (newVal, oldVal) => {
+    if (oldVal === void 0) {
+      return;
+    }
+    isOpen.value = newVal;
+    emit("toggle", isOpen.value);
+  }, { immediate: true });
+  watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
+    var _a;
+    if (isOpenVal) {
+      dropdownMap.set(id, __spreadProps(__spreadValues({}, dropdownMap.get(id)), {
+        menuEl: dropdownEl,
+        toggle: () => {
+          isOpen.value = false;
+          emit("toggle", isOpen.value);
         }
-        return result2;
-      };
-      LazyWrapper.prototype.takeRightWhile = function(predicate) {
-        return this.reverse().takeWhile(predicate).reverse();
-      };
-      LazyWrapper.prototype.toArray = function() {
-        return this.take(MAX_ARRAY_LENGTH);
-      };
-      baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-        var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName), isTaker = /^(?:head|last)$/.test(methodName), lodashFunc = lodash2[isTaker ? "take" + (methodName == "last" ? "Right" : "") : methodName], retUnwrapped = isTaker || /^find/.test(methodName);
-        if (!lodashFunc) {
-          return;
+      }));
+      for (const value of dropdownMap.values()) {
+        if ((_a = value.menuEl) == null ? void 0 : _a.contains(origin.value)) {
+          value.child = dropdownEl;
+        }
+      }
+    }
+    if (dropdownEl) {
+      calcPopDirection(dropdownEl);
+    }
+  });
+  onMounted(() => {
+    dropdownMap.set(id, { toggleEl: origin.value });
+  });
+  onUnmounted(() => {
+    dropdownMap.delete(id);
+  });
+}
+function useOverlayProps(props, currentPosition, isOpen) {
+  const { showAnimation, overlayClass, destroyOnHide } = toRefs(props);
+  const overlayModelValue = ref(false);
+  const overlayShowValue = ref(false);
+  const styles = computed(() => ({
+    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+    zIndex: "var(--devui-z-index-dropdown, 1052)"
+  }));
+  const classes = computed(() => ({
+    "fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
+    "fade-in-top": showAnimation.value && isOpen.value && currentPosition.value === "top",
+    [`${overlayClass.value}`]: true
+  }));
+  const handlePositionChange = (pos) => {
+    currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
+  };
+  watch(isOpen, (isOpenVal) => {
+    overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
+    overlayShowValue.value = isOpenVal;
+  });
+  return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
+}
+const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
+    event.preventDefault();
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", false);
+    }
+  };
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
+  };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var fixedOverlay = "";
+defineComponent({
+  name: "DFixedOverlay",
+  inheritAttrs: false,
+  props: fixedOverlayProps,
+  emits: ["update:modelValue", "click"],
+  setup(props, ctx) {
+    const {
+      modelValue
+    } = toRefs(props);
+    const ns2 = useNamespace("fixed-overlay");
+    const {
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns2.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns2.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
+    });
+  }
+});
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  shiftOffset: {
+    type: Number
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  let originParent = null;
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
+    if (!overlayEl) {
+      return;
+    }
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
+      nextTick(updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
+    const {
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": ns2.b()
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": ns2.e("arrow")
+      }, null)]);
+    };
+  }
+});
+const isObject = (val) => val !== null && typeof val === "object";
+const ns = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns.b() }, content);
+}
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
+    }
+    return wrapContent(child);
+  }
+  return null;
+}
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
+    const {
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
+      }
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
         }
-        lodash2.prototype[methodName] = function() {
-          var value = this.__wrapped__, args = isTaker ? [1] : arguments, isLazy = value instanceof LazyWrapper, iteratee2 = args[0], useLazy = isLazy || isArray2(value);
-          var interceptor = function(value2) {
-            var result3 = lodashFunc.apply(lodash2, arrayPush2([value2], args));
-            return isTaker && chainAll ? result3[0] : result3;
-          };
-          if (useLazy && checkIteratee && typeof iteratee2 == "function" && iteratee2.length != 1) {
-            isLazy = useLazy = false;
-          }
-          var chainAll = this.__chain__, isHybrid = !!this.__actions__.length, isUnwrapped = retUnwrapped && !chainAll, onlyLazy = isLazy && !isHybrid;
-          if (!retUnwrapped && useLazy) {
-            value = onlyLazy ? value : new LazyWrapper(this);
-            var result2 = func.apply(value, args);
-            result2.__actions__.push({ "func": thru, "args": [interceptor], "thisArg": undefined$1 });
-            return new LodashWrapper(result2, chainAll);
-          }
-          if (isUnwrapped && onlyLazy) {
-            return func.apply(this, args);
-          }
-          result2 = this.thru(interceptor);
-          return isUnwrapped ? isTaker ? result2.value()[0] : result2.value() : result2;
-        };
-      });
-      arrayEach2(["pop", "push", "shift", "sort", "splice", "unshift"], function(methodName) {
-        var func = arrayProto2[methodName], chainName = /^(?:push|sort|unshift)$/.test(methodName) ? "tap" : "thru", retUnwrapped = /^(?:pop|shift)$/.test(methodName);
-        lodash2.prototype[methodName] = function() {
-          var args = arguments;
-          if (retUnwrapped && !this.__chain__) {
-            var value = this.value();
-            return func.apply(isArray2(value) ? value : [], args);
-          }
-          return this[chainName](function(value2) {
-            return func.apply(isArray2(value2) ? value2 : [], args);
-          });
-        };
-      });
-      baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-        var lodashFunc = lodash2[methodName];
-        if (lodashFunc) {
-          var key = lodashFunc.name + "";
-          if (!hasOwnProperty2.call(realNames, key)) {
-            realNames[key] = [];
-          }
-          realNames[key].push({ "name": methodName, "func": lodashFunc });
+      }]]);
+    };
+  }
+});
+var dropdown = "";
+let dropdownId = 1;
+var Dropdown = defineComponent({
+  name: "DDropdown",
+  inheritAttrs: false,
+  props: dropdownProps,
+  emits: ["toggle"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const {
+      visible,
+      position,
+      align,
+      offset: offset2,
+      destroyOnHide,
+      shiftOffset,
+      showAnimation
+    } = toRefs(props);
+    const origin = ref();
+    const dropdownRef = ref();
+    const overlayRef = ref();
+    const id = `dropdown_${dropdownId++}`;
+    const isOpen = ref(false);
+    const currentPosition = ref("bottom");
+    const ns2 = useNamespace("dropdown");
+    provide(POPPER_TRIGGER_TOKEN, origin);
+    useDropdownEvent({
+      id,
+      isOpen,
+      origin,
+      dropdownRef,
+      props,
+      emit
+    });
+    useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+    const {
+      overlayModelValue,
+      overlayShowValue,
+      styles,
+      classes,
+      handlePositionChange
+    } = useOverlayProps(props, currentPosition, isOpen);
+    watch(overlayShowValue, (overlayShowValueVal) => {
+      nextTick(() => {
+        if (!destroyOnHide.value && overlayShowValueVal) {
+          overlayRef.value.updatePosition();
         }
       });
-      realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
-        "name": "wrapper",
-        "func": undefined$1
-      }];
-      LazyWrapper.prototype.clone = lazyClone;
-      LazyWrapper.prototype.reverse = lazyReverse;
-      LazyWrapper.prototype.value = lazyValue;
-      lodash2.prototype.at = wrapperAt;
-      lodash2.prototype.chain = wrapperChain;
-      lodash2.prototype.commit = wrapperCommit;
-      lodash2.prototype.next = wrapperNext;
-      lodash2.prototype.plant = wrapperPlant;
-      lodash2.prototype.reverse = wrapperReverse;
-      lodash2.prototype.toJSON = lodash2.prototype.valueOf = lodash2.prototype.value = wrapperValue;
-      lodash2.prototype.first = lodash2.prototype.head;
-      if (symIterator) {
-        lodash2.prototype[symIterator] = wrapperToIterator;
+    });
+    expose({
+      updatePosition: () => overlayRef.value.updatePosition()
+    });
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
       }
-      return lodash2;
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
+      }, {
+        default: () => [withDirectives(createVNode(FlexibleOverlay, {
+          "modelValue": overlayModelValue.value,
+          "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
+          "ref": overlayRef,
+          "origin": origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
+          "onPositionChange": handlePositionChange,
+          "click-event-bubble": true,
+          "class": classes.value,
+          "style": styles.value
+        }, {
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "ref": dropdownRef,
+              "class": ns2.e("menu-wrap")
+            }, attrs), [(_a = slots.menu) == null ? void 0 : _a.call(slots)])];
+          }
+        }), [[vShow, overlayShowValue.value]])]
+      })]
+    })]);
+  }
+});
+const dropdownMenuProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  offset: {
+    type: [Number, Object],
+    default: 4
+  },
+  clickOutside: {
+    type: Function,
+    default: () => true
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
+  }
+};
+defineComponent({
+  name: "DDropdownMenu",
+  inheritAttrs: false,
+  props: dropdownMenuProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const {
+      modelValue,
+      origin,
+      position,
+      align,
+      offset: offset2,
+      clickOutside,
+      showAnimation,
+      overlayClass
+    } = toRefs(props);
+    const dropdownMenuRef = ref(null);
+    const ns2 = useNamespace("dropdown");
+    onClickOutside(dropdownMenuRef, (value) => {
+      var _a, _b;
+      if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
+        emit("update:modelValue", false);
+      }
+    });
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
     };
-    var _ = runInContext();
-    if (freeModule) {
-      (freeModule.exports = _)._ = _;
-      freeExports._ = _;
-    } else {
-      root2._ = _;
-    }
-  }).call(commonjsGlobal);
-})(lodash, lodash.exports);
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
+    }));
+    return () => createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
+      }, {
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": modelValue.value,
+          "onUpdate:modelValue": ($event) => modelValue.value = $event,
+          "origin": origin == null ? void 0 : origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "onPositionChange": handlePositionChange,
+          "class": overlayClass.value,
+          "style": styles.value
+        }, {
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "ref": dropdownMenuRef,
+              "class": ns2.e("menu-wrap")
+            }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
+          }
+        })]
+      })]
+    });
+  }
+});
+const tooltipProps = {
+  content: {
+    type: String,
+    default: ""
+  },
+  position: {
+    type: [String, Array],
+    default: "top"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  mouseEnterDelay: {
+    type: Number,
+    default: 150
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100
+  },
+  enterable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  hideAfter: {
+    type: Number,
+    default: 0
+  }
+};
 const transformOriginMap = {
   top: "50% calc(100% + 8px)",
   bottom: "50% -8px",
@@ -8427,9 +8531,11 @@ var Tooltip = defineComponent({
       onMouseenterOverlay
     } = useTooltip(origin, props);
     const ns2 = useNamespace("tooltip");
-    const className = computed(() => {
-      return [ns2.b(), ns2.m(placement.value)].join(" ");
-    });
+    const className = computed(() => ({
+      [ns2.b()]: true,
+      [ns2.m(placement.value)]: true,
+      [ns2.m("with-content")]: slots.content
+    }));
     provide(POPPER_TRIGGER_TOKEN, origin);
     return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
       default: () => {
@@ -8456,9 +8562,12 @@ var Tooltip = defineComponent({
           "onMouseenter": onMouseenterOverlay,
           "onMouseleave": onMouseleave
         }, {
-          default: () => [createVNode("span", {
-            "innerHTML": content.value
-          }, null)]
+          default: () => {
+            var _a;
+            return [slots.content ? (_a = slots.content) == null ? void 0 : _a.call(slots) : createVNode("span", {
+              "innerHTML": content.value
+            }, null)];
+          }
         })]
       })]
     })]);
@@ -8565,13 +8674,17 @@ var ToolbarItem = defineComponent({
       const editorIns = getEditorIns();
       if (config.id === "fullscreen") {
         showFullscreen.value = !showFullscreen.value;
-      } else {
-        (_a = config.handler) == null ? void 0 : _a.call(config, editorIns, config.params);
+        if (window) {
+          const event = new Event("resize");
+          window.dispatchEvent(event);
+        }
       }
+      (_a = config.handler) == null ? void 0 : _a.call(config, editorIns, config.params);
     };
     return () => createVNode(Fragment, null, [config.type === "button" && createVNode(Tooltip, {
       "position": ["top", "bottom"],
-      "content": getTooltipContent(config.name, config.shortKey)
+      "content": getTooltipContent(config.name, config.shortKey),
+      "hide-after": 1e3
     }, {
       default: () => [createVNode("span", {
         "class": "md-toolbar-item",
@@ -8583,8 +8696,9 @@ var ToolbarItem = defineComponent({
       "align": "start"
     }, {
       default: () => createVNode("span", null, [createVNode(Tooltip, {
-        "position": ["top"],
-        "content": getTooltipContent(config.name)
+        "position": showFullscreen.value ? ["right"] : ["top"],
+        "content": getTooltipContent(config.name),
+        "hide-after": 1e3
       }, {
         default: () => [createVNode("span", {
           "class": "md-toolbar-item",
@@ -9010,7 +9124,7 @@ function useEditorMdRender(props, ctx) {
       const result = previewRef.value.querySelectorAll("input");
       const index2 = [...result].filter((el) => el.type === "checkbox").findIndex((item) => item === e.target);
       const checkContent = setChecked(e.target.checked, index2);
-      ctx.emit("mdCheckedEvent", checkContent);
+      ctx.emit("checkedChange", checkContent);
     }
   };
   return { previewRef, renderService, onPreviewClick, setContainerContent };
@@ -9064,7 +9178,7 @@ function useMdRenderWatcher(props, renderService, setContainerContent) {
 var MdRender = defineComponent({
   name: "DMdRender",
   props: mdRenderProps,
-  emits: ["mdRenderChange", "mdCheckedEvent"],
+  emits: ["mdRenderChange", "checkedChange"],
   setup(props, ctx) {
     const {
       previewRef,
@@ -9090,7 +9204,7 @@ function _isSlot(s) {
 var EditorMd = defineComponent({
   name: "DEditorMd",
   props: editorMdProps,
-  emits: ["update:modelValue", "mdCheckedEvent", "selectHint", "afterEditorInit", "contentChange", "previewContentChange", "imageUpload"],
+  emits: ["update:modelValue", "checkedChange", "selectHint", "afterEditorInit", "contentChange", "previewContentChange", "imageUpload"],
   setup(props, ctx) {
     const {
       mode,
@@ -9113,7 +9227,10 @@ var EditorMd = defineComponent({
     const showFullscreen = ref(false);
     const {
       editorRef,
+      overlayRef,
+      cursorRef,
       renderRef,
+      isHintShow,
       toolbars,
       previewHtmlList,
       onPaste,
@@ -9163,7 +9280,19 @@ var EditorMd = defineComponent({
         }, [createVNode("textarea", {
           "ref": editorRef,
           "placeholder": placeholder.value
-        }, [modelValue.value]), Boolean(maxlength == null ? void 0 : maxlength.value) && createVNode("div", {
+        }, [modelValue.value]), createVNode(FlexibleOverlay, {
+          "ref": overlayRef,
+          "modelValue": isHintShow.value,
+          "onUpdate:modelValue": ($event) => isHintShow.value = $event,
+          "origin": cursorRef.value || void 0,
+          "align": "start",
+          "position": ["bottom-start"]
+        }, {
+          default: () => {
+            var _a, _b;
+            return [(_b = (_a = ctx.slots) == null ? void 0 : _a.hintTemplate) == null ? void 0 : _b.call(_a)];
+          }
+        }), Boolean(maxlength == null ? void 0 : maxlength.value) && createVNode("div", {
           "class": "dp-md-count"
         }, [modelValue.value.length || 0, createTextVNode("/"), maxlength.value])]), createVNode(MdRender, {
           "ref": renderRef,
@@ -9178,7 +9307,7 @@ var EditorMd = defineComponent({
           "disable-render": true,
           "md-plugins": mdPlugins.value,
           "onMdRenderChange": previewContentChange,
-          "onMdCheckedEvent": onChecked,
+          "onCheckedChange": onChecked,
           "onScroll": onPreviewScroll,
           "onMouseover": onPreviewMouseover,
           "onMouseout": onPreviewMouseout
@@ -9192,6 +9321,92 @@ var EditorMd = defineComponent({
     };
   }
 });
+const checkboxReplace = function(md, options) {
+  let lastId;
+  const arrReplaceAt = md.utils.arrayReplaceAt;
+  lastId = 0;
+  const defaults = {
+    divWrap: false,
+    divClass: "checkbox",
+    idPrefix: "checkbox"
+  };
+  options = lodash.exports.extend(defaults, options);
+  const pattern = /\[(X|\s|\_|\-)\]\s(.*)/i;
+  const createTokens = function(checked, label, Token2) {
+    let token;
+    const nodes = [];
+    if (options.divWrap) {
+      token = new Token2("checkbox_open", "div", 1);
+      token.attrs = [["class", "checkbox"]];
+      nodes.push(token);
+    }
+    const id = options.idPrefix + lastId;
+    lastId += 1;
+    token = new Token2("checkbox_input", "input", 0);
+    token.attrs = [
+      ["type", "checkbox"],
+      ["id", id]
+    ];
+    if (options.disabled) {
+      token.attrs.push(["disabled", true]);
+    }
+    if (checked === true) {
+      token.attrs.push(["checked", "true"]);
+    }
+    nodes.push(token);
+    token = new Token2("label_open", "label", 1);
+    token.attrs = [["for", id]];
+    nodes.push(token);
+    token = new Token2("text", "", 0);
+    token.content = label;
+    nodes.push(token);
+    nodes.push(new Token2("label_close", "label", -1));
+    if (options.divWrap) {
+      nodes.push(new Token2("checkbox_close", "div", -1));
+    }
+    return nodes;
+  };
+  const splitTextToken = function(original, Token2) {
+    let checked;
+    const text = original.content;
+    const matches = text.match(pattern);
+    if (matches === null) {
+      return original;
+    }
+    checked = false;
+    const value = matches[1];
+    const label = matches[2];
+    if (value === "X" || value === "x") {
+      checked = true;
+    }
+    return createTokens(checked, label, Token2);
+  };
+  return function(state) {
+    let i, j, token, tokens;
+    const blockTokens = state.tokens;
+    j = 0;
+    const l = blockTokens.length;
+    while (j < l) {
+      if (blockTokens[j].type !== "inline") {
+        j++;
+        continue;
+      }
+      tokens = blockTokens[j].children;
+      i = tokens.length - 1;
+      while (i >= 0) {
+        token = tokens[i];
+        if (token.type === "text" && pattern.test(token.content)) {
+          blockTokens[j].children = tokens = arrReplaceAt(tokens, i, splitTextToken(token, state.Token));
+        }
+        i--;
+      }
+      j++;
+    }
+  };
+};
+function checkbox(md, options) {
+  md.core.ruler.push("checkbox", checkboxReplace(md, options));
+}
 var index = {
   title: "Markdown MD\u7F16\u8F91\u5668",
   category: "\u6F14\u8FDB\u4E2D",
@@ -9201,4 +9416,4 @@ var index = {
     app.component(MdRender.name, MdRender);
   }
 };
-export { EditorMd, EditorMdInjectionKey, MdRender, index as default, editorMdProps, mdRenderProps, mdToolbarItemProps };
+export { EditorMd, EditorMdInjectionKey, MdRender, checkbox, index as default, editorMdProps, mdRenderProps, mdToolbarItemProps };