@yoopta/image 1.9.2-rc → 1.9.4-rc

package/dist/index.js

@@ -1 +1 @@
-import{UI_HELPERS as t,cx as e,createYooptaPlugin as i,getElementByPath as o,generateId as n}from"@yoopta/editor";import{Transforms as s,Element as r}from"slate";import{jsx as a,jsxs as h}from"react/jsx-runtime";import*as d from"react";import{useState as l,useRef as p,useEffect as c,useMemo as u}from"react";import{flushSync as g}from"react-dom";import{ReactEditor as m,useSelected as f,useReadOnly as v}from"slate-react";function b(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}var w="qpZJDBGn",y="uotJ3YDO",x="nbRzyNn-",z="w4fOLmqq";b(".qpZJDBGn{margin:20px 0 10px;position:relative}.uotJ3YDO{border-radius:1px;display:block;margin:0 auto;max-width:100%;object-fit:cover;pointer-events:auto}.nbRzyNn-{height:100%;margin:0}.w4fOLmqq{caret-color:#37352f;color:rgba(55,53,47,.65);font-size:14px;line-height:1.4;max-width:100%;padding-bottom:6px;padding-left:2px;padding-top:6px;white-space:pre-wrap;width:100%;word-break:break-word}");const S=({attributes:t,element:e,children:i,size:o,HTMLAttributes:n})=>{var s,r,d,l,p;const c=(null==o?void 0:o.width)||(null===(r=null===(s=e.data)||void 0===s?void 0:s.size)||void 0===r?void 0:r.width)||"100%",u=(null==o?void 0:o.height)||(null===(l=null===(d=e.data)||void 0===d?void 0:d.size)||void 0===l?void 0:l.height)||400,g=null===(p=e.data)||void 0===p?void 0:p.caption;return e.data.url||e.data["data-src"]?h("div",Object.assign({},t,{className:w,contentEditable:!1,draggable:!1},{children:[h("figure",Object.assign({className:x,onDragStart:t=>t.preventDefault()},{children:[a("img",Object.assign({src:e.data.url||e.data["data-src"]||"",alt:g,width:c,height:u,loading:"lazy",decoding:"async",className:y},n)),g&&a("figcaption",Object.assign({className:z},{children:g}))]})),i]})):a("div",{})};var N,O,R=(N=function(t,e){return N=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},N(t,e)},function(t,e){function i(){this.constructor=t}N(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),W=function(){return W=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},W.apply(this,arguments)},E={width:"100%",height:"10px",top:"0px",left:"0px",cursor:"row-resize"},j={width:"10px",height:"100%",top:"0px",left:"0px",cursor:"col-resize"},k={width:"20px",height:"20px",position:"absolute"},M={top:W(W({},E),{top:"-5px"}),right:W(W({},j),{left:void 0,right:"-5px"}),bottom:W(W({},E),{top:void 0,bottom:"-5px"}),left:W(W({},j),{left:"-5px"}),topRight:W(W({},k),{right:"-10px",top:"-10px",cursor:"ne-resize"}),bottomRight:W(W({},k),{right:"-10px",bottom:"-10px",cursor:"se-resize"}),bottomLeft:W(W({},k),{left:"-10px",bottom:"-10px",cursor:"sw-resize"}),topLeft:W(W({},k),{left:"-10px",top:"-10px",cursor:"nw-resize"})},A=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.onMouseDown=function(t){e.props.onResizeStart(t,e.props.direction)},e.onTouchStart=function(t){e.props.onResizeStart(t,e.props.direction)},e}return R(e,t),e.prototype.render=function(){return d.createElement("div",{className:this.props.className||"",style:W(W({position:"absolute",userSelect:"none"},M[this.props.direction]),this.props.replaceStyles||{}),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart},this.props.children)},e}(d.PureComponent),C=function(){var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),H=function(){return H=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},H.apply(this,arguments)},P={width:"auto",height:"auto"},B=function(t,e,i){return Math.max(Math.min(t,i),e)},T=function(t,e){return Math.round(t/e)*e},L=function(t,e){return new RegExp(t,"i").test(e)},D=function(t){return Boolean(t.touches&&t.touches.length)},_=function(t,e,i){void 0===i&&(i=0);var o=e.reduce((function(i,o,n){return Math.abs(o-t)<Math.abs(e[i]-t)?n:i}),0),n=Math.abs(e[o]-t);return 0===i||n<i?e[o]:t},F=function(t){return"auto"===(t=t.toString())||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:t+"px"},Y=function(t,e,i,o){if(t&&"string"==typeof t){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%"))return e*(Number(t.replace("%",""))/100);if(t.endsWith("vw"))return i*(Number(t.replace("vw",""))/100);if(t.endsWith("vh"))return o*(Number(t.replace("vh",""))/100)}return t},U=["as","style","className","grid","snap","bounds","boundsByDirection","size","defaultSize","minWidth","minHeight","maxWidth","maxHeight","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","enable","handleStyles","handleClasses","handleWrapperStyle","handleWrapperClass","children","onResizeStart","onResize","onResizeStop","handleComponent","scale","resizeRatio","snapGap"],G="__resizable_base__",I=function(t){function e(e){var i=t.call(this,e)||this;return i.ratio=1,i.resizable=null,i.parentLeft=0,i.parentTop=0,i.resizableLeft=0,i.resizableRight=0,i.resizableTop=0,i.resizableBottom=0,i.targetLeft=0,i.targetTop=0,i.appendBase=function(){if(!i.resizable||!i.window)return null;var t=i.parentNode;if(!t)return null;var e=i.window.document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="absolute",e.style.transform="scale(0, 0)",e.style.left="0",e.style.flex="0 0 100%",e.classList?e.classList.add(G):e.className+=G,t.appendChild(e),e},i.removeBase=function(t){var e=i.parentNode;e&&e.removeChild(t)},i.ref=function(t){t&&(i.resizable=t)},i.state={isResizing:!1,width:void 0===(i.propsSize&&i.propsSize.width)?"auto":i.propsSize&&i.propsSize.width,height:void 0===(i.propsSize&&i.propsSize.height)?"auto":i.propsSize&&i.propsSize.height,direction:"right",original:{x:0,y:0,width:0,height:0},backgroundStyle:{height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"},flexBasis:void 0},i.onResizeStart=i.onResizeStart.bind(i),i.onMouseMove=i.onMouseMove.bind(i),i.onMouseUp=i.onMouseUp.bind(i),i}return C(e,t),Object.defineProperty(e.prototype,"parentNode",{get:function(){return this.resizable?this.resizable.parentNode:null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"window",{get:function(){return this.resizable&&this.resizable.ownerDocument?this.resizable.ownerDocument.defaultView:null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"propsSize",{get:function(){return this.props.size||this.props.defaultSize||P},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"size",{get:function(){var t=0,e=0;if(this.resizable&&this.window){var i=this.resizable.offsetWidth,o=this.resizable.offsetHeight,n=this.resizable.style.position;"relative"!==n&&(this.resizable.style.position="relative"),t="auto"!==this.resizable.style.width?this.resizable.offsetWidth:i,e="auto"!==this.resizable.style.height?this.resizable.offsetHeight:o,this.resizable.style.position=n}return{width:t,height:e}},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"sizeStyle",{get:function(){var t=this,e=this.props.size,i=function(e){if(void 0===t.state[e]||"auto"===t.state[e])return"auto";if(t.propsSize&&t.propsSize[e]&&t.propsSize[e].toString().endsWith("%")){if(t.state[e].toString().endsWith("%"))return t.state[e].toString();var i=t.getParentSize();return Number(t.state[e].toString().replace("px",""))/i[e]*100+"%"}return F(t.state[e])};return{width:e&&void 0!==e.width&&!this.state.isResizing?F(e.width):i("width"),height:e&&void 0!==e.height&&!this.state.isResizing?F(e.height):i("height")}},enumerable:!1,configurable:!0}),e.prototype.getParentSize=function(){if(!this.parentNode)return this.window?{width:this.window.innerWidth,height:this.window.innerHeight}:{width:0,height:0};var t=this.appendBase();if(!t)return{width:0,height:0};var e=!1,i=this.parentNode.style.flexWrap;"wrap"!==i&&(e=!0,this.parentNode.style.flexWrap="wrap"),t.style.position="relative",t.style.minWidth="100%",t.style.minHeight="100%";var o={width:t.offsetWidth,height:t.offsetHeight};return e&&(this.parentNode.style.flexWrap=i),this.removeBase(t),o},e.prototype.bindEvents=function(){this.window&&(this.window.addEventListener("mouseup",this.onMouseUp),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseleave",this.onMouseUp),this.window.addEventListener("touchmove",this.onMouseMove,{capture:!0,passive:!1}),this.window.addEventListener("touchend",this.onMouseUp))},e.prototype.unbindEvents=function(){this.window&&(this.window.removeEventListener("mouseup",this.onMouseUp),this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseleave",this.onMouseUp),this.window.removeEventListener("touchmove",this.onMouseMove,!0),this.window.removeEventListener("touchend",this.onMouseUp))},e.prototype.componentDidMount=function(){if(this.resizable&&this.window){var t=this.window.getComputedStyle(this.resizable);this.setState({width:this.state.width||this.size.width,height:this.state.height||this.size.height,flexBasis:"auto"!==t.flexBasis?t.flexBasis:void 0})}},e.prototype.componentWillUnmount=function(){this.window&&this.unbindEvents()},e.prototype.createSizeForCssProperty=function(t,e){var i=this.propsSize&&this.propsSize[e];return"auto"!==this.state[e]||this.state.original[e]!==t||void 0!==i&&"auto"!==i?t:"auto"},e.prototype.calculateNewMaxFromBoundary=function(t,e){var i,o,n=this.props.boundsByDirection,s=this.state.direction,r=n&&L("left",s),a=n&&L("top",s);if("parent"===this.props.bounds){var h=this.parentNode;h&&(i=r?this.resizableRight-this.parentLeft:h.offsetWidth+(this.parentLeft-this.resizableLeft),o=a?this.resizableBottom-this.parentTop:h.offsetHeight+(this.parentTop-this.resizableTop))}else"window"===this.props.bounds?this.window&&(i=r?this.resizableRight:this.window.innerWidth-this.resizableLeft,o=a?this.resizableBottom:this.window.innerHeight-this.resizableTop):this.props.bounds&&(i=r?this.resizableRight-this.targetLeft:this.props.bounds.offsetWidth+(this.targetLeft-this.resizableLeft),o=a?this.resizableBottom-this.targetTop:this.props.bounds.offsetHeight+(this.targetTop-this.resizableTop));return i&&Number.isFinite(i)&&(t=t&&t<i?t:i),o&&Number.isFinite(o)&&(e=e&&e<o?e:o),{maxWidth:t,maxHeight:e}},e.prototype.calculateNewSizeFromDirection=function(t,e){var i=this.props.scale||1,o=this.props.resizeRatio||1,n=this.state,s=n.direction,r=n.original,a=this.props,h=a.lockAspectRatio,d=a.lockAspectRatioExtraHeight,l=a.lockAspectRatioExtraWidth,p=r.width,c=r.height,u=d||0,g=l||0;return L("right",s)&&(p=r.width+(t-r.x)*o/i,h&&(c=(p-g)/this.ratio+u)),L("left",s)&&(p=r.width-(t-r.x)*o/i,h&&(c=(p-g)/this.ratio+u)),L("bottom",s)&&(c=r.height+(e-r.y)*o/i,h&&(p=(c-u)*this.ratio+g)),L("top",s)&&(c=r.height-(e-r.y)*o/i,h&&(p=(c-u)*this.ratio+g)),{newWidth:p,newHeight:c}},e.prototype.calculateNewSizeFromAspectRatio=function(t,e,i,o){var n=this.props,s=n.lockAspectRatio,r=n.lockAspectRatioExtraHeight,a=n.lockAspectRatioExtraWidth,h=void 0===o.width?10:o.width,d=void 0===i.width||i.width<0?t:i.width,l=void 0===o.height?10:o.height,p=void 0===i.height||i.height<0?e:i.height,c=r||0,u=a||0;if(s){var g=(l-c)*this.ratio+u,m=(p-c)*this.ratio+u,f=(h-u)/this.ratio+c,v=(d-u)/this.ratio+c,b=Math.max(h,g),w=Math.min(d,m),y=Math.max(l,f),x=Math.min(p,v);t=B(t,b,w),e=B(e,y,x)}else t=B(t,h,d),e=B(e,l,p);return{newWidth:t,newHeight:e}},e.prototype.setBoundingClientRect=function(){if("parent"===this.props.bounds){var t=this.parentNode;if(t){var e=t.getBoundingClientRect();this.parentLeft=e.left,this.parentTop=e.top}}if(this.props.bounds&&"string"!=typeof this.props.bounds){var i=this.props.bounds.getBoundingClientRect();this.targetLeft=i.left,this.targetTop=i.top}if(this.resizable){var o=this.resizable.getBoundingClientRect(),n=o.left,s=o.top,r=o.right,a=o.bottom;this.resizableLeft=n,this.resizableRight=r,this.resizableTop=s,this.resizableBottom=a}},e.prototype.onResizeStart=function(t,e){if(this.resizable&&this.window){var i,o=0,n=0;if(t.nativeEvent&&function(t){return Boolean((t.clientX||0===t.clientX)&&(t.clientY||0===t.clientY))}(t.nativeEvent)?(o=t.nativeEvent.clientX,n=t.nativeEvent.clientY):t.nativeEvent&&D(t.nativeEvent)&&(o=t.nativeEvent.touches[0].clientX,n=t.nativeEvent.touches[0].clientY),this.props.onResizeStart)if(this.resizable)if(!1===this.props.onResizeStart(t,e,this.resizable))return;this.props.size&&(void 0!==this.props.size.height&&this.props.size.height!==this.state.height&&this.setState({height:this.props.size.height}),void 0!==this.props.size.width&&this.props.size.width!==this.state.width&&this.setState({width:this.props.size.width})),this.ratio="number"==typeof this.props.lockAspectRatio?this.props.lockAspectRatio:this.size.width/this.size.height;var s=this.window.getComputedStyle(this.resizable);if("auto"!==s.flexBasis){var r=this.parentNode;if(r){var a=this.window.getComputedStyle(r).flexDirection;this.flexDir=a.startsWith("row")?"row":"column",i=s.flexBasis}}this.setBoundingClientRect(),this.bindEvents();var h={original:{x:o,y:n,width:this.size.width,height:this.size.height},isResizing:!0,backgroundStyle:H(H({},this.state.backgroundStyle),{cursor:this.window.getComputedStyle(t.target).cursor||"auto"}),direction:e,flexBasis:i};this.setState(h)}},e.prototype.onMouseMove=function(t){var e=this;if(this.state.isResizing&&this.resizable&&this.window){if(this.window.TouchEvent&&D(t))try{t.preventDefault(),t.stopPropagation()}catch(t){}var i=this.props,o=i.maxWidth,n=i.maxHeight,s=i.minWidth,r=i.minHeight,a=D(t)?t.touches[0].clientX:t.clientX,h=D(t)?t.touches[0].clientY:t.clientY,d=this.state,l=d.direction,p=d.original,c=d.width,u=d.height,m=this.getParentSize(),f=function(t,e,i,o,n,s,r){return o=Y(o,t.width,e,i),n=Y(n,t.height,e,i),s=Y(s,t.width,e,i),r=Y(r,t.height,e,i),{maxWidth:void 0===o?void 0:Number(o),maxHeight:void 0===n?void 0:Number(n),minWidth:void 0===s?void 0:Number(s),minHeight:void 0===r?void 0:Number(r)}}(m,this.window.innerWidth,this.window.innerHeight,o,n,s,r);o=f.maxWidth,n=f.maxHeight,s=f.minWidth,r=f.minHeight;var v=this.calculateNewSizeFromDirection(a,h),b=v.newHeight,w=v.newWidth,y=this.calculateNewMaxFromBoundary(o,n);this.props.snap&&this.props.snap.x&&(w=_(w,this.props.snap.x,this.props.snapGap)),this.props.snap&&this.props.snap.y&&(b=_(b,this.props.snap.y,this.props.snapGap));var x=this.calculateNewSizeFromAspectRatio(w,b,{width:y.maxWidth,height:y.maxHeight},{width:s,height:r});if(w=x.newWidth,b=x.newHeight,this.props.grid){var z=T(w,this.props.grid[0]),S=T(b,this.props.grid[1]),N=this.props.snapGap||0;w=0===N||Math.abs(z-w)<=N?z:w,b=0===N||Math.abs(S-b)<=N?S:b}var O={width:w-p.width,height:b-p.height};if(c&&"string"==typeof c)if(c.endsWith("%"))w=w/m.width*100+"%";else if(c.endsWith("vw")){w=w/this.window.innerWidth*100+"vw"}else if(c.endsWith("vh")){w=w/this.window.innerHeight*100+"vh"}if(u&&"string"==typeof u)if(u.endsWith("%"))b=b/m.height*100+"%";else if(u.endsWith("vw")){b=b/this.window.innerWidth*100+"vw"}else if(u.endsWith("vh")){b=b/this.window.innerHeight*100+"vh"}var R={width:this.createSizeForCssProperty(w,"width"),height:this.createSizeForCssProperty(b,"height")};"row"===this.flexDir?R.flexBasis=R.width:"column"===this.flexDir&&(R.flexBasis=R.height),g((function(){e.setState(R)})),this.props.onResize&&this.props.onResize(t,l,this.resizable,O)}},e.prototype.onMouseUp=function(t){var e=this.state,i=e.isResizing,o=e.direction,n=e.original;if(i&&this.resizable){var s={width:this.size.width-n.width,height:this.size.height-n.height};this.props.onResizeStop&&this.props.onResizeStop(t,o,this.resizable,s),this.props.size&&this.setState(this.props.size),this.unbindEvents(),this.setState({isResizing:!1,backgroundStyle:H(H({},this.state.backgroundStyle),{cursor:"auto"})})}},e.prototype.updateSize=function(t){this.setState({width:t.width,height:t.height})},e.prototype.renderResizer=function(){var t=this,e=this.props,i=e.enable,o=e.handleStyles,n=e.handleClasses,s=e.handleWrapperStyle,r=e.handleWrapperClass,a=e.handleComponent;if(!i)return null;var h=Object.keys(i).map((function(e){return!1!==i[e]?d.createElement(A,{key:e,direction:e,onResizeStart:t.onResizeStart,replaceStyles:o&&o[e],className:n&&n[e]},a&&a[e]?a[e]:null):null}));return d.createElement("div",{className:r,style:s},h)},e.prototype.render=function(){var t=this,e=Object.keys(this.props).reduce((function(e,i){return-1!==U.indexOf(i)||(e[i]=t.props[i]),e}),{}),i=H(H(H({position:"relative",userSelect:this.state.isResizing?"none":"auto"},this.props.style),this.sizeStyle),{maxWidth:this.props.maxWidth,maxHeight:this.props.maxHeight,minWidth:this.props.minWidth,minHeight:this.props.minHeight,boxSizing:"border-box",flexShrink:0});this.state.flexBasis&&(i.flexBasis=this.state.flexBasis);var o=this.props.as||"div";return d.createElement(o,H({ref:this.ref,style:i,className:this.props.className},e),this.state.isResizing&&d.createElement("div",{style:this.state.backgroundStyle}),this.props.children,this.renderResizer())},e.defaultProps={as:"div",onResizeStart:function(){},onResize:function(){},onResizeStop:function(){},enable:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0},style:{},grid:[1,1],lockAspectRatio:!1,lockAspectRatioExtraWidth:0,lockAspectRatioExtraHeight:0,scale:1,resizeRatio:1,snapGap:0},e}(d.PureComponent);function Q(t,e,i,o){return new(i||(i=Promise))((function(n,s){function r(t){try{h(o.next(t))}catch(t){s(t)}}function a(t){try{h(o.throw(t))}catch(t){s(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,a)}h((o=o.apply(t,e||[])).next())}))}function X(){return X=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},X.apply(this,arguments)}var q=function(t){return d.createElement("svg",X({fill:"currentColor","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"uploadImage"},t),O||(O=d.createElement("path",{d:"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"})))},V="CbnZQqyl",Z="_78mDlVh1",K="oZAAa6di",J="tLysgc7u",$="_1TmPKlXh",tt="LZ2yXrRk",et="_7ZO4VxhR",it="_71hAm-SR _7ZO4VxhR",ot="gZazwh5A",nt="woGPvDjG",st="DjdM6pfv",rt="xlH5R22X";b('.CbnZQqyl{position:fixed}._78mDlVh1{background:#fff;box-shadow:0 0 0 1px hsla(0,0%,6%,.05),0 3px 6px hsla(0,0%,6%,.1),0 9px 24px hsla(0,0%,6%,.2);display:flex;flex-direction:column;height:100%;max-height:420px;max-width:calc(100vw - 24px);min-width:540px}.oZAAa6di{box-shadow:inset 0 -1px 0 rgba(55,53,47,.09);display:flex;height:40px;padding:0 8px;width:100%;z-index:1}.oZAAa6di,.tLysgc7u{font-size:14px;position:relative}.tLysgc7u{align-items:center;background-color:inherit;border:none;border-radius:4px;color:#37352f;cursor:pointer;display:inline-flex;flex-shrink:0;height:100%;line-height:1.2;min-width:0;padding:6px 8px;transition:height 20ms ease-in 0s;user-select:none;white-space:nowrap}._1TmPKlXh:after{background-color:#37352f;bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}.LZ2yXrRk{display:flex;justify-content:center;margin-left:12px;margin-right:12px;margin-top:4px;padding-bottom:6px;padding-top:6px}._7ZO4VxhR{border:1px solid rgba(55,53,47,.16);border-radius:4px;cursor:pointer;height:32px;padding-left:12px;padding-right:12px;transition:background 20ms ease-in 0s;user-select:none;white-space:nowrap;width:100%}._71hAm-SR{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.gZazwh5A{align-items:center;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;height:100%;justify-content:center;line-height:1.2;width:100%}.woGPvDjG{left:0;position:absolute;top:0;visibility:hidden}.DjdM6pfv{background:hsla(45,13%,94%,.6);box-shadow:inset 0 0 0 1px hsla(0,0%,6%,.1);cursor:text;height:32px;line-height:20px;padding:3px 6px;position:relative}.DjdM6pfv,.xlH5R22X{align-items:center;border:none;border-radius:4px;display:flex;font-size:14px;width:100%}.xlH5R22X{fill:#fff;background:#2383e2;box-shadow:inset 0 0 0 1px hsla(0,0%,6%,.1),0 1px 2px hsla(0,0%,6%,.1);color:#fff;cursor:pointer;flex-shrink:0;font-weight:500;height:28px;justify-content:center;line-height:1.2;margin:12px auto 6px;max-width:300px;padding-left:12px;padding-right:12px;transition:background 20ms ease-in 0s;user-select:none;white-space:nowrap}');const at=({onChange:t,accept:e="image/*"})=>a("div",Object.assign({className:et},{children:h("label",Object.assign({htmlFor:"image-uploader",className:ot},{children:[a("input",{type:"file",id:"image-uploader",className:nt,accept:e,onChange:e=>{const i=e.currentTarget.files;i&&i.length>0&&t(i[0])},multiple:!1}),"Upload image"]}))})),ht=({onEmbed:t})=>{const[e,i]=l("");return h("div",Object.assign({className:it},{children:[a("input",{type:"text",placeholder:"Paste image link",value:e,className:st,onChange:t=>i(t.target.value)}),a("button",Object.assign({type:"button",className:rt,onClick:()=>t(e)},{children:"Embed image"}))]}))},dt=({activeTab:i="upload",style:o,switchTab:n,onChange:s,onEmbed:r,accept:d,onClose:l})=>{const p="upload"===i,c="embed"===i;return h(t.Overlay,Object.assign({onClose:l},{children:[a("div",Object.assign({className:V,style:o},{children:h("div",Object.assign({className:Z},{children:[h("div",Object.assign({className:K},{children:[a("button",Object.assign({type:"button",onClick:()=>n("upload"),className:e(J,{[$]:p})},{children:"Upload"})),a("button",Object.assign({type:"button",onClick:()=>n("embed"),className:e(J,{[$]:c})},{children:"Embed link"}))]})),h("div",Object.assign({className:tt},{children:[p&&a(at,{onChange:s,accept:d}),c&&a(ht,{onEmbed:r})]}))]}))})),a("div",{})]}))},lt=(t,e,i,o)=>{if(!t||!e)return{};const n=Math.min(i/t,o/e);return{width:t*n,height:e*n}};var pt=!1;if("undefined"!=typeof window){var ct={get passive(){pt=!0}};window.addEventListener("testPassive",null,ct),window.removeEventListener("testPassive",null,ct)}var ut="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),gt=[],mt=!1,ft=-1,vt=void 0,bt=void 0,wt=void 0,yt=function(t){return gt.some((function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(t))}))},xt=function(t){var e=t||window.event;return!!yt(e.target)||(e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1))},zt=function(t,e){if(t){if(!gt.some((function(e){return e.targetElement===t}))){var i={targetElement:t,options:e||{}};gt=[].concat(function(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}(gt),[i]),ut?window.requestAnimationFrame((function(){if(void 0===bt){bt={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,e=t.scrollY,i=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-e,document.body.style.left=-i,setTimeout((function(){return window.requestAnimationFrame((function(){var t=o-window.innerHeight;t&&e>=o&&(document.body.style.top=-(e+t))}))}),300)}})):function(t){if(void 0===wt){var e=!!t&&!0===t.reserveScrollBarGap,i=window.innerWidth-document.documentElement.clientWidth;if(e&&i>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);wt=document.body.style.paddingRight,document.body.style.paddingRight=o+i+"px"}}void 0===vt&&(vt=document.body.style.overflow,document.body.style.overflow="hidden")}(e),ut&&(t.ontouchstart=function(t){1===t.targetTouches.length&&(ft=t.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(t,e){var i=t.targetTouches[0].clientY-ft;!yt(t.target)&&(e&&0===e.scrollTop&&i>0||function(t){return!!t&&t.scrollHeight-t.scrollTop<=t.clientHeight}(e)&&i<0?xt(t):t.stopPropagation())}(e,t)},mt||(document.addEventListener("touchmove",xt,pt?{passive:!1}:void 0),mt=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},St=function(t){t?(gt=gt.filter((function(e){return e.targetElement!==t})),ut&&(t.ontouchstart=null,t.ontouchmove=null,mt&&0===gt.length&&(document.removeEventListener("touchmove",xt,pt?{passive:!1}:void 0),mt=!1)),ut?function(){if(void 0!==bt){var t=-parseInt(document.body.style.top,10),e=-parseInt(document.body.style.left,10);document.body.style.position=bt.position,document.body.style.top=bt.top,document.body.style.left=bt.left,window.scrollTo(e,t),bt=void 0}}():(void 0!==wt&&(document.body.style.paddingRight=wt,wt=void 0),void 0!==vt&&(document.body.style.overflow=vt,vt=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},Nt="ohhtqDdT",Ot="S-yQxAMd",Rt="DN1BWl71";function Wt(t){return new Promise(((e,i)=>{const o=new Image;o.src=t,o.onload=()=>e({width:o.width,height:o.height}),o.onerror=t=>i(t)}))}b(".ohhtqDdT{margin:20px 0 10px;user-select:none}.S-yQxAMd,.ohhtqDdT{position:relative;width:100%}.S-yQxAMd{align-items:center;background-color:#efefef;border:none;border-radius:3px;color:rgba(55,53,47,.65);cursor:pointer;display:flex;font-size:14px;overflow:hidden;padding:12px 36px 12px 12px;text-align:left;transition:background-color .1s ease-in}.S-yQxAMd:hover{background-color:#e3e3e3}.DN1BWl71{margin-right:8px;user-select:none}");const Et=({element:t,accept:e,attributes:i,maxSizes:o,children:n,editor:d,onUpload:c})=>{const[u,g]=l(null),[f,v]=l("upload"),b=p(null),w=t=>{var e;if(t.stopPropagation(),null!==u)return St(document.body),void g(null);const i=null===(e=b.current)||void 0===e?void 0:e.getBoundingClientRect();if(i){const t=i.top+i.height+88+20>window.innerHeight,e=!t;console.log({showAtTop:t,showAtBottom:e}),zt(document.body,{reserveScrollBarGap:!0}),g({left:i.left,top:t?i.top-88-5:i.top+i.height+5})}};return h("div",Object.assign({className:Nt},i,{contentEditable:!1},{children:[h("div",Object.assign({ref:b},{children:[h("button",Object.assign({className:Ot,onClick:w},{children:[a(q,{className:Rt,width:24,height:24}),a("span",{children:"Click to add image"})]})),null!==u&&a(dt,{onChange:e=>Q(void 0,void 0,void 0,(function*(){const i=yield function(t){return new Promise(((e,i)=>{const o=new FileReader;o.readAsDataURL(t),o.onload=()=>e(o.result),o.onerror=t=>i(t)}))}(e);i.substring("data:image/".length,i.indexOf(";base64"));const n=yield Wt(i),a=lt(n.width,n.height,o.maxWidth,o.maxHeight);St(document.body),g(null);const h={data:Object.assign(Object.assign({},t.data),{"data-src":i,size:{width:a.width||t.data.size.width,height:a.height||t.data.size.height}})};if(console.log("optimistic image uploader",m.findPath(d,t)),s.setNodes(d,h,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type}),!c)return console.error("Provide `onUpload` handler in Image options");const l=yield c(e),{width:p,height:u}=lt(l.width,l.height,o.maxWidth,o.maxHeight),f={data:Object.assign(Object.assign({},t.data),{url:l.url,"data-src":void 0,size:{width:p||t.data.size.width,height:u||t.data.size.height}})};s.setNodes(d,f,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type})})),onEmbed:e=>Q(void 0,void 0,void 0,(function*(){try{const{width:i,height:o}=yield Wt(e);St(document.body),g(null);const n={data:Object.assign(Object.assign({},t.data),{url:e,"data-src":void 0,size:{width:i,height:o}})};s.setNodes(d,n,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type})}catch(t){St(document.body),g(null)}})),onClose:w,activeTab:f,switchTab:t=>v(t),style:u,accept:e})]})),n]}))};var jt="zpY1mpQ8",kt="pjA59tdv";b(".zpY1mpQ8{height:100%;position:relative;width:100%}.zpY1mpQ8 .pjA59tdv{background-color:#909090;border-radius:5rem;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.zpY1mpQ8 .pjA59tdv:first-child{animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 60px)}.zpY1mpQ8 .pjA59tdv:nth-child(2){animation:OPSfFOxt 2s,L7daPOmF 2s;animation-delay:.15s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 30px)}.zpY1mpQ8 .pjA59tdv:nth-child(3){animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-delay:.3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:50%}.zpY1mpQ8 .pjA59tdv:nth-child(4){animation:OPSfFOxt 2s,L7daPOmF 2s;animation-delay:.45s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 30px)}.zpY1mpQ8 .pjA59tdv:nth-child(5){animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-delay:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 60px)}@keyframes OPSfFOxt{0%,15%{top:50%}45%,65%{top:42.5%}85%,to{top:50%}}@keyframes _9uGMErwK{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:17.5px}46%,to{background-color:#909090;height:10px}}@keyframes L7daPOmF{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:32.5px}46%,to{background-color:#909090;height:10px}}");const Mt=()=>h("div",Object.assign({className:jt},{children:[a("div",{className:kt}),a("div",{className:kt}),a("div",{className:kt}),a("div",{className:kt}),a("div",{className:kt})]}));var At={root:"CRjYe3V4",resizer:"NWmUovsc",dotsOptions:"namnQRMs",loadingState:"_0b2-YE4H",extraMargin:"SOfqAbJv",resizeLib:"EO3--Gbu",leftResizer:"TN-K0WnG NWmUovsc",rightResizer:"KhDmzJ88 NWmUovsc",resizeItem:"-FTiIzUC",selectImg:"KIB4WerX",selected:"_1Ab-jkHE",loader:"PRWt-7ci",dot:"g9fWS1Hn"};b(".CRjYe3V4{cursor:pointer;display:block;position:relative}.CRjYe3V4:hover .NWmUovsc,.CRjYe3V4:hover .namnQRMs{opacity:1}._0b2-YE4H{pointer-events:none}.SOfqAbJv{margin:20px 0 30px}.EO3--Gbu{margin:0 auto}.NWmUovsc{align-items:center;cursor:col-resize;display:flex;height:100%;justify-content:center;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease-in 0s;width:15px;z-index:1}.TN-K0WnG{left:0;top:0}.KhDmzJ88{right:0;top:0}.-FTiIzUC{background:hsla(0,0%,6%,.6);border:1px solid hsla(0,0%,100%,.9);border-radius:20px;box-shadow:0 0 0 .5px #fff;height:48px;max-height:50%;opacity:1;transition:opacity .3s ease-in 0s;width:6px}.KIB4WerX{opacity:0}._1Ab-jkHE{background:rgba(35,131,226,.14);border-radius:3px;inset:0;opacity:1;pointer-events:none;position:absolute;transition:opacity .15s ease-in 0s;z-index:81}.PRWt-7ci{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.namnQRMs{align-items:center;background-color:#eee;border:none;border-radius:2px;cursor:pointer;display:flex;height:22px;justify-content:space-between;opacity:0;padding:0 4px;position:absolute;right:10px;top:10px;transition:opacity .15s ease-in 0s;width:22px;z-index:1}.g9fWS1Hn{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}");const Ct=265;function Ht(i){var o,n,d,p,g,b,w,y;const{element:x,editor:z,plugin:N}=i,O=f(),R=v(),[W,E]=l(null),[j,k]=l({width:(null===(n=null===(o=x.data)||void 0===o?void 0:o.size)||void 0===n?void 0:n.width)||750,height:(null===(p=null===(d=x.data)||void 0===d?void 0:d.size)||void 0===p?void 0:p.height)||440});c((()=>{var t,e,i,o;x.data&&k({width:(null===(e=null===(t=x.data)||void 0===t?void 0:t.size)||void 0===e?void 0:e.width)||750,height:(null===(o=null===(i=x.data)||void 0===i?void 0:i.size)||void 0===o?void 0:o.height)||440})}),[null===(g=x.data)||void 0===g?void 0:g.size]);const M=u((()=>{var t,e;return{minWidth:300,size:{width:j.width,height:j.height},maxWidth:(null===(t=N.options)||void 0===t?void 0:t.maxWidth)||800,maxHeight:(null===(e=N.options)||void 0===e?void 0:e.maxHeight)||720,lockAspectRatio:!0,resizeRatio:2,enable:{left:!R,right:!R},handleStyles:{left:{left:0},right:{right:0}},onResize:(t,e,i)=>{k({width:i.offsetWidth,height:i.offsetHeight})},onResizeStop:(t,e,i)=>{console.log("image editor editor.children",z.children),console.log("ReactEditor.findPath(editor, element)",m.findPath(z,x)),console.log("element",x),s.setNodes(z,{data:Object.assign(Object.assign({},x.data),{size:{width:i.offsetWidth,height:i.offsetHeight}})},{at:m.findPath(z,x),match:t=>r.isElement(t)&&"image"===t.type})},handleComponent:{left:a("div",Object.assign({contentEditable:!1,className:At.leftResizer},{children:a("div",{className:At.resizeItem})})),right:a("div",Object.assign({contentEditable:!1,className:At.rightResizer},{children:a("div",{className:At.resizeItem})}))}}}),[j.width,j.height,z]),A=!!(null===(b=x.data)||void 0===b?void 0:b.caption),C=!!x.data["data-src"]&&!x.data.url,H=()=>{St(document.body),E(null)},P=t=>{var e;if(null==t||t.stopPropagation(),null!==W)return H();const i=null===(e=null==t?void 0:t.currentTarget)||void 0===e?void 0:e.getBoundingClientRect();if(i){const t=i.top+i.height+164+20>window.innerHeight;zt(document.body,{reserveScrollBarGap:!0}),E({left:i.right-i.width+Ct>window.innerWidth?window.innerWidth-Ct-i.width:i.right-i.width,top:t?i.top-164-5:i.top+i.height+5})}};if(!x.data.url&&!x.data["data-src"]){const{maxWidth:o=750,maxHeight:n=800}=N.options||{};return h("div",Object.assign({className:At.root,contentEditable:!1,draggable:!1},{children:[a("div",{className:e(At.selectImg,{[At.selected]:O})}),a(Et,Object.assign({attributes:i.attributes,element:x,editor:z,maxSizes:{maxWidth:o,maxHeight:n},onUpload:null===(w=N.options)||void 0===w?void 0:w.onUpload,accept:null===(y=N.options)||void 0===y?void 0:y.accept},{children:!R&&h("div",{children:[h("button",Object.assign({type:"button",className:At.dotsOptions,onClick:P},{children:[a("span",{className:At.dot}),a("span",{className:At.dot}),a("span",{className:At.dot})]})),null!==W&&a(t.ElementOptions,{onClose:H,style:W,element:x,onCopy:H,onDelete:H,onDuplicate:H},x.id)]})})),i.children]}),x.id)}return a("div",Object.assign({contentEditable:!1,draggable:!1,className:e(At.root,{[At.extraMargin]:A,[At.loadingState]:C})},{children:h(I,Object.assign({},M,{className:At.resizeLib},{children:[a(S,Object.assign({},i,{size:j})),a("div",{className:e(At.selectImg,{[At.selected]:O})}),C&&a("div",Object.assign({className:At.loader},{children:a(Mt,{})})),!R&&h("div",{children:[h("button",Object.assign({type:"button",className:At.dotsOptions,onClick:P},{children:[a("span",{className:At.dot}),a("span",{className:At.dot}),a("span",{className:At.dot})]})),null!==W&&a(t.ElementOptions,{onClose:H,style:W,element:x,onCopy:H,onDelete:H,onDuplicate:H},x.id)]})]}))}),x.id)}const Pt=i({type:"image",shortcut:"image",renderer:{editor:(t,e)=>i=>a(Ht,Object.assign({editor:t,plugin:e},i)),render:S},extendEditor(t){const{isVoid:e}=t;return t.isVoid=t=>t.type===Pt.getPlugin.type||e(t),t},events:{onKeyDown:(t,{defaultNode:e,hotkeys:i})=>n=>{var r;if("image"===o(t,null===(r=t.selection)||void 0===r?void 0:r.anchor.path,"highest").type&&t.selection)return i.isEnter(n)?(n.preventDefault(),void s.insertNodes(t,e,{mode:"highest"})):void 0}},defineElement:()=>({id:n(),type:"image",nodeType:"void",data:{url:null,size:{width:"auto",height:"auto"}},children:[{text:""}]}),createElement:function(t){var e;const i=Pt.getPlugin.defineElement();s.setNodes(t,i,{at:null===(e=t.selection)||void 0===e?void 0:e.anchor})},exports:{markdown:{serialize:(t,e)=>`![${t.data.caption||""}](${t.data.url})\n`},html:{serialize:(t,e)=>{var i,o;return`<img src="${t.data.url}" width="${null===(i=t.data.size)||void 0===i?void 0:i.width}" height="${null===(o=t.data.size)||void 0===o?void 0:o.height}" decoding="async" loading="lazy"  alt="${t.data.caption||"yoopta-html-image"}" />`},deserialize:{nodeName:"IMG",parse:t=>({url:t.getAttribute("src"),size:{height:"string"==typeof t.getAttribute("height")?Number(t.getAttribute("height")):"auto",width:"string"==typeof t.getAttribute("width")?Number(t.getAttribute("width")):"auto"}})}}}});export{Pt as default};
+import{UI_HELPERS as t,cx as e,createYooptaPlugin as i,getElementByPath as o,generateId as n}from"@yoopta/editor";import{Transforms as s,Element as r}from"slate";import{jsx as a,jsxs as h}from"react/jsx-runtime";import*as d from"react";import{useState as l,useRef as p,useEffect as c,useMemo as u}from"react";import{flushSync as g}from"react-dom";import{ReactEditor as m,useSelected as f,useReadOnly as v}from"slate-react";function b(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}var w="qpZJDBGn",y="uotJ3YDO",x="nbRzyNn-",z="w4fOLmqq";b(".qpZJDBGn{margin:20px 0 10px;position:relative}.uotJ3YDO{border-radius:1px;display:block;margin:0 auto;max-width:100%;object-fit:cover;pointer-events:auto}.nbRzyNn-{height:100%;margin:0}.w4fOLmqq{caret-color:#37352f;color:rgba(55,53,47,.65);font-size:14px;line-height:1.4;max-width:100%;padding-bottom:6px;padding-left:2px;padding-top:6px;white-space:pre-wrap;width:100%;word-break:break-word}");var S,N,O=(S=function(t,e){return S=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},S(t,e)},function(t,e){function i(){this.constructor=t}S(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),R=function(){return R=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},R.apply(this,arguments)},W={width:"100%",height:"10px",top:"0px",left:"0px",cursor:"row-resize"},E={width:"10px",height:"100%",top:"0px",left:"0px",cursor:"col-resize"},j={width:"20px",height:"20px",position:"absolute"},k={top:R(R({},W),{top:"-5px"}),right:R(R({},E),{left:void 0,right:"-5px"}),bottom:R(R({},W),{top:void 0,bottom:"-5px"}),left:R(R({},E),{left:"-5px"}),topRight:R(R({},j),{right:"-10px",top:"-10px",cursor:"ne-resize"}),bottomRight:R(R({},j),{right:"-10px",bottom:"-10px",cursor:"se-resize"}),bottomLeft:R(R({},j),{left:"-10px",bottom:"-10px",cursor:"sw-resize"}),topLeft:R(R({},j),{left:"-10px",top:"-10px",cursor:"nw-resize"})},M=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.onMouseDown=function(t){e.props.onResizeStart(t,e.props.direction)},e.onTouchStart=function(t){e.props.onResizeStart(t,e.props.direction)},e}return O(e,t),e.prototype.render=function(){return d.createElement("div",{className:this.props.className||"",style:R(R({position:"absolute",userSelect:"none"},k[this.props.direction]),this.props.replaceStyles||{}),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart},this.props.children)},e}(d.PureComponent),A=function(){var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};return function(e,i){function o(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),C=function(){return C=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},C.apply(this,arguments)},H={width:"auto",height:"auto"},P=function(t,e,i){return Math.max(Math.min(t,i),e)},B=function(t,e){return Math.round(t/e)*e},T=function(t,e){return new RegExp(t,"i").test(e)},L=function(t){return Boolean(t.touches&&t.touches.length)},D=function(t,e,i){void 0===i&&(i=0);var o=e.reduce((function(i,o,n){return Math.abs(o-t)<Math.abs(e[i]-t)?n:i}),0),n=Math.abs(e[o]-t);return 0===i||n<i?e[o]:t},_=function(t){return"auto"===(t=t.toString())||t.endsWith("px")||t.endsWith("%")||t.endsWith("vh")||t.endsWith("vw")||t.endsWith("vmax")||t.endsWith("vmin")?t:t+"px"},F=function(t,e,i,o){if(t&&"string"==typeof t){if(t.endsWith("px"))return Number(t.replace("px",""));if(t.endsWith("%"))return e*(Number(t.replace("%",""))/100);if(t.endsWith("vw"))return i*(Number(t.replace("vw",""))/100);if(t.endsWith("vh"))return o*(Number(t.replace("vh",""))/100)}return t},Y=["as","style","className","grid","snap","bounds","boundsByDirection","size","defaultSize","minWidth","minHeight","maxWidth","maxHeight","lockAspectRatio","lockAspectRatioExtraWidth","lockAspectRatioExtraHeight","enable","handleStyles","handleClasses","handleWrapperStyle","handleWrapperClass","children","onResizeStart","onResize","onResizeStop","handleComponent","scale","resizeRatio","snapGap"],U="__resizable_base__",G=function(t){function e(e){var i=t.call(this,e)||this;return i.ratio=1,i.resizable=null,i.parentLeft=0,i.parentTop=0,i.resizableLeft=0,i.resizableRight=0,i.resizableTop=0,i.resizableBottom=0,i.targetLeft=0,i.targetTop=0,i.appendBase=function(){if(!i.resizable||!i.window)return null;var t=i.parentNode;if(!t)return null;var e=i.window.document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="absolute",e.style.transform="scale(0, 0)",e.style.left="0",e.style.flex="0 0 100%",e.classList?e.classList.add(U):e.className+=U,t.appendChild(e),e},i.removeBase=function(t){var e=i.parentNode;e&&e.removeChild(t)},i.ref=function(t){t&&(i.resizable=t)},i.state={isResizing:!1,width:void 0===(i.propsSize&&i.propsSize.width)?"auto":i.propsSize&&i.propsSize.width,height:void 0===(i.propsSize&&i.propsSize.height)?"auto":i.propsSize&&i.propsSize.height,direction:"right",original:{x:0,y:0,width:0,height:0},backgroundStyle:{height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,0)",cursor:"auto",opacity:0,position:"fixed",zIndex:9999,top:"0",left:"0",bottom:"0",right:"0"},flexBasis:void 0},i.onResizeStart=i.onResizeStart.bind(i),i.onMouseMove=i.onMouseMove.bind(i),i.onMouseUp=i.onMouseUp.bind(i),i}return A(e,t),Object.defineProperty(e.prototype,"parentNode",{get:function(){return this.resizable?this.resizable.parentNode:null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"window",{get:function(){return this.resizable&&this.resizable.ownerDocument?this.resizable.ownerDocument.defaultView:null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"propsSize",{get:function(){return this.props.size||this.props.defaultSize||H},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"size",{get:function(){var t=0,e=0;if(this.resizable&&this.window){var i=this.resizable.offsetWidth,o=this.resizable.offsetHeight,n=this.resizable.style.position;"relative"!==n&&(this.resizable.style.position="relative"),t="auto"!==this.resizable.style.width?this.resizable.offsetWidth:i,e="auto"!==this.resizable.style.height?this.resizable.offsetHeight:o,this.resizable.style.position=n}return{width:t,height:e}},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"sizeStyle",{get:function(){var t=this,e=this.props.size,i=function(e){if(void 0===t.state[e]||"auto"===t.state[e])return"auto";if(t.propsSize&&t.propsSize[e]&&t.propsSize[e].toString().endsWith("%")){if(t.state[e].toString().endsWith("%"))return t.state[e].toString();var i=t.getParentSize();return Number(t.state[e].toString().replace("px",""))/i[e]*100+"%"}return _(t.state[e])};return{width:e&&void 0!==e.width&&!this.state.isResizing?_(e.width):i("width"),height:e&&void 0!==e.height&&!this.state.isResizing?_(e.height):i("height")}},enumerable:!1,configurable:!0}),e.prototype.getParentSize=function(){if(!this.parentNode)return this.window?{width:this.window.innerWidth,height:this.window.innerHeight}:{width:0,height:0};var t=this.appendBase();if(!t)return{width:0,height:0};var e=!1,i=this.parentNode.style.flexWrap;"wrap"!==i&&(e=!0,this.parentNode.style.flexWrap="wrap"),t.style.position="relative",t.style.minWidth="100%",t.style.minHeight="100%";var o={width:t.offsetWidth,height:t.offsetHeight};return e&&(this.parentNode.style.flexWrap=i),this.removeBase(t),o},e.prototype.bindEvents=function(){this.window&&(this.window.addEventListener("mouseup",this.onMouseUp),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseleave",this.onMouseUp),this.window.addEventListener("touchmove",this.onMouseMove,{capture:!0,passive:!1}),this.window.addEventListener("touchend",this.onMouseUp))},e.prototype.unbindEvents=function(){this.window&&(this.window.removeEventListener("mouseup",this.onMouseUp),this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseleave",this.onMouseUp),this.window.removeEventListener("touchmove",this.onMouseMove,!0),this.window.removeEventListener("touchend",this.onMouseUp))},e.prototype.componentDidMount=function(){if(this.resizable&&this.window){var t=this.window.getComputedStyle(this.resizable);this.setState({width:this.state.width||this.size.width,height:this.state.height||this.size.height,flexBasis:"auto"!==t.flexBasis?t.flexBasis:void 0})}},e.prototype.componentWillUnmount=function(){this.window&&this.unbindEvents()},e.prototype.createSizeForCssProperty=function(t,e){var i=this.propsSize&&this.propsSize[e];return"auto"!==this.state[e]||this.state.original[e]!==t||void 0!==i&&"auto"!==i?t:"auto"},e.prototype.calculateNewMaxFromBoundary=function(t,e){var i,o,n=this.props.boundsByDirection,s=this.state.direction,r=n&&T("left",s),a=n&&T("top",s);if("parent"===this.props.bounds){var h=this.parentNode;h&&(i=r?this.resizableRight-this.parentLeft:h.offsetWidth+(this.parentLeft-this.resizableLeft),o=a?this.resizableBottom-this.parentTop:h.offsetHeight+(this.parentTop-this.resizableTop))}else"window"===this.props.bounds?this.window&&(i=r?this.resizableRight:this.window.innerWidth-this.resizableLeft,o=a?this.resizableBottom:this.window.innerHeight-this.resizableTop):this.props.bounds&&(i=r?this.resizableRight-this.targetLeft:this.props.bounds.offsetWidth+(this.targetLeft-this.resizableLeft),o=a?this.resizableBottom-this.targetTop:this.props.bounds.offsetHeight+(this.targetTop-this.resizableTop));return i&&Number.isFinite(i)&&(t=t&&t<i?t:i),o&&Number.isFinite(o)&&(e=e&&e<o?e:o),{maxWidth:t,maxHeight:e}},e.prototype.calculateNewSizeFromDirection=function(t,e){var i=this.props.scale||1,o=this.props.resizeRatio||1,n=this.state,s=n.direction,r=n.original,a=this.props,h=a.lockAspectRatio,d=a.lockAspectRatioExtraHeight,l=a.lockAspectRatioExtraWidth,p=r.width,c=r.height,u=d||0,g=l||0;return T("right",s)&&(p=r.width+(t-r.x)*o/i,h&&(c=(p-g)/this.ratio+u)),T("left",s)&&(p=r.width-(t-r.x)*o/i,h&&(c=(p-g)/this.ratio+u)),T("bottom",s)&&(c=r.height+(e-r.y)*o/i,h&&(p=(c-u)*this.ratio+g)),T("top",s)&&(c=r.height-(e-r.y)*o/i,h&&(p=(c-u)*this.ratio+g)),{newWidth:p,newHeight:c}},e.prototype.calculateNewSizeFromAspectRatio=function(t,e,i,o){var n=this.props,s=n.lockAspectRatio,r=n.lockAspectRatioExtraHeight,a=n.lockAspectRatioExtraWidth,h=void 0===o.width?10:o.width,d=void 0===i.width||i.width<0?t:i.width,l=void 0===o.height?10:o.height,p=void 0===i.height||i.height<0?e:i.height,c=r||0,u=a||0;if(s){var g=(l-c)*this.ratio+u,m=(p-c)*this.ratio+u,f=(h-u)/this.ratio+c,v=(d-u)/this.ratio+c,b=Math.max(h,g),w=Math.min(d,m),y=Math.max(l,f),x=Math.min(p,v);t=P(t,b,w),e=P(e,y,x)}else t=P(t,h,d),e=P(e,l,p);return{newWidth:t,newHeight:e}},e.prototype.setBoundingClientRect=function(){if("parent"===this.props.bounds){var t=this.parentNode;if(t){var e=t.getBoundingClientRect();this.parentLeft=e.left,this.parentTop=e.top}}if(this.props.bounds&&"string"!=typeof this.props.bounds){var i=this.props.bounds.getBoundingClientRect();this.targetLeft=i.left,this.targetTop=i.top}if(this.resizable){var o=this.resizable.getBoundingClientRect(),n=o.left,s=o.top,r=o.right,a=o.bottom;this.resizableLeft=n,this.resizableRight=r,this.resizableTop=s,this.resizableBottom=a}},e.prototype.onResizeStart=function(t,e){if(this.resizable&&this.window){var i,o=0,n=0;if(t.nativeEvent&&function(t){return Boolean((t.clientX||0===t.clientX)&&(t.clientY||0===t.clientY))}(t.nativeEvent)?(o=t.nativeEvent.clientX,n=t.nativeEvent.clientY):t.nativeEvent&&L(t.nativeEvent)&&(o=t.nativeEvent.touches[0].clientX,n=t.nativeEvent.touches[0].clientY),this.props.onResizeStart)if(this.resizable)if(!1===this.props.onResizeStart(t,e,this.resizable))return;this.props.size&&(void 0!==this.props.size.height&&this.props.size.height!==this.state.height&&this.setState({height:this.props.size.height}),void 0!==this.props.size.width&&this.props.size.width!==this.state.width&&this.setState({width:this.props.size.width})),this.ratio="number"==typeof this.props.lockAspectRatio?this.props.lockAspectRatio:this.size.width/this.size.height;var s=this.window.getComputedStyle(this.resizable);if("auto"!==s.flexBasis){var r=this.parentNode;if(r){var a=this.window.getComputedStyle(r).flexDirection;this.flexDir=a.startsWith("row")?"row":"column",i=s.flexBasis}}this.setBoundingClientRect(),this.bindEvents();var h={original:{x:o,y:n,width:this.size.width,height:this.size.height},isResizing:!0,backgroundStyle:C(C({},this.state.backgroundStyle),{cursor:this.window.getComputedStyle(t.target).cursor||"auto"}),direction:e,flexBasis:i};this.setState(h)}},e.prototype.onMouseMove=function(t){var e=this;if(this.state.isResizing&&this.resizable&&this.window){if(this.window.TouchEvent&&L(t))try{t.preventDefault(),t.stopPropagation()}catch(t){}var i=this.props,o=i.maxWidth,n=i.maxHeight,s=i.minWidth,r=i.minHeight,a=L(t)?t.touches[0].clientX:t.clientX,h=L(t)?t.touches[0].clientY:t.clientY,d=this.state,l=d.direction,p=d.original,c=d.width,u=d.height,m=this.getParentSize(),f=function(t,e,i,o,n,s,r){return o=F(o,t.width,e,i),n=F(n,t.height,e,i),s=F(s,t.width,e,i),r=F(r,t.height,e,i),{maxWidth:void 0===o?void 0:Number(o),maxHeight:void 0===n?void 0:Number(n),minWidth:void 0===s?void 0:Number(s),minHeight:void 0===r?void 0:Number(r)}}(m,this.window.innerWidth,this.window.innerHeight,o,n,s,r);o=f.maxWidth,n=f.maxHeight,s=f.minWidth,r=f.minHeight;var v=this.calculateNewSizeFromDirection(a,h),b=v.newHeight,w=v.newWidth,y=this.calculateNewMaxFromBoundary(o,n);this.props.snap&&this.props.snap.x&&(w=D(w,this.props.snap.x,this.props.snapGap)),this.props.snap&&this.props.snap.y&&(b=D(b,this.props.snap.y,this.props.snapGap));var x=this.calculateNewSizeFromAspectRatio(w,b,{width:y.maxWidth,height:y.maxHeight},{width:s,height:r});if(w=x.newWidth,b=x.newHeight,this.props.grid){var z=B(w,this.props.grid[0]),S=B(b,this.props.grid[1]),N=this.props.snapGap||0;w=0===N||Math.abs(z-w)<=N?z:w,b=0===N||Math.abs(S-b)<=N?S:b}var O={width:w-p.width,height:b-p.height};if(c&&"string"==typeof c)if(c.endsWith("%"))w=w/m.width*100+"%";else if(c.endsWith("vw")){w=w/this.window.innerWidth*100+"vw"}else if(c.endsWith("vh")){w=w/this.window.innerHeight*100+"vh"}if(u&&"string"==typeof u)if(u.endsWith("%"))b=b/m.height*100+"%";else if(u.endsWith("vw")){b=b/this.window.innerWidth*100+"vw"}else if(u.endsWith("vh")){b=b/this.window.innerHeight*100+"vh"}var R={width:this.createSizeForCssProperty(w,"width"),height:this.createSizeForCssProperty(b,"height")};"row"===this.flexDir?R.flexBasis=R.width:"column"===this.flexDir&&(R.flexBasis=R.height),g((function(){e.setState(R)})),this.props.onResize&&this.props.onResize(t,l,this.resizable,O)}},e.prototype.onMouseUp=function(t){var e=this.state,i=e.isResizing,o=e.direction,n=e.original;if(i&&this.resizable){var s={width:this.size.width-n.width,height:this.size.height-n.height};this.props.onResizeStop&&this.props.onResizeStop(t,o,this.resizable,s),this.props.size&&this.setState(this.props.size),this.unbindEvents(),this.setState({isResizing:!1,backgroundStyle:C(C({},this.state.backgroundStyle),{cursor:"auto"})})}},e.prototype.updateSize=function(t){this.setState({width:t.width,height:t.height})},e.prototype.renderResizer=function(){var t=this,e=this.props,i=e.enable,o=e.handleStyles,n=e.handleClasses,s=e.handleWrapperStyle,r=e.handleWrapperClass,a=e.handleComponent;if(!i)return null;var h=Object.keys(i).map((function(e){return!1!==i[e]?d.createElement(M,{key:e,direction:e,onResizeStart:t.onResizeStart,replaceStyles:o&&o[e],className:n&&n[e]},a&&a[e]?a[e]:null):null}));return d.createElement("div",{className:r,style:s},h)},e.prototype.render=function(){var t=this,e=Object.keys(this.props).reduce((function(e,i){return-1!==Y.indexOf(i)||(e[i]=t.props[i]),e}),{}),i=C(C(C({position:"relative",userSelect:this.state.isResizing?"none":"auto"},this.props.style),this.sizeStyle),{maxWidth:this.props.maxWidth,maxHeight:this.props.maxHeight,minWidth:this.props.minWidth,minHeight:this.props.minHeight,boxSizing:"border-box",flexShrink:0});this.state.flexBasis&&(i.flexBasis=this.state.flexBasis);var o=this.props.as||"div";return d.createElement(o,C({ref:this.ref,style:i,className:this.props.className},e),this.state.isResizing&&d.createElement("div",{style:this.state.backgroundStyle}),this.props.children,this.renderResizer())},e.defaultProps={as:"div",onResizeStart:function(){},onResize:function(){},onResizeStop:function(){},enable:{top:!0,right:!0,bottom:!0,left:!0,topRight:!0,bottomRight:!0,bottomLeft:!0,topLeft:!0},style:{},grid:[1,1],lockAspectRatio:!1,lockAspectRatioExtraWidth:0,lockAspectRatioExtraHeight:0,scale:1,resizeRatio:1,snapGap:0},e}(d.PureComponent);function I(t,e,i,o){return new(i||(i=Promise))((function(n,s){function r(t){try{h(o.next(t))}catch(t){s(t)}}function a(t){try{h(o.throw(t))}catch(t){s(t)}}function h(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,a)}h((o=o.apply(t,e||[])).next())}))}function Q(){return Q=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},Q.apply(this,arguments)}var X=function(t){return d.createElement("svg",Q({fill:"currentColor","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"uploadImage"},t),N||(N=d.createElement("path",{d:"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"})))},q="CbnZQqyl",V="_78mDlVh1",Z="oZAAa6di",K="tLysgc7u",J="_1TmPKlXh",$="LZ2yXrRk",tt="_7ZO4VxhR",et="_71hAm-SR _7ZO4VxhR",it="gZazwh5A",ot="woGPvDjG",nt="DjdM6pfv",st="xlH5R22X";b('.CbnZQqyl{position:fixed}._78mDlVh1{background:#fff;box-shadow:0 0 0 1px hsla(0,0%,6%,.05),0 3px 6px hsla(0,0%,6%,.1),0 9px 24px hsla(0,0%,6%,.2);display:flex;flex-direction:column;height:100%;max-height:420px;max-width:calc(100vw - 24px);min-width:540px}.oZAAa6di{box-shadow:inset 0 -1px 0 rgba(55,53,47,.09);display:flex;height:40px;padding:0 8px;width:100%;z-index:1}.oZAAa6di,.tLysgc7u{font-size:14px;position:relative}.tLysgc7u{align-items:center;background-color:inherit;border:none;border-radius:4px;color:#37352f;cursor:pointer;display:inline-flex;flex-shrink:0;height:100%;line-height:1.2;min-width:0;padding:6px 8px;transition:height 20ms ease-in 0s;user-select:none;white-space:nowrap}._1TmPKlXh:after{background-color:#37352f;bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}.LZ2yXrRk{display:flex;justify-content:center;margin-left:12px;margin-right:12px;margin-top:4px;padding-bottom:6px;padding-top:6px}._7ZO4VxhR{border:1px solid rgba(55,53,47,.16);border-radius:4px;cursor:pointer;height:32px;padding-left:12px;padding-right:12px;transition:background 20ms ease-in 0s;user-select:none;white-space:nowrap;width:100%}._71hAm-SR{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.gZazwh5A{align-items:center;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;height:100%;justify-content:center;line-height:1.2;width:100%}.woGPvDjG{left:0;position:absolute;top:0;visibility:hidden}.DjdM6pfv{background:hsla(45,13%,94%,.6);box-shadow:inset 0 0 0 1px hsla(0,0%,6%,.1);cursor:text;height:32px;line-height:20px;padding:3px 6px;position:relative}.DjdM6pfv,.xlH5R22X{align-items:center;border:none;border-radius:4px;display:flex;font-size:14px;width:100%}.xlH5R22X{fill:#fff;background:#2383e2;box-shadow:inset 0 0 0 1px hsla(0,0%,6%,.1),0 1px 2px hsla(0,0%,6%,.1);color:#fff;cursor:pointer;flex-shrink:0;font-weight:500;height:28px;justify-content:center;line-height:1.2;margin:12px auto 6px;max-width:300px;padding-left:12px;padding-right:12px;transition:background 20ms ease-in 0s;user-select:none;white-space:nowrap}');const rt=({onChange:t,accept:e="image/*"})=>a("div",Object.assign({className:tt},{children:h("label",Object.assign({htmlFor:"image-uploader",className:it},{children:[a("input",{type:"file",id:"image-uploader",className:ot,accept:e,onChange:e=>{const i=e.currentTarget.files;i&&i.length>0&&t(i[0])},multiple:!1}),"Upload image"]}))})),at=({onEmbed:t})=>{const[e,i]=l("");return h("div",Object.assign({className:et},{children:[a("input",{type:"text",placeholder:"Paste image link",value:e,className:nt,onChange:t=>i(t.target.value)}),a("button",Object.assign({type:"button",className:st,onClick:()=>t(e)},{children:"Embed image"}))]}))},ht=({activeTab:i="upload",style:o,switchTab:n,onChange:s,onEmbed:r,accept:d,onClose:l})=>{const p="upload"===i,c="embed"===i;return h(t.Overlay,Object.assign({onClose:l},{children:[a("div",Object.assign({className:q,style:o},{children:h("div",Object.assign({className:V},{children:[h("div",Object.assign({className:Z},{children:[a("button",Object.assign({type:"button",onClick:()=>n("upload"),className:e(K,{[J]:p})},{children:"Upload"})),a("button",Object.assign({type:"button",onClick:()=>n("embed"),className:e(K,{[J]:c})},{children:"Image link"}))]})),h("div",Object.assign({className:$},{children:[p&&a(rt,{onChange:s,accept:d}),c&&a(at,{onEmbed:r})]}))]}))})),a("div",{})]}))},dt=(t,e,i,o)=>{if(!t||!e)return{};const n=Math.min(i/t,o/e);return{width:t*n,height:e*n}};var lt=!1;if("undefined"!=typeof window){var pt={get passive(){lt=!0}};window.addEventListener("testPassive",null,pt),window.removeEventListener("testPassive",null,pt)}var ct="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),ut=[],gt=!1,mt=-1,ft=void 0,vt=void 0,bt=void 0,wt=function(t){return ut.some((function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(t))}))},yt=function(t){var e=t||window.event;return!!wt(e.target)||(e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1))},xt=function(t,e){if(t){if(!ut.some((function(e){return e.targetElement===t}))){var i={targetElement:t,options:e||{}};ut=[].concat(function(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}(ut),[i]),ct?window.requestAnimationFrame((function(){if(void 0===vt){vt={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,e=t.scrollY,i=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-e,document.body.style.left=-i,setTimeout((function(){return window.requestAnimationFrame((function(){var t=o-window.innerHeight;t&&e>=o&&(document.body.style.top=-(e+t))}))}),300)}})):function(t){if(void 0===bt){var e=!!t&&!0===t.reserveScrollBarGap,i=window.innerWidth-document.documentElement.clientWidth;if(e&&i>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);bt=document.body.style.paddingRight,document.body.style.paddingRight=o+i+"px"}}void 0===ft&&(ft=document.body.style.overflow,document.body.style.overflow="hidden")}(e),ct&&(t.ontouchstart=function(t){1===t.targetTouches.length&&(mt=t.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(t,e){var i=t.targetTouches[0].clientY-mt;!wt(t.target)&&(e&&0===e.scrollTop&&i>0||function(t){return!!t&&t.scrollHeight-t.scrollTop<=t.clientHeight}(e)&&i<0?yt(t):t.stopPropagation())}(e,t)},gt||(document.addEventListener("touchmove",yt,lt?{passive:!1}:void 0),gt=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},zt=function(t){t?(ut=ut.filter((function(e){return e.targetElement!==t})),ct&&(t.ontouchstart=null,t.ontouchmove=null,gt&&0===ut.length&&(document.removeEventListener("touchmove",yt,lt?{passive:!1}:void 0),gt=!1)),ct?function(){if(void 0!==vt){var t=-parseInt(document.body.style.top,10),e=-parseInt(document.body.style.left,10);document.body.style.position=vt.position,document.body.style.top=vt.top,document.body.style.left=vt.left,window.scrollTo(e,t),vt=void 0}}():(void 0!==bt&&(document.body.style.paddingRight=bt,bt=void 0),void 0!==ft&&(document.body.style.overflow=ft,ft=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},St="ohhtqDdT",Nt="S-yQxAMd",Ot="DN1BWl71";function Rt(t){return new Promise(((e,i)=>{const o=new Image;o.src=t,o.onload=()=>e({width:o.width,height:o.height}),o.onerror=t=>i(t)}))}b(".ohhtqDdT{margin:20px 0 10px;user-select:none}.S-yQxAMd,.ohhtqDdT{position:relative;width:100%}.S-yQxAMd{align-items:center;background-color:#efefef;border:none;border-radius:3px;color:rgba(55,53,47,.65);cursor:pointer;display:flex;font-size:14px;overflow:hidden;padding:12px 36px 12px 12px;text-align:left;transition:background-color .1s ease-in}.S-yQxAMd:hover{background-color:#e3e3e3}.DN1BWl71{margin-right:8px;user-select:none}");const Wt=({element:t,accept:e,attributes:i,maxSizes:o,children:n,editor:d,onUpload:c})=>{const[u,g]=l(null),[f,v]=l("upload"),b=p(null),w=t=>{var e;if(t.stopPropagation(),null!==u)return zt(document.body),void g(null);const i=null===(e=b.current)||void 0===e?void 0:e.getBoundingClientRect();if(i){const t=i.top+i.height+88+20>window.innerHeight,e=!t;console.log({showAtTop:t,showAtBottom:e}),xt(document.body,{reserveScrollBarGap:!0}),g({left:i.left,top:t?i.top-88-5:i.top+i.height+5})}};return h("div",Object.assign({className:St},i,{contentEditable:!1},{children:[h("div",Object.assign({ref:b},{children:[h("button",Object.assign({className:Nt,onClick:w},{children:[a(X,{className:Ot,width:24,height:24}),a("span",{children:"Click to add image"})]})),null!==u&&a(ht,{onChange:e=>I(void 0,void 0,void 0,(function*(){const i=yield function(t){return new Promise(((e,i)=>{const o=new FileReader;o.readAsDataURL(t),o.onload=()=>e(o.result),o.onerror=t=>i(t)}))}(e);i.substring("data:image/".length,i.indexOf(";base64"));const n=yield Rt(i),a=dt(n.width,n.height,o.maxWidth,o.maxHeight);zt(document.body),g(null);const h={data:Object.assign(Object.assign({},t.data),{"data-src":i,size:{width:a.width||t.data.size.width,height:a.height||t.data.size.height}})};if(console.log("optimistic image uploader",m.findPath(d,t)),s.setNodes(d,h,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type}),!c)return console.error("Provide `onUpload` handler in Image options");const l=yield c(e),{width:p,height:u}=dt(l.width,l.height,o.maxWidth,o.maxHeight),f={data:Object.assign(Object.assign({},t.data),{url:l.url,"data-src":void 0,size:{width:p||t.data.size.width,height:u||t.data.size.height}})};s.setNodes(d,f,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type})})),onEmbed:e=>I(void 0,void 0,void 0,(function*(){try{const{width:i,height:o}=yield Rt(e);zt(document.body),g(null);const n={data:Object.assign(Object.assign({},t.data),{url:e,"data-src":void 0,size:{width:i,height:o}})};s.setNodes(d,n,{at:m.findPath(d,t),match:t=>r.isElement(t)&&"image"===t.type})}catch(t){zt(document.body),g(null)}})),onClose:w,activeTab:f,switchTab:t=>v(t),style:u,accept:e})]})),n]}))};var Et="zpY1mpQ8",jt="pjA59tdv";b(".zpY1mpQ8{height:100%;position:relative;width:100%}.zpY1mpQ8 .pjA59tdv{background-color:#909090;border-radius:5rem;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.zpY1mpQ8 .pjA59tdv:first-child{animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 60px)}.zpY1mpQ8 .pjA59tdv:nth-child(2){animation:OPSfFOxt 2s,L7daPOmF 2s;animation-delay:.15s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 30px)}.zpY1mpQ8 .pjA59tdv:nth-child(3){animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-delay:.3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:50%}.zpY1mpQ8 .pjA59tdv:nth-child(4){animation:OPSfFOxt 2s,L7daPOmF 2s;animation-delay:.45s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 30px)}.zpY1mpQ8 .pjA59tdv:nth-child(5){animation:OPSfFOxt 2s,_9uGMErwK 2s;animation-delay:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 60px)}@keyframes OPSfFOxt{0%,15%{top:50%}45%,65%{top:42.5%}85%,to{top:50%}}@keyframes _9uGMErwK{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:17.5px}46%,to{background-color:#909090;height:10px}}@keyframes L7daPOmF{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:32.5px}46%,to{background-color:#909090;height:10px}}");const kt=()=>h("div",Object.assign({className:Et},{children:[a("div",{className:jt}),a("div",{className:jt}),a("div",{className:jt}),a("div",{className:jt}),a("div",{className:jt})]}));var Mt={root:"CRjYe3V4",resizer:"NWmUovsc",dotsOptions:"namnQRMs",loadingState:"_0b2-YE4H",extraMargin:"SOfqAbJv",resizeLib:"EO3--Gbu",leftResizer:"TN-K0WnG NWmUovsc",rightResizer:"KhDmzJ88 NWmUovsc",resizeItem:"-FTiIzUC",selectImg:"KIB4WerX",selected:"_1Ab-jkHE",loader:"PRWt-7ci",dot:"g9fWS1Hn"};b(".CRjYe3V4{cursor:pointer;display:block;position:relative}.CRjYe3V4:hover .NWmUovsc,.CRjYe3V4:hover .namnQRMs{opacity:1}._0b2-YE4H{pointer-events:none}.SOfqAbJv{margin:20px 0 30px}.EO3--Gbu{margin:0 auto}.NWmUovsc{align-items:center;cursor:col-resize;display:flex;height:100%;justify-content:center;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s ease-in 0s;width:15px;z-index:1}.TN-K0WnG{left:0;top:0}.KhDmzJ88{right:0;top:0}.-FTiIzUC{background:hsla(0,0%,6%,.6);border:1px solid hsla(0,0%,100%,.9);border-radius:20px;box-shadow:0 0 0 .5px #fff;height:48px;max-height:50%;opacity:1;transition:opacity .3s ease-in 0s;width:6px}.KIB4WerX{opacity:0}._1Ab-jkHE{background:rgba(35,131,226,.14);border-radius:3px;inset:0;opacity:1;pointer-events:none;position:absolute;transition:opacity .15s ease-in 0s;z-index:81}.PRWt-7ci{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.namnQRMs{align-items:center;background-color:#eee;border:none;border-radius:2px;cursor:pointer;display:flex;height:22px;justify-content:space-between;opacity:0;padding:0 4px;position:absolute;right:10px;top:10px;transition:opacity .15s ease-in 0s;width:22px;z-index:1}.g9fWS1Hn{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}");const At=265;function Ct(i){var o,n,d,p,g,b,w,y;const{element:x,editor:z,plugin:S}=i,N=f(),O=v(),[R,W]=l(null),[E,j]=l({width:(null===(n=null===(o=x.data)||void 0===o?void 0:o.size)||void 0===n?void 0:n.width)||750,height:(null===(p=null===(d=x.data)||void 0===d?void 0:d.size)||void 0===p?void 0:p.height)||440});c((()=>{var t,e,i,o;x.data&&j({width:(null===(e=null===(t=x.data)||void 0===t?void 0:t.size)||void 0===e?void 0:e.width)||750,height:(null===(o=null===(i=x.data)||void 0===i?void 0:i.size)||void 0===o?void 0:o.height)||440})}),[null===(g=x.data)||void 0===g?void 0:g.size]);const k=u((()=>{var t,e;return{minWidth:300,size:{width:E.width,height:E.height},maxWidth:(null===(t=S.options)||void 0===t?void 0:t.maxWidth)||800,maxHeight:(null===(e=S.options)||void 0===e?void 0:e.maxHeight)||720,lockAspectRatio:!0,resizeRatio:2,enable:{left:!O,right:!O},handleStyles:{left:{left:0},right:{right:0}},onResize:(t,e,i)=>{j({width:i.offsetWidth,height:i.offsetHeight})},onResizeStop:(t,e,i)=>{console.log("image editor editor.children",z.children),console.log("ReactEditor.findPath(editor, element)",m.findPath(z,x)),console.log("element",x),s.setNodes(z,{data:Object.assign(Object.assign({},x.data),{size:{width:i.offsetWidth,height:i.offsetHeight}})},{at:m.findPath(z,x),match:t=>r.isElement(t)&&"image"===t.type})},handleComponent:{left:a("div",Object.assign({contentEditable:!1,className:Mt.leftResizer},{children:a("div",{className:Mt.resizeItem})})),right:a("div",Object.assign({contentEditable:!1,className:Mt.rightResizer},{children:a("div",{className:Mt.resizeItem})}))}}}),[E.width,E.height,z]),M=!!(null===(b=x.data)||void 0===b?void 0:b.caption),A=!!x.data["data-src"]&&!x.data.url,C=()=>{zt(document.body),W(null)},H=t=>{var e;if(null==t||t.stopPropagation(),null!==R)return C();const i=null===(e=null==t?void 0:t.currentTarget)||void 0===e?void 0:e.getBoundingClientRect();if(i){const t=i.top+i.height+164+20>window.innerHeight;xt(document.body,{reserveScrollBarGap:!0}),W({left:i.right-i.width+At>window.innerWidth?window.innerWidth-At-i.width:i.right-i.width,top:t?i.top-82-i.height:i.top+i.height+5})}};if(!x.data.url&&!x.data["data-src"]){const{maxWidth:o=750,maxHeight:n=800}=S.options||{};return h("div",Object.assign({className:Mt.root,contentEditable:!1,draggable:!1},{children:[a("div",{className:e(Mt.selectImg,{[Mt.selected]:N})}),a(Wt,Object.assign({attributes:i.attributes,element:x,editor:z,maxSizes:{maxWidth:o,maxHeight:n},onUpload:null===(w=S.options)||void 0===w?void 0:w.onUpload,accept:null===(y=S.options)||void 0===y?void 0:y.accept},{children:!O&&h("div",{children:[h("button",Object.assign({type:"button",className:Mt.dotsOptions,onClick:H},{children:[a("span",{className:Mt.dot}),a("span",{className:Mt.dot}),a("span",{className:Mt.dot})]})),null!==R&&a(t.ElementOptions,{onClose:C,style:R,element:x,onCopy:C,onDelete:C,onDuplicate:C},x.id)]})})),i.children]}),x.id)}return a("div",Object.assign({contentEditable:!1,draggable:!1,className:e(Mt.root,{[Mt.extraMargin]:M,[Mt.loadingState]:A})},{children:h(G,Object.assign({},k,{className:Mt.resizeLib},{children:[S.renderer.render(Object.assign(Object.assign({},i),{size:E})),a("div",{className:e(Mt.selectImg,{[Mt.selected]:N})}),A&&a("div",Object.assign({className:Mt.loader},{children:a(kt,{})})),!O&&h("div",{children:[h("button",Object.assign({type:"button",className:Mt.dotsOptions,onClick:H},{children:[a("span",{className:Mt.dot}),a("span",{className:Mt.dot}),a("span",{className:Mt.dot})]})),null!==R&&a(t.ElementOptions,{onClose:C,style:R,element:x,onCopy:C,onDelete:C,onDuplicate:C},x.id)]})]}))}),x.id)}const Ht=i({type:"image",shortcut:"image",renderer:{editor:(t,e)=>i=>a(Ct,Object.assign({editor:t,plugin:e},i)),render:({attributes:t,element:e,children:i,size:o,HTMLAttributes:n})=>{var s,r,d,l,p;const c=(null==o?void 0:o.width)||(null===(r=null===(s=e.data)||void 0===s?void 0:s.size)||void 0===r?void 0:r.width)||"100%",u=(null==o?void 0:o.height)||(null===(l=null===(d=e.data)||void 0===d?void 0:d.size)||void 0===l?void 0:l.height)||400,g=null===(p=e.data)||void 0===p?void 0:p.caption;return e.data.url||e.data["data-src"]?h("div",Object.assign({},t,{className:w,contentEditable:!1,draggable:!1},{children:[h("figure",Object.assign({className:x,onDragStart:t=>t.preventDefault()},{children:[a("img",Object.assign({src:e.data.url||e.data["data-src"]||"",alt:g,width:c,height:u,loading:"lazy",decoding:"async",className:y},n)),g&&a("figcaption",Object.assign({className:z},{children:g}))]})),i]})):a("div",{})}},extendEditor(t){const{isVoid:e}=t;return t.isVoid=t=>t.type===Ht.getPlugin.type||e(t),t},events:{onKeyDown:(t,{defaultNode:e,hotkeys:i})=>n=>{var r;if("image"===o(t,null===(r=t.selection)||void 0===r?void 0:r.anchor.path,"highest").type&&t.selection)return i.isEnter(n)?(n.preventDefault(),void s.insertNodes(t,e,{mode:"highest"})):void 0}},defineElement:()=>({id:n(),type:"image",nodeType:"void",data:{url:null,size:{width:"auto",height:"auto"}},children:[{text:""}]}),createElement:function(t){var e;const i=Ht.getPlugin.defineElement();s.setNodes(t,i,{at:null===(e=t.selection)||void 0===e?void 0:e.anchor})},exports:{markdown:{serialize:(t,e)=>`![${t.data.caption||""}](${t.data.url})\n`},html:{serialize:(t,e)=>{var i,o;return`<img src="${t.data.url}" width="${null===(i=t.data.size)||void 0===i?void 0:i.width}" height="${null===(o=t.data.size)||void 0===o?void 0:o.height}" decoding="async" loading="lazy"  alt="${t.data.caption||"yoopta-html-image"}" />`},deserialize:{nodeName:"IMG",parse:t=>({url:t.getAttribute("src"),size:{height:"string"==typeof t.getAttribute("height")?Number(t.getAttribute("height")):"auto",width:"string"==typeof t.getAttribute("width")?Number(t.getAttribute("width")):"auto"}})}}}});export{Ht as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/image",
-  "version": "1.9.2-rc",
+  "version": "1.9.4-rc",
   "description": "> TODO: description",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",
@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": "1.9.0-rc",
+    "@yoopta/editor": "1.9.7-rc",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
     "slate": ">=0.72.3",