reactjs-editor - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/index.es.js

@@ -1,1 +0,1 @@
-import e,{useState as t,useRef as o,useCallback as n,useEffect as a}from"react";import r 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],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))}}('header{background-color:#333;color:#fff;color:gold;padding:2rem;text-align:center}.blog-post{margin:0 auto;max-width:800px;padding:1rem}.heading{font-size:58px}.post-title{font-size:2.7rem;line-height:1.2}.post-meta{color:#888}.post-content{margin-top:1rem}ul{list-style:none;margin:0;padding:0}.comments-section{border-top:1px solid #ccc;margin:2rem auto;max-width:800px;padding:1rem}.comment{margin-bottom:1rem}.comment-author{font-weight:700}.left-right{float:left;margin:2% 2.5% 1rem 0;padding:1rem;width:45%}.top-bottom{clear:both;margin-bottom:1rem;margin-top:1rem}.blog-quote{background-color:#333;border-left:4px solid #333;margin:1rem 0;padding:10px}.card-with-shadow{background-color:#333;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);margin-bottom:2rem;margin-top:2rem;padding:15px}.floating-toolbar{align-items:center;background:#333;border:1px solid gold;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{cursor:pointer;font-size:28px;padding:1px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#000;color:gold}.floating-toolbar-close{align-items:center;background:#333;border-radius:100%;color:gold;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{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{aspect-ratio:1;background:rgba(0,0,0,.8);border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);flex-direction:column;padding:10px;width:40%}.container,.modal-content{align-items:center;display:flex;justify-content:center;margin:auto}.container{flex-wrap:wrap;width:70%}.color-container{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:gray}.btn-submit{background:#000;border:1px solid gold;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:hover{background:gold;color:#000}.modal-content h1{color:gold}.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:linear-gradient(180deg,#333,#000);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);color:#f1f1f1;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 gold;color:gold;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{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:#fff;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red}.white{background:#fff;color:#000}.blue{background:blue}.green{background:green}.purple{background:purple}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}.notes-wrapper{display:none}.notice-info-mobile-users{color:gold;display:block;font-size:28px;padding:30px;text-align:center}.final-cta{font-weight:700;text-shadow:2px 2px gold}@media (min-width:1024px){.notes-wrapper{display:block}.notice-info-mobile-users{display:none}}.containers{display:flex;flex-direction:column;margin:0 auto;max-width:800px;padding:20px}.heading{animation:fadeInDown .6s ease-out forwards;font-size:30px;margin-bottom:20px;opacity:0;text-align:center;transform:translateY(-20px)}.list-container{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between}.list{border-radius:5px;border-radius:12px;list-style-type:none;padding:10}.list-left{flex:1;margin-right:10px}.list-right{flex:1;margin-left:10px}.list-item{box-shadow:0 0 10px rgba(0,0,0,.3);font-size:18px;margin:5px;padding:10px;transform:translateY(20px)}.image-container,.list-item{animation:fadeInUp .6s ease-out forwards;opacity:0}.image-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:10%;transform:translateY(100px)}.image-column{flex-basis:calc(90.33% - 10px);margin:20px auto}.image-column img{border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3);height:auto;width:100%}@media screen and (max-width:768px){.image-column{flex-basis:calc(90% - 10px)}}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const s=l((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),c=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 a=t?.type?.toLowerCase();return e.createElement(a,n,o.length>0?o:null)};function x(){const e=c((e=>e.dom)),t=c((e=>e.setDom)),o=m((e=>e.type)),n=m((e=>e.changeType)),a=m((e=>e.config)),r=m((e=>e.changeConfig)),l=d((e=>e.toggleModal));function i(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),c=null;const d=e?.props?.children.filter(((n,r)=>{if(!n?.type&&n?.includes(a.selectedText)){c=r,console.log("yes here it is",n,o);const t=n.split(a.selectedText);let l={type:"span",props:{children:[t[0],{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 ${o.name} ${o.value?o.value:""} `}},t[1]]}},i=e?.props?.children;i[c]=l,Object.assign(e?.props?.children,i)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),i(d[s-1],n)}var r,l;return e}return{addBold:()=>{if("bold"===o.name&&a.selectedText&&a.xPath){let o=i(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=i(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=i(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function u(){const[o,n]=t(""),r=m((e=>e.changeType)),l=m((e=>e.type)),i=s((e=>e.toggleCommentModal)),{addComment:c}=x();a((()=>{l.name&&l.value&&(c(),i())}),[l.name,l.value,c,i]);return e.createElement("section",{className:"modal-container"},e.createElement("div",{className:"modal-content"},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:()=>{r({name:"comment",value:o})},className:"btn-submit"},"Add Note")))}const h=[{name:"red",color:"red"},{name:"gold",color:"gold"},{name:"white",color:"white"},{name:"blue",color:"blue"},{name:"green",color:"green"},{name:"purple",color:"purple"},{name:"orange",color:"orange"},{name:"grey",color:"grey"},{name:"pink",color:"pink"}];function f(){const t=m((e=>e.changeType)),o=m((e=>e.type)),{addHighlight:n}=x();d((e=>e.toggleModal)),a((()=>{o.name&&o.value&&n()}),[o.value,n,o.name]);return e.createElement("section",{className:"modal-container"},e.createElement("div",{className:"modal-content"},e.createElement("h1",null,"Pick your color"),e.createElement("div",{className:"container"},h.map((n=>e.createElement("span",{className:"color-container",key:n.name},e.createElement("div",{className:"color-box",onClick:()=>{return e=n.name,void t({name:"highlight",value:e});var e},style:{backgroundColor:`${n.name}`,scale:o.value===n.name?"1.3":"1"}}),e.createElement("span",{className:"color-name"},n.name)))))))}function b({x:o,y:n}){const[r,l]=t(!0),i=m((e=>e.changeType)),{addBold:c}=x(),p=d((e=>e.toggleModal)),g=s((e=>e.toggleCommentModal)),u=m((e=>e.type)),h=m((e=>e.config)),f=({name:e,value:t})=>{i({name:e,value:t}),"bold"!==e&&("comment"===e?g():p())};return a((()=>{"bold"===u.name&&h.selectedText&&c()}),[u.name,c]),a((()=>{l(!0)}),[o]),e.createElement(e.Fragment,null,r&&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(!r),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 w=l=>{const p=d((e=>e.open)),x=s((e=>e.openComment)),h=c((e=>e.setDom)),w=c((e=>e.dom)),y=g(w),{editorRef:v,mousePoint:k}=function(){const[e,r]=t({x:0,y:0}),l=m((e=>e.changeConfig)),s=o(),c=n((e=>{if(!s.current.contains(e.target))return;let t=document.getSelection().toString();if(!t)return;r({x:e.pageX,y:e.pageY});const o=i(document.getSelection().getRangeAt(0),s.current).start.split("/").filter((e=>e)),[n,...a]=o;l({xPath:a,selectedText:t})}),[l]);return a((()=>(document.addEventListener("mouseup",c),()=>{document.removeEventListener("mouseup",c)})),[c]),{editorRef:s,mousePoint:e}}();return a((()=>{if(!w){const e=r(l.htmlContent);h({...e})}}),[w,h,l]),e.createElement(e.Fragment,null,p&&e.createElement(f,null),x&&e.createElement(u,null),w&&e.createElement("div",{className:"notes-wrapper",ref:v},y),e.createElement(b,{x:k.x,y:k.y}),e.createElement("p",null,"Not available for mobile"))};export{w as default};
+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))}}('header{background-color:#333;color:#fff;color:gold;padding:2rem;text-align:center}.blog-post{margin:0 auto;max-width:800px;padding:1rem}.heading{font-size:58px}.post-title{font-size:2.7rem;line-height:1.2}.post-meta{color:#888}.post-content{margin-top:1rem}ul{list-style:none;margin:0;padding:0}.comments-section{border-top:1px solid #ccc;margin:2rem auto;max-width:800px;padding:1rem}.comment{margin-bottom:1rem}.comment-author{font-weight:700}.left-right{float:left;margin:2% 2.5% 1rem 0;padding:1rem;width:45%}.top-bottom{clear:both;margin-bottom:1rem;margin-top:1rem}.blog-quote{background-color:#333;border-left:4px solid #333;margin:1rem 0;padding:10px}.card-with-shadow{background-color:#333;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);margin-bottom:2rem;margin-top:2rem;padding:15px}.floating-toolbar{align-items:center;background:#333;border:1px solid gold;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{cursor:pointer;font-size:28px;padding:1px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#000;color:gold}.floating-toolbar-close{align-items:center;background:#333;border-radius:100%;color:gold;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{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{aspect-ratio:1;background:rgba(0,0,0,.8);border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);flex-direction:column;padding:10px;width:40%}.container,.modal-content{align-items:center;display:flex;justify-content:center;margin:auto}.container{flex-wrap:wrap;width:70%}.color-container{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:gray}.btn-submit{background:#000;border:1px solid gold;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:hover{background:gold;color:#000}.modal-content h1{color:gold}.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:linear-gradient(180deg,#333,#000);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);color:#f1f1f1;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 gold;color:gold;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{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:#fff;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red}.white{background:#fff;color:#000}.blue{background:blue}.green{background:green}.purple{background:purple}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}.boldIcon{font-size:12px}@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})))}))),d=l((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),s=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 e.createElement(r,n,o.length>0?o:null)};function h(){const e=d((e=>e.dom)),t=d((e=>e.setDom)),o=m((e=>e.type)),n=m((e=>e.changeType)),r=m((e=>e.config)),a=m((e=>e.changeConfig)),l=s((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),d=null;const s=e?.props?.children.filter(((n,a)=>{if(!n?.type&&n?.includes(r.selectedText)){d=a,console.log("yes here it is",n,o);const t=n.split(r.selectedText);let l={type:"span",props:{children:[t[0],{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 ${o.name} ${o.value?o.value:""} `}},t[1]]}},i=e?.props?.children;i[d]=l,Object.assign(e?.props?.children,i)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),i(s[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=c((e=>e.toggleCommentModal)),{addComment:d}=h();r((()=>{l.name&&l.value&&(d(),i())}),[l.name,l.value,d,i]);return e.createElement("section",{className:"modal-container"},e.createElement("div",{className:"modal-content"},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"},"Add Note")))}const x=[{name:"red",color:"red"},{name:"gold",color:"gold"},{name:"white",color:"white"},{name:"blue",color:"blue"},{name:"green",color:"green"},{name:"purple",color:"purple"},{name:"orange",color:"orange"},{name:"grey",color:"grey"},{name:"pink",color:"pink"}];function f(){const t=m((e=>e.changeType)),o=m((e=>e.type)),{addHighlight:n}=h();s((e=>e.toggleModal)),r((()=>{o.name&&o.value&&n()}),[o.value,n,o.name]);return e.createElement("section",{className:"modal-container"},e.createElement("div",{className:"modal-content"},e.createElement("h1",null,"Pick your color"),e.createElement("div",{className:"container"},x.map((n=>e.createElement("span",{className:"color-container",key:n.name},e.createElement("div",{className:"color-box",onClick:()=>{return e=n.name,void t({name:"highlight",value:e});var e},style:{backgroundColor:`${n.name}`,scale:o.value===n.name?"1.3":"1"}}),e.createElement("span",{className:"color-name"},n.name)))))))}function b({x:o,y:n}){const[a,l]=t(!0),i=m((e=>e.changeType)),{addBold:d}=h(),p=s((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&&d()}),[u.name,d]),r((()=>{l(!0)}),[o]),e.createElement(e.Fragment,null,a&&o?e.createElement("section",{style:{left:o-100+"px",top:`${n+10}px`,position:"absolute"}},e.createElement("div",{className:"floating-toolbar"},e.createElement("span",{className:"boldIcon",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=s((e=>e.open)),h=c((e=>e.openComment)),x=d((e=>e.setDom)),v=d((e=>e.dom)),y=g(v),{editorRef:w,mousePoint:k}=function(){const[e,a]=t({x:0,y:0}),l=m((e=>e.changeConfig)),c=o(),d=n((e=>{if(!c.current.contains(e.target))return;let t=document.getSelection().toString();if(!t)return;a({x:e.pageX,y:e.pageY});const o=i(document.getSelection().getRangeAt(0),c.current).start.split("/").filter((e=>e)),[n,...r]=o;l({xPath:r,selectedText:t})}),[l]);return r((()=>(document.addEventListener("mouseup",d),()=>{document.removeEventListener("mouseup",d)})),[d]),{editorRef:c,mousePoint:e}}();return r((()=>{if(!v){const e=a(l.htmlContent);x({...e})}}),[v,x,l]),e.createElement(e.Fragment,null,p&&e.createElement(f,null),h&&e.createElement(u,null),v&&e.createElement("div",{className:"notes-wrapper",ref:w},y),e.createElement(b,{x:k.x,y:k.y}))};export{v as default};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("react"),t=require("react-from-dom"),o=require("zustand"),a=require("xpath-range");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),l=n(t);!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('header{background-color:#333;color:#fff;color:gold;padding:2rem;text-align:center}.blog-post{margin:0 auto;max-width:800px;padding:1rem}.heading{font-size:58px}.post-title{font-size:2.7rem;line-height:1.2}.post-meta{color:#888}.post-content{margin-top:1rem}ul{list-style:none;margin:0;padding:0}.comments-section{border-top:1px solid #ccc;margin:2rem auto;max-width:800px;padding:1rem}.comment{margin-bottom:1rem}.comment-author{font-weight:700}.left-right{float:left;margin:2% 2.5% 1rem 0;padding:1rem;width:45%}.top-bottom{clear:both;margin-bottom:1rem;margin-top:1rem}.blog-quote{background-color:#333;border-left:4px solid #333;margin:1rem 0;padding:10px}.card-with-shadow{background-color:#333;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);margin-bottom:2rem;margin-top:2rem;padding:15px}.floating-toolbar{align-items:center;background:#333;border:1px solid gold;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{cursor:pointer;font-size:28px;padding:1px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#000;color:gold}.floating-toolbar-close{align-items:center;background:#333;border-radius:100%;color:gold;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{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{aspect-ratio:1;background:rgba(0,0,0,.8);border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);flex-direction:column;padding:10px;width:40%}.container,.modal-content{align-items:center;display:flex;justify-content:center;margin:auto}.container{flex-wrap:wrap;width:70%}.color-container{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:gray}.btn-submit{background:#000;border:1px solid gold;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:hover{background:gold;color:#000}.modal-content h1{color:gold}.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:linear-gradient(180deg,#333,#000);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);color:#f1f1f1;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 gold;color:gold;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{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:#fff;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red}.white{background:#fff;color:#000}.blue{background:blue}.green{background:green}.purple{background:purple}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}.notes-wrapper{display:none}.notice-info-mobile-users{color:gold;display:block;font-size:28px;padding:30px;text-align:center}.final-cta{font-weight:700;text-shadow:2px 2px gold}@media (min-width:1024px){.notes-wrapper{display:block}.notice-info-mobile-users{display:none}}.containers{display:flex;flex-direction:column;margin:0 auto;max-width:800px;padding:20px}.heading{animation:fadeInDown .6s ease-out forwards;font-size:30px;margin-bottom:20px;opacity:0;text-align:center;transform:translateY(-20px)}.list-container{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between}.list{border-radius:5px;border-radius:12px;list-style-type:none;padding:10}.list-left{flex:1;margin-right:10px}.list-right{flex:1;margin-left:10px}.list-item{box-shadow:0 0 10px rgba(0,0,0,.3);font-size:18px;margin:5px;padding:10px;transform:translateY(20px)}.image-container,.list-item{animation:fadeInUp .6s ease-out forwards;opacity:0}.image-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:10%;transform:translateY(100px)}.image-column{flex-basis:calc(90.33% - 10px);margin:20px auto}.image-column img{border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3);height:auto;width:100%}@media screen and (max-width:768px){.image-column{flex-basis:calc(90% - 10px)}}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const i=o.create((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),d=o.create((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),s=o.create((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),c={name:"",value:""},p=o.create((e=>({type:{...c},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 m=e=>{let t=[];if(e?.props?.children?.length>0&&"string"!=typeof e?.props?.children){const o=e?.props?.children.map((e=>e.type?m(e):e));t=[...o]}const o={...e?.props}||{};o.key=Date.now()+"."+Math.random(1e3);let a=e?.type?.toLowerCase();return r.default.createElement(a,o,t.length>0?t:null)};function g(){const e=d((e=>e.dom)),t=d((e=>e.setDom)),o=p((e=>e.type)),a=p((e=>e.changeType)),n=p((e=>e.config)),r=p((e=>e.changeConfig)),l=s((e=>e.toggleModal));function i(e,t){let a=t;if(t||(a=n.xPath,a.reverse()),e?.props?.children.length){let t=a.pop(),d=(r=t,l=r?.replace(/[^0-9]/g,""),l),s=null;const c=e?.props?.children.filter(((a,r)=>{if(!a?.type&&a?.includes(n.selectedText)){s=r,console.log("yes here it is",a,o);const t=a.split(n.selectedText);let l={type:"span",props:{children:[t[0],{type:"span",props:{children:"comment"===o.name?[n.selectedText,{type:"section",props:{className:"hover-card",children:[{type:"span",props:{className:"hover-title",children:[n.selectedText]}},o.value]}}]:[n.selectedText],className:`text-shadow ${o.name} ${o.value?o.value:""} `}},t[1]]}},i=e?.props?.children;i[s]=l,Object.assign(e?.props?.children,i)}return t?.startsWith(a.type,[])}));Object.assign(e?.props?.children,[]),i(c[d-1],a)}var r,l;return e}return{addBold:()=>{if("bold"===o.name&&n.selectedText&&n.xPath){let o=i(e,"");const n=Object.create(o);t(n),r({xPath:"",selectedText:""}),a({name:"",value:""})}},addComment:()=>{if("comment"===o.name&&n.selectedText&&n.xPath){let o=i(e,"");const n=Object.create(o);t(n),r({xPath:"",selectedText:""}),a({name:"",value:""})}},addHighlight:()=>{if("highlight"===o.name&&o.value&&n.selectedText&&n.xPath){let o=i(e,"");const n=Object.create(o);t(n),r({xPath:"",selectedText:""}),a({name:"",value:""}),l((e=>!e))}}}}function u(){const[t,o]=e.useState(""),a=p((e=>e.changeType)),n=p((e=>e.type)),l=i((e=>e.toggleCommentModal)),{addComment:d}=g();e.useEffect((()=>{n.name&&n.value&&(d(),l())}),[n.name,n.value,d,l]);return r.default.createElement("section",{className:"modal-container"},r.default.createElement("div",{className:"modal-content"},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:()=>{a({name:"comment",value:t})},className:"btn-submit"},"Add Note")))}const x=[{name:"red",color:"red"},{name:"gold",color:"gold"},{name:"white",color:"white"},{name:"blue",color:"blue"},{name:"green",color:"green"},{name:"purple",color:"purple"},{name:"orange",color:"orange"},{name:"grey",color:"grey"},{name:"pink",color:"pink"}];function f(){const t=p((e=>e.changeType)),o=p((e=>e.type)),{addHighlight:a}=g();s((e=>e.toggleModal)),e.useEffect((()=>{o.name&&o.value&&a()}),[o.value,a,o.name]);return r.default.createElement("section",{className:"modal-container"},r.default.createElement("div",{className:"modal-content"},r.default.createElement("h1",null,"Pick your color"),r.default.createElement("div",{className:"container"},x.map((e=>r.default.createElement("span",{className:"color-container",key:e.name},r.default.createElement("div",{className:"color-box",onClick:()=>{return o=e.name,void t({name:"highlight",value:o});var o},style:{backgroundColor:`${e.name}`,scale:o.value===e.name?"1.3":"1"}}),r.default.createElement("span",{className:"color-name"},e.name)))))))}function h({x:t,y:o}){const[a,n]=e.useState(!0),l=p((e=>e.changeType)),{addBold:d}=g(),c=s((e=>e.toggleModal)),m=i((e=>e.toggleCommentModal)),u=p((e=>e.type)),x=p((e=>e.config)),f=({name:e,value:t})=>{l({name:e,value:t}),"bold"!==e&&("comment"===e?m():c())};return e.useEffect((()=>{"bold"===u.name&&x.selectedText&&d()}),[u.name,d]),e.useEffect((()=>{n(!0)}),[t]),r.default.createElement(r.default.Fragment,null,a&&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:()=>f({name:"bold"})},"B"),r.default.createElement("span",{onClick:()=>f({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:()=>f({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:()=>n(!a),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)}module.exports=t=>{const o=s((e=>e.open)),n=i((e=>e.openComment)),c=d((e=>e.setDom)),g=d((e=>e.dom)),x=m(g),{editorRef:b,mousePoint:w}=function(){const[t,o]=e.useState({x:0,y:0}),n=p((e=>e.changeConfig)),r=e.useRef(),l=e.useCallback((e=>{if(!r.current.contains(e.target))return;let t=document.getSelection().toString();if(!t)return;o({x:e.pageX,y:e.pageY});const l=a.fromRange(document.getSelection().getRangeAt(0),r.current).start.split("/").filter((e=>e)),[i,...d]=l;n({xPath:d,selectedText:t})}),[n]);return e.useEffect((()=>(document.addEventListener("mouseup",l),()=>{document.removeEventListener("mouseup",l)})),[l]),{editorRef:r,mousePoint:t}}();return e.useEffect((()=>{if(!g){const e=l.default(t.htmlContent);c({...e})}}),[g,c,t]),r.default.createElement(r.default.Fragment,null,o&&r.default.createElement(f,null),n&&r.default.createElement(u,null),g&&r.default.createElement("div",{className:"notes-wrapper",ref:b},x),r.default.createElement(h,{x:w.x,y:w.y}),r.default.createElement("p",null,"Not available for mobile"))};
+"use strict";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))}}('header{background-color:#333;color:#fff;color:gold;padding:2rem;text-align:center}.blog-post{margin:0 auto;max-width:800px;padding:1rem}.heading{font-size:58px}.post-title{font-size:2.7rem;line-height:1.2}.post-meta{color:#888}.post-content{margin-top:1rem}ul{list-style:none;margin:0;padding:0}.comments-section{border-top:1px solid #ccc;margin:2rem auto;max-width:800px;padding:1rem}.comment{margin-bottom:1rem}.comment-author{font-weight:700}.left-right{float:left;margin:2% 2.5% 1rem 0;padding:1rem;width:45%}.top-bottom{clear:both;margin-bottom:1rem;margin-top:1rem}.blog-quote{background-color:#333;border-left:4px solid #333;margin:1rem 0;padding:10px}.card-with-shadow{background-color:#333;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);margin-bottom:2rem;margin-top:2rem;padding:15px}.floating-toolbar{align-items:center;background:#333;border:1px solid gold;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{cursor:pointer;font-size:28px;padding:1px 18px;position:relative;transition:all .2s ease-in-out}.floating-toolbar span:hover{background:#000;color:gold}.floating-toolbar-close{align-items:center;background:#333;border-radius:100%;color:gold;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{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{aspect-ratio:1;background:rgba(0,0,0,.8);border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);flex-direction:column;padding:10px;width:40%}.container,.modal-content{align-items:center;display:flex;justify-content:center;margin:auto}.container{flex-wrap:wrap;width:70%}.color-container{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:gray}.btn-submit{background:#000;border:1px solid gold;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:hover{background:gold;color:#000}.modal-content h1{color:gold}.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:linear-gradient(180deg,#333,#000);border:30px solid trasparent;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.7);color:#f1f1f1;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 gold;color:gold;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{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:#fff;font-size:18px;height:60%;outline:none;padding:12px;width:90%}.gold{background:gold}.red{background:red}.white{background:#fff;color:#000}.blue{background:blue}.green{background:green}.purple{background:purple}.orange{background:orange}.grey{background:grey}::-moz-selection{background:gold;color:#000}::selection{background:gold;color:#000}.boldIcon{font-size:12px}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}');const i=o.create((e=>({openComment:!1,toggleCommentModal:()=>e((e=>({openComment:!e.openComment})))}))),d=o.create((e=>({dom:null,setDom:t=>e((e=>({dom:t})))}))),c=o.create((e=>({open:!1,toggleModal:()=>e((e=>({open:!e.open})))}))),s={name:"",value:""},p=o.create((e=>({type:{...s},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 m=e=>{let t=[];if(e?.props?.children?.length>0&&"string"!=typeof e?.props?.children){const o=e?.props?.children.map((e=>e.type?m(e):e));t=[...o]}const o={...e?.props}||{};o.key=Date.now()+"."+Math.random(1e3);let n=e?.type?.toLowerCase();return r.default.createElement(n,o,t.length>0?t:null)};function g(){const e=d((e=>e.dom)),t=d((e=>e.setDom)),o=p((e=>e.type)),n=p((e=>e.changeType)),a=p((e=>e.config)),r=p((e=>e.changeConfig)),l=c((e=>e.toggleModal));function i(e,t){let n=t;if(t||(n=a.xPath,n.reverse()),e?.props?.children.length){let t=n.pop(),d=(r=t,l=r?.replace(/[^0-9]/g,""),l),c=null;const s=e?.props?.children.filter(((n,r)=>{if(!n?.type&&n?.includes(a.selectedText)){c=r,console.log("yes here it is",n,o);const t=n.split(a.selectedText);let l={type:"span",props:{children:[t[0],{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 ${o.name} ${o.value?o.value:""} `}},t[1]]}},i=e?.props?.children;i[c]=l,Object.assign(e?.props?.children,i)}return t?.startsWith(n.type,[])}));Object.assign(e?.props?.children,[]),i(s[d-1],n)}var r,l;return e}return{addBold:()=>{if("bold"===o.name&&a.selectedText&&a.xPath){let o=i(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=i(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=i(e,"");const a=Object.create(o);t(a),r({xPath:"",selectedText:""}),n({name:"",value:""}),l((e=>!e))}}}}function u(){const[t,o]=e.useState(""),n=p((e=>e.changeType)),a=p((e=>e.type)),l=i((e=>e.toggleCommentModal)),{addComment:d}=g();e.useEffect((()=>{a.name&&a.value&&(d(),l())}),[a.name,a.value,d,l]);return r.default.createElement("section",{className:"modal-container"},r.default.createElement("div",{className:"modal-content"},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"},"Add Note")))}const f=[{name:"red",color:"red"},{name:"gold",color:"gold"},{name:"white",color:"white"},{name:"blue",color:"blue"},{name:"green",color:"green"},{name:"purple",color:"purple"},{name:"orange",color:"orange"},{name:"grey",color:"grey"},{name:"pink",color:"pink"}];function h(){const t=p((e=>e.changeType)),o=p((e=>e.type)),{addHighlight:n}=g();c((e=>e.toggleModal)),e.useEffect((()=>{o.name&&o.value&&n()}),[o.value,n,o.name]);return r.default.createElement("section",{className:"modal-container"},r.default.createElement("div",{className:"modal-content"},r.default.createElement("h1",null,"Pick your color"),r.default.createElement("div",{className:"container"},f.map((e=>r.default.createElement("span",{className:"color-container",key:e.name},r.default.createElement("div",{className:"color-box",onClick:()=>{return o=e.name,void t({name:"highlight",value:o});var o},style:{backgroundColor:`${e.name}`,scale:o.value===e.name?"1.3":"1"}}),r.default.createElement("span",{className:"color-name"},e.name)))))))}function x({x:t,y:o}){const[n,a]=e.useState(!0),l=p((e=>e.changeType)),{addBold:d}=g(),s=c((e=>e.toggleModal)),m=i((e=>e.toggleCommentModal)),u=p((e=>e.type)),f=p((e=>e.config)),h=({name:e,value:t})=>{l({name:e,value:t}),"bold"!==e&&("comment"===e?m():s())};return e.useEffect((()=>{"bold"===u.name&&f.selectedText&&d()}),[u.name,d]),e.useEffect((()=>{a(!0)}),[t]),r.default.createElement(r.default.Fragment,null,n&&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",{className:"boldIcon",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)}module.exports=t=>{const o=c((e=>e.open)),a=i((e=>e.openComment)),s=d((e=>e.setDom)),g=d((e=>e.dom)),f=m(g),{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((e=>{if(!r.current.contains(e.target))return;let t=document.getSelection().toString();if(!t)return;o({x:e.pageX,y:e.pageY});const l=n.fromRange(document.getSelection().getRangeAt(0),r.current).start.split("/").filter((e=>e)),[i,...d]=l;a({xPath:d,selectedText:t})}),[a]);return e.useEffect((()=>(document.addEventListener("mouseup",l),()=>{document.removeEventListener("mouseup",l)})),[l]),{editorRef:r,mousePoint:t}}();return e.useEffect((()=>{if(!g){const e=l.default(t.htmlContent);s({...e})}}),[g,s,t]),r.default.createElement(r.default.Fragment,null,o&&r.default.createElement(h,null),a&&r.default.createElement(u,null),g&&r.default.createElement("div",{className:"notes-wrapper",ref:b},f),r.default.createElement(x,{x:v.x,y:v.y}))};

package.json

 {
   "name": "reactjs-editor",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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/components/floatingToolBar.js

@@ -47,3 +47,3 @@ import React, { useEffect, useState } from "react";
           <div className="floating-toolbar">
-            <span onClick={()=>openModal({name:'bold'})} >B</span>
+            <span className="boldIcon" onClick={()=>openModal({name:'bold'})} >B</span>
             <span onClick={()=>openModal({name:'highlight'})}>
@@ -50,0 +50,0 @@ <svg

src/components/index.js

@@ -11,3 +11,3 @@ import React, { useEffect } from "react";
 import FloatingToolBar from "./floatingToolBar";
-const UIRender = (props) => {
+const ReactEditor = (props) => {
   const open = useModal((state) => state.open);
@@ -38,4 +38,3 @@ const openComment = useCommentModal((state) => state.openComment);
 
-      {/* Just a notice for mobile users */}
-    <p>Not available for mobile</p>
+     
     </>
@@ -45,2 +44,2 @@ );
 
-export default UIRender;
+export default ReactEditor;

src/index.js

 import './style.css';
 
-import UIRender from './components';
+import ReactEditor from './components';
 
-export default UIRender;
+export default ReactEditor;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

51550

-7.79%

Lines of code

973

-9.57%

No dependency changes