bandicoot - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/bandicoot.esm.js

@@ -1,2 +0,2 @@
-import React,{useRef,useEffect,forwardRef,useContext,useState}from"react";function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread2(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(b,!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function RichTextContainer(a){const b=useRef(Object.assign({},defaultContextValue)),c=b.current,d=useRef([]),e=useRef([]),f=useRef([]),g=useRef([]);return useEffect(()=>{const a=c.getContentEditableElement();a&&a.innerHTML&&c.fireNewHTML()},[c]),c.addSelectionChangedListener=a=>{d.current.push(a)},c.removeSelectionChangedListener=a=>{d.current=d.current.filter(b=>b!==a)},c.fireSelectionChanged=()=>{d.current.forEach(a=>a())},c.addBlurListener=a=>{e.current.push(a)},c.removeBlurListener=a=>{e.current=e.current.filter(b=>b!==a)},c.fireBlur=()=>{e.current.forEach(a=>a())},c.addNewHTMLListener=a=>{f.current.push(a)},c.removeNewHTMLListener=a=>{f.current=f.current.filter(b=>b!==a)},c.fireNewHTML=()=>{f.current.forEach(a=>a())},c.numSerializers=()=>g.current.length,c.addSerializer=a=>{g.current.push(a)},c.removeSerializer=a=>{g.current=g.current.filter(b=>b!==a)},c.serialize=a=>(g.current.forEach(b=>b(a)),a.innerHTML),React.createElement(RichTextContext.Provider,{value:c},a.children)}const noop=()=>{},defaultContextValue={addSelectionChangedListener:noop,removeSelectionChangedListener:noop,fireSelectionChanged:noop,selectRangeFromBeforeBlur:noop,getRangeBeforeBlur:noop,addBlurListener:noop,removeBlurListener:noop,fireBlur:noop,addNewHTMLListener:noop,removeNewHTMLListener:noop,fireNewHTML:noop,isFocused:noop,getContentEditableElement:noop,numSerializers:()=>0,addSerializer:noop,removeSerializer:noop,serialize:noop,sanitizeHTML:noop},RichTextContext=React.createContext(defaultContextValue),noop$1=()=>{},noopWithReturn=a=>a;let globalBandicootId=0;const RichTextEditor=forwardRef((a,b)=>{function c(b){b.preventDefault(),b.stopPropagation();let c=m.sanitizeHTML((window.clipboardData||b.clipboardData).getData("text/html"),"pasteHTML"),d=a.pasteFn(c);!1!==d&&document.execCommand("insertHTML",null,d)}function d(){const a=document.createRange();a.selectNodeContents(n.current);const b=window.getSelection();b.removeAllRanges(),b.addRange(a),document.execCommand("removeFormat"),document.execCommand("delete")}function e(){if(p()){const a=window.getSelection();0<a.rangeCount&&(o.current=window.getSelection().getRangeAt(0)),m.fireSelectionChanged()}}function f(){const b=j();b!==s&&(t(b),a.save(b))}function g(){let a=n.current.innerHTML;if(0<m.numSerializers()){const b=new DOMParser().parseFromString(a,"text/html");a=m.serialize(b.body)}return a}function h(b,c){c?(n.current.innerHTML=m.sanitizeHTML(b,"setHTML"),a.autoFocus&&k()):(d(),n.current.innerHTML=m.sanitizeHTML(b,"setHTML"),k()),m.fireNewHTML()}function i(){h("")}function j(){return m.sanitizeHTML(g(),"getHTML")}function k(){n.current.focus(),q(!0)}function l(){return!window.chrome||!window.chrome.webstore&&!window.chrome.runtime?{opacity:"0.54"}:{color:"rgb(117, 117, 117)"}}if("function"!=typeof a.sanitizeHTML)throw Error("RichTextEditor must be passed a sanitizeHTML function as a prop");const m=useContext(RichTextContext);m.sanitizeHTML=a.sanitizeHTML;const n=useRef(null),o=useRef(null),{isFocused:p,setFocused:q}=useSynchronousFocusState(),r=useRef(globalBandicootId++),[s,t]=useState(()=>m.sanitizeHTML(a.initialHTML,"initialSetLastSavedHTML")),[u,v]=useState(!1);if(b){const a={setHTML:h,resetEditor:i,getHTML:j,focus:k};"function"==typeof b?b({current:a}):b.current=a}useEffect(()=>(n.current.addEventListener("paste",c),()=>n.current.removeEventListener("paste",c)),[a.pasteFn]),useEffect(()=>(document.addEventListener("selectionchange",e),()=>document.removeEventListener("selectionchange",e))),useEffect(()=>{if(n.current)for(let a=n.current;a.parentNode;)a=a.parentNode,"SPAN"===a.tagName&&console.warn("A span tag has been detected in the parents of <RichTextEditor>. This has been known to cause issues. https://github.com/CanopyTax/bandicoot/issues/69")},[n.current]),useEffect(()=>{if(a.save&&a.unchangedInterval&&n.current&&p()){let b;const c=new MutationObserver(()=>{clearTimeout(b),b=setTimeout(f,a.unchangedInterval)});return c.observe(n.current,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),()=>{c.disconnect(),clearTimeout(b)}}},[a.unchangedInterval,a.save,n.current,p()]),useEffect(()=>{if(!1===p()){const a=setTimeout(()=>{m.fireBlur(),f()},100);return()=>{clearTimeout(a)}}},[p()]),useEffect(()=>{m.selectRangeFromBeforeBlur=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{usePreviousRange:!1};if(n.current&&document.activeElement!==n.current&&!n.current.contains(document.activeElement)){if(a.usePreviousRange&&o.current){const a=window.getSelection();a.removeAllRanges(),a.addRange(o.current)}else n.current.focus();q(!0),setTimeout(e)}},m.getRangeFromBeforeBlur=()=>o.current,m.isFocused=p,m.getContentEditableElement=()=>n.current}),useEffect(()=>{!u&&a.initialHTML&&(v(!0),h(a.initialHTML,!0))},[u,h,m]),useEffect(()=>{if(a.placeholder){const b=document.createElement("style");b.textContent=".bandicoot-id-".concat(r.current,":empty:before { content: attr(data-placeholder); }"),document.head.appendChild(b);const c=Array.prototype.slice.call(document.styleSheets).find(a=>a.ownerNode===b),d=c.cssRules[0].style,e=a.placeholderStyle?a.placeholderStyle:l();for(let b in e)d[b]=a.placeholderStyle?a.placeholderStyle[b]:e[b];return()=>b.parentNode.removeChild(b)}},[a.placeholder,a.placeholderStyle,r.current]);const w=a.style||{};return React.createElement("div",{contentEditable:!a.disabled,onBlur:()=>q(!1),onFocus:function(){q(!0);const a=window.getSelection();0<a.rangeCount&&(o.current=a.getRangeAt(0))},ref:n,className:a.className+" bandicoot-id-"+r.current,style:_objectSpread2({wordBreak:"break-word",wordWrap:"break-word",overflowWrap:"break-word"},w),"data-placeholder":a.placeholder})});function useSynchronousFocusState(){const a=useRef(null),[b,c]=useState(!1);return{isFocused:function(){return a.current},setFocused:function(d){a.current=d,c(!b)}}}RichTextEditor.defaultProps={className:"",initialHTML:"",save:noop$1,placeholder:"",pasteFn:noopWithReturn};function useDocumentExecCommand(a){const b=useContext(RichTextContext);return{performCommand(c){b.selectRangeFromBeforeBlur(),document.execCommand(a)},performCommandWithValue(c){b.selectRangeFromBeforeBlur();document.execCommand(a,null,c)}}}function useFormatBlock(){const{performCommandWithValue:a}=useDocumentExecCommand("formatBlock");return{formatBlock(b){b===document.queryCommandValue("formatBlock")?a("div"):a(b)}}}const defaultActiveInfo={isActive:!1,value:!1};function useDocumentQueryCommandState(a,b){function c(){const c=document.queryCommandValue(a),d=b?b===c:document.queryCommandState(a);(d!==e.isActive||c!==e.value)&&f({isActive:d,value:c})}function d(){f(defaultActiveInfo)}const[e,f]=useState(defaultActiveInfo),g=useContext(RichTextContext);return useEffect(()=>(g.addSelectionChangedListener(c),()=>g.removeSelectionChangedListener(c)),[e,f]),useEffect(()=>(g.addBlurListener(d),()=>g.removeBlurListener(d)),[e,f]),{isActive:e.isActive,activeValue:e.value}}function useFontSize(a){let{defaultFontSize:c="14px",fontSizes:b}=a;if(7<b.length)throw Error("Browsers only support up to 7 font sizes with document.execCommand('fontSize', null, size)");const[d,e]=useState(c),[f,g]=useState(null),{performCommandWithValue:h}=useDocumentExecCommand("fontSize"),i=useContext(RichTextContext),j=function(){return useEffect(()=>{function a(){const a=window.getSelection();if((!f||a.anchorNode!==f.anchorNode||a.anchorOffset!==f.anchorOffset||a.focusNode!==f.focusNode||a.focusOffset!==f.focusOffset)&&(g({anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),0<a.rangeCount)){let b=a.getRangeAt(0).startContainer;1!==b.nodeType&&(b=b.parentElement);const c=window.getComputedStyle(b).fontSize,f=c;f!==d&&e(f)}}return i.addSelectionChangedListener(a),()=>i.removeSelectionChangedListener(a)},[d,e,f]),d}();return function(){useEffect(()=>{const a=b.reduce((a,b,c)=>"".concat(a," font[size=\"").concat(c+1,"\"] {font-size: ").concat(b,"}"),""),c=document.createElement("style");return c.textContent=a,document.head.appendChild(c),()=>document.head.removeChild(c)},[b]),useEffect(()=>{function a(a){const c=a.querySelectorAll("font");for(let d=0;d<c.length;d++){const a=c[d],e=+a.getAttribute("size");if(e>b.length)throw Error("Cannot find fontSize for integer size '".concat(e,"'"));const f=b[e-1];a.removeAttribute("size"),a.style.fontSize=f,a.dataset.integerSize=e}}return i.addSerializer(a),()=>i.removeSerializer(a)},[b]),useEffect(()=>{function a(){const a=i.getContentEditableElement().querySelectorAll("font");for(let c=0;c<a.length;c++){const d=a[c],e=d.style.fontSize,f=b.findIndex(a=>a===e)+1;0<f&&(d.style.fontSize="",d.setAttribute("size",f))}}return i.addNewHTMLListener(a),()=>i.removeNewHTMLListener(a)},[b])}(),{currentlySelectedFontSize:j,setSize(a){const c=b.findIndex(b=>b===a)+1;if(0>=c)throw Error("Cannot set font size since '".concat(a,"' was not passed in the fontSizes array"));e(a),h(c)}}}const noop$2=()=>{},defaultAcceptImgTypes=".jpg, .png, image/*",defaultOpts={processImgElement:noop$2,fileBlobToUrl:defaultFileBlobToUrl,acceptImgTypes:defaultAcceptImgTypes};function useImage(){function a(a){a.style.cursor="pointer",a.style.maxWidth="100%",c(a)}function b(a){a.querySelectorAll("img").forEach(a=>{i.current[a.src]&&(a.src=i.current[a.src])})}let{processImgElement:c=noop$2,fileBlobToUrl:d=defaultFileBlobToUrl,acceptImgTypes:e=defaultAcceptImgTypes}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOpts;const{performCommandWithValue:f}=useDocumentExecCommand("insertImage"),g=useContext(RichTextContext),h=useRef(null),i=React.useRef({});return function(){useEffect(()=>{function b(){const b=g.getContentEditableElement().querySelectorAll("img:not([data-text-as-image])");b.forEach(a)}return g.addNewHTMLListener(b),()=>g.removeNewHTMLListener(b)},[c])}(),function(){useEffect(()=>{h.current=document.createElement("input");const b=h.current;b.type="file",b.accept=e,b.multiple=!1,b.addEventListener("change",()=>{b.files&&0<b.files.length&&d(b.files[0],c=>{f(c);const d=document.querySelector("img[src=\"".concat(c,"\"]"));if(d.src&&d.src.startsWith("blob:")){const a=new FileReader;a.addEventListener("load",()=>{i.current[d.src]=a.result}),a.readAsDataURL(b.files[0])}a(d)})})},[d,c,e])}(),function(){useEffect(()=>(g.addSerializer(b),()=>g.removeSerializer(b)))}(),{chooseFile(a){h.current.click()},removeImage(a){const b=document.createRange();b.selectNode(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b),document.execCommand("delete")}}}function defaultFileBlobToUrl(a,b){b(URL.createObjectURL(a))}let tempId=0;const noop$3=()=>{},defaultOptions={processAnchorElement:noop$3};function useLink(){function a(a,d){c.selectRangeFromBeforeBlur({usePreviousRange:!0});const f="rte-link-temp-id-".concat(tempId++);e("<a href=\"".concat(a,"\" id=\"").concat(f,"\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(d,"</a>"));const g=document.getElementById(f);g.removeAttribute("id"),b(g)}let{processAnchorElement:b=noop$3}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOptions;const c=useContext(RichTextContext),{performCommand:d}=useDocumentExecCommand("unlink"),{performCommandWithValue:e}=useDocumentExecCommand("insertHTML");return function(){useEffect(()=>{function a(){const a=c.getContentEditableElement().querySelectorAll("a");a.forEach(b)}return c.addNewHTMLListener(a),()=>c.removeNewHTMLListener(a)},[b])}(),{getTextFromBeforeBlur:function(){const a=c.getRangeFromBeforeBlur();return a?a.toString():null},selectEntireLink:function(a){const b=document.createRange();b.selectNodeContents(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)},unlink:function(){d(),(window.navigator.userAgent.includes("Edge/14")||window.navigator.userAgent.includes("Edge/15")||window.navigator.userAgent.includes("Edge/16")||window.navigator.userAgent.includes("Edge/17"))&&document.execCommand("removeFormat")},insertLink:a}}let tempId$1=0;const noop$4=()=>{},defaultOptions$1={processContentEditableFalseElement:noop$4};function useContentEditableFalse(){function a(a){if(a.removeAttribute("id"),a.contentEditable=!1,a.addEventListener("click",()=>selectRangeAfterNode(a)),!a.previousSibling&&a.parentElement===d.getContentEditableElement()){const b=document.createElement("span");a.parentElement.insertBefore(b,a)}if(!a.nextSibling&&a.parentElement===d.getContentEditableElement()){const b=document.createElement("span");a.insertAdjacentElement("afterend",b)}selectRangeAfterNode(a),b(a)}let{processContentEditableFalseElement:b=noop$4}=0<arguments.length&&arguments[0]!==void 0?arguments[0]:defaultOptions$1;const{performCommandWithValue:c}=useDocumentExecCommand("insertHTML"),d=useContext(RichTextContext);return{insertContentEditableFalseElement(b){const e="rte-ce-false-temp-id-"+tempId$1++,f="<span id=\"".concat(e,"\">").concat(d.sanitizeHTML(b,"insertContentEditableFalseHTML"),"</span>");c(f);const g=document.getElementById(e);a(g)}}}function selectRangeAfterNode(a){const b=document.createRange();b.setStartAfter(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)}const noop$5=()=>{},defaultOptions$2={processSerializedElement:noop$5,fontFamily:null};function useTextAsImage(){let{processSerializedElement:a=noop$5,fontFamily:b=null}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOptions$2;const{performCommandWithValue:c}=useDocumentExecCommand("insertImage"),d=useContext(RichTextContext);return function(){useEffect(()=>{function a(){const a=d.getContentEditableElement().querySelectorAll("span[data-text-as-image]");for(let c=0;c<a.length;c++){const d=a[c],e=textToUrl(d.dataset.textAsImage,d.previousElementSibling||d.nextElementSibling||d.parentElement,b),f=document.createElement("img");f.src=e,processImgElement(f,d.dataset.textAsImage),d.parentNode.replaceChild(f,d)}}return d.addNewHTMLListener(a),()=>d.removeNewHTMLListener(a)},[])}(),function(){useEffect(()=>{function b(b){const c=b.querySelectorAll("img[data-text-as-image]");for(let d=0;d<c.length;d++){const b=c[d],e=document.createElement("span");e.dataset.textAsImage=b.dataset.textAsImage,a(e,e.dataset.textAsImage),b.parentNode.replaceChild(e,b)}}return d.addSerializer(b),()=>d.removeSerializer(b)},[])}(),{insertTextAsImage(a){d.selectRangeFromBeforeBlur({usePreviousRange:!0});const e=textToUrl(a,getSelectedElement(),b);c(e);const f=document.querySelector("img[src=\"".concat(e,"\"]:not([data-text-as-image])"));processImgElement(f,a)}}}function textToUrl(a,b,d){const e=window.getComputedStyle(b),f=+e.fontSize.replace("px",""),g=+e.lineHeight.replace("px",""),h=d||e.fontFamily,i="bold ".concat(f,"px ").concat(h),j=document.createElement("div");j.style.font=i,j.style.position="absolute",j.style.visibility="hidden",j.style.whiteSpace="nowrap",j.textContent=a,document.body.appendChild(j);const k=document.createElement("canvas");k.width=j.clientWidth+1,k.height=g;const l=k.getContext("2d");return l.font=i,l.fillStyle="#00bf4b",l.textBaseline="bottom",l.fillText(a,0,g-3),document.body.removeChild(j),l.canvas.toDataURL()}function processImgElement(a,b){a.style.verticalAlign="bottom",a.dataset.textAsImage=b,a.addEventListener("click",b=>{const c=a.getBoundingClientRect(),d=c.left+c.width/2,e=document.createRange();b.x<d?e.setStartBefore(a):e.setStartAfter(a);const f=window.getSelection();f.removeAllRanges(),f.addRange(e)})}function getSelectedElement(){let a=getSelection().getRangeAt(0).commonAncestorContainer;return 1===a.nodeType?a:a.parentElement}function useElementDeletionDetection(a,b){const c=useContext(RichTextContext);useEffect(()=>{if(a){function d(){a.isConnected||a._bandicoot_delete_callback_called||(a._bandicoot_delete_callback_called=!0,b(a))}return c.addSelectionChangedListener(d),()=>c.removeSelectionChangedListener(d)}},[a,b])}function styleInject(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&"undefined"!=typeof document){var d=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a))}}var css=".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}",style={bandicootButton:"icon-button_bandicootButton__2IZP5"};styleInject(".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}");function IconButton(a){return React.createElement("button",_extends({},a,{className:"\n        ".concat(style.bandicootButton,"\n        ").concat(a.isActive?"active-control-button":"","\n        ").concat(a.className||"","\n      "),onClick:a.onClick}),a.children)}BoldIcon.defaultProps={width:24,height:24};function BoldIcon(a){return React.createElement("svg",{width:a.width,height:a.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",viewBox:"0 0 317.41 317.41"},React.createElement("path",{d:"M281.4 158.7c21.7-15.1 36-40.3 36-68.7 0-46.2-37.6-83.7-83.7-83.7h-40H115 45 0v30h45v245H0v30h45 70 78.7 40c46.2 0 83.8-37.6 83.8-83.7C317.4 199 303.2 173.9 281.4 158.7zM193.7 36.2c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115v-107.5H193.7zM115 173.7h78.7c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115V173.7z"}))}function BoldButton(a){const{performCommand:b}=useDocumentExecCommand("bold"),{isActive:c}=useDocumentQueryCommandState("bold");return React.createElement(IconButton,{onClick:b,isActive:c},React.createElement(BoldIcon,a))}export{BoldButton,RichTextContainer,RichTextContext,RichTextEditor,useContentEditableFalse,useDocumentExecCommand,useDocumentQueryCommandState,useElementDeletionDetection,useFontSize,useFormatBlock,useImage,useLink,useTextAsImage};
+import React,{useRef,useEffect,forwardRef,useContext,useState}from"react";function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread2(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(b,!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function RichTextContainer(a){const b=useRef(Object.assign({},defaultContextValue)),c=b.current,d=useRef([]),e=useRef([]),f=useRef([]),g=useRef([]);return useEffect(()=>{const a=c.getContentEditableElement();a&&a.innerHTML&&c.fireNewHTML()},[c]),c.addSelectionChangedListener=a=>{d.current.push(a)},c.removeSelectionChangedListener=a=>{d.current=d.current.filter(b=>b!==a)},c.fireSelectionChanged=()=>{d.current.forEach(a=>a())},c.addBlurListener=a=>{e.current.push(a)},c.removeBlurListener=a=>{e.current=e.current.filter(b=>b!==a)},c.fireBlur=()=>{e.current.forEach(a=>a())},c.addNewHTMLListener=a=>{f.current.push(a)},c.removeNewHTMLListener=a=>{f.current=f.current.filter(b=>b!==a)},c.fireNewHTML=()=>{f.current.forEach(a=>a())},c.numSerializers=()=>g.current.length,c.addSerializer=a=>{g.current.push(a)},c.removeSerializer=a=>{g.current=g.current.filter(b=>b!==a)},c.serialize=a=>(g.current.forEach(b=>b(a)),a.innerHTML),React.createElement(RichTextContext.Provider,{value:c},a.children)}const noop=()=>{},defaultContextValue={addSelectionChangedListener:noop,removeSelectionChangedListener:noop,fireSelectionChanged:noop,selectRangeFromBeforeBlur:noop,getRangeBeforeBlur:noop,addBlurListener:noop,removeBlurListener:noop,fireBlur:noop,addNewHTMLListener:noop,removeNewHTMLListener:noop,fireNewHTML:noop,isFocused:noop,getContentEditableElement:noop,numSerializers:()=>0,addSerializer:noop,removeSerializer:noop,serialize:noop,sanitizeHTML:noop},RichTextContext=React.createContext(defaultContextValue),noop$1=()=>{},noopWithReturn=a=>a;let globalBandicootId=0;const RichTextEditor=forwardRef((a,b)=>{function c(b){b.preventDefault(),b.stopPropagation();let c=m.sanitizeHTML((window.clipboardData||b.clipboardData).getData("text/html"),"pasteHTML"),d=a.pasteFn(c);!1!==d&&document.execCommand("insertHTML",null,d)}function d(){const a=document.createRange();a.selectNodeContents(n.current);const b=window.getSelection();b.removeAllRanges(),b.addRange(a),document.execCommand("removeFormat"),document.execCommand("delete")}function e(){if(p()){const a=window.getSelection();0<a.rangeCount&&(o.current=window.getSelection().getRangeAt(0)),m.fireSelectionChanged()}}function f(){const b=j();b!==s&&(t(b),a.save(b))}function g(){let a=n.current.innerHTML;if(0<m.numSerializers()){const b=new DOMParser().parseFromString(a,"text/html");a=m.serialize(b.body)}return a}function h(b,c){c?(n.current.innerHTML=m.sanitizeHTML(b,"setHTML"),a.autoFocus&&k()):(d(),n.current.innerHTML=m.sanitizeHTML(b,"setHTML"),k()),m.fireNewHTML()}function i(){h("")}function j(){return m.sanitizeHTML(g(),"getHTML")}function k(){n.current.focus(),q(!0)}function l(){return!window.chrome||!window.chrome.webstore&&!window.chrome.runtime?{opacity:"0.54"}:{color:"rgb(117, 117, 117)"}}if("function"!=typeof a.sanitizeHTML)throw Error("RichTextEditor must be passed a sanitizeHTML function as a prop");const m=useContext(RichTextContext);m.sanitizeHTML=a.sanitizeHTML;const n=useRef(null),o=useRef(null),{isFocused:p,setFocused:q}=useSynchronousFocusState(),r=useRef(globalBandicootId++),[s,t]=useState(()=>m.sanitizeHTML(a.initialHTML,"initialSetLastSavedHTML")),[u,v]=useState(!1);if(b){const a={setHTML:h,resetEditor:i,getHTML:j,focus:k};"function"==typeof b?b({current:a}):b.current=a}useEffect(()=>(n.current.addEventListener("paste",c),()=>n.current.removeEventListener("paste",c)),[a.pasteFn]),useEffect(()=>(document.addEventListener("selectionchange",e),()=>document.removeEventListener("selectionchange",e))),useEffect(()=>{if(n.current)for(let a=n.current;a.parentNode;)a=a.parentNode,"SPAN"===a.tagName&&console.warn("A span tag has been detected in the parents of <RichTextEditor>. This has been known to cause issues. https://github.com/CanopyTax/bandicoot/issues/69")},[n.current]),useEffect(()=>{if(a.save&&a.unchangedInterval&&n.current&&p()){let b;const c=new MutationObserver(()=>{clearTimeout(b),b=setTimeout(f,a.unchangedInterval)});return c.observe(n.current,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),()=>{c.disconnect(),clearTimeout(b)}}},[a.unchangedInterval,a.save,n.current,p()]),useEffect(()=>{if(!1===p()){const a=setTimeout(()=>{m.fireBlur(),f()},100);return()=>{clearTimeout(a)}}},[p()]),useEffect(()=>{m.selectRangeFromBeforeBlur=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{usePreviousRange:!1};if(n.current&&document.activeElement!==n.current&&!n.current.contains(document.activeElement)){if(a.usePreviousRange&&o.current){const a=window.getSelection();a.removeAllRanges(),a.addRange(o.current)}else n.current.focus();q(!0),setTimeout(e)}},m.getRangeFromBeforeBlur=()=>o.current,m.isFocused=p,m.getContentEditableElement=()=>n.current}),useEffect(()=>{!u&&a.initialHTML&&(v(!0),h(a.initialHTML,!0))},[u,h,m]),useEffect(()=>{if(a.placeholder){const b=document.createElement("style");b.textContent=".bandicoot-id-".concat(r.current,":empty:before { content: attr(data-placeholder); }"),document.head.appendChild(b);const c=Array.prototype.slice.call(document.styleSheets).find(a=>a.ownerNode===b),d=c.cssRules[0].style,e=a.placeholderStyle?a.placeholderStyle:l();for(let b in e)d[b]=a.placeholderStyle?a.placeholderStyle[b]:e[b];return()=>b.parentNode.removeChild(b)}},[a.placeholder,a.placeholderStyle,r.current]);const w=a.style||{};return React.createElement("div",{contentEditable:!a.disabled,onBlur:()=>q(!1),onFocus:function(){q(!0);const a=window.getSelection();0<a.rangeCount&&(o.current=a.getRangeAt(0))},ref:n,className:a.className+" bandicoot-id-"+r.current,style:_objectSpread2({wordBreak:"break-word",wordWrap:"break-word",overflowWrap:"break-word"},w),"data-placeholder":a.placeholder})});function useSynchronousFocusState(){const a=useRef(null),[b,c]=useState(!1);return{isFocused:function(){return a.current},setFocused:function(d){a.current=d,c(!b)}}}RichTextEditor.defaultProps={className:"",initialHTML:"",save:noop$1,placeholder:"",pasteFn:noopWithReturn};function useDocumentExecCommand(a){const b=useContext(RichTextContext);return{performCommand(c){b.selectRangeFromBeforeBlur(),document.execCommand(a)},performCommandWithValue(c){b.selectRangeFromBeforeBlur();document.execCommand(a,null,c)}}}function useFormatBlock(){const{performCommandWithValue:a}=useDocumentExecCommand("formatBlock");return{formatBlock(b){b===document.queryCommandValue("formatBlock")?a("div"):a(b)}}}const defaultActiveInfo={isActive:!1,value:!1};function useDocumentQueryCommandState(a,b){function c(){const c=document.queryCommandValue(a),d=b?b===c:document.queryCommandState(a);(d!==e.isActive||c!==e.value)&&f({isActive:d,value:c})}function d(){f(defaultActiveInfo)}const[e,f]=useState(defaultActiveInfo),g=useContext(RichTextContext);return useEffect(()=>(g.addSelectionChangedListener(c),()=>g.removeSelectionChangedListener(c)),[e,f]),useEffect(()=>(g.addBlurListener(d),()=>g.removeBlurListener(d)),[e,f]),{isActive:e.isActive,activeValue:e.value}}function useFontSize(a){let{defaultFontSize:c="14px",fontSizes:b}=a;if(7<b.length)throw Error("Browsers only support up to 7 font sizes with document.execCommand('fontSize', null, size)");const[d,e]=useState(c),[f,g]=useState(null),{performCommandWithValue:h}=useDocumentExecCommand("fontSize"),i=useContext(RichTextContext),j=function(){return useEffect(()=>{function a(){const a=window.getSelection();if((!f||a.anchorNode!==f.anchorNode||a.anchorOffset!==f.anchorOffset||a.focusNode!==f.focusNode||a.focusOffset!==f.focusOffset)&&(g({anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),0<a.rangeCount)){let b=a.getRangeAt(0).startContainer;1!==b.nodeType&&(b=b.parentElement);const c=window.getComputedStyle(b).fontSize,f=c;f!==d&&e(f)}}return i.addSelectionChangedListener(a),()=>i.removeSelectionChangedListener(a)},[d,e,f]),d}();return function(){useEffect(()=>{const a=b.reduce((a,b,c)=>"".concat(a," font[size=\"").concat(c+1,"\"] {font-size: ").concat(b,"}"),""),c=document.createElement("style");return c.textContent=a,document.head.appendChild(c),()=>document.head.removeChild(c)},[b]),useEffect(()=>{function a(a){const c=a.querySelectorAll("font");for(let d=0;d<c.length;d++){const a=c[d],e=+a.getAttribute("size");if(e>b.length)throw Error("Cannot find fontSize for integer size '".concat(e,"'"));const f=b[e-1];a.removeAttribute("size"),a.style.fontSize=f,a.dataset.integerSize=e}}return i.addSerializer(a),()=>i.removeSerializer(a)},[b]),useEffect(()=>{function a(){const a=i.getContentEditableElement().querySelectorAll("font");for(let c=0;c<a.length;c++){const d=a[c],e=d.style.fontSize,f=b.findIndex(a=>a===e)+1;0<f&&(d.style.fontSize="",d.setAttribute("size",f))}}return i.addNewHTMLListener(a),()=>i.removeNewHTMLListener(a)},[b])}(),{currentlySelectedFontSize:j,setSize(a){const c=b.findIndex(b=>b===a)+1;if(0>=c)throw Error("Cannot set font size since '".concat(a,"' was not passed in the fontSizes array"));e(a),h(c)}}}const noop$2=()=>{},defaultAcceptImgTypes=".jpg, .png, image/*",defaultOpts={processImgElement:noop$2,fileBlobToUrl:defaultFileBlobToUrl,acceptImgTypes:defaultAcceptImgTypes};function useImage(){function a(a){a.style.cursor="pointer",a.style.maxWidth="100%",c(a)}function b(a){a.querySelectorAll("img").forEach(a=>{i.current[a.src]&&(a.src=i.current[a.src])})}let{processImgElement:c=noop$2,fileBlobToUrl:d=defaultFileBlobToUrl,acceptImgTypes:e=defaultAcceptImgTypes}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOpts;const{performCommandWithValue:f}=useDocumentExecCommand("insertImage"),g=useContext(RichTextContext),h=useRef(null),i=React.useRef({});return function(){useEffect(()=>{function b(){const b=g.getContentEditableElement().querySelectorAll("img:not([data-text-as-image])");b.forEach(a)}return g.addNewHTMLListener(b),()=>g.removeNewHTMLListener(b)},[c])}(),function(){useEffect(()=>{h.current=document.createElement("input");const b=h.current;b.type="file",b.accept=e,b.multiple=!1,b.addEventListener("change",()=>{b.files&&0<b.files.length&&d(b.files[0],c=>{f(c);const d=document.querySelector("img[src=\"".concat(c,"\"]"));if(d.src&&d.src.startsWith("blob:")){const a=new FileReader;a.addEventListener("load",()=>{i.current[d.src]=a.result}),a.readAsDataURL(b.files[0])}a(d)})})},[d,c,e])}(),function(){useEffect(()=>(g.addSerializer(b),()=>g.removeSerializer(b)))}(),{chooseFile(a){h.current.click()},removeImage(a){const b=document.createRange();b.selectNode(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b),document.execCommand("delete")}}}function defaultFileBlobToUrl(a,b){b(URL.createObjectURL(a))}let tempId=0;const noop$3=()=>{},defaultOptions={processAnchorElement:noop$3};function useLink(){function a(a,d){c.selectRangeFromBeforeBlur({usePreviousRange:!0});const f="rte-link-temp-id-".concat(tempId++);e("<a href=\"".concat(a,"\" id=\"").concat(f,"\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(d,"</a>"));const g=document.getElementById(f);g.removeAttribute("id"),b(g)}let{processAnchorElement:b=noop$3}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOptions;const c=useContext(RichTextContext),{performCommand:d}=useDocumentExecCommand("unlink"),{performCommandWithValue:e}=useDocumentExecCommand("insertHTML");return function(){useEffect(()=>{function a(){const a=c.getContentEditableElement().querySelectorAll("a");a.forEach(b)}return c.addNewHTMLListener(a),()=>c.removeNewHTMLListener(a)},[b])}(),{getTextFromBeforeBlur:function(){const a=c.getRangeFromBeforeBlur();return a?a.toString():null},selectEntireLink:function(a){const b=document.createRange();b.selectNodeContents(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)},unlink:function(){d(),(window.navigator.userAgent.includes("Edge/14")||window.navigator.userAgent.includes("Edge/15")||window.navigator.userAgent.includes("Edge/16")||window.navigator.userAgent.includes("Edge/17"))&&document.execCommand("removeFormat")},insertLink:a}}let tempId$1=0;const noop$4=()=>{},defaultOptions$1={processContentEditableFalseElement:noop$4};function useContentEditableFalse(){function a(a){if(a.removeAttribute("id"),a.contentEditable=!1,a.addEventListener("click",()=>selectRangeAfterNode(a)),!a.previousSibling&&a.parentElement===d.getContentEditableElement()){const b=document.createElement("span");a.parentElement.insertBefore(b,a)}if(!a.nextSibling&&a.parentElement===d.getContentEditableElement()){const b=document.createElement("span");a.insertAdjacentElement("afterend",b)}selectRangeAfterNode(a),b(a)}let{processContentEditableFalseElement:b=noop$4}=0<arguments.length&&arguments[0]!==void 0?arguments[0]:defaultOptions$1;const{performCommandWithValue:c}=useDocumentExecCommand("insertHTML"),d=useContext(RichTextContext);return{insertContentEditableFalseElement(b){const e="rte-ce-false-temp-id-"+tempId$1++,f="<span id=\"".concat(e,"\">").concat(d.sanitizeHTML(b,"insertContentEditableFalseHTML"),"</span>");c(f);const g=document.getElementById(e);a(g)}}}function selectRangeAfterNode(a){const b=document.createRange();b.setStartAfter(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)}const noop$5=()=>{},defaultOptions$2={processSerializedElement:noop$5,fontFamily:null,fillStyle:"#00bf4b",fontWeight:"bold",textTop:null,backgroundColor:"transparent"};function useTextAsImage(){let{processSerializedElement:f=noop$5,fontFamily:a,fillStyle:b,fontWeight:c,textBottom:d,backgroundColor:e}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultOptions$2;const{performCommandWithValue:g}=useDocumentExecCommand("insertImage"),h=useContext(RichTextContext);return function(){useEffect(()=>{function f(){const f=h.getContentEditableElement().querySelectorAll("span[data-text-as-image]");for(let g=0;g<f.length;g++){const h=f[g],i=textToUrl({text:h.dataset.textAsImage,referenceEl:h.previousElementSibling||h.nextElementSibling||h.parentElement,fontFamily:a,fontWeight:c,fillStyle:b,textBottom:d}),j=document.createElement("img");j.src=i,processImgElement(j,h.dataset.textAsImage,e),h.parentNode.replaceChild(j,h)}}return h.addNewHTMLListener(f),()=>h.removeNewHTMLListener(f)})}(),function(){useEffect(()=>{function a(a){const b=a.querySelectorAll("img[data-text-as-image]");for(let c=0;c<b.length;c++){const a=b[c],d=document.createElement("span");d.dataset.textAsImage=a.dataset.textAsImage,f(d,d.dataset.textAsImage),a.parentNode.replaceChild(d,a)}}return h.addSerializer(a),()=>h.removeSerializer(a)},[])}(),{insertTextAsImage(f){h.selectRangeFromBeforeBlur({usePreviousRange:!0});const i=textToUrl({text:f,referenceEl:getSelectedElement(),fontFamily:a,fontWeight:c,fillStyle:b,textBottom:d});g(i);const j=document.querySelector("img[src=\"".concat(i,"\"]:not([data-text-as-image])"));processImgElement(j,f,e)}}}function textToUrl(a){let{text:b,referenceEl:d,fontFamily:e,fillStyle:f,fontWeight:g,textBottom:h}=a;const i=window.getComputedStyle(d),j=+i.fontSize.replace("px",""),k=+i.lineHeight.replace("px",""),l=e||i.fontFamily,m="".concat(g," ").concat(j,"px ").concat(l),n=document.createElement("div");n.style.font=m,n.style.position="absolute",n.style.visibility="hidden",n.style.whiteSpace="nowrap",n.textContent=b,document.body.appendChild(n);const o=document.createElement("canvas");o.width=n.clientWidth+1,o.height=k;const p=o.getContext("2d");p.font=m,p.fillStyle=f||defaultOptions$2.fillStyle,p.textBaseline="bottom";return p.fillText(b,0,h||k-3),document.body.removeChild(n),p.canvas.toDataURL()}function processImgElement(a,b,c){a.style.verticalAlign="bottom",a.dataset.textAsImage=b,a.style.backgroundColor=c||defaultOptions$2.backgroundColor,a.addEventListener("click",b=>{const c=a.getBoundingClientRect(),d=c.left+c.width/2,e=document.createRange();b.x<d?e.setStartBefore(a):e.setStartAfter(a);const f=window.getSelection();f.removeAllRanges(),f.addRange(e)})}function getSelectedElement(){let a=getSelection().getRangeAt(0).commonAncestorContainer;return 1===a.nodeType?a:a.parentElement}function useElementDeletionDetection(a,b){const c=useContext(RichTextContext);useEffect(()=>{if(a){function d(){a.isConnected||a._bandicoot_delete_callback_called||(a._bandicoot_delete_callback_called=!0,b(a))}return c.addSelectionChangedListener(d),()=>c.removeSelectionChangedListener(d)}},[a,b])}function styleInject(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&"undefined"!=typeof document){var d=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a))}}var css=".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}",style={bandicootButton:"icon-button_bandicootButton__2IZP5"};styleInject(".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}");function IconButton(a){return React.createElement("button",_extends({},a,{className:"\n        ".concat(style.bandicootButton,"\n        ").concat(a.isActive?"active-control-button":"","\n        ").concat(a.className||"","\n      "),onClick:a.onClick}),a.children)}BoldIcon.defaultProps={width:24,height:24};function BoldIcon(a){return React.createElement("svg",{width:a.width,height:a.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",viewBox:"0 0 317.41 317.41"},React.createElement("path",{d:"M281.4 158.7c21.7-15.1 36-40.3 36-68.7 0-46.2-37.6-83.7-83.7-83.7h-40H115 45 0v30h45v245H0v30h45 70 78.7 40c46.2 0 83.8-37.6 83.8-83.7C317.4 199 303.2 173.9 281.4 158.7zM193.7 36.2c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115v-107.5H193.7zM115 173.7h78.7c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115V173.7z"}))}function BoldButton(a){const{performCommand:b}=useDocumentExecCommand("bold"),{isActive:c}=useDocumentQueryCommandState("bold");return React.createElement(IconButton,{onClick:b,isActive:c},React.createElement(BoldIcon,a))}export{BoldButton,RichTextContainer,RichTextContext,RichTextEditor,useContentEditableFalse,useDocumentExecCommand,useDocumentQueryCommandState,useElementDeletionDetection,useFontSize,useFormatBlock,useImage,useLink,useTextAsImage};
 //# sourceMappingURL=bandicoot.esm.js.map

dist/bandicoot.umd.js

@@ -1,2 +0,2 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],b):(a=a||self,b(a.bandicoot={},a.React))})(this,function(a,b){'use strict';function c(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function d(){return d=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},d.apply(this,arguments)}function e(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function f(a){for(var b,d=1;d<arguments.length;d++)b=null==arguments[d]?{}:arguments[d],d%2?e(b,!0).forEach(function(d){c(a,d,b[d])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):e(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function g(){const a=b.useRef(null),[c,d]=b.useState(!1);return{isFocused:function(){return a.current},setFocused:function(b){a.current=b,d(!c)}}}function h(a){const c=b.useContext(t);return{performCommand(b){c.selectRangeFromBeforeBlur(),document.execCommand(a)},performCommandWithValue(b){c.selectRangeFromBeforeBlur();document.execCommand(a,null,b)}}}function i(a,c){function d(){const b=document.queryCommandValue(a),d=c?c===b:document.queryCommandState(a);(d!==f.isActive||b!==f.value)&&g({isActive:d,value:b})}function e(){g(w)}const[f,g]=b.useState(w),h=b.useContext(t);return b.useEffect(()=>(h.addSelectionChangedListener(d),()=>h.removeSelectionChangedListener(d)),[f,g]),b.useEffect(()=>(h.addBlurListener(e),()=>h.removeBlurListener(e)),[f,g]),{isActive:f.isActive,activeValue:f.value}}function j(a,b){b(URL.createObjectURL(a))}function k(a){const b=document.createRange();b.setStartAfter(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)}function l(a,b,d){const e=window.getComputedStyle(b),f=+e.fontSize.replace("px",""),g=+e.lineHeight.replace("px",""),h=d||e.fontFamily,i="bold ".concat(f,"px ").concat(h),j=document.createElement("div");j.style.font=i,j.style.position="absolute",j.style.visibility="hidden",j.style.whiteSpace="nowrap",j.textContent=a,document.body.appendChild(j);const k=document.createElement("canvas");k.width=j.clientWidth+1,k.height=g;const l=k.getContext("2d");return l.font=i,l.fillStyle="#00bf4b",l.textBaseline="bottom",l.fillText(a,0,g-3),document.body.removeChild(j),l.canvas.toDataURL()}function m(a,b){a.style.verticalAlign="bottom",a.dataset.textAsImage=b,a.addEventListener("click",b=>{const c=a.getBoundingClientRect(),d=c.left+c.width/2,e=document.createRange();b.x<d?e.setStartBefore(a):e.setStartAfter(a);const f=window.getSelection();f.removeAllRanges(),f.addRange(e)})}function n(){let a=getSelection().getRangeAt(0).commonAncestorContainer;return 1===a.nodeType?a:a.parentElement}function o(a){return q.createElement("button",d({},a,{className:"\n        ".concat(I.bandicootButton,"\n        ").concat(a.isActive?"active-control-button":"","\n        ").concat(a.className||"","\n      "),onClick:a.onClick}),a.children)}function p(a){return q.createElement("svg",{width:a.width,height:a.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",viewBox:"0 0 317.41 317.41"},q.createElement("path",{d:"M281.4 158.7c21.7-15.1 36-40.3 36-68.7 0-46.2-37.6-83.7-83.7-83.7h-40H115 45 0v30h45v245H0v30h45 70 78.7 40c46.2 0 83.8-37.6 83.8-83.7C317.4 199 303.2 173.9 281.4 158.7zM193.7 36.2c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115v-107.5H193.7zM115 173.7h78.7c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115V173.7z"}))}var q="default"in b?b["default"]:b;const r=()=>{},s={addSelectionChangedListener:r,removeSelectionChangedListener:r,fireSelectionChanged:r,selectRangeFromBeforeBlur:r,getRangeBeforeBlur:r,addBlurListener:r,removeBlurListener:r,fireBlur:r,addNewHTMLListener:r,removeNewHTMLListener:r,fireNewHTML:r,isFocused:r,getContentEditableElement:r,numSerializers:()=>0,addSerializer:r,removeSerializer:r,serialize:r,sanitizeHTML:r},t=q.createContext(s);let u=0;const v=b.forwardRef((a,c)=>{function d(b){b.preventDefault(),b.stopPropagation();let c=p.sanitizeHTML((window.clipboardData||b.clipboardData).getData("text/html"),"pasteHTML"),d=a.pasteFn(c);!1!==d&&document.execCommand("insertHTML",null,d)}function e(){const a=document.createRange();a.selectNodeContents(r.current);const b=window.getSelection();b.removeAllRanges(),b.addRange(a),document.execCommand("removeFormat"),document.execCommand("delete")}function h(){if(v()){const a=window.getSelection();0<a.rangeCount&&(s.current=window.getSelection().getRangeAt(0)),p.fireSelectionChanged()}}function i(){const b=m();b!==y&&(z(b),a.save(b))}function j(){let a=r.current.innerHTML;if(0<p.numSerializers()){const b=new DOMParser().parseFromString(a,"text/html");a=p.serialize(b.body)}return a}function k(b,c){c?(r.current.innerHTML=p.sanitizeHTML(b,"setHTML"),a.autoFocus&&n()):(e(),r.current.innerHTML=p.sanitizeHTML(b,"setHTML"),n()),p.fireNewHTML()}function l(){k("")}function m(){return p.sanitizeHTML(j(),"getHTML")}function n(){r.current.focus(),w(!0)}function o(){return!window.chrome||!window.chrome.webstore&&!window.chrome.runtime?{opacity:"0.54"}:{color:"rgb(117, 117, 117)"}}if("function"!=typeof a.sanitizeHTML)throw Error("RichTextEditor must be passed a sanitizeHTML function as a prop");const p=b.useContext(t);p.sanitizeHTML=a.sanitizeHTML;const r=b.useRef(null),s=b.useRef(null),{isFocused:v,setFocused:w}=g(),x=b.useRef(u++),[y,z]=b.useState(()=>p.sanitizeHTML(a.initialHTML,"initialSetLastSavedHTML")),[A,B]=b.useState(!1);if(c){const a={setHTML:k,resetEditor:l,getHTML:m,focus:n};"function"==typeof c?c({current:a}):c.current=a}b.useEffect(()=>(r.current.addEventListener("paste",d),()=>r.current.removeEventListener("paste",d)),[a.pasteFn]),b.useEffect(()=>(document.addEventListener("selectionchange",h),()=>document.removeEventListener("selectionchange",h))),b.useEffect(()=>{if(r.current)for(let a=r.current;a.parentNode;)a=a.parentNode,"SPAN"===a.tagName&&console.warn("A span tag has been detected in the parents of <RichTextEditor>. This has been known to cause issues. https://github.com/CanopyTax/bandicoot/issues/69")},[r.current]),b.useEffect(()=>{if(a.save&&a.unchangedInterval&&r.current&&v()){let b;const c=new MutationObserver(()=>{clearTimeout(b),b=setTimeout(i,a.unchangedInterval)});return c.observe(r.current,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),()=>{c.disconnect(),clearTimeout(b)}}},[a.unchangedInterval,a.save,r.current,v()]),b.useEffect(()=>{if(!1===v()){const a=setTimeout(()=>{p.fireBlur(),i()},100);return()=>{clearTimeout(a)}}},[v()]),b.useEffect(()=>{p.selectRangeFromBeforeBlur=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{usePreviousRange:!1};if(r.current&&document.activeElement!==r.current&&!r.current.contains(document.activeElement)){if(a.usePreviousRange&&s.current){const a=window.getSelection();a.removeAllRanges(),a.addRange(s.current)}else r.current.focus();w(!0),setTimeout(h)}},p.getRangeFromBeforeBlur=()=>s.current,p.isFocused=v,p.getContentEditableElement=()=>r.current}),b.useEffect(()=>{!A&&a.initialHTML&&(B(!0),k(a.initialHTML,!0))},[A,k,p]),b.useEffect(()=>{if(a.placeholder){const b=document.createElement("style");b.textContent=".bandicoot-id-".concat(x.current,":empty:before { content: attr(data-placeholder); }"),document.head.appendChild(b);const c=Array.prototype.slice.call(document.styleSheets).find(a=>a.ownerNode===b),d=c.cssRules[0].style,e=a.placeholderStyle?a.placeholderStyle:o();for(let b in e)d[b]=a.placeholderStyle?a.placeholderStyle[b]:e[b];return()=>b.parentNode.removeChild(b)}},[a.placeholder,a.placeholderStyle,x.current]);const C=a.style||{};return q.createElement("div",{contentEditable:!a.disabled,onBlur:()=>w(!1),onFocus:function(){w(!0);const a=window.getSelection();0<a.rangeCount&&(s.current=a.getRangeAt(0))},ref:r,className:a.className+" bandicoot-id-"+x.current,style:f({wordBreak:"break-word",wordWrap:"break-word",overflowWrap:"break-word"},C),"data-placeholder":a.placeholder})});v.defaultProps={className:"",initialHTML:"",save:()=>{},placeholder:"",pasteFn:a=>a};const w={isActive:!1,value:!1},x=()=>{},y=".jpg, .png, image/*",z={processImgElement:x,fileBlobToUrl:j,acceptImgTypes:y};let A=0;const B=()=>{},C={processAnchorElement:B};let D=0;const E=()=>{},F={processContentEditableFalseElement:E},G=()=>{},H={processSerializedElement:G,fontFamily:null};var I={bandicootButton:"icon-button_bandicootButton__2IZP5"};(function(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&"undefined"!=typeof document){var d=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a))}})(".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}"),p.defaultProps={width:24,height:24},a.BoldButton=function(a){const{performCommand:b}=h("bold"),{isActive:c}=i("bold");return q.createElement(o,{onClick:b,isActive:c},q.createElement(p,a))},a.RichTextContainer=function(a){const c=b.useRef(Object.assign({},s)),d=c.current,e=b.useRef([]),f=b.useRef([]),g=b.useRef([]),h=b.useRef([]);return b.useEffect(()=>{const a=d.getContentEditableElement();a&&a.innerHTML&&d.fireNewHTML()},[d]),d.addSelectionChangedListener=a=>{e.current.push(a)},d.removeSelectionChangedListener=a=>{e.current=e.current.filter(b=>b!==a)},d.fireSelectionChanged=()=>{e.current.forEach(a=>a())},d.addBlurListener=a=>{f.current.push(a)},d.removeBlurListener=a=>{f.current=f.current.filter(b=>b!==a)},d.fireBlur=()=>{f.current.forEach(a=>a())},d.addNewHTMLListener=a=>{g.current.push(a)},d.removeNewHTMLListener=a=>{g.current=g.current.filter(b=>b!==a)},d.fireNewHTML=()=>{g.current.forEach(a=>a())},d.numSerializers=()=>h.current.length,d.addSerializer=a=>{h.current.push(a)},d.removeSerializer=a=>{h.current=h.current.filter(b=>b!==a)},d.serialize=a=>(h.current.forEach(b=>b(a)),a.innerHTML),q.createElement(t.Provider,{value:d},a.children)},a.RichTextContext=t,a.RichTextEditor=v,a.useContentEditableFalse=function(){function a(a){if(a.removeAttribute("id"),a.contentEditable=!1,a.addEventListener("click",()=>k(a)),!a.previousSibling&&a.parentElement===e.getContentEditableElement()){const b=document.createElement("span");a.parentElement.insertBefore(b,a)}if(!a.nextSibling&&a.parentElement===e.getContentEditableElement()){const b=document.createElement("span");a.insertAdjacentElement("afterend",b)}k(a),c(a)}let{processContentEditableFalseElement:c=E}=0<arguments.length&&arguments[0]!==void 0?arguments[0]:F;const{performCommandWithValue:d}=h("insertHTML"),e=b.useContext(t);return{insertContentEditableFalseElement(b){const c="rte-ce-false-temp-id-"+D++,f="<span id=\"".concat(c,"\">").concat(e.sanitizeHTML(b,"insertContentEditableFalseHTML"),"</span>");d(f);const g=document.getElementById(c);a(g)}}},a.useDocumentExecCommand=h,a.useDocumentQueryCommandState=i,a.useElementDeletionDetection=function(a,c){const d=b.useContext(t);b.useEffect(()=>{if(a){function b(){a.isConnected||a._bandicoot_delete_callback_called||(a._bandicoot_delete_callback_called=!0,c(a))}return d.addSelectionChangedListener(b),()=>d.removeSelectionChangedListener(b)}},[a,c])},a.useFontSize=function(a){let{defaultFontSize:d="14px",fontSizes:c}=a;if(7<c.length)throw Error("Browsers only support up to 7 font sizes with document.execCommand('fontSize', null, size)");const[e,f]=b.useState(d),[g,i]=b.useState(null),{performCommandWithValue:j}=h("fontSize"),k=b.useContext(t),l=function(){return b.useEffect(()=>{function a(){const a=window.getSelection();if((!g||a.anchorNode!==g.anchorNode||a.anchorOffset!==g.anchorOffset||a.focusNode!==g.focusNode||a.focusOffset!==g.focusOffset)&&(i({anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),0<a.rangeCount)){let b=a.getRangeAt(0).startContainer;1!==b.nodeType&&(b=b.parentElement);const c=window.getComputedStyle(b).fontSize,d=c;d!==e&&f(d)}}return k.addSelectionChangedListener(a),()=>k.removeSelectionChangedListener(a)},[e,f,g]),e}();return function(){b.useEffect(()=>{const a=c.reduce((a,b,c)=>"".concat(a," font[size=\"").concat(c+1,"\"] {font-size: ").concat(b,"}"),""),b=document.createElement("style");return b.textContent=a,document.head.appendChild(b),()=>document.head.removeChild(b)},[c]),b.useEffect(()=>{function a(a){const b=a.querySelectorAll("font");for(let d=0;d<b.length;d++){const a=b[d],e=+a.getAttribute("size");if(e>c.length)throw Error("Cannot find fontSize for integer size '".concat(e,"'"));const f=c[e-1];a.removeAttribute("size"),a.style.fontSize=f,a.dataset.integerSize=e}}return k.addSerializer(a),()=>k.removeSerializer(a)},[c]),b.useEffect(()=>{function a(){const a=k.getContentEditableElement().querySelectorAll("font");for(let b=0;b<a.length;b++){const d=a[b],e=d.style.fontSize,f=c.findIndex(a=>a===e)+1;0<f&&(d.style.fontSize="",d.setAttribute("size",f))}}return k.addNewHTMLListener(a),()=>k.removeNewHTMLListener(a)},[c])}(),{currentlySelectedFontSize:l,setSize(a){const b=c.findIndex(b=>b===a)+1;if(0>=b)throw Error("Cannot set font size since '".concat(a,"' was not passed in the fontSizes array"));f(a),j(b)}}},a.useFormatBlock=function(){const{performCommandWithValue:a}=h("formatBlock");return{formatBlock(b){b===document.queryCommandValue("formatBlock")?a("div"):a(b)}}},a.useImage=function(){function a(a){a.style.cursor="pointer",a.style.maxWidth="100%",d(a)}function c(a){a.querySelectorAll("img").forEach(a=>{l.current[a.src]&&(a.src=l.current[a.src])})}let{processImgElement:d=x,fileBlobToUrl:e=j,acceptImgTypes:f=y}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:z;const{performCommandWithValue:g}=h("insertImage"),i=b.useContext(t),k=b.useRef(null),l=q.useRef({});return function(){b.useEffect(()=>{function b(){const b=i.getContentEditableElement().querySelectorAll("img:not([data-text-as-image])");b.forEach(a)}return i.addNewHTMLListener(b),()=>i.removeNewHTMLListener(b)},[d])}(),function(){b.useEffect(()=>{k.current=document.createElement("input");const b=k.current;b.type="file",b.accept=f,b.multiple=!1,b.addEventListener("change",()=>{b.files&&0<b.files.length&&e(b.files[0],c=>{g(c);const d=document.querySelector("img[src=\"".concat(c,"\"]"));if(d.src&&d.src.startsWith("blob:")){const a=new FileReader;a.addEventListener("load",()=>{l.current[d.src]=a.result}),a.readAsDataURL(b.files[0])}a(d)})})},[e,d,f])}(),function(){b.useEffect(()=>(i.addSerializer(c),()=>i.removeSerializer(c)))}(),{chooseFile(a){k.current.click()},removeImage(a){const b=document.createRange();b.selectNode(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b),document.execCommand("delete")}}},a.useLink=function(){function a(a,b){d.selectRangeFromBeforeBlur({usePreviousRange:!0});const e="rte-link-temp-id-".concat(A++);f("<a href=\"".concat(a,"\" id=\"").concat(e,"\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(b,"</a>"));const g=document.getElementById(e);g.removeAttribute("id"),c(g)}let{processAnchorElement:c=B}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:C;const d=b.useContext(t),{performCommand:e}=h("unlink"),{performCommandWithValue:f}=h("insertHTML");return function(){b.useEffect(()=>{function a(){const a=d.getContentEditableElement().querySelectorAll("a");a.forEach(c)}return d.addNewHTMLListener(a),()=>d.removeNewHTMLListener(a)},[c])}(),{getTextFromBeforeBlur:function(){const a=d.getRangeFromBeforeBlur();return a?a.toString():null},selectEntireLink:function(a){const b=document.createRange();b.selectNodeContents(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)},unlink:function(){e(),(window.navigator.userAgent.includes("Edge/14")||window.navigator.userAgent.includes("Edge/15")||window.navigator.userAgent.includes("Edge/16")||window.navigator.userAgent.includes("Edge/17"))&&document.execCommand("removeFormat")},insertLink:a}},a.useTextAsImage=function(){let{processSerializedElement:a=G,fontFamily:c=null}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:H;const{performCommandWithValue:d}=h("insertImage"),e=b.useContext(t);return function(){b.useEffect(()=>{function a(){const a=e.getContentEditableElement().querySelectorAll("span[data-text-as-image]");for(let b=0;b<a.length;b++){const d=a[b],e=l(d.dataset.textAsImage,d.previousElementSibling||d.nextElementSibling||d.parentElement,c),f=document.createElement("img");f.src=e,m(f,d.dataset.textAsImage),d.parentNode.replaceChild(f,d)}}return e.addNewHTMLListener(a),()=>e.removeNewHTMLListener(a)},[])}(),function(){b.useEffect(()=>{function b(b){const c=b.querySelectorAll("img[data-text-as-image]");for(let d=0;d<c.length;d++){const b=c[d],e=document.createElement("span");e.dataset.textAsImage=b.dataset.textAsImage,a(e,e.dataset.textAsImage),b.parentNode.replaceChild(e,b)}}return e.addSerializer(b),()=>e.removeSerializer(b)},[])}(),{insertTextAsImage(a){e.selectRangeFromBeforeBlur({usePreviousRange:!0});const b=l(a,n(),c);d(b);const f=document.querySelector("img[src=\"".concat(b,"\"]:not([data-text-as-image])"));m(f,a)}}},Object.defineProperty(a,"__esModule",{value:!0})});
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],b):(a=a||self,b(a.bandicoot={},a.React))})(this,function(a,b){'use strict';function c(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function d(){return d=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},d.apply(this,arguments)}function e(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function f(a){for(var b,d=1;d<arguments.length;d++)b=null==arguments[d]?{}:arguments[d],d%2?e(b,!0).forEach(function(d){c(a,d,b[d])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):e(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function g(){const a=b.useRef(null),[c,d]=b.useState(!1);return{isFocused:function(){return a.current},setFocused:function(b){a.current=b,d(!c)}}}function h(a){const c=b.useContext(t);return{performCommand(b){c.selectRangeFromBeforeBlur(),document.execCommand(a)},performCommandWithValue(b){c.selectRangeFromBeforeBlur();document.execCommand(a,null,b)}}}function i(a,c){function d(){const b=document.queryCommandValue(a),d=c?c===b:document.queryCommandState(a);(d!==f.isActive||b!==f.value)&&g({isActive:d,value:b})}function e(){g(w)}const[f,g]=b.useState(w),h=b.useContext(t);return b.useEffect(()=>(h.addSelectionChangedListener(d),()=>h.removeSelectionChangedListener(d)),[f,g]),b.useEffect(()=>(h.addBlurListener(e),()=>h.removeBlurListener(e)),[f,g]),{isActive:f.isActive,activeValue:f.value}}function j(a,b){b(URL.createObjectURL(a))}function k(a){const b=document.createRange();b.setStartAfter(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)}function l(a){let{text:b,referenceEl:d,fontFamily:e,fillStyle:f,fontWeight:g,textBottom:h}=a;const i=window.getComputedStyle(d),j=+i.fontSize.replace("px",""),k=+i.lineHeight.replace("px",""),l=e||i.fontFamily,m="".concat(g," ").concat(j,"px ").concat(l),n=document.createElement("div");n.style.font=m,n.style.position="absolute",n.style.visibility="hidden",n.style.whiteSpace="nowrap",n.textContent=b,document.body.appendChild(n);const o=document.createElement("canvas");o.width=n.clientWidth+1,o.height=k;const p=o.getContext("2d");p.font=m,p.fillStyle=f||H.fillStyle,p.textBaseline="bottom";return p.fillText(b,0,h||k-3),document.body.removeChild(n),p.canvas.toDataURL()}function m(a,b,c){a.style.verticalAlign="bottom",a.dataset.textAsImage=b,a.style.backgroundColor=c||H.backgroundColor,a.addEventListener("click",b=>{const c=a.getBoundingClientRect(),d=c.left+c.width/2,e=document.createRange();b.x<d?e.setStartBefore(a):e.setStartAfter(a);const f=window.getSelection();f.removeAllRanges(),f.addRange(e)})}function n(){let a=getSelection().getRangeAt(0).commonAncestorContainer;return 1===a.nodeType?a:a.parentElement}function o(a){return q.createElement("button",d({},a,{className:"\n        ".concat(I.bandicootButton,"\n        ").concat(a.isActive?"active-control-button":"","\n        ").concat(a.className||"","\n      "),onClick:a.onClick}),a.children)}function p(a){return q.createElement("svg",{width:a.width,height:a.height,xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",viewBox:"0 0 317.41 317.41"},q.createElement("path",{d:"M281.4 158.7c21.7-15.1 36-40.3 36-68.7 0-46.2-37.6-83.7-83.7-83.7h-40H115 45 0v30h45v245H0v30h45 70 78.7 40c46.2 0 83.8-37.6 83.8-83.7C317.4 199 303.2 173.9 281.4 158.7zM193.7 36.2c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115v-107.5H193.7zM115 173.7h78.7c29.6 0 53.8 24.1 53.8 53.8s-24.1 53.8-53.7 53.8H115V173.7z"}))}var q="default"in b?b["default"]:b;const r=()=>{},s={addSelectionChangedListener:r,removeSelectionChangedListener:r,fireSelectionChanged:r,selectRangeFromBeforeBlur:r,getRangeBeforeBlur:r,addBlurListener:r,removeBlurListener:r,fireBlur:r,addNewHTMLListener:r,removeNewHTMLListener:r,fireNewHTML:r,isFocused:r,getContentEditableElement:r,numSerializers:()=>0,addSerializer:r,removeSerializer:r,serialize:r,sanitizeHTML:r},t=q.createContext(s);let u=0;const v=b.forwardRef((a,c)=>{function d(b){b.preventDefault(),b.stopPropagation();let c=p.sanitizeHTML((window.clipboardData||b.clipboardData).getData("text/html"),"pasteHTML"),d=a.pasteFn(c);!1!==d&&document.execCommand("insertHTML",null,d)}function e(){const a=document.createRange();a.selectNodeContents(r.current);const b=window.getSelection();b.removeAllRanges(),b.addRange(a),document.execCommand("removeFormat"),document.execCommand("delete")}function h(){if(v()){const a=window.getSelection();0<a.rangeCount&&(s.current=window.getSelection().getRangeAt(0)),p.fireSelectionChanged()}}function i(){const b=m();b!==y&&(z(b),a.save(b))}function j(){let a=r.current.innerHTML;if(0<p.numSerializers()){const b=new DOMParser().parseFromString(a,"text/html");a=p.serialize(b.body)}return a}function k(b,c){c?(r.current.innerHTML=p.sanitizeHTML(b,"setHTML"),a.autoFocus&&n()):(e(),r.current.innerHTML=p.sanitizeHTML(b,"setHTML"),n()),p.fireNewHTML()}function l(){k("")}function m(){return p.sanitizeHTML(j(),"getHTML")}function n(){r.current.focus(),w(!0)}function o(){return!window.chrome||!window.chrome.webstore&&!window.chrome.runtime?{opacity:"0.54"}:{color:"rgb(117, 117, 117)"}}if("function"!=typeof a.sanitizeHTML)throw Error("RichTextEditor must be passed a sanitizeHTML function as a prop");const p=b.useContext(t);p.sanitizeHTML=a.sanitizeHTML;const r=b.useRef(null),s=b.useRef(null),{isFocused:v,setFocused:w}=g(),x=b.useRef(u++),[y,z]=b.useState(()=>p.sanitizeHTML(a.initialHTML,"initialSetLastSavedHTML")),[A,B]=b.useState(!1);if(c){const a={setHTML:k,resetEditor:l,getHTML:m,focus:n};"function"==typeof c?c({current:a}):c.current=a}b.useEffect(()=>(r.current.addEventListener("paste",d),()=>r.current.removeEventListener("paste",d)),[a.pasteFn]),b.useEffect(()=>(document.addEventListener("selectionchange",h),()=>document.removeEventListener("selectionchange",h))),b.useEffect(()=>{if(r.current)for(let a=r.current;a.parentNode;)a=a.parentNode,"SPAN"===a.tagName&&console.warn("A span tag has been detected in the parents of <RichTextEditor>. This has been known to cause issues. https://github.com/CanopyTax/bandicoot/issues/69")},[r.current]),b.useEffect(()=>{if(a.save&&a.unchangedInterval&&r.current&&v()){let b;const c=new MutationObserver(()=>{clearTimeout(b),b=setTimeout(i,a.unchangedInterval)});return c.observe(r.current,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),()=>{c.disconnect(),clearTimeout(b)}}},[a.unchangedInterval,a.save,r.current,v()]),b.useEffect(()=>{if(!1===v()){const a=setTimeout(()=>{p.fireBlur(),i()},100);return()=>{clearTimeout(a)}}},[v()]),b.useEffect(()=>{p.selectRangeFromBeforeBlur=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{usePreviousRange:!1};if(r.current&&document.activeElement!==r.current&&!r.current.contains(document.activeElement)){if(a.usePreviousRange&&s.current){const a=window.getSelection();a.removeAllRanges(),a.addRange(s.current)}else r.current.focus();w(!0),setTimeout(h)}},p.getRangeFromBeforeBlur=()=>s.current,p.isFocused=v,p.getContentEditableElement=()=>r.current}),b.useEffect(()=>{!A&&a.initialHTML&&(B(!0),k(a.initialHTML,!0))},[A,k,p]),b.useEffect(()=>{if(a.placeholder){const b=document.createElement("style");b.textContent=".bandicoot-id-".concat(x.current,":empty:before { content: attr(data-placeholder); }"),document.head.appendChild(b);const c=Array.prototype.slice.call(document.styleSheets).find(a=>a.ownerNode===b),d=c.cssRules[0].style,e=a.placeholderStyle?a.placeholderStyle:o();for(let b in e)d[b]=a.placeholderStyle?a.placeholderStyle[b]:e[b];return()=>b.parentNode.removeChild(b)}},[a.placeholder,a.placeholderStyle,x.current]);const C=a.style||{};return q.createElement("div",{contentEditable:!a.disabled,onBlur:()=>w(!1),onFocus:function(){w(!0);const a=window.getSelection();0<a.rangeCount&&(s.current=a.getRangeAt(0))},ref:r,className:a.className+" bandicoot-id-"+x.current,style:f({wordBreak:"break-word",wordWrap:"break-word",overflowWrap:"break-word"},C),"data-placeholder":a.placeholder})});v.defaultProps={className:"",initialHTML:"",save:()=>{},placeholder:"",pasteFn:a=>a};const w={isActive:!1,value:!1},x=()=>{},y=".jpg, .png, image/*",z={processImgElement:x,fileBlobToUrl:j,acceptImgTypes:y};let A=0;const B=()=>{},C={processAnchorElement:B};let D=0;const E=()=>{},F={processContentEditableFalseElement:E},G=()=>{},H={processSerializedElement:G,fontFamily:null,fillStyle:"#00bf4b",fontWeight:"bold",textTop:null,backgroundColor:"transparent"};var I={bandicootButton:"icon-button_bandicootButton__2IZP5"};(function(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&"undefined"!=typeof document){var d=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a))}})(".icon-button_bandicootButton__2IZP5 {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n}\n.icon-button_bandicootButton__2IZP5:hover {\n  transition: background-color .25s ease-in-out;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.icon-button_bandicootButton__2IZP5 svg {\n  fill: currentcolor;\n}"),p.defaultProps={width:24,height:24},a.BoldButton=function(a){const{performCommand:b}=h("bold"),{isActive:c}=i("bold");return q.createElement(o,{onClick:b,isActive:c},q.createElement(p,a))},a.RichTextContainer=function(a){const c=b.useRef(Object.assign({},s)),d=c.current,e=b.useRef([]),f=b.useRef([]),g=b.useRef([]),h=b.useRef([]);return b.useEffect(()=>{const a=d.getContentEditableElement();a&&a.innerHTML&&d.fireNewHTML()},[d]),d.addSelectionChangedListener=a=>{e.current.push(a)},d.removeSelectionChangedListener=a=>{e.current=e.current.filter(b=>b!==a)},d.fireSelectionChanged=()=>{e.current.forEach(a=>a())},d.addBlurListener=a=>{f.current.push(a)},d.removeBlurListener=a=>{f.current=f.current.filter(b=>b!==a)},d.fireBlur=()=>{f.current.forEach(a=>a())},d.addNewHTMLListener=a=>{g.current.push(a)},d.removeNewHTMLListener=a=>{g.current=g.current.filter(b=>b!==a)},d.fireNewHTML=()=>{g.current.forEach(a=>a())},d.numSerializers=()=>h.current.length,d.addSerializer=a=>{h.current.push(a)},d.removeSerializer=a=>{h.current=h.current.filter(b=>b!==a)},d.serialize=a=>(h.current.forEach(b=>b(a)),a.innerHTML),q.createElement(t.Provider,{value:d},a.children)},a.RichTextContext=t,a.RichTextEditor=v,a.useContentEditableFalse=function(){function a(a){if(a.removeAttribute("id"),a.contentEditable=!1,a.addEventListener("click",()=>k(a)),!a.previousSibling&&a.parentElement===e.getContentEditableElement()){const b=document.createElement("span");a.parentElement.insertBefore(b,a)}if(!a.nextSibling&&a.parentElement===e.getContentEditableElement()){const b=document.createElement("span");a.insertAdjacentElement("afterend",b)}k(a),c(a)}let{processContentEditableFalseElement:c=E}=0<arguments.length&&arguments[0]!==void 0?arguments[0]:F;const{performCommandWithValue:d}=h("insertHTML"),e=b.useContext(t);return{insertContentEditableFalseElement(b){const c="rte-ce-false-temp-id-"+D++,f="<span id=\"".concat(c,"\">").concat(e.sanitizeHTML(b,"insertContentEditableFalseHTML"),"</span>");d(f);const g=document.getElementById(c);a(g)}}},a.useDocumentExecCommand=h,a.useDocumentQueryCommandState=i,a.useElementDeletionDetection=function(a,c){const d=b.useContext(t);b.useEffect(()=>{if(a){function b(){a.isConnected||a._bandicoot_delete_callback_called||(a._bandicoot_delete_callback_called=!0,c(a))}return d.addSelectionChangedListener(b),()=>d.removeSelectionChangedListener(b)}},[a,c])},a.useFontSize=function(a){let{defaultFontSize:d="14px",fontSizes:c}=a;if(7<c.length)throw Error("Browsers only support up to 7 font sizes with document.execCommand('fontSize', null, size)");const[e,f]=b.useState(d),[g,i]=b.useState(null),{performCommandWithValue:j}=h("fontSize"),k=b.useContext(t),l=function(){return b.useEffect(()=>{function a(){const a=window.getSelection();if((!g||a.anchorNode!==g.anchorNode||a.anchorOffset!==g.anchorOffset||a.focusNode!==g.focusNode||a.focusOffset!==g.focusOffset)&&(i({anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),0<a.rangeCount)){let b=a.getRangeAt(0).startContainer;1!==b.nodeType&&(b=b.parentElement);const c=window.getComputedStyle(b).fontSize,d=c;d!==e&&f(d)}}return k.addSelectionChangedListener(a),()=>k.removeSelectionChangedListener(a)},[e,f,g]),e}();return function(){b.useEffect(()=>{const a=c.reduce((a,b,c)=>"".concat(a," font[size=\"").concat(c+1,"\"] {font-size: ").concat(b,"}"),""),b=document.createElement("style");return b.textContent=a,document.head.appendChild(b),()=>document.head.removeChild(b)},[c]),b.useEffect(()=>{function a(a){const b=a.querySelectorAll("font");for(let d=0;d<b.length;d++){const a=b[d],e=+a.getAttribute("size");if(e>c.length)throw Error("Cannot find fontSize for integer size '".concat(e,"'"));const f=c[e-1];a.removeAttribute("size"),a.style.fontSize=f,a.dataset.integerSize=e}}return k.addSerializer(a),()=>k.removeSerializer(a)},[c]),b.useEffect(()=>{function a(){const a=k.getContentEditableElement().querySelectorAll("font");for(let b=0;b<a.length;b++){const d=a[b],e=d.style.fontSize,f=c.findIndex(a=>a===e)+1;0<f&&(d.style.fontSize="",d.setAttribute("size",f))}}return k.addNewHTMLListener(a),()=>k.removeNewHTMLListener(a)},[c])}(),{currentlySelectedFontSize:l,setSize(a){const b=c.findIndex(b=>b===a)+1;if(0>=b)throw Error("Cannot set font size since '".concat(a,"' was not passed in the fontSizes array"));f(a),j(b)}}},a.useFormatBlock=function(){const{performCommandWithValue:a}=h("formatBlock");return{formatBlock(b){b===document.queryCommandValue("formatBlock")?a("div"):a(b)}}},a.useImage=function(){function a(a){a.style.cursor="pointer",a.style.maxWidth="100%",d(a)}function c(a){a.querySelectorAll("img").forEach(a=>{l.current[a.src]&&(a.src=l.current[a.src])})}let{processImgElement:d=x,fileBlobToUrl:e=j,acceptImgTypes:f=y}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:z;const{performCommandWithValue:g}=h("insertImage"),i=b.useContext(t),k=b.useRef(null),l=q.useRef({});return function(){b.useEffect(()=>{function b(){const b=i.getContentEditableElement().querySelectorAll("img:not([data-text-as-image])");b.forEach(a)}return i.addNewHTMLListener(b),()=>i.removeNewHTMLListener(b)},[d])}(),function(){b.useEffect(()=>{k.current=document.createElement("input");const b=k.current;b.type="file",b.accept=f,b.multiple=!1,b.addEventListener("change",()=>{b.files&&0<b.files.length&&e(b.files[0],c=>{g(c);const d=document.querySelector("img[src=\"".concat(c,"\"]"));if(d.src&&d.src.startsWith("blob:")){const a=new FileReader;a.addEventListener("load",()=>{l.current[d.src]=a.result}),a.readAsDataURL(b.files[0])}a(d)})})},[e,d,f])}(),function(){b.useEffect(()=>(i.addSerializer(c),()=>i.removeSerializer(c)))}(),{chooseFile(a){k.current.click()},removeImage(a){const b=document.createRange();b.selectNode(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b),document.execCommand("delete")}}},a.useLink=function(){function a(a,b){d.selectRangeFromBeforeBlur({usePreviousRange:!0});const e="rte-link-temp-id-".concat(A++);f("<a href=\"".concat(a,"\" id=\"").concat(e,"\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(b,"</a>"));const g=document.getElementById(e);g.removeAttribute("id"),c(g)}let{processAnchorElement:c=B}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:C;const d=b.useContext(t),{performCommand:e}=h("unlink"),{performCommandWithValue:f}=h("insertHTML");return function(){b.useEffect(()=>{function a(){const a=d.getContentEditableElement().querySelectorAll("a");a.forEach(c)}return d.addNewHTMLListener(a),()=>d.removeNewHTMLListener(a)},[c])}(),{getTextFromBeforeBlur:function(){const a=d.getRangeFromBeforeBlur();return a?a.toString():null},selectEntireLink:function(a){const b=document.createRange();b.selectNodeContents(a);const c=window.getSelection();c.removeAllRanges(),c.addRange(b)},unlink:function(){e(),(window.navigator.userAgent.includes("Edge/14")||window.navigator.userAgent.includes("Edge/15")||window.navigator.userAgent.includes("Edge/16")||window.navigator.userAgent.includes("Edge/17"))&&document.execCommand("removeFormat")},insertLink:a}},a.useTextAsImage=function(){let{processSerializedElement:g=G,fontFamily:a,fillStyle:c,fontWeight:d,textBottom:e,backgroundColor:f}=0<arguments.length&&void 0!==arguments[0]?arguments[0]:H;const{performCommandWithValue:i}=h("insertImage"),j=b.useContext(t);return function(){b.useEffect(()=>{function b(){const b=j.getContentEditableElement().querySelectorAll("span[data-text-as-image]");for(let g=0;g<b.length;g++){const h=b[g],i=l({text:h.dataset.textAsImage,referenceEl:h.previousElementSibling||h.nextElementSibling||h.parentElement,fontFamily:a,fontWeight:d,fillStyle:c,textBottom:e}),j=document.createElement("img");j.src=i,m(j,h.dataset.textAsImage,f),h.parentNode.replaceChild(j,h)}}return j.addNewHTMLListener(b),()=>j.removeNewHTMLListener(b)})}(),function(){b.useEffect(()=>{function a(a){const b=a.querySelectorAll("img[data-text-as-image]");for(let c=0;c<b.length;c++){const a=b[c],d=document.createElement("span");d.dataset.textAsImage=a.dataset.textAsImage,g(d,d.dataset.textAsImage),a.parentNode.replaceChild(d,a)}}return j.addSerializer(a),()=>j.removeSerializer(a)},[])}(),{insertTextAsImage(b){j.selectRangeFromBeforeBlur({usePreviousRange:!0});const g=l({text:b,referenceEl:n(),fontFamily:a,fontWeight:d,fillStyle:c,textBottom:e});i(g);const h=document.querySelector("img[src=\"".concat(g,"\"]:not([data-text-as-image])"));m(h,b,f)}}},Object.defineProperty(a,"__esModule",{value:!0})});
 //# sourceMappingURL=bandicoot.umd.js.map

package.json

 {
   "name": "bandicoot",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "React rich text editor",
@@ -5,0 +5,0 @@ "main": "dist/bandicoot.umd.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184850

increased by2.05%

Lines of code

255

increased by1.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes