@dialpad/dialtone 9.96.0 → 9.97.0

package/dist/vue3/recipes/conversation_view/message_input/message_input.vue.js

@@ -1,6 +1,10 @@
+import lastActiveNodes from "./last_active_nodes.js";
 import MeetingPill from "./extensions/meeting_pill/meeting_pill.js";
 import { DtIconImage, DtIconVerySatisfied, DtIconSatisfied, DtIconSend } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, withDirectives, normalizeStyle, createVNode, mergeProps, createElementVNode, withCtx, createBlock, createCommentVNode, toDisplayString, vShow, createSlots } from "vue";
+import DtRecipeMessageInputTopbar from "./message_input_topbar.vue.js";
+import DtRecipeMessageInputLink from "./message_input_link.vue.js";
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS, EDITOR_DEFAULT_LINK_PREFIX } from "../editor/editor_constants.js";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, withCtx, createVNode, createCommentVNode, withDirectives, normalizeStyle, mergeProps, createElementVNode, toDisplayString, vShow, normalizeClass, createSlots } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../../../components/button/button.vue.js";
 import DtEmojiPicker from "../../../components/emoji_picker/emoji_picker.vue.js";
@@ -17,6 +21,8 @@ const _sfc_main = {
     DtEmojiPicker,
     DtInput,
     DtPopover,
+    DtRecipeMessageInputTopbar,
+    DtRecipeMessageInputLink,
     DtRichTextEditor,
     DtTooltip,
     DtStack,
@@ -28,6 +34,18 @@ const _sfc_main = {
   mixins: [],
   inheritAttrs: false,
   props: {
+    /**
+     * Displays all the buttons for rich text formatting above the message input, and enables it within the editor.
+     * Rich text formatting for the purposes of this component is defined as:
+     *
+     * bold, italic, strikethrough, lists, blockquotes, inline code tags, and code blocks.
+     *
+     * If you are sending a message to a phone rather than a Dialpad to Dialpad message, you should have this as false.
+     */
+    richText: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Value of the input. The object format should match TipTap's JSON
      * document structure: https://tiptap.dev/guide/output#option-1-json
@@ -96,18 +114,11 @@ const _sfc_main = {
      */
     outputFormat: {
       type: String,
-      default: "text",
+      default: "json",
       validator(outputFormat) {
         return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
     },
-    /**
-     * Enables the Link extension and optionally passes configurations to it
-     */
-    link: {
-      type: [Boolean, Object],
-      default: true
-    },
     /**
      * Placeholder text
      */
@@ -242,53 +253,139 @@ const _sfc_main = {
       default: null
     },
     /**
-     * Whether the input allows for block quote.
+     * descriptive text fields for the bold button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowBlockquote: {
-      type: Boolean,
-      default: true
+    boldButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bold on selected text",
+        tooltipText: "Bold",
+        keyboardShortcutText: "Mod + B"
+      })
     },
     /**
-     * Whether the input allows for bold to be introduced in the text.
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowBold: {
-      type: Boolean,
-      default: true
+    italicButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle italic on selected text",
+        tooltipText: "Italic",
+        keyboardShortcutText: "Mod + I"
+      })
     },
     /**
-     * Whether the input allows for bullet list to be introduced in the text.
+     * descriptive text fields for the strikethrough button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowBulletList: {
-      type: Boolean,
-      default: true
+    strikeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle strikethrough on selected text",
+        tooltipText: "Strikethrough",
+        keyboardShortcutText: "Mod + Shift + S"
+      })
     },
     /**
-     * Whether the input allows for italic to be introduced in the text.
+     * descriptive text fields for the link button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowItalic: {
-      type: Boolean,
-      default: true
+    linkButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Create or edit link on selected text",
+        tooltipText: "Link",
+        // TODO: implement mod k
+        keyboardShortcutText: "Mod + K",
+        dialogTitle: "Add a link",
+        textLabel: "Text to display (optional)",
+        linkLabel: "Link",
+        linkPlaceholder: "e.g. https://www.dialpad.com",
+        removeLabel: "Remove",
+        cancelLabel: "Cancel",
+        confirmLabel: "Done",
+        visuallyHiddenCloseText: "Close link dialog"
+      })
     },
     /**
-     * Whether the input allows for strike to be introduced in the text.
+     * descriptive text fields for the bullet list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowStrike: {
-      type: Boolean,
-      default: true
+    bulletListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bullet list on selected text",
+        tooltipText: "Bullet list",
+        keyboardShortcutText: "Mod + Shift + 8"
+      })
     },
     /**
-     * Whether the input allows for underline to be introduced in the text.
+     * descriptive text fields for the ordered list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowUnderline: {
-      type: Boolean,
-      default: true
+    orderedListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle ordered list on selected text",
+        tooltipText: "Ordered list",
+        keyboardShortcutText: "Mod + Shift + 7"
+      })
     },
     /**
-     * Whether the input allows codeblock to be introduced in the text.
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowCodeblock: {
-      type: Boolean,
-      default: true
+    blockQuoteButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle Blockquote on selected text",
+        tooltipText: "Blockquote",
+        keyboardShortcutText: "Mod + Shift + B"
+      })
+    },
+    /**
+     * descriptive text fields for the code button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    codeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code tag on selected text",
+        tooltipText: "Code",
+        keyboardShortcutText: "Mod + E"
+      })
+    },
+    /**
+     * descriptive text fields for the code block button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    codeBlockButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code block on selected text",
+        tooltipText: "Code block",
+        keyboardShortcutText: "Mod + Alt + C"
+      })
     }
   },
   emits: [
@@ -360,16 +457,33 @@ const _sfc_main = {
      * @event update:modelValue
      * @type {String|JSON}
      */
-    "update:modelValue"
+    "update:modelValue",
+    /**
+     * Emitted when input changes, returns text content only
+     * @event text-input
+     * @type {String}
+     */
+    "text-input"
   ],
   data() {
     return {
+      // 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,
       additionalExtensions: [MeetingPill],
       internalInputValue: this.modelValue,
       // internal input content
       imagePickerFocus: false,
       emojiPickerFocus: false,
-      emojiPickerOpened: false
+      emojiPickerOpened: false,
+      isFocused: false,
+      linkOptions: {
+        class: "d-link d-c-text d-d-inline-block"
+      },
+      linkDialogOpen: false,
+      selectedText: "",
+      text: "",
+      hideLinkBubbleMenu: false
     };
   },
   computed: {
@@ -377,7 +491,7 @@ const _sfc_main = {
       return !this.showSend.text;
     },
     inputLength() {
-      return this.internalInputValue.length;
+      return this.text.length;
     },
     displayCharacterLimitWarning() {
       return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
@@ -414,9 +528,68 @@ const _sfc_main = {
   created() {
     if (this.modelValue && this.outputFormat === "text") {
       this.internalInputValue = this.modelValue.replace(/\n/g, "<br>");
+    } else {
+      this.internalInputValue = this.modelValue;
     }
   },
   methods: {
+    linkDialogOpened(value) {
+      var _a;
+      this.linkDialogOpen = value;
+      if (value === true) {
+        this.initLinkDialog();
+      } else {
+        this.hideLinkBubbleMenu = false;
+        (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      }
+    },
+    // eslint-disable-next-line complexity
+    handleTopbarClick(type) {
+      var _a;
+      const editor = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
+      const typeToCommandMap = {
+        bold: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+        italic: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
+        strike: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
+        bulletList: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run(),
+        orderedList: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run(),
+        blockquote: () => editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run(),
+        code: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
+        codeBlock: () => editor == null ? void 0 : editor.chain().focus().toggleCodeBlock().run()
+      };
+      if (editor && typeToCommandMap[type]) {
+        typeToCommandMap[type]();
+      }
+    },
+    // Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
+    isSelectionActive(type) {
+      var _a, _b, _c, _d;
+      if (["bulletList", "orderedList"].includes(type)) {
+        return this.lastActiveNodes((_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(type) && this.isFocused;
+      }
+      return ((_d = (_c = this.$refs.richTextEditor) == null ? void 0 : _c.editor) == null ? void 0 : _d.isActive(type)) && this.isFocused;
+    },
+    initLinkDialog() {
+      var _a, _b, _c;
+      this.$refs.link.setInitialValues(this.selectedText, (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href);
+      this.hideLinkBubbleMenu = true;
+      this.linkDialogOpen = true;
+    },
+    removeLink() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.removeLink();
+      this.linkDialogOpen = false;
+    },
+    setLink(linkText, linkInput) {
+      this.$refs.richTextEditor.setLink(
+        linkInput,
+        linkText,
+        this.linkOptions,
+        EDITOR_SUPPORTED_LINK_PROTOCOLS,
+        EDITOR_DEFAULT_LINK_PREFIX
+      );
+      this.linkDialogOpen = false;
+    },
     // Mousedown instead of click because it fires before the blur event.
     onMousedown(e) {
       const isWithinInput = this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(e.target);
@@ -479,6 +652,10 @@ const _sfc_main = {
     },
     onInput(event) {
       this.$emit("update:modelValue", event);
+    },
+    onTextInput(event) {
+      this.text = event;
+      this.$emit("text-input", event);
     }
   }
 };
@@ -488,6 +665,8 @@ const _hoisted_3 = { class: "d-recipe-message-input__bottom-section-right" };
 const _hoisted_4 = { class: "d-recipe-message-input__sms-count" };
 const _hoisted_5 = { key: 0 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_recipe_message_input_link = resolveComponent("dt-recipe-message-input-link");
+  const _component_dt_recipe_message_input_topbar = resolveComponent("dt-recipe-message-input-topbar");
   const _component_dt_rich_text_editor = resolveComponent("dt-rich-text-editor");
   const _component_dt_icon_image = resolveComponent("dt-icon-image");
   const _component_dt_button = resolveComponent("dt-button");
@@ -504,14 +683,40 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     "data-qa": "dt-recipe-message-input",
     role: "presentation",
-    class: normalizeClass(["d-recipe-message-input"]),
-    onDragover: _cache[10] || (_cache[10] = withModifiers(() => {
+    class: "d-recipe-message-input",
+    onDragover: _cache[12] || (_cache[12] = withModifiers(() => {
     }, ["prevent"])),
-    onDrop: _cache[11] || (_cache[11] = withModifiers((...args) => $options.onDrop && $options.onDrop(...args), ["prevent"])),
-    onPaste: _cache[12] || (_cache[12] = (...args) => $options.onPaste && $options.onPaste(...args)),
-    onMousedown: _cache[13] || (_cache[13] = (...args) => $options.onMousedown && $options.onMousedown(...args))
+    onDrop: _cache[13] || (_cache[13] = withModifiers((...args) => $options.onDrop && $options.onDrop(...args), ["prevent"])),
+    onPaste: _cache[14] || (_cache[14] = (...args) => $options.onPaste && $options.onPaste(...args)),
+    onMousedown: _cache[15] || (_cache[15] = (...args) => $options.onMousedown && $options.onMousedown(...args))
   }, [
     renderSlot(_ctx.$slots, "top"),
+    $props.richText ? (openBlock(), createBlock(_component_dt_recipe_message_input_topbar, {
+      key: $data.selectedText,
+      "bold-button-options": $props.boldButtonOptions,
+      "italic-button-options": $props.italicButtonOptions,
+      "strike-button-options": $props.strikeButtonOptions,
+      "bullet-list-button-options": $props.bulletListButtonOptions,
+      "ordered-list-button-options": $props.orderedListButtonOptions,
+      "block-quote-button-options": $props.blockQuoteButtonOptions,
+      "code-button-options": $props.codeButtonOptions,
+      "code-block-button-options": $props.codeBlockButtonOptions,
+      "is-selection-active": $options.isSelectionActive,
+      onClick: $options.handleTopbarClick
+    }, {
+      link: withCtx(() => [
+        createVNode(_component_dt_recipe_message_input_link, {
+          ref: "link",
+          open: $data.linkDialogOpen,
+          "link-button-options": $props.linkButtonOptions,
+          "is-selection-active": $options.isSelectionActive,
+          onOpened: $options.linkDialogOpened,
+          onSetLink: $options.setLink,
+          onRemoveLink: $options.removeLink
+        }, null, 8, ["open", "link-button-options", "is-selection-active", "onOpened", "onSetLink", "onRemoveLink"])
+      ]),
+      _: 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"])) : createCommentVNode("", true),
     withDirectives((openBlock(), createElementBlock("div", {
       class: "d-recipe-message-input__editor-wrapper",
       style: normalizeStyle({ "max-height": $props.maxHeight })
@@ -520,26 +725,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "richTextEditor",
         modelValue: $data.internalInputValue,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.internalInputValue = $event),
-        "allow-blockquote": $props.allowBlockquote,
-        "allow-bold": $props.allowBold,
-        "allow-bullet-list": $props.allowBulletList,
-        "allow-codeblock": $props.allowCodeblock,
-        "allow-italic": $props.allowItalic,
-        "allow-strike": $props.allowStrike,
-        "allow-underline": $props.allowUnderline,
+        "allow-blockquote": $props.richText,
+        "allow-bold": $props.richText,
+        "allow-bullet-list": $props.richText,
+        "allow-code": $props.richText,
+        "allow-codeblock": $props.richText,
+        "allow-italic": $props.richText,
+        "allow-strike": $props.richText,
+        "allow-underline": $props.richText,
         editable: $props.editable,
         "input-aria-label": $props.inputAriaLabel,
         "input-class": $props.inputClass,
         "output-format": $props.outputFormat,
         "auto-focus": $props.autoFocus,
-        link: $props.link,
+        link: $props.richText,
         placeholder: $props.placeholder,
         "prevent-typing": $props.preventTyping,
         "mention-suggestion": $props.mentionSuggestion,
         "channel-suggestion": $props.channelSuggestion,
         "slash-command-suggestion": $props.slashCommandSuggestion,
-        "additional-extensions": $data.additionalExtensions
-      }, _ctx.$attrs, { 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", "onInput"])
+        "additional-extensions": $data.additionalExtensions,
+        "hide-link-bubble-menu": $data.hideLinkBubbleMenu
+      }, _ctx.$attrs, {
+        onInput: $options.onInput,
+        onTextInput: $options.onTextInput,
+        onEnter: $options.onSend,
+        onSelected: _cache[1] || (_cache[1] = ($event) => $data.selectedText = $event),
+        onEditLink: $options.initLinkDialog,
+        onFocus: _cache[2] || (_cache[2] = ($event) => $data.isFocused = true),
+        onBlur: _cache[3] || (_cache[3] = ($event) => $data.isFocused = false)
+      }), 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"])
     ], 4)), [
       [_directive_dt_scrollbar]
     ]),
@@ -562,10 +777,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 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)
+                onMouseenter: _cache[4] || (_cache[4] = ($event) => $data.imagePickerFocus = true),
+                onMouseleave: _cache[5] || (_cache[5] = ($event) => $data.imagePickerFocus = false),
+                onFocus: _cache[6] || (_cache[6] = ($event) => $data.imagePickerFocus = true),
+                onBlur: _cache[7] || (_cache[7] = ($event) => $data.imagePickerFocus = false)
               }, {
                 icon: withCtx(() => [
                   createVNode(_component_dt_icon_image, { size: "300" })
@@ -586,8 +801,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 8, ["onInput"]),
               $props.showEmojiPicker ? (openBlock(), createBlock(_component_dt_popover, {
                 key: 1,
-                open: $data.emojiPickerOpened,
-                "onUpdate:open": _cache[9] || (_cache[9] = ($event) => $data.emojiPickerOpened = $event),
+                "open.sync": "emojiPickerOpened",
                 "data-qa": "dt-recipe-message-input-emoji-picker-popover",
                 "initial-focus-element": "#searchInput",
                 padding: "none"
@@ -601,10 +815,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     importance: "clear",
                     "aria-label": $props.emojiButtonAriaLabel,
                     onClick: $options.toggleEmojiPicker,
-                    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)
+                    onMouseenter: _cache[8] || (_cache[8] = ($event) => $data.emojiPickerFocus = true),
+                    onMouseleave: _cache[9] || (_cache[9] = ($event) => $data.emojiPickerFocus = false),
+                    onFocus: _cache[10] || (_cache[10] = ($event) => $data.emojiPickerFocus = true),
+                    onBlur: _cache[11] || (_cache[11] = ($event) => $data.emojiPickerFocus = false)
                   }), {
                     icon: withCtx(() => [
                       $options.emojiPickerHovered ? (openBlock(), createBlock(_component_dt_icon_very_satisfied, {
@@ -627,7 +841,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   }), null, 16, ["onSkinTone", "onSelectedEmoji"])
                 ]),
                 _: 1
-              }, 8, ["open"])) : createCommentVNode("", true),
+              })) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "emojiGiphyPicker")
             ];
           }),