@dialpad/dialtone/dist/vue3/lib/message-input/message-input.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./last-active-nodes.cjs"),k=require("../../common/utils/index.cjs"),f=require("@tiptap/core"),_=require("../../node_modules/@tiptap/vue-3.cjs"),d=require("@dialpad/dialtone-icons/vue3"),T=require("../../localization/index.cjs"),e=require("vue"),B=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),v=require("../button/button.cjs"),j=require("../item-layout/item-layout.cjs"),V=require("./message-input-topbar.cjs"),N=require("./message-input-link.cjs"),S=require("../editor/editor-constants.cjs"),A=require("../stack/stack.cjs"),M=require("../tooltip/tooltip.cjs"),q=require("../rich-text-editor/rich-text-editor.cjs"),F=require("../popover/popover.cjs"),R=require("../input/input.cjs"),z=require("../emoji-picker/emoji-picker.cjs"),C=require("../rich-text-editor/rich-text-editor-constants.cjs"),U={name:"MeetingPill",components:{NodeViewWrapper:_.NodeViewWrapper,DtItemLayout:j.default,DtIconClose:d.DtIconClose,DtButton:v.default,DtIconVideo:d.DtIconVideo},props:_.nodeViewProps,emits:["meeting-pill-close"],data(){return{i18n:new T.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{close(i){var o,r,l;const t=(l=(r=(o=this.editor)==null?void 0:o.storage)==null?void 0:r.meetingPill)==null?void 0:l.onClose;t&&typeof t=="function"&&t(i)}}},H={class:"d-recipe-message-input-meeting-pill__icon"},G={class:"d-recipe-message-input-meeting-pill__close"};function W(i,t,o,r,l,n){const m=e.resolveComponent("dt-icon-video"),p=e.resolveComponent("dt-icon-close"),h=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-item-layout"),a=e.resolveComponent("node-view-wrapper");return e.openBlock(),e.createBlock(a,{class:"d-recipe-message-input-meeting-pill"},{default:e.withCtx(()=>[e.createVNode(g,{class:"d-recipe-message-input-meeting-pill__layout",unstyled:""},{left:e.withCtx(()=>[e.createElementVNode("div",H,[e.createVNode(m,{size:"400"})])]),right:e.withCtx(()=>[e.createElementVNode("div",G,[e.createVNode(h,{circle:"",importance:"clear",size:"xs","aria-label":n.closeButtonTitle,title:n.closeButtonTitle,onClick:n.close},{icon:e.withCtx(()=>[e.createVNode(p,{size:"300"})]),_:1},8,["aria-label","title","onClick"])])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(i.node.attrs.text)+" ",1)]),_:1})]),_:1})}const K=B._(U,[["render",W]]),X=f.Node.create({name:"meetingPill",atom:!0,group:"inline",inline:!0,addOptions(){return{onClose:()=>{}}},addStorage(){return{onClose:this.options.onClose}},addNodeView(){return _.VueNodeViewRenderer(K)},addAttributes(){return{text:{default:'Please pass in "text" attribute'}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText(){return"/dpm"},renderHTML({HTMLAttributes:i}){return["meeting-pill",f.mergeAttributes(i)]}}),Q={compatConfig:{MODE:3},name:"DtRecipeMessageInput",components:{DtButton:v.default,DtEmojiPicker:z.default,DtInput:R.default,DtPopover:F.default,DtRecipeMessageInputTopbar:V.default,DtRecipeMessageInputLink:N.default,DtRichTextEditor:q.default,DtTooltip:M.default,DtStack:A.default,DtIconImage:d.DtIconImage,DtIconVerySatisfied:d.DtIconVerySatisfied,DtIconSatisfied:d.DtIconSatisfied,DtIconSend:d.DtIconSend},inheritAttrs:!1,props:{richText:{type:Boolean,default:!0},modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},preventTyping:{type:Boolean,default:!1},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(i){return typeof i=="string"?C.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(i):!0}},outputFormat:{type:String,default:"json",validator(i){return C.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(i)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({})},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + K",linkPlaceholder:"e.g. https://www.dialpad.com"})},bulletListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Alt + C"})}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","selected-command","meeting-pill-close","update:modelValue","text-input","add-emoji"],data(){return{lastActiveNodes:P.default,additionalExtensions:[X.configure({onClose:i=>{this.$emit("meeting-pill-close",i)}})],internalInputValue:this.modelValue,imagePickerFocus:!1,emojiPickerFocus:!1,emojiPickerOpened:!1,isFocused:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},linkDialogOpen:!1,selectedText:"",text:"",hideLinkBubbleMenu:!1,i18n:new T.DialtoneLocalization}},computed:{showSendIcon(){return!this.showSend.text},inputLength(){return this.text.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"},sendButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL")},imagePickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL")},emojiPickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL")}},watch:{modelValue(i){this.internalInputValue=i},emojiPickerOpened(i){var t;i||(t=this.$refs.richTextEditor)==null||t.focusEditor()}},created(){this.modelValue&&this.outputFormat==="text"?this.internalInputValue=this.modelValue.replace(/\n/g,"<br>"):this.internalInputValue=this.modelValue},methods:{removeClassStyleAttrs:k.removeClassStyleAttrs,addClassStyleAttrs:k.addClassStyleAttrs,linkDialogOpened(i){var t;this.linkDialogOpen=i,i===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(t=this.$refs.richTextEditor)==null||t.focusEditor())},handleTopbarClick(i){var r;const t=(r=this.$refs.richTextEditor)==null?void 0:r.editor,o={bold:()=>t==null?void 0:t.chain().focus().toggleBold().run(),italic:()=>t==null?void 0:t.chain().focus().toggleItalic().run(),strike:()=>t==null?void 0:t.chain().focus().toggleStrike().run(),bulletList:()=>t==null?void 0:t.chain().focus().toggleBulletList().run(),orderedList:()=>t==null?void 0:t.chain().focus().toggleOrderedList().run(),blockquote:()=>t==null?void 0:t.chain().focus().toggleBlockquote().run(),code:()=>t==null?void 0:t.chain().focus().toggleCode().run(),codeBlock:()=>t==null?void 0:t.chain().focus().toggleCodeBlock().run()};t&&o[i]&&o[i]()},isSelectionActive(i){var t,o,r,l;return["bulletList","orderedList"].includes(i)?this.lastActiveNodes((o=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:o.state,[{type:"bulletList"},{type:"orderedList"}]).includes(i)&&this.isFocused:((l=(r=this.$refs.richTextEditor)==null?void 0:r.editor)==null?void 0:l.isActive(i))&&this.isFocused},initLinkDialog(){var i,t,o;this.$refs.link.setInitialValues(this.selectedText,(o=(t=(i=this.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:t.getAttributes("link"))==null?void 0:o.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var i;(i=this.$refs.richTextEditor)==null||i.removeLink(),this.linkDialogOpen=!1},setLink(i,t){this.$refs.richTextEditor.setLink(t,i,this.linkOptions,S.EDITOR_SUPPORTED_LINK_PROTOCOLS,S.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(i){k.returnFirstEl(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(i.target)||(i.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(i){const t=i.dataTransfer,o=Array.from(t.files);this.$emit("add-media",o)},onPaste(i){if(i.clipboardData.files.length){i.stopPropagation(),i.preventDefault();const t=[...i.clipboardData.files];this.$emit("paste-media",t)}},onSkinTone(i){this.$emit("skin-tone",i)},onSelectEmoji(i,t){i&&(i.shift_key||t(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:i.shortname}}),this.$emit("selected-emoji",i))},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onInput(i){this.$emit("update:modelValue",i)},onTextInput(i){this.text=i,this.$emit("text-input",i)}}},J={class:"d-recipe-message-input__bottom-section"},Y={class:"d-recipe-message-input__bottom-section-left"},Z={class:"d-recipe-message-input__bottom-section-right"},$={class:"d-recipe-message-input__sms-count"},ee={key:0};function te(i,t,o,r,l,n){const m=e.resolveComponent("dt-recipe-message-input-link"),p=e.resolveComponent("dt-recipe-message-input-topbar"),h=e.resolveComponent("dt-rich-text-editor"),g=e.resolveComponent("dt-icon-image"),a=e.resolveComponent("dt-button"),L=e.resolveComponent("dt-input"),I=e.resolveComponent("dt-icon-very-satisfied"),w=e.resolveComponent("dt-icon-satisfied"),y=e.resolveComponent("dt-emoji-picker"),E=e.resolveComponent("dt-popover"),b=e.resolveComponent("dt-stack"),x=e.resolveComponent("dt-tooltip"),O=e.resolveComponent("dt-icon-send"),D=e.resolveDirective("dt-scrollbar"),u=e.resolveDirective("dt-tooltip");return e.openBlock(),e.createElementBlock("div",e.mergeProps({"data-qa":"dt-recipe-message-input",role:"presentation",class:"d-recipe-message-input"},n.addClassStyleAttrs(i.$attrs),{onDragover:t[14]||(t[14]=e.withModifiers(()=>{},["prevent"])),onDrop:t[15]||(t[15]=e.withModifiers((...s)=>n.onDrop&&n.onDrop(...s),["prevent"])),onPaste:t[16]||(t[16]=(...s)=>n.onPaste&&n.onPaste(...s)),onMousedown:t[17]||(t[17]=(...s)=>n.onMousedown&&n.onMousedown(...s))}),[e.renderSlot(i.$slots,"top"),o.richText?(e.openBlock(),e.createBlock(p,{key:l.selectedText,"bold-button-options":o.boldButtonOptions,"italic-button-options":o.italicButtonOptions,"strike-button-options":o.strikeButtonOptions,"bullet-list-button-options":o.bulletListButtonOptions,"ordered-list-button-options":o.orderedListButtonOptions,"block-quote-button-options":o.blockQuoteButtonOptions,"code-button-options":o.codeButtonOptions,"code-block-button-options":o.codeBlockButtonOptions,"is-selection-active":n.isSelectionActive,onClick:n.handleTopbarClick},{link:e.withCtx(()=>[e.createVNode(m,{ref:"link",open:l.linkDialogOpen,"link-button-options":o.linkButtonOptions,"is-selection-active":n.isSelectionActive,onOpened:n.linkDialogOpened,onSetLink:n.setLink,onRemoveLink:n.removeLink},null,8,["open","link-button-options","is-selection-active","onOpened","onSetLink","onRemoveLink"])]),_:1},8,["bold-button-options","italic-button-options","strike-button-options","bullet-list-button-options","ordered-list-button-options","block-quote-button-options","code-button-options","code-block-button-options","is-selection-active","onClick"])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:"d-recipe-message-input__editor-wrapper",style:e.normalizeStyle({"max-height":o.maxHeight})},[e.createVNode(h,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=s=>l.internalInputValue=s),"allow-blockquote":o.richText,"allow-bold":o.richText,"allow-bullet-list":o.richText,"allow-code":o.richText,"allow-codeblock":o.richText,"allow-italic":o.richText,"allow-strike":o.richText,"allow-underline":o.richText,"paste-rich-text":o.richText,editable:o.editable,"input-aria-label":o.inputAriaLabel,"input-class":o.inputClass,"output-format":o.outputFormat,"auto-focus":o.autoFocus,link:o.richText,placeholder:o.placeholder,"prevent-typing":o.preventTyping,"mention-suggestion":o.mentionSuggestion,"channel-suggestion":o.channelSuggestion,"slash-command-suggestion":o.slashCommandSuggestion,"additional-extensions":l.additionalExtensions,"hide-link-bubble-menu":l.hideLinkBubbleMenu},n.removeClassStyleAttrs(i.$attrs),{onInput:n.onInput,onTextInput:n.onTextInput,onEnter:n.onSend,onSelected:t[1]||(t[1]=s=>l.selectedText=s),onSelectedCommand:t[2]||(t[2]=s=>i.$emit("selected-command",s)),onEditLink:n.initLinkDialog,onFocus:t[3]||(t[3]=s=>l.isFocused=!0),onBlur:t[4]||(t[4]=s=>l.isFocused=!1)}),null,16,["modelValue","allow-blockquote","allow-bold","allow-bullet-list","allow-code","allow-codeblock","allow-italic","allow-strike","allow-underline","paste-rich-text","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","prevent-typing","mention-suggestion","channel-suggestion","slash-command-suggestion","additional-extensions","hide-link-bubble-menu","onInput","onTextInput","onEnter","onEditLink"])],4)),[[D]]),e.renderSlot(i.$slots,"middle"),e.createElementVNode("section",J,[e.createElementVNode("div",Y,[e.createVNode(b,{gap:"200",direction:"row"},{default:e.withCtx(()=>[o.showImagePicker?e.withDirectives((e.openBlock(),e.createBlock(a,{key:0,"data-qa":"dt-recipe-message-input-image-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":n.imagePickerButtonLabel,onClick:n.onSelectImage,onMouseenter:t[5]||(t[5]=s=>l.imagePickerFocus=!0),onMouseleave:t[6]||(t[6]=s=>l.imagePickerFocus=!1),onFocus:t[7]||(t[7]=s=>l.imagePickerFocus=!0),onBlur:t[8]||(t[8]=s=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(g,{size:"300"})]),_:1},8,["aria-label","onClick"])),[[u,n.imagePickerButtonLabel,"top-start"]]):e.createCommentVNode("",!0),e.createVNode(L,{ref:"messageInputImageUpload","data-qa":"dt-recipe-message-input-image-input",accept:"image/*, video/*",type:"file",class:"d-recipe-message-input__image-input",multiple:"",hidden:"",onInput:n.onImageUpload},null,8,["onInput"]),o.showEmojiPicker?(e.openBlock(),e.createBlock(E,{key:1,"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},{anchor:e.withCtx(({attrs:s})=>[e.withDirectives((e.openBlock(),e.createBlock(a,e.mergeProps(s,{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":n.emojiPickerButtonLabel,onClick:n.toggleEmojiPicker,onMouseenter:t[9]||(t[9]=c=>l.emojiPickerFocus=!0),onMouseleave:t[10]||(t[10]=c=>l.emojiPickerFocus=!1),onFocus:t[11]||(t[11]=c=>l.emojiPickerFocus=!0),onBlur:t[12]||(t[12]=c=>l.emojiPickerFocus=!1)}),{icon:e.withCtx(()=>[n.emojiPickerHovered?(e.openBlock(),e.createBlock(I,{key:0,size:"300"})):(e.openBlock(),e.createBlock(w,{key:1,size:"300"}))]),_:2},1040,["aria-label","onClick"])),[[u,n.emojiPickerButtonLabel]])]),content:e.withCtx(({close:s})=>[e.createVNode(y,e.mergeProps(o.emojiPickerProps,{onAddEmoji:t[13]||(t[13]=c=>i.$emit("add-emoji")),onSkinTone:n.onSkinTone,onSelectedEmoji:c=>n.onSelectEmoji(c,s)}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1})):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"emojiGiphyPicker"),e.renderSlot(i.$slots,"customActionIcons")]),_:3})]),e.createElementVNode("div",Z,[e.createVNode(b,{direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createElementVNode("div",$,[e.renderSlot(i.$slots,"smsCount")]),o.showCharacterLimit?(e.openBlock(),e.createBlock(x,{key:0,class:"d-recipe-message-input__remaining-char-tooltip",placement:"top-end",enabled:n.characterLimitTooltipEnabled,message:o.showCharacterLimit.message,offset:[10,8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-recipe-message-input__remaining-char","data-qa":"dt-recipe-message-input-character-limit"},e.toDisplayString(o.showCharacterLimit.count-n.inputLength),513),[[e.vShow,n.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),o.showCancel?e.withDirectives((e.openBlock(),e.createBlock(a,{key:1,"data-qa":"dt-recipe-message-input-cancel-button",class:"d-recipe-message-input__button d-recipe-message-input__cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":n.cancelButtonLabel,onClick:n.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(n.cancelButtonLabel),1)]),_:1},8,["aria-label","onClick"])),[[u,n.cancelButtonLabel]]):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"sendButton",{},()=>[o.showSend?e.withDirectives((e.openBlock(),e.createBlock(a,{key:0,"data-qa":"dt-recipe-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass(["d-recipe-message-input__button d-recipe-message-input__send-button",{"d-recipe-message-input__send-button--disabled":n.isSendDisabled,"d-btn--icon-only":n.showSendIcon}]),"aria-label":n.sendButtonLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend},e.createSlots({default:e.withCtx(()=>[o.showSend.text?(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(o.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[n.showSendIcon?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(i.$slots,"sendIcon",{iconSize:n.sendIconSize},()=>[e.createVNode(O,{size:n.sendIconSize},null,8,["size"])])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])),[[u,n.sendButtonLabel,"top-end"]]):e.createCommentVNode("",!0)])]),_:3})])])],16)}const ie=B._(Q,[["render",te]]);exports.default=ie;
//# sourceMappingURL=message-input.cjs.map