@mobilon-dev/chotto 0.3.99 → 0.3.100

package/dist/components/3_compounds/ChatInput/ChatInput.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as be, inject as we, watch as d, ref as E, computed as _, nextTick as S, unref as u, onMounted as Ce, onUnmounted as Ae, createElementBlock as k, openBlock as F, createElementVNode as h, createVNode as O, normalizeClass as z, createBlock as Ee, createCommentVNode as U, renderSlot as Y, toDisplayString as Fe, withDirectives as Me, withKeys as Re, vModelText as He } from "vue";
-import { useImmediateDebouncedRef as ke } from "../../../hooks/useImmediateDebouncedRef.js";
-import { useMessageDraft as Le, commitChatDraftToList as De } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as we, inject as Ce, watch as d, ref as E, computed as _, nextTick as S, unref as u, onMounted as Ae, onUnmounted as Ee, createElementBlock as k, openBlock as F, createElementVNode as h, createVNode as O, normalizeClass as j, createBlock as Fe, createCommentVNode as U, renderSlot as Y, toDisplayString as Me, withDirectives as Re, withKeys as He, vModelText as ke } from "vue";
+import { useImmediateDebouncedRef as Le } from "../../../hooks/useImmediateDebouncedRef.js";
+import { useMessageDraft as De, commitChatDraftToList as Pe } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
-import { useEmojiNative as Pe } from "../../../hooks/useEmojiNative.js";
+import { useEmojiNative as We } from "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import { t as I } from "../../../locale/useLocale.js";
@@ -11,18 +11,18 @@ import { t as I } from "../../../locale/useLocale.js";
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-import { textToAppleEmojiHtml as We, textContainsEmoji as qe, previousGraphemeIndex as V, nextGraphemeIndex as $, snapIndexToGrapheme as J } from "../../../functions/renderAppleEmojis.js";
-import { hideEditPreview as Be } from "../../../hooks/messages/useStartEdit.js";
+import { textToAppleEmojiHtml as qe, textContainsEmoji as Be, previousGraphemeIndex as V, nextGraphemeIndex as $, snapIndexToGrapheme as J } from "../../../functions/renderAppleEmojis.js";
+import { hideEditPreview as je } from "../../../hooks/messages/useStartEdit.js";
 import ze from "./icons/SendIcon.vue.js";
 import Ke from "../../2_chatinput_elements/TextFormatToolbar/TextFormatToolbar.vue.js";
-import je from "../../2_chatinput_elements/FilePreview/FilePreview.vue.js";
-const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = { class: "chat-input__inline-buttons" }, Ye = {
+import Ne from "../../2_chatinput_elements/FilePreview/FilePreview.vue.js";
+const Ge = { class: "chat-input__container" }, Oe = ["id"], Ue = ["id"], Ye = { class: "chat-input__inline-buttons" }, Ve = {
   key: 0,
   class: "chat-input__input chat-input__disabled-placeholder"
-}, Ve = {
+}, $e = {
   key: 1,
   class: "chat-input__input-wrap"
-}, $e = ["innerHTML"], Je = ["disabled", "placeholder"], Qe = ["disabled"], Xe = { class: "" }, Ze = { class: "chat-input__third-line" }, K = 40, xt = /* @__PURE__ */ be({
+}, Je = ["innerHTML"], Qe = ["disabled", "placeholder"], Xe = ["disabled"], Ze = { class: "" }, et = { class: "chat-input__third-line" }, z = 40, _t = /* @__PURE__ */ we({
   __name: "ChatInput",
   props: {
     state: {
@@ -52,21 +52,21 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
   },
   emits: ["send", "typing"],
   setup(T, { emit: Q }) {
-    const L = Q, b = we("chatAppId"), { resetMessage: X, getMessage: l, setMessageText: M, setForceSendMessage: Z, resetEdit: ee, resetMessageFile: te } = Le(b), { isNative: ne } = Pe(b);
-    let j = l().id;
+    const L = Q, b = Ce("chatAppId"), { resetMessage: X, getMessage: l, setMessageText: M, setForceSendMessage: Z, resetEdit: ee, resetMessageFile: te } = De(b), { isNative: ne, emojiSrc: ie } = We(b);
+    let K = l().id;
     d(
       () => l().id,
       (e) => {
-        j = e;
+        K = e;
       }
     );
-    const n = E(), m = E(), v = E(null), w = E(!1), ie = ke("", 2e3), D = _(() => {
+    const n = E(), m = E(), v = E(null), w = E(!1), oe = Le("", 2e3), D = _(() => {
       var e;
       return (e = l().file) == null ? void 0 : e.preview;
-    }), oe = _(
-      () => We(l().text || "", v.value)
+    }), le = _(
+      () => qe(l().text || "", v.value, ie.value)
     ), g = _(
-      () => !ne.value && qe(l().text || "")
+      () => !ne.value && Be(l().text || "")
     ), c = () => {
       if (!m.value || !n.value) return;
       const e = n.value, t = m.value, o = Math.max(0, e.offsetWidth - e.clientWidth);
@@ -76,16 +76,16 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
     function P() {
       v.value = null;
     }
-    function le(e = "nearest") {
+    function se(e = "nearest") {
       const t = n.value;
       if (!t || !g.value) return;
       const o = t.value, i = J(o, t.selectionStart, e), r = J(o, t.selectionEnd, e);
       (i !== t.selectionStart || r !== t.selectionEnd) && t.setSelectionRange(i, r);
     }
     function W() {
-      le("nearest"), f();
+      se("nearest"), f();
     }
-    function se(e) {
+    function ae(e) {
       if (!g.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.altKey || e.metaKey || e.ctrlKey) return;
       const t = n.value;
       if (!t) return;
@@ -130,13 +130,13 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         });
       });
     }
-    function ae(e) {
+    function re(e) {
       e.buttons && f();
     }
     function N() {
       document.activeElement === n.value && f();
     }
-    const a = T, re = _(() => !!(a.state == "disabled" || l().text == "" && !l().file || l().isRecording)), ue = _(() => {
+    const a = T, ue = _(() => !!(a.state == "disabled" || l().text == "" && !l().file || l().isRecording)), ce = _(() => {
       var t;
       if (a.inputButtonColor)
         return a.inputButtonColor;
@@ -144,7 +144,7 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         return "#25D366";
       const e = a.selectedChannel.channelId.toLowerCase();
       return e.includes("whatsapp") || e.includes("waba") ? "#25D366" : e.includes("telegram") ? "#37AFE2" : e.includes("sms") ? "#6C757D" : e.includes("max") ? "#4B0082" : "#25D366";
-    }), ce = _(() => {
+    }), de = _(() => {
       var t;
       if (!((t = a.selectedChannel) != null && t.channelId))
         return I("component.ChatInput.InputPlaceholder");
@@ -152,7 +152,7 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
       return e.includes("whatsapp") || e.includes("waba") ? I("component.ChatInput.WhatsappInputPlaceholder") : e.includes("telegram") ? I("component.ChatInput.TelegramInputPlaceholder") : e.includes("sms") ? I("component.ChatInput.SmsInputPlaceholder") : e.includes("max") ? I("component.ChatInput.MaxInputPlaceholder") : I("component.ChatInput.InputPlaceholder");
     });
     d(
-      () => ie.value,
+      () => oe.value,
       () => {
         L("typing");
       }
@@ -203,9 +203,9 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
     });
     function R(e) {
       const t = l().inputHeight;
-      e.style.height = (t || K) + "px", (!t || t <= K) && (e.style.overflowY = "hidden");
+      e.style.height = (t || z) + "px", (!t || t <= z) && (e.style.overflowY = "hidden");
     }
-    function de(e) {
+    function fe(e) {
       const t = parseFloat(e.style.height);
       Number.isFinite(t) && (l().inputHeight = t);
     }
@@ -217,17 +217,17 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
       }
       const o = e.scrollTop;
       e.style.height = "auto";
-      const i = getComputedStyle(e), r = parseFloat(i.fontSize) || 16, p = parseFloat(i.lineHeight) || r * 1.4, x = K, A = p * 11, B = e.scrollHeight, ye = t.split(`
+      const i = getComputedStyle(e), r = parseFloat(i.fontSize) || 16, p = parseFloat(i.lineHeight) || r * 1.4, x = z, A = p * 11, B = e.scrollHeight, xe = t.split(`
 `).length > 1, s = document.createElement("div");
       s.style.position = "absolute", s.style.visibility = "hidden", s.style.whiteSpace = "nowrap", s.style.font = i.font, s.style.fontSize = i.fontSize, s.style.fontFamily = i.fontFamily, s.style.fontWeight = i.fontWeight, s.style.letterSpacing = i.letterSpacing, s.textContent = t, document.body.appendChild(s);
-      const xe = s.offsetWidth;
+      const _e = s.offsetWidth;
       document.body.removeChild(s);
-      const _e = parseFloat(i.paddingLeft) || 0, Se = parseFloat(i.paddingRight) || 0, Ie = e.clientWidth - _e - Se, Te = xe > Ie, G = ye || Te;
+      const Se = parseFloat(i.paddingLeft) || 0, Ie = parseFloat(i.paddingRight) || 0, Te = e.clientWidth - Se - Ie, be = _e > Te, G = xe || be;
       if (G && B <= x + 1) {
         R(e);
         return;
       }
-      t.trim() && G ? B <= A ? (e.style.height = B + "px", e.style.overflowY = "hidden") : (e.style.height = A + "px", e.style.overflowY = "auto", e.scrollTop = o) : (e.style.height = x + "px", e.style.overflowY = "hidden"), de(e), c(), requestAnimationFrame(c);
+      t.trim() && G ? B <= A ? (e.style.height = B + "px", e.style.overflowY = "hidden") : (e.style.height = A + "px", e.style.overflowY = "auto", e.scrollTop = o) : (e.style.height = x + "px", e.style.overflowY = "hidden"), fe(e), c(), requestAnimationFrame(c);
     }
     function H(e) {
       if (a.state === "disabled" || l().isRecording) return;
@@ -240,17 +240,17 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         l().forceSend && (q(), Z(!1));
       }
     );
-    const fe = (e) => {
+    const pe = (e) => {
       const t = e.target;
       L("typing", t.value), f();
     };
-    Ce(() => {
+    Ae(() => {
       const e = n.value;
       e && (R(e), C(e)), document.addEventListener("selectionchange", N);
-    }), Ae(() => {
-      De(j), document.removeEventListener("selectionchange", N), y && cancelAnimationFrame(y);
+    }), Ee(() => {
+      Pe(K), document.removeEventListener("selectionchange", N), y && cancelAnimationFrame(y);
     });
-    const pe = (e) => {
+    const he = (e) => {
       if (e.shiftKey) {
         if (n.value instanceof HTMLTextAreaElement) {
           let t = n.value.selectionStart;
@@ -267,7 +267,7 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         e.preventDefault();
       } else
         e.preventDefault(), q();
-    }, he = (e) => {
+    }, me = (e) => {
       if (n.value) {
         const t = n.value.value;
         n.value.value = e.newText;
@@ -277,21 +277,21 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         });
       }
     };
-    function me() {
-      te();
-    }
     function ve() {
-      ee(), M(""), Be(b), n.value && n.value.focus();
+      te();
     }
     function ge() {
+      ee(), M(""), je(b), n.value && n.value.focus();
+    }
+    function ye() {
       const e = l();
       return e.edit ? (e.text ?? "").trim() === (e.edit.text ?? "").trim() : !1;
     }
     const q = () => {
       var t, o;
       const e = E(l());
-      if (e.value.edit && ge()) {
-        ve();
+      if (e.value.edit && ye()) {
+        ge();
         return;
       }
       if (e.value.text != "" || e.value.file) {
@@ -306,75 +306,75 @@ const Ne = { class: "chat-input__container" }, Ge = ["id"], Oe = ["id"], Ue = {
         e.value.file ? (i.type = "message." + e.value.file.type, i.url = e.value.file.url, i.filename = e.value.file.name, i.size = (t = e.value.file.size) == null ? void 0 : t.toString(), i.text = (o = e == null ? void 0 : e.value) == null ? void 0 : o.text.trim()) : (i.type = "message.text", i.text = e.value.text.trim()), e.value.reply && (i.reply = e.value.reply), e.value.edit && (i.edit = e.value.edit), L("send", i), X(), n.value && n.value.focus();
       }
     };
-    return (e, t) => (F(), k("div", Ne, [
+    return (e, t) => (F(), k("div", Ge, [
       h("div", {
         id: "chat-input-reply-line-" + u(b),
         class: "chat-input__reply-line"
-      }, null, 8, Ge),
+      }, null, 8, Oe),
       h("div", {
         id: "chat-input-file-line-" + u(b),
-        class: z(["chat-input__file-line", { "chat-input__file-line--visible": !!D.value }])
+        class: j(["chat-input__file-line", { "chat-input__file-line--visible": !!D.value }])
       }, [
-        D.value ? (F(), Ee(je, {
+        D.value ? (F(), Fe(Ne, {
           key: 0,
           "file-info": D.value,
-          onReset: me
+          onReset: ve
         }, null, 8, ["file-info"])) : U("", !0)
-      ], 10, Oe),
-      h("div", Ue, [
+      ], 10, Ue),
+      h("div", Ye, [
         Y(e.$slots, "inline-buttons", {}, void 0, !0)
       ]),
-      T.disabledPlaceholder && (T.state == "disabled" || u(l)().isRecording) ? (F(), k("div", Ye, Fe(T.disabledPlaceholder), 1)) : (F(), k("div", Ve, [
+      T.disabledPlaceholder && (T.state == "disabled" || u(l)().isRecording) ? (F(), k("div", Ve, Me(T.disabledPlaceholder), 1)) : (F(), k("div", $e, [
         g.value ? (F(), k("div", {
           key: 0,
           ref_key: "refMirror",
           ref: m,
           class: "chat-input__input-mirror",
           "aria-hidden": "true",
-          innerHTML: oe.value
-        }, null, 8, $e)) : U("", !0),
-        Me(h("textarea", {
+          innerHTML: le.value
+        }, null, 8, Je)) : U("", !0),
+        Re(h("textarea", {
           ref_key: "refInput",
           ref: n,
           "onUpdate:modelValue": t[0] || (t[0] = (o) => u(l)().text = o),
           rows: "1",
           disabled: T.state == "disabled" || u(l)().isRecording,
-          class: z(["chat-input__input", { "chat-input__input--emoji-images": g.value }]),
-          placeholder: ce.value,
+          class: j(["chat-input__input", { "chat-input__input--emoji-images": g.value }]),
+          placeholder: de.value,
           onKeydown: [
-            se,
-            Re(pe, ["enter"])
+            ae,
+            He(he, ["enter"])
           ],
-          onInput: fe,
+          onInput: pe,
           onScroll: c,
           onSelect: f,
           onMouseup: W,
           onKeyup: W,
-          onMousemove: ae,
+          onMousemove: re,
           onBlur: P
-        }, null, 42, Je), [
-          [He, u(l)().text]
+        }, null, 42, Qe), [
+          [ke, u(l)().text]
         ])
       ])),
       O(Ke, {
         textarea: n.value,
-        onFormatApplied: he
+        onFormatApplied: me
       }, null, 8, ["textarea"]),
       h("button", {
-        class: z(["chat-input__button", { "chat-input__button-disabled": re.value }]),
+        class: j(["chat-input__button", { "chat-input__button-disabled": ue.value }]),
         disabled: u(l)().isRecording,
         onClick: q
       }, [
-        h("span", Xe, [
-          O(u(ze), { color: ue.value }, null, 8, ["color"])
+        h("span", Ze, [
+          O(u(ze), { color: ce.value }, null, 8, ["color"])
         ])
-      ], 10, Qe),
-      h("div", Ze, [
+      ], 10, Xe),
+      h("div", et, [
         Y(e.$slots, "buttons", {}, void 0, !0)
       ])
     ]));
   }
 });
 export {
-  xt as default
+  _t as default
 };

package/dist/functions/renderAppleEmojis.js

@@ -1,36 +1,50 @@
-const g = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@6.0.1/img/apple/64", l = new RegExp("(?:\\p{Regional_Indicator}{2})|(?:[#*0-9]\\uFE0F?\\u20E3)|(?:\\p{Extended_Pictographic}(?:\\uFE0F|\\uFE0E)?(?:\\p{Emoji_Modifier})?(?:\\u200D(?:\\p{Extended_Pictographic}|\\p{Emoji_Modifier_Base})(?:\\uFE0F|\\uFE0E)?(?:\\p{Emoji_Modifier})?)*)", "gu"), I = "position:relative;display:inline-block;vertical-align:baseline;", T = "visibility:hidden;", _ = "position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;margin:0;", b = Intl.Segmenter, p = typeof Intl < "u" && b ? new b(void 0, { granularity: "grapheme" }) : null;
-function v(t, e, r = "nearest") {
+const i = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple@6.0.1/img/apple/64";
+function f(t) {
+  return (t || i).trim().replace(/\/+$/, "") || i;
+}
+function b(t) {
+  return /emoji-datasource-apple/i.test(t);
+}
+const I = /* @__PURE__ */ new Set([
+  "2640",
+  "2640-fe0f",
+  "2642",
+  "2642-fe0f",
+  "2695",
+  "2695-fe0f"
+]), u = new RegExp("(?:\\p{Regional_Indicator}{2})|(?:[#*0-9]\\uFE0F?\\u20E3)|(?:\\p{Extended_Pictographic}(?:\\uFE0F|\\uFE0E)?(?:\\p{Emoji_Modifier})?(?:\\u200D(?:\\p{Extended_Pictographic}|\\p{Emoji_Modifier_Base})(?:\\uFE0F|\\uFE0E)?(?:\\p{Emoji_Modifier})?)*)", "gu"), v = "position:relative;display:inline-block;vertical-align:baseline;", M = "visibility:hidden;", $ = "position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;margin:0;", C = Intl.Segmenter, m = typeof Intl < "u" && C ? new C(void 0, { granularity: "grapheme" }) : null;
+function O(t, e, r = "nearest") {
   const n = t.length;
   if (e <= 0) return 0;
   if (e >= n) return n;
-  if (p) {
-    let s = 0;
-    for (const { index: a } of p.segment(t)) {
-      if (a === e) return e;
-      if (a > e)
-        return r === "before" ? s : r === "after" ? a : e - s <= a - e ? s : a;
-      s = a;
+  if (m) {
+    let a = 0;
+    for (const { index: c } of m.segment(t)) {
+      if (c === e) return e;
+      if (c > e)
+        return r === "before" ? a : r === "after" ? c : e - a <= c - e ? a : c;
+      a = c;
     }
     return n;
   }
   const o = t.charCodeAt(e);
   return o >= 56320 && o <= 57343 ? r === "after" ? Math.min(n, e + 1) : e - 1 : e;
 }
-function C(t, e) {
+function w(t, e) {
   if (e >= t.length) return t.length;
-  if (p) {
-    for (const { index: n } of p.segment(t))
+  if (m) {
+    for (const { index: n } of m.segment(t))
       if (n > e) return n;
     return t.length;
   }
   const r = t.codePointAt(e);
   return e + (r !== void 0 && r > 65535 ? 2 : 1);
 }
-function j(t, e) {
+function P(t, e) {
   if (e <= 0) return 0;
-  if (p) {
+  if (m) {
     let n = 0;
-    for (const { index: o } of p.segment(t)) {
+    for (const { index: o } of m.segment(t)) {
       if (o >= e) return n;
       n = o;
     }
@@ -39,7 +53,7 @@ function j(t, e) {
   const r = t.charCodeAt(e - 1);
   return r >= 56320 && r <= 57343 ? e - 2 : e - 1;
 }
-function d(t, e) {
+function p(t, e) {
   const r = [];
   for (const n of t) {
     const o = n.codePointAt(0);
@@ -47,107 +61,122 @@ function d(t, e) {
   }
   return r.join("-");
 }
-function $(t) {
-  return `${g}/${d(t)}.png`;
+function A(t, e = i) {
+  const r = f(e), n = p(t);
+  if (!n || b(r) && I.has(n)) return !1;
+  const o = p(t, { stripVariationSelectors: !0 });
+  return !(b(r) && I.has(o));
+}
+function S(t, e = i) {
+  return `${f(e)}/${p(t)}.png`;
 }
-function A(t) {
-  const e = d(t), r = d(t, { stripVariationSelectors: !0 });
-  if (e !== r)
-    return `${g}/${r}.png`;
+function k(t, e = i) {
+  const r = f(e);
+  if (!A(t, r)) return null;
+  const n = p(t), o = p(t, { stripVariationSelectors: !0 });
+  if (n !== o)
+    return b(r) && I.has(o) ? null : `${r}/${o}.png`;
   if (!/[\uFE0E\uFE0F]/.test(t)) {
-    const n = d(`${t}️`);
-    if (n !== e)
-      return `${g}/${n}.png`;
+    const a = p(`${t}️`);
+    if (a !== n)
+      return b(r) && I.has(a) ? null : `${r}/${a}.png`;
   }
   return null;
 }
-function k(t, e) {
-  const r = A(e);
-  r && t.addEventListener(
+function y(t, e, r) {
+  const n = k(e, r);
+  n && t.addEventListener(
     "error",
     () => {
-      t.src !== r && (t.src = r);
+      t.src !== n && (t.src = n);
     },
     { once: !0 }
   );
 }
-function M(t) {
-  const e = d(t);
-  if (!e) return E(t);
-  const r = `${g}/${e}.png`, n = A(t), o = n ? ` data-fallback="${h(n)}" onerror="if(this.dataset.fallback&&this.src!==this.dataset.fallback){this.onerror=null;this.src=this.dataset.fallback}"` : "";
-  return `<span class="chotto-emoji-slot" style="${I}"><span class="chotto-emoji-metric" style="${T}">${E(t)}</span><img class="chotto-emoji" src="${h(r)}" alt="${h(t)}" draggable="false" style="${_}"${o} /></span>`;
-}
-function N(t) {
-  const e = document.createElement("span");
-  e.className = "chotto-emoji-slot", e.setAttribute("style", I);
-  const r = document.createElement("span");
-  r.className = "chotto-emoji-metric", r.setAttribute("style", T), r.textContent = t;
-  const n = document.createElement("img");
-  return n.className = "chotto-emoji", n.src = $(t), n.alt = t, n.draggable = !1, n.setAttribute("style", _), k(n, t), e.append(r, n), e;
-}
-function h(t) {
+function j(t, e = i) {
+  const r = f(e), n = p(t);
+  if (!n || !A(t, r)) return _(t);
+  const o = `${r}/${n}.png`, a = k(t, r), c = a ? ` data-fallback="${T(a)}" onerror="if(this.dataset.fallback&&this.src!==this.dataset.fallback){this.onerror=null;this.src=this.dataset.fallback}"` : "";
+  return `<span class="chotto-emoji-slot" style="${v}"><span class="chotto-emoji-metric" style="${M}">${_(t)}</span><img class="chotto-emoji" src="${T(o)}" alt="${T(t)}" draggable="false" style="${$}"${c} /></span>`;
+}
+function L(t, e = i) {
+  const r = f(e);
+  if (!A(t, r)) {
+    const c = document.createElement("span");
+    return c.textContent = t, c;
+  }
+  const n = document.createElement("span");
+  n.className = "chotto-emoji-slot", n.setAttribute("style", v);
+  const o = document.createElement("span");
+  o.className = "chotto-emoji-metric", o.setAttribute("style", M), o.textContent = t;
+  const a = document.createElement("img");
+  return a.className = "chotto-emoji", a.src = S(t, r), a.alt = t, a.draggable = !1, a.setAttribute("style", $), y(a, t, r), n.append(o, a), n;
+}
+function T(t) {
   return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function E(t) {
+function _(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function m(t) {
-  return t ? E(t).replace(l, (e) => M(e)) : "";
+function g(t, e) {
+  return t ? _(t).replace(u, (r) => j(r, e)) : "";
 }
-function y(t, e) {
+function H(t, e, r = i) {
   if (!t) return "";
-  const r = e ? Math.max(0, Math.min(e.start, e.end)) : -1, n = e ? Math.min(t.length, Math.max(e.start, e.end)) : -1;
-  return r < 0 || r === n ? m(t) : m(t.slice(0, r)) + `<span class="chat-input__emoji-selection" style="background-color: var(--chotto-chatinput-selection-bg, rgba(51, 133, 255, 0.35)); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;">${m(t.slice(r, n))}</span>` + m(t.slice(n));
+  const n = f(r), o = e ? Math.max(0, Math.min(e.start, e.end)) : -1, a = e ? Math.min(t.length, Math.max(e.start, e.end)) : -1;
+  return o < 0 || o === a ? g(t, n) : g(t.slice(0, o), n) + `<span class="chat-input__emoji-selection" style="background-color: var(--chotto-chatinput-selection-bg, rgba(51, 133, 255, 0.35)); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;">${g(t.slice(o, a), n)}</span>` + g(t.slice(a), n);
 }
-function S(t) {
-  return t ? (l.lastIndex = 0, l.test(t)) : !1;
+function R(t) {
+  return t ? (u.lastIndex = 0, u.test(t)) : !1;
 }
-function L(t) {
-  var s;
+function J(t, e = i) {
+  var F;
   if (!t || typeof document > "u") return t;
-  const e = document.createElement("div");
-  e.innerHTML = t;
-  const r = document.createTreeWalker(e, NodeFilter.SHOW_TEXT, {
-    acceptNode: (a) => {
-      let c = a.parentNode;
-      for (; c && c !== e; ) {
-        const i = c.nodeName;
-        if (i === "SCRIPT" || i === "STYLE" || i === "TEXTAREA")
+  const r = f(e), n = document.createElement("div");
+  n.innerHTML = t;
+  const o = document.createTreeWalker(n, NodeFilter.SHOW_TEXT, {
+    acceptNode: (E) => {
+      let s = E.parentNode;
+      for (; s && s !== n; ) {
+        const l = s.nodeName;
+        if (l === "SCRIPT" || l === "STYLE" || l === "TEXTAREA")
           return NodeFilter.FILTER_REJECT;
-        c = c.parentNode;
+        s = s.parentNode;
       }
       return NodeFilter.FILTER_ACCEPT;
     }
-  }), n = [];
-  let o;
-  for (; o = r.nextNode(); )
-    n.push(o);
-  for (const a of n.reverse()) {
-    const c = a.textContent || "";
-    if (l.lastIndex = 0, !l.test(c)) continue;
-    l.lastIndex = 0;
-    const i = document.createDocumentFragment();
-    let f = 0, u;
-    for (; u = l.exec(c); ) {
-      u.index > f && i.appendChild(document.createTextNode(c.slice(f, u.index)));
-      const F = N(u[0]);
-      i.appendChild(F), f = u.index + u[0].length;
+  }), a = [];
+  let c;
+  for (; c = o.nextNode(); )
+    a.push(c);
+  for (const E of a.reverse()) {
+    const s = E.textContent || "";
+    if (u.lastIndex = 0, !u.test(s)) continue;
+    u.lastIndex = 0;
+    const l = document.createDocumentFragment();
+    let h = 0, d;
+    for (; d = u.exec(s); ) {
+      d.index > h && l.appendChild(document.createTextNode(s.slice(h, d.index)));
+      const N = L(d[0], r);
+      l.appendChild(N), h = d.index + d[0].length;
     }
-    f < c.length && i.appendChild(document.createTextNode(c.slice(f))), (s = a.parentNode) == null || s.replaceChild(i, a);
+    h < s.length && l.appendChild(document.createTextNode(s.slice(h))), (F = E.parentNode) == null || F.replaceChild(l, E);
   }
-  return e.innerHTML;
+  return n.innerHTML;
 }
 export {
-  g as APPLE_EMOJI_CDN,
-  M as createAppleEmojiImgHtml,
-  N as createAppleEmojiSlotElement,
-  d as emojiToAppleCode,
-  A as getAppleEmojiFallbackUrl,
-  $ as getAppleEmojiUrl,
-  C as nextGraphemeIndex,
-  j as previousGraphemeIndex,
-  L as replaceEmojisInHtml,
-  v as snapIndexToGrapheme,
-  S as textContainsEmoji,
-  y as textToAppleEmojiHtml
+  i as APPLE_EMOJI_CDN,
+  j as createAppleEmojiImgHtml,
+  L as createAppleEmojiSlotElement,
+  p as emojiToAppleCode,
+  k as getAppleEmojiFallbackUrl,
+  S as getAppleEmojiUrl,
+  A as hasAppleEmojiImage,
+  w as nextGraphemeIndex,
+  f as normalizeEmojiCdn,
+  P as previousGraphemeIndex,
+  J as replaceEmojisInHtml,
+  O as snapIndexToGrapheme,
+  R as textContainsEmoji,
+  H as textToAppleEmojiHtml
 };