@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"),n=require("@dialpad/dialtone-icons/vue3"),L=require("../../localization/index.cjs"),e=require("vue"),m=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),A=require("../tooltip/tooltip.cjs"),E=require("../input/input.cjs"),w=require("../stack/stack.cjs"),D=require("../popover/popover.cjs"),x=require("../button/button.cjs"),C=require("../rich-text-editor/rich-text-editor.cjs"),k=require("../rich-text-editor/rich-text-editor-constants.cjs"),O={compatConfig:{MODE:3},name:"DtRecipeEditor",components:{DtRichTextEditor:C.default,DtButton:x.default,DtPopover:D.default,DtStack:w.default,DtInput:E.default,DtTooltip:A.default,DtIconQuickReply:n.DtIconQuickReply,DtIconBold:n.DtIconBold,DtIconItalic:n.DtIconItalic,DtIconUnderline:n.DtIconUnderline,DtIconStrikethrough:n.DtIconStrikethrough,DtIconListBullet:n.DtIconListBullet,DtIconListOrdered:n.DtIconListOrdered,DtIconAlignLeft:n.DtIconAlignLeft,DtIconAlignCenter:n.DtIconAlignCenter,DtIconAlignRight:n.DtIconAlignRight,DtIconAlignJustify:n.DtIconAlignJustify,DtIconQuote:n.DtIconQuote,DtIconCodeBlock:n.DtIconCodeBlock,DtIconLink2:n.DtIconLink2,DtIconImage:n.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"?k.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},placeholder:{type:String,default:""},maxHeight:{type:String,default:"unset"},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})},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,i18n:new L.DialtoneLocalization}},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},orderedRefs(){const t=this.buttonGroups.reduce((function(i,r){return r.buttonGroup.forEach(s=>{i.push(this.getButtonRef(r.key,s.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:this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),selector:"quickReplies",icon:n.DtIconQuickReply,dataQA:"dt-recipe-editor-quick-replies-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),onClick:this.onQuickRepliesClick}].filter(t=>t.showBtn)},textFormatButtons(){return[{showBtn:this.showBoldButton,selector:"bold",icon:n.DtIconBold,dataQA:"dt-recipe-editor-bold-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,selector:"italic",icon:n.DtIconItalic,dataQA:"dt-recipe-editor-italics-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,selector:"underline",icon:n.DtIconUnderline,dataQA:"dt-recipe-editor-underline-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,selector:"strike",icon:n.DtIconStrikethrough,dataQA:"dt-recipe-editor-strike-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),onClick:this.onStrikethroughTextToggle}].filter(t=>t.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,selector:{textAlign:"left"},icon:n.DtIconAlignLeft,dataQA:"dt-recipe-editor-align-left-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),onClick:()=>this.onTextAlign("left")},{showBtn:this.showAlignCenterButton,selector:{textAlign:"center"},icon:n.DtIconAlignCenter,dataQA:"dt-recipe-editor-align-center-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),onClick:()=>this.onTextAlign("center")},{showBtn:this.showAlignRightButton,selector:{textAlign:"right"},icon:n.DtIconAlignRight,dataQA:"dt-recipe-editor-align-right-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),onClick:()=>this.onTextAlign("right")},{showBtn:this.showAlignJustifyButton,selector:{textAlign:"justify"},icon:n.DtIconAlignJustify,dataQA:"dt-recipe-editor-align-justify-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),onClick:()=>this.onTextAlign("justify")}].filter(t=>t.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,selector:"bulletList",icon:n.DtIconListBullet,dataQA:"dt-recipe-editor-list-items-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,selector:"orderedList",icon:n.DtIconListOrdered,dataQA:"dt-recipe-editor-ordered-list-items-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),onClick:this.onOrderedListToggle}].filter(t=>t.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,selector:"blockquote",icon:n.DtIconQuote,dataQA:"dt-recipe-editor-blockquote-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,selector:"codeBlock",icon:n.DtIconCodeBlock,dataQA:"dt-recipe-editor-code-block-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),onClick:this.onCodeBlockToggle},{showBtn:this.showInlineImageButton,selector:"image",icon:n.DtIconImage,dataQA:"dt-recipe-editor-inline-image-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),onClick:this.onInsertInlineImageClick}].filter(t=>t.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,selector:"link",icon:n.DtIconLink2,dataQA:"dt-recipe-editor-add-link-btn",tooltipMessage:this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),onClick:this.openLinkInput}},confirmSetLinkButtonLabels(){return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON")},cancelSetLinkButtonLabels(){return this.i18n.$ta("DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON")},removeLinkButtonLabels(){return this.i18n.$ta("DIALTONE_EDITOR_REMOVE_LINK_BUTTON")},showAddLinkButtonLabels(){return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON")}},watch:{modelValue(t){this.internalInputValue=t}},methods:{removeClassStyleAttrs:f.removeClassStyleAttrs,addClassStyleAttrs:f.addClassStyleAttrs,onInputFocus(t){t==null||t.stopPropagation()},removeLink(){var t,i,r,s,l;(l=(s=(r=(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.chain())==null?void 0:r.focus())==null?void 0:s.unsetLink())==null||l.run(),this.closeLinkInput()},setLink(t){var l,o,a;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}g.EDITOR_SUPPORTED_LINK_PROTOCOLS.find(d=>d.test(this.linkInput))||(this.linkInput=`${g.EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`);const s=(a=(o=i==null?void 0:i.view)==null?void 0:o.state)==null?void 0:a.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,r,s;if(!t)return this.closeLinkInput();this.linkInput=(s=(r=(i=this.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:r.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,r,s,l;if((r=(i=this.$refs.richTextEditor)==null?void 0:i.editor)!=null&&r.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")},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]],r=Array.isArray(i)?i[0]:i,s=(this.currentButtonRefIndex+t)%this.orderedRefs.length;this.currentButtonRefIndex=s>=0?s:this.orderedRefs.length+s;const l=this.$refs[this.orderedRefs[this.currentButtonRefIndex]],o=Array.isArray(l)?l[0]:l;r.$el.blur(),o.$el.focus()}}},y=e.createElementVNode("div",{class:"d-recipe-editor__button-group-divider"},null,-1),R={class:"d-recipe-editor__popover-content"};function b(t,i,r,s,l,o){const a=e.resolveComponent("dt-button"),d=e.resolveComponent("dt-tooltip"),h=e.resolveComponent("dt-stack"),I=e.resolveComponent("dt-input"),T=e.resolveComponent("dt-popover"),_=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,c=>(e.openBlock(),e.createBlock(d,{key:o.getButtonKey(u.key,c.selector),message:c.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var p,B;return[e.createVNode(a,{ref_for:!0,ref:o.getButtonRef(u.key,c.selector),active:(B=(p=t.$refs.richTextEditor)==null?void 0:p.editor)==null?void 0:B.isActive(c.selector),"aria-label":c.tooltipMessage,"data-qa":c.dataQA,tabindex:o.canFocus(o.getButtonRef(u.key,c.selector))?0:-1,importance:"clear",kind:"muted",size:"xs",onClick:S=>c.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(c.icon),{size:"200"}))]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(c==null?void 0:c.label),1)]),_:2},1032,["active","aria-label","data-qa","tabindex","onClick","onKeydown"])]}),_:2},1032,["message"]))),128)),y]),_:2},1024))),128)),o.linkButton.showBtn?(e.openBlock(),e.createBlock(h,{key:0,direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(T,{open:l.showLinkInput,"show-close-button":!1,"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,c;return[e.createVNode(a,{ref:o.getButtonRef("custom","link"),active:(c=(u=t.$refs.richTextEditor)==null?void 0:u.editor)==null?void 0:c.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,[e.createElementVNode("span",null,e.toDisplayString(o.showAddLinkButtonLabels.title),1),e.createVNode(I,{modelValue:l.linkInput,"onUpdate:modelValue":i[1]||(i[1]=u=>l.linkInput=u),"input-aria-label":o.showAddLinkButtonLabels["aria-label"],placeholder:r.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(a,e.mergeProps({"data-qa":"dt-recipe-editor-remove-link-btn",importance:"clear",kind:"muted",size:"sm"},o.removeLinkButtonLabels,{onClick:o.removeLink}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.removeLinkButtonLabels.title),1)]),_:1},16,["onClick"]),e.createVNode(a,e.mergeProps({"data-qa":"dt-recipe-editor-set-link-cancel-btn",importance:"clear",kind:"muted",size:"sm"},o.cancelSetLinkButtonLabels,{onClick:o.closeLinkInput}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelSetLinkButtonLabels.title),1)]),_:1},16,["onClick"]),e.createVNode(a,e.mergeProps({"data-qa":"dt-recipe-editor-set-link-confirm-btn",size:"sm"},o.confirmSetLinkButtonLabels,{onClick:o.setLink}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.confirmSetLinkButtonLabels.title),1)]),_:1},16,["onClick"])]),_:1})]),_:1},8,["open","onClick","onOpened"])]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("div",{style:e.normalizeStyle({"max-height":r.maxHeight}),class:"d-recipe-editor__content"},[e.createVNode(_,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":i[2]||(i[2]=u=>l.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":r.autoFocus,editable:r.editable,"input-aria-label":r.inputAriaLabel,"input-class":`d-recipe-editor__content-input ${r.inputClass}`,link:!0,"output-format":o.htmlOutputFormat,placeholder:r.placeholder,"use-div-tags":r.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 N=m._(O,[["render",b]]);exports.default=N;
//# sourceMappingURL=editor.cjs.map