tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

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

@@ -1,9 +1,12 @@
-import { S as g, P as x, E as d, I as o } from "../../../index-Bm-QfV5o.js";
-import { E as M } from "../../../index-D2OVtqc8.js";
-import { MessageContentType as n } from "../../../states/MessageInputState/type.js";
-function y() {
-  return o.extend({
-    name: n.EMOJI,
+import { I as x } from "../../../index-B_-9wgM4.js";
+import { S as y, P as d, E as M } from "../../../index-DMfTuy0v.js";
+import { CharacterCount as b } from "./extensions/characterCountExtension.js";
+import { createImageExtension as p } from "./extensions/imageExtension.js";
+import { E as I } from "../../../index-DV6o6s43.js";
+import { MessageContentType as r } from "../../../states/MessageInputState/type.js";
+function T() {
+  return x.extend({
+    name: r.EMOJI,
     inline: !0,
     group: "inline",
     draggable: !0,
@@ -18,34 +21,8 @@ function y() {
     }
   });
 }
-function T() {
-  return o.extend({
-    addOptions() {
-      var t;
-      return {
-        ...(t = this.parent) == null ? void 0 : t.call(this),
-        HTMLAttributes: {
-          class: "message-image"
-        }
-      };
-    },
-    addAttributes() {
-      var t;
-      return {
-        ...(t = this.parent) == null ? void 0 : t.call(this),
-        fileData: {
-          default: null,
-          parseHTML: (e) => e.getAttribute("file-data"),
-          renderHTML: (e) => e.fileData ? { "file-data": e.fileData } : {}
-        }
-      };
-    }
-  }).configure({
-    inline: !0
-  });
-}
-function p(t) {
-  return M.create({
+function C(t) {
+  return I.create({
     addKeyboardShortcuts() {
       return {
         Enter: () => {
@@ -59,30 +36,30 @@ function p(t) {
 }
 function c(t) {
   return t != null && t.content ? t.content.flatMap((e) => {
-    var a, s, r, u;
+    var n, a, s, o;
     switch (e.type) {
       case "text":
         return e.text ? [{
-          type: n.TEXT,
+          type: r.TEXT,
           content: e.text
         }] : [];
       case "image":
         return [{
-          type: n.IMAGE,
-          content: (a = e.attrs) == null ? void 0 : a.fileData
+          type: r.IMAGE,
+          content: (n = e.attrs) == null ? void 0 : n.fileData
         }];
       case "emoji":
         return [{
-          type: n.EMOJI,
+          type: r.EMOJI,
           content: {
-            url: (s = e.attrs) == null ? void 0 : s.src,
-            key: (r = e.attrs) == null ? void 0 : r.alt,
-            text: (u = e.attrs) == null ? void 0 : u.title
+            url: (a = e.attrs) == null ? void 0 : a.src,
+            key: (s = e.attrs) == null ? void 0 : s.alt,
+            text: (o = e.attrs) == null ? void 0 : o.title
           }
         }];
       case "hardBreak":
         return [{
-          type: n.TEXT,
+          type: r.TEXT,
           content: `
 `
         }];
@@ -91,38 +68,49 @@ function c(t) {
     }
   }) : [];
 }
-function B({
+function J({
   element: t,
   placeholder: e = "",
-  autoFocus: a = !1,
-  disabled: s = !1,
-  onUpdate: r,
-  onEnter: u,
-  onFocus: f,
+  autoFocus: n = !1,
+  disabled: a = !1,
+  isPlaceholderOnlyShowWhenEditable: s = !0,
+  maxLength: o = void 0,
+  onUpdate: u,
+  onEnter: f,
+  onFocus: m,
   onBlur: E
 }) {
-  const m = {
+  const l = {
     element: t,
-    autofocus: a,
-    editable: !s,
+    autofocus: n,
+    editable: !a,
     extensions: ((i) => [
-      g,
-      p(i ? { onEnter: i } : void 0),
-      y(),
+      y.configure({
+        bold: !1,
+        italic: !1,
+        strike: !1,
+        code: !1
+      }),
+      b.configure({
+        limit: o
+      }),
+      C(i ? { onEnter: i } : void 0),
       T(),
-      x.configure({
-        placeholder: e
+      p(),
+      d.configure({
+        placeholder: e,
+        showOnlyWhenEditable: s
       })
-    ])(u),
+    ])(f),
     onUpdate: ({ editor: i }) => {
-      const l = c(i.getJSON());
-      r == null || r(l);
+      const g = c(i.getJSON());
+      u == null || u(g);
     },
-    onFocus: f,
+    onFocus: m,
     onBlur: E
   };
-  return new d(m);
+  return new M(l);
 }
 export {
-  B as createEditor
+  J as createEditor
 };

package/dist/components/MessageInput/TextEditor/TextEditor.vue.d.ts

@@ -2,6 +2,7 @@ interface TextEditorProps {
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    maxLength?: number;
 }
 declare function __VLS_template(): {
     inputPrefix?(_: {}): any;
@@ -10,15 +11,18 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     autoFocus: boolean;
     disabled: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     autoFocus: boolean;
     disabled: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
 }>>> & Readonly<{}>, {
     placeholder: string;
     disabled: boolean;
     autoFocus: boolean;
+    maxLength: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -0,0 +1,19 @@
+import { Extension } from '@tiptap/vue-3';
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+    limit: number | null | undefined;
+    textCounter: (text: string) => number;
+    wordCounter: (text: string) => number;
+}
+interface CharacterCountStorage {
+    characters: (options?: {
+        node?: ProseMirrorNode;
+        mode?: 'textSize' | 'nodeSize';
+    }) => number;
+    words: (options?: {
+        node?: ProseMirrorNode;
+    }) => number;
+}
+declare const CharacterCount: Extension<CharacterCountOptions, CharacterCountStorage>;
+export { CharacterCount, };

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

@@ -0,0 +1,74 @@
+import { E as l, P as f, a as h } from "../../../../index-DV6o6s43.js";
+function g(e) {
+  if (typeof Intl < "u" && "Segmenter" in Intl) {
+    const r = new Intl.Segmenter("en", { granularity: "grapheme" });
+    return Array.from(r.segment(e)).length;
+  }
+  return [...e].length;
+}
+const p = l.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: (e) => e.length,
+      wordCounter: (e) => e.split(" ").filter((r) => r !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (e) => {
+      const r = (e == null ? void 0 : e.node) || this.editor.state.doc;
+      let s = 0;
+      return r.descendants((t) => {
+        t.isText && t.text ? s += g(t.text) : t.type.name === "emoji" && (s += 1);
+      }), s;
+    }, this.storage.words = (e) => {
+      const r = (e == null ? void 0 : e.node) || this.editor.state.doc, s = r.textBetween(0, r.content.size, " ", " ");
+      return this.options.wordCounter(s);
+    };
+  },
+  addProseMirrorPlugins() {
+    let e = !1;
+    return [
+      new f({
+        key: new h("characterCount"),
+        appendTransaction: (r, s, t) => {
+          if (e)
+            return;
+          const { limit: n } = this.options;
+          if (n == null || n === 0) {
+            e = !0;
+            return;
+          }
+          const o = this.storage.characters({ node: t.doc });
+          if (o > n) {
+            const c = o - n, a = 0, u = c, i = t.tr.deleteRange(a, u);
+            return e = !0, i;
+          }
+          e = !0;
+        },
+        filterTransaction: (r, s) => {
+          const { limit: t } = this.options;
+          if (!r.docChanged || t === 0 || t === null || t === void 0)
+            return !0;
+          const n = this.storage.characters({ node: s.doc }), o = this.storage.characters({ node: r.doc }), c = r.getMeta("paste");
+          if (o <= t || n > t && o > t && o <= n)
+            return !0;
+          if (n > t && o > t && o > n || !c)
+            return !1;
+          const { pos: a } = r.selection.$head, u = o - t, i = a - u, d = a;
+          return !(i < 0 || (r.deleteRange(i, d), this.storage.characters({ node: r.doc }) > t));
+        }
+      })
+    ];
+  }
+});
+export {
+  p as CharacterCount
+};

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

@@ -0,0 +1,2 @@
+declare function createImageExtension(): import('@tiptap/core').Node<import('@tiptap/extension-image').ImageOptions, any>;
+export { createImageExtension, };

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

@@ -0,0 +1,62 @@
+import { I as g } from "../../../../index-B_-9wgM4.js";
+import { P as m, a as f } from "../../../../index-DV6o6s43.js";
+function I() {
+  return g.extend({
+    addOptions() {
+      var e;
+      return {
+        ...(e = this.parent) == null ? void 0 : e.call(this),
+        HTMLAttributes: {
+          class: "message-image"
+        }
+      };
+    },
+    addAttributes() {
+      var e;
+      return {
+        ...(e = this.parent) == null ? void 0 : e.call(this),
+        fileData: {
+          default: null,
+          parseHTML: () => null,
+          renderHTML: () => ({})
+        }
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new m({
+          key: new f("imagePaste"),
+          props: {
+            handlePaste: (e, l) => {
+              var i;
+              const s = Array.from(((i = l.clipboardData) == null ? void 0 : i.items) || []).filter((a) => a.type.indexOf("image") === 0);
+              return s.length === 0 ? !1 : (s.forEach((a) => {
+                const r = a.getAsFile();
+                if (r) {
+                  const t = new FileReader();
+                  t.onload = (n) => {
+                    var o;
+                    const d = (o = n.target) == null ? void 0 : o.result, c = e.state.schema.nodes.image.create({
+                      src: d,
+                      fileData: r
+                    }), u = e.state.tr.replaceSelectionWith(c);
+                    e.dispatch(u);
+                  }, t.onerror = (n) => {
+                    console.error("[MessageInput]::Failed to read image file:", n);
+                  }, t.onabort = () => {
+                    console.warn("[MessageInput]::Image file reading was aborted.");
+                  }, t.readAsDataURL(r);
+                }
+              }), !0);
+            }
+          }
+        })
+      ];
+    }
+  }).configure({
+    inline: !0
+  });
+}
+export {
+  I as createImageExtension
+};

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

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