cedit/dist/index.js

📝 A simple way to edit content in react.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var p=require("react");function A(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var h=A(p);function D(t,n){n===void 0&&(n={});var e=n.insertAt;if(!(!t||typeof document>"u")){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css",e==="top"&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}var N=".top-start{align-items:flex-start;justify-content:flex-start}.top-start div{text-align:left}.top-center{align-items:center;justify-content:flex-start}.top-center div{text-align:center}.top-center div:empty{text-align:left}.top-end{align-items:flex-end;justify-content:flex-start}.top-end div{text-align:right}.middle-start{align-items:flex-start;justify-content:center}.middle-start div{text-align:left}.middle-center{align-items:center;justify-content:center}.middle-center div{text-align:center}.middle-center div:empty{text-align:left}.middle-end{align-items:flex-end;justify-content:center}.middle-end div{text-align:right}.bottom-start{align-items:flex-start;justify-content:flex-end}.bottom-start div{text-align:left}.bottom-center{align-items:center;justify-content:flex-end}.bottom-center div{text-align:center}.bottom-center div:empty{text-align:left}.bottom-end{align-items:flex-end;justify-content:flex-end}.bottom-end div{text-align:right}.cedit{border:1.5px solid #e5e5ea;border-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;min-height:80px;outline:3px solid transparent;padding:2px 4px;transition:.3s}.cedit:hover{border-color:#70a1ff}.cedit:focus-within{border-color:#79a4f3;outline-color:#a6e9ff}.cedit__content{word-wrap:break-word;border:none!important;font-family:Arial,Helvetica,sans-serif;line-height:1.3;outline:none!important;white-space:pre-line;word-break:break-all}.cedit__content:empty:before{background-color:transparent!important;content:attr(placeholder);opacity:.45;position:relative}";D(N);function T(t,n=[]){let e=t;for(;e.parentNode||e.host;){if(e instanceof ShadowRoot){n.push(e),e=e.host;continue}e=e.parentNode}return n}function F(t,n){if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(t,n);if(e){const a=document.createRange();let{offsetNode:i}=e;const l=T(i);return l.length&&(i=l[l.length-1].host),a.setStart(i,e.offset),a.setEnd(i,e.offset),a}return null}return document.caretRangeFromPoint(t,n)}const I=t=>{const n=r=>{var c,g,d,u,v,b;const x=r.target;let y=(c=x.innerText)!=null?c:"",m=(g=x.innerHTML)!=null?g:"";if(r.type==="paste"){const s=r;y=(u=(d=s.clipboardData)==null?void 0:d.getData("text/plain"))!=null?u:"",m=(b=(v=s.clipboardData)==null?void 0:v.getData("text/html"))!=null?b:""}return{event:r,html:m,text:y}},e=()=>{var r;(r=t.current)==null||r.blur()},a=()=>{var r;(r=t.current)==null||r.focus()};return{moveCaretOn:(r,c)=>{if(r.target.firstChild===t.current){r.preventDefault();const d=window.getSelection(),u=F(r.clientX,r.clientY);u&&(d?.removeAllRanges(),d?.addRange(u),c&&a())}},setCaret:()=>{if(t.current){const r=window.getSelection(),c=document.createRange();r?.removeAllRanges(),c.selectNodeContents(t.current),c.collapse(!1),r?.addRange(c),document.activeElement!==t.current&&a()}},append:r=>{t.current&&(t.current.innerHTML=r)},focus:a,blur:e,empty:()=>{t.current&&(t.current.innerHTML="",t.current.innerText="")},get:n}},L=["<div><br></div>","<br>",`
`,""],M={topStart:"top-start",topCenter:"top-center",topEnd:"top-end",middleStart:"middle-start",middleCenter:"middle-center",middleEnd:"middle-end",bottomStart:"bottom-start",bottomCenter:"bottom-center",bottomEnd:"bottom-end"};var H=Object.defineProperty,k=Object.defineProperties,B=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,K=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable,O=(t,n,e)=>n in t?H(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,z=(t,n)=>{for(var e in n||(n={}))K.call(n,e)&&O(t,e,n[e]);if(j)for(var e of j(n))q.call(n,e)&&O(t,e,n[e]);return t},X=(t,n)=>k(t,B(n));const $=({id:t,value:n,editable:e=!0,multiLine:a=!0,spellCheck:i=!1,className:l="",placeholder:C,autoFocus:w=!1,placement:r="topStart",style:c={},onChange:g=()=>({}),onFocus:d=()=>({}),onBlur:u=()=>({}),onKeyUp:v=()=>({}),onKeyDown:b=()=>({}),onKeyPress:x=()=>({}),onPaste:y=()=>({})})=>{const m=p.useRef(null),s=p.useRef({value:n,editable:!1}),{get:f,append:P,setCaret:_,empty:E,blur:S,moveCaretOn:R}=I(m);return p.useEffect(()=>{m.current&&s.current&&(s.current.editable||P(n),L.includes(n)&&E())},[P,E,n]),h.default.createElement("div",{"data-cedit":!0,"data-autofocus":w,role:"presentation",className:`cedit ${M[r]} ${l}`.trim(),style:X(z({},c),{cursor:e?"text":"default",outlineColor:e?"":"transparent"}),onClick:o=>R(o,!0),onMouseDown:o=>R(o),onBlur:()=>{s.current.editable=!1,S()},onFocus:()=>{s.current.editable=!0,_()}},h.default.createElement("div",{id:t?.toString(),ref:m,role:"textbox",tabIndex:e?0:-1,contentEditable:e,spellCheck:i,className:"cedit__content",placeholder:C,suppressContentEditableWarning:!0,dangerouslySetInnerHTML:{__html:s.current.value},onInput:o=>g(f(o)),onKeyUp:o=>v(f(o)),onKeyDown:o=>{o.key==="Enter"&&!a&&o.preventDefault(),b(f(o))},onKeyPress:o=>x(f(o)),onBlur:o=>{s.current.editable=!1,u(f(o))},onFocus:o=>{s.current.editable=!0,_(),d(f(o))},onPaste:o=>{_(),y(f(o))}}))};p.createContext({});const U=({children:t})=>{const n=p.useRef(null);return p.useEffect(()=>{var e;const i=Array.from(((e=n.current)==null?void 0:e.querySelectorAll('div[data-cedit="true"]'))||[]).filter(l=>l.getAttribute("data-autofocus")==="true").map(l=>l.firstChild).at(-0);i&&i.focus()},[]),h.default.createElement("div",{ref:n},t)};exports.Cedit=$,exports.CeditProvider=U;