reactjs-editor - npm Package Compare versions

Comparing version 10.0.0 to 10.0.1

dist/index.es.js

@@ -1,1 +0,1 @@
-import e,{useState as t,useRef as o,useCallback as n,useEffect as r}from"react";import a from"react-from-dom";import{create as l}from"zustand";import{fromRange as i}from"xpath-range";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.comment{margin-bottom:1rem}.floating-toolbar{align-items:center;background:#fff;border-radius:12px;box-shadow:0 54px 55px rgba(0,0,0,.25),0 -12px 30px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.12),0 12px 13px rgba(0,0,0,.17),0 -3px 5px rgba(0,0,0,.09);display:flex;overflow:hidden}.floating-toolbar span{color:#000;cursor:pointer;font-size:28px;padding:6px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#f2f2f2;color:#0b0b78}.floating-toolbar-close{align-items:center;background:#fff;border-radius:100%;color:#0b0b78;cursor:pointer;display:flex;height:30px;justify-content:center;position:absolute;right:-15px;top:-15px;transition:all .2s ease;width:30px}.floating-toolbar-close:hover{scale:1.1}.modal-container-reed{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;position:fixed;top:0;width:100vw;z-index:100}.modal-content-reed{aspect-ratio:1;background:hsla(0,0%,76%,.8);border-radius:20px;box-shadow:.9px 0 0 .2px hsla(0,3%,50%,.8);flex-direction:column;padding:10px;width:40%}.container-reed,.modal-content-reed{align-items:center;display:flex;justify-content:center;margin:auto}.container-reed{flex-wrap:wrap;width:70%}.color-container-reed{align-items:center;display:flex;flex-direction:column;margin:30px}.color-box{background:rgba(0,0,0,.8);border-radius:100%;box-shadow:0 4px 8px rgba(0,0,0,.7);cursor:pointer;height:38px;transition:all .3s ease;width:38px}.color-box:hover{scale:1.2}.color-name{color:#280f60;margin-top:5px}.btn-submit-reed{background:#280f60;border:1px solid #280f60;border-radius:9px;color:#fff;cursor:pointer;font-family:Times New Roman,Times,serif;font-size:22px;margin-bottom:20px;outline:none;padding:14px 36px;transition:all .3s ease}.btn-submit-reed:hover{background:#482696}.modal-content-reed h1{color:#0b0b78}.comment{border:1px dashed gold;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;margin:0 2px;overflow:hidden;padding:6px 12px 6px 32px;position:relative}.hover-card{background:#000;background:#fff;background:linear-gradient(180deg,#ffe8e8,#fff);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px #ffe8e8;color:#000;font-style:italic;left:50%;max-height:300px;max-width:450px;overflow-y:scroll;padding:15px 20px;position:fixed;top:-300px;transform:translate(-50%,-50%);transition:all 1s ease;transition-delay:.5s;width:100%;z-index:100}.comment:hover>.hover-card{top:30%;transition-delay:0s}.hover-title{border-bottom:.2px solid #0b0b78;color:#0b0b78;display:block;font-weight:900;margin-bottom:16px;text-transform:uppercase;width:100%}.comment:before{color:"#fff";content:"  💬  ";height:100%;left:0;padding:0 6px;position:absolute;width:100%}.text-shadow-reed{font-weight:"bolder";text-shadow:.1px .1px #000}.highlight .bold{font-family:Times New Roman,Times,serif}.bold{font-weight:700;letter-spacing:1}.highlight{border-radius:4px;padding:4px}.notes-input{background-color:hsla(0,0%,100%,.02);border:none;border-radius:12px;color:#000;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red;color:#fff}.white{background:#fff;color:#000}.blue{background:blue;color:#fff}.green{background:green;color:#fff}.purple{background:purple;color:#fff}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const c=l((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),s=l((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),d=l((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),p={name:"",value:""},m=l((e=>({type:{...p},config:{xPath:"",selectedText:""},changeType:({name:t,value:o})=>e((e=>({type:{...e.type,name:t,value:o}}))),changeConfig:({xPath:t,selectedText:o})=>e((e=>({config:{...e.config,xPath:t,selectedText:o}})))})));const g=t=>{let o=[];if(t?.props?.children?.length>0&&"string"!=typeof t?.props?.children){const e=t?.props?.children.map((e=>e.type?g(e):e));o=[...e]}const n={...t?.props}||{};n.key=Date.now()+"."+Math.random(1e3);let r=t?.type?.toLowerCase();return r?e.createElement(r||"",n,o.length>0?o:null):null};function h(){const e=s((e=>e.dom)),t=s((e=>e.setDom)),o=m((e=>e.type)),n=m((e=>e.changeType)),r=m((e=>e.config)),a=m((e=>e.changeConfig)),l=d((e=>e.toggleModal));function i(e,t){let n=t;if(t||(n=r.xPath,n.reverse()),e?.props?.children.length){let t=n.pop(),c=(a=t,l=a?.replace(/[^0-9]/g,""),l),s=null;const d=e?.props?.children.filter(((n,a)=>{if(!n?.type&&n?.includes(r.selectedText)){s=a;const t=n.split(r.selectedText);let l=[];t.forEach(((e,n)=>{n===t.length-1?l.push(e):(l.push(e),l.push({type:"span",props:{children:"comment"===o.name?[r.selectedText,{type:"section",props:{className:"hover-card",children:[{type:"span",props:{className:"hover-title",children:[r.selectedText]}},o.value]}}]:[r.selectedText],className:`text-shadow-reed ${o.name} ${o.value?o.value:""} `}}))}));let i={type:"span",props:{children:l}},c=e?.props?.children;c[s]=i,Object.assign(e?.props?.children,c)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),i(d[c-1],n)}var a,l;return e}return{addBold:()=>{if("bold"===o.name&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""})}},addComment:()=>{if("comment"===o.name&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""})}},addHighlight:()=>{if("highlight"===o.name&&o.value&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function u(){const[o,n]=t(""),a=m((e=>e.changeType)),l=m((e=>e.type)),i=m((e=>e.changeConfig)),s=c((e=>e.toggleCommentModal)),{addComment:d}=h();r((()=>{l.name&&l.value&&(d(),s())}),[l.name,l.value,d,s]);return e.createElement("section",{className:"modal-container-reed"},e.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},e.createElement("span",{onClick:()=>{s(),a({name:"",value:""}),i({xPath:"",selectedText:""})},className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),e.createElement("h1",null,"Add Your Notes"),e.createElement("textarea",{onChange:e=>{e.preventDefault(),n(e.target.value)},className:"notes-input",placeholder:"Enter your Notes"}),e.createElement("button",{onClick:()=>{a({name:"comment",value:o})},className:"btn-submit-reed"},"Add Note")))}const x=["red","gold","white","blue","green","purple","orange","pink"];function f(t){const o=m((e=>e.changeType)),n=m((e=>e.type)),{addHighlight:a}=h(),l=d((e=>e.toggleModal)),i=m((e=>e.changeConfig)),c=t.colors||x;r((()=>{n.name&&n.value&&a()}),[n.value,a,n.name]);return e.createElement("section",{className:"modal-container-reed"},e.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},e.createElement("span",{onClick:()=>{l(),o({name:"",value:""}),i({xPath:"",selectedText:""})},className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),e.createElement("h1",null,"Pick your color"),e.createElement("div",{className:"container-reed"},c.map((t=>e.createElement("span",{className:"color-container-reed",key:t},e.createElement("div",{className:"color-box",onClick:()=>{o({name:"highlight",value:t})},style:{backgroundColor:`${t}`,scale:n.value===t?"1.3":"1"}}),e.createElement("span",{className:"color-name"},t)))))))}function b({x:o,y:n}){const[a,l]=t(!0),i=m((e=>e.changeType)),{addBold:s}=h(),p=d((e=>e.toggleModal)),g=c((e=>e.toggleCommentModal)),u=m((e=>e.type)),x=m((e=>e.config)),f=({name:e,value:t})=>{i({name:e,value:t}),"bold"!==e&&("comment"===e?g():p())};return r((()=>{"bold"===u.name&&x.selectedText&&s()}),[u.name,s]),r((()=>{l(!0)}),[o]),e.createElement(e.Fragment,null,a&&x.selectedText&&o?e.createElement("section",{style:{left:o-100+"px",top:`${n+10}px`,position:"absolute"}},e.createElement("div",{className:"floating-toolbar"},e.createElement("span",{onClick:()=>f({name:"bold"})},"B"),e.createElement("span",{onClick:()=>f({name:"highlight"})},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"}))),e.createElement("span",{onClick:()=>f({name:"comment"})},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"})))),e.createElement("span",{onClick:()=>l(!a),className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})))):null)}const v=l=>{const p=d((e=>e.open)),h=c((e=>e.openComment)),x=s((e=>e.setDom)),v=s((e=>e.dom)),w=g(v),{editorRef:y,mousePoint:k}=function(){const[e,a]=t({x:0,y:0}),l=m((e=>e.changeConfig)),c=o(),s=n((async e=>{if(!c.current.contains(e.target))return;let t=document.getSelection().toString();if(t){a({x:e.pageX,y:e.pageY});try{const e=(await i(document.getSelection().getRangeAt(0),c.current)).start.split("/").filter((e=>e)),[o,...n]=e;l({xPath:n,selectedText:t})}catch(e){}}}),[l]);return r((()=>(document.addEventListener("mouseup",s),()=>{document.removeEventListener("mouseup",s)})),[s]),{editorRef:c,mousePoint:e}}();return r((()=>{if(!v){const e=a(l.htmlContent.replace(/\s+/g," "));x({...e})}}),[v,x,l]),e.createElement(e.Fragment,null,p&&e.createElement(f,{colors:l.colors}),h&&e.createElement(u,null),v&&e.createElement("div",{className:"notes-wrapper",ref:y},w),e.createElement(b,{x:k.x,y:k.y}))},w=s;export{v as Editor,w as useDomValue};
+import e,{useState as t,useRef as o,useCallback as n,useEffect as r}from"react";import a from"react-from-dom";import{create as l}from"zustand";import{fromRange as i}from"xpath-range";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.comment{margin-bottom:1rem}.floating-toolbar{align-items:center;background:#fff;border-radius:12px;box-shadow:0 54px 55px rgba(0,0,0,.25),0 -12px 30px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.12),0 12px 13px rgba(0,0,0,.17),0 -3px 5px rgba(0,0,0,.09);display:flex;overflow:hidden}.floating-toolbar span{color:#000;cursor:pointer;font-size:28px;padding:6px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#f2f2f2;color:#0b0b78}.floating-toolbar-close{align-items:center;background:#fff;border-radius:100%;color:#0b0b78;cursor:pointer;display:flex;height:30px;justify-content:center;position:absolute;right:-15px;top:-15px;transition:all .2s ease;width:30px}.floating-toolbar-close:hover{scale:1.1}.modal-container-reed{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;position:fixed;top:0;width:100vw;z-index:100}.modal-content-reed{aspect-ratio:1;background:hsla(0,0%,76%,.8);border-radius:20px;box-shadow:.9px 0 0 .2px hsla(0,3%,50%,.8);flex-direction:column;padding:10px;width:40%}.container-reed,.modal-content-reed{align-items:center;display:flex;justify-content:center;margin:auto}.container-reed{flex-wrap:wrap;width:70%}.color-container-reed{align-items:center;display:flex;flex-direction:column;margin:30px}.color-box{background:rgba(0,0,0,.8);border-radius:100%;box-shadow:0 4px 8px rgba(0,0,0,.7);cursor:pointer;height:38px;transition:all .3s ease;width:38px}.color-box:hover{scale:1.2}.color-name{color:#280f60;margin-top:5px}.btn-submit-reed{background:#280f60;border:1px solid #280f60;border-radius:9px;color:#fff;cursor:pointer;font-family:Times New Roman,Times,serif;font-size:22px;margin-bottom:20px;outline:none;padding:14px 36px;transition:all .3s ease}.btn-submit-reed:hover{background:#482696}.modal-content-reed h1{color:#0b0b78}.comment{border:1px dashed gold;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;margin:0 2px;overflow:hidden;padding:6px 12px 6px 32px;position:relative}.hover-card{background:#000;background:#fff;background:linear-gradient(180deg,#ffe8e8,#fff);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px #ffe8e8;color:#000;font-style:italic;left:50%;max-height:300px;max-width:450px;overflow-y:scroll;padding:15px 20px;position:fixed;top:-300px;transform:translate(-50%,-50%);transition:all 1s ease;transition-delay:.5s;width:100%;z-index:100}.comment:hover>.hover-card{top:30%;transition-delay:0s}.hover-title{border-bottom:.2px solid #0b0b78;color:#0b0b78;display:block;font-weight:900;margin-bottom:16px;text-transform:uppercase;width:100%}.comment:before{color:"#fff";content:"  💬  ";height:100%;left:0;padding:0 6px;position:absolute;width:100%}.text-shadow-reed{font-weight:"bolder";text-shadow:.1px .1px #000}.highlight .bold{font-family:Times New Roman,Times,serif}.bold{font-weight:700;letter-spacing:1}.highlight{border-radius:4px;padding:4px}.notes-input{background-color:hsla(0,0%,100%,.02);border:none;border-radius:12px;color:#000;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red;color:#fff}.white{background:#fff;color:#000}.blue{background:blue;color:#fff}.green{background:green;color:#fff}.purple{background:purple;color:#fff}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const c=l((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),s=l((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),d=l((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),p={name:"",value:""},m=l((e=>({type:{...p},config:{xPath:"",selectedText:""},changeType:({name:t,value:o})=>e((e=>({type:{...e.type,name:t,value:o}}))),changeConfig:({xPath:t,selectedText:o})=>e((e=>({config:{...e.config,xPath:t,selectedText:o}})))})));const g=t=>{let o=[];if(t?.props?.children?.length>0&&"string"!=typeof t?.props?.children){const e=t?.props?.children.map((e=>e.type?g(e):e));o=[...e]}const n={...t?.props}||{};n.key=Date.now()+"."+Math.random(1e3);let r=t?.type?.toLowerCase();return r?e.createElement(r||"",n,o.length>0?o:null):null};function h(){const e=s((e=>e.dom)),t=s((e=>e.setDom)),o=m((e=>e.type)),n=m((e=>e.changeType)),r=m((e=>e.config)),a=m((e=>e.changeConfig)),l=d((e=>e.toggleModal));function i(e,t){let n=t;if(t||(n=r.xPath,n.reverse()),e?.props?.children.length){let t=n.pop(),c=(a=t,l=a?.replace(/[^0-9]/g,""),l),s=null;const d=e?.props?.children.filter(((n,a)=>{if(!n?.type&&n?.includes(r.selectedText)){s=a;const t=n.split(r.selectedText);let l=[];t.forEach(((e,n)=>{n===t.length-1?l.push(e):(l.push(e),l.push({type:"span",props:{children:"comment"===o.name?[r.selectedText,{type:"span",props:{className:"hover-card",children:[{type:"span",props:{className:"hover-title",children:[r.selectedText]}},o.value]}}]:[r.selectedText],className:`text-shadow-reed ${o.name} ${o.value?o.value:""} `}}))}));let i={type:"span",props:{children:l}},c=e?.props?.children;c[s]=i,Object.assign(e?.props?.children,c)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),i(d[c-1],n)}var a,l;return e}return{addBold:()=>{if("bold"===o.name&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""})}},addComment:()=>{if("comment"===o.name&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""})}},addHighlight:()=>{if("highlight"===o.name&&o.value&&r.selectedText&&r.xPath){let o=i(e,"");const r=Object.create(o);t(r),a({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function u(){const[o,n]=t(""),a=m((e=>e.changeType)),l=m((e=>e.type)),i=m((e=>e.changeConfig)),s=c((e=>e.toggleCommentModal)),{addComment:d}=h();r((()=>{l.name&&l.value&&(d(),s())}),[l.name,l.value,d,s]);return e.createElement("section",{className:"modal-container-reed"},e.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},e.createElement("span",{onClick:()=>{s(),a({name:"",value:""}),i({xPath:"",selectedText:""})},className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),e.createElement("h1",null,"Add Your Notes"),e.createElement("textarea",{onChange:e=>{e.preventDefault(),n(e.target.value)},className:"notes-input",placeholder:"Enter your Notes"}),e.createElement("button",{onClick:()=>{a({name:"comment",value:o})},className:"btn-submit-reed"},"Add Note")))}const x=["red","gold","white","blue","green","purple","orange","pink"];function f(t){const o=m((e=>e.changeType)),n=m((e=>e.type)),{addHighlight:a}=h(),l=d((e=>e.toggleModal)),i=m((e=>e.changeConfig)),c=t.colors||x;r((()=>{n.name&&n.value&&a()}),[n.value,a,n.name]);return e.createElement("section",{className:"modal-container-reed"},e.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},e.createElement("span",{onClick:()=>{l(),o({name:"",value:""}),i({xPath:"",selectedText:""})},className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),e.createElement("h1",null,"Pick your color"),e.createElement("div",{className:"container-reed"},c.map((t=>e.createElement("span",{className:"color-container-reed",key:t},e.createElement("div",{className:"color-box",onClick:()=>{o({name:"highlight",value:t})},style:{backgroundColor:`${t}`,scale:n.value===t?"1.3":"1"}}),e.createElement("span",{className:"color-name"},t)))))))}function b({x:o,y:n}){const[a,l]=t(!0),i=m((e=>e.changeType)),{addBold:s}=h(),p=d((e=>e.toggleModal)),g=c((e=>e.toggleCommentModal)),u=m((e=>e.type)),x=m((e=>e.config)),f=({name:e,value:t})=>{i({name:e,value:t}),"bold"!==e&&("comment"===e?g():p())};return r((()=>{"bold"===u.name&&x.selectedText&&s()}),[u.name,s]),r((()=>{l(!0)}),[o]),e.createElement(e.Fragment,null,a&&x.selectedText&&o?e.createElement("section",{style:{left:o-100+"px",top:`${n+10}px`,position:"absolute"}},e.createElement("div",{className:"floating-toolbar"},e.createElement("span",{onClick:()=>f({name:"bold"})},"B"),e.createElement("span",{onClick:()=>f({name:"highlight"})},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"}))),e.createElement("span",{onClick:()=>f({name:"comment"})},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"})))),e.createElement("span",{onClick:()=>l(!a),className:"floating-toolbar-close"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})))):null)}const v=l=>{const p=d((e=>e.open)),h=c((e=>e.openComment)),x=s((e=>e.setDom)),v=s((e=>e.dom)),w=g(v),{editorRef:y,mousePoint:k}=function(){const[e,a]=t({x:0,y:0}),l=m((e=>e.changeConfig)),c=o(),s=n((async e=>{if(!c.current.contains(e.target))return;let t=document.getSelection().toString();if(t){a({x:e.pageX,y:e.pageY});try{const e=(await i(document.getSelection().getRangeAt(0),c.current)).start.split("/").filter((e=>e)),[o,...n]=e;l({xPath:n,selectedText:t})}catch(e){}}}),[l]);return r((()=>(document.addEventListener("mouseup",s),()=>{document.removeEventListener("mouseup",s)})),[s]),{editorRef:c,mousePoint:e}}();return r((()=>{if(!v){const e=a(l.htmlContent.replace(/\s+/g," "));x({...e})}}),[v,x,l]),e.createElement(e.Fragment,null,p&&e.createElement(f,{colors:l.colors}),h&&e.createElement(u,null),v&&e.createElement("div",{className:"notes-wrapper",ref:y},w),e.createElement(b,{x:k.x,y:k.y}))},w=s;export{v as Editor,w as useDomValue};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-from-dom"),o=require("zustand"),n=require("xpath-range");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e),l=a(t);!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.comment{margin-bottom:1rem}.floating-toolbar{align-items:center;background:#fff;border-radius:12px;box-shadow:0 54px 55px rgba(0,0,0,.25),0 -12px 30px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.12),0 12px 13px rgba(0,0,0,.17),0 -3px 5px rgba(0,0,0,.09);display:flex;overflow:hidden}.floating-toolbar span{color:#000;cursor:pointer;font-size:28px;padding:6px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#f2f2f2;color:#0b0b78}.floating-toolbar-close{align-items:center;background:#fff;border-radius:100%;color:#0b0b78;cursor:pointer;display:flex;height:30px;justify-content:center;position:absolute;right:-15px;top:-15px;transition:all .2s ease;width:30px}.floating-toolbar-close:hover{scale:1.1}.modal-container-reed{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;position:fixed;top:0;width:100vw;z-index:100}.modal-content-reed{aspect-ratio:1;background:hsla(0,0%,76%,.8);border-radius:20px;box-shadow:.9px 0 0 .2px hsla(0,3%,50%,.8);flex-direction:column;padding:10px;width:40%}.container-reed,.modal-content-reed{align-items:center;display:flex;justify-content:center;margin:auto}.container-reed{flex-wrap:wrap;width:70%}.color-container-reed{align-items:center;display:flex;flex-direction:column;margin:30px}.color-box{background:rgba(0,0,0,.8);border-radius:100%;box-shadow:0 4px 8px rgba(0,0,0,.7);cursor:pointer;height:38px;transition:all .3s ease;width:38px}.color-box:hover{scale:1.2}.color-name{color:#280f60;margin-top:5px}.btn-submit-reed{background:#280f60;border:1px solid #280f60;border-radius:9px;color:#fff;cursor:pointer;font-family:Times New Roman,Times,serif;font-size:22px;margin-bottom:20px;outline:none;padding:14px 36px;transition:all .3s ease}.btn-submit-reed:hover{background:#482696}.modal-content-reed h1{color:#0b0b78}.comment{border:1px dashed gold;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;margin:0 2px;overflow:hidden;padding:6px 12px 6px 32px;position:relative}.hover-card{background:#000;background:#fff;background:linear-gradient(180deg,#ffe8e8,#fff);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px #ffe8e8;color:#000;font-style:italic;left:50%;max-height:300px;max-width:450px;overflow-y:scroll;padding:15px 20px;position:fixed;top:-300px;transform:translate(-50%,-50%);transition:all 1s ease;transition-delay:.5s;width:100%;z-index:100}.comment:hover>.hover-card{top:30%;transition-delay:0s}.hover-title{border-bottom:.2px solid #0b0b78;color:#0b0b78;display:block;font-weight:900;margin-bottom:16px;text-transform:uppercase;width:100%}.comment:before{color:"#fff";content:"  💬  ";height:100%;left:0;padding:0 6px;position:absolute;width:100%}.text-shadow-reed{font-weight:"bolder";text-shadow:.1px .1px #000}.highlight .bold{font-family:Times New Roman,Times,serif}.bold{font-weight:700;letter-spacing:1}.highlight{border-radius:4px;padding:4px}.notes-input{background-color:hsla(0,0%,100%,.02);border:none;border-radius:12px;color:#000;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red;color:#fff}.white{background:#fff;color:#000}.blue{background:blue;color:#fff}.green{background:green;color:#fff}.purple{background:purple;color:#fff}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const c=o.create((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),s=o.create((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),i=o.create((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),d={name:"",value:""},p=o.create((e=>({type:{...d},config:{xPath:"",selectedText:""},changeType:({name:t,value:o})=>e((e=>({type:{...e.type,name:t,value:o}}))),changeConfig:({xPath:t,selectedText:o})=>e((e=>({config:{...e.config,xPath:t,selectedText:o}})))})));const u=e=>{let t=[];if(e?.props?.children?.length>0&&"string"!=typeof e?.props?.children){const o=e?.props?.children.map((e=>e.type?u(e):e));t=[...o]}const o={...e?.props}||{};o.key=Date.now()+"."+Math.random(1e3);let n=e?.type?.toLowerCase();return n?r.default.createElement(n||"",o,t.length>0?t:null):null};function m(){const e=s((e=>e.dom)),t=s((e=>e.setDom)),o=p((e=>e.type)),n=p((e=>e.changeType)),a=p((e=>e.config)),r=p((e=>e.changeConfig)),l=i((e=>e.toggleModal));function c(e,t){let n=t;if(t||(n=a.xPath,n.reverse()),e?.props?.children.length){let t=n.pop(),s=(r=t,l=r?.replace(/[^0-9]/g,""),l),i=null;const d=e?.props?.children.filter(((n,r)=>{if(!n?.type&&n?.includes(a.selectedText)){i=r;const t=n.split(a.selectedText);let l=[];t.forEach(((e,n)=>{n===t.length-1?l.push(e):(l.push(e),l.push({type:"span",props:{children:"comment"===o.name?[a.selectedText,{type:"section",props:{className:"hover-card",children:[{type:"span",props:{className:"hover-title",children:[a.selectedText]}},o.value]}}]:[a.selectedText],className:`text-shadow-reed ${o.name} ${o.value?o.value:""} `}}))}));let c={type:"span",props:{children:l}},s=e?.props?.children;s[i]=c,Object.assign(e?.props?.children,s)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),c(d[s-1],n)}var r,l;return e}return{addBold:()=>{if("bold"===o.name&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""})}},addComment:()=>{if("comment"===o.name&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""})}},addHighlight:()=>{if("highlight"===o.name&&o.value&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function f(){const[t,o]=e.useState(""),n=p((e=>e.changeType)),a=p((e=>e.type)),l=p((e=>e.changeConfig)),s=c((e=>e.toggleCommentModal)),{addComment:i}=m();e.useEffect((()=>{a.name&&a.value&&(i(),s())}),[a.name,a.value,i,s]);return r.default.createElement("section",{className:"modal-container-reed"},r.default.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},r.default.createElement("span",{onClick:()=>{s(),n({name:"",value:""}),l({xPath:"",selectedText:""})},className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),r.default.createElement("h1",null,"Add Your Notes"),r.default.createElement("textarea",{onChange:e=>{e.preventDefault(),o(e.target.value)},className:"notes-input",placeholder:"Enter your Notes"}),r.default.createElement("button",{onClick:()=>{n({name:"comment",value:t})},className:"btn-submit-reed"},"Add Note")))}const g=["red","gold","white","blue","green","purple","orange","pink"];function h(t){const o=p((e=>e.changeType)),n=p((e=>e.type)),{addHighlight:a}=m(),l=i((e=>e.toggleModal)),c=p((e=>e.changeConfig)),s=t.colors||g;e.useEffect((()=>{n.name&&n.value&&a()}),[n.value,a,n.name]);return r.default.createElement("section",{className:"modal-container-reed"},r.default.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},r.default.createElement("span",{onClick:()=>{l(),o({name:"",value:""}),c({xPath:"",selectedText:""})},className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),r.default.createElement("h1",null,"Pick your color"),r.default.createElement("div",{className:"container-reed"},s.map((e=>r.default.createElement("span",{className:"color-container-reed",key:e},r.default.createElement("div",{className:"color-box",onClick:()=>{o({name:"highlight",value:e})},style:{backgroundColor:`${e}`,scale:n.value===e?"1.3":"1"}}),r.default.createElement("span",{className:"color-name"},e)))))))}function x({x:t,y:o}){const[n,a]=e.useState(!0),l=p((e=>e.changeType)),{addBold:s}=m(),d=i((e=>e.toggleModal)),u=c((e=>e.toggleCommentModal)),f=p((e=>e.type)),g=p((e=>e.config)),h=({name:e,value:t})=>{l({name:e,value:t}),"bold"!==e&&("comment"===e?u():d())};return e.useEffect((()=>{"bold"===f.name&&g.selectedText&&s()}),[f.name,s]),e.useEffect((()=>{a(!0)}),[t]),r.default.createElement(r.default.Fragment,null,n&&g.selectedText&&t?r.default.createElement("section",{style:{left:t-100+"px",top:`${o+10}px`,position:"absolute"}},r.default.createElement("div",{className:"floating-toolbar"},r.default.createElement("span",{onClick:()=>h({name:"bold"})},"B"),r.default.createElement("span",{onClick:()=>h({name:"highlight"})},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"}))),r.default.createElement("span",{onClick:()=>h({name:"comment"})},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"})))),r.default.createElement("span",{onClick:()=>a(!n),className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})))):null)}const b=t=>{const o=i((e=>e.open)),a=c((e=>e.openComment)),d=s((e=>e.setDom)),m=s((e=>e.dom)),g=u(m),{editorRef:b,mousePoint:v}=function(){const[t,o]=e.useState({x:0,y:0}),a=p((e=>e.changeConfig)),r=e.useRef(),l=e.useCallback((async e=>{if(!r.current.contains(e.target))return;let t=document.getSelection().toString();if(t){o({x:e.pageX,y:e.pageY});try{const e=(await n.fromRange(document.getSelection().getRangeAt(0),r.current)).start.split("/").filter((e=>e)),[o,...l]=e;a({xPath:l,selectedText:t})}catch(e){}}}),[a]);return e.useEffect((()=>(document.addEventListener("mouseup",l),()=>{document.removeEventListener("mouseup",l)})),[l]),{editorRef:r,mousePoint:t}}();return e.useEffect((()=>{if(!m){const e=l.default(t.htmlContent.replace(/\s+/g," "));d({...e})}}),[m,d,t]),r.default.createElement(r.default.Fragment,null,o&&r.default.createElement(h,{colors:t.colors}),a&&r.default.createElement(f,null),m&&r.default.createElement("div",{className:"notes-wrapper",ref:b},g),r.default.createElement(x,{x:v.x,y:v.y}))},v=s;exports.Editor=b,exports.useDomValue=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-from-dom"),o=require("zustand"),n=require("xpath-range");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e),l=a(t);!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.comment{margin-bottom:1rem}.floating-toolbar{align-items:center;background:#fff;border-radius:12px;box-shadow:0 54px 55px rgba(0,0,0,.25),0 -12px 30px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.12),0 12px 13px rgba(0,0,0,.17),0 -3px 5px rgba(0,0,0,.09);display:flex;overflow:hidden}.floating-toolbar span{color:#000;cursor:pointer;font-size:28px;padding:6px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#f2f2f2;color:#0b0b78}.floating-toolbar-close{align-items:center;background:#fff;border-radius:100%;color:#0b0b78;cursor:pointer;display:flex;height:30px;justify-content:center;position:absolute;right:-15px;top:-15px;transition:all .2s ease;width:30px}.floating-toolbar-close:hover{scale:1.1}.modal-container-reed{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;position:fixed;top:0;width:100vw;z-index:100}.modal-content-reed{aspect-ratio:1;background:hsla(0,0%,76%,.8);border-radius:20px;box-shadow:.9px 0 0 .2px hsla(0,3%,50%,.8);flex-direction:column;padding:10px;width:40%}.container-reed,.modal-content-reed{align-items:center;display:flex;justify-content:center;margin:auto}.container-reed{flex-wrap:wrap;width:70%}.color-container-reed{align-items:center;display:flex;flex-direction:column;margin:30px}.color-box{background:rgba(0,0,0,.8);border-radius:100%;box-shadow:0 4px 8px rgba(0,0,0,.7);cursor:pointer;height:38px;transition:all .3s ease;width:38px}.color-box:hover{scale:1.2}.color-name{color:#280f60;margin-top:5px}.btn-submit-reed{background:#280f60;border:1px solid #280f60;border-radius:9px;color:#fff;cursor:pointer;font-family:Times New Roman,Times,serif;font-size:22px;margin-bottom:20px;outline:none;padding:14px 36px;transition:all .3s ease}.btn-submit-reed:hover{background:#482696}.modal-content-reed h1{color:#0b0b78}.comment{border:1px dashed gold;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;margin:0 2px;overflow:hidden;padding:6px 12px 6px 32px;position:relative}.hover-card{background:#000;background:#fff;background:linear-gradient(180deg,#ffe8e8,#fff);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px #ffe8e8;color:#000;font-style:italic;left:50%;max-height:300px;max-width:450px;overflow-y:scroll;padding:15px 20px;position:fixed;top:-300px;transform:translate(-50%,-50%);transition:all 1s ease;transition-delay:.5s;width:100%;z-index:100}.comment:hover>.hover-card{top:30%;transition-delay:0s}.hover-title{border-bottom:.2px solid #0b0b78;color:#0b0b78;display:block;font-weight:900;margin-bottom:16px;text-transform:uppercase;width:100%}.comment:before{color:"#fff";content:"  💬  ";height:100%;left:0;padding:0 6px;position:absolute;width:100%}.text-shadow-reed{font-weight:"bolder";text-shadow:.1px .1px #000}.highlight .bold{font-family:Times New Roman,Times,serif}.bold{font-weight:700;letter-spacing:1}.highlight{border-radius:4px;padding:4px}.notes-input{background-color:hsla(0,0%,100%,.02);border:none;border-radius:12px;color:#000;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red;color:#fff}.white{background:#fff;color:#000}.blue{background:blue;color:#fff}.green{background:green;color:#fff}.purple{background:purple;color:#fff}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const c=o.create((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),s=o.create((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),d=o.create((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),i={name:"",value:""},p=o.create((e=>({type:{...i},config:{xPath:"",selectedText:""},changeType:({name:t,value:o})=>e((e=>({type:{...e.type,name:t,value:o}}))),changeConfig:({xPath:t,selectedText:o})=>e((e=>({config:{...e.config,xPath:t,selectedText:o}})))})));const u=e=>{let t=[];if(e?.props?.children?.length>0&&"string"!=typeof e?.props?.children){const o=e?.props?.children.map((e=>e.type?u(e):e));t=[...o]}const o={...e?.props}||{};o.key=Date.now()+"."+Math.random(1e3);let n=e?.type?.toLowerCase();return n?r.default.createElement(n||"",o,t.length>0?t:null):null};function m(){const e=s((e=>e.dom)),t=s((e=>e.setDom)),o=p((e=>e.type)),n=p((e=>e.changeType)),a=p((e=>e.config)),r=p((e=>e.changeConfig)),l=d((e=>e.toggleModal));function c(e,t){let n=t;if(t||(n=a.xPath,n.reverse()),e?.props?.children.length){let t=n.pop(),s=(r=t,l=r?.replace(/[^0-9]/g,""),l),d=null;const i=e?.props?.children.filter(((n,r)=>{if(!n?.type&&n?.includes(a.selectedText)){d=r;const t=n.split(a.selectedText);let l=[];t.forEach(((e,n)=>{n===t.length-1?l.push(e):(l.push(e),l.push({type:"span",props:{children:"comment"===o.name?[a.selectedText,{type:"span",props:{className:"hover-card",children:[{type:"span",props:{className:"hover-title",children:[a.selectedText]}},o.value]}}]:[a.selectedText],className:`text-shadow-reed ${o.name} ${o.value?o.value:""} `}}))}));let c={type:"span",props:{children:l}},s=e?.props?.children;s[d]=c,Object.assign(e?.props?.children,s)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),c(i[s-1],n)}var r,l;return e}return{addBold:()=>{if("bold"===o.name&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""})}},addComment:()=>{if("comment"===o.name&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""})}},addHighlight:()=>{if("highlight"===o.name&&o.value&&a.selectedText&&a.xPath){let o=c(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function f(){const[t,o]=e.useState(""),n=p((e=>e.changeType)),a=p((e=>e.type)),l=p((e=>e.changeConfig)),s=c((e=>e.toggleCommentModal)),{addComment:d}=m();e.useEffect((()=>{a.name&&a.value&&(d(),s())}),[a.name,a.value,d,s]);return r.default.createElement("section",{className:"modal-container-reed"},r.default.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},r.default.createElement("span",{onClick:()=>{s(),n({name:"",value:""}),l({xPath:"",selectedText:""})},className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),r.default.createElement("h1",null,"Add Your Notes"),r.default.createElement("textarea",{onChange:e=>{e.preventDefault(),o(e.target.value)},className:"notes-input",placeholder:"Enter your Notes"}),r.default.createElement("button",{onClick:()=>{n({name:"comment",value:t})},className:"btn-submit-reed"},"Add Note")))}const g=["red","gold","white","blue","green","purple","orange","pink"];function h(t){const o=p((e=>e.changeType)),n=p((e=>e.type)),{addHighlight:a}=m(),l=d((e=>e.toggleModal)),c=p((e=>e.changeConfig)),s=t.colors||g;e.useEffect((()=>{n.name&&n.value&&a()}),[n.value,a,n.name]);return r.default.createElement("section",{className:"modal-container-reed"},r.default.createElement("div",{className:"modal-content-reed",style:{position:"relative"}},r.default.createElement("span",{onClick:()=>{l(),o({name:"",value:""}),c({xPath:"",selectedText:""})},className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))),r.default.createElement("h1",null,"Pick your color"),r.default.createElement("div",{className:"container-reed"},s.map((e=>r.default.createElement("span",{className:"color-container-reed",key:e},r.default.createElement("div",{className:"color-box",onClick:()=>{o({name:"highlight",value:e})},style:{backgroundColor:`${e}`,scale:n.value===e?"1.3":"1"}}),r.default.createElement("span",{className:"color-name"},e)))))))}function x({x:t,y:o}){const[n,a]=e.useState(!0),l=p((e=>e.changeType)),{addBold:s}=m(),i=d((e=>e.toggleModal)),u=c((e=>e.toggleCommentModal)),f=p((e=>e.type)),g=p((e=>e.config)),h=({name:e,value:t})=>{l({name:e,value:t}),"bold"!==e&&("comment"===e?u():i())};return e.useEffect((()=>{"bold"===f.name&&g.selectedText&&s()}),[f.name,s]),e.useEffect((()=>{a(!0)}),[t]),r.default.createElement(r.default.Fragment,null,n&&g.selectedText&&t?r.default.createElement("section",{style:{left:t-100+"px",top:`${o+10}px`,position:"absolute"}},r.default.createElement("div",{className:"floating-toolbar"},r.default.createElement("span",{onClick:()=>h({name:"bold"})},"B"),r.default.createElement("span",{onClick:()=>h({name:"highlight"})},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 11.25l1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 10-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"}))),r.default.createElement("span",{onClick:()=>h({name:"comment"})},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",height:"20px",width:"20px"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"})))),r.default.createElement("span",{onClick:()=>a(!n),className:"floating-toolbar-close"},r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"27px",width:"27px",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor"},r.default.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})))):null)}const b=t=>{const o=d((e=>e.open)),a=c((e=>e.openComment)),i=s((e=>e.setDom)),m=s((e=>e.dom)),g=u(m),{editorRef:b,mousePoint:v}=function(){const[t,o]=e.useState({x:0,y:0}),a=p((e=>e.changeConfig)),r=e.useRef(),l=e.useCallback((async e=>{if(!r.current.contains(e.target))return;let t=document.getSelection().toString();if(t){o({x:e.pageX,y:e.pageY});try{const e=(await n.fromRange(document.getSelection().getRangeAt(0),r.current)).start.split("/").filter((e=>e)),[o,...l]=e;a({xPath:l,selectedText:t})}catch(e){}}}),[a]);return e.useEffect((()=>(document.addEventListener("mouseup",l),()=>{document.removeEventListener("mouseup",l)})),[l]),{editorRef:r,mousePoint:t}}();return e.useEffect((()=>{if(!m){const e=l.default(t.htmlContent.replace(/\s+/g," "));i({...e})}}),[m,i,t]),r.default.createElement(r.default.Fragment,null,o&&r.default.createElement(h,{colors:t.colors}),a&&r.default.createElement(f,null),m&&r.default.createElement("div",{className:"notes-wrapper",ref:b},g),r.default.createElement(x,{x:v.x,y:v.y}))},v=s;exports.Editor=b,exports.useDomValue=v;

package.json

 {
   "name": "reactjs-editor",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "A simple react library that lets you highlight text, make text bold, and add comment on any text as a sticky notes",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/customHooks/useUpdateDom.js

@@ -48,3 +48,3 @@ import extractNumber from "../utils/extractNumberfromString";
                            {
-                             type: "section",
+                             type: "span",
                              props: {
@@ -51,0 +51,0 @@ className: "hover-card",

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

58619

-0.02%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes