npm - @dialpad/dialtone-vue - Versions diffs - 2.186.0 → 2.188.0 - Mend

@dialpad/dialtone-vue 2.186.0 → 2.188.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 (20) hide show

package/dist/component-documentation.json +1 -1
package/dist/lib/button/button-constants.cjs +1 -1
package/dist/lib/button/button-constants.cjs.map +1 -1
package/dist/lib/button/button-constants.js +18 -15
package/dist/lib/button/button-constants.js.map +1 -1
package/dist/lib/button/button.cjs +1 -1
package/dist/lib/button/button.cjs.map +1 -1
package/dist/lib/button/button.js +25 -17
package/dist/lib/button/button.js.map +1 -1
package/dist/lib/editor/editor.cjs +1 -1
package/dist/lib/editor/editor.cjs.map +1 -1
package/dist/lib/editor/editor.js +130 -81
package/dist/lib/editor/editor.js.map +1 -1
package/dist/types/components/button/button.vue.d.ts.map +1 -1
package/dist/types/components/button/button_constants.d.ts +3 -0
package/dist/types/components/button/button_constants.d.ts.map +1 -1
package/dist/types/components/item_layout/item_layout.vue.d.ts +1 -1
package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts +9 -0
package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
package/package.json +5 -5

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

	@@ -1 +1 @@
1	- {"version":3,"file":"editor.cjs","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\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 :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\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 :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-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 :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\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 :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\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 button to add an inline image\n /\n showInlineImageButton: {\n type: Boolean,\n default: false,\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 Use div tags instead of paragraph tags to show text\n /\n useDivTags: {\n type: Boolean,\n default: false,\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 Emit when inline image button is clicked\n * @event inline-image-click\n /\n 'inline-image-click',\n\n /\n Emit when text content changes (not raw html)\n */\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\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 {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\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 onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position"],"mappings":"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"}
1	+ {"version":3,"file":"editor.cjs","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\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=\"getButtonKey(buttonGroup.key, button.selector)\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :ref=\"(el) => { buttonRefMap[getButtonRef(buttonGroup.key, button.selector)] = el }\"\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n :tabindex=\"canFocus(getButtonRef(buttonGroup.key, button.selector)) ? 0 : -1\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n @keydown.right.stop=\"shiftActionBarFocusRight\"\n @keydown.left.stop=\"shiftActionBarFocusLeft\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\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 :ref=\"(el) => { buttonRefMap[getButtonRef('custom', 'link')] = el }\"\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n :tabindex=\"canFocus(getButtonRef('custom', 'link')) ? 0 : -1\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n @keydown.right.stop=\"shiftActionBarFocusRight\"\n @keydown.left.stop=\"shiftActionBarFocusLeft\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-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 :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\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 :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\nimport { ref } from 'vue';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\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 button to add an inline image\n /\n showInlineImageButton: {\n type: Boolean,\n default: false,\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 Use div tags instead of paragraph tags to show text\n /\n useDivTags: {\n type: Boolean,\n default: false,\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 Emit when inline image button is clicked\n * @event inline-image-click\n /\n 'inline-image-click',\n\n /\n Emit when text content changes (not raw html)\n /\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\n },\n\n showLinkInput: false,\n linkInput: '',\n currentButtonRefIndex: 0,\n buttonRefMap: ref({}),\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 orderedRefs () {\n const refs = this.buttonGroups.reduce(function (acc, buttonData) {\n buttonData.buttonGroup.forEach(button => {\n acc.push(this.getButtonRef(buttonData.key, button.selector));\n }, this);\n return acc;\n }.bind(this), []);\n refs.push(this.getButtonRef('custom', 'link'));\n return refs;\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 {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\n },\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 onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\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 getButtonKey (key, selector) {\n return `${key}-${JSON.stringify(selector)}`;\n },\n\n // Unique Button Ref Key to identify ref\n getButtonRef (key, selector) {\n return `${this.getButtonKey(key, selector)}-ref`;\n },\n\n /\n Determines if an element in the action bar button list is focusable with tab key\n * @param {string} refKey - unique identifier for the ref element in DOM\n */\n canFocus (refKey) {\n return refKey === this.orderedRefs[this.currentButtonRefIndex];\n },\n\n shiftActionBarFocusRight () {\n this.shiftButtonRefIndex(1);\n },\n\n shiftActionBarFocusLeft () {\n this.shiftButtonRefIndex(-1);\n },\n\n shiftButtonRefIndex (shiftAmount) {\n const previousRef = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]];\n const index = (this.currentButtonRefIndex + shiftAmount) % this.orderedRefs.length;\n this.currentButtonRefIndex = index >= 0 ? index : this.orderedRefs.length + index;\n const currentRef = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]];\n previousRef.$el.blur();\n currentRef.$el.focus();\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","ref","RICH_TEXT_EDITOR_OUTPUT_FORMATS","refs","acc","buttonData","button","individualButtonStacks","buttonGroupData","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position","key","selector","refKey","shiftAmount","previousRef","index","currentRef"],"mappings":"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"}

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

@@ -1,37 +1,38 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as b, EDITOR_DEFAULT_LINK_PREFIX as y } from "./editor-constants.js";
-import { DtIconLightningBolt as u, DtIconBold as a, DtIconItalic as c, DtIconUnderline as d, DtIconStrikethrough as p, DtIconListBullet as h, DtIconListOrdered as k, DtIconAlignLeft as f, DtIconAlignCenter as g, DtIconAlignRight as B, DtIconAlignJustify as m, DtIconQuote as I, DtIconCodeBlock as w, DtIconLink2 as L, DtIconImage as T } from "@dialpad/dialtone-icons/vue2";
-import { n as x } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import A from "../rich-text-editor/rich-text-editor.js";
-import _ from "../button/button.js";
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as L, EDITOR_DEFAULT_LINK_PREFIX as x } from "./editor-constants.js";
+import { DtIconLightningBolt as u, DtIconBold as a, DtIconItalic as c, DtIconUnderline as d, DtIconStrikethrough as h, DtIconListBullet as p, DtIconListOrdered as f, DtIconAlignLeft as k, DtIconAlignCenter as g, DtIconAlignRight as B, DtIconAlignJustify as m, DtIconQuote as I, DtIconCodeBlock as y, DtIconLink2 as w, DtIconImage as b } from "@dialpad/dialtone-icons/vue2";
+import { ref as A } from "vue";
+import { n as T } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import _ from "../rich-text-editor/rich-text-editor.js";
+import R from "../button/button.js";
 import C from "../popover/popover.js";
-import v from "../stack/stack.js";
-import $ from "../input/input.js";
-import E from "../tooltip/tooltip.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as O, RICH_TEXT_EDITOR_OUTPUT_FORMATS as S } from "../rich-text-editor/rich-text-editor-constants.js";
-const D = {
+import O from "../stack/stack.js";
+import E from "../input/input.js";
+import S from "../tooltip/tooltip.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as F, RICH_TEXT_EDITOR_OUTPUT_FORMATS as D } from "../rich-text-editor/rich-text-editor-constants.js";
+const M = {
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: A,
-    DtButton: _,
+    DtRichTextEditor: _,
+    DtButton: R,
     DtPopover: C,
-    DtStack: v,
-    DtInput: $,
-    DtTooltip: E,
+    DtStack: O,
+    DtInput: E,
+    DtTooltip: S,
     DtIconLightningBolt: u,
     DtIconBold: a,
     DtIconItalic: c,
     DtIconUnderline: d,
-    DtIconStrikethrough: p,
-    DtIconListBullet: h,
-    DtIconListOrdered: k,
-    DtIconAlignLeft: f,
+    DtIconStrikethrough: h,
+    DtIconListBullet: p,
+    DtIconListOrdered: f,
+    DtIconAlignLeft: k,
     DtIconAlignCenter: g,
     DtIconAlignRight: B,
     DtIconAlignJustify: m,
     DtIconQuote: I,
-    DtIconCodeBlock: w,
-    DtIconLink2: L,
-    DtIconImage: T
+    DtIconCodeBlock: y,
+    DtIconLink2: w,
+    DtIconImage: b
   },
   inheritAttrs: !1,
   props: {
@@ -82,7 +83,7 @@ const D = {
       type: [Boolean, String, Number],
       default: !1,
       validator(e) {
-        return typeof e == "string" ? O.includes(e) : !0;
+        return typeof e == "string" ? F.includes(e) : !0;
       }
     },
     /**
@@ -289,7 +290,9 @@ const D = {
         class: "d-recipe-editor__link"
       },
       showLinkInput: !1,
-      linkInput: ""
+      linkInput: "",
+      currentButtonRefIndex: 0,
+      buttonRefMap: A({})
     };
   },
   computed: {
@@ -297,7 +300,7 @@ const D = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return S[2];
+      return D[2];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -308,6 +311,14 @@ const D = {
     showingListButtons() {
       return this.showListItemsButton || this.showOrderedListButton;
     },
+    orderedRefs() {
+      const e = this.buttonGroups.reduce((function(t, i) {
+        return i.buttonGroup.forEach((n) => {
+          t.push(this.getButtonRef(i.key, n.selector));
+        }, this), t;
+      }).bind(this), []);
+      return e.push(this.getButtonRef("custom", "link")), e;
+    },
     buttonGroups() {
       const e = this.individualButtons.map((t) => ({
         key: t.selector,
@@ -363,7 +374,7 @@ const D = {
         {
           showBtn: this.showStrikeButton,
           selector: "strike",
-          icon: p,
+          icon: h,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: "Strike",
           onClick: this.onStrikethroughTextToggle
@@ -375,7 +386,7 @@ const D = {
         {
           showBtn: this.showAlignLeftButton,
           selector: { textAlign: "left" },
-          icon: f,
+          icon: k,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: "Align Left",
           onClick: () => this.onTextAlign("left")
@@ -411,7 +422,7 @@ const D = {
         {
           showBtn: this.showListItemsButton,
           selector: "bulletList",
-          icon: h,
+          icon: p,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: "Bullet List",
           onClick: this.onBulletListToggle
@@ -419,7 +430,7 @@ const D = {
         {
           showBtn: this.showOrderedListButton,
           selector: "orderedList",
-          icon: k,
+          icon: f,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: "Ordered List",
           onClick: this.onOrderedListToggle
@@ -439,7 +450,7 @@ const D = {
         {
           showBtn: this.showCodeBlockButton,
           selector: "codeBlock",
-          icon: w,
+          icon: y,
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: "Code",
           onClick: this.onCodeBlockToggle
@@ -447,7 +458,7 @@ const D = {
         {
           showBtn: this.showInlineImageButton,
           selector: "image",
-          icon: T,
+          icon: b,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: "Image",
           onClick: this.onInsertInlineImageClick
@@ -458,7 +469,7 @@ const D = {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
         selector: "link",
-        icon: L,
+        icon: w,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: "Link",
         onClick: this.openLinkInput
@@ -475,20 +486,20 @@ const D = {
       e == null || e.stopPropagation();
     },
     removeLink() {
-      var e, t, n, i, o;
-      (o = (i = (n = (t = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : t.chain()) == null ? void 0 : n.focus()) == null ? void 0 : i.unsetLink()) == null || o.run(), this.closeLinkInput();
+      var e, t, i, n, o;
+      (o = (n = (i = (t = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : t.chain()) == null ? void 0 : i.focus()) == null ? void 0 : n.unsetLink()) == null || o.run(), this.closeLinkInput();
     },
     setLink(e) {
-      var o, r, s;
+      var o, r, l;
       const t = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor;
       if (e == null || e.preventDefault(), e == null || e.stopPropagation(), !this.linkInput) {
         this.removeLink();
         return;
       }
-      b.find((l) => l.test(this.linkInput)) || (this.linkInput = `${y}${this.linkInput}`);
-      const i = (s = (r = t == null ? void 0 : t.view) == null ? void 0 : r.state) == null ? void 0 : s.selection;
-      i.anchor === i.head ? t.chain().focus().insertContentAt(
-        i.anchor,
+      L.find((s) => s.test(this.linkInput)) || (this.linkInput = `${x}${this.linkInput}`);
+      const n = (l = (r = t == null ? void 0 : t.view) == null ? void 0 : r.state) == null ? void 0 : l.selection;
+      n.anchor === n.head ? t.chain().focus().insertContentAt(
+        n.anchor,
         `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
       ).run() : t.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
     },
@@ -496,10 +507,10 @@ const D = {
       this.showLinkInput = !0;
     },
     updateInput(e) {
-      var t, n, i;
+      var t, i, n;
       if (!e)
         return this.closeLinkInput();
-      this.linkInput = (i = (n = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : n.getAttributes("link")) == null ? void 0 : i.href;
+      this.linkInput = (n = (i = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : n.href;
     },
     closeLinkInput() {
       var e;
@@ -522,9 +533,9 @@ const D = {
       (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(e) {
-      var t, n, i, o;
-      if ((n = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) != null && n.isActive({ textAlign: e }))
-        return (i = this.$refs.richTextEditor) == null ? void 0 : i.editor.chain().focus().unsetTextAlign().run();
+      var t, i, n, o;
+      if ((i = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) != null && i.isActive({ textAlign: e }))
+        return (n = this.$refs.richTextEditor) == null ? void 0 : n.editor.chain().focus().unsetTextAlign().run();
       (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().setTextAlign(e).run();
     },
     onBulletListToggle() {
@@ -572,59 +583,97 @@ const D = {
     },
     onInput(e) {
       this.$emit("input", e);
+    },
+    getButtonKey(e, t) {
+      return `${e}-${JSON.stringify(t)}`;
+    },
+    // Unique Button Ref Key to identify ref
+    getButtonRef(e, t) {
+      return `${this.getButtonKey(e, t)}-ref`;
+    },
+    /**
+     * Determines if an element in the action bar button list is focusable with tab key
+     * @param {string} refKey - unique identifier for the ref element in DOM
+     */
+    canFocus(e) {
+      return e === this.orderedRefs[this.currentButtonRefIndex];
+    },
+    shiftActionBarFocusRight() {
+      this.shiftButtonRefIndex(1);
+    },
+    shiftActionBarFocusLeft() {
+      this.shiftButtonRefIndex(-1);
+    },
+    shiftButtonRefIndex(e) {
+      const t = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]], i = (this.currentButtonRefIndex + e) % this.orderedRefs.length;
+      this.currentButtonRefIndex = i >= 0 ? i : this.orderedRefs.length + i;
+      const n = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]];
+      t.$el.blur(), n.$el.focus();
     }
   }
 };
 var Q = function() {
-  var t = this, n = t._self._c;
-  return n("div", { staticClass: "d-recipe-editor", attrs: { "data-qa": "dt-recipe-editor", role: "presentation" }, on: { click: function(i) {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "d-recipe-editor", attrs: { "data-qa": "dt-recipe-editor", role: "presentation" }, on: { click: function(n) {
     return t.$refs.richTextEditor.focusEditor();
-  } } }, [n("dt-stack", { staticClass: "d-recipe-editor__top-bar", attrs: { direction: "row", gap: "450" } }, [t._l(t.buttonGroups, function(i) {
-    return n("dt-stack", { key: i.key, attrs: { direction: "row", gap: "300" } }, [t._l(i.buttonGroup, function(o) {
-      return n("dt-tooltip", { key: `${i.key}-${JSON.stringify(o.selector)}`, attrs: { message: o.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-        var r, s;
-        return [n("dt-button", { attrs: { active: (s = (r = t.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : s.isActive(o.selector), "aria-label": o.tooltipMessage, "data-qa": o.dataQA, importance: "clear", kind: "muted", size: "xs" }, on: { click: function(l) {
+  } } }, [i("dt-stack", { staticClass: "d-recipe-editor__top-bar", attrs: { direction: "row", gap: "450" } }, [t._l(t.buttonGroups, function(n) {
+    return i("dt-stack", { key: n.key, attrs: { direction: "row", gap: "300" } }, [t._l(n.buttonGroup, function(o) {
+      return i("dt-tooltip", { key: t.getButtonKey(n.key, o.selector), attrs: { message: o.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+        var r, l;
+        return [i("dt-button", { ref: (s) => {
+          t.buttonRefMap[t.getButtonRef(n.key, o.selector)] = s;
+        }, refInFor: !0, attrs: { active: (l = (r = t.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : l.isActive(o.selector), "aria-label": o.tooltipMessage, "data-qa": o.dataQA, tabindex: t.canFocus(t.getButtonRef(n.key, o.selector)) ? 0 : -1, importance: "clear", kind: "muted", size: "xs" }, on: { click: function(s) {
           return o.onClick();
-        } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-          return [n(o.icon, { tag: "component", attrs: { size: "200" } })];
-        }, proxy: !0 }], null, !0) }, [o.label ? n("span", [t._v(t._s(o.label))]) : t._e()])];
+        }, keydown: [function(s) {
+          return !s.type.indexOf("key") && t._k(s.keyCode, "right", 39, s.key, ["Right", "ArrowRight"]) || "button" in s && s.button !== 2 ? null : (s.stopPropagation(), t.shiftActionBarFocusRight.apply(null, arguments));
+        }, function(s) {
+          return !s.type.indexOf("key") && t._k(s.keyCode, "left", 37, s.key, ["Left", "ArrowLeft"]) || "button" in s && s.button !== 0 ? null : (s.stopPropagation(), t.shiftActionBarFocusLeft.apply(null, arguments));
+        }] }, scopedSlots: t._u([{ key: "icon", fn: function() {
+          return [i(o.icon, { tag: "component", attrs: { size: "200" } })];
+        }, proxy: !0 }], null, !0) }, [o.label ? i("span", [t._v(t._s(o.label))]) : t._e()])];
       }, proxy: !0 }], null, !0) });
-    }), n("div", { staticClass: "d-recipe-editor__button-group-divider" })], 2);
-  }), t.linkButton.showBtn ? n("dt-stack", { attrs: { direction: "row", gap: "300" } }, [n("dt-popover", { attrs: { open: t.showLinkInput, "show-close-button": !1, "visually-hidden-close": !0, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-recipe-editor-link-input-popover", padding: "none", placement: "bottom-start" }, on: { "update:open": function(i) {
-    t.showLinkInput = i;
-  }, click: t.onInputFocus, opened: t.updateInput }, nativeOn: { click: function(i) {
-    return i.stopPropagation(), t.onInputFocus.apply(null, arguments);
+    }), i("div", { staticClass: "d-recipe-editor__button-group-divider" })], 2);
+  }), t.linkButton.showBtn ? i("dt-stack", { attrs: { direction: "row", gap: "300" } }, [i("dt-popover", { attrs: { open: t.showLinkInput, "show-close-button": !1, "visually-hidden-close": !0, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-recipe-editor-link-input-popover", padding: "none", placement: "bottom-start" }, on: { "update:open": function(n) {
+    t.showLinkInput = n;
+  }, click: t.onInputFocus, opened: t.updateInput }, nativeOn: { click: function(n) {
+    return n.stopPropagation(), t.onInputFocus.apply(null, arguments);
   } }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-    return [n("dt-tooltip", { key: t.linkButton.key, attrs: { message: t.linkButton.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-      var i, o;
-      return [n("dt-button", { attrs: { active: (o = (i = t.$refs.richTextEditor) == null ? void 0 : i.editor) == null ? void 0 : o.isActive(t.linkButton.selector), "aria-label": t.linkButton.tooltipMessage, "data-qa": t.linkButton.dataQA, importance: "clear", kind: "muted", size: "xs" }, on: { click: function(r) {
+    return [i("dt-tooltip", { key: t.linkButton.key, attrs: { message: t.linkButton.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+      var n, o;
+      return [i("dt-button", { ref: (r) => {
+        t.buttonRefMap[t.getButtonRef("custom", "link")] = r;
+      }, attrs: { active: (o = (n = t.$refs.richTextEditor) == null ? void 0 : n.editor) == null ? void 0 : o.isActive(t.linkButton.selector), "aria-label": t.linkButton.tooltipMessage, "data-qa": t.linkButton.dataQA, tabindex: t.canFocus(t.getButtonRef("custom", "link")) ? 0 : -1, importance: "clear", kind: "muted", size: "xs" }, on: { click: function(r) {
         return t.linkButton.onClick();
-      } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-        return [n(t.linkButton.icon, { tag: "component", attrs: { size: "200" } })];
+      }, keydown: [function(r) {
+        return !r.type.indexOf("key") && t._k(r.keyCode, "right", 39, r.key, ["Right", "ArrowRight"]) || "button" in r && r.button !== 2 ? null : (r.stopPropagation(), t.shiftActionBarFocusRight.apply(null, arguments));
+      }, function(r) {
+        return !r.type.indexOf("key") && t._k(r.keyCode, "left", 37, r.key, ["Left", "ArrowLeft"]) || "button" in r && r.button !== 0 ? null : (r.stopPropagation(), t.shiftActionBarFocusLeft.apply(null, arguments));
+      }] }, scopedSlots: t._u([{ key: "icon", fn: function() {
+        return [i(t.linkButton.icon, { tag: "component", attrs: { size: "200" } })];
       }, proxy: !0 }], null, !1, 3601441856) })];
-    }, proxy: !0 }], null, !1, 3049978849) })];
+    }, proxy: !0 }], null, !1, 1796000448) })];
   }, proxy: !0 }, { key: "content", fn: function() {
-    return [n("div", { staticClass: "d-recipe-editor__popover-content" }, [t.showAddLink.setLinkTitle.length > 0 ? n("span", [t._v(" " + t._s(t.showAddLink.setLinkTitle) + " ")]) : t._e(), n("dt-input", { attrs: { "input-aria-label": t.showAddLink.setLinkInputAriaLabel, placeholder: t.setLinkPlaceholder, "data-qa": "dt-recipe-editor-link-input", "input-wrapper-class": "d-recipe-editor-link__input-wrapper" }, on: { click: t.onInputFocus, focus: t.onInputFocus, keydown: function(i) {
-      return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : t.setLink.apply(null, arguments);
-    } }, nativeOn: { click: function(i) {
-      return i.stopPropagation(), t.onInputFocus.apply(null, arguments);
-    } }, model: { value: t.linkInput, callback: function(i) {
-      t.linkInput = i;
+    return [i("div", { staticClass: "d-recipe-editor__popover-content" }, [t.showAddLink.setLinkTitle.length > 0 ? i("span", [t._v(" " + t._s(t.showAddLink.setLinkTitle) + " ")]) : t._e(), i("dt-input", { attrs: { "input-aria-label": t.showAddLink.setLinkInputAriaLabel, placeholder: t.setLinkPlaceholder, "data-qa": "dt-recipe-editor-link-input", "input-wrapper-class": "d-recipe-editor-link__input-wrapper" }, on: { click: t.onInputFocus, focus: t.onInputFocus, keydown: function(n) {
+      return !n.type.indexOf("key") && t._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : t.setLink.apply(null, arguments);
+    } }, nativeOn: { click: function(n) {
+      return n.stopPropagation(), t.onInputFocus.apply(null, arguments);
+    } }, model: { value: t.linkInput, callback: function(n) {
+      t.linkInput = n;
     }, expression: "linkInput" } })], 1)];
   }, proxy: !0 }, { key: "footerContent", fn: function() {
-    return [n("dt-stack", { staticClass: "d-recipe-editor__popover-footer", attrs: { direction: "row", gap: "300" } }, [n("dt-button", { attrs: { "aria-label": t.removeLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-remove-link-btn", importance: "clear", kind: "muted", size: "sm" }, on: { click: t.removeLink } }, [t._v(" " + t._s(t.removeLinkButton.label) + " ")]), n("dt-button", { attrs: { "aria-label": t.cancelSetLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-set-link-cancel-btn", importance: "clear", kind: "muted", size: "sm" }, on: { click: t.closeLinkInput } }, [t._v(" " + t._s(t.cancelSetLinkButton.label) + " ")]), n("dt-button", { attrs: { "aria-label": t.confirmSetLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-set-link-confirm-btn", size: "sm" }, on: { click: t.setLink } }, [t._v(" " + t._s(t.confirmSetLinkButton.label) + " ")])], 1)];
-  }, proxy: !0 }], null, !1, 791538356) })], 1) : t._e()], 2), n("div", { staticClass: "d-recipe-editor__content", style: { "max-height": t.maxHeight } }, [n("dt-rich-text-editor", t._b({ ref: "richTextEditor", attrs: { "allow-inline-images": !0, "allow-line-breaks": !0, "hide-link-bubble-menu": !0, "auto-focus": t.autoFocus, editable: t.editable, "input-aria-label": t.inputAriaLabel, "input-class": `d-recipe-editor__content-input ${t.inputClass}`, link: !0, "output-format": t.htmlOutputFormat, placeholder: t.placeholder, "use-div-tags": t.useDivTags, "data-qa": "dt-rich-text-editor" }, on: { "text-input": t.onTextInput, blur: t.onBlur, focus: t.onFocus, input: function(i) {
-    return t.onInput(i);
-  } }, model: { value: t.internalInputValue, callback: function(i) {
-    t.internalInputValue = i;
+    return [i("dt-stack", { staticClass: "d-recipe-editor__popover-footer", attrs: { direction: "row", gap: "300" } }, [i("dt-button", { attrs: { "aria-label": t.removeLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-remove-link-btn", importance: "clear", kind: "muted", size: "sm" }, on: { click: t.removeLink } }, [t._v(" " + t._s(t.removeLinkButton.label) + " ")]), i("dt-button", { attrs: { "aria-label": t.cancelSetLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-set-link-cancel-btn", importance: "clear", kind: "muted", size: "sm" }, on: { click: t.closeLinkInput } }, [t._v(" " + t._s(t.cancelSetLinkButton.label) + " ")]), i("dt-button", { attrs: { "aria-label": t.confirmSetLinkButton.ariaLabel, "data-qa": "dt-recipe-editor-set-link-confirm-btn", size: "sm" }, on: { click: t.setLink } }, [t._v(" " + t._s(t.confirmSetLinkButton.label) + " ")])], 1)];
+  }, proxy: !0 }], null, !1, 484310841) })], 1) : t._e()], 2), i("div", { staticClass: "d-recipe-editor__content", style: { "max-height": t.maxHeight } }, [i("dt-rich-text-editor", t._b({ ref: "richTextEditor", attrs: { "allow-inline-images": !0, "allow-line-breaks": !0, "hide-link-bubble-menu": !0, "auto-focus": t.autoFocus, editable: t.editable, "input-aria-label": t.inputAriaLabel, "input-class": `d-recipe-editor__content-input ${t.inputClass}`, link: !0, "output-format": t.htmlOutputFormat, placeholder: t.placeholder, "use-div-tags": t.useDivTags, "data-qa": "dt-rich-text-editor" }, on: { "text-input": t.onTextInput, blur: t.onBlur, focus: t.onFocus, input: function(n) {
+    return t.onInput(n);
+  } }, model: { value: t.internalInputValue, callback: function(n) {
+    t.internalInputValue = n;
   }, expression: "internalInputValue" } }, "dt-rich-text-editor", t.$attrs, !1))], 1)], 1);
-}, R = [], F = /* @__PURE__ */ x(
-  D,
+}, v = [], $ = /* @__PURE__ */ T(
+  M,
   Q,
-  R
+  v
 );
-const N = F.exports;
+const X = $.exports;
 export {
-  N as default
+  X as default
 };
 //# sourceMappingURL=editor.js.map