react-fluo
Version:
A react library that can be used to highlight and comment parts of a given text. The highlights and comments are both configurable to blend with the user's design and needs
1 lines • 23.1 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ReactFluo",[],t):"object"==typeof exports?exports.ReactFluo=t():e.ReactFluo=t()}(this,(()=>(()=>{var e={384:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var n=i(81),a=i.n(n),r=i(645),l=i.n(r)()(a());l.push([e.id,".highlitable-comments{width:100%;display:flex;flex-direction:column;align-items:flex-start}.highlitable-comments__author{display:flex;align-items:center}.highlitable-comments__author-name{margin-left:5px;white-space:nowrap}.highlitable-comments__author-avatar{width:25px;border-radius:50px}.highlitable-comments__date{margin-left:20px;color:#969696;margin:5px 0 10px 0;width:100%;display:flex;align-items:center;justify-content:flex-end}.highlitable-comments__text{margin:0 0 5px 20px;text-overflow:ellipsis;overflow:hidden}.highlitable-comments__text-row{width:95%;display:flex;justify-content:space-between;align-items:center}.highlitable-comments__replies{width:100%}.highlitable-comments__add-reply{border:none;background:#fff;color:#2345d8;cursor:pointer}.highlitable-comments__add-reply:hover{text-decoration:underline}.highlitable-comments__add-reply-icon{width:20px;height:20px}.highlitable-comments__reply{margin-left:40px;border-left:solid 1px #969696}.highlitable-comments__reply-author{margin:0;display:flex;align-items:center}.highlitable-comments__reply-author-name{margin-left:5px;white-space:nowrap}.highlitable-comments__reply-author-avatar{width:25px;border-radius:50px}.highlitable-comments__reply-text{margin:0;padding:10px;text-overflow:ellipsis;overflow:hidden}.highlitable-comments__reply-input{width:80%;height:20px;padding:5px 20px;border-radius:20px;border:solid 1px #969696;margin:15px 15px 15px 20px;display:none}.highlitable-comments__reply-input--show{display:block;animation:slide-bottom .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}@keyframes slide-bottom{0%{transform:translateY(-10px)}100%{transform:translateY(0px)}}",""]);const o=l},746:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var n=i(81),a=i.n(n),r=i(645),l=i.n(r)()(a());l.push([e.id,".highlightable-options{position:absolute}.highlightable-options__overlay{position:fixed;left:0;right:0;top:0;bottom:0;z-index:1}.highlightable-options__header{width:100%;line-height:0;display:flex;justify-content:space-between;align-items:center}.highlightable-options__header-title{color:#161616;font-family:system-ui;font-size:16px}.highlightable-options__close{background:none;border:none;cursor:pointer}.highlightable-options__container{min-width:270px;max-width:300px;z-index:100;position:relative;background-color:#fff;border-radius:8px;padding:12px;box-shadow:0px 3px 5px 2px rgba(0,0,0,.05)}.highlightable-options__items{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-bottom:15px}.highlightable-options__item{width:30px;height:30px;border-radius:50%;margin:4px;cursor:pointer;border:solid 1px #969696;display:flex;justify-content:center;align-items:center}.highlightable-options__item:hover{transform:scale(1.1)}.highlightable-options__delete{width:30px;height:30px;border-radius:50%;margin:4px;cursor:pointer;border:dashed 1px #969696;display:flex;justify-content:center;align-items:center}.highlightable-options__delete:hover{transform:scale(1.1)}.highlightable-options__comment{width:100%;font-family:system-ui;font-size:14px;margin-top:10px}.highlightable-options__comment-new{width:80%;height:20px;padding:5px 20px;border-radius:20px;border:solid 1px #969696;margin-left:5px}.highlightable-options__icon{width:20px;height:20px;cursor:pointer}.highlightable-options__row{margin:10px 0;display:flex;flex-direction:row;justify-content:center;align-items:center}",""]);const o=l},228:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var n=i(81),a=i.n(n),r=i(645),l=i.n(r)()(a());l.push([e.id,".highlitable-text{position:absolute;margin-top:20px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.highlitable-text__overlay{position:absolute;color:rgba(0,0,0,0);margin-top:20px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}",""]);const o=l},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i="",n=void 0!==t[5];return t[4]&&(i+="@supports (".concat(t[4],") {")),t[2]&&(i+="@media ".concat(t[2]," {")),n&&(i+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),i+=e(t),n&&(i+="}"),t[2]&&(i+="}"),t[4]&&(i+="}"),i})).join("")},t.i=function(e,i,n,a,r){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(n)for(var o=0;o<this.length;o++){var s=this[o][0];null!=s&&(l[s]=!0)}for(var c=0;c<e.length;c++){var h=[].concat(e[c]);n&&l[h[0]]||(void 0!==r&&(void 0===h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=r),i&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=i):h[2]=i),a&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=a):h[4]="".concat(a)),t.push(h))}},t}},81:e=>{"use strict";e.exports=function(e){return e[1]}},379:e=>{"use strict";var t=[];function i(e){for(var i=-1,n=0;n<t.length;n++)if(t[n].identifier===e){i=n;break}return i}function n(e,n){for(var r={},l=[],o=0;o<e.length;o++){var s=e[o],c=n.base?s[0]+n.base:s[0],h=r[c]||0,d="".concat(c," ").concat(h);r[c]=h+1;var p=i(d),m={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)t[p].references++,t[p].updater(m);else{var g=a(m,n);n.byIndex=o,t.splice(o,0,{identifier:d,updater:g,references:1})}l.push(d)}return l}function a(e,t){var i=t.domAPI(t);return i.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;i.update(e=t)}else i.remove()}}e.exports=function(e,a){var r=n(e=e||[],a=a||{});return function(e){e=e||[];for(var l=0;l<r.length;l++){var o=i(r[l]);t[o].references--}for(var s=n(e,a),c=0;c<r.length;c++){var h=i(r[c]);0===t[h].references&&(t[h].updater(),t.splice(h,1))}r=s}}},569:e=>{"use strict";var t={};e.exports=function(e,i){var n=function(e){if(void 0===t[e]){var i=document.querySelector(e);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}t[e]=i}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(i)}},216:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,i)=>{"use strict";e.exports=function(e){var t=i.nc;t&&e.setAttribute("nonce",t)}},795:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(i){!function(e,t,i){var n="";i.supports&&(n+="@supports (".concat(i.supports,") {")),i.media&&(n+="@media ".concat(i.media," {"));var a=void 0!==i.layer;a&&(n+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),n+=i.css,a&&(n+="}"),i.media&&(n+="}"),i.supports&&(n+="}");var r=i.sourceMap;r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,i)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{"use strict";e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},190:e=>{e.exports="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 32 32' id='color-wheel'%3e%3cpath fill='%239e61a4' d='M16,.5v7A8.481,8.481,0,0,0,9.99,9.99L5.04,5.04A15.464,15.464,0,0,1,16,.5Z'%3e%3c/path%3e%3cpath fill='%2370cadb' d='M9.99,9.99A8.481,8.481,0,0,0,7.5,16H.5A15.464,15.464,0,0,1,5.04,5.04Z'%3e%3c/path%3e%3cpath fill='%2355bb8c' d='M9.99,22.01,5.04,26.96A15.464,15.464,0,0,1,.5,16h7A8.481,8.481,0,0,0,9.99,22.01Z'%3e%3c/path%3e%3cpath fill='%23b9d34c' d='M16,24.5v7A15.463,15.463,0,0,1,5.04,26.96l4.95-4.95A8.481,8.481,0,0,0,16,24.5Z'%3e%3c/path%3e%3cpath fill='%23ed4569' d='M26.96,26.96A15.463,15.463,0,0,1,16,31.5v-7a8.481,8.481,0,0,0,6.01-2.49Z'%3e%3c/path%3e%3cpath fill='%23ee654b' d='M31.5,16a15.464,15.464,0,0,1-4.54,10.96l-4.95-4.95A8.481,8.481,0,0,0,24.5,16Z'%3e%3c/path%3e%3cpath fill='%23f8a839' d='M31.5,16h-7a8.481,8.481,0,0,0-2.49-6.01l4.95-4.95A15.464,15.464,0,0,1,31.5,16Z'%3e%3c/path%3e%3cpath fill='%23fddd56' d='M26.96,5.04,22.01,9.99A8.481,8.481,0,0,0,16,7.5V.5A15.464,15.464,0,0,1,26.96,5.04Z'%3e%3c/path%3e%3cpath d='M27.313,4.687A16,16,0,1,0,4.687,27.313,16,16,0,1,0,27.313,4.687ZM30.992,15.5H24.986A8.921,8.921,0,0,0,22.708,10l4.247-4.247A14.881,14.881,0,0,1,30.992,15.5ZM16.5,1.008a14.881,14.881,0,0,1,9.747,4.038L22,9.292a8.923,8.923,0,0,0-5.5-2.279Zm-1,0V7.014A8.923,8.923,0,0,0,10,9.292L5.753,5.046A14.881,14.881,0,0,1,15.5,1.008ZM5.046,5.753,9.292,10a8.921,8.921,0,0,0-2.279,5.5H1.008A14.881,14.881,0,0,1,5.046,5.753ZM1.008,16.5H7.014A8.923,8.923,0,0,0,9.292,22L5.046,26.247A14.881,14.881,0,0,1,1.008,16.5ZM15.5,30.992a14.881,14.881,0,0,1-9.747-4.038L10,22.708a8.923,8.923,0,0,0,5.5,2.279Zm-5.156-9.335A8,8,0,1,1,16,24,7.947,7.947,0,0,1,10.344,21.656ZM16.5,30.992V24.986A8.923,8.923,0,0,0,22,22.708l4.247,4.247A14.881,14.881,0,0,1,16.5,30.992Zm10.454-4.745L22.708,22a8.923,8.923,0,0,0,2.279-5.5h6.005A14.881,14.881,0,0,1,26.954,26.247Z'%3e%3c/path%3e%3c/svg%3e"},836:e=>{e.exports="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M18 6L6 18' stroke='%23969696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e %3cpath d='M6 6L18 18' stroke='%23969696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e %3c/svg%3e"},441:e=>{e.exports="data:image/svg+xml,%3csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M607.856 320.112l-335.536-0.016 138.08-138.272-56.56-56.576L119.248 359.872l234.48 234.512 56.56-56.576-137.856-138.016 335.376 0.016c114.704 0 208.112 93.472 208.112 208.16s-95.92 208-207.92 208v80c160 0 287.92-129.2 287.92-288s-129.264-287.84-288.064-287.84z' fill='%23969696' /%3e%3c/svg%3e"}},t={};function i(n){var a=t[n];if(void 0!==a)return a.exports;var r=t[n]={id:n,exports:{}};return e[n](r,r.exports,i),r.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;var n={};return(()=>{"use strict";i.r(n),i.d(n,{default:()=>z});const e=require("react");var t=i.n(e),a=i(836),r=i.n(a),l=i(190),o=i.n(l);const s=e=>{let t="";return Object.entries(e).forEach((e=>{t+=`${(e=>e.replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`)))(e[0])}: ${e[1]}; `})),t};var c=i(379),h=i.n(c),d=i(795),p=i.n(d),m=i(569),g=i.n(m),u=i(565),f=i.n(u),b=i(216),x=i.n(b),y=i(589),v=i.n(y),_=i(746),w={};w.styleTagTransform=v(),w.setAttributes=f(),w.insert=g().bind(null,"head"),w.domAPI=p(),w.insertStyleElement=x(),h()(_.Z,w),_.Z&&_.Z.locals&&_.Z.locals;const E=require("date-fns/format");var M=i.n(E),A=i(441),N=i.n(A),S=i(384),H={};H.styleTagTransform=v(),H.setAttributes=f(),H.insert=g().bind(null,"head"),H.domAPI=p(),H.insertStyleElement=x(),h()(S.Z,H),S.Z&&S.Z.locals&&S.Z.locals;const k=({comment:e,highlights:i,setHighlights:n,selectedHighlight:a,setSelectedHighlight:r,replyIcon:l,currentAuthor:o})=>{const s=()=>{const t=document.getElementById(`reply-input-${e.id}`);t&&t.classList.toggle("highlitable-comments__reply-input--show")};return t().createElement("div",{key:e.id,className:"highlitable-comments"},t().createElement("div",{className:"highlitable-comments__text-row"},e.author&&t().createElement("div",{className:"highlitable-comments__author"},e.author.avatar&&t().createElement("img",{src:e.author.avatar,alt:"Author avatar",className:"highlitable-comments__author-avatar"}),t().createElement("p",{className:"highlitable-comments__author-name"},e.author.name)),t().createElement("p",{className:"highlitable-comments__date"},M()(e.date,"dd/MM/yyyy"))),t().createElement("div",{className:"highlitable-comments__text-row"},t().createElement("p",{className:"highlitable-comments__text"},e.text),t().createElement("button",{type:"button",className:"highlitable-comments__add-reply"},t().createElement("img",{src:l||N(),alt:"Add reply",role:"presentation",className:"highlitable-comments__add-reply-icon",onClick:()=>s()}))),t().createElement("div",{className:"highlitable-comments__replies"},e.replies.map((e=>t().createElement("div",{key:e.text,className:"highlitable-comments__reply"},e.author&&t().createElement("div",{className:"highlitable-comments__reply-author"},e.author.avatar&&t().createElement("img",{src:e.author.avatar,alt:"Author avatar",className:"highlitable-comments__reply-author-avatar"}),t().createElement("p",{className:"highlitable-comments__reply-author-name"},e.author.name)),t().createElement("p",{className:"highlitable-comments__reply-text"},e.text)))),t().createElement("input",{id:`reply-input-${e.id}`,type:"text",placeholder:"Add reply",onKeyUp:t=>{var l;13===(l=t).keyCode&&((({comment:e,author:t,commentId:i,highlights:n,setHighlights:a,selectedHighlight:r,setSelectedHighlight:l})=>{const o=n.find((e=>e.id===r.id));if(o){const s=o.comments.find((e=>e.id===i));if(s){const i={text:e,date:new Date,author:t},o={...s,replies:[...s.replies,i]},c={...r,comments:r.comments.map((e=>e.id===s.id?o:e))};a(n.map((e=>e.id===r.id?c:e))),l(c)}}})({comment:l.target.value,commentId:e.id,highlights:i,setHighlights:n,selectedHighlight:a,setSelectedHighlight:r,author:o}),s(),l.target.value="")},className:"highlitable-comments__reply-input"})))},Z=({highlights:e,setHighlights:i,position:n,highlightOptions:a,setOptions:l,showStyle:c,setShowStyle:h,selectedHighlight:d,setSelectedHighlight:p,title:m,style:g,closeIcon:u,replyIcon:f,showOptionsIcon:b,currentAuthor:x})=>{var y;const{x:v,y:_}=n,w=t=>i(e.map((i=>{if(d){const n=e.find((e=>e.id===d.id));if(n&&n.id===i.id){const e={id:i.id,start:i.start,end:i.end,selection:i.selection,style:s(t),comments:i.comments};return p(e),e}return i}return i})));return t().createElement("div",{style:{top:`${_}px`,left:`${v+5}px`},className:"highlightable-options"},t().createElement("div",{role:"presentation",className:"highlightable-options__overlay",onClick:()=>l(!1)}),t().createElement("div",{style:g,className:"highlightable-options__container"},t().createElement("div",{className:"highlightable-options__header"},t().createElement("h3",{className:"highlightable-options__header-title"},m||"Select highlight"),t().createElement("button",{type:"button",className:"highlightable-options__close"},t().createElement("img",{src:u||r(),alt:"Close Modal",role:"presentation",onClick:()=>l(!1),className:"table__header--icon"}))),c&&t().createElement("div",{className:"highlightable-options__items"},t().createElement("div",{style:{textDecoration:"underline",color:"black"},className:"highlightable-options__item",role:"presentation",onClick:()=>w({textDecoration:"underline",color:"black"})},"U"),t().createElement("div",{className:"highlightable-options__delete",role:"presentation",onClick:()=>{i(e.filter((e=>e.id!==d.id))),l(!1)}},t().createElement("img",{src:r(),style:{width:"20px",height:"20px"},alt:"Close Modal",role:"presentation",onClick:()=>l(!1),className:"table__header--icon"})),a.map((e=>t().createElement("div",{key:s(e),style:e,className:"highlightable-options__item",role:"presentation",onClick:()=>w(e)})))),t().createElement("div",null,t().createElement("div",{className:"highlightable-options__row"},!c&&t().createElement("img",{src:b||o(),alt:"Close Modal",role:"presentation",onClick:()=>h(!0),className:"highlightable-options__icon"}),t().createElement("input",{type:"text",placeholder:"Add comment",onKeyUp:t=>{var n;13===(n=t).keyCode&&((({comment:e,author:t,highlights:i,setHighlights:n,selectedHighlight:a,setSelectedHighlight:r})=>{const l=i.find((e=>e.id===a.id));if(l){let o=0;l.comments.length>0&&(o=Math.max(...l.comments.map((e=>e.id)))+1);const s={id:o+1,date:new Date,text:e,author:t,replies:[]},c={...a,comments:[...a.comments,s]};n(i.map((e=>e.id===a.id?c:e))),r(c)}})({comment:n.target.value,highlights:e,setHighlights:i,selectedHighlight:d,setSelectedHighlight:p,author:x}),n.target.value="")},className:"highlightable-options__comment-new"})),null===(y=d.comments)||void 0===y?void 0:y.map((n=>t().createElement("div",{key:n.id,className:"highlightable-options__comment"},t().createElement(k,{comment:n,highlights:e,setHighlights:i,selectedHighlight:d,setSelectedHighlight:p,replyIcon:f,currentAuthor:x})))))))},C=()=>{const e=window.getSelection();if(e&&e.anchorNode){const t=e.anchorOffset,i=e.focusOffset;if(t>=0&&i>=0)return{start:Math.min(t,i),end:Math.max(t,i),selection:e.toString(),parentNode:e.anchorNode.parentNode,valid:!0}}return{start:-1,end:-1,selection:"",parentNode:null,currentNode:null,valid:!1}};let I=function(e){return e[e.Merge=0]="Merge",e[e.Delete=1]="Delete",e[e.Error=2]="Error",e}({});const T=(e,t)=>t.filter((t=>!(e.start<=t.end&&e.end>=t.start))),L=(e,t,i,n,a,r,l,o,s,c,h)=>{const{start:d,end:p,selection:m,valid:g}=C();if(t&&g&&d!==p){s(!0);let t=0;i.length>0&&(t=Math.max(...i.map((e=>e.id))));const g={id:t+1,start:d,end:p-1,selection:m,style:o,comments:[]},u=((e,t)=>t.filter((t=>e.start<=t.end&&e.end>=t.start)))(g,i);return u.length>0?((e,t,i,n,a,r,l,o,s,c,h)=>{switch(r){case I.Merge:return((e,t,i,n,a,r,l)=>{const o=t.map((e=>e.start)),s=t.map((e=>e.end)),c={id:Math.max(...t.map((e=>e.id))),start:Math.min(...o),end:Math.max(...s),selection:e.substring(Math.min(...o),Math.max(...s)),style:(null==r?void 0:r.style)||l,comments:[]};a(c),i([...T(c,n),c])})(e,[...i,t],a,n,l,o,s),!0;case I.Delete:return a(T(t,n)),!1;case I.Error:return c&&h&&h([...c,"Highlights overlap"]),!1;default:return alert("Highlights overlap"),!1}})(e,g,u,i,n,a,r,l,o,c,h):(r(g),n([...i,g]),!0)}return!1},j=(e,t)=>e.length<t.length,O=(e,t)=>t.filter((t=>t.end<e.start)),$=({prevText:e,newText:t,highlights:i,setHighlights:n,selection:a,isEnter:r})=>{if(t.length!==(null==e?void 0:e.length)&&a){const r=((e,t,i,n)=>((e,t)=>t.filter((t=>t.start>e.end)))(n,i).map((i=>{const n=Math.abs(e.length-t.length);return j(e,t||"")?{...i,start:i.start-n,end:i.end-n,selection:e.substring(i.start-n,i.end-n)}:{...i,start:i.start+n,end:i.end+n,selection:e.substring(i.start+n,i.end+n)}})))(t,e,i,a),l=((e,t,i,n)=>((e,t)=>t.filter((t=>e.start<=t.end&&e.end>=t.start)))(n,i).map((i=>{const{diff:a,position:r,absDiff:l}=((e,t,i,n)=>{const a=Math.abs(i.length-n.length);return e.start<t.start&&e.end<t.end?{diff:e.end-t.start+1,position:"start",absDiff:a}:e.start>t.start&&e.end>=t.end?{diff:t.end-e.start+1,position:"end",absDiff:a}:{diff:Math.abs(i.length-n.length),position:"end",absDiff:a}})(n,i,e,t);return j(e,t)?((e,t)=>e.start<=t.start&&e.end>=t.end)(n,i)?{...i,start:-1}:{...i,start:"start"===r?i.start-l+a-1:i.start,end:"start"===r?i.end-l:i.end-a,selection:e.substring(i.start,i.end-a)}:{...i,start:"start"===r?i.start+a:i.start,end:"end"===r?i.end+a:i.end,selection:e.substring(i.start,i.end+a)}})).filter((e=>-1!==e.start)))(t,e,i,a);n([...O(a,i),...l,...r])}else r&&((e,t,i,n)=>{const a=((e,t)=>t.find((t=>e>=t.start&&e<=t.end)))(e.start,t);if(a){const e={...a,end:a.end+1,selection:n.substring(a.start,a.end+1)};i(t.map((t=>t.id===e.id?e:t)))}})(a,i,n,t)};var D=i(228),R={};R.styleTagTransform=v(),R.setAttributes=f(),R.insert=g().bind(null,"head"),R.domAPI=p(),R.insertStyleElement=x(),h()(D.Z,R),D.Z&&D.Z.locals&&D.Z.locals;const B=e=>(e=>e.replace(/<br>/g,"\n"))((e=>e.replace(/<div>/g,"\n").replace(/<\/div>/g,""))(e)),z=({id:i,text:n,setText:a=(()=>{}),highlights:r,setHighlights:l,highlightable:o=!0,editable:c=!1,style:h={},handleOverlaps:d=I.Merge,highlightOptions:p,defaultHighlight:m=0,optionsTitle:g="",optionsStyle:u={},closeIcon:f,replyIcon:b,showOptionsIcon:x,errors:y=[],setErrors:v=(()=>{}),currentAuthor:_})=>{const[w,E]=(0,e.useState)(!1),[M,A]=(0,e.useState)(!1),[N,S]=(0,e.useState)({x:0,y:0}),[H,k]=(0,e.useState)(),[T,j]=(0,e.useState)(""),[O,D]=(0,e.useState)(0),[R,z]=(0,e.useState)(),[P,U]=(0,e.useState)({start:0,end:0,selection:"",valid:!1}),F=m?s(p[m]):"text-decoration: underline; color: black";(0,e.useEffect)((()=>{const e=document.getElementById(i),t=document.getElementById(`editable_${i}`);if(e&&t){((e,t)=>{const i=document.createRange(),n=window.getSelection();n&&e&&(i.setStart(0===t?e:e.childNodes[0],t),i.collapse(!0),n.removeAllRanges(),n.addRange(i))})(t,O);let n=0;e.innerHTML=t.innerHTML,r.sort(((e,t)=>e.start-t.start)).forEach((e=>{n+=((e,t,n,a,r)=>{const l=document.getElementById(i);if(l){const i=l.innerHTML,o=t+r,s=n+r,c=`${i.substr(0,o)}<span id="${e}" style="${a}">${i.substr(o,s-o+1)}</span>${i.substr(s+1)}`;return l.innerHTML=c,c.length-i.length}return 0})(e.id,e.start,e.end,e.style,n)}))}}),[r,n]);const K=e=>{const t=function(e){const t=window.getSelection();if(t&&t.rangeCount){const i=t.getRangeAt(0).cloneRange();if(i.getClientRects){i.collapse(e);const t=i.getClientRects();if(t.length>0){const e=t[0];return{x:e.x,y:e.y}}}}return null}(!1);t&&e&&(S(t),E(!0))},q=e=>{z(!1);const{start:t,end:i}=C(),n=r.find((n=>n.start<=t&&n.end>=i||e.target.id===n.id.toString()));n&&!R&&(k(n),A(!1),K(!0))};return t().createElement("div",{style:h,className:"highlitable-text__container"},w&&H&&t().createElement(Z,{highlights:r,setHighlights:l,position:N,setOptions:E,style:u,showStyle:M,setShowStyle:A,closeIcon:f,highlightOptions:p,title:g,selectedHighlight:H,setSelectedHighlight:k,replyIcon:b,showOptionsIcon:x,currentAuthor:_}),t().createElement("div",{id:i,dangerouslySetInnerHTML:{__html:n},className:"highlitable-text__overlay",role:"presentation",onClick:q}),t().createElement("div",{id:`editable_${i}`,dangerouslySetInnerHTML:{__html:n},contentEditable:c,className:"highlitable-text",style:{position:"absolute"},onKeyDown:e=>(e=>{const t=C(),n=document.getElementById(`editable_${i}`);n&&a(B(n.innerHTML)),U(t),j(e.target.textContent),E(!1),D(t.end)})(e),onKeyUp:e=>(e=>{const t=C(),n=document.getElementById(`editable_${i}`);n&&a(B(n.innerHTML)),$({prevText:T,newText:e.target.textContent,highlights:r,setHighlights:l,selection:t.selection.length>P.selection.length?t:P,isEnter:13===e.which}),U(t),D(13===e.which?O+1:t.end)})(e),role:"presentation",suppressContentEditableWarning:!0,onClick:q,onMouseUp:e=>{const t=C(),i=e.target;if(i&&i.textContent){const e=L(i.textContent,null!=o&&o,r,l,d,k,void 0,F,z,y,v);U(t),A(e),K(e)}}}))}})(),n})()));