@bikdotai/bik-component-library 0.0.219 → 0.0.221

package/dist/esm/components/editor/mail/mailRTE.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as l}from"react/jsx-runtime";import s from"emoji-picker-react";import n,{useRef as o,useState as a,useEffect as r}from"react";import{Quill as c}from"react-quill";import{Button as d}from"../../button/Button.js";import{Tooltip as u}from"../../tooltips/Tooltip.js";import{BodyCaption as m}from"../../TypographyStyle.js";import{COLORS as g}from"../../../constants/Theme.js";import b from"../../../assets/icons/cross.svg.js";import h from"../../../assets/icons/paperclip.svg.js";import v from"../../../assets/icons/smile_emoji.svg.js";import{EditorContainer as p,EditorInnerContainer as f,ReactQuilStyleContainer as j,ForwardMessageContainer as y,StyledBodySecondary as O,SendConatiner as q,LeftItemsContainer as k,InboxIconContainer as N,AttachmentContainer as w,AttachmentName as x,ProgressIndicatorContainer as M,OuterProgressBarContainer as T,InnerProgressBarContainer as B}from"./MailRTE.styled.js";const z=m=>{let{isForwardMail:b,isSendDisabled:w,buttonAction:x,defaultInputText:M,isModalView:T,setErrorToast:B,uploadFile:z,isLoading:S,buttonText:E="Send",skipAttachments:A,initialHtml:F}=m;var V,_,I;const L=o(null),[R,U]=a(!1),D=n.useRef(null),G=o(),[H,$]=a({}),[K,P]=a(""),[W,Y]=a(M||"");r((()=>{var e,t;Y(null===(t=null===(e=L.current)||void 0===e?void 0:e.unprivilegedEditor)||void 0===t?void 0:t.getText())}),[K]);const Z=()=>{U(!R)},J=(null===(I=null===(_=null===(V=null==L?void 0:L.current)||void 0===V?void 0:V.editor)||void 0===_?void 0:_.container)||void 0===I?void 0:I.querySelector(".ql-editor"))||{};G.current=J;const Q=c.import("formats/font");Q.whitelist=["arial","comic-sans","courier-new","georgia","helvetica","lucida"],c.register(Q,!0);const X=c.import("formats/size");X.whitelist=["extra-small","small","medium","large"],c.register(X,!0),r((()=>{F&&G.current&&(G.current.innerHTML=F)}),[G.current]);const ee=e=>{const t=H;delete t[e],$(Object.assign({},t))};return t(i,{children:[t(p,Object.assign({isModalView:T},{children:[l(f,Object.assign({isModalView:T},{children:l(j,{isModalView:T,ref:L,modules:{toolbar:{container:"#gmail-toolbar"}},onChange:e=>{P(e)},formats:["header","font","size","bold","italic","underline","align","strike","script","blockquote","background","list","bullet","indent","link","image","color","code-block"]})})),!A&&l("div",Object.assign({className:"attachment__container"},{children:Object.keys(H).map((e=>l(C,{fileName:e,uploadState:H[e],removeAttachment:ee},e)))})),b&&l(y,{children:l(O,Object.assign({style:{fontSize:12}},{children:"We cannot currently display the forwarded message thread. It will be visible after sending the message."}))})]})),t("div",Object.assign({id:"gmail-toolbar",style:{border:0,display:"flex",zIndex:0,backgroundColor:g.surface.subdued}},{children:[t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-bold"}),l("button",{className:"ql-italic"}),l("button",{className:"ql-underline"}),l("button",{className:"ql-strike"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-list",value:"ordered"}),l("button",{className:"ql-list",value:"bullet"}),l("button",{className:"ql-indent",value:"-1"}),l("button",{className:"ql-indent",value:"+1"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-script",value:"super"}),l("button",{className:"ql-script",value:"sub"}),l("button",{className:"ql-blockquote"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("select",{className:"ql-align"}),l("select",{className:"ql-color"}),l("select",{className:"ql-background"})]}))]})),l(q,Object.assign({isModalView:!0},{children:t(k,{children:[l(d,{style:{marginRight:10},buttonText:E,onClick:()=>{e(void 0,void 0,void 0,(function*(){var e,t;const i=[];Object.keys(H).map((e=>{"finished"===H[e].status&&i.push({filename:e,path:H[e].url})})),(yield x(K,W,i))&&T&&(P(""),Y(""),null===(t=null===(e=L.current)||void 0===e?void 0:e.editor)||void 0===t||t.setContents([{insert:"\n"}]),$({}))})).then()},size:"small",disabled:(null==W?void 0:W.length)<=0||w,isLoading:S}),!A&&t(i,{children:[l("input",{ref:D,type:"file",name:"file",multiple:!0,style:{display:"none"},onChange:t=>{const i=t.target.files;if(i){const t=[],l=[];Object.values(i).forEach((e=>{e.size<=5242880?l.push(e):t.push(e)})),t.length>0&&B("Files greater than 5mb size are ignored."),l.forEach((t=>(t=>e(void 0,void 0,void 0,(function*(){var e,i;const l=H;l[t.name]={status:"loading"},$(Object.assign({},l));const s=z&&(yield z(t,t.name));return(null===(e=null==s?void 0:s.data)||void 0===e?void 0:e.imageUrl)?(l[t.name]={status:"finished",url:null===(i=s.data)||void 0===i?void 0:i.imageUrl,size:null==t?void 0:t.size},$(Object.assign({},l)),s.data.imageUrl):(l[t.name]={status:"error"},$(Object.assign({},l)),null)})))(t)))}}}),z&&l(u,Object.assign({body:"Attach files",placement:"top"},{children:l(N,Object.assign({onClick:()=>{(()=>{var e;null===(e=D.current)||void 0===e||e.click()})()}},{children:l(h,{style:{cursor:"pointer"},width:16,height:16,color:g.content.secondary})}))}))]}),l("div",Object.assign({style:{display:"flex",flexDirection:"row",columnGap:16,alignItems:"center"}},{children:t("div",Object.assign({style:{position:"relative"}},{children:[l(u,Object.assign({body:"Emoji",placement:"top"},{children:l(N,Object.assign({isSelected:!1,onClick:()=>{Z()}},{children:l(v,{width:16,height:16,color:g.content.secondary})}))})),R&&l("div",Object.assign({style:{position:"absolute",bottom:40,left:0}},{children:l(s,{onEmojiClick:(e,t)=>{let{emoji:i}=t;var l,s,n,o,a;null===(l=null==L?void 0:L.current)||void 0===l||l.focus();const r=null===(n=null===(s=L.current)||void 0===s?void 0:s.editor)||void 0===n?void 0:n.getSelection();r&&(null===(a=null===(o=L.current)||void 0===o?void 0:o.editor)||void 0===a||a.insertText(null==r?void 0:r.index,i)),Z(),P(J.innerText)}})}))]}))}))]})}))]})},C=e=>{const{fileName:s,uploadState:n,removeAttachment:o}=e;return l(i,{children:t(w,{children:[l(x,Object.assign({numberOfLines:1,style:{flex:1}},{children:s})),"loading"!==n.status&&l(m,Object.assign({style:{flex:1}},{children:S(n.size)})),"loading"===n.status&&l(M,{children:l(T,{children:l(B,{style:{backgroundColor:g.background.brand,width:"60%"}})})}),l("div",Object.assign({style:{cursor:"pointer"},onClick:()=>o(s)},{children:l(b,{width:16,height:16})}))]})})},S=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";const i=t<0?0:t,l=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,l)).toFixed(i))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][l]}`};export{z as GmailRTE};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as l}from"react/jsx-runtime";import s from"emoji-picker-react";import n,{useRef as o,useState as a,useEffect as r}from"react";import{Quill as c}from"react-quill";import{Button as d}from"../../button/Button.js";import{Tooltip as u}from"../../tooltips/Tooltip.js";import{BodyCaption as m}from"../../TypographyStyle.js";import{COLORS as g}from"../../../constants/Theme.js";import b from"../../../assets/icons/cross.svg.js";import h from"../../../assets/icons/paperclip.svg.js";import v from"../../../assets/icons/smile_emoji.svg.js";import{EditorContainer as p,EditorInnerContainer as f,ReactQuilStyleContainer as j,ForwardMessageContainer as y,StyledBodySecondary as O,SendConatiner as q,LeftItemsContainer as k,InboxIconContainer as N,AttachmentContainer as w,AttachmentName as x,ProgressIndicatorContainer as M,OuterProgressBarContainer as T,InnerProgressBarContainer as B}from"./MailRTE.styled.js";const z=m=>{let{isForwardMail:b,isSendDisabled:w,buttonAction:x,defaultInputText:M,isModalView:T,setErrorToast:B,uploadFile:z,isLoading:S,buttonText:E="Send",skipAttachments:A,initialHtml:F}=m;var V,_,I;const L=o(null),[R,U]=a(!1),D=n.useRef(null),G=o(),[H,$]=a({}),[K,P]=a(""),[W,Y]=a(M||"");r((()=>{var e,t;Y(null===(t=null===(e=L.current)||void 0===e?void 0:e.unprivilegedEditor)||void 0===t?void 0:t.getText())}),[K]);const Z=()=>{U(!R)},J=(null===(I=null===(_=null===(V=null==L?void 0:L.current)||void 0===V?void 0:V.editor)||void 0===_?void 0:_.container)||void 0===I?void 0:I.querySelector(".ql-editor"))||{};G.current=J;const Q=c.import("formats/font");Q.whitelist=["arial","comic-sans","courier-new","georgia","helvetica","lucida"],c.register(Q,!0);const X=c.import("formats/size");X.whitelist=["extra-small","small","medium","large"],c.register(X,!0),r((()=>{F&&G.current&&(G.current.innerHTML=F)}),[G.current]);const ee=e=>{const t=H;delete t[e],$(Object.assign({},t))};return t(i,{children:[t(p,Object.assign({isModalView:T},{children:[l(f,Object.assign({isModalView:T},{children:l(j,{isModalView:T,ref:L,modules:{toolbar:{container:"#gmail-toolbar"}},onChange:e=>{P(e)},formats:["header","font","size","bold","italic","underline","align","strike","script","blockquote","background","list","bullet","indent","link","image","color","code-block"]})})),!A&&l("div",Object.assign({className:"attachment__container"},{children:Object.keys(H).map((e=>l(C,{fileName:e,uploadState:H[e],removeAttachment:ee},e)))})),b&&l(y,{children:l(O,Object.assign({style:{fontSize:12}},{children:"We cannot currently display the forwarded message thread. It will be visible after sending the message."}))})]})),t("div",Object.assign({id:"gmail-toolbar",style:{border:0,display:"flex",zIndex:0,backgroundColor:g.surface.subdued}},{children:[t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-bold"}),l("button",{className:"ql-italic"}),l("button",{className:"ql-underline"}),l("button",{className:"ql-strike"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-list",value:"ordered"}),l("button",{className:"ql-list",value:"bullet"}),l("button",{className:"ql-indent",value:"-1"}),l("button",{className:"ql-indent",value:"+1"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("button",{className:"ql-script",value:"super"}),l("button",{className:"ql-script",value:"sub"}),l("button",{className:"ql-blockquote"})]})),t("span",Object.assign({className:"ql-formats"},{children:[l("select",{className:"ql-align"}),l("select",{className:"ql-color"}),l("select",{className:"ql-background"})]}))]})),l(q,Object.assign({isModalView:!0},{children:t(k,{children:[l(d,{style:{marginRight:10},buttonText:E,onClick:()=>{e(void 0,void 0,void 0,(function*(){var e,t;const i=[];Object.keys(H).map((e=>{"finished"===H[e].status&&i.push({filename:e,path:H[e].url})})),(yield x(K,W,i))&&T&&(P(""),Y(""),null===(t=null===(e=L.current)||void 0===e?void 0:e.editor)||void 0===t||t.setContents([{insert:"\n"}]),$({}))})).then()},size:"small",disabled:(null==W?void 0:W.length)<=0||w,isLoading:S}),!A&&t(i,{children:[l("input",{ref:D,type:"file",name:"file",multiple:!0,style:{display:"none"},onChange:t=>{const i=t.target.files;if(i){const t=[],l=[];Object.values(i).forEach((e=>{e.size<=5242880?l.push(e):t.push(e)})),t.length>0&&B("Files greater than 5mb size are ignored."),l.forEach((t=>(t=>e(void 0,void 0,void 0,(function*(){var e,i;const l=H;l[t.name]={status:"loading"},$(Object.assign({},l));const s=z&&(yield z(t,t.name));return(null===(e=null==s?void 0:s.data)||void 0===e?void 0:e.imageUrl)?(l[t.name]={status:"finished",url:null===(i=s.data)||void 0===i?void 0:i.imageUrl,size:null==t?void 0:t.size},$(Object.assign({},l)),s.data.imageUrl):(l[t.name]={status:"error"},$(Object.assign({},l)),null)})))(t)))}}}),z&&l(u,Object.assign({body:"Attach files",placement:"top"},{children:l(N,Object.assign({onClick:()=>{(()=>{var e;null===(e=D.current)||void 0===e||e.click()})()}},{children:l(h,{style:{cursor:"pointer"},width:16,height:16,color:g.content.secondary})}))}))]}),l("div",Object.assign({style:{display:"flex",flexDirection:"row",columnGap:16,alignItems:"center"}},{children:t("div",Object.assign({style:{position:"relative"}},{children:[l(u,Object.assign({body:"Emoji",placement:"top"},{children:l(N,Object.assign({isSelected:!1,onClick:()=>{Z()}},{children:l(v,{width:16,height:16,color:g.content.secondary})}))})),R&&l("div",Object.assign({style:{position:"absolute",bottom:40,left:0}},{children:l(s,{onEmojiClick:e=>{var t,i,l,s,n;null===(t=null==L?void 0:L.current)||void 0===t||t.focus();const o=null===(l=null===(i=L.current)||void 0===i?void 0:i.editor)||void 0===l?void 0:l.getSelection();o&&(null===(n=null===(s=L.current)||void 0===s?void 0:s.editor)||void 0===n||n.insertText(null==o?void 0:o.index,e.emoji)),Z(),P(J.innerText)}})}))]}))}))]})}))]})},C=e=>{const{fileName:s,uploadState:n,removeAttachment:o}=e;return l(i,{children:t(w,{children:[l(x,Object.assign({numberOfLines:1,style:{flex:1}},{children:s})),"loading"!==n.status&&l(m,Object.assign({style:{flex:1}},{children:S(n.size)})),"loading"===n.status&&l(M,{children:l(T,{children:l(B,{style:{backgroundColor:g.background.brand,width:"60%"}})})}),l("div",Object.assign({style:{cursor:"pointer"},onClick:()=>o(s)},{children:l(b,{width:16,height:16})}))]})})},S=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";const i=t<0?0:t,l=Math.floor(Math.log(e)/Math.log(1024));return`${parseFloat((e/Math.pow(1024,l)).toFixed(i))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][l]}`};export{z as GmailRTE};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.219",
+	"version": "0.0.221",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",
@@ -54,7 +54,7 @@
 		"bootstrap": "^5.1.3",
 		"browser-image-compression": "^2.0.2",
 		"chart.js": "^3.9.1",
-		"emoji-picker-react": "^3.6.1",
+		"emoji-picker-react": "^4.4.9",
 		"lodash": "^4.17.21",
 		"phone": "^3.1.37",
 		"react-bootstrap": "^2.4.0",