tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/dist/components/MessageInput/TextEditor/extensions/index.js

@@ -0,0 +1,12 @@
+import { CharacterCount as r } from "./characterCountExtension.js";
+import { createEmojiExtension as n } from "./emojiExtension.js";
+import { createEnterKeyExtension as a } from "./enterKeyExtension.js";
+import { createImageExtension as i } from "./imageExtension.js";
+import { createMentionExtension as c } from "./mentionExtension.js";
+export {
+  r as CharacterCount,
+  n as createEmojiExtension,
+  a as createEnterKeyExtension,
+  i as createImageExtension,
+  c as createMentionExtension
+};

package/dist/components/MessageInput/TextEditor/extensions/mentionExtension.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Create Mention extension for @ member functionality
+ * @returns Configured Mention extension
+ */
+export declare function createMentionExtension(): import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;

package/dist/components/MessageInput/TextEditor/extensions/mentionExtension.js

@@ -0,0 +1,330 @@
+import { P as V, a as K, D as F, b as G, e as z, N as j, c as J, m as q } from "../../../../index-C8Jw_xE4.js";
+import { V as Q } from "../../../../index-CzCDLp99.js";
+import { ConversationType as X } from "../../../../types/engine.js";
+import Y from "./MentionSuggestion.js";
+import { useGroupSettingState as Z } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupType as ee } from "../../../../states/GroupSettingState/types.js";
+import { useConversationListState as te } from "../../../../states/ConversationListState/ConversationListState.js";
+function ne(e) {
+  var t;
+  const { char: n, allowSpaces: o, allowToIncludeChar: r, allowedPrefixes: a, startOfLine: m, $position: l } = e, u = o && !r, c = z(n), S = new RegExp(`\\s${c}$`), x = m ? "^" : "", $ = r ? "" : c, B = u ? new RegExp(`${x}${c}.*?(?=\\s${$}|$)`, "gm") : new RegExp(`${x}(?:^)?${c}[^\\s${$}]*`, "gm"), h = ((t = l.nodeBefore) === null || t === void 0 ? void 0 : t.isText) && l.nodeBefore.text;
+  if (!h)
+    return null;
+  const i = l.pos - h.length, g = Array.from(h.matchAll(B)).pop();
+  if (!g || g.input === void 0 || g.index === void 0)
+    return null;
+  const d = g.input.slice(Math.max(0, g.index - 1), g.index), f = new RegExp(`^[${a == null ? void 0 : a.join("")}\0]?$`).test(d);
+  if (a !== null && !f)
+    return null;
+  const p = i + g.index;
+  let v = p + g[0].length;
+  return u && S.test(h.slice(v - 1, v + 1)) && (g[0] += " ", v += 1), p < l.pos && v >= l.pos ? {
+    range: {
+      from: p,
+      to: v
+    },
+    query: g[0].slice(n.length),
+    text: g[0]
+  } : null;
+}
+const oe = new K("suggestion");
+function ie({ pluginKey: e = oe, editor: t, char: n = "@", allowSpaces: o = !1, allowToIncludeChar: r = !1, allowedPrefixes: a = [" "], startOfLine: m = !1, decorationTag: l = "span", decorationClass: u = "suggestion", command: c = () => null, items: S = () => [], render: x = () => ({}), allow: $ = () => !0, findSuggestionMatch: B = ne }) {
+  let h;
+  const i = x == null ? void 0 : x(), g = new V({
+    key: e,
+    view() {
+      return {
+        update: async (d, f) => {
+          var p, v, T, b, w, A, M;
+          const s = (p = this.key) === null || p === void 0 ? void 0 : p.getState(f), y = (v = this.key) === null || v === void 0 ? void 0 : v.getState(d.state), C = s.active && y.active && s.range.from !== y.range.from, R = !s.active && y.active, D = s.active && !y.active, P = !R && !D && s.query !== y.query, _ = R || C && P, E = P || C, k = D || C && P;
+          if (!_ && !E && !k)
+            return;
+          const L = k && !_ ? s : y, N = d.dom.querySelector(`[data-decoration-id="${L.decorationId}"]`);
+          h = {
+            editor: t,
+            range: L.range,
+            query: L.query,
+            text: L.text,
+            items: [],
+            command: (H) => c({
+              editor: t,
+              range: L.range,
+              props: H
+            }),
+            decorationNode: N,
+            // virtual node for popper.js or tippy.js
+            // this can be used for building popups without a DOM node
+            clientRect: N ? () => {
+              var H;
+              const { decorationId: U } = (H = this.key) === null || H === void 0 ? void 0 : H.getState(t.state), I = d.dom.querySelector(`[data-decoration-id="${U}"]`);
+              return (I == null ? void 0 : I.getBoundingClientRect()) || null;
+            } : null
+          }, _ && ((T = i == null ? void 0 : i.onBeforeStart) === null || T === void 0 || T.call(i, h)), E && ((b = i == null ? void 0 : i.onBeforeUpdate) === null || b === void 0 || b.call(i, h)), (E || _) && (h.items = await S({
+            editor: t,
+            query: L.query
+          })), k && ((w = i == null ? void 0 : i.onExit) === null || w === void 0 || w.call(i, h)), E && ((A = i == null ? void 0 : i.onUpdate) === null || A === void 0 || A.call(i, h)), _ && ((M = i == null ? void 0 : i.onStart) === null || M === void 0 || M.call(i, h));
+        },
+        destroy: () => {
+          var d;
+          h && ((d = i == null ? void 0 : i.onExit) === null || d === void 0 || d.call(i, h));
+        }
+      };
+    },
+    state: {
+      // Initialize the plugin's internal state.
+      init() {
+        return {
+          active: !1,
+          range: {
+            from: 0,
+            to: 0
+          },
+          query: null,
+          text: null,
+          composing: !1
+        };
+      },
+      // Apply changes to the plugin state from a view transaction.
+      apply(d, f, p, v) {
+        const { isEditable: T } = t, { composing: b } = t.view, { selection: w } = d, { empty: A, from: M } = w, s = { ...f };
+        if (s.composing = b, T && (A || t.view.composing)) {
+          (M < f.range.from || M > f.range.to) && !b && !f.composing && (s.active = !1);
+          const y = B({
+            char: n,
+            allowSpaces: o,
+            allowToIncludeChar: r,
+            allowedPrefixes: a,
+            startOfLine: m,
+            $position: w.$from
+          }), C = `id_${Math.floor(Math.random() * 4294967295)}`;
+          y && $({
+            editor: t,
+            state: v,
+            range: y.range,
+            isActive: f.active
+          }) ? (s.active = !0, s.decorationId = f.decorationId ? f.decorationId : C, s.range = y.range, s.query = y.query, s.text = y.text) : s.active = !1;
+        } else
+          s.active = !1;
+        return s.active || (s.decorationId = null, s.range = { from: 0, to: 0 }, s.query = null, s.text = null), s;
+      }
+    },
+    props: {
+      // Call the keydown hook if suggestion is active.
+      handleKeyDown(d, f) {
+        var p;
+        const { active: v, range: T } = g.getState(d.state);
+        return v && ((p = i == null ? void 0 : i.onKeyDown) === null || p === void 0 ? void 0 : p.call(i, { view: d, event: f, range: T })) || !1;
+      },
+      // Setup decorator on the currently active suggestion.
+      decorations(d) {
+        const { active: f, range: p, decorationId: v } = g.getState(d);
+        return f ? F.create(d.doc, [
+          G.inline(p.from, p.to, {
+            nodeName: l,
+            class: u,
+            "data-decoration-id": v
+          })
+        ]) : null;
+      }
+    }
+  });
+  return g;
+}
+function re({ editor: e, overrideSuggestionOptions: t, extensionName: n, char: o = "@" }) {
+  const r = new K();
+  return {
+    editor: e,
+    char: o,
+    pluginKey: r,
+    command: ({ editor: a, range: m, props: l }) => {
+      var u, c, S;
+      const x = a.view.state.selection.$to.nodeAfter;
+      ((u = x == null ? void 0 : x.text) === null || u === void 0 ? void 0 : u.startsWith(" ")) && (m.to += 1), a.chain().focus().insertContentAt(m, [
+        {
+          type: n,
+          attrs: { ...l, mentionSuggestionChar: o }
+        },
+        {
+          type: "text",
+          text: " "
+        }
+      ]).run(), (S = (c = a.view.dom.ownerDocument.defaultView) === null || c === void 0 ? void 0 : c.getSelection()) === null || S === void 0 || S.collapseToEnd();
+    },
+    allow: ({ state: a, range: m }) => {
+      const l = a.doc.resolve(m.from), u = a.schema.nodes[n];
+      return !!l.parent.type.contentMatch.matchType(u);
+    },
+    ...t
+  };
+}
+function W(e) {
+  return (e.options.suggestions.length ? e.options.suggestions : [e.options.suggestion]).map((t) => re({
+    // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+    editor: e.editor,
+    overrideSuggestionOptions: t,
+    extensionName: e.name,
+    char: t.char
+  }));
+}
+function O(e, t) {
+  const n = W(e), o = n.find((r) => r.char === t);
+  return o || (n.length ? n[0] : null);
+}
+const ae = j.create({
+  name: "mention",
+  priority: 101,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderText({ node: e, suggestion: t }) {
+        var n, o;
+        return `${(n = t == null ? void 0 : t.char) !== null && n !== void 0 ? n : "@"}${(o = e.attrs.label) !== null && o !== void 0 ? o : e.attrs.id}`;
+      },
+      deleteTriggerWithBackspace: !1,
+      renderHTML({ options: e, node: t, suggestion: n }) {
+        var o, r;
+        return [
+          "span",
+          q(this.HTMLAttributes, e.HTMLAttributes),
+          `${(o = n == null ? void 0 : n.char) !== null && o !== void 0 ? o : "@"}${(r = t.attrs.label) !== null && r !== void 0 ? r : t.attrs.id}`
+        ];
+      },
+      suggestions: [],
+      suggestion: {}
+    };
+  },
+  group: "inline",
+  inline: !0,
+  selectable: !1,
+  atom: !0,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (e) => e.getAttribute("data-id"),
+        renderHTML: (e) => e.id ? {
+          "data-id": e.id
+        } : {}
+      },
+      label: {
+        default: null,
+        parseHTML: (e) => e.getAttribute("data-label"),
+        renderHTML: (e) => e.label ? {
+          "data-label": e.label
+        } : {}
+      },
+      // When there are multiple types of mentions, this attribute helps distinguish them
+      mentionSuggestionChar: {
+        default: "@",
+        parseHTML: (e) => e.getAttribute("data-mention-suggestion-char"),
+        renderHTML: (e) => ({
+          "data-mention-suggestion-char": e.mentionSuggestionChar
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderHTML({ node: e, HTMLAttributes: t }) {
+    const n = O(this, e.attrs.mentionSuggestionChar);
+    if (this.options.renderLabel !== void 0)
+      return console.warn("renderLabel is deprecated use renderText and renderHTML instead"), [
+        "span",
+        q({ "data-type": this.name }, this.options.HTMLAttributes, t),
+        this.options.renderLabel({
+          options: this.options,
+          node: e,
+          suggestion: n
+        })
+      ];
+    const o = { ...this.options };
+    o.HTMLAttributes = q({ "data-type": this.name }, this.options.HTMLAttributes, t);
+    const r = this.options.renderHTML({
+      options: o,
+      node: e,
+      suggestion: n
+    });
+    return typeof r == "string" ? [
+      "span",
+      q({ "data-type": this.name }, this.options.HTMLAttributes, t),
+      r
+    ] : r;
+  },
+  renderText({ node: e }) {
+    const t = {
+      options: this.options,
+      node: e,
+      suggestion: O(this, e.attrs.mentionSuggestionChar)
+    };
+    return this.options.renderLabel !== void 0 ? (console.warn("renderLabel is deprecated use renderText and renderHTML instead"), this.options.renderLabel(t)) : this.options.renderText(t);
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr: e, state: t }) => {
+        let n = !1;
+        const { selection: o } = t, { empty: r, anchor: a } = o;
+        if (!r)
+          return !1;
+        t.doc.nodesBetween(a - 1, a, (u, c) => {
+          if (u.type.name === this.name)
+            return n = !0, e.insertText(this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "", c, c + u.nodeSize), !1;
+        });
+        let m = new J(), l = 0;
+        return t.doc.nodesBetween(a - 1, a, (u, c) => {
+          if (u.type.name === this.name)
+            return n = !0, m = u, l = c, !1;
+        }), n && e.insertText(this.options.deleteTriggerWithBackspace ? "" : m.attrs.mentionSuggestionChar, l, l + m.nodeSize), n;
+      })
+    };
+  },
+  addProseMirrorPlugins() {
+    return W(this).map(ie);
+  }
+});
+function pe() {
+  return ae.configure({
+    deleteTriggerWithBackspace: !0,
+    HTMLAttributes: {
+      class: "uikit-message-input-mention-tag"
+    },
+    suggestion: {
+      char: "@",
+      // Items are now managed inside the component via GroupSettingState
+      items: () => [],
+      render: () => {
+        let e = null, t = null;
+        const n = () => {
+          t != null && t.parentNode && t.parentNode.removeChild(t), e == null || e.destroy(), e = null, t = null;
+        };
+        return {
+          onStart: (o) => {
+            var l;
+            const { activeConversation: r } = te(), { memberCount: a, groupType: m } = Z();
+            ((l = r.value) == null ? void 0 : l.type) === X.GROUP && a.value && a.value > 1 && m.value !== ee.AVCHATROOM && (e = new Q(Y, {
+              props: o,
+              editor: o.editor
+            }), e.element && (t = e.element, document.body.appendChild(t)));
+          },
+          onUpdate(o) {
+            e == null || e.updateProps(o);
+          },
+          onKeyDown(o) {
+            var r, a;
+            return o.event.key === "Escape" ? (n(), !0) : ((a = (r = e == null ? void 0 : e.ref) == null ? void 0 : r.onKeyDown) == null ? void 0 : a.call(r, o)) || !1;
+          },
+          onExit() {
+            n();
+          }
+        };
+      }
+    }
+  });
+}
+export {
+  pe as createMentionExtension
+};

package/dist/components/MessageInput/TextEditor/index.js

@@ -1,74 +1,83 @@
-import { defineComponent as I, ref as p, onMounted as F, onUnmounted as g, watch as c, createElementBlock as f, openBlock as m, normalizeClass as d, unref as a, createElementVNode as _, renderSlot as h } from "vue";
-import { useUIKit as B } from "@tencentcloud/uikit-base-component-vue3";
-import { createEditor as S } from "./EditorCore.js";
+import { defineComponent as b, computed as I, watch as i, onBeforeUnmount as S, createElementBlock as B, openBlock as L, normalizeClass as r, unref as n, createElementVNode as p, createVNode as M, renderSlot as c } from "vue";
+import { useUIKit as y } from "@tencentcloud/uikit-base-component-vue3";
+import { u as N, a as P } from "../../../index-CzCDLp99.js";
+import { createExtensions as U, convertEditorContent as V } from "./EditorCore.js";
 import { useMessageInputState as k } from "../../../states/MessageInputState/MessageInputState.js";
-import { useConversationListState as M } from "../../../states/ConversationListState/ConversationListState.js";
-const D = "_disabled_ihh75_11", R = "_editor_ihh75_21", o = {
+import { useConversationListState as w } from "../../../states/ConversationListState/ConversationListState.js";
+const F = "_disabled_ihh75_11", O = "_editor_ihh75_21", s = {
   "input-wrapper": "_input-wrapper_ihh75_1",
-  disabled: D,
+  disabled: F,
   "input-prefix": "_input-prefix_ihh75_15",
   "input-suffix": "_input-suffix_ihh75_16",
-  editor: R
-}, $ = /* @__PURE__ */ I({
+  editor: O
+}, K = /* @__PURE__ */ b({
   __name: "TextEditor",
   props: {
     autoFocus: { type: Boolean, default: !0 },
     disabled: { type: Boolean, default: !1 },
-    placeholder: { default: void 0 }
+    placeholder: { default: void 0 },
+    maxLength: { default: void 0 }
   },
-  setup(b) {
-    const t = b, { t: x } = B(), { activeConversation: E } = M(), { updateRawValue: v, sendMessage: y, setEditorInstance: n, setContent: r } = k(), l = p(null), u = p(t.autoFocus);
-    let s = null;
-    return F(() => {
-      const e = l.value;
-      e && (e.classList.add("message-input"), e.dataset.editorCreated || (s = S({
-        element: e,
-        placeholder: t.placeholder ?? x("MessageInput.enter_a_message"),
-        isPlaceholderOnlyShowWhenEditable: t.placeholder === void 0,
-        autoFocus: t.autoFocus,
-        disabled: t.disabled,
-        onUpdate: (i) => {
-          v(i);
-        },
-        onEnter: () => {
-          y(), r("");
-        },
-        onFocus: () => {
-          u.value = !0;
-        },
-        onBlur: () => {
-          u.value = !1;
-        }
-      }), e.dataset.editorCreated = "true", n(s)));
-    }), g(() => {
-      const e = l.value;
-      s && e && (s.destroy(), e.removeAttribute("data-editor-created"), n(null));
-    }), c(E, (e, i) => {
-      (e == null ? void 0 : e.conversationID) !== (i == null ? void 0 : i.conversationID) && r("");
-    }), c(() => t.disabled, (e) => {
-      s && (s.setEditable(!e), e && r(""));
-    }), (e, i) => (m(), f("div", {
-      class: d([a(o)["input-wrapper"], t.disabled && a(o).disabled])
+  setup(f) {
+    const o = f, { t: m, language: h } = y(), { activeConversation: x } = w(), { updateRawValue: _, sendMessage: E, setEditorInstance: d, setContent: l } = k(), u = I(() => o.placeholder ?? m("MessageInput.enter_a_message")), g = () => {
+      E(), l("");
+    }, a = N({
+      autofocus: o.autoFocus,
+      editable: !o.disabled,
+      extensions: U({
+        placeholder: u.value,
+        maxLength: o.maxLength,
+        showPlaceholderOnlyWhenEditable: o.placeholder === void 0,
+        onEnter: g
+      }),
+      onUpdate: ({ editor: e }) => {
+        const t = V(e.getJSON());
+        _(t);
+      }
+    });
+    return i(a, (e) => {
+      d(e ?? null);
+    }, { immediate: !0 }), i(() => o.disabled, (e) => {
+      var t;
+      (t = a.value) == null || t.setEditable(!e), e && l("");
+    }), i([u, h], () => {
+      if (!a.value)
+        return;
+      const e = a.value.extensionManager.extensions.find(
+        (t) => t.name === "placeholder"
+      );
+      e && (e.options.placeholder = u.value, a.value.view.updateState(a.value.state));
+    }), i(() => o.maxLength, (e) => {
+      if (!a.value)
+        return;
+      const t = a.value.extensionManager.extensions.find(
+        (v) => v.name === "characterCount"
+      );
+      t && (t.options.limit = e);
+    }), i(x, (e, t) => {
+      (e == null ? void 0 : e.conversationID) !== (t == null ? void 0 : t.conversationID) && l("");
+    }), S(() => {
+      d(null);
+    }), (e, t) => (L(), B("div", {
+      class: r([n(s)["input-wrapper"], o.disabled && n(s).disabled])
     }, [
-      _("div", {
-        class: d(a(o)["input-prefix"])
+      p("div", {
+        class: r(n(s)["input-prefix"])
       }, [
-        h(e.$slots, "inputPrefix")
+        c(e.$slots, "inputPrefix")
       ], 2),
-      (m(), f("div", {
-        ref_key: "editorDomRef",
-        ref: l,
-        key: t.disabled ? "disabled" : "enabled",
-        class: d(a(o).editor)
-      }, null, 2)),
-      _("div", {
-        class: d(a(o)["input-suffix"])
+      M(n(P), {
+        editor: n(a),
+        class: r([n(s).editor, "message-input"])
+      }, null, 8, ["editor", "class"]),
+      p("div", {
+        class: r(n(s)["input-suffix"])
       }, [
-        h(e.$slots, "inputSuffix")
+        c(e.$slots, "inputSuffix")
       ], 2)
     ], 2));
   }
 });
 export {
-  $ as TextEditor
+  K as TextEditor
 };