npm - @dialpad/dialtone-vue - Versions diffs - 2.127.1 → 2.128.0 - Mend

@dialpad/dialtone-vue 2.127.1 → 2.128.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/lib/editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"editor.js","sources":["../../recipes/conversation_view/editor/editor_constants.js","../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["export const EDITOR_SUPPORTED_LINK_PROTOCOLS = [\n /^https?:\\/\\//,\n /^http?:\\/\\//,\n /^ftp?:\\/\\//,\n /^ftps?:\\/\\//,\n /^ftps?:\\/\\//,\n /mailto:([^?])/,\n];\n\nexport const EDITOR_DEFAULT_LINK_PREFIX = 'https://';\n\nexport default {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n};\n","<!-- 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 <dt-icon\n :name=\"button.iconName\"\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 <dt-icon\n :name=\"linkButton.iconName\"\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-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 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=\"false\"\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 { DtIcon } from '@/components/icon';\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';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtIcon,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\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', iconName: 'lightning-bolt', 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', iconName: 'bold', dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n { showBtn: this.showItalicsButton, selector: 'italic', iconName: 'italic', dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n { showBtn: this.showUnderlineButton, selector: 'underline', iconName: 'underline', dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n { showBtn: this.showStrikeButton, selector: 'strike', iconName: 'strikethrough', 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' }, iconName: 'align-left', dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, iconName: 'align-center', dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, iconName: 'align-right', dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, iconName: 'align-justify', 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', iconName: 'list-bullet', dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n { showBtn: this.showOrderedListButton, selector: 'orderedList', iconName: 'list-ordered', 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', iconName: 'quote', dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n { showBtn: this.showCodeBlockButton, selector: 'codeBlock', iconName: 'code-block', 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', iconName: 'link-2', 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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"}
1	+ {"version":3,"file":"editor.js","sources":["../../recipes/conversation_view/editor/editor_constants.js","../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["export const EDITOR_SUPPORTED_LINK_PROTOCOLS = [\n /^https?:\\/\\//,\n /^http?:\\/\\//,\n /^ftp?:\\/\\//,\n /^ftps?:\\/\\//,\n /^ftps?:\\/\\//,\n /mailto:([^?])/,\n];\n\nexport const EDITOR_DEFAULT_LINK_PREFIX = 'https://';\n\nexport default {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n};\n","<!-- 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 <dt-icon\n :name=\"button.iconName\"\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 <dt-icon\n :name=\"linkButton.iconName\"\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-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 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=\"false\"\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 { DtIcon } from '@/components/icon';\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';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtIcon,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\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', iconName: 'lightning-bolt', 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', iconName: 'bold', dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n { showBtn: this.showItalicsButton, selector: 'italic', iconName: 'italic', dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n { showBtn: this.showUnderlineButton, selector: 'underline', iconName: 'underline', dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n { showBtn: this.showStrikeButton, selector: 'strike', iconName: 'strikethrough', 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' }, iconName: 'align-left', dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, iconName: 'align-center', dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, iconName: 'align-right', dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, iconName: 'align-justify', 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', iconName: 'list-bullet', dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n { showBtn: this.showOrderedListButton, selector: 'orderedList', iconName: 'list-ordered', 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', iconName: 'quote', dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n { showBtn: this.showCodeBlockButton, selector: 'codeBlock', iconName: 'code-block', 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', iconName: 'link-2', 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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"}

package/dist/lib/message-input.cjs CHANGED Viewed

@@ -60,6 +60,8 @@ require("@tiptap/extension-mention");
 require("./link.cjs");
 require("./avatar.cjs");
 require("./presence.cjs");
+require("@dialpad/dialtone-icons/vue2/hash");
+require("@dialpad/dialtone-icons/vue2/lock");
 const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
@@ -245,6 +247,21 @@ const _sfc_main = {
       type: Object,
       default: null
     },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the channels for suggestion.
+     * items({ query }) => { return [ChannelObject]; }
+     * ChannelObject format:
+     * { name: string, id: string, locked: boolean }
+     *
+     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
+     */
+    channelSuggestion: {
+      type: Object,
+      default: null
+    },
     /**
      * Whether the input allows for block quote.
      */
@@ -484,7 +501,7 @@ var _sfc_render = function render() {
     if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
       return null;
     return _vm.onSend.apply(null, arguments);
-  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
     return _vm.onInput($event);
   } }, model: { value: _vm.internalInputValue, callback: function($$v) {
     _vm.internalInputValue = $$v;
@@ -499,8 +516,8 @@ var _sfc_render = function render() {
       _vm.imagePickerFocus = false;
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
-    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
-  }, proxy: true }], null, false, 3687934814) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
+    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
+  }, proxy: true }], null, false, 278163666) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
     _vm.emojiPickerOpened = open;
   } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-tooltip", { attrs: { "message": _vm.emojiTooltipMessage, "offset": [0, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
@@ -518,7 +535,7 @@ var _sfc_render = function render() {
     }, proxy: true }], null, false, 3933528398) })];
   }, proxy: true }, { key: "content", fn: function() {
     return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": _vm.onSelectEmoji } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
-  }, proxy: true }], null, false, 1278205067) }) : _vm._e()], 1), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  }, proxy: true }], null, false, 1278205067) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-fc-error d-mr16 dt-message-input--remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
   }, proxy: true }], null, false, 2591914334) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input--cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.showSend ? _c("dt-tooltip", { attrs: { "placement": "top-end", "enabled": !_vm.showSend, "message": _vm.showSend.tooltipLabel, "show": !_vm.isSendDisabled && _vm.sendButtonFocus, "offset": [6, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { class: [

package/dist/lib/message-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message-input.cjs","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\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 { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\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 The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n /\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /\n Enables the Link extension and optionally passes configurations to it\n /\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Disable Send Button\n /\n disableSend: {\n type: Boolean,\n default: false,\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 // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /\n Props to pass into the emoji picker.\n /\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /\n Emoji button tooltip label\n /\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /\n Emoji button aria label\n /\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /\n Enable character Limit warning\n /\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /\n Send button defaults.\n /\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /\n Cancel button defaults.\n /\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n \n When null, it does not add the plugin.\n /\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n Whether the input allows for block quote.\n /\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bold to be introduced in the text.\n /\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bullet list to be introduced in the text.\n /\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for italic to be introduced in the text.\n /\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for strike to be introduced in the text.\n /\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for underline to be introduced in the text.\n /\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Fires when send button is clicked\n \n @event submit\n * @type {String}\n /\n 'submit',\n\n /\n Fires when media is selected from image button\n \n @event select-media\n * @type {Array}\n /\n 'select-media',\n\n /\n Fires when media is dropped into the message input\n \n @event add-media\n * @type {Array}\n /\n 'add-media',\n\n /\n Fires when media is pasted into the message input\n \n @event paste-media\n * @type {Array}\n /\n 'paste-media',\n\n /\n Fires when cancel button is pressed (only on edit mode)\n \n @event cancel\n * @type {Boolean}\n /\n 'cancel',\n\n /\n Fires when skin tone is selected from the emoji picker\n \n @event skin-tone\n * @type {String}\n /\n 'skin-tone',\n\n /\n Fires when emoji is selected from the emoji picker\n \n @event selected-emoji\n * @type {String}\n /\n 'selected-emoji',\n\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 data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend \|\|\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus \|\| this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\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</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS"],"mappings":"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"}
1	+ {"version":3,"file":"message-input.cjs","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/, video/\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\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 { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\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 The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n /\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /\n Enables the Link extension and optionally passes configurations to it\n /\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Disable Send Button\n /\n disableSend: {\n type: Boolean,\n default: false,\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 // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /\n Props to pass into the emoji picker.\n /\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /\n Emoji button tooltip label\n /\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /\n Emoji button aria label\n /\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /\n Enable character Limit warning\n /\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /\n Send button defaults.\n /\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /\n Cancel button defaults.\n /\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n \n When null, it does not add the plugin.\n /\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n \n When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n /\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n Whether the input allows for block quote.\n /\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bold to be introduced in the text.\n /\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bullet list to be introduced in the text.\n /\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for italic to be introduced in the text.\n /\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for strike to be introduced in the text.\n /\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for underline to be introduced in the text.\n /\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Fires when send button is clicked\n \n @event submit\n * @type {String}\n /\n 'submit',\n\n /\n Fires when media is selected from image button\n \n @event select-media\n * @type {Array}\n /\n 'select-media',\n\n /\n Fires when media is dropped into the message input\n \n @event add-media\n * @type {Array}\n /\n 'add-media',\n\n /\n Fires when media is pasted into the message input\n \n @event paste-media\n * @type {Array}\n /\n 'paste-media',\n\n /\n Fires when cancel button is pressed (only on edit mode)\n \n @event cancel\n * @type {Boolean}\n /\n 'cancel',\n\n /\n Fires when skin tone is selected from the emoji picker\n \n @event skin-tone\n * @type {String}\n /\n 'skin-tone',\n\n /\n Fires when emoji is selected from the emoji picker\n \n @event selected-emoji\n * @type {String}\n /\n 'selected-emoji',\n\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 data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend \|\|\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus \|\| this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\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</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS"],"mappings":"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"}

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

@@ -58,6 +58,8 @@ import "@tiptap/extension-mention";
 import "./link.js";
 import "./avatar.js";
 import "./presence.js";
+import "@dialpad/dialtone-icons/vue2/hash";
+import "@dialpad/dialtone-icons/vue2/lock";
 const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
@@ -243,6 +245,21 @@ const _sfc_main = {
       type: Object,
       default: null
     },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the channels for suggestion.
+     * items({ query }) => { return [ChannelObject]; }
+     * ChannelObject format:
+     * { name: string, id: string, locked: boolean }
+     *
+     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
+     */
+    channelSuggestion: {
+      type: Object,
+      default: null
+    },
     /**
      * Whether the input allows for block quote.
      */
@@ -482,7 +499,7 @@ var _sfc_render = function render() {
     if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
       return null;
     return _vm.onSend.apply(null, arguments);
-  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
     return _vm.onInput($event);
   } }, model: { value: _vm.internalInputValue, callback: function($$v) {
     _vm.internalInputValue = $$v;
@@ -497,8 +514,8 @@ var _sfc_render = function render() {
       _vm.imagePickerFocus = false;
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
-    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
-  }, proxy: true }], null, false, 3687934814) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
+    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
+  }, proxy: true }], null, false, 278163666) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
     _vm.emojiPickerOpened = open;
   } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-tooltip", { attrs: { "message": _vm.emojiTooltipMessage, "offset": [0, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
@@ -516,7 +533,7 @@ var _sfc_render = function render() {
     }, proxy: true }], null, false, 3933528398) })];
   }, proxy: true }, { key: "content", fn: function() {
     return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": _vm.onSelectEmoji } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
-  }, proxy: true }], null, false, 1278205067) }) : _vm._e()], 1), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  }, proxy: true }], null, false, 1278205067) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-fc-error d-mr16 dt-message-input--remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
   }, proxy: true }], null, false, 2591914334) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input--cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.showSend ? _c("dt-tooltip", { attrs: { "placement": "top-end", "enabled": !_vm.showSend, "message": _vm.showSend.tooltipLabel, "show": !_vm.isSendDisabled && _vm.sendButtonFocus, "offset": [6, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("dt-button", { class: [

package/dist/lib/message-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\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 { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\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 The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n /\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /\n Enables the Link extension and optionally passes configurations to it\n /\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Disable Send Button\n /\n disableSend: {\n type: Boolean,\n default: false,\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 // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /\n Props to pass into the emoji picker.\n /\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /\n Emoji button tooltip label\n /\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /\n Emoji button aria label\n /\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /\n Enable character Limit warning\n /\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /\n Send button defaults.\n /\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /\n Cancel button defaults.\n /\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n \n When null, it does not add the plugin.\n /\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n Whether the input allows for block quote.\n /\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bold to be introduced in the text.\n /\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bullet list to be introduced in the text.\n /\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for italic to be introduced in the text.\n /\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for strike to be introduced in the text.\n /\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for underline to be introduced in the text.\n /\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Fires when send button is clicked\n \n @event submit\n * @type {String}\n /\n 'submit',\n\n /\n Fires when media is selected from image button\n \n @event select-media\n * @type {Array}\n /\n 'select-media',\n\n /\n Fires when media is dropped into the message input\n \n @event add-media\n * @type {Array}\n /\n 'add-media',\n\n /\n Fires when media is pasted into the message input\n \n @event paste-media\n * @type {Array}\n /\n 'paste-media',\n\n /\n Fires when cancel button is pressed (only on edit mode)\n \n @event cancel\n * @type {Boolean}\n /\n 'cancel',\n\n /\n Fires when skin tone is selected from the emoji picker\n \n @event skin-tone\n * @type {String}\n /\n 'skin-tone',\n\n /\n Fires when emoji is selected from the emoji picker\n \n @event selected-emoji\n * @type {String}\n /\n 'selected-emoji',\n\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 data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend \|\|\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus \|\| this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\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</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n @click=\"$refs.richTextEditor?.focusEditor()\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @keydown.enter.exact=\"onSend\"\n @paste=\"onPaste\"\n >\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n <!-- Left content -->\n <div class=\"d-d-flex\">\n <dt-tooltip\n v-if=\"showImagePicker\"\n placement=\"top-start\"\n :message=\"showImagePicker.tooltipLabel\"\n :offset=\"[-4, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/, video/\"\n type=\"file\"\n class=\"d-ps-absolute\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n </template>\n </dt-tooltip>\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n @opened=\"(open) => { emojiPickerOpened = open }\"\n >\n <template #anchor>\n <dt-tooltip\n :message=\"emojiTooltipMessage\"\n :offset=\"[0, -4]\"\n >\n <template #anchor>\n <dt-button\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n :offset=\"[0, 0]\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n <template #content>\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"onSelectEmoji\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"d-d-flex\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input--remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, -8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input--cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <dt-tooltip\n v-if=\"showSend\"\n placement=\"top-end\"\n :enabled=\"!showSend\"\n :message=\"showSend.tooltipLabel\"\n :show=\"!isSendDisabled && sendButtonFocus\"\n :offset=\"[6, -8]\"\n >\n <template #anchor>\n <!-- Right positioned UI - send button -->\n <dt-button\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'message-input-button__disabled d-fc-muted': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n @mouseenter=\"sendButtonFocus = true\"\n @mouseleave=\"sendButtonFocus = false\"\n @focus=\"sendButtonFocus = true\"\n @blur=\"sendButtonFocus = false\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </div>\n </section>\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 { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\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 The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n /\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /\n Enables the Link extension and optionally passes configurations to it\n /\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Disable Send Button\n /\n disableSend: {\n type: Boolean,\n default: false,\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 // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /\n Props to pass into the emoji picker.\n /\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /\n Emoji button tooltip label\n /\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /\n Emoji button aria label\n /\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /\n Enable character Limit warning\n /\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /\n Send button defaults.\n /\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /\n Cancel button defaults.\n /\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n \n When null, it does not add the plugin.\n /\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n \n The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n \n When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n /\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /\n Whether the input allows for block quote.\n /\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bold to be introduced in the text.\n /\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for bullet list to be introduced in the text.\n /\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for italic to be introduced in the text.\n /\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for strike to be introduced in the text.\n /\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the input allows for underline to be introduced in the text.\n /\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /\n Fires when send button is clicked\n \n @event submit\n * @type {String}\n /\n 'submit',\n\n /\n Fires when media is selected from image button\n \n @event select-media\n * @type {Array}\n /\n 'select-media',\n\n /\n Fires when media is dropped into the message input\n \n @event add-media\n * @type {Array}\n /\n 'add-media',\n\n /\n Fires when media is pasted into the message input\n \n @event paste-media\n * @type {Array}\n /\n 'paste-media',\n\n /\n Fires when cancel button is pressed (only on edit mode)\n \n @event cancel\n * @type {Boolean}\n /\n 'cancel',\n\n /\n Fires when skin tone is selected from the emoji picker\n \n @event skin-tone\n * @type {String}\n /\n 'skin-tone',\n\n /\n Fires when emoji is selected from the emoji picker\n \n @event selected-emoji\n * @type {String}\n /\n 'selected-emoji',\n\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 data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n imagePickerFocus: false,\n emojiPickerFocus: false,\n sendButtonFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend \|\|\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus \|\| this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n this.emojiPickerOpened = false;\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.emojiPickerOpened = false;\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$refs.richTextEditor?.focusEditor();\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</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n background-color: unset;\n color: var(--theme-sidebar-icon-color);\n cursor: default;\n}\n\n.dt-message-input--cancel-button {\n margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/lib/popover.cjs CHANGED Viewed

@@ -789,9 +789,10 @@ const _sfc_main = {
       this.closePopover();
     },
     onClickOutside() {
+      var _a;
       if (!this.hideOnClick)
         return;
-      const innerModals = this.popoverContentEl.querySelector(".d-popover__anchor--opened");
+      const innerModals = (_a = this.popoverContentEl) == null ? void 0 : _a.querySelector(".d-popover__anchor--opened");
       if (!innerModals) {
         this.closePopover();
       }