@dialpad/dialtone-vue 3.184.2 → 3.185.1

package/dist/lib/message-input/message-input.js

@@ -3,10 +3,10 @@ import { removeClassStyleAttrs as z, addClassStyleAttrs as N, returnFirstEl as U
 import { Node as H, mergeAttributes as W } from "@tiptap/core";
 import { NodeViewWrapper as K, nodeViewProps as X, VueNodeViewRenderer as Q } from "../../node_modules/@tiptap/vue-3.js";
 import { DtIconClose as G, DtIconVideo as Y, DtIconImage as J, DtIconVerySatisfied as Z, DtIconSatisfied as $, DtIconSend as ee } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as l, openBlock as r, createBlock as d, withCtx as a, createVNode as c, createElementVNode as u, createTextVNode as te, toDisplayString as T, resolveDirective as I, createElementBlock as v, mergeProps as _, withModifiers as C, renderSlot as g, createCommentVNode as h, withDirectives as f, normalizeStyle as ie, vShow as oe, normalizeClass as ne, createSlots as le } from "vue";
+import { resolveComponent as s, openBlock as r, createBlock as u, withCtx as a, createVNode as c, createElementVNode as m, createTextVNode as te, toDisplayString as T, resolveDirective as O, createElementBlock as w, mergeProps as _, withModifiers as I, renderSlot as g, createCommentVNode as h, withDirectives as f, normalizeStyle as ie, vShow as oe, normalizeClass as ne, createSlots as le } from "vue";
 import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import se from "../item-layout/item-layout.js";
-import j from "../button/button.js";
+import P from "../button/button.js";
 import ae from "./message-input-topbar.js";
 import re from "./message-input-link.js";
 import { EDITOR_SUPPORTED_LINK_PROTOCOLS as ce, EDITOR_DEFAULT_LINK_PREFIX as de } from "../editor/editor-constants.js";
@@ -23,32 +23,34 @@ const _e = {
     NodeViewWrapper: K,
     DtItemLayout: se,
     DtIconClose: G,
-    DtButton: j,
+    DtButton: P,
     DtIconVideo: Y
   },
   props: X,
   emits: ["meeting-pill-close"],
   methods: {
     close(t) {
-      this.$parent.$emit("meeting-pill-close", t);
+      var i, d, n;
+      const e = (n = (d = (i = this.editor) == null ? void 0 : i.storage) == null ? void 0 : d.meetingPill) == null ? void 0 : n.onClose;
+      e && typeof e == "function" && e(t);
     }
   }
-}, Te = { class: "d-recipe-message-input-meeting-pill__icon" }, Le = { class: "d-recipe-message-input-meeting-pill__close" };
-function Se(t, e, i, m, n, o) {
-  const L = l("dt-icon-video"), S = l("dt-icon-close"), x = l("dt-button"), y = l("dt-item-layout"), b = l("node-view-wrapper");
-  return r(), d(b, { class: "d-recipe-message-input-meeting-pill" }, {
+}, Te = { class: "d-recipe-message-input-meeting-pill__icon" }, Se = { class: "d-recipe-message-input-meeting-pill__close" };
+function Le(t, e, i, d, n, o) {
+  const S = s("dt-icon-video"), L = s("dt-icon-close"), x = s("dt-button"), y = s("dt-item-layout"), b = s("node-view-wrapper");
+  return r(), u(b, { class: "d-recipe-message-input-meeting-pill" }, {
     default: a(() => [
       c(y, {
         class: "d-recipe-message-input-meeting-pill__layout",
         unstyled: ""
       }, {
         left: a(() => [
-          u("div", Te, [
-            c(L, { size: "400" })
+          m("div", Te, [
+            c(S, { size: "400" })
           ])
         ]),
         right: a(() => [
-          u("div", Le, [
+          m("div", Se, [
             c(x, {
               circle: "",
               "aria-label": t.node.attrs["close-button-aria-label"],
@@ -57,7 +59,7 @@ function Se(t, e, i, m, n, o) {
               onClick: o.close
             }, {
               icon: a(() => [
-                c(S, { size: "300" })
+                c(L, { size: "300" })
               ]),
               _: 1
             }, 8, ["aria-label", "onClick"])
@@ -72,10 +74,22 @@ function Se(t, e, i, m, n, o) {
     _: 1
   });
 }
-const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
+const xe = /* @__PURE__ */ B(_e, [["render", Le]]), ye = H.create({
+  name: "meetingPill",
   atom: !0,
   group: "inline",
   inline: !0,
+  addOptions() {
+    return {
+      onClose: () => {
+      }
+    };
+  },
+  addStorage() {
+    return {
+      onClose: this.options.onClose
+    };
+  },
   addNodeView() {
     return Q(xe);
   },
@@ -100,11 +114,11 @@ const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
   renderHTML({ HTMLAttributes: t }) {
     return ["meeting-pill", W(t)];
   }
-}), we = {
+}), Ce = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeMessageInput",
   components: {
-    DtButton: j,
+    DtButton: P,
     DtEmojiPicker: ue,
     DtInput: me,
     DtPopover: pe,
@@ -554,7 +568,13 @@ const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
       // If an ordered list is nested within an unordered list, we only want to show the currently selected list as
       // active. This function performs the logic to determine the farthest active node from the root.
       lastActiveNodes: q,
-      additionalExtensions: [ye],
+      additionalExtensions: [
+        ye.configure({
+          onClose: (t) => {
+            this.$emit("meeting-pill-close", t);
+          }
+        })
+      ],
       internalInputValue: this.modelValue,
       // internal input content
       imagePickerFocus: !1,
@@ -619,8 +639,8 @@ const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
     },
     // eslint-disable-next-line complexity
     handleTopbarClick(t) {
-      var m;
-      const e = (m = this.$refs.richTextEditor) == null ? void 0 : m.editor, i = {
+      var d;
+      const e = (d = this.$refs.richTextEditor) == null ? void 0 : d.editor, i = {
         bold: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
         italic: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
         strike: () => e == null ? void 0 : e.chain().focus().toggleStrike().run(),
@@ -634,8 +654,8 @@ const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
     },
     // Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
     isSelectionActive(t) {
-      var e, i, m, n;
-      return ["bulletList", "orderedList"].includes(t) ? this.lastActiveNodes((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(t) && this.isFocused : ((n = (m = this.$refs.richTextEditor) == null ? void 0 : m.editor) == null ? void 0 : n.isActive(t)) && this.isFocused;
+      var e, i, d, n;
+      return ["bulletList", "orderedList"].includes(t) ? this.lastActiveNodes((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(t) && this.isFocused : ((n = (d = this.$refs.richTextEditor) == null ? void 0 : d.editor) == null ? void 0 : n.isActive(t)) && this.isFocused;
     },
     initLinkDialog() {
       var t, e, i;
@@ -705,22 +725,22 @@ const xe = /* @__PURE__ */ B(_e, [["render", Se]]), ye = H.create({
       this.text = t, this.$emit("text-input", t);
     }
   }
-}, ve = { class: "d-recipe-message-input__bottom-section" }, Oe = { class: "d-recipe-message-input__bottom-section-left" }, Ie = { class: "d-recipe-message-input__bottom-section-right" }, Ce = { class: "d-recipe-message-input__sms-count" }, Be = { key: 0 };
-function je(t, e, i, m, n, o) {
-  const L = l("dt-recipe-message-input-link"), S = l("dt-recipe-message-input-topbar"), x = l("dt-rich-text-editor"), y = l("dt-icon-image"), b = l("dt-button"), P = l("dt-input"), D = l("dt-icon-very-satisfied"), E = l("dt-icon-satisfied"), M = l("dt-emoji-picker"), V = l("dt-popover"), O = l("dt-stack"), F = l("dt-tooltip"), A = l("dt-icon-send"), R = I("dt-scrollbar"), w = I("dt-tooltip");
-  return r(), v("div", _({
+}, we = { class: "d-recipe-message-input__bottom-section" }, ve = { class: "d-recipe-message-input__bottom-section-left" }, Oe = { class: "d-recipe-message-input__bottom-section-right" }, Ie = { class: "d-recipe-message-input__sms-count" }, Be = { key: 0 };
+function Pe(t, e, i, d, n, o) {
+  const S = s("dt-recipe-message-input-link"), L = s("dt-recipe-message-input-topbar"), x = s("dt-rich-text-editor"), y = s("dt-icon-image"), b = s("dt-button"), j = s("dt-input"), D = s("dt-icon-very-satisfied"), E = s("dt-icon-satisfied"), M = s("dt-emoji-picker"), V = s("dt-popover"), v = s("dt-stack"), F = s("dt-tooltip"), A = s("dt-icon-send"), R = O("dt-scrollbar"), C = O("dt-tooltip");
+  return r(), w("div", _({
     "data-qa": "dt-recipe-message-input",
     role: "presentation",
     class: "d-recipe-message-input"
   }, o.addClassStyleAttrs(t.$attrs), {
-    onDragover: e[12] || (e[12] = C(() => {
+    onDragover: e[13] || (e[13] = I(() => {
     }, ["prevent"])),
-    onDrop: e[13] || (e[13] = C((...s) => o.onDrop && o.onDrop(...s), ["prevent"])),
-    onPaste: e[14] || (e[14] = (...s) => o.onPaste && o.onPaste(...s)),
-    onMousedown: e[15] || (e[15] = (...s) => o.onMousedown && o.onMousedown(...s))
+    onDrop: e[14] || (e[14] = I((...l) => o.onDrop && o.onDrop(...l), ["prevent"])),
+    onPaste: e[15] || (e[15] = (...l) => o.onPaste && o.onPaste(...l)),
+    onMousedown: e[16] || (e[16] = (...l) => o.onMousedown && o.onMousedown(...l))
   }), [
     g(t.$slots, "top"),
-    i.richText ? (r(), d(S, {
+    i.richText ? (r(), u(L, {
       key: n.selectedText,
       "bold-button-options": i.boldButtonOptions,
       "italic-button-options": i.italicButtonOptions,
@@ -734,7 +754,7 @@ function je(t, e, i, m, n, o) {
       onClick: o.handleTopbarClick
     }, {
       link: a(() => [
-        c(L, {
+        c(S, {
           ref: "link",
           open: n.linkDialogOpen,
           "link-button-options": i.linkButtonOptions,
@@ -746,14 +766,14 @@ function je(t, e, i, m, n, o) {
       ]),
       _: 1
     }, 8, ["bold-button-options", "italic-button-options", "strike-button-options", "bullet-list-button-options", "ordered-list-button-options", "block-quote-button-options", "code-button-options", "code-block-button-options", "is-selection-active", "onClick"])) : h("", !0),
-    f((r(), v("div", {
+    f((r(), w("div", {
       class: "d-recipe-message-input__editor-wrapper",
       style: ie({ "max-height": i.maxHeight })
     }, [
       c(x, _({
         ref: "richTextEditor",
         modelValue: n.internalInputValue,
-        "onUpdate:modelValue": e[0] || (e[0] = (s) => n.internalInputValue = s),
+        "onUpdate:modelValue": e[0] || (e[0] = (l) => n.internalInputValue = l),
         "allow-blockquote": i.richText,
         "allow-bold": i.richText,
         "allow-bullet-list": i.richText,
@@ -762,6 +782,7 @@ function je(t, e, i, m, n, o) {
         "allow-italic": i.richText,
         "allow-strike": i.richText,
         "allow-underline": i.richText,
+        "paste-rich-text": i.richText,
         editable: i.editable,
         "input-aria-label": i.inputAriaLabel,
         "input-class": i.inputClass,
@@ -779,25 +800,26 @@ function je(t, e, i, m, n, o) {
         onInput: o.onInput,
         onTextInput: o.onTextInput,
         onEnter: o.onSend,
-        onSelected: e[1] || (e[1] = (s) => n.selectedText = s),
+        onSelected: e[1] || (e[1] = (l) => n.selectedText = l),
+        onSelectedCommand: e[2] || (e[2] = (l) => t.$emit("selected-command", l)),
         onEditLink: o.initLinkDialog,
-        onFocus: e[2] || (e[2] = (s) => n.isFocused = !0),
-        onBlur: e[3] || (e[3] = (s) => n.isFocused = !1)
-      }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-code", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "hide-link-bubble-menu", "onInput", "onTextInput", "onEnter", "onEditLink"])
+        onFocus: e[3] || (e[3] = (l) => n.isFocused = !0),
+        onBlur: e[4] || (e[4] = (l) => n.isFocused = !1)
+      }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-code", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "paste-rich-text", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "prevent-typing", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "additional-extensions", "hide-link-bubble-menu", "onInput", "onTextInput", "onEnter", "onEditLink"])
     ], 4)), [
       [R]
     ]),
     g(t.$slots, "middle"),
-    u("section", ve, [
-      u("div", Oe, [
-        c(O, {
+    m("section", we, [
+      m("div", ve, [
+        c(v, {
           gap: "200",
           direction: "row"
         }, {
           default: a(() => {
-            var s;
+            var l;
             return [
-              i.showImagePicker ? f((r(), d(b, {
+              i.showImagePicker ? f((r(), u(b, {
                 key: 0,
                 "data-qa": "dt-recipe-message-input-image-btn",
                 size: "sm",
@@ -806,19 +828,19 @@ function je(t, e, i, m, n, o) {
                 importance: "clear",
                 "aria-label": i.showImagePicker.ariaLabel,
                 onClick: o.onSelectImage,
-                onMouseenter: e[4] || (e[4] = (p) => n.imagePickerFocus = !0),
-                onMouseleave: e[5] || (e[5] = (p) => n.imagePickerFocus = !1),
-                onFocus: e[6] || (e[6] = (p) => n.imagePickerFocus = !0),
-                onBlur: e[7] || (e[7] = (p) => n.imagePickerFocus = !1)
+                onMouseenter: e[5] || (e[5] = (p) => n.imagePickerFocus = !0),
+                onMouseleave: e[6] || (e[6] = (p) => n.imagePickerFocus = !1),
+                onFocus: e[7] || (e[7] = (p) => n.imagePickerFocus = !0),
+                onBlur: e[8] || (e[8] = (p) => n.imagePickerFocus = !1)
               }, {
                 icon: a(() => [
                   c(y, { size: "300" })
                 ]),
                 _: 1
               }, 8, ["aria-label", "onClick"])), [
-                [w, (s = i.showImagePicker) == null ? void 0 : s.tooltipLabel, "top-start"]
+                [C, (l = i.showImagePicker) == null ? void 0 : l.tooltipLabel, "top-start"]
               ]) : h("", !0),
-              c(P, {
+              c(j, {
                 ref: "messageInputImageUpload",
                 "data-qa": "dt-recipe-message-input-image-input",
                 accept: "image/*, video/*",
@@ -828,7 +850,7 @@ function je(t, e, i, m, n, o) {
                 hidden: "",
                 onInput: o.onImageUpload
               }, null, 8, ["onInput"]),
-              i.showEmojiPicker ? (r(), d(V, {
+              i.showEmojiPicker ? (r(), u(V, {
                 key: 1,
                 "open.sync": "emojiPickerOpened",
                 "data-qa": "dt-recipe-message-input-emoji-picker-popover",
@@ -836,7 +858,7 @@ function je(t, e, i, m, n, o) {
                 padding: "none"
               }, {
                 anchor: a(({ attrs: p }) => [
-                  f((r(), d(b, _(p, {
+                  f((r(), u(b, _(p, {
                     "data-qa": "dt-recipe-message-input-emoji-picker-btn",
                     size: "sm",
                     class: "d-recipe-message-input__button",
@@ -844,23 +866,23 @@ function je(t, e, i, m, n, o) {
                     importance: "clear",
                     "aria-label": i.emojiButtonAriaLabel,
                     onClick: o.toggleEmojiPicker,
-                    onMouseenter: e[8] || (e[8] = (k) => n.emojiPickerFocus = !0),
-                    onMouseleave: e[9] || (e[9] = (k) => n.emojiPickerFocus = !1),
-                    onFocus: e[10] || (e[10] = (k) => n.emojiPickerFocus = !0),
-                    onBlur: e[11] || (e[11] = (k) => n.emojiPickerFocus = !1)
+                    onMouseenter: e[9] || (e[9] = (k) => n.emojiPickerFocus = !0),
+                    onMouseleave: e[10] || (e[10] = (k) => n.emojiPickerFocus = !1),
+                    onFocus: e[11] || (e[11] = (k) => n.emojiPickerFocus = !0),
+                    onBlur: e[12] || (e[12] = (k) => n.emojiPickerFocus = !1)
                   }), {
                     icon: a(() => [
-                      o.emojiPickerHovered ? (r(), d(D, {
+                      o.emojiPickerHovered ? (r(), u(D, {
                         key: 0,
                         size: "300"
-                      })) : (r(), d(E, {
+                      })) : (r(), u(E, {
                         key: 1,
                         size: "300"
                       }))
                     ]),
                     _: 2
                   }, 1040, ["aria-label", "onClick"])), [
-                    [w, i.emojiTooltipMessage]
+                    [C, i.emojiTooltipMessage]
                   ])
                 ]),
                 content: a(({ close: p }) => [
@@ -878,16 +900,16 @@ function je(t, e, i, m, n, o) {
           _: 3
         })
       ]),
-      u("div", Ie, [
-        c(O, {
+      m("div", Oe, [
+        c(v, {
           direction: "row",
           gap: "300"
         }, {
           default: a(() => [
-            u("div", Ce, [
+            m("div", Ie, [
               g(t.$slots, "smsCount")
             ]),
-            i.showCharacterLimit ? (r(), d(F, {
+            i.showCharacterLimit ? (r(), u(F, {
               key: 0,
               class: "d-recipe-message-input__remaining-char-tooltip",
               placement: "top-end",
@@ -896,7 +918,7 @@ function je(t, e, i, m, n, o) {
               offset: [10, 8]
             }, {
               anchor: a(() => [
-                f(u("p", {
+                f(m("p", {
                   class: "d-recipe-message-input__remaining-char",
                   "data-qa": "dt-recipe-message-input-character-limit"
                 }, T(i.showCharacterLimit.count - o.inputLength), 513), [
@@ -905,7 +927,7 @@ function je(t, e, i, m, n, o) {
               ]),
               _: 1
             }, 8, ["enabled", "message"])) : h("", !0),
-            i.showCancel ? (r(), d(b, {
+            i.showCancel ? (r(), u(b, {
               key: 1,
               "data-qa": "dt-recipe-message-input-cancel-button",
               class: "d-recipe-message-input__button d-recipe-message-input__cancel-button",
@@ -916,14 +938,14 @@ function je(t, e, i, m, n, o) {
               onClick: o.onCancel
             }, {
               default: a(() => [
-                u("p", null, T(i.showCancel.text), 1)
+                m("p", null, T(i.showCancel.text), 1)
               ]),
               _: 1
             }, 8, ["aria-label", "onClick"])) : h("", !0),
             g(t.$slots, "sendButton", {}, () => {
-              var s;
+              var l;
               return [
-                i.showSend ? f((r(), d(b, {
+                i.showSend ? f((r(), u(b, {
                   key: 0,
                   "data-qa": "dt-recipe-message-input-send-btn",
                   size: "sm",
@@ -941,7 +963,7 @@ function je(t, e, i, m, n, o) {
                   onClick: o.onSend
                 }, le({
                   default: a(() => [
-                    i.showSend.text ? (r(), v("p", Be, T(i.showSend.text), 1)) : h("", !0)
+                    i.showSend.text ? (r(), w("p", Be, T(i.showSend.text), 1)) : h("", !0)
                   ]),
                   _: 2
                 }, [
@@ -955,7 +977,7 @@ function je(t, e, i, m, n, o) {
                     key: "0"
                   } : void 0
                 ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
-                  [w, (s = i.showSend) == null ? void 0 : s.tooltipLabel, "top-end"]
+                  [C, (l = i.showSend) == null ? void 0 : l.tooltipLabel, "top-end"]
                 ]) : h("", !0)
               ];
             })
@@ -966,7 +988,7 @@ function je(t, e, i, m, n, o) {
     ])
   ], 16);
 }
-const Je = /* @__PURE__ */ B(we, [["render", je]]);
+const Je = /* @__PURE__ */ B(Ce, [["render", Pe]]);
 export {
   Je as default
 };