@dialpad/dialtone-vue 3.131.0 → 3.132.0

package/dist/lib/message-input.js

@@ -1,29 +1,31 @@
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, normalizeStyle, createVNode, mergeProps, renderSlot, createBlock, withCtx, createCommentVNode, withDirectives, toDisplayString, vShow, createSlots } from "vue";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { NodeViewWrapper, nodeViewProps, VueNodeViewRenderer } from "@tiptap/vue-3";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, resolveDirective, createElementBlock, normalizeClass, withKeys, withModifiers, normalizeStyle, mergeProps, renderSlot, withDirectives, createCommentVNode, vShow, createSlots } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { DtButton } from "./button.js";
-import { DtEmojiPicker as _sfc_main$1 } from "./emoji-picker.js";
+import { DtItemLayout } from "./item-layout.js";
 import { DtIcon } from "./icon.js";
+import { DtButton } from "./button.js";
+import { DtEmojiPicker as _sfc_main$2 } from "./emoji-picker.js";
 import { DtInput } from "./input.js";
 import { DtPopover } from "./popover.js";
 import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
 import { DtTooltip } from "./tooltip.js";
 import "../common/utils.js";
 import "../common/constants.js";
+import "@dialpad/dialtone-icons/vue3";
+import "../chunks/icon_constants-Dy4MEUJL.js";
+import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "../chunks/tab-RTDgnD9-.js";
 import "@dialpad/dialtone-emojis";
 import "../chunks/input-NmYDD5bn.js";
 import "../common/validators.js";
 import "./validation-messages.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
-import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/popover_constants-kQaX7G4a.js";
 import "tippy.js";
 import "../chunks/modal-XOr4kiNZ.js";
 import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./lazy-show.js";
-import "@tiptap/vue-3";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
 import "@tiptap/extension-document";
@@ -40,7 +42,6 @@ import "@tiptap/extension-strike";
 import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
-import "@tiptap/core";
 import "./emoji.js";
 import "../chunks/index-GVD15GIB.js";
 import "./skeleton.js";
@@ -48,7 +49,6 @@ import "@tiptap/pm/state";
 import "@tiptap/suggestion";
 import "./list-item.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
-import "./item-layout.js";
 import "./stack.js";
 import "../chunks/stack_constants-HraCekPm.js";
 import "@tiptap/extension-mention";
@@ -57,11 +57,106 @@ import "./avatar.js";
 import "./presence.js";
 import "@dialpad/dialtone-icons/vue3/hash";
 import "@dialpad/dialtone-icons/vue3/lock";
+const _sfc_main$1 = {
+  name: "MeetingPill",
+  components: {
+    NodeViewWrapper,
+    DtItemLayout,
+    DtIcon,
+    DtButton
+  },
+  props: 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 = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_item_layout = resolveComponent("dt-item-layout");
+  const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
+  return openBlock(), createBlock(_component_node_view_wrapper, { class: "dt-message-input-meeting-pill" }, {
+    default: withCtx(() => [
+      createVNode(_component_dt_item_layout, {
+        class: "dt-message-input-meeting-pill__layout",
+        unstyled: ""
+      }, {
+        left: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createVNode(_component_dt_icon, {
+              name: "video",
+              size: "400"
+            })
+          ])
+        ]),
+        right: withCtx(() => [
+          createElementVNode("div", _hoisted_2$1, [
+            createVNode(_component_dt_button, {
+              circle: "",
+              "aria-label": _ctx.node.attrs["close-button-aria-label"],
+              size: "xs",
+              importance: "clear",
+              onClick: $options.close
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
+                  name: "close",
+                  size: "300"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createTextVNode(" " + toDisplayString(_ctx.node.attrs.text) + " ", 1)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const MeetingPill = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const meetingPill = Node.create({
+  atom: true,
+  group: "inline",
+  inline: true,
+  addNodeView() {
+    return 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", mergeAttributes(HTMLAttributes)];
+  }
+});
 const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
     DtButton,
-    DtEmojiPicker: _sfc_main$1,
+    DtEmojiPicker: _sfc_main$2,
     DtIcon,
     DtInput,
     DtPopover,
@@ -94,6 +189,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,
@@ -381,24 +483,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
@@ -408,12 +492,12 @@ const _sfc_main = {
   ],
   data() {
     return {
+      additionalExtensions: [meetingPill],
       internalInputValue: this.modelValue,
       // internal input content
       hasFocus: false,
       imagePickerFocus: false,
       emojiPickerFocus: false,
-      sendButtonFocus: false,
       emojiPickerOpened: false
     };
   },
@@ -485,9 +569,6 @@ const _sfc_main = {
       });
       this.$emit("selected-emoji", emoji);
     },
-    onSelectedCommand(command) {
-      this.$emit("selected-command", command);
-    },
     onSelectImage() {
       this.$refs.messageInputImageUpload.$refs.input.click();
     },
@@ -510,55 +591,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 = resolveComponent("dt-rich-text-editor");
   const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_input = resolveComponent("dt-input");
-  const _component_dt_tooltip = resolveComponent("dt-tooltip");
   const _component_dt_emoji_picker = resolveComponent("dt-emoji-picker");
   const _component_dt_popover = resolveComponent("dt-popover");
+  const _component_dt_tooltip = resolveComponent("dt-tooltip");
   const _directive_dt_tooltip = resolveDirective("dt-tooltip");
   return openBlock(), createElementBlock("div", {
     "data-qa": "dt-message-input",
     role: "presentation",
-    class: 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: 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] = withKeys(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] = withKeys(withModifiers((...args) => $options.onSend && $options.onSend(...args), ["exact"]), ["enter"])),
+    onPaste: _cache[15] || (_cache[15] = (...args) => $options.onPaste && $options.onPaste(...args))
   }, [
     createElementVNode("div", {
-      class: "d-of-auto d-mx16 d-mt8 d-mb4",
+      class: "dt-message-input__editor-wrapper",
       style: normalizeStyle({ "max-height": $props.maxHeight })
     }, [
       createVNode(_component_dt_rich_text_editor, mergeProps({
@@ -579,64 +650,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),
     renderSlot(_ctx.$slots, "middle"),
     createElementVNode("section", _hoisted_1, [
       createElementVNode("div", _hoisted_2, [
-        $props.showImagePicker ? (openBlock(), createBlock(_component_dt_tooltip, {
+        $props.showImagePicker ? withDirectives((openBlock(), 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: withCtx(() => [
-            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: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: "image",
-                  size: "300"
-                })
-              ]),
-              _: 1
-            }, 8, ["kind", "aria-label", "onClick"]),
-            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: withCtx(() => [
+            createVNode(_component_dt_icon, {
+              name: "image",
+              size: "300"
+            })
           ]),
           _: 1
-        }, 8, ["message"])) : createCommentVNode("", true),
+        }, 8, ["kind", "aria-label", "onClick"])), [
+          [_directive_dt_tooltip, (_a = $props.showImagePicker) == null ? void 0 : _a.tooltipLabel, "top-start"]
+        ]) : createCommentVNode("", true),
+        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 ? (openBlock(), 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"
@@ -650,10 +715,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: withCtx(() => [
                 createVNode(_component_dt_icon, {
@@ -682,7 +747,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", _hoisted_3, [
         Boolean($props.showCharacterLimit) ? (openBlock(), 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,
@@ -690,7 +755,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           anchor: withCtx(() => [
             withDirectives(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"
             }, toDisplayString($props.showCharacterLimit.count - $options.inputLength), 513), [
               [vShow, $options.displayCharacterLimitWarning]
@@ -701,7 +766,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.showCancel ? (openBlock(), 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",
@@ -713,53 +778,40 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
         }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
-        $props.showSend ? (openBlock(), createBlock(_component_dt_tooltip, {
+        $props.showSend ? withDirectives((openBlock(), 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: withCtx(() => [
-            createVNode(_component_dt_button, {
-              "data-qa": "dt-message-input-send-btn",
-              size: "sm",
-              kind: "default",
-              importance: "primary",
-              class: 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)
-            }, createSlots({
-              default: withCtx(() => [
-                $props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              $props.showSend.icon ? {
-                name: "icon",
-                fn: withCtx(() => [
-                  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: normalizeClass([
+            {
+              "dt-message-input__send-button--disabled": $options.isSendDisabled,
+              "d-btn--circle": $props.showSend.icon
+            }
           ]),
-          _: 1
-        }, 8, ["enabled", "message", "show"])) : createCommentVNode("", true)
+          "aria-label": $props.showSend.ariaLabel,
+          "aria-disabled": $options.isSendDisabled,
+          onClick: $options.onSend
+        }, createSlots({
+          default: withCtx(() => [
+            $props.showSend.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($props.showSend.text), 1)) : createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          $props.showSend.icon ? {
+            name: "icon",
+            fn: withCtx(() => [
+              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"]
+        ]) : createCommentVNode("", true)
       ])
     ])
   ], 34);