UNPKG

text-editor-studio-ts

Version:

A powerful mobile-responsive rich text editor built with Lexical and React

3 lines (2 loc) 4.22 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./LexicalCollaborationContext.prod-BKKUeelU.cjs"),o=require("./index-BLOj1UA2.cjs"),n=require("@lexical/utils"),a=require("lexical");function s({option:n,index:a,options:s,totalVotes:i,withPollNode:l}){const{clientID:d}=r.l(),c=t.useRef(null),u=n.votes,b=-1!==u.indexOf(d),p=u.length,f=n.text;return e.jsxs("div",{className:"mb-2.5 flex flex-row items-center",children:[e.jsx("div",{className:"relative mr-2.5 flex h-[22px] w-[22px] rounded-md border border-border-system-global-secondary "+(b?'border-border-presentation-action-primary bg-background-presentation-action-primary after:pointer-events-none after:absolute after:left-2 after:top-1 after:m-0 after:block after:h-[9px] after:w-[5px] after:rotate-45 after:cursor-pointer after:border-b-2 after:border-r-2 after:border-solid after:border-white after:content-[""]':""),children:e.jsx("input",{ref:c,className:"absolute block h-full w-full cursor-pointer border-0 opacity-0",type:"checkbox",onChange:()=>{l(e=>{e.toggleVote(n,d)})},checked:b})}),e.jsxs("div",{className:"relative flex flex-[10px] cursor-pointer overflow-hidden rounded-md border border-border-presentation-action-primary",children:[e.jsx("div",{className:"transition-width absolute left-0 top-0 z-0 h-full bg-background-presentation-state-success-primary duration-1000 ease-in-out",style:{width:(0===p?0:p/i*100)+"%"}}),e.jsx("span",{className:"absolute right-4 top-1.5 text-xs text-content-presentation-action-primary",children:p>0&&(1===p?"1 vote":`${p} votes`)}),e.jsx(o.Input,{type:"text",value:f,onChange:e=>{const t=e.target,r=t.value,o=t.selectionStart,a=t.selectionEnd;l(e=>{e.setOptionText(n,r)},()=>{t.selectionStart=o,t.selectionEnd=a})},placeholder:`Option ${a+1}`})]}),e.jsx("button",{disabled:s.length<3,className:"relative z-0 ml-1.5 flex h-7 w-7 cursor-pointer rounded-md border-0 bg-transparent bg-[position:6px_6px] bg-no-repeat opacity-30 before:absolute before:left-[13px] before:top-1.5 before:block before:h-[15px] before:w-0.5 before:-rotate-45 before:bg-border-system-global-secondary before:content-[''] after:absolute after:left-[13px] after:top-1.5 after:block after:h-[15px] after:w-0.5 after:rotate-45 after:bg-border-system-global-secondary after:content-[''] hover:bg-background-system-body-primary-presentation-action-hover hover:opacity-100 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:opacity-30","aria-label":"Remove",onClick:()=>{l(e=>{e.deleteOption(n)})}})]})}exports.default=function({question:r,options:i,nodeKey:l}){const[d]=o.o(),c=t.useMemo(()=>function(e){return e.reduce((e,t)=>e+t.votes.length,0)}(i),[i]),[u,b,p]=o.u(l),[f,x]=t.useState(null),m=t.useRef(null),g=t.useCallback(e=>{const t=a.$getSelection();if(u&&a.$isNodeSelection(t)){e.preventDefault(),d.update(()=>{t.getNodes().forEach(e=>{o.$isPollNode(e)&&e.remove()})})}return!1},[d,u]);t.useEffect(()=>n.mergeRegister(d.registerUpdateListener(({editorState:e})=>{x(e.read(()=>a.$getSelection()))}),d.registerCommand(a.CLICK_COMMAND,e=>{const t=e;return t.target===m.current&&(t.shiftKey||p(),b(!u),!0)},a.COMMAND_PRIORITY_LOW),d.registerCommand(a.KEY_DELETE_COMMAND,g,a.COMMAND_PRIORITY_LOW),d.registerCommand(a.KEY_BACKSPACE_COMMAND,g,a.COMMAND_PRIORITY_LOW)),[p,d,u,l,g,b]);const h=(e,t)=>{d.update(()=>{const t=a.$getNodeByKey(l);o.$isPollNode(t)&&e(t)},{onUpdate:t})},y=a.$isNodeSelection(f)&&u;return e.jsx("div",{className:"min-w-[400px] max-w-[600px] cursor-pointer select-none rounded-lg border border-border-system-global-secondary bg-background-system-body-primary "+(y?" outline-2 outline-primary":""),ref:m,children:e.jsxs("div",{className:"m-4 cursor-default",children:[e.jsx("h2",{className:"m-0 mb-4 text-center text-lg text-content-system-global-secondary",children:r}),i.map((t,r)=>{const o=t.uid;return e.jsx(s,{withPollNode:h,option:t,index:r,options:i,totalVotes:c},o)}),e.jsx("div",{className:"flex justify-center",children:e.jsx(o.Button,{onClick:()=>{h(e=>{e.addOption(o.createPollOption())})},size:"M",children:"Add Option"})})]})})}; //# sourceMappingURL=poll-component-DOhGFREM.cjs.map