@dialpad/dialtone 9.29.1 → 9.30.0

package/dist/vue2/lib/editor.cjs

@@ -1,2 +1,556 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),l=require("./rich-text-editor.cjs"),c=require("./button.cjs"),d=require("./icon.cjs"),h=require("./popover.cjs"),p=require("./stack.cjs"),k=require("./input.cjs"),f=require("./tooltip.cjs");require("@tiptap/vue-2");require("@tiptap/extension-blockquote");require("@tiptap/extension-code-block");require("@tiptap/extension-document");require("@tiptap/extension-hard-break");require("@tiptap/extension-paragraph");require("@tiptap/extension-placeholder");require("@tiptap/extension-bold");require("@tiptap/extension-bullet-list");require("@tiptap/extension-italic");require("@tiptap/extension-link");require("@tiptap/extension-list-item");require("@tiptap/extension-ordered-list");require("@tiptap/extension-strike");require("@tiptap/extension-underline");require("@tiptap/extension-text");require("@tiptap/extension-text-align");require("@tiptap/core");require("../chunks/index-sdfB7Aok.js");require("emoji-regex");require("emoji-toolkit/emoji_strategy.json");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@tiptap/pm/state");require("@tiptap/suggestion");require("@dialpad/dialtone-emojis");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./utils.cjs");require("./constants.cjs");require("vue");require("./item-layout.cjs");require("@dialpad/dialtone-icons/vue2");require("tippy.js");require("@tiptap/extension-mention");require("./link.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./avatar.cjs");require("./presence.cjs");require("../chunks/stack_constants-m9Ickqw0.js");require("../chunks/popover_constants-hOEhklvr.js");require("@linusborg/vue-simple-portal");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-ErijKGYR.js");require("./lazy-show.cjs");require("../chunks/input-o-fc1X4b.js");require("./validators.cjs");require("./validation-messages.cjs");const g=[/^https?:\/\//,/^http?:\/\//,/^ftp?:\/\//,/^ftps?:\/\//,/^ftps?:\/\//,/mailto:([^?]*)/],B="https://",m={name:"DtRecipeEditor",components:{DtRichTextEditor:l.DtRichTextEditor,DtButton:c.DtButton,DtIcon:d.DtIcon,DtPopover:h.DtPopover,DtStack:p.DtStack,DtInput:k.DtInput,DtTooltip:f.DtTooltip},inheritAttrs:!1,props:{value:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(e){return typeof e=="string"?l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(e):!0}},placeholder:{type:String,default:""},maxHeight:{type:String,default:"unset"},confirmSetLinkButton:{type:Object,default:()=>({label:"Confirm",ariaLabel:"Confirm set link"})},removeLinkButton:{type:Object,default:()=>({label:"Remove",ariaLabel:"Remove link"})},cancelSetLinkButton:{type:Object,default:()=>({label:"Cancel",ariaLabel:"Cancel set link"})},setLinkPlaceholder:{type:String,default:""},showBoldButton:{type:Boolean,default:!0},showItalicsButton:{type:Boolean,default:!0},showUnderlineButton:{type:Boolean,default:!0},showStrikeButton:{type:Boolean,default:!0},showListItemsButton:{type:Boolean,default:!0},showOrderedListButton:{type:Boolean,default:!0},showAlignLeftButton:{type:Boolean,default:!0},showAlignCenterButton:{type:Boolean,default:!0},showAlignRightButton:{type:Boolean,default:!0},showAlignJustifyButton:{type:Boolean,default:!0},showQuoteButton:{type:Boolean,default:!0},showCodeBlockButton:{type:Boolean,default:!0},showQuickRepliesButton:{type:Boolean,default:!0},showAddLink:{type:Object,default:()=>({showAddLinkButton:!0,setLinkTitle:"Add a link",setLinkInputAriaLabel:"Input field to add link"})}},emits:["focus","blur","input","quick-replies-click"],data(){return{internalInputValue:this.value,hasFocus:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},showLinkInput:!1,linkInput:""}},computed:{inputLength(){return this.internalInputValue.length},htmlOutputFormat(){return l.RICH_TEXT_EDITOR_OUTPUT_FORMATS[2]},showingTextFormatButtons(){return this.showBoldButton||this.showItalicsButton||this.showStrikeButton||this.showUnderlineButton},showingAlignmentButtons(){return this.showAlignLeftButton||this.showAlignCenterButton||this.showAlignRightButton||this.showAlignJustifyButton},showingListButtons(){return this.showListItemsButton||this.showOrderedListButton},buttonGroups(){const e=this.individualButtons.map(t=>({key:t.selector,buttonGroup:[t]}));return[{key:"new",buttonGroup:this.newButtons},{key:"format",buttonGroup:this.textFormatButtons},{key:"alignment",buttonGroup:this.alignmentButtons},{key:"list",buttonGroup:this.listButtons},...e].filter(t=>t.buttonGroup.length>0)},newButtons(){return[{showBtn:this.showQuickRepliesButton,label:"Quick reply",selector:"quickReplies",iconName:"lightning-bolt",dataQA:"dt-editor-quick-replies-btn",tooltipMessage:"Quick Reply",onClick:this.onQuickRepliesClick}].filter(e=>e.showBtn)},textFormatButtons(){return[{showBtn:this.showBoldButton,selector:"bold",iconName:"bold",dataQA:"dt-editor-bold-btn",tooltipMessage:"Bold",onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,selector:"italic",iconName:"italic",dataQA:"dt-editor-italics-btn",tooltipMessage:"Italics",onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,selector:"underline",iconName:"underline",dataQA:"dt-editor-underline-btn",tooltipMessage:"Underline",onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,selector:"strike",iconName:"strikethrough",dataQA:"dt-editor-strike-btn",tooltipMessage:"Strike",onClick:this.onStrikethroughTextToggle}].filter(e=>e.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,selector:{textAlign:"left"},iconName:"align-left",dataQA:"dt-editor-align-left-btn",tooltipMessage:"Align Left",onClick:()=>this.onTextAlign("left")},{showBtn:this.showAlignCenterButton,selector:{textAlign:"center"},iconName:"align-center",dataQA:"dt-editor-align-center-btn",tooltipMessage:"Align Center",onClick:()=>this.onTextAlign("center")},{showBtn:this.showAlignRightButton,selector:{textAlign:"right"},iconName:"align-right",dataQA:"dt-editor-align-right-btn",tooltipMessage:"Align Right",onClick:()=>this.onTextAlign("right")},{showBtn:this.showAlignJustifyButton,selector:{textAlign:"justify"},iconName:"align-justify",dataQA:"dt-editor-align-justify-btn",tooltipMessage:"Align Justify",onClick:()=>this.onTextAlign("justify")}].filter(e=>e.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,selector:"bulletList",iconName:"list-bullet",dataQA:"dt-editor-list-items-btn",tooltipMessage:"Bullet List",onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,selector:"orderedList",iconName:"list-ordered",dataQA:"dt-editor-ordered-list-items-btn",tooltipMessage:"Ordered List",onClick:this.onOrderedListToggle}].filter(e=>e.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,selector:"blockquote",iconName:"quote",dataQA:"dt-editor-blockquote-btn",tooltipMessage:"Quote",onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,selector:"codeBlock",iconName:"code-block",dataQA:"dt-editor-code-block-btn",tooltipMessage:"Code",onClick:this.onCodeBlockToggle}].filter(e=>e.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,selector:"link",iconName:"link-2",dataQA:"dt-editor-add-link-btn",tooltipMessage:"Link",onClick:this.openLinkInput}}},watch:{value(e){this.internalInputValue=e}},methods:{onInputFocus(e){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()},setLink(e){var o,r,s;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}g.find(u=>u.test(this.linkInput))||(this.linkInput=`${B}${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,`<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()},openLinkInput(){this.showLinkInput=!0},updateInput(e){var t,n,i;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},closeLinkInput(){var e;this.showLinkInput=!1,this.linkInput="",(e=this.$refs.richTextEditor.editor)==null||e.chain().focus()},onBoldTextToggle(){var e,t;(t=(e=this.$refs.richTextEditor)==null?void 0:e.editor)==null||t.chain().focus().toggleBold().run()},onItalicTextToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleItalic().run()},onUnderlineTextToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleUnderline().run()},onStrikethroughTextToggle(){var e;(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();(o=this.$refs.richTextEditor)==null||o.editor.chain().focus().setTextAlign(e).run()},onBulletListToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleBulletList().run()},onOrderedListToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleOrderedList().run()},onCodeBlockToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleCodeBlock().run()},onQuickRepliesClick(){this.$emit("quick-replies-click")},onBlockquoteToggle(){var e;(e=this.$refs.richTextEditor)==null||e.editor.chain().focus().toggleBlockquote().run()},onFocus(e){this.hasFocus=!0,this.$emit("focus",e)},onBlur(e){this.hasFocus=!1,this.$emit("blur",e)},onInput(e){this.$emit("input",e)}}};var b=function(){var t=this,n=t._self._c;return n("div",{staticClass:"d-d-flex d-fd-column",attrs:{"data-qa":"dt-editor",role:"presentation"},on:{click:function(i){return t.$refs.richTextEditor.focusEditor()}}},[n("dt-stack",{staticClass:"d-p8 dt-editor--top-bar-background",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:{"data-qa":o.dataQA,importance:"clear",kind:"muted",active:(s=(r=t.$refs.richTextEditor)==null?void 0:r.editor)==null?void 0:s.isActive(o.selector),size:"xs","aria-label":o.tooltipMessage},on:{click:function(u){return o.onClick()}},scopedSlots:t._u([{key:"icon",fn:function(){return[n("dt-icon",{attrs:{name:o.iconName,size:"200"}})]},proxy:!0}],null,!0)},[o.label?n("span",[t._v(t._s(o.label))]):t._e()])]},proxy:!0}],null,!0)})}),n("div",{staticClass:"dt-editor--button-group-divider"})],2)}),t.linkButton.showBtn?n("dt-stack",{attrs:{direction:"row",gap:"300"}},[n("dt-popover",{attrs:{open:t.showLinkInput,placement:"bottom-start","visually-hidden-close":!0,"visually-hidden-close-label":"Close link input popover","data-qa":"dt-editor-link-input-popover","show-close-button":!1},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)}},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",{staticClass:"d-ol-none",attrs:{"data-qa":t.linkButton.dataQA,importance:"clear",kind:"muted",active:(o=(i=t.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:o.isActive(t.linkButton.selector),size:"xs","aria-label":t.linkButton.tooltipMessage},on:{click:function(r){return t.linkButton.onClick()}},scopedSlots:t._u([{key:"icon",fn:function(){return[n("dt-icon",{staticClass:"d-fw-bold",attrs:{name:t.linkButton.iconName,size:"200"}})]},proxy:!0}],null,!1,540616731)})]},proxy:!0}],null,!1,2091397100)})]},proxy:!0},{key:"content",fn:function(){return[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,"data-qa":"dt-editor-link-input",placeholder:t.setLinkPlaceholder,"input-wrapper-class":"d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none"},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},expression:"linkInput"}})]},proxy:!0},{key:"footerContent",fn:function(){return[n("div",{staticClass:"d-ml8 d-mr12"},[n("dt-button",{staticClass:"d-mx2",attrs:{"aria-label":t.removeLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-remove-link-btn"},on:{click:t.removeLink}},[t._v(" "+t._s(t.removeLinkButton.label)+" ")]),n("dt-button",{staticClass:"d-mx2",attrs:{"aria-label":t.cancelSetLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-set-link-cancel-btn"},on:{click:t.closeLinkInput}},[t._v(" "+t._s(t.cancelSetLinkButton.label)+" ")]),n("dt-button",{staticClass:"d-mx2",attrs:{size:"sm","aria-label":t.confirmSetLinkButton.ariaLabel,"data-qa":"dt-editor-set-link-confirm-btn"},on:{click:t.setLink}},[t._v(" "+t._s(t.confirmSetLinkButton.label)+" ")])],1)]},proxy:!0}],null,!1,1792797475)})],1):t._e()],2),n("div",{staticClass:"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",style:{"max-height":t.maxHeight}},[n("dt-rich-text-editor",t._b({ref:"richTextEditor",attrs:{"data-qa":"dt-rich-text-editor",editable:t.editable,"input-aria-label":t.inputAriaLabel,"input-class":`d-ml16 d-ol-none d-my6 ${t.inputClass}`,"output-format":t.htmlOutputFormat,"auto-focus":t.autoFocus,placeholder:t.placeholder,"allow-line-breaks":!0,link:!1},on:{focus:t.onFocus,blur:t.onBlur,input:function(i){return t.onInput(i)}},model:{value:t.internalInputValue,callback:function(i){t.internalInputValue=i},expression:"internalInputValue"}},"dt-rich-text-editor",t.$attrs,!1))],1)],1)},w=[],L=a.n(m,b,w,!1,null,null,null,null);const q=L.exports;exports.DtRecipeEditor=q;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_richTextEditor = require("./rich-text-editor.cjs");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+const lib_popover = require("./popover.cjs");
+const lib_stack = require("./stack.cjs");
+const lib_input = require("./input.cjs");
+const lib_tooltip = require("./tooltip.cjs");
+require("@tiptap/vue-2");
+require("@tiptap/extension-blockquote");
+require("@tiptap/extension-code-block");
+require("@tiptap/extension-document");
+require("@tiptap/extension-hard-break");
+require("@tiptap/extension-paragraph");
+require("@tiptap/extension-placeholder");
+require("@tiptap/extension-bold");
+require("@tiptap/extension-bullet-list");
+require("@tiptap/extension-italic");
+require("@tiptap/extension-link");
+require("@tiptap/extension-list-item");
+require("@tiptap/extension-ordered-list");
+require("@tiptap/extension-strike");
+require("@tiptap/extension-underline");
+require("@tiptap/extension-text");
+require("@tiptap/extension-text-align");
+require("@tiptap/core");
+require("./emoji.cjs");
+require("../common/emoji.cjs");
+require("emoji-regex");
+require("emoji-toolkit/emoji_strategy.json");
+require("./skeleton.cjs");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("@tiptap/pm/state");
+require("@tiptap/suggestion");
+require("@dialpad/dialtone-emojis");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("./item-layout.cjs");
+require("@dialpad/dialtone-icons/vue2");
+require("tippy.js");
+require("@tiptap/extension-mention");
+require("./link.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./avatar.cjs");
+require("./presence.cjs");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("@linusborg/vue-simple-portal");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+require("./lazy-show.cjs");
+require("../chunks/input-Axw-wFj2.js");
+require("../common/validators.cjs");
+require("./validation-messages.cjs");
+const EDITOR_SUPPORTED_LINK_PROTOCOLS = [
+  /^https?:\/\//,
+  /^http?:\/\//,
+  /^ftp?:\/\//,
+  /^ftps?:\/\//,
+  /^ftps?:\/\//,
+  /mailto:([^?]*)/
+];
+const EDITOR_DEFAULT_LINK_PREFIX = "https://";
+const _sfc_main = {
+  name: "DtRecipeEditor",
+  components: {
+    DtRichTextEditor: lib_richTextEditor.DtRichTextEditor,
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon,
+    DtPopover: lib_popover.DtPopover,
+    DtStack: lib_stack.DtStack,
+    DtInput: lib_input.DtInput,
+    DtTooltip: lib_tooltip.DtTooltip
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    value: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return lib_richTextEditor.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
+      }
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Content area needs to dynamically adjust height based on the conversation area height.
+     * can be vh|px|rem|em|%
+     */
+    maxHeight: {
+      type: String,
+      default: "unset"
+    },
+    /**
+     * Confirm set link button defaults.
+     */
+    confirmSetLinkButton: {
+      type: Object,
+      default: () => ({ label: "Confirm", ariaLabel: "Confirm set link" })
+    },
+    /**
+     * Remove link button defaults.
+     */
+    removeLinkButton: {
+      type: Object,
+      default: () => ({ label: "Remove", ariaLabel: "Remove link" })
+    },
+    /**
+     * Cancel set link button defaults.
+     */
+    cancelSetLinkButton: {
+      type: Object,
+      default: () => ({ label: "Cancel", ariaLabel: "Cancel set link" })
+    },
+    /**
+     * Placeholder text for the set link input field
+     */
+    setLinkPlaceholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Show button to render text as bold
+     */
+    showBoldButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to render text in italics
+     */
+    showItalicsButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to underline text
+     */
+    showUnderlineButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to strike text
+     */
+    showStrikeButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to render list items
+     */
+    showListItemsButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to render ordered list items
+     */
+    showOrderedListButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to align text to the left
+     */
+    showAlignLeftButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to align text to the center
+     */
+    showAlignCenterButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to align text to the right
+     */
+    showAlignRightButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to justify text
+     */
+    showAlignJustifyButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to add quote format to text
+     */
+    showQuoteButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to add code block
+     */
+    showCodeBlockButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show button to handle quick replies
+     */
+    showQuickRepliesButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Show add link default config.
+     */
+    showAddLink: {
+      type: Object,
+      default: () => ({
+        showAddLinkButton: true,
+        setLinkTitle: "Add a link",
+        setLinkInputAriaLabel: "Input field to add link"
+      })
+    }
+  },
+  emits: [
+    /**
+     * Native focus event
+     * @event input
+     * @type {String|JSON}
+     */
+    "focus",
+    /**
+     * Native blur event
+     * @event input
+     * @type {String|JSON}
+     */
+    "blur",
+    /**
+     * Native input event
+     * @event input
+     * @type {String|JSON}
+     */
+    "input",
+    /**
+     * Quick replies button
+     * pressed event
+     * @event quick-replies-click
+    */
+    "quick-replies-click"
+  ],
+  data() {
+    return {
+      internalInputValue: this.value,
+      // internal input content
+      hasFocus: false,
+      linkOptions: {
+        class: "d-link d-c-text d-d-inline-block"
+      },
+      showLinkInput: false,
+      linkInput: ""
+    };
+  },
+  computed: {
+    inputLength() {
+      return this.internalInputValue.length;
+    },
+    htmlOutputFormat() {
+      return lib_richTextEditor.RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];
+    },
+    showingTextFormatButtons() {
+      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
+    },
+    showingAlignmentButtons() {
+      return this.showAlignLeftButton || this.showAlignCenterButton || this.showAlignRightButton || this.showAlignJustifyButton;
+    },
+    showingListButtons() {
+      return this.showListItemsButton || this.showOrderedListButton;
+    },
+    buttonGroups() {
+      const individualButtonStacks = this.individualButtons.map((buttonData) => ({
+        key: buttonData.selector,
+        buttonGroup: [buttonData]
+      }));
+      return [
+        { key: "new", buttonGroup: this.newButtons },
+        { key: "format", buttonGroup: this.textFormatButtons },
+        { key: "alignment", buttonGroup: this.alignmentButtons },
+        { key: "list", buttonGroup: this.listButtons },
+        ...individualButtonStacks
+      ].filter((buttonGroupData) => buttonGroupData.buttonGroup.length > 0);
+    },
+    newButtons() {
+      return [
+        { showBtn: this.showQuickRepliesButton, label: "Quick reply", selector: "quickReplies", iconName: "lightning-bolt", dataQA: "dt-editor-quick-replies-btn", tooltipMessage: "Quick Reply", onClick: this.onQuickRepliesClick }
+      ].filter((button) => button.showBtn);
+    },
+    textFormatButtons() {
+      return [
+        { showBtn: this.showBoldButton, selector: "bold", iconName: "bold", dataQA: "dt-editor-bold-btn", tooltipMessage: "Bold", onClick: this.onBoldTextToggle },
+        { showBtn: this.showItalicsButton, selector: "italic", iconName: "italic", dataQA: "dt-editor-italics-btn", tooltipMessage: "Italics", onClick: this.onItalicTextToggle },
+        { showBtn: this.showUnderlineButton, selector: "underline", iconName: "underline", dataQA: "dt-editor-underline-btn", tooltipMessage: "Underline", onClick: this.onUnderlineTextToggle },
+        { showBtn: this.showStrikeButton, selector: "strike", iconName: "strikethrough", dataQA: "dt-editor-strike-btn", tooltipMessage: "Strike", onClick: this.onStrikethroughTextToggle }
+      ].filter((button) => button.showBtn);
+    },
+    alignmentButtons() {
+      return [
+        { showBtn: this.showAlignLeftButton, selector: { textAlign: "left" }, iconName: "align-left", dataQA: "dt-editor-align-left-btn", tooltipMessage: "Align Left", onClick: () => this.onTextAlign("left") },
+        { showBtn: this.showAlignCenterButton, selector: { textAlign: "center" }, iconName: "align-center", dataQA: "dt-editor-align-center-btn", tooltipMessage: "Align Center", onClick: () => this.onTextAlign("center") },
+        { showBtn: this.showAlignRightButton, selector: { textAlign: "right" }, iconName: "align-right", dataQA: "dt-editor-align-right-btn", tooltipMessage: "Align Right", onClick: () => this.onTextAlign("right") },
+        { showBtn: this.showAlignJustifyButton, selector: { textAlign: "justify" }, iconName: "align-justify", dataQA: "dt-editor-align-justify-btn", tooltipMessage: "Align Justify", onClick: () => this.onTextAlign("justify") }
+      ].filter((button) => button.showBtn);
+    },
+    listButtons() {
+      return [
+        { showBtn: this.showListItemsButton, selector: "bulletList", iconName: "list-bullet", dataQA: "dt-editor-list-items-btn", tooltipMessage: "Bullet List", onClick: this.onBulletListToggle },
+        { showBtn: this.showOrderedListButton, selector: "orderedList", iconName: "list-ordered", dataQA: "dt-editor-ordered-list-items-btn", tooltipMessage: "Ordered List", onClick: this.onOrderedListToggle }
+      ].filter((button) => button.showBtn);
+    },
+    individualButtons() {
+      return [
+        { showBtn: this.showQuoteButton, selector: "blockquote", iconName: "quote", dataQA: "dt-editor-blockquote-btn", tooltipMessage: "Quote", onClick: this.onBlockquoteToggle },
+        { showBtn: this.showCodeBlockButton, selector: "codeBlock", iconName: "code-block", dataQA: "dt-editor-code-block-btn", tooltipMessage: "Code", onClick: this.onCodeBlockToggle }
+      ].filter((button) => button.showBtn);
+    },
+    linkButton() {
+      return { showBtn: this.showAddLink.showAddLinkButton, selector: "link", iconName: "link-2", dataQA: "dt-editor-add-link-btn", tooltipMessage: "Link", onClick: this.openLinkInput };
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalInputValue = newValue;
+    }
+  },
+  methods: {
+    onInputFocus(event) {
+      event == null ? void 0 : event.stopPropagation();
+    },
+    removeLink() {
+      var _a, _b, _c, _d, _e;
+      (_e = (_d = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain()) == null ? void 0 : _c.focus()) == null ? void 0 : _d.unsetLink()) == null ? void 0 : _e.run();
+      this.closeLinkInput();
+    },
+    setLink(event) {
+      var _a, _b, _c;
+      const editor2 = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
+      event == null ? void 0 : event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      if (!this.linkInput) {
+        this.removeLink();
+        return;
+      }
+      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find((prefixRegex) => prefixRegex.test(this.linkInput));
+      if (!prefix) {
+        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;
+      }
+      const selection = (_c = (_b = editor2 == null ? void 0 : editor2.view) == null ? void 0 : _b.state) == null ? void 0 : _c.selection;
+      if (selection.anchor === selection.head) {
+        editor2.chain().focus().insertContentAt(
+          selection.anchor,
+          `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
+        ).run();
+      } else {
+        editor2.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run();
+      }
+      this.closeLinkInput();
+    },
+    openLinkInput() {
+      this.showLinkInput = true;
+    },
+    updateInput(openedInput) {
+      var _a, _b, _c;
+      if (!openedInput) {
+        return this.closeLinkInput();
+      }
+      this.linkInput = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href;
+    },
+    closeLinkInput() {
+      var _a;
+      this.showLinkInput = false;
+      this.linkInput = "";
+      (_a = this.$refs.richTextEditor.editor) == null ? void 0 : _a.chain().focus();
+    },
+    onBoldTextToggle() {
+      var _a, _b;
+      (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain().focus().toggleBold().run();
+    },
+    onItalicTextToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleItalic().run();
+    },
+    onUnderlineTextToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleUnderline().run();
+    },
+    onStrikethroughTextToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleStrike().run();
+    },
+    onTextAlign(alignment) {
+      var _a, _b, _c, _d;
+      if ((_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive({ textAlign: alignment })) {
+        return (_c = this.$refs.richTextEditor) == null ? void 0 : _c.editor.chain().focus().unsetTextAlign().run();
+      }
+      (_d = this.$refs.richTextEditor) == null ? void 0 : _d.editor.chain().focus().setTextAlign(alignment).run();
+    },
+    onBulletListToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBulletList().run();
+    },
+    onOrderedListToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleOrderedList().run();
+    },
+    onCodeBlockToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleCodeBlock().run();
+    },
+    onQuickRepliesClick() {
+      this.$emit("quick-replies-click");
+    },
+    onBlockquoteToggle() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();
+    },
+    onFocus(event) {
+      this.hasFocus = true;
+      this.$emit("focus", event);
+    },
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
+    },
+    onInput(event) {
+      this.$emit("input", event);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-d-flex d-fd-column", attrs: { "data-qa": "dt-editor", "role": "presentation" }, on: { "click": function($event) {
+    return _vm.$refs.richTextEditor.focusEditor();
+  } } }, [_c("dt-stack", { staticClass: "d-p8 dt-editor--top-bar-background", attrs: { "direction": "row", "gap": "450" } }, [_vm._l(_vm.buttonGroups, function(buttonGroup) {
+    return _c("dt-stack", { key: buttonGroup.key, attrs: { "direction": "row", "gap": "300" } }, [_vm._l(buttonGroup.buttonGroup, function(button) {
+      return _c("dt-tooltip", { key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`, attrs: { "message": button.tooltipMessage, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+        var _a, _b;
+        return [_c("dt-button", { attrs: { "data-qa": button.dataQA, "importance": "clear", "kind": "muted", "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector), "size": "xs", "aria-label": button.tooltipMessage }, on: { "click": function($event) {
+          return button.onClick();
+        } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+          return [_c("dt-icon", { attrs: { "name": button.iconName, "size": "200" } })];
+        }, proxy: true }], null, true) }, [button.label ? _c("span", [_vm._v(_vm._s(button.label))]) : _vm._e()])];
+      }, proxy: true }], null, true) });
+    }), _c("div", { staticClass: "dt-editor--button-group-divider" })], 2);
+  }), _vm.linkButton.showBtn ? _c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("dt-popover", { attrs: { "open": _vm.showLinkInput, "placement": "bottom-start", "visually-hidden-close": true, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-editor-link-input-popover", "show-close-button": false }, on: { "update:open": function($event) {
+    _vm.showLinkInput = $event;
+  }, "click": _vm.onInputFocus, "opened": _vm.updateInput }, nativeOn: { "click": function($event) {
+    $event.stopPropagation();
+    return _vm.onInputFocus.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-tooltip", { key: _vm.linkButton.key, attrs: { "message": _vm.linkButton.tooltipMessage, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      var _a, _b;
+      return [_c("dt-button", { staticClass: "d-ol-none", attrs: { "data-qa": _vm.linkButton.dataQA, "importance": "clear", "kind": "muted", "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(_vm.linkButton.selector), "size": "xs", "aria-label": _vm.linkButton.tooltipMessage }, on: { "click": function($event) {
+        return _vm.linkButton.onClick();
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { staticClass: "d-fw-bold", attrs: { "name": _vm.linkButton.iconName, "size": "200" } })];
+      }, proxy: true }], null, false, 540616731) })];
+    }, proxy: true }], null, false, 2091397100) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_vm.showAddLink.setLinkTitle.length > 0 ? _c("span", [_vm._v(" " + _vm._s(_vm.showAddLink.setLinkTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.showAddLink.setLinkInputAriaLabel, "data-qa": "dt-editor-link-input", "placeholder": _vm.setLinkPlaceholder, "input-wrapper-class": "d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none" }, on: { "click": _vm.onInputFocus, "focus": _vm.onInputFocus, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+        return null;
+      return _vm.setLink.apply(null, arguments);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+      return _vm.onInputFocus.apply(null, arguments);
+    } }, model: { value: _vm.linkInput, callback: function($$v) {
+      _vm.linkInput = $$v;
+    }, expression: "linkInput" } })];
+  }, proxy: true }, { key: "footerContent", fn: function() {
+    return [_c("div", { staticClass: "d-ml8 d-mr12" }, [_c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.removeLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-remove-link-btn" }, on: { "click": _vm.removeLink } }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.cancelSetLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-set-link-cancel-btn" }, on: { "click": _vm.closeLinkInput } }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "size": "sm", "aria-label": _vm.confirmSetLinkButton.ariaLabel, "data-qa": "dt-editor-set-link-confirm-btn" }, on: { "click": _vm.setLink } }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
+  }, proxy: true }], null, false, 1792797475) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "allow-line-breaks": true, "link": false }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+    return _vm.onInput($event);
+  } }, model: { value: _vm.internalInputValue, callback: function($$v) {
+    _vm.internalInputValue = $$v;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false))], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const editor = __component__.exports;
+exports.DtRecipeEditor = editor;
 //# sourceMappingURL=editor.cjs.map