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 B, ref as w, watch as D, onMounted as $, onBeforeUnmount as N, cloneVNode as W, createVNode as c, inject as I } from "vue";
import { p as i } from "./config.mjs";
import { g as f } from "./vue-tsx.mjs";
const O = {
  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
  }
}, j = /* @__PURE__ */ H({
  name: `${i}-dropdown`,
  props: O,
  setup(e, a) {
    const d = `${i}-dropdown-hidden`, t = B({
      overlayClass: [d],
      overlayStyle: {},
      triggerHover: !1,
      overlayHover: !1
    }), o = w(), l = w(), u = () => {
      if (e.disabled)
        return !1;
      t.triggerHover = !0;
      const n = o.value, r = l.value;
      if (!n || !r)
        return;
      const g = n.getBoundingClientRect(), y = n.offsetTop, L = n.offsetLeft, E = g.height, T = g.width, p = n.getRootNode(), m = p.querySelector(e.relative)?.scrollLeft || 0, C = p.querySelector(e.relative)?.clientWidth || 0;
      let s = L - r.offsetWidth / 2 + T / 2 - m;
      s + r.offsetWidth > m + C && (s = m + C - r.offsetWidth), s < 0 && (s = 0), t.overlayStyle = {
        ...t.overlayStyle,
        insetBlockStart: y + E + "px",
        insetInlineStart: s + "px"
      }, e.onChange(!0);
    }, b = () => {
      if (e.disabled)
        return !1;
      t.overlayHover = !0;
    };
    D(() => e.visible, (n) => {
      n ? t.overlayClass = t.overlayClass.filter((r) => r !== d) : t.overlayClass.push(d);
    });
    let S = -1;
    const v = (n) => {
      o.value === n.target ? t.triggerHover = !1 : t.overlayHover = !1, clearTimeout(S), S = window.setTimeout(() => {
        !t.overlayHover && !t.triggerHover && e.onChange(!1);
      }, 10);
    };
    return $(() => {
      o.value.addEventListener("mouseenter", u), o.value.addEventListener("mouseleave", v), l.value.addEventListener("mouseenter", b), l.value.addEventListener("mouseleave", v);
    }), N(() => {
      o.value.removeEventListener("mouseenter", u), o.value.removeEventListener("mouseleave", v), l.value.removeEventListener("mouseenter", b), l.value.removeEventListener("mouseleave", v);
    }), () => {
      const n = f({
        ctx: a
      }), r = f({
        props: e,
        ctx: a
      }, "overlay"), g = W(n instanceof Array ? n[0] : n, {
        ref: o,
        key: "cloned-dropdown-trigger"
      }), y = c("div", {
        class: [`${i}-dropdown`, t.overlayClass],
        style: t.overlayStyle,
        ref: l
      }, [c("div", {
        class: `${i}-dropdown-overlay`
      }, [r instanceof Array ? r[0] : r])]);
      return [g, y];
    };
  }
}), 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 = I("editorId"), t = (o) => {
      e.onChange?.(o), a.emit("onChange", o);
    };
    return () => {
      const o = f({
        props: e,
        ctx: a
      }, "trigger"), l = f({
        props: e,
        ctx: a
      }, "overlay"), u = f({
        props: e,
        ctx: a
      });
      return c(j, {
        relative: `#${d}-toolbar-wrapper`,
        visible: e.visible,
        onChange: t,
        overlay: l,
        disabled: e.disabled
      }, {
        default: () => [c("button", {
          class: [`${i}-toolbar-item`, e.disabled && `${i}-disabled`],
          title: e.title || "",
          disabled: e.disabled,
          type: "button"
        }, [u || o])]
      });
    };
  }
});
h.install = (e) => (e.component(h.name, h), e);
export {
  h as D,
  j as a
};