@svar-ui/react-comments/dist/index.cjs

Lightweight React component for adding a modern-looking comments section to your app

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),y=require("@svar-ui/react-core"),Q=require("@svar-ui/lib-react"),K=require("@svar-ui/react-menu"),X=require("@svar-ui/lib-state"),z=require("@svar-ui/lib-dom"),J=require("@svar-ui/comments-locales"),Y=require("@svar-ui/core-locales");function ee(e){if(e.startsWith("hsl"))return te(e)[2]>55?"dark":"light";if(e.startsWith("#")||e.startsWith("rgb")){const t=ne(e,!0);return Math.round((t[0]*299+t[1]*587+t[2]*114)/1e3)>180?"dark":"light"}return"light"}function te(e){return e.match(/\d+/g).map(Number)}function ne(e,t=!1){if(e.startsWith("rgb"))return t?se(e):e;let s=0,o=0,a=0;return e.length==4?(s="0x"+e[1]+e[1],o="0x"+e[2]+e[2],a="0x"+e[3]+e[3]):e.length==7&&(s="0x"+e[1]+e[2],o="0x"+e[3]+e[4],a="0x"+e[5]+e[6]),s=+s,o=+o,a=+a,t?{r:s,g:o,b:a}:"rgb("+s+","+o+","+a+")"}function se(e){const t=e.indexOf(",")>-1?",":" ",s=e.substring(4).split(")")[0].split(t),o=(+s[0]).toString(16),a=(+s[1]).toString(16),m=(+s[2]).toString(16);return{r:+o,g:+a,b:+m}}function R({data:e={name:"",avatar:"",color:""},noTransform:t=!1,size:s="small",border:o=!0}){const a=d.useMemo(()=>e.name.split(" ").map(c=>c[0]).join(""),[e.name]),m=d.useMemo(()=>e.color?{background:e.color}:void 0,[e.color]),i=d.useMemo(()=>e.color?`wx-comments-avatar-color-${ee(e.color)}`:"",[e.color]);return n.jsx("div",{className:`wx-cyzBpibr wx-user wx-${s} ${i} ${o?"wx-border":""}`,style:m,children:e.avatar?n.jsx("img",{src:e.avatar,alt:e.name}):t?e.name:a})}function Z(e){const{focus:t=!1,buttonLabel:s="Send",flow:o=!1,value:a,author:m,onPost:i}=e,[c,l]=Q.useWritableProp(a||""),g=d.useRef(null),u=d.useRef(null),j=d.useRef(null),v=d.useContext(y.context.i18n),f=d.useMemo(()=>v.getGroup("comments"),[v]);return j.current=d.useCallback(x=>{x&&(i&&i({value:x}),l(""),u.current&&u.current.focus())},[i,c]),d.useEffect(()=>{g.current&&(u.current=g.current.querySelector("textarea"),t&&u.current&&u.current.focus(),u.current.onkeydown=x=>{x.key==="Enter"&&(x.ctrlKey||x.metaKey)&&(x.preventDefault(),j.current(c))})},[]),n.jsxs("div",{className:`wx-v2rD0VHO wx-comments-textarea${o?" wx-flow":""}`,"data-focus":"yes",ref:g,children:[n.jsxs("div",{className:"wx-v2rD0VHO wx-textarea-wrapper",children:[m?n.jsx("div",{className:"wx-v2rD0VHO wx-textarea-avatar",children:n.jsx(R,{data:m})}):null,n.jsx(y.TextArea,{placeholder:f("Add a comment..."),value:c,onChange:({value:x})=>l(x)})]}),n.jsx("div",{className:"wx-v2rD0VHO wx-textarea-bottombar",children:n.jsx(y.Button,{type:"primary",onClick:()=>j.current(c),children:f(s)})})]})}const W=d.createContext({dateStr:e=>e.toString()});function oe({owned:e,author:t,date:s,edit:o,children:a}){const i=d.useContext(W).dateStr;return n.jsx("div",{className:`wx-aluyyvxH wx-bubble ${e?"wx-owned":""}`,children:n.jsxs("div",{className:"wx-aluyyvxH wx-bubble-wrapper",children:[n.jsx("div",{className:"wx-aluyyvxH wx-avatar",children:n.jsx(R,{data:t})}),n.jsxs("div",{className:"wx-aluyyvxH wx-main-bubble",children:[n.jsx("span",{className:"wx-aluyyvxH wx-author-name",children:t.name}),e?n.jsxs("div",{className:"wx-aluyyvxH wx-agent-message",children:[n.jsxs("div",{className:"wx-aluyyvxH wx-message",children:[a,o!==e?n.jsx("div",{className:"wx-aluyyvxH wx-comment-date",children:i(s)}):null]}),n.jsx("div",{className:"wx-aluyyvxH wx-menu-icon","data-comment-menu-id":e,children:n.jsx("i",{className:"wx-aluyyvxH wx-icon wxi-dots-v"})})]}):n.jsxs("div",{className:"wx-aluyyvxH wx-message",children:[a,n.jsx("div",{className:"wx-aluyyvxH wx-comment-date",children:i(s)})]})]})]})})}function re(e){const{owned:t,author:s,date:o,edit:a,children:m}=e,i=d.useContext(W).dateStr;return n.jsxs("div",{className:`wx-N2LqQbZL wx-flow${t?" wx-owned":""}`,children:[n.jsxs("div",{className:"wx-N2LqQbZL wx-flow-toolbar",children:[n.jsx(R,{data:s}),n.jsx("span",{className:"wx-N2LqQbZL wx-author-name",children:s.name}),t&&t!==a&&n.jsx("div",{className:"wx-N2LqQbZL wx-menu-icon","data-comment-menu-id":t,children:n.jsx("i",{className:"wx-N2LqQbZL wx-icon wxi-dots-v"})})]}),n.jsx("div",{className:"wx-N2LqQbZL wx-comment-date",children:i(o)}),n.jsx("div",{className:"wx-N2LqQbZL wx-message",children:m})]})}function ae(e,t,s){let o,a,m,i,c,l,g,u;if(t?{linestart:g,headerlevel:m,checkbehind:c,unsurepoint:l,content:o,ctype:a,newLineCounter:i,i:u}=t.state:(t={nodes:[{d:[],t:"p",f:!1,i:0}],length:0,state:{}},g=0,m=0,c=-1,l=-1,o="",a="",i=0,u=0),l){const f=t.nodes[t.nodes.length-1];f.d.length&&(t.length-=f.d[f.d.length-1].c.length,f.d.pop())}const j=f=>{o!==""&&v("",f);const x=t.nodes[t.nodes.length-1];x.f=f!==1,x.i=u,m>0&&(x.t=`h${m}`,m=-1),f===0&&t.nodes.push({d:[],t:"p",f:!1,i:0})},v=(f,x=2)=>{const M=t.nodes[t.nodes.length-1],C=M.d[M.d.length-1],k=x===2?a:"";if(C&&C.t===k&&l<0){const N=C;t.length+=o.length,N.c=N.c+o,N.i=u}else{const N=k===""&&l>=0?e.substring(l):o;t.length+=N.length,M.d.push({c:N,t:k,f:x!==1,i:u})}x===2&&(f?l=c:l=-1),x!==1&&(o="",a=f,c=-1)};for(;u<e.length;u++){const f=e[u];if(f===`
`){i++,g=u+1;continue}if(!((f===" "||f==="	")&&i>0))if(i>0&&(i>1?j(0):o+=`
`,i=0),f=="*"||f=="`"||f=="#")e[u-1]=="\\"?o+=f:c===-1&&(c=u);else{if(c>=0){const x=u-c;if(e[u-1]=="*")x===2?v(a==="strong"?"":"strong"):x===1&&v(a==="em"?"":"em"),c=-1;else if(e[u-1]=="`"&&x==1)v(a==="code"?"":"code"),c=-1;else if(e[u-1]=="#"&&e[u]===" "&&c===g&&u-c<=6){m=u-c,c=-1;continue}}c!==-1&&(o+=e.substring(c,u),c=-1),o+=f}}return j(-1),t.state={},t}function $(e){let t="";for(const s of e)typeof s.d<"u"?(t+="<"+s.t+">",t+=$(s.d),t+="</"+s.t+">"):(s.t&&(t+="<"+s.t+">"),t+=s.c,s.t&&(t+="</"+s.t+">"));return t}function ce(e){return $(ae(e).nodes)}function le({content:e}){return n.jsx("div",{dangerouslySetInnerHTML:{__html:ce(e)}})}function ie({content:e}){return n.jsx(n.Fragment,{children:e})}const ue={bubbles:oe,flow:re},de={markdown:le,text:ie};function xe({content:e,date:t,owned:s,render:o,format:a="text",author:m,edit:i,onPost:c,onCancel:l}){const g=d.useMemo(()=>typeof o=="string"?ue[o]:o,[o]),u=d.useMemo(()=>typeof a=="string"?de[a]:a,[a]);return n.jsx(g,{owned:s,edit:i,author:m,date:t,children:i&&i===s?n.jsx(Z,{focus:!0,onPost:c,onCancel:l,value:e}):n.jsx(u,{content:e})})}function fe({data:e,render:t="blocks",format:s,author:o,edit:a,onPost:m,onCancel:i}){const c=d.useMemo(()=>typeof t=="string"?t:"blocks",[t]);return n.jsx("div",{className:`wx-6HAxmtjJ wx-messages wx-${c}`,children:e.map(l=>n.jsx(xe,{content:l.content,date:l.date,author:l.author,owned:l.author.id===o.id?l.id:null,render:t,edit:a,format:l.format||s,onPost:m,onCancel:i},l.id))})}function me(e){let{onAction:t,onChange:s,readonly:o=!1,render:a="flow",format:m="text",users:i,data:c,activeUser:l,focus:g=!1}=e;const u=d.useContext(y.context.i18n),{calendar:j,comments:v,formats:f}=u.getRaw(),x=u.getGroup("comments"),M=d.useMemo(()=>z.dateToString(v.dateFormat||f.dateFormat,j),[j,v,f]),[C,k]=d.useState(null),[N,P]=d.useState(""),[p,q]=Q.useWritableProp(c);d.useEffect(()=>{P(""),k(null)},[p]);const A={id:0,name:x("Unknown"),color:"hsl(0, 0%, 85%)"},H=d.useMemo(()=>i?i.map(r=>r.color?r:{...r,color:"hsl("+O(r.id+r.name)+", 100%, 85%)"}):[],[i]),D=d.useMemo(()=>{if(typeof l=="object")return l;const r=H.find(w=>w.id===l)||A;return r||{id:l||-1,name:x("Me"),color:"hsl(225, 76%, 67%)"}},[l,H,x]),T=d.useMemo(()=>p?p.map(r=>{if(typeof r.author=="object")return r;const w=H?H.find(h=>h.id===r.user):null;return{...r,author:w||A}}):[],[p,H]);function O(r){let w=0;for(let h=0;h<r.length;h++)w=r.charCodeAt(h)+((w<<5)-w);return w%60*6}function B(r){const w={id:X.uid(),content:r,author:D,user:D.id,date:new Date},h=[...T,w];if(q(h),s){const b=s({value:h,comment:w,action:"add"});b&&typeof b=="object"&&(b.then?b.then(L=>{V(w.id,L)}):V(w.id,b))}}function V(r,w){const h=p?p.findIndex(L=>L.id===r):-1;if(h===-1)return;const b=[...p];b[h]={...p[h],...w},q(b)}function E(r){const w=(p||[]).filter(h=>h.id!==r);q(w),s&&s({value:w,id:r,action:"delete"})}function F(r,w){let h;const b=(p||[]).map(L=>L.id===r?(h={...L,content:w},h):L);q(b),s&&s({value:b,id:r,action:"update",comment:h})}function U(){k(null)}function I(r){const{context:w,action:h}=r;if(h)switch(t&&t({action:"menu-clicked"}),h.id){case"edit-comment":k(w);break;case"delete-comment":E(w);break}}const G=[{id:"edit-comment",text:x("Edit"),icon:"wxi-edit-outline"},{id:"delete-comment",text:x("Delete"),icon:"wxi-delete-outline"}],S=d.useRef(null),_=d.useCallback(r=>{S.current&&typeof S.current.show=="function"&&S.current.show(r)},[S]);return n.jsx(W.Provider,{value:{dateStr:r=>M(r)},children:n.jsxs("div",{className:"wx-8ZGHQX6e wx-comments-list",children:[n.jsx(K.ActionMenu,{at:"bottom",ref:S,options:G,resolver:r=>r,dataKey:"commentMenuId",onClick:I}),n.jsx("div",{className:"wx-8ZGHQX6e wx-list",onClick:_,children:n.jsx(fe,{author:D,render:a,data:T,format:m,edit:C,onPost:r=>F(C,r.value),onCancel:U})}),!o&&!C&&n.jsx(Z,{author:D,flow:a==="flow",focus:g,onPost:r=>B(r.value),buttonLabel:"Add",value:N,onChange:({value:r})=>P(r)})]})})}function we(e){const{onData:t,onChange:s,value:o,...a}=e;let[m,i]=d.useState([]);d.useEffect(()=>{t&&o?Promise.resolve(t(o)).then(l=>i(l)):i(o||[])},[t,o]);const c=d.useCallback(l=>(l.originalValue=o,s&&s(l)),[s,o]);return n.jsx(y.Locale,{words:{...Y.en,...J.en},optional:!0,children:n.jsx(me,{data:m,...a,onChange:c})})}const he=({children:e,fonts:t})=>e?n.jsx(y.Willow,{fonts:t,children:e}):n.jsx(y.Willow,{fonts:t}),ve=({children:e,fonts:t})=>e?n.jsx(y.WillowDark,{fonts:t,children:e}):n.jsx(y.WillowDark,{fonts:t});exports.Comments=we;exports.Willow=he;exports.WillowDark=ve;