@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XRichTextEditor.vue2.js

@@ -0,0 +1,742 @@
+import { defineComponent as ht, ref as v, reactive as vt, computed as L, watch as Ce, onMounted as pt, onBeforeUnmount as xt, openBlock as c, createElementBlock as f, normalizeClass as re, createVNode as V, withCtx as $, Fragment as X, renderList as ke, createBlock as we, withModifiers as Q, toDisplayString as T, unref as bt, createTextVNode as G, createCommentVNode as J, createElementVNode as ie, normalizeStyle as yt, nextTick as Y } from "vue";
+import se from "./XButton.vue.js";
+import _t from "./XCascaderPanel.vue.js";
+import Ct from "./XIcon.js";
+import Le from "./XSpace.vue.js";
+import { useXI18n as kt } from "../composables/i18n.js";
+const wt = {
+  key: 0,
+  class: "x-richtext__toolbar x-rich-text-editor__toolbar"
+}, Lt = {
+  key: 0,
+  class: "x-richtext__tool-letter x-richtext__tool-letter--bold"
+}, Tt = {
+  key: 1,
+  class: "x-richtext__tool-letter x-richtext__tool-letter--italic"
+}, Rt = {
+  key: 2,
+  class: "x-richtext__tool-letter x-richtext__tool-letter--underline"
+}, St = {
+  key: 3,
+  class: "x-richtext__tool-text"
+}, Et = ["accept", "multiple", "disabled"], Mt = ["contenteditable", "data-placeholder"], At = {
+  key: 2,
+  class: "x-richtext__emoji-list x-rich-text-editor__emoji-list"
+}, Nt = ["onMousedown"], Pt = ["src", "alt"], It = {
+  key: 3,
+  class: "x-richtext__footer x-rich-text-editor__footer"
+}, Ot = { class: "x-richtext__tips x-rich-text-editor__tips" }, Vt = /* @__PURE__ */ ht({
+  __name: "XRichTextEditor",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "请输入内容" },
+    mentionOptions: { default: () => [] },
+    mentionCascaderOptions: { default: () => [] },
+    mentionFieldNames: { default: void 0 },
+    mentionExpandChild: { type: Boolean, default: !0 },
+    mentionChangeOnSelect: { type: Boolean, default: !1 },
+    emojiOptions: { default: () => ["😀", "😄", "😉", "😍", "🤔", "👍", "🎉", "🔥"] },
+    toolbar: { default: () => [
+      "bold",
+      "italic",
+      "underline",
+      "unorderedList",
+      "orderedList",
+      "quote",
+      "codeBlock",
+      "paragraph",
+      "link",
+      "emoji",
+      "image",
+      "mention",
+      "clearFormat"
+    ] },
+    accept: { default: "image/*" },
+    multiple: { type: Boolean, default: !0 },
+    maxImages: { default: 9 },
+    beforeImageUpload: { type: Function, default: void 0 },
+    uploadImage: { type: Function, default: void 0 },
+    allowImagePaste: { type: Boolean, default: !0 },
+    showToolbar: { type: Boolean, default: !0 },
+    showFooter: { type: Boolean, default: !0 },
+    tips: { default: "" },
+    linkPromptText: { default: "请输入链接地址" },
+    clearText: { default: "清空" },
+    submitText: { default: "发送" },
+    clearAfterSubmit: { type: Boolean, default: !0 },
+    submitOnHotkey: { default: "ctrl-enter" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change", "clear", "submit", "mentionSelect", "emojiSelect", "imageInsert", "imageUploadSuccess", "imageUploadError"],
+  setup(d, { expose: Te, emit: Re }) {
+    const Se = [
+      "bold",
+      "italic",
+      "underline",
+      "unorderedList",
+      "orderedList",
+      "quote",
+      "codeBlock",
+      "paragraph",
+      "link",
+      "emoji",
+      "image",
+      "mention",
+      "clearFormat"
+    ], l = d, p = Re, { t: m } = kt(), Z = v(null), h = v(null), ue = v(null), ee = v(null), y = v(null), ce = v(0), j = v(""), U = v([]), te = v({ top: 0, left: 12 }), R = v(!1), S = v(!1), de = v([]), z = v(!0), i = vt({
+      bold: !1,
+      italic: !1,
+      underline: !1,
+      unorderedList: !1,
+      orderedList: !1
+    }), Ee = L(() => l.toolbar.length ? l.toolbar : Se), E = L(() => ({
+      bold: "B",
+      italic: "I",
+      underline: "U",
+      unorderedList: m("richText.toolbar.unorderedList", void 0, "无序列表"),
+      orderedList: m("richText.toolbar.orderedList", void 0, "有序列表"),
+      quote: m("richText.toolbar.quote", void 0, "引用"),
+      codeBlock: m("richText.toolbar.codeBlock", void 0, "代码块"),
+      paragraph: m("richText.toolbar.paragraph", void 0, "正文"),
+      link: m("richText.toolbar.link", void 0, "链接"),
+      emoji: m("richText.toolbar.emoji", void 0, "表情"),
+      image: m("richText.toolbar.image", void 0, "图片"),
+      mention: m("richText.toolbar.mention", void 0, "@ 提及"),
+      clearFormat: m("richText.toolbar.clearFormat", void 0, "清格式")
+    })), Me = {
+      bold: null,
+      italic: null,
+      underline: null,
+      unorderedList: "list-v2-full",
+      orderedList: "list-v3-full",
+      quote: "chat-full",
+      codeBlock: "program-code-full",
+      paragraph: null,
+      link: "link-full",
+      emoji: "smile-full",
+      image: "image-full",
+      mention: "user-full",
+      clearFormat: "reset-full"
+    }, Ae = L(() => l.placeholder === "请输入内容" ? m("richText.placeholder", void 0, "请输入内容") : l.placeholder), Ne = L(() => l.linkPromptText === "请输入链接地址" ? m("richText.linkPromptText", void 0, "请输入链接地址") : l.linkPromptText), Pe = L(() => l.clearText === "清空" ? m("richText.clearText", void 0, "清空") : l.clearText), Ie = L(() => l.submitText === "发送" ? m("richText.submitText", void 0, "发送") : l.submitText), Oe = L(() => l.mentionOptions.map((e) => typeof e == "string" ? { label: e, value: e } : e)), H = L(() => l.mentionCascaderOptions.length > 0 ? l.mentionCascaderOptions : Oe.value.map((e) => ({
+      label: e.label,
+      value: e.value,
+      isLeaf: !0
+    }))), Fe = L(() => l.emojiOptions.map((e, n) => typeof e == "string" ? {
+      key: `${e}-${n}`,
+      label: e,
+      value: e,
+      image: "",
+      insertAs: "text"
+    } : {
+      key: e.key ?? e.value ?? e.label ?? `emoji-${n}`,
+      label: e.label ?? e.value ?? "",
+      value: e.value ?? e.label ?? "",
+      image: e.image ?? "",
+      insertAs: e.insertAs ?? (e.image ? "image" : "text")
+    }));
+    Ce(
+      () => l.modelValue,
+      (e) => {
+        const n = h.value, t = e ?? "";
+        n && n.innerHTML !== t && (n.innerHTML = t, me());
+      },
+      { immediate: !0 }
+    ), Ce(
+      h,
+      (e) => {
+        if (!e)
+          return;
+        const n = l.modelValue ?? "";
+        e.innerHTML !== n && (e.innerHTML = n), me();
+      },
+      { immediate: !0 }
+    );
+    function fe() {
+      const e = h.value, n = window.getSelection();
+      if (!e || !n || n.rangeCount === 0)
+        return !1;
+      const t = n.getRangeAt(0);
+      return e.contains(t.startContainer) && e.contains(t.endContainer);
+    }
+    function P() {
+      if (!fe())
+        return;
+      const e = window.getSelection();
+      !e || e.rangeCount === 0 || (y.value = e.getRangeAt(0).cloneRange());
+    }
+    function Be() {
+      const e = window.getSelection();
+      if (!e || !y.value)
+        return !1;
+      try {
+        return e.removeAllRanges(), e.addRange(y.value.cloneRange()), !0;
+      } catch {
+        return !1;
+      }
+    }
+    function x(e = !1) {
+      const n = h.value;
+      if (!n || l.disabled)
+        return;
+      n.focus();
+      const t = window.getSelection();
+      if (t && (e || !Be())) {
+        const o = document.createRange();
+        o.selectNodeContents(n), o.collapse(!1), t.removeAllRanges(), t.addRange(o), y.value = o.cloneRange();
+      }
+    }
+    function K(e) {
+      if (l.disabled)
+        return;
+      x();
+      const n = window.getSelection();
+      if (!n || n.rangeCount === 0)
+        return;
+      const t = n.getRangeAt(0);
+      t.deleteContents(), t.insertNode(e), t.setStartAfter(e), t.collapse(!0), n.removeAllRanges(), n.addRange(t), y.value = t.cloneRange();
+    }
+    function D(e) {
+      K(document.createTextNode(e));
+    }
+    function Ue(e) {
+      return Array.from(new Set((e.match(/@([^\s@]+)/g) ?? []).map((t) => t.slice(1)))).map((t) => ({ value: t, label: t, path: [t] }));
+    }
+    function He(e) {
+      if (!e)
+        return [];
+      const n = Array.from(e.querySelectorAll("span.x-richtext__mention")), t = /* @__PURE__ */ new Set(), o = [];
+      return n.forEach((a) => {
+        var A, b, w;
+        const r = ((A = a.dataset.mentionValue) == null ? void 0 : A.trim()) || ((b = a.textContent) == null ? void 0 : b.replace(/^@/, "").trim()) || "", u = ((w = a.dataset.mentionLabel) == null ? void 0 : w.trim()) || r, g = (a.dataset.mentionPath ?? "").split("/").map((N) => N.trim()).filter(Boolean);
+        if (!r)
+          return;
+        const s = g.length > 0 ? g : [r], k = `${r}|${s.join("/")}`;
+        t.has(k) || (t.add(k), o.push({ value: r, label: u, path: s }));
+      }), o;
+    }
+    function De(e, n) {
+      var s, k, A;
+      if (e.length === 0)
+        return { value: "", label: "" };
+      const t = {
+        label: ((s = l.mentionFieldNames) == null ? void 0 : s.label) ?? "label",
+        value: ((k = l.mentionFieldNames) == null ? void 0 : k.value) ?? "value",
+        children: ((A = l.mentionFieldNames) == null ? void 0 : A.children) ?? "children"
+      };
+      let o = n, a = "", r = "";
+      for (const b of e) {
+        const w = o.find((B) => (B == null ? void 0 : B[t.value]) === b);
+        if (!w) {
+          r = String(b), a = a || r;
+          break;
+        }
+        r = String(w[t.value] ?? b), a = String(w[t.label] ?? r);
+        const N = w[t.children];
+        o = Array.isArray(N) ? N : [];
+      }
+      const u = r || a;
+      return { value: u, label: a || r || u };
+    }
+    function I() {
+      const e = h.value, n = ((e == null ? void 0 : e.innerHTML) ?? "").trim(), t = ((e == null ? void 0 : e.innerText) ?? "").replace(/\u00a0/g, " ").trim(), o = He(e), a = o.length > 0 ? o : Ue(t), r = a.map((s) => s.value), u = e ? Array.from(e.querySelectorAll("img.x-richtext__inline-image")) : [], g = u.map((s) => s.src);
+      return {
+        html: n,
+        text: t,
+        mentions: r,
+        mentionDetails: a,
+        hasImage: u.length > 0,
+        imageCount: u.length,
+        imageUrls: g
+      };
+    }
+    function M() {
+      if (!fe()) {
+        i.bold = !1, i.italic = !1, i.underline = !1, i.unorderedList = !1, i.orderedList = !1;
+        return;
+      }
+      try {
+        i.bold = document.queryCommandState("bold"), i.italic = document.queryCommandState("italic"), i.underline = document.queryCommandState("underline"), i.unorderedList = document.queryCommandState("insertUnorderedList"), i.orderedList = document.queryCommandState("insertOrderedList");
+      } catch {
+        i.bold = !1, i.italic = !1, i.underline = !1, i.unorderedList = !1, i.orderedList = !1;
+      }
+    }
+    function me() {
+      const e = I();
+      z.value = !e.text && !e.hasImage, M();
+    }
+    function _() {
+      const e = I();
+      z.value = !e.text && !e.hasImage, p("update:modelValue", e.html), p("change", e);
+    }
+    function C(e, n) {
+      l.disabled || (x(), document.execCommand(e, !1, n), P(), _(), M());
+    }
+    function qe() {
+      C("formatBlock", "p");
+    }
+    function Ve() {
+      C("formatBlock", "blockquote");
+    }
+    function $e() {
+      C("formatBlock", "pre");
+    }
+    function je() {
+      if (l.disabled)
+        return;
+      x();
+      const e = window.prompt(Ne.value);
+      e && C("createLink", e);
+    }
+    function ze() {
+      l.disabled || (x(), document.execCommand("removeFormat", !1), document.execCommand("unlink", !1), P(), _(), M());
+    }
+    function Ke() {
+      const e = h.value, n = window.getSelection();
+      if (!e || !n || n.rangeCount === 0)
+        return null;
+      const t = n.getRangeAt(0);
+      if (!t.collapsed || !e.contains(t.startContainer))
+        return null;
+      const o = t.cloneRange();
+      o.selectNodeContents(e), o.setEnd(t.startContainer, t.startOffset);
+      const r = o.toString().match(/@([^\s@]*)$/);
+      return r ? { keyword: r[1] ?? "" } : null;
+    }
+    function We(e, n) {
+      const t = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
+      let o = 0, a = t.nextNode();
+      for (; a; ) {
+        const r = a, u = r.data.length;
+        if (n <= o + u)
+          return {
+            node: r,
+            offset: Math.max(0, n - o)
+          };
+        o += u, a = t.nextNode();
+      }
+      return null;
+    }
+    function Xe(e) {
+      const n = h.value;
+      if (!n || !n.contains(e.startContainer))
+        return !1;
+      const t = e.cloneRange();
+      t.selectNodeContents(n), t.setEnd(e.startContainer, e.startOffset);
+      const o = t.toString(), a = o.match(/@([^\s@]*)$/);
+      if (!a)
+        return !1;
+      const r = o.length - a[0].length, u = We(n, r);
+      if (!u)
+        return !1;
+      const g = document.createRange();
+      g.setStart(u.node, u.offset), g.setEnd(e.startContainer, e.startOffset), g.deleteContents();
+      const s = window.getSelection();
+      return s && (s.removeAllRanges(), s.addRange(g)), !0;
+    }
+    function q(e) {
+      const n = h.value;
+      if (!n || !e)
+        return null;
+      let t = e;
+      for (; t && t !== n; ) {
+        if (t instanceof HTMLSpanElement && t.classList.contains("x-richtext__mention"))
+          return t;
+        t = t.parentNode;
+      }
+      return null;
+    }
+    function Qe(e) {
+      const n = q(e.startContainer);
+      if (n)
+        return n;
+      if (e.startContainer.nodeType === Node.ELEMENT_NODE) {
+        const t = e.startContainer, o = e.startOffset > 0 ? t.childNodes[e.startOffset - 1] : null, a = t.childNodes[e.startOffset] ?? null;
+        return q(o) ?? q(a);
+      }
+      if (e.startContainer.nodeType === Node.TEXT_NODE) {
+        const t = e.startContainer;
+        if (e.startOffset === 0) {
+          const o = q(t.previousSibling);
+          if (o)
+            return o;
+        }
+        if (e.startOffset === t.data.length)
+          return q(t.nextSibling);
+      }
+      return null;
+    }
+    function O() {
+      const e = Ke();
+      if (!e) {
+        j.value = "", U.value = [], R.value = !1;
+        return;
+      }
+      j.value = e.keyword, R.value = H.value.length > 0, R.value && Y(ne);
+    }
+    function ne() {
+      var N, B;
+      const e = Z.value, n = h.value;
+      if (!e || !n)
+        return;
+      const t = window.getSelection();
+      let o = null;
+      if (t && t.rangeCount > 0) {
+        const ae = t.getRangeAt(0);
+        n.contains(ae.startContainer) && n.contains(ae.endContainer) && (o = ae.cloneRange());
+      }
+      if (!o && y.value && n.contains(y.value.startContainer) && n.contains(y.value.endContainer) && (o = y.value.cloneRange()), !o)
+        return;
+      o.collapse(!0);
+      const a = o.getBoundingClientRect(), r = e.getBoundingClientRect(), u = ((N = ee.value) == null ? void 0 : N.offsetWidth) ?? 320, g = ((B = ee.value) == null ? void 0 : B.offsetHeight) ?? 240, s = 12;
+      let k = a.left - r.left;
+      const A = Math.max(s, e.clientWidth - u - s);
+      k = Math.min(Math.max(k, s), A);
+      let b = a.bottom - r.top + 8;
+      const w = a.top - r.top - g - 8 > s;
+      b + g + s > e.clientHeight && w && (b = a.top - r.top - g - 8), b = Math.max(b, s), te.value = { top: b, left: k };
+    }
+    function F() {
+      R.value = !1, j.value = "", U.value = [];
+    }
+    function Ge(e) {
+      const n = Array.isArray(e) ? e : e == null || e === "" ? [] : [e];
+      if (!n.length)
+        return;
+      const t = De(n, H.value);
+      t.value && et({
+        value: t.value,
+        label: t.label,
+        path: n.map((o) => String(o))
+      });
+    }
+    function ge(e) {
+      const n = Z.value;
+      if (!n)
+        return;
+      const t = e.target;
+      !t || n.contains(t) || F();
+    }
+    function W() {
+      R.value && Y(ne);
+    }
+    function Je() {
+      P(), O(), _();
+    }
+    function Ye() {
+      P(), O(), M();
+    }
+    function Ze() {
+      P(), O(), M();
+    }
+    function et(e) {
+      if (l.disabled)
+        return;
+      x();
+      const n = window.getSelection();
+      if (!n || n.rangeCount === 0)
+        return;
+      const t = n.getRangeAt(0);
+      t.collapsed && Xe(t);
+      const o = document.createElement("span");
+      o.className = "x-richtext__mention x-rich-text-editor__mention", o.dataset.mentionValue = e.value, o.dataset.mentionLabel = e.label, o.dataset.mentionPath = (e.path ?? [e.value]).join("/"), o.textContent = `@${e.label}`, K(o), D(" "), F(), p("mentionSelect", e.value), _();
+    }
+    function he() {
+      if (l.disabled)
+        return;
+      S.value = !1, x();
+      const e = window.getSelection();
+      if (e && e.rangeCount > 0) {
+        const n = e.getRangeAt(0), t = Qe(n);
+        if (t) {
+          const o = document.createRange();
+          o.selectNode(t), e.removeAllRanges(), e.addRange(o), y.value = o.cloneRange();
+        }
+      }
+      D("@"), j.value = "", U.value = [], R.value = H.value.length > 0, Y(ne), _();
+    }
+    function ve() {
+      l.disabled || (F(), S.value = !S.value, x());
+    }
+    function tt(e) {
+      if (!l.disabled) {
+        if (x(), e.insertAs === "image" && e.image) {
+          const n = document.createElement("img");
+          n.className = "x-richtext__inline-emoji x-rich-text-editor__inline-emoji", n.src = e.image, n.alt = e.label || e.value || "", K(n), D(" ");
+        } else
+          D(e.value || e.label);
+        S.value = !1, O(), p("emojiSelect", e.value || e.label), _();
+      }
+    }
+    function pe() {
+      var e;
+      l.disabled || (S.value = !1, F(), (e = ue.value) == null || e.click());
+    }
+    function nt() {
+      const e = h.value;
+      return e ? e.querySelectorAll("img.x-richtext__inline-image").length : 0;
+    }
+    function ot(e, n) {
+      const t = document.createElement("img");
+      t.className = "x-richtext__inline-image x-rich-text-editor__inline-image", t.src = e, t.alt = n, K(t), D(" ");
+    }
+    async function xe(e) {
+      if (!e.length)
+        return 0;
+      const n = Math.max(0, l.maxImages - nt());
+      if (n <= 0)
+        return 0;
+      let t = 0;
+      for (const o of e.slice(0, n)) {
+        if (!o.type.startsWith("image/") || l.beforeImageUpload && !await Promise.resolve(l.beforeImageUpload(o)))
+          continue;
+        let a = "";
+        if (l.uploadImage)
+          try {
+            a = await l.uploadImage(o), p("imageUploadSuccess", o, a);
+          } catch (r) {
+            p("imageUploadError", o, r);
+            continue;
+          }
+        else
+          a = URL.createObjectURL(o), de.value.push(a);
+        a && (ot(a, o.name), t += 1);
+      }
+      return t;
+    }
+    async function lt(e) {
+      if (l.disabled)
+        return;
+      const n = e.target, t = Array.from(n.files ?? []);
+      if (!t.length)
+        return;
+      x();
+      const o = await xe(t);
+      n.value = "", O(), o > 0 && (p("imageInsert", o), _());
+    }
+    async function at(e) {
+      var a;
+      if (!l.allowImagePaste || l.disabled)
+        return;
+      const t = Array.from(((a = e.clipboardData) == null ? void 0 : a.items) ?? []).filter((r) => r.kind === "file").map((r) => r.getAsFile()).filter((r) => r instanceof File && r.type.startsWith("image/"));
+      if (!t.length)
+        return;
+      e.preventDefault(), x();
+      const o = await xe(t);
+      o > 0 && (p("imageInsert", o), _());
+    }
+    function rt(e) {
+      return l.submitOnHotkey === "none" || e.key !== "Enter" ? !1 : l.submitOnHotkey === "ctrl-enter" ? e.ctrlKey : l.submitOnHotkey === "meta-enter" ? e.metaKey : e.ctrlKey || e.metaKey;
+    }
+    function it(e) {
+      if (e.key === "Escape") {
+        F(), S.value = !1;
+        return;
+      }
+      rt(e) && (e.preventDefault(), le());
+    }
+    function oe() {
+      const e = h.value;
+      e && (e.innerHTML = "", y.value = null, F(), S.value = !1, z.value = !0, p("update:modelValue", ""), p("change", {
+        html: "",
+        text: "",
+        mentions: [],
+        mentionDetails: [],
+        hasImage: !1,
+        imageCount: 0,
+        imageUrls: []
+      }), p("clear"), Y(() => {
+        x(!0);
+      }));
+    }
+    function le() {
+      if (l.disabled)
+        return;
+      const e = I();
+      !e.text && !e.hasImage || (p("submit", e), l.clearAfterSubmit && oe());
+    }
+    function st() {
+      P(), M();
+    }
+    function ut(e) {
+      const n = h.value;
+      n && (n.innerHTML = e, _());
+    }
+    function ct() {
+      return I().html;
+    }
+    function dt() {
+      return I().text;
+    }
+    function ft(e) {
+      return e === "bold" ? i.bold : e === "italic" ? i.italic : e === "underline" ? i.underline : e === "unorderedList" ? i.unorderedList : e === "orderedList" ? i.orderedList : !1;
+    }
+    function be(e) {
+      return Me[e];
+    }
+    function ye(e) {
+      return e === "bold" ? C("bold") : e === "italic" ? C("italic") : e === "underline" ? C("underline") : e === "unorderedList" ? C("insertUnorderedList") : e === "orderedList" ? C("insertOrderedList") : e === "quote" ? Ve() : e === "codeBlock" ? $e() : e === "paragraph" ? qe() : e === "link" ? je() : e === "emoji" ? ve() : e === "image" ? pe() : e === "mention" ? he() : ze();
+    }
+    function mt(e) {
+      ce.value = Date.now(), ye(e);
+    }
+    function gt(e) {
+      Date.now() - ce.value <= 180 || ye(e);
+    }
+    function _e() {
+      M(), R.value && O();
+    }
+    return Te({
+      focus: x,
+      clear: oe,
+      getPayload: I,
+      setHtml: ut,
+      getHtml: ct,
+      getText: dt,
+      toggleEmojiPanel: ve,
+      openImagePicker: pe,
+      submit: le,
+      triggerMention: he
+    }), pt(() => {
+      document.addEventListener("selectionchange", _e), document.addEventListener("mousedown", ge), window.addEventListener("resize", W), window.addEventListener("scroll", W, !0);
+    }), xt(() => {
+      document.removeEventListener("selectionchange", _e), document.removeEventListener("mousedown", ge), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0);
+      for (const e of de.value)
+        URL.revokeObjectURL(e);
+    }), (e, n) => (c(), f("div", {
+      ref_key: "rootRef",
+      ref: Z,
+      class: re(["x-richtext x-rich-text-editor", { "is-disabled": d.disabled }])
+    }, [
+      d.showToolbar ? (c(), f("div", wt, [
+        V(Le, {
+          wrap: "",
+          size: 4
+        }, {
+          default: $(() => [
+            (c(!0), f(X, null, ke(Ee.value, (t) => (c(), we(se, {
+              key: t,
+              size: "small",
+              variant: "text",
+              disabled: d.disabled,
+              class: re(["x-richtext__tool-btn", {
+                "is-active": ft(t),
+                "is-text-action": t === "paragraph"
+              }]),
+              title: E.value[t],
+              "aria-label": E.value[t],
+              onMousedown: Q((o) => mt(t), ["prevent"]),
+              onClick: Q((o) => gt(t), ["prevent"])
+            }, {
+              default: $(() => [
+                t === "bold" ? (c(), f("span", Lt, T(E.value[t]), 1)) : t === "italic" ? (c(), f("span", Tt, T(E.value[t]), 1)) : t === "underline" ? (c(), f("span", Rt, T(E.value[t]), 1)) : t === "paragraph" ? (c(), f("span", St, T(E.value[t]), 1)) : be(t) ? (c(), we(bt(Ct), {
+                  key: 4,
+                  name: be(t) || "",
+                  size: 14
+                }, null, 8, ["name"])) : (c(), f(X, { key: 5 }, [
+                  G(T(E.value[t]), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["disabled", "class", "title", "aria-label", "onMousedown", "onClick"]))), 128))
+          ]),
+          _: 1
+        })
+      ])) : J("", !0),
+      ie("input", {
+        ref_key: "uploadInputRef",
+        ref: ue,
+        class: "x-richtext__input-file x-rich-text-editor__input-file",
+        type: "file",
+        accept: d.accept,
+        multiple: d.multiple,
+        disabled: d.disabled,
+        onChange: lt
+      }, null, 40, Et),
+      ie("div", {
+        ref_key: "editorRef",
+        ref: h,
+        class: re(["x-richtext__input x-rich-text-editor__input", { "is-empty": z.value }]),
+        contenteditable: !d.disabled,
+        "data-placeholder": Ae.value,
+        onInput: Je,
+        onKeydown: it,
+        onKeyup: Ye,
+        onMouseup: Ze,
+        onFocus: st,
+        onPaste: at
+      }, null, 42, Mt),
+      R.value && H.value.length > 0 ? (c(), f("div", {
+        key: 1,
+        ref_key: "mentionPanelRef",
+        ref: ee,
+        class: "x-richtext__mention-float x-rich-text-editor__mention-float",
+        style: yt({
+          top: `${te.value.top}px`,
+          left: `${te.value.left}px`
+        }),
+        onMousedown: n[1] || (n[1] = Q(() => {
+        }, ["stop"]))
+      }, [
+        V(_t, {
+          modelValue: U.value,
+          "onUpdate:modelValue": n[0] || (n[0] = (t) => U.value = t),
+          options: H.value,
+          "field-names": d.mentionFieldNames,
+          "expand-child": d.mentionExpandChild,
+          "change-on-select": d.mentionChangeOnSelect,
+          "path-mode": !0,
+          onChange: Ge
+        }, null, 8, ["modelValue", "options", "field-names", "expand-child", "change-on-select"])
+      ], 36)) : J("", !0),
+      S.value ? (c(), f("div", At, [
+        (c(!0), f(X, null, ke(Fe.value, (t) => (c(), f("button", {
+          key: t.key,
+          type: "button",
+          class: "x-richtext__emoji-item x-rich-text-editor__emoji-item",
+          onMousedown: Q((o) => tt(t), ["prevent"])
+        }, [
+          t.image ? (c(), f("img", {
+            key: 0,
+            class: "x-richtext__emoji-image x-rich-text-editor__emoji-image",
+            src: t.image,
+            alt: t.label || t.value
+          }, null, 8, Pt)) : (c(), f(X, { key: 1 }, [
+            G(T(t.label || t.value), 1)
+          ], 64))
+        ], 40, Nt))), 128))
+      ])) : J("", !0),
+      d.showFooter ? (c(), f("div", It, [
+        ie("span", Ot, T(d.tips), 1),
+        V(Le, null, {
+          default: $(() => [
+            V(se, {
+              size: "small",
+              disabled: d.disabled,
+              onClick: oe
+            }, {
+              default: $(() => [
+                G(T(Pe.value), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            V(se, {
+              size: "small",
+              type: "primary",
+              disabled: d.disabled,
+              onClick: le
+            }, {
+              default: $(() => [
+                G(T(Ie.value), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        })
+      ])) : J("", !0)
+    ], 2));
+  }
+});
+export {
+  Vt as default
+};