@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"),C=require("@tiptap/core"),_=require("../../node_modules/@tiptap/vue-3.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),T=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),j=require("../item-layout/item-layout.cjs"),v=require("../button/button.cjs"),V=require("./message-input-topbar.cjs"),N=require("./message-input-link.cjs"),S=require("../editor/editor-constants.cjs"),M=require("../emoji-picker/emoji-picker.cjs"),q=require("../input/input.cjs"),A=require("../popover/popover.cjs"),F=require("../rich-text-editor/rich-text-editor.cjs"),R=require("../tooltip/tooltip.cjs"),z=require("../stack/stack.cjs"),x=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"],methods:{close(o){this.$parent.$emit("meeting-pill-close",o)}}},H={class:"d-recipe-message-input-meeting-pill__icon"},W={class:"d-recipe-message-input-meeting-pill__close"};function K(o,t,i,a,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"),c=e.resolveComponent("node-view-wrapper");return e.openBlock(),e.createBlock(c,{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",W,[e.createVNode(h,{circle:"","aria-label":o.node.attrs["close-button-aria-label"],size:"xs",importance:"clear",onClick:n.close},{icon:e.withCtx(()=>[e.createVNode(p,{size:"300"})]),_:1},8,["aria-label","onClick"])])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.node.attrs.text)+" ",1)]),_:1})]),_:1})}const X=T._(U,[["render",K]]),Q=C.Node.create({atom:!0,group:"inline",inline:!0,addNodeView(){return _.VueNodeViewRenderer(X)},addAttributes(){return{text:{default:'Please pass in "text" attribute'},"close-button-aria-label":{}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText({node:o}){return"/dpm"},renderHTML({HTMLAttributes:o}){return["meeting-pill",C.mergeAttributes(o)]}}),G={compatConfig:{MODE:3},name:"DtRecipeMessageInput",components:{DtButton:v.default,DtEmojiPicker:M.default,DtInput:q.default,DtPopover:A.default,DtRecipeMessageInputTopbar:V.default,DtRecipeMessageInputLink:N.default,DtRichTextEditor:F.default,DtTooltip:R.default,DtStack:z.default,DtIconImage:d.DtIconImage,DtIconVerySatisfied:d.DtIconVerySatisfied,DtIconSatisfied:d.DtIconSatisfied,DtIconSend:d.DtIconSend},mixins:[],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(o){return typeof o=="string"?x.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"json",validator(o){return x.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(o){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>o[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bold on selected text",tooltipText:"Bold",keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle italic on selected text",tooltipText:"Italic",keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle strikethrough on selected text",tooltipText:"Strikethrough",keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({ariaLabel:"Create or edit link on selected text",tooltipText:"Link",keyboardShortcutText:"Mod + K",dialogTitle:"Add a link",textLabel:"Text to display (optional)",linkLabel:"Link",linkPlaceholder:"e.g. https://www.dialpad.com",removeLabel:"Remove",cancelLabel:"Cancel",confirmLabel:"Done",visuallyHiddenCloseText:"Close link dialog"})},bulletListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bullet list on selected text",tooltipText:"Bullet list",keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle ordered list on selected text",tooltipText:"Ordered list",keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle Blockquote on selected text",tooltipText:"Blockquote",keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code tag on selected text",tooltipText:"Code",keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code block on selected text",tooltipText:"Code block",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"],data(){return{lastActiveNodes:P.default,additionalExtensions:[Q],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}},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},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"}},watch:{modelValue(o){this.internalInputValue=o},emojiPickerOpened(o){var t;o||(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(o){var t;this.linkDialogOpen=o,o===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(t=this.$refs.richTextEditor)==null||t.focusEditor())},handleTopbarClick(o){var a;const t=(a=this.$refs.richTextEditor)==null?void 0:a.editor,i={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&&i[o]&&i[o]()},isSelectionActive(o){var t,i,a,l;return["bulletList","orderedList"].includes(o)?this.lastActiveNodes((i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.state,[{type:"bulletList"},{type:"orderedList"}]).includes(o)&&this.isFocused:((l=(a=this.$refs.richTextEditor)==null?void 0:a.editor)==null?void 0:l.isActive(o))&&this.isFocused},initLinkDialog(){var o,t,i;this.$refs.link.setInitialValues(this.selectedText,(i=(t=(o=this.$refs.richTextEditor)==null?void 0:o.editor)==null?void 0:t.getAttributes("link"))==null?void 0:i.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var o;(o=this.$refs.richTextEditor)==null||o.removeLink(),this.linkDialogOpen=!1},setLink(o,t){this.$refs.richTextEditor.setLink(t,o,this.linkOptions,S.EDITOR_SUPPORTED_LINK_PROTOCOLS,S.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(o){k.returnFirstEl(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(o.target)||(o.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(o){const t=o.dataTransfer,i=Array.from(t.files);this.$emit("add-media",i)},onPaste(o){if(o.clipboardData.files.length){o.stopPropagation(),o.preventDefault();const t=[...o.clipboardData.files];this.$emit("paste-media",t)}},onSkinTone(o){this.$emit("skin-tone",o)},onSelectEmoji(o,t){o&&(o.shift_key||t(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.$emit("selected-emoji",o))},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(o){this.$emit("update:modelValue",o)},onTextInput(o){this.text=o,this.$emit("text-input",o)}}},Y={class:"d-recipe-message-input__bottom-section"},J={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(o,t,i,a,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"),c=e.resolveComponent("dt-button"),L=e.resolveComponent("dt-input"),w=e.resolveComponent("dt-icon-very-satisfied"),y=e.resolveComponent("dt-icon-satisfied"),B=e.resolveComponent("dt-emoji-picker"),I=e.resolveComponent("dt-popover"),f=e.resolveComponent("dt-stack"),O=e.resolveComponent("dt-tooltip"),D=e.resolveComponent("dt-icon-send"),E=e.resolveDirective("dt-scrollbar"),b=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(o.$attrs),{onDragover:t[12]||(t[12]=e.withModifiers(()=>{},["prevent"])),onDrop:t[13]||(t[13]=e.withModifiers((...s)=>n.onDrop&&n.onDrop(...s),["prevent"])),onPaste:t[14]||(t[14]=(...s)=>n.onPaste&&n.onPaste(...s)),onMousedown:t[15]||(t[15]=(...s)=>n.onMousedown&&n.onMousedown(...s))}),[e.renderSlot(o.$slots,"top"),i.richText?(e.openBlock(),e.createBlock(p,{key:l.selectedText,"bold-button-options":i.boldButtonOptions,"italic-button-options":i.italicButtonOptions,"strike-button-options":i.strikeButtonOptions,"bullet-list-button-options":i.bulletListButtonOptions,"ordered-list-button-options":i.orderedListButtonOptions,"block-quote-button-options":i.blockQuoteButtonOptions,"code-button-options":i.codeButtonOptions,"code-block-button-options":i.codeBlockButtonOptions,"is-selection-active":n.isSelectionActive,onClick:n.handleTopbarClick},{link:e.withCtx(()=>[e.createVNode(m,{ref:"link",open:l.linkDialogOpen,"link-button-options":i.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":i.maxHeight})},[e.createVNode(h,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=s=>l.internalInputValue=s),"allow-blockquote":i.richText,"allow-bold":i.richText,"allow-bullet-list":i.richText,"allow-code":i.richText,"allow-codeblock":i.richText,"allow-italic":i.richText,"allow-strike":i.richText,"allow-underline":i.richText,"paste-rich-text":i.richText,editable:i.editable,"input-aria-label":i.inputAriaLabel,"input-class":i.inputClass,"output-format":i.outputFormat,"auto-focus":i.autoFocus,link:i.richText,placeholder:i.placeholder,"prevent-typing":i.preventTyping,"mention-suggestion":i.mentionSuggestion,"channel-suggestion":i.channelSuggestion,"slash-command-suggestion":i.slashCommandSuggestion,"additional-extensions":l.additionalExtensions,"hide-link-bubble-menu":l.hideLinkBubbleMenu},n.removeClassStyleAttrs(o.$attrs),{onInput:n.onInput,onTextInput:n.onTextInput,onEnter:n.onSend,onSelected:t[1]||(t[1]=s=>l.selectedText=s),onEditLink:n.initLinkDialog,onFocus:t[2]||(t[2]=s=>l.isFocused=!0),onBlur:t[3]||(t[3]=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)),[[E]]),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",Y,[e.createElementVNode("div",J,[e.createVNode(f,{gap:"200",direction:"row"},{default:e.withCtx(()=>{var s;return[i.showImagePicker?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,"data-qa":"dt-recipe-message-input-image-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.showImagePicker.ariaLabel,onClick:n.onSelectImage,onMouseenter:t[4]||(t[4]=r=>l.imagePickerFocus=!0),onMouseleave:t[5]||(t[5]=r=>l.imagePickerFocus=!1),onFocus:t[6]||(t[6]=r=>l.imagePickerFocus=!0),onBlur:t[7]||(t[7]=r=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(g,{size:"300"})]),_:1},8,["aria-label","onClick"])),[[b,(s=i.showImagePicker)==null?void 0:s.tooltipLabel,"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"]),i.showEmojiPicker?(e.openBlock(),e.createBlock(I,{key:1,"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},{anchor:e.withCtx(({attrs:r})=>[e.withDirectives((e.openBlock(),e.createBlock(c,e.mergeProps(r,{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.emojiButtonAriaLabel,onClick:n.toggleEmojiPicker,onMouseenter:t[8]||(t[8]=u=>l.emojiPickerFocus=!0),onMouseleave:t[9]||(t[9]=u=>l.emojiPickerFocus=!1),onFocus:t[10]||(t[10]=u=>l.emojiPickerFocus=!0),onBlur:t[11]||(t[11]=u=>l.emojiPickerFocus=!1)}),{icon:e.withCtx(()=>[n.emojiPickerHovered?(e.openBlock(),e.createBlock(w,{key:0,size:"300"})):(e.openBlock(),e.createBlock(y,{key:1,size:"300"}))]),_:2},1040,["aria-label","onClick"])),[[b,i.emojiTooltipMessage]])]),content:e.withCtx(({close:r})=>[e.createVNode(B,e.mergeProps(i.emojiPickerProps,{onSkinTone:n.onSkinTone,onSelectedEmoji:u=>n.onSelectEmoji(u,r)}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1})):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"emojiGiphyPicker"),e.renderSlot(o.$slots,"customActionIcons")]}),_:3})]),e.createElementVNode("div",Z,[e.createVNode(f,{direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createElementVNode("div",$,[e.renderSlot(o.$slots,"smsCount")]),i.showCharacterLimit?(e.openBlock(),e.createBlock(O,{key:0,class:"d-recipe-message-input__remaining-char-tooltip",placement:"top-end",enabled:n.characterLimitTooltipEnabled,message:i.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(i.showCharacterLimit.count-n.inputLength),513),[[e.vShow,n.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),i.showCancel?(e.openBlock(),e.createBlock(c,{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":i.showCancel.ariaLabel,onClick:n.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(i.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"sendButton",{},()=>{var s;return[i.showSend?e.withDirectives((e.openBlock(),e.createBlock(c,{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":i.showSend.ariaLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend},e.createSlots({default:e.withCtx(()=>[i.showSend.text?(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(i.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[n.showSendIcon?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"sendIcon",{iconSize:n.sendIconSize},()=>[e.createVNode(D,{size:n.sendIconSize},null,8,["size"])])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])),[[b,(s=i.showSend)==null?void 0:s.tooltipLabel,"top-end"]]):e.createCommentVNode("",!0)]})]),_:3})])])],16)}const oe=T._(G,[["render",te]]);exports.default=oe;
//# sourceMappingURL=message-input.cjs.map