@dialpad/dialtone-vue 3.131.0 → 3.132.0

package/dist/lib/message-input.cjs

@@ -1,31 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@tiptap/core");
+const vue3 = require("@tiptap/vue-3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_itemLayout = require("./item-layout.cjs");
+const lib_icon = require("./icon.cjs");
 const lib_button = require("./button.cjs");
 const lib_emojiPicker = require("./emoji-picker.cjs");
-const lib_icon = require("./icon.cjs");
 const lib_input = require("./input.cjs");
 const lib_popover = require("./popover.cjs");
 const lib_richTextEditor = require("./rich-text-editor.cjs");
 const lib_tooltip = require("./tooltip.cjs");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("../chunks/tab-qc3f42Yp.js");
 require("@dialpad/dialtone-emojis");
 require("../chunks/input-ttnte8zB.js");
 require("../common/validators.cjs");
 require("./validation-messages.cjs");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
-require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/popover_constants-qUYTzsS3.js");
 require("tippy.js");
 require("../chunks/modal-VgxXAQFP.js");
 require("../chunks/sr_only_close_button-xGrHFjwA.js");
 require("./lazy-show.cjs");
-require("@tiptap/vue-3");
 require("@tiptap/extension-blockquote");
 require("@tiptap/extension-code-block");
 require("@tiptap/extension-document");
@@ -42,7 +44,6 @@ require("@tiptap/extension-strike");
 require("@tiptap/extension-underline");
 require("@tiptap/extension-text");
 require("@tiptap/extension-text-align");
-require("@tiptap/core");
 require("./emoji.cjs");
 require("../chunks/index-lu2o2f4r.js");
 require("./skeleton.cjs");
@@ -50,7 +51,6 @@ require("@tiptap/pm/state");
 require("@tiptap/suggestion");
 require("./list-item.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");
-require("./item-layout.cjs");
 require("./stack.cjs");
 require("../chunks/stack_constants-SMzMWnAQ.js");
 require("@tiptap/extension-mention");
@@ -59,6 +59,101 @@ require("./avatar.cjs");
 require("./presence.cjs");
 require("@dialpad/dialtone-icons/vue3/hash");
 require("@dialpad/dialtone-icons/vue3/lock");
+const _sfc_main$1 = {
+  name: "MeetingPill",
+  components: {
+    NodeViewWrapper: vue3.NodeViewWrapper,
+    DtItemLayout: lib_itemLayout.DtItemLayout,
+    DtIcon: lib_icon.DtIcon,
+    DtButton: lib_button.DtButton
+  },
+  props: vue3.nodeViewProps,
+  emits: ["meeting-pill-close"],
+  methods: {
+    close(e) {
+      this.$parent.$emit("meeting-pill-close", e);
+    }
+  }
+};
+const _hoisted_1$1 = { class: "dt-message-input-meeting-pill__icon" };
+const _hoisted_2$1 = { class: "dt-message-input-meeting-pill__close" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
+  const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
+  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "dt-message-input-meeting-pill" }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_item_layout, {
+        class: "dt-message-input-meeting-pill__layout",
+        unstyled: ""
+      }, {
+        left: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1$1, [
+            vue.createVNode(_component_dt_icon, {
+              name: "video",
+              size: "400"
+            })
+          ])
+        ]),
+        right: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_2$1, [
+            vue.createVNode(_component_dt_button, {
+              circle: "",
+              "aria-label": _ctx.node.attrs["close-button-aria-label"],
+              size: "xs",
+              importance: "clear",
+              onClick: $options.close
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  name: "close",
+                  size: "300"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createTextVNode(" " + vue.toDisplayString(_ctx.node.attrs.text) + " ", 1)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const MeetingPill = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const meetingPill = core.Node.create({
+  atom: true,
+  group: "inline",
+  inline: true,
+  addNodeView() {
+    return vue3.VueNodeViewRenderer(MeetingPill);
+  },
+  addAttributes() {
+    return {
+      text: {
+        default: 'Please pass in "text" attribute'
+      },
+      "close-button-aria-label": {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "meeting-pill"
+      }
+    ];
+  },
+  renderText({ node }) {
+    return "/dpm";
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["meeting-pill", core.mergeAttributes(HTMLAttributes)];
+  }
+});
 const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
@@ -96,6 +191,13 @@ const _sfc_main = {
       required: true,
       default: ""
     },
+    /**
+     * Prevents the user from typing any further. Deleting text will still work.
+     */
+    preventTyping: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Additional class name for the input element. Only accepts a String value
      * because this is passed to the editor via options. For multiple classes,
@@ -383,24 +485,6 @@ const _sfc_main = {
      * @type {String}
      */
     "selected-command",
-    /**
-     * Native focus event
-     * @event input
-     * @type {String|JSON}
-     */
-    "focus",
-    /**
-     * Native blur event
-     * @event input
-     * @type {String|JSON}
-     */
-    "blur",
-    /**
-     * Native input event
-     * @event input
-     * @type {String|JSON}
-     */
-    "input",
     /**
      * Event to sync the value with the parent
      * @event update:modelValue
@@ -410,12 +494,12 @@ const _sfc_main = {
   ],
   data() {
     return {
+      additionalExtensions: [meetingPill],
       internalInputValue: this.modelValue,
       // internal input content
       hasFocus: false,
       imagePickerFocus: false,
       emojiPickerFocus: false,
-      sendButtonFocus: false,
       emojiPickerOpened: false
     };
   },
@@ -487,9 +571,6 @@ const _sfc_main = {
       });
       this.$emit("selected-emoji", emoji);
     },
-    onSelectedCommand(command) {
-      this.$emit("selected-command", command);
-    },
     onSelectImage() {
       this.$refs.messageInputImageUpload.$refs.input.click();
     },
@@ -512,55 +593,45 @@ const _sfc_main = {
       var _a;
       this.hasFocus = true;
       (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
-      this.$emit("focus", event);
     },
     onBlur(event) {
       this.hasFocus = false;
-      this.$emit("blur", event);
     },
     onInput(event) {
-      this.$emit("input", event);
       this.$emit("update:modelValue", event);
     }
   }
 };
-const _hoisted_1 = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" };
-const _hoisted_2 = { class: "d-d-flex" };
-const _hoisted_3 = { class: "d-d-flex" };
+const _hoisted_1 = { class: "dt-message-input__bottom-section" };
+const _hoisted_2 = { class: "dt-message-input__bottom-section-left" };
+const _hoisted_3 = { class: "dt-message-input__bottom-section-right" };
 const _hoisted_4 = { key: 0 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a, _b;
   const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_dt_input = vue.resolveComponent("dt-input");
-  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
   const _component_dt_emoji_picker = vue.resolveComponent("dt-emoji-picker");
   const _component_dt_popover = vue.resolveComponent("dt-popover");
+  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
   const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
   return vue.openBlock(), vue.createElementBlock("div", {
     "data-qa": "dt-message-input",
     role: "presentation",
-    class: vue.normalizeClass([
-      "d-d-flex",
-      "d-fd-column",
-      "d-bar8",
-      "d-baw1",
-      "d-ba",
-      "d-c-text",
-      { "d-bc-bold d-bs-sm": $data.hasFocus, "d-bc-default": !$data.hasFocus }
-    ]),
-    onClick: _cache[15] || (_cache[15] = ($event) => {
-      var _a;
-      return (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+    class: vue.normalizeClass(["dt-message-input", { "dt-message-input--focused": $data.hasFocus }]),
+    onClick: _cache[10] || (_cache[10] = ($event) => {
+      var _a2;
+      return (_a2 = _ctx.$refs.richTextEditor) == null ? void 0 : _a2.focusEditor();
     }),
-    onDragEnter: _cache[16] || (_cache[16] = (...args) => $options.onDrag && $options.onDrag(...args)),
-    onDragOver: _cache[17] || (_cache[17] = (...args) => $options.onDrag && $options.onDrag(...args)),
-    onDrop: _cache[18] || (_cache[18] = (...args) => $options.onDrop && $options.onDrop(...args)),
-    onKeydown: _cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers((...args) => $options.onSend && $options.onSend(...args), ["exact"]), ["enter"])),
-    onPaste: _cache[20] || (_cache[20] = (...args) => $options.onPaste && $options.onPaste(...args))
+    onDragEnter: _cache[11] || (_cache[11] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDragOver: _cache[12] || (_cache[12] = (...args) => $options.onDrag && $options.onDrag(...args)),
+    onDrop: _cache[13] || (_cache[13] = (...args) => $options.onDrop && $options.onDrop(...args)),
+    onKeydown: _cache[14] || (_cache[14] = vue.withKeys(vue.withModifiers((...args) => $options.onSend && $options.onSend(...args), ["exact"]), ["enter"])),
+    onPaste: _cache[15] || (_cache[15] = (...args) => $options.onPaste && $options.onPaste(...args))
   }, [
     vue.createElementVNode("div", {
-      class: "d-of-auto d-mx16 d-mt8 d-mb4",
+      class: "dt-message-input__editor-wrapper",
       style: vue.normalizeStyle({ "max-height": $props.maxHeight })
     }, [
       vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
@@ -581,64 +652,58 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "auto-focus": $props.autoFocus,
         link: $props.link,
         placeholder: $props.placeholder,
+        "prevent-typing": $props.preventTyping,
         "mention-suggestion": $props.mentionSuggestion,
         "channel-suggestion": $props.channelSuggestion,
-        "slash-command-suggestion": $props.slashCommandSuggestion
+        "slash-command-suggestion": $props.slashCommandSuggestion,
+        "additional-extensions": $data.additionalExtensions
       }, _ctx.$attrs, {
         onFocus: $options.onFocus,
         onBlur: $options.onBlur,
-        onInput: _cache[1] || (_cache[1] = ($event) => $options.onInput($event)),
-        onSelectedCommand: $options.onSelectedCommand
-      }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "allow-codeblock", "allow-italic", "allow-strike", "allow-underline", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "mention-suggestion", "channel-suggestion", "slash-command-suggestion", "onFocus", "onBlur", "onSelectedCommand"])
+        onInput: $options.onInput
+      }), null, 16, ["modelValue", "allow-blockquote", "allow-bold", "allow-bullet-list", "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", "onFocus", "onBlur", "onInput"])
     ], 4),
     vue.renderSlot(_ctx.$slots, "middle"),
     vue.createElementVNode("section", _hoisted_1, [
       vue.createElementVNode("div", _hoisted_2, [
-        $props.showImagePicker ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+        $props.showImagePicker ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
           key: 0,
-          placement: "top-start",
-          message: $props.showImagePicker.tooltipLabel,
-          offset: [-4, 12]
+          "data-qa": "dt-message-input-image-btn",
+          size: "sm",
+          circle: "",
+          kind: $data.imagePickerFocus ? "default" : "muted",
+          importance: "clear",
+          "aria-label": $props.showImagePicker.ariaLabel,
+          onClick: $options.onSelectImage,
+          onMouseenter: _cache[1] || (_cache[1] = ($event) => $data.imagePickerFocus = true),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = false),
+          onFocus: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = true),
+          onBlur: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = false)
         }, {
-          anchor: vue.withCtx(() => [
-            vue.createVNode(_component_dt_button, {
-              "data-qa": "dt-message-input-image-btn",
-              size: "sm",
-              circle: "",
-              kind: $data.imagePickerFocus ? "default" : "muted",
-              importance: "clear",
-              "aria-label": $props.showImagePicker.ariaLabel,
-              onClick: $options.onSelectImage,
-              onMouseenter: _cache[2] || (_cache[2] = ($event) => $data.imagePickerFocus = true),
-              onMouseleave: _cache[3] || (_cache[3] = ($event) => $data.imagePickerFocus = false),
-              onFocus: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = true),
-              onBlur: _cache[5] || (_cache[5] = ($event) => $data.imagePickerFocus = false)
-            }, {
-              icon: vue.withCtx(() => [
-                vue.createVNode(_component_dt_icon, {
-                  name: "image",
-                  size: "300"
-                })
-              ]),
-              _: 1
-            }, 8, ["kind", "aria-label", "onClick"]),
-            vue.createVNode(_component_dt_input, {
-              ref: "messageInputImageUpload",
-              "data-qa": "dt-message-input-image-input",
-              accept: "image/*, video/*",
-              type: "file",
-              class: "d-ps-absolute",
-              multiple: "",
-              hidden: "",
-              onInput: $options.onImageUpload
-            }, null, 8, ["onInput"])
+          icon: vue.withCtx(() => [
+            vue.createVNode(_component_dt_icon, {
+              name: "image",
+              size: "300"
+            })
           ]),
           _: 1
-        }, 8, ["message"])) : vue.createCommentVNode("", true),
+        }, 8, ["kind", "aria-label", "onClick"])), [
+          [_directive_dt_tooltip, (_a = $props.showImagePicker) == null ? void 0 : _a.tooltipLabel, "top-start"]
+        ]) : vue.createCommentVNode("", true),
+        vue.createVNode(_component_dt_input, {
+          ref: "messageInputImageUpload",
+          "data-qa": "dt-message-input-image-input",
+          accept: "image/*, video/*",
+          type: "file",
+          class: "dt-message-input__image-input",
+          multiple: "",
+          hidden: "",
+          onInput: $options.onImageUpload
+        }, null, 8, ["onInput"]),
         $props.showEmojiPicker ? (vue.openBlock(), vue.createBlock(_component_dt_popover, {
           key: 1,
           open: $data.emojiPickerOpened,
-          "onUpdate:open": _cache[10] || (_cache[10] = ($event) => $data.emojiPickerOpened = $event),
+          "onUpdate:open": _cache[9] || (_cache[9] = ($event) => $data.emojiPickerOpened = $event),
           "data-qa": "dt-message-input-emoji-picker-popover",
           "initial-focus-element": "#searchInput",
           padding: "none"
@@ -652,10 +717,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               importance: "clear",
               "aria-label": $props.emojiButtonAriaLabel,
               onClick: $options.toggleEmojiPicker,
-              onMouseenter: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = true),
-              onMouseleave: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = false),
-              onFocus: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = true),
-              onBlur: _cache[9] || (_cache[9] = ($event) => $data.emojiPickerFocus = false)
+              onMouseenter: _cache[5] || (_cache[5] = ($event) => $data.emojiPickerFocus = true),
+              onMouseleave: _cache[6] || (_cache[6] = ($event) => $data.emojiPickerFocus = false),
+              onFocus: _cache[7] || (_cache[7] = ($event) => $data.emojiPickerFocus = true),
+              onBlur: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = false)
             }), {
               icon: vue.withCtx(() => [
                 vue.createVNode(_component_dt_icon, {
@@ -684,7 +749,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createElementVNode("div", _hoisted_3, [
         Boolean($props.showCharacterLimit) ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
           key: 0,
-          class: "dt-message-input--remaining-char-tooltip",
+          class: "dt-message-input__remaining-char-tooltip",
           placement: "top-end",
           enabled: $options.characterLimitTooltipEnabled,
           message: $props.showCharacterLimit.message,
@@ -692,7 +757,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           anchor: vue.withCtx(() => [
             vue.withDirectives(vue.createElementVNode("p", {
-              class: "d-fc-error d-mr16 dt-message-input--remaining-char",
+              class: "dt-message-input__remaining-char",
               "data-qa": "dt-message-input-character-limit"
             }, vue.toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
               [vue.vShow, $options.displayCharacterLimitWarning]
@@ -703,7 +768,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.showCancel ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
           key: 1,
           "data-qa": "dt-message-input-cancel-button",
-          class: "dt-message-input--cancel-button",
+          class: "dt-message-input__cancel-button",
           size: "sm",
           kind: "muted",
           importance: "clear",
@@ -715,53 +780,40 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
         }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
-        $props.showSend ? (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+        $props.showSend ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_dt_button, {
           key: 2,
-          placement: "top-end",
-          enabled: !$props.showSend,
-          message: $props.showSend.tooltipLabel,
-          show: !$options.isSendDisabled && $data.sendButtonFocus,
-          offset: [6, 8]
-        }, {
-          anchor: vue.withCtx(() => [
-            vue.createVNode(_component_dt_button, {
-              "data-qa": "dt-message-input-send-btn",
-              size: "sm",
-              kind: "default",
-              importance: "primary",
-              class: vue.normalizeClass([
-                {
-                  "message-input-button__disabled d-fc-muted": $options.isSendDisabled,
-                  "d-btn--circle": $props.showSend.icon
-                }
-              ]),
-              "aria-label": $props.showSend.ariaLabel,
-              "aria-disabled": $options.isSendDisabled,
-              onClick: $options.onSend,
-              onMouseenter: _cache[11] || (_cache[11] = ($event) => $data.sendButtonFocus = true),
-              onMouseleave: _cache[12] || (_cache[12] = ($event) => $data.sendButtonFocus = false),
-              onFocus: _cache[13] || (_cache[13] = ($event) => $data.sendButtonFocus = true),
-              onBlur: _cache[14] || (_cache[14] = ($event) => $data.sendButtonFocus = false)
-            }, vue.createSlots({
-              default: vue.withCtx(() => [
-                $props.showSend.text ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4, vue.toDisplayString($props.showSend.text), 1)) : vue.createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              $props.showSend.icon ? {
-                name: "icon",
-                fn: vue.withCtx(() => [
-                  vue.createVNode(_component_dt_icon, {
-                    name: $props.showSend.icon,
-                    size: "300"
-                  }, null, 8, ["name"])
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])
+          "data-qa": "dt-message-input-send-btn",
+          size: "sm",
+          kind: "default",
+          importance: "primary",
+          class: vue.normalizeClass([
+            {
+              "dt-message-input__send-button--disabled": $options.isSendDisabled,
+              "d-btn--circle": $props.showSend.icon
+            }
           ]),
-          _: 1
-        }, 8, ["enabled", "message", "show"])) : vue.createCommentVNode("", true)
+          "aria-label": $props.showSend.ariaLabel,
+          "aria-disabled": $options.isSendDisabled,
+          onClick: $options.onSend
+        }, vue.createSlots({
+          default: vue.withCtx(() => [
+            $props.showSend.text ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4, vue.toDisplayString($props.showSend.text), 1)) : vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          $props.showSend.icon ? {
+            name: "icon",
+            fn: vue.withCtx(() => [
+              vue.createVNode(_component_dt_icon, {
+                name: $props.showSend.icon,
+                size: "300"
+              }, null, 8, ["name"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])), [
+          [_directive_dt_tooltip, (_b = $props.showSend) == null ? void 0 : _b.tooltipLabel, "top-end"]
+        ]) : vue.createCommentVNode("", true)
       ])
     ])
   ], 34);