@silentsheet/react/dist/index.mjs

React component for silentsheet.

import {useRef,useState,useCallback,useEffect}from'react';import {SilentSheet}from'@silentsheet/core';import {FiCopy,FiDownload,FiTrash2}from'react-icons/fi';import {jsx,jsxs}from'react/jsx-runtime';var D={small:"50%",medium:"75%",large:"90%",full:"100%"},m={sepia:"#f9f7ee",light:"#ffffff",night:"#1a1a1a"},A=f=>{let x=Math.floor(f/60),d=f%60;return `${x.toString().padStart(2,"0")}:${d.toString().padStart(2,"0")}`},J=({placeholder:f="Begin your story here...",onChange:x})=>{let d=useRef(new SilentSheet),[t,C]=useState(d.current.getState()),[z,T]=useState({words:0,chars:0}),c=d.current.getActions(),p=useRef(null),h=useRef(),g=useCallback(()=>{C(d.current.getState());},[]),b=useCallback(e=>{let o=e.trim(),a=o?o.split(/\s+/).length:0,r=e.length;T({words:a,chars:r});},[]),v=useCallback(e=>{c.setContent(e),c.saveContent();},[c]),M=useCallback(e=>{if(h.current&&clearTimeout(h.current),t.hemingwayMode){let a=e.target,r=a.value.split(`
`),s=t.content.split(`
`);for(let i=0;i<s.length-1;i++)if(i<r.length&&r[i]!==s[i]){a.value=t.content;return}}let o=e.target.value;b(o),x?.(o),h.current=setTimeout(()=>{v(o);},1e3);},[v,b,x,t.hemingwayMode,t.content]);useEffect(()=>{b(t.content);},[t.content,b]),useEffect(()=>()=>{h.current&&clearTimeout(h.current);},[]),useEffect(()=>{let e=d.current.subscribeToUI(g);return ()=>e()},[g]);let N=useCallback(()=>{p.current&&v(p.current.value);},[v]);return jsx("div",{className:"silentsheet-root","data-theme":t.theme,style:{background:m[t.theme],color:t.theme==="night"?"#ffffff":"#000000"},children:jsxs("div",{className:"container",style:{width:D[t.size]},children:[jsx("a",{href:"https://github.com/hamzasaleem2/silentsheet",target:"_blank",rel:"noopener noreferrer",className:"github-link",children:"open source"}),jsx("textarea",{ref:p,className:`textarea ${t.hemingwayMode?"hemingway-mode":""}`,style:{fontFamily:t.font,fontSize:`${t.fontSize}px`},defaultValue:t.content,onChange:M,onBlur:N,onKeyDown:e=>{if(t.hemingwayMode){let o=e.target,a=o.selectionStart,r=o.selectionEnd;if(a===r){if(e.key==="Backspace"){let s=o.value.split(`
`),i=0,w=0;for(let R of s){if(w=i+R.length,i<=a&&a<=w){if(a>i)return;break}i=w+1;}e.preventDefault();}}else e.preventDefault();}},onMouseDown:e=>{if(t.hemingwayMode){let o=e.target,a=o.selectionStart,r=o.value.split(`
`),s=0;for(let i=0;i<r.length-1;i++)s+=r[i].length+1;a<s&&(e.preventDefault(),e.stopPropagation(),setTimeout(()=>{o.setSelectionRange(o.value.length,o.value.length);},0));}},onClick:e=>{if(t.hemingwayMode){let o=e.target,a=o.selectionStart,r=o.value.split(`
`),s=0;for(let i=0;i<r.length-1;i++)s+=r[i].length+1;a<s&&(e.preventDefault(),e.stopPropagation(),o.setSelectionRange(o.value.length,o.value.length));}},onSelect:e=>{if(t.hemingwayMode){let o=e.target,a=o.selectionStart,r=o.value.split(`
`),s=0;for(let i=0;i<r.length-1;i++)s+=r[i].length+1;a<s&&(e.preventDefault(),e.stopPropagation(),requestAnimationFrame(()=>{o.setSelectionRange(o.value.length,o.value.length);}));}},placeholder:t.hemingwayMode?"Write freely. Each line is a fresh start...":f,spellCheck:false,autoComplete:"off",autoCorrect:"off",autoCapitalize:"off","data-gramm":"false"}),jsxs("div",{className:"controls",children:[jsxs("div",{className:"controls-group",children:[jsx("button",{className:"timer-button",onClick:c.toggleTimer,title:`${t.timerRunning?"Stop":"Start"} Timer`,children:A(t.timerSeconds)}),jsxs("select",{className:"select",value:t.hemingwayMode?"hemingway":"edit",onChange:e=>{e.target.value==="hemingway"!==t.hemingwayMode&&c.toggleHemingwayMode();},title:t.hemingwayMode?"Hemingway Mode: Write forward, no looking back":"Edit Mode: Free editing",style:{"--bg-color":m[t.theme],"--text-color":t.theme==="night"?"#ffffff":"#000000"},children:[jsx("option",{value:"edit",children:"Edit"}),jsx("option",{value:"hemingway",children:"Hemingway"})]}),jsxs("select",{className:"select",value:t.font,onChange:e=>{c.setFont(e.target.value),g();},title:"Font Family",style:{"--bg-color":m[t.theme],"--text-color":t.theme==="night"?"#ffffff":"#000000"},children:[jsx("option",{value:"serif",children:"Serif"}),jsx("option",{value:"sans-serif",children:"Sans Serif"}),jsx("option",{value:"monospace",children:"Monospace"})]}),jsxs("div",{className:"font-size-control",children:[jsx("input",{type:"range",className:"range",min:"14",max:"28",value:t.fontSize,onChange:e=>{c.setFontSize(Number(e.target.value)),g();},title:"Font Size"}),jsx("span",{className:"font-size-value",children:t.fontSize})]})]}),jsxs("div",{className:"controls-group",children:[jsxs("select",{className:"select",value:t.theme,onChange:e=>{c.setTheme(e.target.value),g();},title:"Theme",style:{"--bg-color":m[t.theme],"--text-color":t.theme==="night"?"#ffffff":"#000000"},children:[jsx("option",{value:"light",children:"Light"}),jsx("option",{value:"sepia",children:"Sepia"}),jsx("option",{value:"night",children:"Night"})]}),jsxs("select",{className:"select",value:t.size,onChange:e=>{c.setSize(e.target.value),g();},title:"Width",style:{"--bg-color":m[t.theme],"--text-color":t.theme==="night"?"#ffffff":"#000000"},children:[jsx("option",{value:"small",children:"Small"}),jsx("option",{value:"medium",children:"Medium"}),jsx("option",{value:"large",children:"Large"}),jsx("option",{value:"full",children:"Full"})]})]}),jsxs("div",{className:"controls-group",children:[jsx("button",{className:"icon-button",onClick:()=>{p.current&&navigator.clipboard.writeText(p.current.value);},title:"Copy to Clipboard",children:jsx(FiCopy,{})}),jsx("button",{className:"icon-button",onClick:()=>{if(p.current){let e=new Blob([p.current.value],{type:"text/plain"}),o=URL.createObjectURL(e),a=document.createElement("a");a.href=o,a.download="silentsheet.txt",a.click(),URL.revokeObjectURL(o);}},title:"Download as Text",children:jsx(FiDownload,{})}),jsx("button",{className:"icon-button",onClick:()=>{p.current&&(p.current.value="",c.clearContent(),g());},title:"Clear Content",children:jsx(FiTrash2,{})})]})]}),jsxs("div",{className:"word-count",children:[z.words," words, ",z.chars," characters"]})]})})};export{J as SilentSheet};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map