md-editor-v3/lib/es/chunks/index.mjs

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

import { defineComponent as H, reactive as D, ref as w, watch as $, onMounted as B, onBeforeUnmount as N, cloneVNode as W, createVNode as y, inject as O } from "vue";
import { p as i } from "./config.mjs";
import { g as u } from "./vue-tsx.mjs";
const j = {
  overlay: {
    type: [String, Object],
    default: ""
  },
  visible: {
    type: Boolean,
    default: !1
  },
  onChange: {
    type: Function,
    default: () => {
    }
  },
  // 相对滚动的元素选择器
  relative: {
    type: String,
    default: "html"
  },
  disabled: {
    type: Boolean,
    default: void 0
  }
}, I = /* @__PURE__ */ H({
  name: `${i}-dropdown`,
  props: j,
  setup(e, a) {
    const d = `${i}-dropdown-hidden`, t = D({
      overlayClass: [d],
      overlayStyle: {},
      triggerHover: !1,
      overlayHover: !1
    }), r = w(), l = w(), s = () => {
      if (e.disabled)
        return !1;
      t.triggerHover = !0;
      const n = r.value, o = l.value;
      if (!n || !o)
        return;
      const g = n.getBoundingClientRect(), c = n.offsetTop, L = n.offsetLeft, E = g.height, T = g.width, S = n.getRootNode(), m = S.querySelector(e.relative)?.scrollLeft || 0, C = S.querySelector(e.relative)?.clientWidth || 0;
      let f = L - o.offsetWidth / 2 + T / 2 - m;
      f + o.offsetWidth > m + C && (f = m + C - o.offsetWidth), f < 0 && (f = 0), t.overlayStyle = {
        ...t.overlayStyle,
        top: c + E + "px",
        left: f + "px"
      }, e.onChange(!0);
    }, b = () => {
      if (e.disabled)
        return !1;
      t.overlayHover = !0;
    };
    $(() => e.visible, (n) => {
      n ? t.overlayClass = t.overlayClass.filter((o) => o !== d) : t.overlayClass.push(d);
    });
    let p = -1;
    const v = (n) => {
      r.value === n.target ? t.triggerHover = !1 : t.overlayHover = !1, clearTimeout(p), p = window.setTimeout(() => {
        !t.overlayHover && !t.triggerHover && e.onChange(!1);
      }, 10);
    };
    return B(() => {
      r.value.addEventListener("mouseenter", s), r.value.addEventListener("mouseleave", v), l.value.addEventListener("mouseenter", b), l.value.addEventListener("mouseleave", v);
    }), N(() => {
      r.value.removeEventListener("mouseenter", s), r.value.removeEventListener("mouseleave", v), l.value.removeEventListener("mouseenter", b), l.value.removeEventListener("mouseleave", v);
    }), () => {
      const n = u({
        ctx: a
      }), o = u({
        props: e,
        ctx: a
      }, "overlay"), g = W(n instanceof Array ? n[0] : n, {
        ref: r,
        key: "cloned-dropdown-trigger"
      }), c = y("div", {
        class: [`${i}-dropdown`, t.overlayClass],
        style: t.overlayStyle,
        ref: l
      }, [y("div", {
        class: `${i}-dropdown-overlay`
      }, [o instanceof Array ? o[0] : o])]);
      return [g, c];
    };
  }
}), R = {
  title: {
    type: String,
    default: ""
  },
  visible: {
    type: Boolean,
    default: void 0
  },
  /**
   * 展示在工具栏的内容，通常是个图标
   *
   * @deprecated 使用默认插槽代替
   */
  trigger: {
    type: [String, Object],
    default: void 0
  },
  onChange: {
    type: Function,
    default: void 0
  },
  // 下拉框中的内容
  overlay: {
    type: [String, Object],
    default: void 0
  },
  /**
   * ==没有意义，仅用于规避克隆组件自动嵌入insert方法时，传入的是该组件而产生的waring
   */
  insert: {
    type: Function,
    default: void 0
  },
  language: {
    type: String,
    default: void 0
  },
  theme: {
    type: String,
    default: void 0
  },
  previewTheme: {
    type: String,
    default: void 0
  },
  codeTheme: {
    type: String,
    default: void 0
  },
  disabled: {
    type: Boolean,
    default: void 0
  },
  showToolbarName: {
    type: Boolean,
    default: void 0
  }
  /**
   * ==结束
   */
}, h = /* @__PURE__ */ H({
  name: "DropdownToolbar",
  props: R,
  emits: ["onChange"],
  setup(e, a) {
    const d = O("editorId");
    return () => {
      const t = u({
        props: e,
        ctx: a
      }, "trigger"), r = u({
        props: e,
        ctx: a
      }, "overlay"), l = u({
        props: e,
        ctx: a
      });
      return y(I, {
        relative: `#${d}-toolbar-wrapper`,
        visible: e.visible,
        onChange: (s) => {
          e.onChange?.(s), a.emit("onChange", s);
        },
        overlay: r,
        disabled: e.disabled
      }, {
        default: () => [y("button", {
          class: [`${i}-toolbar-item`, e.disabled && `${i}-disabled`],
          title: e.title || "",
          disabled: e.disabled,
          type: "button"
        }, [l || t])]
      });
    };
  }
});
h.install = (e) => (e.component(h.name, h), e);
export {
  h as D,
  I as a
};