@dialpad/dialtone 9.86.1 → 9.86.2

package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-editor\"\n    role=\"presentation\"\n    class=\"d-d-flex d-fd-column\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      direction=\"row\"\n      gap=\"450\"\n      class=\"d-p8 dt-editor--top-bar-background\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              size=\"xs\"\n              :aria-label=\"button.tooltipMessage\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <component\n                  :is=\"button.icon\"\n                  size=\"200\"\n                />\n              </template>\n              <span v-if=\"button.label\">{{ button.label }}</span>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"dt-editor--button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open.sync=\"showLinkInput\"\n          placement=\"bottom-start\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-editor-link-input-popover\"\n          :show-close-button=\"false\"\n          @click=\"onInputFocus\"\n          @click.native.stop=\"onInputFocus\"\n          @opened=\"updateInput\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  class=\"d-ol-none\"\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  size=\"xs\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <component\n                      :is=\"linkButton.icon\"\n                      size=\"200\"\n                      class=\"d-fw-bold\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <span\n              v-if=\"showAddLink.setLinkTitle.length > 0\"\n            >\n              {{ showAddLink.setLinkTitle }}\n            </span>\n            <dt-input\n              v-model=\"linkInput\"\n              :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n              data-qa=\"dt-editor-link-input\"\n              :placeholder=\"setLinkPlaceholder\"\n              input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n              @click=\"onInputFocus\"\n              @click.native.stop=\"onInputFocus\"\n              @focus=\"onInputFocus\"\n              @keydown.enter=\"setLink\"\n            />\n          </template>\n          <template #footerContent>\n            <div class=\"d-ml8 d-mr12\">\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-remove-link-btn\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-set-link-cancel-btn\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                size=\"sm\"\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-editor-set-link-confirm-btn\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </div>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        data-qa=\"dt-rich-text-editor\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n        :output-format=\"htmlOutputFormat\"\n        :auto-focus=\"autoFocus\"\n        :placeholder=\"placeholder\"\n        :allow-line-breaks=\"true\"\n        :link=\"true\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n  DtIconAlignCenter,\n  DtIconAlignJustify,\n  DtIconAlignLeft,\n  DtIconAlignRight,\n  DtIconBold,\n  DtIconCodeBlock,\n  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n    DtIconLightningBolt,\n    DtIconBold,\n    DtIconItalic,\n    DtIconUnderline,\n    DtIconStrikethrough,\n    DtIconListBullet,\n    DtIconListOrdered,\n    DtIconAlignLeft,\n    DtIconAlignCenter,\n    DtIconAlignRight,\n    DtIconAlignJustify,\n    DtIconQuote,\n    DtIconCodeBlock,\n    DtIconLink2,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n    */\n    'quick-replies-click',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-link d-c-text d-d-inline-block',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n          this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n        { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n        { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n        { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n        { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n        { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n        { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n        { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n        { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n            `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-editor--top-bar-background {\n  background-color: var(--dt-color-surface-secondary);\n}\n\n.dt-editor--button-group-divider {\n  margin-left: var(--dt-space-400);\n  height: calc(var(--dt-size-550) + var(--dt-size-300));\n  width: var(--dt-size-100);\n  background: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":"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"}
+{"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-recipe-editor\"\n    role=\"presentation\"\n    class=\"d-d-flex d-fd-column\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      direction=\"row\"\n      gap=\"450\"\n      class=\"d-p8 dt-recipe-editor__top-bar-background\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              size=\"xs\"\n              :aria-label=\"button.tooltipMessage\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <component\n                  :is=\"button.icon\"\n                  size=\"200\"\n                />\n              </template>\n              <span v-if=\"button.label\">{{ button.label }}</span>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"dt-recipe-editor__button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open.sync=\"showLinkInput\"\n          placement=\"bottom-start\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-recipe-editor-link-input-popover\"\n          :show-close-button=\"false\"\n          @click=\"onInputFocus\"\n          @click.native.stop=\"onInputFocus\"\n          @opened=\"updateInput\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  class=\"d-ol-none\"\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  size=\"xs\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <component\n                      :is=\"linkButton.icon\"\n                      size=\"200\"\n                      class=\"d-fw-bold\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <span\n              v-if=\"showAddLink.setLinkTitle.length > 0\"\n            >\n              {{ showAddLink.setLinkTitle }}\n            </span>\n            <dt-input\n              v-model=\"linkInput\"\n              :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n              data-qa=\"dt-recipe-editor-link-input\"\n              :placeholder=\"setLinkPlaceholder\"\n              input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n              @click=\"onInputFocus\"\n              @click.native.stop=\"onInputFocus\"\n              @focus=\"onInputFocus\"\n              @keydown.enter=\"setLink\"\n            />\n          </template>\n          <template #footerContent>\n            <div class=\"d-ml8 d-mr12\">\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-recipe-editor-remove-link-btn\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                size=\"sm\"\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </div>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        data-qa=\"dt-rich-text-editor\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n        :output-format=\"htmlOutputFormat\"\n        :auto-focus=\"autoFocus\"\n        :placeholder=\"placeholder\"\n        :allow-line-breaks=\"true\"\n        :link=\"true\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n  DtIconAlignCenter,\n  DtIconAlignJustify,\n  DtIconAlignLeft,\n  DtIconAlignRight,\n  DtIconBold,\n  DtIconCodeBlock,\n  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n    DtIconLightningBolt,\n    DtIconBold,\n    DtIconItalic,\n    DtIconUnderline,\n    DtIconStrikethrough,\n    DtIconListBullet,\n    DtIconListOrdered,\n    DtIconAlignLeft,\n    DtIconAlignCenter,\n    DtIconAlignRight,\n    DtIconAlignJustify,\n    DtIconQuote,\n    DtIconCodeBlock,\n    DtIconLink2,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n    */\n    'quick-replies-click',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-link d-c-text d-d-inline-block',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n          this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-recipe-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-recipe-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n        { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-recipe-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n        { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-recipe-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n        { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-recipe-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-recipe-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n        { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-recipe-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n        { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-recipe-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n        { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-recipe-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-recipe-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n        { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-recipe-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-recipe-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n        { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-recipe-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-recipe-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n            `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n"],"names":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":"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"}

package/dist/vue2/recipes/conversation_view/editor/editor.vue.js

@@ -1,6 +1,5 @@
 import { EDITOR_SUPPORTED_LINK_PROTOCOLS, EDITOR_DEFAULT_LINK_PREFIX } from "./editor_constants.js";
 import { DtIconLightningBolt, DtIconBold, DtIconItalic, DtIconUnderline, DtIconStrikethrough, DtIconListBullet, DtIconListOrdered, DtIconAlignLeft, DtIconAlignCenter, DtIconAlignRight, DtIconAlignJustify, DtIconQuote, DtIconCodeBlock, DtIconLink2 } from "@dialpad/dialtone-icons/vue2";
-/* empty css            */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtRichTextEditor from "../../../components/rich_text_editor/rich_text_editor.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
@@ -303,39 +302,39 @@ const _sfc_main = {
     },
     newButtons() {
       return [
-        { showBtn: this.showQuickRepliesButton, label: "Quick reply", selector: "quickReplies", icon: DtIconLightningBolt, dataQA: "dt-editor-quick-replies-btn", tooltipMessage: "Quick Reply", onClick: this.onQuickRepliesClick }
+        { showBtn: this.showQuickRepliesButton, label: "Quick reply", selector: "quickReplies", icon: DtIconLightningBolt, dataQA: "dt-recipe-editor-quick-replies-btn", tooltipMessage: "Quick Reply", onClick: this.onQuickRepliesClick }
       ].filter((button) => button.showBtn);
     },
     textFormatButtons() {
       return [
-        { showBtn: this.showBoldButton, selector: "bold", icon: DtIconBold, dataQA: "dt-editor-bold-btn", tooltipMessage: "Bold", onClick: this.onBoldTextToggle },
-        { showBtn: this.showItalicsButton, selector: "italic", icon: DtIconItalic, dataQA: "dt-editor-italics-btn", tooltipMessage: "Italics", onClick: this.onItalicTextToggle },
-        { showBtn: this.showUnderlineButton, selector: "underline", icon: DtIconUnderline, dataQA: "dt-editor-underline-btn", tooltipMessage: "Underline", onClick: this.onUnderlineTextToggle },
-        { showBtn: this.showStrikeButton, selector: "strike", icon: DtIconStrikethrough, dataQA: "dt-editor-strike-btn", tooltipMessage: "Strike", onClick: this.onStrikethroughTextToggle }
+        { showBtn: this.showBoldButton, selector: "bold", icon: DtIconBold, dataQA: "dt-recipe-editor-bold-btn", tooltipMessage: "Bold", onClick: this.onBoldTextToggle },
+        { showBtn: this.showItalicsButton, selector: "italic", icon: DtIconItalic, dataQA: "dt-recipe-editor-italics-btn", tooltipMessage: "Italics", onClick: this.onItalicTextToggle },
+        { showBtn: this.showUnderlineButton, selector: "underline", icon: DtIconUnderline, dataQA: "dt-recipe-editor-underline-btn", tooltipMessage: "Underline", onClick: this.onUnderlineTextToggle },
+        { showBtn: this.showStrikeButton, selector: "strike", icon: DtIconStrikethrough, dataQA: "dt-recipe-editor-strike-btn", tooltipMessage: "Strike", onClick: this.onStrikethroughTextToggle }
       ].filter((button) => button.showBtn);
     },
     alignmentButtons() {
       return [
-        { showBtn: this.showAlignLeftButton, selector: { textAlign: "left" }, icon: DtIconAlignLeft, dataQA: "dt-editor-align-left-btn", tooltipMessage: "Align Left", onClick: () => this.onTextAlign("left") },
-        { showBtn: this.showAlignCenterButton, selector: { textAlign: "center" }, icon: DtIconAlignCenter, dataQA: "dt-editor-align-center-btn", tooltipMessage: "Align Center", onClick: () => this.onTextAlign("center") },
-        { showBtn: this.showAlignRightButton, selector: { textAlign: "right" }, icon: DtIconAlignRight, dataQA: "dt-editor-align-right-btn", tooltipMessage: "Align Right", onClick: () => this.onTextAlign("right") },
-        { showBtn: this.showAlignJustifyButton, selector: { textAlign: "justify" }, icon: DtIconAlignJustify, dataQA: "dt-editor-align-justify-btn", tooltipMessage: "Align Justify", onClick: () => this.onTextAlign("justify") }
+        { showBtn: this.showAlignLeftButton, selector: { textAlign: "left" }, icon: DtIconAlignLeft, dataQA: "dt-recipe-editor-align-left-btn", tooltipMessage: "Align Left", onClick: () => this.onTextAlign("left") },
+        { showBtn: this.showAlignCenterButton, selector: { textAlign: "center" }, icon: DtIconAlignCenter, dataQA: "dt-recipe-editor-align-center-btn", tooltipMessage: "Align Center", onClick: () => this.onTextAlign("center") },
+        { showBtn: this.showAlignRightButton, selector: { textAlign: "right" }, icon: DtIconAlignRight, dataQA: "dt-recipe-editor-align-right-btn", tooltipMessage: "Align Right", onClick: () => this.onTextAlign("right") },
+        { showBtn: this.showAlignJustifyButton, selector: { textAlign: "justify" }, icon: DtIconAlignJustify, dataQA: "dt-recipe-editor-align-justify-btn", tooltipMessage: "Align Justify", onClick: () => this.onTextAlign("justify") }
       ].filter((button) => button.showBtn);
     },
     listButtons() {
       return [
-        { showBtn: this.showListItemsButton, selector: "bulletList", icon: DtIconListBullet, dataQA: "dt-editor-list-items-btn", tooltipMessage: "Bullet List", onClick: this.onBulletListToggle },
-        { showBtn: this.showOrderedListButton, selector: "orderedList", icon: DtIconListOrdered, dataQA: "dt-editor-ordered-list-items-btn", tooltipMessage: "Ordered List", onClick: this.onOrderedListToggle }
+        { showBtn: this.showListItemsButton, selector: "bulletList", icon: DtIconListBullet, dataQA: "dt-recipe-editor-list-items-btn", tooltipMessage: "Bullet List", onClick: this.onBulletListToggle },
+        { showBtn: this.showOrderedListButton, selector: "orderedList", icon: DtIconListOrdered, dataQA: "dt-recipe-editor-ordered-list-items-btn", tooltipMessage: "Ordered List", onClick: this.onOrderedListToggle }
       ].filter((button) => button.showBtn);
     },
     individualButtons() {
       return [
-        { showBtn: this.showQuoteButton, selector: "blockquote", icon: DtIconQuote, dataQA: "dt-editor-blockquote-btn", tooltipMessage: "Quote", onClick: this.onBlockquoteToggle },
-        { showBtn: this.showCodeBlockButton, selector: "codeBlock", icon: DtIconCodeBlock, dataQA: "dt-editor-code-block-btn", tooltipMessage: "Code", onClick: this.onCodeBlockToggle }
+        { showBtn: this.showQuoteButton, selector: "blockquote", icon: DtIconQuote, dataQA: "dt-recipe-editor-blockquote-btn", tooltipMessage: "Quote", onClick: this.onBlockquoteToggle },
+        { showBtn: this.showCodeBlockButton, selector: "codeBlock", icon: DtIconCodeBlock, dataQA: "dt-recipe-editor-code-block-btn", tooltipMessage: "Code", onClick: this.onCodeBlockToggle }
       ].filter((button) => button.showBtn);
     },
     linkButton() {
-      return { showBtn: this.showAddLink.showAddLinkButton, selector: "link", icon: DtIconLink2, dataQA: "dt-editor-add-link-btn", tooltipMessage: "Link", onClick: this.openLinkInput };
+      return { showBtn: this.showAddLink.showAddLinkButton, selector: "link", icon: DtIconLink2, dataQA: "dt-recipe-editor-add-link-btn", tooltipMessage: "Link", onClick: this.openLinkInput };
     }
   },
   watch: {
@@ -449,9 +448,9 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-d-flex d-fd-column", attrs: { "data-qa": "dt-editor", "role": "presentation" }, on: { "click": function($event) {
+  return _c("div", { staticClass: "d-d-flex d-fd-column", attrs: { "data-qa": "dt-recipe-editor", "role": "presentation" }, on: { "click": function($event) {
     return _vm.$refs.richTextEditor.focusEditor();
-  } } }, [_c("dt-stack", { staticClass: "d-p8 dt-editor--top-bar-background", attrs: { "direction": "row", "gap": "450" } }, [_vm._l(_vm.buttonGroups, function(buttonGroup) {
+  } } }, [_c("dt-stack", { staticClass: "d-p8 dt-recipe-editor__top-bar-background", attrs: { "direction": "row", "gap": "450" } }, [_vm._l(_vm.buttonGroups, function(buttonGroup) {
     return _c("dt-stack", { key: buttonGroup.key, attrs: { "direction": "row", "gap": "300" } }, [_vm._l(buttonGroup.buttonGroup, function(button) {
       return _c("dt-tooltip", { key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`, attrs: { "message": button.tooltipMessage, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
         var _a, _b;
@@ -461,8 +460,8 @@ var _sfc_render = function render() {
           return [_c(button.icon, { tag: "component", attrs: { "size": "200" } })];
         }, proxy: true }], null, true) }, [button.label ? _c("span", [_vm._v(_vm._s(button.label))]) : _vm._e()])];
       }, proxy: true }], null, true) });
-    }), _c("div", { staticClass: "dt-editor--button-group-divider" })], 2);
-  }), _vm.linkButton.showBtn ? _c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("dt-popover", { attrs: { "open": _vm.showLinkInput, "placement": "bottom-start", "visually-hidden-close": true, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-editor-link-input-popover", "show-close-button": false }, on: { "update:open": function($event) {
+    }), _c("div", { staticClass: "dt-recipe-editor__button-group-divider" })], 2);
+  }), _vm.linkButton.showBtn ? _c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("dt-popover", { attrs: { "open": _vm.showLinkInput, "placement": "bottom-start", "visually-hidden-close": true, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-recipe-editor-link-input-popover", "show-close-button": false }, on: { "update:open": function($event) {
     _vm.showLinkInput = $event;
   }, "click": _vm.onInputFocus, "opened": _vm.updateInput }, nativeOn: { "click": function($event) {
     $event.stopPropagation();
@@ -477,7 +476,7 @@ var _sfc_render = function render() {
       }, proxy: true }], null, false, 213339824) })];
     }, proxy: true }], null, false, 1223852709) })];
   }, proxy: true }, { key: "content", fn: function() {
-    return [_vm.showAddLink.setLinkTitle.length > 0 ? _c("span", [_vm._v(" " + _vm._s(_vm.showAddLink.setLinkTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.showAddLink.setLinkInputAriaLabel, "data-qa": "dt-editor-link-input", "placeholder": _vm.setLinkPlaceholder, "input-wrapper-class": "d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none" }, on: { "click": _vm.onInputFocus, "focus": _vm.onInputFocus, "keydown": function($event) {
+    return [_vm.showAddLink.setLinkTitle.length > 0 ? _c("span", [_vm._v(" " + _vm._s(_vm.showAddLink.setLinkTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.showAddLink.setLinkInputAriaLabel, "data-qa": "dt-recipe-editor-link-input", "placeholder": _vm.setLinkPlaceholder, "input-wrapper-class": "d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none" }, on: { "click": _vm.onInputFocus, "focus": _vm.onInputFocus, "keydown": function($event) {
       if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
       return _vm.setLink.apply(null, arguments);
     } }, nativeOn: { "click": function($event) {
@@ -487,8 +486,8 @@ var _sfc_render = function render() {
       _vm.linkInput = $$v;
     }, expression: "linkInput" } })];
   }, proxy: true }, { key: "footerContent", fn: function() {
-    return [_c("div", { staticClass: "d-ml8 d-mr12" }, [_c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.removeLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-remove-link-btn" }, on: { "click": _vm.removeLink } }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.cancelSetLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-set-link-cancel-btn" }, on: { "click": _vm.closeLinkInput } }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "size": "sm", "aria-label": _vm.confirmSetLinkButton.ariaLabel, "data-qa": "dt-editor-set-link-confirm-btn" }, on: { "click": _vm.setLink } }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
-  }, proxy: true }], null, false, 1583743996) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "allow-line-breaks": true, "link": true }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+    return [_c("div", { staticClass: "d-ml8 d-mr12" }, [_c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.removeLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-recipe-editor-remove-link-btn" }, on: { "click": _vm.removeLink } }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.cancelSetLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-recipe-editor-set-link-cancel-btn" }, on: { "click": _vm.closeLinkInput } }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "size": "sm", "aria-label": _vm.confirmSetLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-set-link-confirm-btn" }, on: { "click": _vm.setLink } }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
+  }, proxy: true }], null, false, 3587163996) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "allow-line-breaks": true, "link": true }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
     return _vm.onInput($event);
   } }, model: { value: _vm.internalInputValue, callback: function($$v) {
     _vm.internalInputValue = $$v;
@@ -498,10 +497,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const editor = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/editor/editor.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.js","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-editor\"\n    role=\"presentation\"\n    class=\"d-d-flex d-fd-column\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      direction=\"row\"\n      gap=\"450\"\n      class=\"d-p8 dt-editor--top-bar-background\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              size=\"xs\"\n              :aria-label=\"button.tooltipMessage\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <component\n                  :is=\"button.icon\"\n                  size=\"200\"\n                />\n              </template>\n              <span v-if=\"button.label\">{{ button.label }}</span>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"dt-editor--button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open.sync=\"showLinkInput\"\n          placement=\"bottom-start\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-editor-link-input-popover\"\n          :show-close-button=\"false\"\n          @click=\"onInputFocus\"\n          @click.native.stop=\"onInputFocus\"\n          @opened=\"updateInput\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  class=\"d-ol-none\"\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  size=\"xs\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <component\n                      :is=\"linkButton.icon\"\n                      size=\"200\"\n                      class=\"d-fw-bold\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <span\n              v-if=\"showAddLink.setLinkTitle.length > 0\"\n            >\n              {{ showAddLink.setLinkTitle }}\n            </span>\n            <dt-input\n              v-model=\"linkInput\"\n              :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n              data-qa=\"dt-editor-link-input\"\n              :placeholder=\"setLinkPlaceholder\"\n              input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n              @click=\"onInputFocus\"\n              @click.native.stop=\"onInputFocus\"\n              @focus=\"onInputFocus\"\n              @keydown.enter=\"setLink\"\n            />\n          </template>\n          <template #footerContent>\n            <div class=\"d-ml8 d-mr12\">\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-remove-link-btn\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-set-link-cancel-btn\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                size=\"sm\"\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-editor-set-link-confirm-btn\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </div>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        data-qa=\"dt-rich-text-editor\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n        :output-format=\"htmlOutputFormat\"\n        :auto-focus=\"autoFocus\"\n        :placeholder=\"placeholder\"\n        :allow-line-breaks=\"true\"\n        :link=\"true\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n  DtIconAlignCenter,\n  DtIconAlignJustify,\n  DtIconAlignLeft,\n  DtIconAlignRight,\n  DtIconBold,\n  DtIconCodeBlock,\n  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n    DtIconLightningBolt,\n    DtIconBold,\n    DtIconItalic,\n    DtIconUnderline,\n    DtIconStrikethrough,\n    DtIconListBullet,\n    DtIconListOrdered,\n    DtIconAlignLeft,\n    DtIconAlignCenter,\n    DtIconAlignRight,\n    DtIconAlignJustify,\n    DtIconQuote,\n    DtIconCodeBlock,\n    DtIconLink2,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n    */\n    'quick-replies-click',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-link d-c-text d-d-inline-block',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n          this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n        { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n        { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n        { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n        { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n        { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n        { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n        { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n        { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n            `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-editor--top-bar-background {\n  background-color: var(--dt-color-surface-secondary);\n}\n\n.dt-editor--button-group-divider {\n  margin-left: var(--dt-space-400);\n  height: calc(var(--dt-size-550) + var(--dt-size-300));\n  width: var(--dt-size-100);\n  background: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["editor"],"mappings":"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"}
+{"version":3,"file":"editor.vue.js","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-recipe-editor\"\n    role=\"presentation\"\n    class=\"d-d-flex d-fd-column\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      direction=\"row\"\n      gap=\"450\"\n      class=\"d-p8 dt-recipe-editor__top-bar-background\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              size=\"xs\"\n              :aria-label=\"button.tooltipMessage\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <component\n                  :is=\"button.icon\"\n                  size=\"200\"\n                />\n              </template>\n              <span v-if=\"button.label\">{{ button.label }}</span>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"dt-recipe-editor__button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open.sync=\"showLinkInput\"\n          placement=\"bottom-start\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-recipe-editor-link-input-popover\"\n          :show-close-button=\"false\"\n          @click=\"onInputFocus\"\n          @click.native.stop=\"onInputFocus\"\n          @opened=\"updateInput\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  class=\"d-ol-none\"\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  size=\"xs\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <component\n                      :is=\"linkButton.icon\"\n                      size=\"200\"\n                      class=\"d-fw-bold\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <span\n              v-if=\"showAddLink.setLinkTitle.length > 0\"\n            >\n              {{ showAddLink.setLinkTitle }}\n            </span>\n            <dt-input\n              v-model=\"linkInput\"\n              :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n              data-qa=\"dt-recipe-editor-link-input\"\n              :placeholder=\"setLinkPlaceholder\"\n              input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n              @click=\"onInputFocus\"\n              @click.native.stop=\"onInputFocus\"\n              @focus=\"onInputFocus\"\n              @keydown.enter=\"setLink\"\n            />\n          </template>\n          <template #footerContent>\n            <div class=\"d-ml8 d-mr12\">\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-recipe-editor-remove-link-btn\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                size=\"sm\"\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </div>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        data-qa=\"dt-rich-text-editor\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n        :output-format=\"htmlOutputFormat\"\n        :auto-focus=\"autoFocus\"\n        :placeholder=\"placeholder\"\n        :allow-line-breaks=\"true\"\n        :link=\"true\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n  DtIconAlignCenter,\n  DtIconAlignJustify,\n  DtIconAlignLeft,\n  DtIconAlignRight,\n  DtIconBold,\n  DtIconCodeBlock,\n  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n    DtIconLightningBolt,\n    DtIconBold,\n    DtIconItalic,\n    DtIconUnderline,\n    DtIconStrikethrough,\n    DtIconListBullet,\n    DtIconListOrdered,\n    DtIconAlignLeft,\n    DtIconAlignCenter,\n    DtIconAlignRight,\n    DtIconAlignJustify,\n    DtIconQuote,\n    DtIconCodeBlock,\n    DtIconLink2,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n    */\n    'quick-replies-click',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-link d-c-text d-d-inline-block',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n          this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-recipe-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-recipe-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n        { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-recipe-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n        { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-recipe-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n        { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-recipe-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-recipe-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n        { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-recipe-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n        { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-recipe-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n        { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-recipe-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-recipe-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n        { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-recipe-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-recipe-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n        { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-recipe-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-recipe-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n            `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n"],"names":["editor"],"mappings":"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"}

package/dist/vue2/recipes/conversation_view/emoji_row/emoji_row.vue.cjs

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const emoji_row_constants = require("./emoji_row_constants.cjs");
-;/* empty css                 */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
 const button = require("../../../components/button/button.vue.cjs");
@@ -45,11 +44,14 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "dt-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
-    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
-      return [_c("dt-button", { class: ["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
+  return _c("span", { staticClass: "dt-recipe-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
+    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-recipe-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
+      return [_c("dt-button", { class: [
+        "dt-recipe-emoji-row__reaction",
+        reaction.isSelected ? "dt-recipe-emoji-row__reaction--selected" : ""
+      ], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
         return _vm.emojiClicked(reaction);
-      } } }, [_c("span", { staticClass: "dt-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
+      } } }, [_c("span", { staticClass: "dt-recipe-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-recipe-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
     } }], null, true) }, [_c("span", { attrs: { "aria-hidden": "true" } }, [_c("dt-emoji-text-wrapper", { attrs: { "size": "200" } }, [_vm._v(" " + _vm._s(reaction.tooltip) + " ")])], 1)])], 1);
   }), _vm._t("picker")], 2);
 };
@@ -57,10 +59,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const emoji_row = __component__.exports;
 exports.default = emoji_row;

package/dist/vue2/recipes/conversation_view/emoji_row/emoji_row.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_row.vue.cjs","sources":["../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"dt-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dt-space-300);\n\n  &__tooltip {\n    display: inline-block;\n  }\n\n  &__reaction {\n    --emoji-item-color-inset-shadow: transparent;\n    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n    --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n    padding: var(--dt-space-300) var(--dt-space-400);\n    border-radius: var(--dt-size-radius-pill);\n    border: 0;\n    color: var(--emoji-item-color-foreground);\n    background-color: var(--emoji-item-color-background);\n    box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);\n    height: var(--dt-size-550);\n\n    &.dt-emoji-row__picker {\n      padding: var(--dt-space-200) var(--dt-space-350);\n    }\n\n    &:hover {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n    }\n\n    &:active {\n      --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n      transform: scale(.98);\n    }\n\n    &--selected {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n      --emoji-item-color-foreground: var(--dt-color-link-primary);\n      --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n      .dt-emoji-row__reaction-number {\n        font-weight: var(--dt-font-weight-bold);\n      }\n\n      &:hover {\n        --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n        --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n      }\n\n      &:active {\n        --emoji-item-color-background: var(--dt-action-color-background-base-active);\n      }\n    }\n  }\n\n  &__emoji {\n    margin-right: var(--dt-space-300);\n    display: inline-flex;\n  }\n\n  &__reaction-number {\n    // set font properties individually to change line height,\n    // as font shorthand property will override line-height.\n    font-weight: var(--dt-typography-body-sm-font-weight);\n    font-size: var(--dt-typography-body-sm-font-size);\n    font-family: var(--dt-typography-body-sm-font-family);\n    line-height: var(--dt-font-line-height-100);\n    font-variant: tabular-nums;\n  }\n}\n</style>\n"],"names":["DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","REACTIONS_ATTRIBUTES"],"mappings":";;;;;;;;;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAA,QAAA,SAAA,UAAAC,gBAAAC,SAAAA,MAAAA,SAAAC,oBAAAA,mBAAAA,QAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAAC,yCAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA,WAAA,QAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_row.vue.cjs","sources":["../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"dt-recipe-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-recipe-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"[\n              'dt-recipe-emoji-row__reaction',\n              reaction.isSelected ? 'dt-recipe-emoji-row__reaction--selected' : '',\n            ]\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-recipe-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-recipe-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n"],"names":["DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","REACTIONS_ATTRIBUTES"],"mappings":";;;;;;;;AAwDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAA,QAAA,SAAA,UAAAC,gBAAAC,SAAAA,MAAAA,SAAAC,oBAAAA,mBAAAA,QAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAAC,yCAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA,WAAA,QAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/emoji_row/emoji_row.vue.js

@@ -1,5 +1,4 @@
 import { REACTIONS_ATTRIBUTES } from "./emoji_row_constants.js";
-/* empty css               */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
@@ -43,11 +42,14 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "dt-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
-    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
-      return [_c("dt-button", { class: ["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
+  return _c("span", { staticClass: "dt-recipe-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
+    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "dt-recipe-emoji-row__tooltip", attrs: { "content-class": "d-wmx464", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
+      return [_c("dt-button", { class: [
+        "dt-recipe-emoji-row__reaction",
+        reaction.isSelected ? "dt-recipe-emoji-row__reaction--selected" : ""
+      ], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
         return _vm.emojiClicked(reaction);
-      } } }, [_c("span", { staticClass: "dt-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
+      } } }, [_c("span", { staticClass: "dt-recipe-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "dt-recipe-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
     } }], null, true) }, [_c("span", { attrs: { "aria-hidden": "true" } }, [_c("dt-emoji-text-wrapper", { attrs: { "size": "200" } }, [_vm._v(" " + _vm._s(reaction.tooltip) + " ")])], 1)])], 1);
   }), _vm._t("picker")], 2);
 };
@@ -55,10 +57,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const emoji_row = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/emoji_row/emoji_row.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_row.vue.js","sources":["../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"dt-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dt-space-300);\n\n  &__tooltip {\n    display: inline-block;\n  }\n\n  &__reaction {\n    --emoji-item-color-inset-shadow: transparent;\n    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n    --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n    padding: var(--dt-space-300) var(--dt-space-400);\n    border-radius: var(--dt-size-radius-pill);\n    border: 0;\n    color: var(--emoji-item-color-foreground);\n    background-color: var(--emoji-item-color-background);\n    box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);\n    height: var(--dt-size-550);\n\n    &.dt-emoji-row__picker {\n      padding: var(--dt-space-200) var(--dt-space-350);\n    }\n\n    &:hover {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n    }\n\n    &:active {\n      --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n      transform: scale(.98);\n    }\n\n    &--selected {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n      --emoji-item-color-foreground: var(--dt-color-link-primary);\n      --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n      .dt-emoji-row__reaction-number {\n        font-weight: var(--dt-font-weight-bold);\n      }\n\n      &:hover {\n        --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n        --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n      }\n\n      &:active {\n        --emoji-item-color-background: var(--dt-action-color-background-base-active);\n      }\n    }\n  }\n\n  &__emoji {\n    margin-right: var(--dt-space-300);\n    display: inline-flex;\n  }\n\n  &__reaction-number {\n    // set font properties individually to change line height,\n    // as font shorthand property will override line-height.\n    font-weight: var(--dt-typography-body-sm-font-weight);\n    font-size: var(--dt-typography-body-sm-font-size);\n    font-family: var(--dt-typography-body-sm-font-family);\n    line-height: var(--dt-font-line-height-100);\n    font-variant: tabular-nums;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAA,UAAA,SAAA,mBAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAA,qBAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA,WAAA,QAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_row.vue.js","sources":["../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"dt-recipe-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-recipe-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"[\n              'dt-recipe-emoji-row__reaction',\n              reaction.isSelected ? 'dt-recipe-emoji-row__reaction--selected' : '',\n            ]\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-recipe-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-recipe-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;AAwDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAA,UAAA,SAAA,mBAAA;AAAA,EAEA,QAAA,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAA,cAAA;AACA,mBAAA,YAAA,WAAA;AACA,gBAAA,aAAA,qBAAA,MAAA,CAAA,cAAA,SAAA,SAAA,MAAA,MAAA;AACA,cAAA,CAAA,WAAA,QAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,UAAA;AACA,WAAA,MAAA,iBAAA,SAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAA,UAAA,OAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}