@dialpad/dialtone/dist/vue3/lib/editor/editor.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./editor-constants.cjs"),f=require("../../common/utils/index.cjs"),r=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),C=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),x=require("../rich-text-editor/rich-text-editor.cjs"),y=require("../button/button.cjs"),A=require("../popover/popover.cjs"),L=require("../stack/stack.cjs"),b=require("../input/input.cjs"),T=require("../tooltip/tooltip.cjs"),B=require("../rich-text-editor/rich-text-editor-constants.cjs"),_={compatConfig:{MODE:3},name:"DtRecipeEditor",components:{DtRichTextEditor:x.default,DtButton:y.default,DtPopover:A.default,DtStack:L.default,DtInput:b.default,DtTooltip:T.default,DtIconQuickReply:r.DtIconQuickReply,DtIconBold:r.DtIconBold,DtIconItalic:r.DtIconItalic,DtIconUnderline:r.DtIconUnderline,DtIconStrikethrough:r.DtIconStrikethrough,DtIconListBullet:r.DtIconListBullet,DtIconListOrdered:r.DtIconListOrdered,DtIconAlignLeft:r.DtIconAlignLeft,DtIconAlignCenter:r.DtIconAlignCenter,DtIconAlignRight:r.DtIconAlignRight,DtIconAlignJustify:r.DtIconAlignJustify,DtIconQuote:r.DtIconQuote,DtIconCodeBlock:r.DtIconCodeBlock,DtIconLink2:r.DtIconLink2,DtIconImage:r.DtIconImage},mixins:[],inheritAttrs:!1,props:{modelValue:{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"?B.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},showInlineImageButton:{type:Boolean,default:!1},showAddLink:{type:Object,default:()=>({showAddLinkButton:!0,setLinkTitle:"Add a link",setLinkInputAriaLabel:"Input field to add link"})},useDivTags:{type:Boolean,default:!1}},emits:["focus","blur","input","update:modelValue","quick-replies-click","inline-image-click","text-input"],data(){return{internalInputValue:this.modelValue,hasFocus:!1,linkOptions:{class:"d-recipe-editor__link"},showLinkInput:!1,linkInput:"",currentButtonRefIndex:0}},computed:{inputLength(){return this.internalInputValue.length},htmlOutputFormat(){return B.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},orderedRefs(){const t=this.buttonGroups.reduce((function(i,n){return n.buttonGroup.forEach(l=>{i.push(this.getButtonRef(n.key,l.selector))},this),i}).bind(this),[]);return t.push(this.getButtonRef("custom","link")),t},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",icon:r.DtIconQuickReply,dataQA:"dt-recipe-editor-quick-replies-btn",tooltipMessage:"Quick Reply",onClick:this.onQuickRepliesClick}].filter(t=>t.showBtn)},textFormatButtons(){return[{showBtn:this.showBoldButton,selector:"bold",icon:r.DtIconBold,dataQA:"dt-recipe-editor-bold-btn",tooltipMessage:"Bold",onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,selector:"italic",icon:r.DtIconItalic,dataQA:"dt-recipe-editor-italics-btn",tooltipMessage:"Italics",onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,selector:"underline",icon:r.DtIconUnderline,dataQA:"dt-recipe-editor-underline-btn",tooltipMessage:"Underline",onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,selector:"strike",icon:r.DtIconStrikethrough,dataQA:"dt-recipe-editor-strike-btn",tooltipMessage:"Strike",onClick:this.onStrikethroughTextToggle}].filter(t=>t.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,selector:{textAlign:"left"},icon:r.DtIconAlignLeft,dataQA:"dt-recipe-editor-align-left-btn",tooltipMessage:"Align Left",onClick:()=>this.onTextAlign("left")},{showBtn:this.showAlignCenterButton,selector:{textAlign:"center"},icon:r.DtIconAlignCenter,dataQA:"dt-recipe-editor-align-center-btn",tooltipMessage:"Align Center",onClick:()=>this.onTextAlign("center")},{showBtn:this.showAlignRightButton,selector:{textAlign:"right"},icon:r.DtIconAlignRight,dataQA:"dt-recipe-editor-align-right-btn",tooltipMessage:"Align Right",onClick:()=>this.onTextAlign("right")},{showBtn:this.showAlignJustifyButton,selector:{textAlign:"justify"},icon:r.DtIconAlignJustify,dataQA:"dt-recipe-editor-align-justify-btn",tooltipMessage:"Align Justify",onClick:()=>this.onTextAlign("justify")}].filter(t=>t.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,selector:"bulletList",icon:r.DtIconListBullet,dataQA:"dt-recipe-editor-list-items-btn",tooltipMessage:"Bullet List",onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,selector:"orderedList",icon:r.DtIconListOrdered,dataQA:"dt-recipe-editor-ordered-list-items-btn",tooltipMessage:"Ordered List",onClick:this.onOrderedListToggle}].filter(t=>t.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,selector:"blockquote",icon:r.DtIconQuote,dataQA:"dt-recipe-editor-blockquote-btn",tooltipMessage:"Quote",onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,selector:"codeBlock",icon:r.DtIconCodeBlock,dataQA:"dt-recipe-editor-code-block-btn",tooltipMessage:"Code",onClick:this.onCodeBlockToggle},{showBtn:this.showInlineImageButton,selector:"image",icon:r.DtIconImage,dataQA:"dt-recipe-editor-inline-image-btn",tooltipMessage:"Image",onClick:this.onInsertInlineImageClick}].filter(t=>t.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,selector:"link",icon:r.DtIconLink2,dataQA:"dt-recipe-editor-add-link-btn",tooltipMessage:"Link",onClick:this.openLinkInput}}},watch:{modelValue(t){this.internalInputValue=t}},methods:{removeClassStyleAttrs:f.removeClassStyleAttrs,addClassStyleAttrs:f.addClassStyleAttrs,onInputFocus(t){t==null||t.stopPropagation()},removeLink(){var t,i,n,l,s;(s=(l=(n=(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.chain())==null?void 0:n.focus())==null?void 0:l.unsetLink())==null||s.run(),this.closeLinkInput()},setLink(t){var s,o,c;const i=(s=this.$refs.richTextEditor)==null?void 0:s.editor;if(t==null||t.preventDefault(),t==null||t.stopPropagation(),!this.linkInput){this.removeLink();return}g.EDITOR_SUPPORTED_LINK_PROTOCOLS.find(d=>d.test(this.linkInput))||(this.linkInput=`${g.EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`);const l=(c=(o=i==null?void 0:i.view)==null?void 0:o.state)==null?void 0:c.selection;l.anchor===l.head?i.chain().focus().insertContentAt(l.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,n,l;if(!t)return this.closeLinkInput();this.linkInput=(l=(n=(i=this.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:n.getAttributes("link"))==null?void 0:l.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,n,l,s;if((n=(i=this.$refs.richTextEditor)==null?void 0:i.editor)!=null&&n.isActive({textAlign:t}))return(l=this.$refs.richTextEditor)==null?void 0:l.editor.chain().focus().unsetTextAlign().run();(s=this.$refs.richTextEditor)==null||s.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")},onInsertInlineImageClick(){this.$emit("inline-image-click")},insertInlineImage(t){var i;(i=this.$refs.richTextEditor)==null||i.editor.chain().focus().setImage({src:t}).run()},insertInMessageBody(t){var i;(i=this.$refs.richTextEditor)==null||i.editor.chain().focus().insertContent(t).run()},setCursorPosition(t=null){var i;(i=this.$refs.richTextEditor)==null||i.editor.chain().focus(t).run()},onBlockquoteToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleBlockquote().run()},onTextInput(t){this.$emit("text-input",t)},onFocus(t){this.hasFocus=!0,this.$emit("focus",t)},onBlur(t){this.hasFocus=!1,this.$emit("blur",t)},onInput(t){this.$emit("input",t),this.$emit("update:modelValue",t)},getButtonKey(t,i){return`${t}-${JSON.stringify(i)}`},getButtonRef(t,i){return`${this.getButtonKey(t,i)}-ref`},canFocus(t){return t===this.orderedRefs[this.currentButtonRefIndex]},shiftActionBarFocusRight(){this.shiftButtonRefIndex(1)},shiftActionBarFocusLeft(){this.shiftButtonRefIndex(-1)},shiftButtonRefIndex(t){const i=this.$refs[this.orderedRefs[this.currentButtonRefIndex]],n=Array.isArray(i)?i[0]:i,l=(this.currentButtonRefIndex+t)%this.orderedRefs.length;this.currentButtonRefIndex=l>=0?l:this.orderedRefs.length+l;const s=this.$refs[this.orderedRefs[this.currentButtonRefIndex]],o=Array.isArray(s)?s[0]:s;n.$el.blur(),o.$el.focus()}}},D=e.createElementVNode("div",{class:"d-recipe-editor__button-group-divider"},null,-1),R={class:"d-recipe-editor__popover-content"},v={key:0};function E(t,i,n,l,s,o){const c=e.resolveComponent("dt-button"),d=e.resolveComponent("dt-tooltip"),h=e.resolveComponent("dt-stack"),m=e.resolveComponent("dt-input"),I=e.resolveComponent("dt-popover"),w=e.resolveComponent("dt-rich-text-editor");return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"d-recipe-editor"},o.addClassStyleAttrs(t.$attrs),{"data-qa":"dt-recipe-editor",role:"presentation",onClick:i[4]||(i[4]=u=>t.$refs.richTextEditor.focusEditor())}),[e.createVNode(h,{class:"d-recipe-editor__top-bar",direction:"row",gap:"450"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.buttonGroups,u=>(e.openBlock(),e.createBlock(h,{key:u.key,direction:"row",gap:"300"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.buttonGroup,a=>(e.openBlock(),e.createBlock(d,{key:o.getButtonKey(u.key,a.selector),message:a.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var p,k;return[e.createVNode(c,{ref_for:!0,ref:o.getButtonRef(u.key,a.selector),active:(k=(p=t.$refs.richTextEditor)==null?void 0:p.editor)==null?void 0:k.isActive(a.selector),"aria-label":a.tooltipMessage,"data-qa":a.dataQA,tabindex:o.canFocus(o.getButtonRef(u.key,a.selector))?0:-1,importance:"clear",kind:"muted",size:"xs",onClick:O=>a.onClick(),onKeydown:[e.withKeys(e.withModifiers(o.shiftActionBarFocusRight,["stop"]),["right"]),e.withKeys(e.withModifiers(o.shiftActionBarFocusLeft,["stop"]),["left"])]},{icon:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.icon),{size:"200"}))]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(a==null?void 0:a.label),1)]),_:2},1032,["active","aria-label","data-qa","tabindex","onClick","onKeydown"])]}),_:2},1032,["message"]))),128)),D]),_:2},1024))),128)),o.linkButton.showBtn?(e.openBlock(),e.createBlock(h,{key:0,direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(I,{open:s.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",onClick:[o.onInputFocus,e.withModifiers(o.onInputFocus,["stop"])],onOpened:o.updateInput},{anchor:e.withCtx(()=>[(e.openBlock(),e.createBlock(d,{key:o.linkButton.key,message:o.linkButton.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var u,a;return[e.createVNode(c,{ref:o.getButtonRef("custom","link"),active:(a=(u=t.$refs.richTextEditor)==null?void 0:u.editor)==null?void 0:a.isActive(o.linkButton.selector),"aria-label":o.linkButton.tooltipMessage,"data-qa":o.linkButton.dataQA,tabindex:o.canFocus(o.getButtonRef("custom","link"))?0:-1,importance:"clear",kind:"muted",size:"xs",onClick:i[0]||(i[0]=p=>o.linkButton.onClick()),onKeydown:[e.withKeys(e.withModifiers(o.shiftActionBarFocusRight,["stop"]),["right"]),e.withKeys(e.withModifiers(o.shiftActionBarFocusLeft,["stop"]),["left"])]},{icon:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.linkButton.icon),{size:"200"}))]),_:1},8,["active","aria-label","data-qa","tabindex","onKeydown"])]}),_:1},8,["message"]))]),content:e.withCtx(()=>[e.createElementVNode("div",R,[n.showAddLink.setLinkTitle.length>0?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(n.showAddLink.setLinkTitle),1)):e.createCommentVNode("",!0),e.createVNode(m,{modelValue:s.linkInput,"onUpdate:modelValue":i[1]||(i[1]=u=>s.linkInput=u),"input-aria-label":n.showAddLink.setLinkInputAriaLabel,placeholder:n.setLinkPlaceholder,"data-qa":"dt-recipe-editor-link-input","input-wrapper-class":"d-recipe-editor-link__input-wrapper",onClick:[o.onInputFocus,e.withModifiers(o.onInputFocus,["stop"])],onFocus:o.onInputFocus,onKeydown:e.withKeys(o.setLink,["enter"])},null,8,["modelValue","input-aria-label","placeholder","onClick","onFocus","onKeydown"])])]),footerContent:e.withCtx(()=>[e.createVNode(h,{direction:"row",gap:"300",class:"d-recipe-editor__popover-footer"},{default:e.withCtx(()=>[e.createVNode(c,{"aria-label":n.removeLinkButton.ariaLabel,"data-qa":"dt-recipe-editor-remove-link-btn",importance:"clear",kind:"muted",size:"sm",onClick:o.removeLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.removeLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(c,{"aria-label":n.cancelSetLinkButton.ariaLabel,"data-qa":"dt-recipe-editor-set-link-cancel-btn",importance:"clear",kind:"muted",size:"sm",onClick:o.closeLinkInput},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.cancelSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(c,{"aria-label":n.confirmSetLinkButton.ariaLabel,"data-qa":"dt-recipe-editor-set-link-confirm-btn",size:"sm",onClick:o.setLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.confirmSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"])]),_:1})]),_:1},8,["open","onClick","onOpened"])]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("div",{style:e.normalizeStyle({"max-height":n.maxHeight}),class:"d-recipe-editor__content"},[e.createVNode(w,e.mergeProps({ref:"richTextEditor",modelValue:s.internalInputValue,"onUpdate:modelValue":i[2]||(i[2]=u=>s.internalInputValue=u),"allow-font-color":!0,"allow-font-family":!0,"allow-inline-images":!0,"allow-line-breaks":!0,"hide-link-bubble-menu":!0,"auto-focus":n.autoFocus,editable:n.editable,"input-aria-label":n.inputAriaLabel,"input-class":`d-recipe-editor__content-input ${n.inputClass}`,link:!0,"output-format":o.htmlOutputFormat,placeholder:n.placeholder,"use-div-tags":n.useDivTags,"data-qa":"dt-rich-text-editor"},o.removeClassStyleAttrs(t.$attrs),{onTextInput:o.onTextInput,onBlur:o.onBlur,onFocus:o.onFocus,onInput:i[3]||(i[3]=u=>o.onInput(u))}),null,16,["modelValue","auto-focus","editable","input-aria-label","input-class","output-format","placeholder","use-div-tags","onTextInput","onBlur","onFocus"])],4)],16)}const S=C._(_,[["render",E]]);exports.default=S;
//# sourceMappingURL=editor.cjs.map