@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/editor.cjs

@@ -1,2 +1,712 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),k=require("./rich-text-editor.cjs"),b=require("./button.cjs"),L=require("./icon.cjs"),x=require("./popover.cjs"),T=require("./stack.cjs"),C=require("./input.cjs"),q=require("./tooltip.cjs");require("@tiptap/vue-3");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-IBtQ5jRJ.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@tiptap/pm/state");require("@tiptap/suggestion");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./utils.cjs");require("./constants.cjs");require("./item-layout.cjs");require("@dialpad/dialtone-icons/vue3");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("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./lazy-show.cjs");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("./validation-messages.cjs");const y=[/^https?:\/\//,/^http?:\/\//,/^ftp?:\/\//,/^ftps?:\/\//,/^ftps?:\/\//,/mailto:([^?]*)/],A="https://",I={name:"DtRecipeEditor",components:{DtRichTextEditor:k.DtRichTextEditor,DtButton:b.DtButton,DtIcon:L.DtIcon,DtPopover:x.DtPopover,DtStack:T.DtStack,DtInput:C.DtInput,DtTooltip:q.DtTooltip},mixins:[],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(t){return typeof t=="string"?k.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!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 k.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 t=this.individualButtons.map(i=>({key:i.selector,buttonGroup:[i]}));return[{key:"new",buttonGroup:this.newButtons},{key:"format",buttonGroup:this.textFormatButtons},{key:"alignment",buttonGroup:this.alignmentButtons},{key:"list",buttonGroup:this.listButtons},...t].filter(i=>i.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(t=>t.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(t=>t.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(t=>t.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(t=>t.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(t=>t.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(t){this.internalInputValue=t}},methods:{onInputFocus(t){t==null||t.stopPropagation()},removeLink(){var t,i,o,s,l;(l=(s=(o=(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.chain())==null?void 0:o.focus())==null?void 0:s.unsetLink())==null||l.run(),this.closeLinkInput()},setLink(t){var l,n,c;const i=(l=this.$refs.richTextEditor)==null?void 0:l.editor;if(t==null||t.preventDefault(),t==null||t.stopPropagation(),!this.linkInput){this.removeLink();return}y.find(u=>u.test(this.linkInput))||(this.linkInput=`${A}${this.linkInput}`);const s=(c=(n=i==null?void 0:i.view)==null?void 0:n.state)==null?void 0:c.selection;s.anchor===s.head?i.chain().focus().insertContentAt(s.anchor,`<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run():i.chain().focus().extendMarkRange("link").setLink({href:this.linkInput,class:this.linkOptions.class}).run(),this.closeLinkInput()},openLinkInput(){this.showLinkInput=!0},updateInput(t){var i,o,s;if(!t)return this.closeLinkInput();this.linkInput=(s=(o=(i=this.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:o.getAttributes("link"))==null?void 0:s.href},closeLinkInput(){var t;this.showLinkInput=!1,this.linkInput="",(t=this.$refs.richTextEditor.editor)==null||t.chain().focus()},onBoldTextToggle(){var t,i;(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null||i.chain().focus().toggleBold().run()},onItalicTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleItalic().run()},onUnderlineTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleUnderline().run()},onStrikethroughTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleStrike().run()},onTextAlign(t){var i,o,s,l;if((o=(i=this.$refs.richTextEditor)==null?void 0:i.editor)!=null&&o.isActive({textAlign:t}))return(s=this.$refs.richTextEditor)==null?void 0:s.editor.chain().focus().unsetTextAlign().run();(l=this.$refs.richTextEditor)==null||l.editor.chain().focus().setTextAlign(t).run()},onBulletListToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleBulletList().run()},onOrderedListToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleOrderedList().run()},onCodeBlockToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleCodeBlock().run()},onQuickRepliesClick(){this.$emit("quick-replies-click")},onBlockquoteToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleBlockquote().run()},onFocus(t){this.hasFocus=!0,this.$emit("focus",t)},onBlur(t){this.hasFocus=!1,this.$emit("blur",t)},onInput(t){this.$emit("input",t)}}},_=e.createElementVNode("div",{class:"dt-editor--button-group-divider"},null,-1),E={key:0},N={class:"d-ml8 d-mr12"};function v(t,i,o,s,l,n){const c=e.resolveComponent("dt-icon"),u=e.resolveComponent("dt-button"),p=e.resolveComponent("dt-tooltip"),d=e.resolveComponent("dt-stack"),B=e.resolveComponent("dt-input"),f=e.resolveComponent("dt-popover"),m=e.resolveComponent("dt-rich-text-editor");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-editor",role:"presentation",class:"d-d-flex d-fd-column",onClick:i[4]||(i[4]=a=>t.$refs.richTextEditor.focusEditor())},[e.createVNode(d,{direction:"row",gap:"450",class:"d-p8 dt-editor--top-bar-background"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.buttonGroups,a=>(e.openBlock(),e.createBlock(d,{key:a.key,direction:"row",gap:"300"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.buttonGroup,r=>(e.openBlock(),e.createBlock(p,{key:`${a.key}-${JSON.stringify(r.selector)}`,message:r.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var h,g;return[e.createVNode(u,{"data-qa":r.dataQA,importance:"clear",kind:"muted",active:(g=(h=t.$refs.richTextEditor)==null?void 0:h.editor)==null?void 0:g.isActive(r.selector),size:"xs","aria-label":r.tooltipMessage,class:e.normalizeClass({"d-btn--icon-only":!r.label}),onClick:O=>r.onClick()},{icon:e.withCtx(()=>[e.createVNode(c,{name:r.iconName,size:"200"},null,8,["name"])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(r==null?void 0:r.label),1)]),_:2},1032,["data-qa","active","aria-label","class","onClick"])]}),_:2},1032,["message"]))),128)),_]),_:2},1024))),128)),n.linkButton.showBtn?(e.openBlock(),e.createBlock(d,{key:0,direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(f,{open:l.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,onClick:[n.onInputFocus,e.withModifiers(n.onInputFocus,["stop"])],onOpened:n.updateInput},{anchor:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{key:n.linkButton.key,message:n.linkButton.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var a,r;return[e.createVNode(u,{"data-qa":n.linkButton.dataQA,importance:"clear",kind:"muted",class:"d-ol-none",active:(r=(a=t.$refs.richTextEditor)==null?void 0:a.editor)==null?void 0:r.isActive(n.linkButton.selector),size:"xs","aria-label":n.linkButton.tooltipMessage,onClick:i[0]||(i[0]=h=>n.linkButton.onClick())},{icon:e.withCtx(()=>[e.createVNode(c,{name:n.linkButton.iconName,size:"200",class:"d-fw-bold"},null,8,["name"])]),_:1},8,["data-qa","active","aria-label"])]}),_:1},8,["message"]))]),content:e.withCtx(()=>[o.showAddLink.setLinkTitle.length>0?(e.openBlock(),e.createElementBlock("span",E,e.toDisplayString(o.showAddLink.setLinkTitle),1)):e.createCommentVNode("",!0),e.createVNode(B,{modelValue:l.linkInput,"onUpdate:modelValue":i[1]||(i[1]=a=>l.linkInput=a),"input-aria-label":o.showAddLink.setLinkInputAriaLabel,"data-qa":"dt-editor-link-input",placeholder:o.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",onClick:[n.onInputFocus,e.withModifiers(n.onInputFocus,["stop"])],onFocus:n.onInputFocus,onKeydown:e.withKeys(n.setLink,["enter"])},null,8,["modelValue","input-aria-label","placeholder","onClick","onFocus","onKeydown"])]),footerContent:e.withCtx(()=>[e.createElementVNode("div",N,[e.createVNode(u,{class:"d-mx2","aria-label":o.removeLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-remove-link-btn",onClick:n.removeLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.removeLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(u,{class:"d-mx2","aria-label":o.cancelSetLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-set-link-cancel-btn",onClick:n.closeLinkInput},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(u,{class:"d-mx2",size:"sm","aria-label":o.confirmSetLinkButton.ariaLabel,"data-qa":"dt-editor-set-link-confirm-btn",onClick:n.setLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.confirmSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"])])]),_:1},8,["open","onClick","onOpened"])]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",style:e.normalizeStyle({"max-height":o.maxHeight})},[e.createVNode(m,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":i[2]||(i[2]=a=>l.internalInputValue=a),"data-qa":"dt-rich-text-editor",editable:o.editable,"input-aria-label":o.inputAriaLabel,"input-class":`d-ml16 d-ol-none d-my6 ${o.inputClass}`,"output-format":n.htmlOutputFormat,"auto-focus":o.autoFocus,placeholder:o.placeholder,"allow-line-breaks":!0,link:!1},t.$attrs,{onFocus:n.onFocus,onBlur:n.onBlur,onInput:i[3]||(i[3]=a=>n.onInput(a))}),null,16,["modelValue","editable","input-aria-label","input-class","output-format","auto-focus","placeholder","onFocus","onBlur"])],4)])}const S=w._(I,[["render",v]]);exports.DtRecipeWysiwygEditor=S;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.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-3");
+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("@dialpad/dialtone-emojis");
+require("./skeleton.cjs");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("@tiptap/pm/state");
+require("@tiptap/suggestion");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("./item-layout.cjs");
+require("@dialpad/dialtone-icons/vue3");
+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("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("./lazy-show.cjs");
+require("../chunks/input-ttnte8zB.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
+  },
+  mixins: [],
+  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);
+    }
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "dt-editor--button-group-divider" }, null, -1);
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { class: "d-ml8 d-mr12" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
+  const _component_dt_stack = vue.resolveComponent("dt-stack");
+  const _component_dt_input = vue.resolveComponent("dt-input");
+  const _component_dt_popover = vue.resolveComponent("dt-popover");
+  const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "dt-editor",
+    role: "presentation",
+    class: "d-d-flex d-fd-column",
+    onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.richTextEditor.focusEditor())
+  }, [
+    vue.createVNode(_component_dt_stack, {
+      direction: "row",
+      gap: "450",
+      class: "d-p8 dt-editor--top-bar-background"
+    }, {
+      default: vue.withCtx(() => [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.buttonGroups, (buttonGroup) => {
+          return vue.openBlock(), vue.createBlock(_component_dt_stack, {
+            key: buttonGroup.key,
+            direction: "row",
+            gap: "300"
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonGroup.buttonGroup, (button) => {
+                return vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+                  key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
+                  message: button.tooltipMessage,
+                  placement: "top"
+                }, {
+                  anchor: vue.withCtx(() => {
+                    var _a, _b;
+                    return [
+                      vue.createVNode(_component_dt_button, {
+                        "data-qa": button.dataQA,
+                        importance: "clear",
+                        kind: "muted",
+                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector),
+                        size: "xs",
+                        "aria-label": button.tooltipMessage,
+                        class: vue.normalizeClass({ "d-btn--icon-only": !button.label }),
+                        onClick: ($event) => button.onClick()
+                      }, {
+                        icon: vue.withCtx(() => [
+                          vue.createVNode(_component_dt_icon, {
+                            name: button.iconName,
+                            size: "200"
+                          }, null, 8, ["name"])
+                        ]),
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(" " + vue.toDisplayString(button == null ? void 0 : button.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["message"]);
+              }), 128)),
+              _hoisted_1
+            ]),
+            _: 2
+          }, 1024);
+        }), 128)),
+        $options.linkButton.showBtn ? (vue.openBlock(), vue.createBlock(_component_dt_stack, {
+          key: 0,
+          direction: "row",
+          gap: "300"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_dt_popover, {
+              open: $data.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,
+              onClick: [
+                $options.onInputFocus,
+                vue.withModifiers($options.onInputFocus, ["stop"])
+              ],
+              onOpened: $options.updateInput
+            }, {
+              anchor: vue.withCtx(() => [
+                (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+                  key: $options.linkButton.key,
+                  message: $options.linkButton.tooltipMessage,
+                  placement: "top"
+                }, {
+                  anchor: vue.withCtx(() => {
+                    var _a, _b;
+                    return [
+                      vue.createVNode(_component_dt_button, {
+                        "data-qa": $options.linkButton.dataQA,
+                        importance: "clear",
+                        kind: "muted",
+                        class: "d-ol-none",
+                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive($options.linkButton.selector),
+                        size: "xs",
+                        "aria-label": $options.linkButton.tooltipMessage,
+                        onClick: _cache[0] || (_cache[0] = ($event) => $options.linkButton.onClick())
+                      }, {
+                        icon: vue.withCtx(() => [
+                          vue.createVNode(_component_dt_icon, {
+                            name: $options.linkButton.iconName,
+                            size: "200",
+                            class: "d-fw-bold"
+                          }, null, 8, ["name"])
+                        ]),
+                        _: 1
+                      }, 8, ["data-qa", "active", "aria-label"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["message"]))
+              ]),
+              content: vue.withCtx(() => [
+                $props.showAddLink.setLinkTitle.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString($props.showAddLink.setLinkTitle), 1)) : vue.createCommentVNode("", true),
+                vue.createVNode(_component_dt_input, {
+                  modelValue: $data.linkInput,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.linkInput = $event),
+                  "input-aria-label": $props.showAddLink.setLinkInputAriaLabel,
+                  "data-qa": "dt-editor-link-input",
+                  placeholder: $props.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",
+                  onClick: [
+                    $options.onInputFocus,
+                    vue.withModifiers($options.onInputFocus, ["stop"])
+                  ],
+                  onFocus: $options.onInputFocus,
+                  onKeydown: vue.withKeys($options.setLink, ["enter"])
+                }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
+              ]),
+              footerContent: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_3, [
+                  vue.createVNode(_component_dt_button, {
+                    class: "d-mx2",
+                    "aria-label": $props.removeLinkButton.ariaLabel,
+                    importance: "clear",
+                    kind: "muted",
+                    size: "sm",
+                    "data-qa": "dt-editor-remove-link-btn",
+                    onClick: $options.removeLink
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString($props.removeLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]),
+                  vue.createVNode(_component_dt_button, {
+                    class: "d-mx2",
+                    "aria-label": $props.cancelSetLinkButton.ariaLabel,
+                    importance: "clear",
+                    kind: "muted",
+                    size: "sm",
+                    "data-qa": "dt-editor-set-link-cancel-btn",
+                    onClick: $options.closeLinkInput
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString($props.cancelSetLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]),
+                  vue.createVNode(_component_dt_button, {
+                    class: "d-mx2",
+                    size: "sm",
+                    "aria-label": $props.confirmSetLinkButton.ariaLabel,
+                    "data-qa": "dt-editor-set-link-confirm-btn",
+                    onClick: $options.setLink
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString($props.confirmSetLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["open", "onClick", "onOpened"])
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("", true)
+      ]),
+      _: 1
+    }),
+    vue.createElementVNode("div", {
+      class: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",
+      style: vue.normalizeStyle({ "max-height": $props.maxHeight })
+    }, [
+      vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
+        ref: "richTextEditor",
+        modelValue: $data.internalInputValue,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.internalInputValue = $event),
+        "data-qa": "dt-rich-text-editor",
+        editable: $props.editable,
+        "input-aria-label": $props.inputAriaLabel,
+        "input-class": `d-ml16 d-ol-none d-my6 ${$props.inputClass}`,
+        "output-format": $options.htmlOutputFormat,
+        "auto-focus": $props.autoFocus,
+        placeholder: $props.placeholder,
+        "allow-line-breaks": true,
+        link: false
+      }, _ctx.$attrs, {
+        onFocus: $options.onFocus,
+        onBlur: $options.onBlur,
+        onInput: _cache[3] || (_cache[3] = ($event) => $options.onInput($event))
+      }), null, 16, ["modelValue", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "placeholder", "onFocus", "onBlur"])
+    ], 4)
+  ]);
+}
+const editor = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRecipeWysiwygEditor = editor;
 //# sourceMappingURL=editor.cjs.map