vuux/dist/es/EditorText/hook/useEditorText.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as i, watch as f, onMounted as m, onBeforeUnmount as g, nextTick as E } from "vue";
import T from "../../Toast/src/toast.mjs";
const w = (o, n, a) => {
  const u = i(o.modelValue), t = i(!1), l = () => {
    E(() => {
      if (n.value) {
        n.value.focus();
        const e = document.createRange(), s = window.getSelection();
        e.selectNodeContents(n.value), e.collapse(!1), s?.removeAllRanges(), s?.addRange(e);
      }
    });
  }, v = () => {
    o.disabled || t.value || (t.value = !0, l());
  }, r = () => {
    if (!t.value || !n.value)
      return;
    const e = n.value.innerText.trim();
    if (!e) {
      T.open("内容不能为空"), l();
      return;
    }
    u.value = e, a("update:modelValue", e), a("finish", e), t.value = !1;
  }, c = (e) => {
    !t.value || !n.value || n.value.contains(e.target) || r();
  };
  f(
    () => o.modelValue,
    (e) => {
      t.value || (u.value = e);
    }
  );
  const d = (e) => {
    n.value && e.key === "Enter" && (e.preventDefault(), r());
  };
  return m(() => {
    document.addEventListener("click", c);
  }), g(() => {
    document.removeEventListener("click", c);
  }), {
    innerValue: u,
    editing: t,
    enableEdit: v,
    handleKeydown: d
  };
};
export {
  w as useEditorText
};