@yoopta/embed 1.9.7-rc → 1.9.8-rc

package/dist/index.js

@@ -1 +1,1637 @@
-import{getElementClassname as e,UI_HELPERS as t,cx as i,createYooptaPlugin as o,getElementByPath as n,generateId as s}from"@yoopta/editor";import{Transforms as r,Element as a}from"slate";import{jsx as d,jsxs as l}from"react/jsx-runtime";import*as h from"react";import{useState as c,useEffect as p,useRef as u,useMemo as g}from"react";import{flushSync as m}from"react-dom";import{ReactEditor as f,useSelected as v,useReadOnly as b}from"slate-react";function w(e,t){var i={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}return i}function y(e,t,i,o){return new(i||(i=Promise))((function(n,s){function r(e){try{d(o.next(e))}catch(e){s(e)}}function a(e){try{d(o.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(r,a)}d((o=o.apply(e,t||[])).next())}))}function x(e,{threshold:t=0,root:i=null,rootMargin:o="0%",freezeOnceVisible:n=!1}={}){const[s,r]=c({}),a=s.isIntersecting&&n,d=([e])=>r(e);return p((()=>{const n=null==e?void 0:e.current;if(!window.IntersectionObserver||a||!n)return;const s=new IntersectionObserver(d,{threshold:t,root:i,rootMargin:o});return s.observe(n),()=>s.disconnect()}),[e,t,i,o,a]),s}function z(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"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=e:n.appendChild(document.createTextNode(e))}}var O={root:"ypSFFbjd",iframe:"DQszzmj7",container:"yc58m72J",iframePreview:"DYsS-Bbu",embed:"a1CpYHeG"};z(".ypSFFbjd{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.DQszzmj7{background-color:#fff}.DQszzmj7,.yc58m72J{border-radius:1px;height:100%;pointer-events:auto;width:100%}.DQszzmj7,.DYsS-Bbu,.yc58m72J{left:0;position:absolute;top:0}.DYsS-Bbu{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}.a1CpYHeG{height:100%;position:relative;width:100%}");const S=e=>`https://api.dailymotion.com/video/${e}?fields=thumbnail_url`;var N={root:"C8Z8IWw5",iframe:"aGHn-pry",container:"-qZtVrzy",iframePreview:"kmC7RiaF",embed:"srCuArtd"};function j(e){var{providerId:t,url:i}=e;w(e,["providerId","url"]);const o=u(null),{isIntersecting:n}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return d("div",Object.assign({className:N.root,ref:o},{children:d("div",Object.assign({className:N.container},{children:d("div",Object.assign({className:N.embed},{children:n&&d("iframe",{src:i,frameBorder:0,allowFullScreen:!0,className:N.iframe,height:"450px"})}))}))}))}z(".C8Z8IWw5{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.aGHn-pry{background-color:#fff}.-qZtVrzy,.aGHn-pry{border-radius:1px;height:100%;pointer-events:auto;width:100%}.-qZtVrzy,.aGHn-pry,.kmC7RiaF{left:0;position:absolute;top:0}.kmC7RiaF{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}.srCuArtd{height:100%;position:relative;width:100%}");var R={root:"w4l4tKlB",iframe:"cbJcegGv",container:"g8V-uGLl",iframePreview:"hZuYZ7vp",embed:"j6pRoOC1"};z(".w4l4tKlB{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.cbJcegGv{background-color:#fff}.cbJcegGv,.g8V-uGLl{border-radius:1px;height:100%;pointer-events:auto;width:100%}.cbJcegGv,.g8V-uGLl,.hZuYZ7vp{left:0;position:absolute;top:0}.hZuYZ7vp{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}.j6pRoOC1{height:100%;position:relative;width:100%}");var E={root:"e3lQDjTT",iframe:"O5Z0OWN-",container:"zxjqcq4y",iframePreview:"_5kC3Lf5J",embed:"ymOgdXs4"};z(".e3lQDjTT{display:flex;height:100%;justify-content:center;min-height:100px;padding-bottom:86%;position:relative;width:100%}.O5Z0OWN-{background-color:#fff}.O5Z0OWN-,.zxjqcq4y{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}._5kC3Lf5J{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.ymOgdXs4{position:relative;width:100%}.ymOgdXs4,.ymOgdXs4>div,.ymOgdXs4>div>div{height:100%}.ymOgdXs4 iframe{height:100%!important;width:100%!important}");var W={root:"sD5QN14F",iframe:"mRrF4hwM",container:"LyyH1fsE",iframePreview:"U9EPxemn",embed:"_4AQiBYad"};z(".sD5QN14F{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.mRrF4hwM{background-color:#fff}.LyyH1fsE,.mRrF4hwM{border-radius:1px;height:100%;pointer-events:auto;width:100%}.LyyH1fsE,.U9EPxemn,.mRrF4hwM{left:0;position:absolute;top:0}.U9EPxemn{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}._4AQiBYad{height:100%;position:relative;width:100%}");const H="https://vimeo.com/api/v2/video";var L={root:"zoqyIXwI",iframe:"WgoSECbO",container:"m07CnIxO",iframePreview:"NSr-cxfm",embed:"Cv1rIJbN"};z(".zoqyIXwI{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.WgoSECbO{background-color:#fff}.WgoSECbO,.m07CnIxO{border-radius:1px;height:100%;pointer-events:auto;width:100%}.NSr-cxfm,.WgoSECbO,.m07CnIxO{left:0;position:absolute;top:0}.NSr-cxfm{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}.Cv1rIJbN{height:100%;position:relative;width:100%}");var P="HUtGPcJq";z(".HUtGPcJq{margin:20px 0 10px;position:relative}");const C={vimeo:function(e){var{providerId:t}=e,i=w(e,["providerId"]);const o=u(null),[n,s]=c(null),[r,a]=c(!1),{isIntersecting:h}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return p((()=>{fetch(`${H}/${t}.json`).then((e=>e.json())).then((e=>s(e[0].thumbnail_medium))).catch((()=>s(null)))}),[t]),d("div",Object.assign({className:W.root,ref:o},{children:d("div",Object.assign({className:W.container},{children:l("div",Object.assign({className:W.embed},{children:[d("img",{src:n||"",alt:"vimeo_video_preview",width:"100%",height:"100%",className:W.iframePreview,style:{opacity:h&&r?0:1,zIndex:h&&r?-1:0}}),h&&d("iframe",Object.assign({title:"Vimeo Player",src:`https://player.vimeo.com/video/${t}?badge=0&byline=0&portrait=0&title=0`,frameBorder:0,allowFullScreen:!0,onLoad:()=>a(!0),className:W.iframe},i))]}))}))}))},youtube:function(e){var{providerId:t}=e,i=w(e,["providerId"]);const o=u(null),[n,s]=c(!1),{isIntersecting:r}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return d("div",Object.assign({className:L.root,ref:o},{children:d("div",Object.assign({className:L.container},{children:l("div",Object.assign({className:L.embed},{children:[d("img",{src:`https://i.ytimg.com/vi/${t}/default.jpg`,alt:"youtube_video_preview",width:"100%",height:"100%",className:L.iframePreview,style:{opacity:r&&n?0:1,zIndex:r&&n?-1:0}}),r&&d("iframe",Object.assign({title:"Youtube Player",src:`https://www.youtube.com/embed/${t}?hl=no&rel=0`,frameBorder:0,onLoad:()=>s(!0),allowFullScreen:!0,className:L.iframe},i))]}))}))}))},dailymotion:function(e){var{providerId:t}=e,i=w(e,["providerId"]);const o=u(null),[n,s]=c(null),[r,a]=c(!1),{isIntersecting:h}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return p((()=>{fetch(S(t)).then((e=>e.json())).then((e=>s(e.thumbnail_url))).catch((()=>s(null)))}),[t]),d("div",Object.assign({className:O.root,ref:o},{children:d("div",Object.assign({className:O.container},{children:l("div",Object.assign({className:O.embed},{children:[d("img",{src:n||"",alt:"daylimotion_video_preview",width:"100%",height:"100%",className:O.iframePreview,style:{opacity:h&&r?0:1,zIndex:h&&r?-1:0}}),h&&d("iframe",Object.assign({title:"Dailymotion Video Player",frameBorder:0,onLoad:()=>a(!0),src:`https://www.dailymotion.com/embed/video/${t}`,allowFullScreen:!0,className:O.iframe},i))]}))}))}))},twitter:function({providerId:e}){const t=u(null),{isIntersecting:i}=x(t,{freezeOnceVisible:!0,rootMargin:"50%"});return p((()=>{var o;if(!i)return;const n=document.createElement("script");n.src="https://platform.twitter.com/widgets.js",null===(o=t.current)||void 0===o||o.appendChild(n),n.onload=()=>{window.twttr&&window.twttr.widgets.createTweet(e,document.getElementById(e),{align:"center",conversation:"none",dnt:!0,theme:"dark",height:300})}}),[e,i]),d("div",Object.assign({className:E.root,ref:t},{children:d("div",Object.assign({className:E.container},{children:d("div",Object.assign({className:E.embed},{children:d("div",{id:e})}))}))}))},figma:function(e){var{providerId:t,url:i}=e;w(e,["providerId","url"]);const o=u(null),{isIntersecting:n}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return d("div",Object.assign({className:R.root,ref:o},{children:d("div",Object.assign({className:R.container},{children:d("div",Object.assign({className:R.embed},{children:n&&d("iframe",{src:`https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(i)}`,frameBorder:0,allowFullScreen:!0,className:R.iframe,height:"450px"})}))}))}))}};var k,M,B=(k=function(e,t){return k=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])},k(e,t)},function(e,t){function i(){this.constructor=e}k(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}),I=function(){return I=Object.assign||function(e){for(var t,i=1,o=arguments.length;i<o;i++)for(var n in t=arguments[i])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},I.apply(this,arguments)},_={width:"100%",height:"10px",top:"0px",left:"0px",cursor:"row-resize"},A={width:"10px",height:"100%",top:"0px",left:"0px",cursor:"col-resize"},V={width:"20px",height:"20px",position:"absolute"},T={top:I(I({},_),{top:"-5px"}),right:I(I({},A),{left:void 0,right:"-5px"}),bottom:I(I({},_),{top:void 0,bottom:"-5px"}),left:I(I({},A),{left:"-5px"}),topRight:I(I({},V),{right:"-10px",top:"-10px",cursor:"ne-resize"}),bottomRight:I(I({},V),{right:"-10px",bottom:"-10px",cursor:"se-resize"}),bottomLeft:I(I({},V),{left:"-10px",bottom:"-10px",cursor:"sw-resize"}),topLeft:I(I({},V),{left:"-10px",top:"-10px",cursor:"nw-resize"})},F=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.onMouseDown=function(e){t.props.onResizeStart(e,t.props.direction)},t.onTouchStart=function(e){t.props.onResizeStart(e,t.props.direction)},t}return B(t,e),t.prototype.render=function(){return h.createElement("div",{className:this.props.className||"",style:I(I({position:"absolute",userSelect:"none"},T[this.props.direction]),this.props.replaceStyles||{}),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart},this.props.children)},t}(h.PureComponent),G=function(){var e=function(t,i){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])},e(t,i)};return function(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}}(),U=function(){return U=Object.assign||function(e){for(var t,i=1,o=arguments.length;i<o;i++)for(var n in t=arguments[i])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},U.apply(this,arguments)},D={width:"auto",height:"auto"},Y=function(e,t,i){return Math.max(Math.min(e,i),t)},Z=function(e,t){return Math.round(e/t)*t},q=function(e,t){return new RegExp(e,"i").test(t)},J=function(e){return Boolean(e.touches&&e.touches.length)},X=function(e,t,i){void 0===i&&(i=0);var o=t.reduce((function(i,o,n){return Math.abs(o-e)<Math.abs(t[i]-e)?n:i}),0),n=Math.abs(t[o]-e);return 0===i||n<i?t[o]:e},Q=function(e){return"auto"===(e=e.toString())||e.endsWith("px")||e.endsWith("%")||e.endsWith("vh")||e.endsWith("vw")||e.endsWith("vmax")||e.endsWith("vmin")?e:e+"px"},$=function(e,t,i,o){if(e&&"string"==typeof e){if(e.endsWith("px"))return Number(e.replace("px",""));if(e.endsWith("%"))return t*(Number(e.replace("%",""))/100);if(e.endsWith("vw"))return i*(Number(e.replace("vw",""))/100);if(e.endsWith("vh"))return o*(Number(e.replace("vh",""))/100)}return e},K=["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"],ee="__resizable_base__",te=function(e){function t(t){var i=e.call(this,t)||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 e=i.parentNode;if(!e)return null;var t=i.window.document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.transform="scale(0, 0)",t.style.left="0",t.style.flex="0 0 100%",t.classList?t.classList.add(ee):t.className+=ee,e.appendChild(t),t},i.removeBase=function(e){var t=i.parentNode;t&&t.removeChild(e)},i.ref=function(e){e&&(i.resizable=e)},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 G(t,e),Object.defineProperty(t.prototype,"parentNode",{get:function(){return this.resizable?this.resizable.parentNode:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"window",{get:function(){return this.resizable&&this.resizable.ownerDocument?this.resizable.ownerDocument.defaultView:null},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"propsSize",{get:function(){return this.props.size||this.props.defaultSize||D},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"size",{get:function(){var e=0,t=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"),e="auto"!==this.resizable.style.width?this.resizable.offsetWidth:i,t="auto"!==this.resizable.style.height?this.resizable.offsetHeight:o,this.resizable.style.position=n}return{width:e,height:t}},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"sizeStyle",{get:function(){var e=this,t=this.props.size,i=function(t){if(void 0===e.state[t]||"auto"===e.state[t])return"auto";if(e.propsSize&&e.propsSize[t]&&e.propsSize[t].toString().endsWith("%")){if(e.state[t].toString().endsWith("%"))return e.state[t].toString();var i=e.getParentSize();return Number(e.state[t].toString().replace("px",""))/i[t]*100+"%"}return Q(e.state[t])};return{width:t&&void 0!==t.width&&!this.state.isResizing?Q(t.width):i("width"),height:t&&void 0!==t.height&&!this.state.isResizing?Q(t.height):i("height")}},enumerable:!1,configurable:!0}),t.prototype.getParentSize=function(){if(!this.parentNode)return this.window?{width:this.window.innerWidth,height:this.window.innerHeight}:{width:0,height:0};var e=this.appendBase();if(!e)return{width:0,height:0};var t=!1,i=this.parentNode.style.flexWrap;"wrap"!==i&&(t=!0,this.parentNode.style.flexWrap="wrap"),e.style.position="relative",e.style.minWidth="100%",e.style.minHeight="100%";var o={width:e.offsetWidth,height:e.offsetHeight};return t&&(this.parentNode.style.flexWrap=i),this.removeBase(e),o},t.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))},t.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))},t.prototype.componentDidMount=function(){if(this.resizable&&this.window){var e=this.window.getComputedStyle(this.resizable);this.setState({width:this.state.width||this.size.width,height:this.state.height||this.size.height,flexBasis:"auto"!==e.flexBasis?e.flexBasis:void 0})}},t.prototype.componentWillUnmount=function(){this.window&&this.unbindEvents()},t.prototype.createSizeForCssProperty=function(e,t){var i=this.propsSize&&this.propsSize[t];return"auto"!==this.state[t]||this.state.original[t]!==e||void 0!==i&&"auto"!==i?e:"auto"},t.prototype.calculateNewMaxFromBoundary=function(e,t){var i,o,n=this.props.boundsByDirection,s=this.state.direction,r=n&&q("left",s),a=n&&q("top",s);if("parent"===this.props.bounds){var d=this.parentNode;d&&(i=r?this.resizableRight-this.parentLeft:d.offsetWidth+(this.parentLeft-this.resizableLeft),o=a?this.resizableBottom-this.parentTop:d.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)&&(e=e&&e<i?e:i),o&&Number.isFinite(o)&&(t=t&&t<o?t:o),{maxWidth:e,maxHeight:t}},t.prototype.calculateNewSizeFromDirection=function(e,t){var i=this.props.scale||1,o=this.props.resizeRatio||1,n=this.state,s=n.direction,r=n.original,a=this.props,d=a.lockAspectRatio,l=a.lockAspectRatioExtraHeight,h=a.lockAspectRatioExtraWidth,c=r.width,p=r.height,u=l||0,g=h||0;return q("right",s)&&(c=r.width+(e-r.x)*o/i,d&&(p=(c-g)/this.ratio+u)),q("left",s)&&(c=r.width-(e-r.x)*o/i,d&&(p=(c-g)/this.ratio+u)),q("bottom",s)&&(p=r.height+(t-r.y)*o/i,d&&(c=(p-u)*this.ratio+g)),q("top",s)&&(p=r.height-(t-r.y)*o/i,d&&(c=(p-u)*this.ratio+g)),{newWidth:c,newHeight:p}},t.prototype.calculateNewSizeFromAspectRatio=function(e,t,i,o){var n=this.props,s=n.lockAspectRatio,r=n.lockAspectRatioExtraHeight,a=n.lockAspectRatioExtraWidth,d=void 0===o.width?10:o.width,l=void 0===i.width||i.width<0?e:i.width,h=void 0===o.height?10:o.height,c=void 0===i.height||i.height<0?t:i.height,p=r||0,u=a||0;if(s){var g=(h-p)*this.ratio+u,m=(c-p)*this.ratio+u,f=(d-u)/this.ratio+p,v=(l-u)/this.ratio+p,b=Math.max(d,g),w=Math.min(l,m),y=Math.max(h,f),x=Math.min(c,v);e=Y(e,b,w),t=Y(t,y,x)}else e=Y(e,d,l),t=Y(t,h,c);return{newWidth:e,newHeight:t}},t.prototype.setBoundingClientRect=function(){if("parent"===this.props.bounds){var e=this.parentNode;if(e){var t=e.getBoundingClientRect();this.parentLeft=t.left,this.parentTop=t.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}},t.prototype.onResizeStart=function(e,t){if(this.resizable&&this.window){var i,o=0,n=0;if(e.nativeEvent&&function(e){return Boolean((e.clientX||0===e.clientX)&&(e.clientY||0===e.clientY))}(e.nativeEvent)?(o=e.nativeEvent.clientX,n=e.nativeEvent.clientY):e.nativeEvent&&J(e.nativeEvent)&&(o=e.nativeEvent.touches[0].clientX,n=e.nativeEvent.touches[0].clientY),this.props.onResizeStart)if(this.resizable)if(!1===this.props.onResizeStart(e,t,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 d={original:{x:o,y:n,width:this.size.width,height:this.size.height},isResizing:!0,backgroundStyle:U(U({},this.state.backgroundStyle),{cursor:this.window.getComputedStyle(e.target).cursor||"auto"}),direction:t,flexBasis:i};this.setState(d)}},t.prototype.onMouseMove=function(e){var t=this;if(this.state.isResizing&&this.resizable&&this.window){if(this.window.TouchEvent&&J(e))try{e.preventDefault(),e.stopPropagation()}catch(e){}var i=this.props,o=i.maxWidth,n=i.maxHeight,s=i.minWidth,r=i.minHeight,a=J(e)?e.touches[0].clientX:e.clientX,d=J(e)?e.touches[0].clientY:e.clientY,l=this.state,h=l.direction,c=l.original,p=l.width,u=l.height,g=this.getParentSize(),f=function(e,t,i,o,n,s,r){return o=$(o,e.width,t,i),n=$(n,e.height,t,i),s=$(s,e.width,t,i),r=$(r,e.height,t,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)}}(g,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,d),b=v.newHeight,w=v.newWidth,y=this.calculateNewMaxFromBoundary(o,n);this.props.snap&&this.props.snap.x&&(w=X(w,this.props.snap.x,this.props.snapGap)),this.props.snap&&this.props.snap.y&&(b=X(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=Z(w,this.props.grid[0]),O=Z(b,this.props.grid[1]),S=this.props.snapGap||0;w=0===S||Math.abs(z-w)<=S?z:w,b=0===S||Math.abs(O-b)<=S?O:b}var N={width:w-c.width,height:b-c.height};if(p&&"string"==typeof p)if(p.endsWith("%"))w=w/g.width*100+"%";else if(p.endsWith("vw")){w=w/this.window.innerWidth*100+"vw"}else if(p.endsWith("vh")){w=w/this.window.innerHeight*100+"vh"}if(u&&"string"==typeof u)if(u.endsWith("%"))b=b/g.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 j={width:this.createSizeForCssProperty(w,"width"),height:this.createSizeForCssProperty(b,"height")};"row"===this.flexDir?j.flexBasis=j.width:"column"===this.flexDir&&(j.flexBasis=j.height),m((function(){t.setState(j)})),this.props.onResize&&this.props.onResize(e,h,this.resizable,N)}},t.prototype.onMouseUp=function(e){var t=this.state,i=t.isResizing,o=t.direction,n=t.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(e,o,this.resizable,s),this.props.size&&this.setState(this.props.size),this.unbindEvents(),this.setState({isResizing:!1,backgroundStyle:U(U({},this.state.backgroundStyle),{cursor:"auto"})})}},t.prototype.updateSize=function(e){this.setState({width:e.width,height:e.height})},t.prototype.renderResizer=function(){var e=this,t=this.props,i=t.enable,o=t.handleStyles,n=t.handleClasses,s=t.handleWrapperStyle,r=t.handleWrapperClass,a=t.handleComponent;if(!i)return null;var d=Object.keys(i).map((function(t){return!1!==i[t]?h.createElement(F,{key:t,direction:t,onResizeStart:e.onResizeStart,replaceStyles:o&&o[t],className:n&&n[t]},a&&a[t]?a[t]:null):null}));return h.createElement("div",{className:r,style:s},d)},t.prototype.render=function(){var e=this,t=Object.keys(this.props).reduce((function(t,i){return-1!==K.indexOf(i)||(t[i]=e.props[i]),t}),{}),i=U(U(U({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 h.createElement(o,U({ref:this.ref,style:i,className:this.props.className},t),this.state.isResizing&&h.createElement("div",{style:this.state.backgroundStyle}),this.props.children,this.renderResizer())},t.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},t}(h.PureComponent);function ie(){return ie=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},ie.apply(this,arguments)}var oe=function(e){return h.createElement("svg",ie({fill:"currentColor","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"uploadImage"},e),M||(M=h.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"})))},ne="_5ZnGUwAU",se="wlwFaZpx",re="Obm15-qh",ae="gJ5-oVLV",de="_6jUel99o",le="HZgHUcV-",he="GF1PbH1g gU1gU-Wq",ce="i7UwLauz",pe="cJSOiHYH";z('._5ZnGUwAU{position:fixed}.wlwFaZpx{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}.Obm15-qh{box-shadow:inset 0 -1px 0 rgba(55,53,47,.09);display:flex;height:40px;padding:0 8px;width:100%;z-index:1}.Obm15-qh,.gJ5-oVLV{font-size:14px;position:relative}.gJ5-oVLV{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}._6jUel99o:after{background-color:#37352f;bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}.HZgHUcV-{display:flex;justify-content:center;margin-left:12px;margin-right:12px;margin-top:4px;padding-bottom:6px;padding-top:6px}.gU1gU-Wq{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%}.GF1PbH1g{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.i2lz5EKx{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%}._3cPFLttW{left:0;position:absolute;top:0;visibility:hidden}.i7UwLauz{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}.cJSOiHYH,.i7UwLauz{align-items:center;border:none;border-radius:4px;display:flex;font-size:14px;width:100%}.cJSOiHYH{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 ue=({onEmbed:e})=>{const[t,i]=c("");return l("div",Object.assign({className:he},{children:[d("input",{type:"text",placeholder:"Paste embed link",value:t,className:ce,onChange:e=>i(e.target.value)}),d("button",Object.assign({type:"button",className:pe,onClick:()=>e(t)},{children:"Embed"}))]}))},ge=({style:e,onEmbed:o,onClose:n})=>l(t.Overlay,Object.assign({onClose:n},{children:[d("div",Object.assign({className:ne,style:e},{children:l("div",Object.assign({className:se},{children:[d("div",Object.assign({className:re},{children:d("button",Object.assign({type:"button",className:i(ae,{[de]:!0})},{children:"Embed link"}))})),d("div",Object.assign({className:le},{children:d(ue,{onEmbed:o})}))]}))})),d("div",{})]}));var me=!1;if("undefined"!=typeof window){var fe={get passive(){me=!0}};window.addEventListener("testPassive",null,fe),window.removeEventListener("testPassive",null,fe)}var ve="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),be=[],we=!1,ye=-1,xe=void 0,ze=void 0,Oe=void 0,Se=function(e){return be.some((function(t){return!(!t.options.allowTouchMove||!t.options.allowTouchMove(e))}))},Ne=function(e){var t=e||window.event;return!!Se(t.target)||(t.touches.length>1||(t.preventDefault&&t.preventDefault(),!1))},je=function(e,t){if(e){if(!be.some((function(t){return t.targetElement===e}))){var i={targetElement:e,options:t||{}};be=[].concat(function(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}(be),[i]),ve?window.requestAnimationFrame((function(){if(void 0===ze){ze={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var e=window,t=e.scrollY,i=e.scrollX,o=e.innerHeight;document.body.style.position="fixed",document.body.style.top=-t,document.body.style.left=-i,setTimeout((function(){return window.requestAnimationFrame((function(){var e=o-window.innerHeight;e&&t>=o&&(document.body.style.top=-(t+e))}))}),300)}})):function(e){if(void 0===Oe){var t=!!e&&!0===e.reserveScrollBarGap,i=window.innerWidth-document.documentElement.clientWidth;if(t&&i>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);Oe=document.body.style.paddingRight,document.body.style.paddingRight=o+i+"px"}}void 0===xe&&(xe=document.body.style.overflow,document.body.style.overflow="hidden")}(t),ve&&(e.ontouchstart=function(e){1===e.targetTouches.length&&(ye=e.targetTouches[0].clientY)},e.ontouchmove=function(t){1===t.targetTouches.length&&function(e,t){var i=e.targetTouches[0].clientY-ye;!Se(e.target)&&(t&&0===t.scrollTop&&i>0||function(e){return!!e&&e.scrollHeight-e.scrollTop<=e.clientHeight}(t)&&i<0?Ne(e):e.stopPropagation())}(t,e)},we||(document.addEventListener("touchmove",Ne,me?{passive:!1}:void 0),we=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},Re=function(e){e?(be=be.filter((function(t){return t.targetElement!==e})),ve&&(e.ontouchstart=null,e.ontouchmove=null,we&&0===be.length&&(document.removeEventListener("touchmove",Ne,me?{passive:!1}:void 0),we=!1)),ve?function(){if(void 0!==ze){var e=-parseInt(document.body.style.top,10),t=-parseInt(document.body.style.left,10);document.body.style.position=ze.position,document.body.style.top=ze.top,document.body.style.left=ze.left,window.scrollTo(t,e),ze=void 0}}():(void 0!==Oe&&(document.body.style.paddingRight=Oe,Oe=void 0),void 0!==xe&&(document.body.style.overflow=xe,xe=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},Ee="PoOhS4FU",We="PcGiiPpV",He="iQZH4Lf-";z(".PoOhS4FU{margin:20px 0 10px;user-select:none}.PcGiiPpV,.PoOhS4FU{position:relative;width:100%}.PcGiiPpV{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}.PcGiiPpV:hover{background-color:#e3e3e3}.iQZH4Lf-{margin-right:8px;user-select:none}");const Le=({element:e,attributes:t,maxSizes:i,children:o,editor:n})=>{const[s,h]=c(null),p=u(null),g=e=>{var t;if(e.stopPropagation(),null!==s)return Re(document.body),void h(null);const i=null===(t=p.current)||void 0===t?void 0:t.getBoundingClientRect();if(i){const e=i.top+i.height+88+20>window.innerHeight,t=!e;console.log({showAtTop:e,showAtBottom:t}),je(document.body,{reserveScrollBarGap:!0}),h({left:i.left,top:e?i.top-88-5:i.top+i.height+5})}};return l("div",Object.assign({className:Ee},t,{contentEditable:!1},{children:[l("div",Object.assign({ref:p},{children:[l("button",Object.assign({className:We,onClick:g},{children:[d(oe,{className:He,width:24,height:24}),d("span",{children:"Click to add embed"})]})),null!==s&&d(ge,{onEmbed:t=>y(void 0,void 0,void 0,(function*(){if(0===t.length)return;const i=(o=t).includes("youtube.com")||o.includes("youtu.be")?"youtube":o.includes("vimeo.com")?"vimeo":o.includes("dailymotion.com")||o.includes("dai.ly")?"dailymotion":o.includes("twitter")?"twitter":o.includes("figma")?"figma":null;var o;let s=null;"youtube"===i?s=(e=>{const t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return t&&11===t[2].length?t[2]:null})(t):"vimeo"===i?s=(e=>new URL(e).pathname.split("/")[1])(t):"dailymotion"===i?s=(e=>{var t=e.match(/^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/);return null!==t?void 0!==t[4]?t[4]:t[2]:null})(t):"twitter"===i?s=function(e){const t=e.match(/\/status\/(\d+)/);return t?t[1]:null}(t):"figma"===i&&(s=function(e){const t=new URL(e).searchParams,i=t.get("node-id");return t.get("node-id")?i:"unknown"}(t)),console.log({provider:i,providerId:s});try{Re(document.body),h(null);const o={data:Object.assign(Object.assign({},e.data),{url:t,size:{width:e.data.size.width,height:e.data.size.height},provider:i,providerId:s})};r.setNodes(n,o,{at:f.findPath(n,e),match:e=>a.isElement(e)&&"embed"===e.type})}catch(e){Re(document.body),h(null)}})),onClose:g,style:s})]})),o]}))};var Pe={root:"s8SlWwrL",resizer:"OLRmQVp3",dotsOptions:"_5qhGnBQW",loadingState:"_0z3X-ysz",extraMargin:"_9GorNz7R",resizeLib:"_6GzVi0JR",leftResizer:"HLz36qUX OLRmQVp3",rightResizer:"Tv1Fs118 OLRmQVp3",resizeItem:"_33V0MBSa",selectImg:"VdsHNo29",selected:"WARAR91D",loader:"_8VNstZwX",dot:"_92ciCRYx"};z(".s8SlWwrL{cursor:pointer;display:block;position:relative}.s8SlWwrL:hover .OLRmQVp3,.s8SlWwrL:hover ._5qhGnBQW{opacity:1}._0z3X-ysz{pointer-events:none}._9GorNz7R{margin:20px 0 30px}._6GzVi0JR{margin:0 auto}.OLRmQVp3{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}.HLz36qUX{left:0;top:0}.Tv1Fs118{right:0;top:0}._33V0MBSa{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}.VdsHNo29{opacity:0}.WARAR91D{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}._8VNstZwX{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}._5qhGnBQW{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}._92ciCRYx{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}");const Ce=265;function ke(e){var o,n,s,h,u;const{element:m,editor:w,plugin:y}=e,x=v(),z=b(),[O,S]=c(null),[N,j]=c({width:(null===(n=null===(o=m.data)||void 0===o?void 0:o.size)||void 0===n?void 0:n.width)||750,height:(null===(h=null===(s=m.data)||void 0===s?void 0:s.size)||void 0===h?void 0:h.height)||440}),R=e=>j(Object.assign(Object.assign({},N),e));p((()=>{var e,t,i,o;m.data&&R({width:(null===(t=null===(e=m.data)||void 0===e?void 0:e.size)||void 0===t?void 0:t.width)||750,height:(null===(o=null===(i=m.data)||void 0===i?void 0:i.size)||void 0===o?void 0:o.height)||440})}),[null===(u=m.data)||void 0===u?void 0:u.size]);const E=g((()=>{var e,t;return{minWidth:300,size:{width:N.width,height:N.height},maxWidth:(null===(e=y.options)||void 0===e?void 0:e.maxWidth)||800,maxHeight:(null===(t=y.options)||void 0===t?void 0:t.maxHeight)||720,lockAspectRatio:!0,resizeRatio:2,enable:{left:!z,right:!z},handleStyles:{left:{left:0},right:{right:0}},onResize:(e,t,i)=>{R({width:i.offsetWidth,height:i.offsetHeight})},onResizeStop:(e,t,i)=>{console.log("image editor editor.children",w.children),console.log("ReactEditor.findPath(editor, element)",f.findPath(w,m)),console.log("element",m),r.setNodes(w,{data:Object.assign(Object.assign({},m.data),{size:{width:i.offsetWidth,height:i.offsetHeight}})},{at:f.findPath(w,m),match:e=>a.isElement(e)&&"embed"===e.type})},handleComponent:{left:d("div",Object.assign({contentEditable:!1,className:Pe.leftResizer},{children:d("div",{className:Pe.resizeItem})})),right:d("div",Object.assign({contentEditable:!1,className:Pe.rightResizer},{children:d("div",{className:Pe.resizeItem})}))}}}),[N.width,N.height,w]),W=()=>{Re(document.body),S(null)},H=e=>{var t;if(null==e||e.stopPropagation(),null!==O)return W();const i=null===(t=null==e?void 0:e.currentTarget)||void 0===t?void 0:t.getBoundingClientRect();if(i){const e=i.top+i.height+164+20>window.innerHeight;je(document.body,{reserveScrollBarGap:!0}),S({left:i.right-i.width+Ce>window.innerWidth?window.innerWidth-Ce-i.width:i.right-i.width,top:e?i.top-82-i.height:i.top+i.height+5})}};if(!m.data.url&&!m.data["data-src"]){const{maxWidth:o=750,maxHeight:n=800}=y.options||{};return l("div",Object.assign({className:Pe.root,contentEditable:!1,draggable:!1},{children:[d("div",{className:i(Pe.selectImg,{[Pe.selected]:x})}),d(Le,Object.assign({attributes:e.attributes,element:m,editor:w,maxSizes:{maxWidth:o,maxHeight:n}},{children:!z&&l("div",{children:[l("button",Object.assign({type:"button",className:Pe.dotsOptions,onClick:H},{children:[d("span",{className:Pe.dot}),d("span",{className:Pe.dot}),d("span",{className:Pe.dot})]})),null!==O&&d(t.ElementOptions,{onClose:W,style:O,element:m,onCopy:W,onDelete:W,onDuplicate:W},m.id)]})})),e.children]}),m.id)}return d("div",Object.assign({contentEditable:!1,draggable:!1,className:Pe.root},{children:l(te,Object.assign({},E,{className:Pe.resizeLib},{children:[y.renderer.render(Object.assign(Object.assign({},e),{size:N})),d("div",{className:i(Pe.selectImg,{[Pe.selected]:x})}),!z&&l("div",{children:[l("button",Object.assign({type:"button",className:Pe.dotsOptions,onClick:H},{children:[d("span",{className:Pe.dot}),d("span",{className:Pe.dot}),d("span",{className:Pe.dot})]})),null!==O&&d(t.ElementOptions,{onClose:W,style:O,element:m,onCopy:W,onDelete:W,onDuplicate:W},m.id)]})]}))}),m.id)}const Me=o({type:"embed",shortcut:"embed",renderer:{editor:(e,t)=>i=>d(ke,Object.assign({editor:e,plugin:t},i)),render:({attributes:t,element:i,children:o,HTMLAttributes:n})=>{if("string"==typeof i.data.provider&&i.data.providerId&&C[i.data.provider]){const s=C[i.data.provider];return l("div",Object.assign({},t,{contentEditable:!1,draggable:!1},n,{className:e({element:i,HTMLAttributes:n,className:P})},{children:[d(s,Object.assign({},i.data,{providerId:i.data.providerId})),o]}))}return i.data.url?l("div",Object.assign({},t,{contentEditable:!1,draggable:!1},n,{className:e({element:i,HTMLAttributes:n,className:P})},{children:[d(j,Object.assign({},i.data,{providerId:i.data.providerId})),o]})):d("div",{})}},extendEditor(e){const{isVoid:t}=e;return e.isVoid=e=>e.type===Me.getPlugin.type||t(e),e},events:{onKeyDown:(e,{defaultNode:t,hotkeys:i})=>o=>{var s;if("embed"===n(e,null===(s=e.selection)||void 0===s?void 0:s.anchor.path,"highest").type&&e.selection)return i.isEnter(o)?(o.preventDefault(),void r.insertNodes(e,t,{mode:"highest"})):void 0}},defineElement:()=>({id:s(),type:"embed",nodeType:"void",data:{url:null,size:{width:"auto",height:"auto"},providerId:null},children:[{text:""}]}),createElement:(e,t)=>{var i;const o=Object.assign(Object.assign({},Me.getPlugin.defineElement()),t);r.setNodes(e,o,{at:null===(i=e.selection)||void 0===i?void 0:i.anchor})},exports:{markdown:{serialize:(e,t)=>`[embed-url](${e.data.url})\n`},html:{serialize:(e,t)=>{var i,o;return`<iframe src="https://player.vimeo.com/video/807053663?badge=0&amp;byline=0&amp;portrait=0&amp;title=0" frameborder="0" height="${null===(i=e.data.size)||void 0===i?void 0:i.height}" width="${null===(o=e.data.size)||void 0===o?void 0:o.width}" allowfullscreen="" url="https://vimeo.com/807053663" provider="${e.data.provider||""}" />`},deserialize:{nodeName:"IFRAME",parse:e=>({url:e.getAttribute("src"),size:{height:"string"==typeof e.getAttribute("height")?Number(e.getAttribute("height")):"auto",width:"string"==typeof e.getAttribute("width")?Number(e.getAttribute("width")):"auto"}})}}},options:{searchString:"Embed media",displayLabel:"Embed"}});export{Me as default};
+import { getElementClassname, UI_HELPERS, cx, createYooptaPlugin, getElementByPath, generateId } from '@yoopta/editor';
+import { Transforms, Element } from 'slate';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import { ReactEditor, useSelected, useReadOnly } from 'slate-react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/**
+ *
+ * @param {DOM Ref} elementRef - DOM ref for checking the intersection
+ * @param {Observer Params} - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+ * @returns {IntersectionObserverEntry} - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
+ */
+function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false } = {}) {
+    const [entry, setEntry] = useState({});
+    const frozen = entry.isIntersecting && freezeOnceVisible;
+    const updateEntry = ([e]) => setEntry(e);
+    useEffect(() => {
+        const node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+        const hasNotIOSupport = !window.IntersectionObserver;
+        if (hasNotIOSupport || frozen || !node)
+            return;
+        const observerParams = { threshold, root, rootMargin };
+        const observer = new IntersectionObserver(updateEntry, observerParams);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [elementRef, threshold, root, rootMargin, frozen]);
+    return entry;
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$9 = ".DayliMotion-module_root{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.DayliMotion-module_iframe{background-color:#fff}.DayliMotion-module_container,.DayliMotion-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.DayliMotion-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.DayliMotion-module_embed{height:100%;position:relative;width:100%}";
+var s$9 = {"root":"DayliMotion-module_root","iframe":"DayliMotion-module_iframe","container":"DayliMotion-module_container","iframePreview":"DayliMotion-module_iframePreview","embed":"DayliMotion-module_embed"};
+styleInject(css_248z$9);
+
+const getDayliMotionAPI = (providerId) => `https://api.dailymotion.com/video/${providerId}?fields=thumbnail_url`;
+function DailyMotion(_a) {
+    var { providerId } = _a, other = __rest(_a, ["providerId"]);
+    const dailyMotionRootRef = useRef(null);
+    const [src, setSrc] = useState(null);
+    const [isFrameLoaded, setFrameLoaded] = useState(false);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(dailyMotionRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    useEffect(() => {
+        fetch(getDayliMotionAPI(providerId))
+            .then((data) => data.json())
+            .then((data) => setSrc(data.thumbnail_url))
+            .catch(() => setSrc(null));
+    }, [providerId]);
+    return (jsx("div", Object.assign({ className: s$9.root, ref: dailyMotionRootRef }, { children: jsx("div", Object.assign({ className: s$9.container }, { children: jsxs("div", Object.assign({ className: s$9.embed }, { children: [jsx("img", { src: src || '', alt: "daylimotion_video_preview", width: "100%", height: "100%", className: s$9.iframePreview, style: {
+                            opacity: isInViewport && isFrameLoaded ? 0 : 1,
+                            zIndex: isInViewport && isFrameLoaded ? -1 : 0,
+                        } }), isInViewport && (jsx("iframe", Object.assign({ title: "Dailymotion Video Player", frameBorder: 0, onLoad: () => setFrameLoaded(true), src: `https://www.dailymotion.com/embed/video/${providerId}`, allowFullScreen: true, className: s$9.iframe }, other)))] })) })) })));
+}
+
+var css_248z$8 = ".DefaultEmbed-module_root{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.DefaultEmbed-module_iframe{background-color:#fff}.DefaultEmbed-module_container,.DefaultEmbed-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.DefaultEmbed-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.DefaultEmbed-module_embed{height:100%;position:relative;width:100%}";
+var s$8 = {"root":"DefaultEmbed-module_root","iframe":"DefaultEmbed-module_iframe","container":"DefaultEmbed-module_container","iframePreview":"DefaultEmbed-module_iframePreview","embed":"DefaultEmbed-module_embed"};
+styleInject(css_248z$8);
+
+function DefaultEmbed(_a) {
+    var { providerId, url } = _a; __rest(_a, ["providerId", "url"]);
+    const embedRootRef = useRef(null);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(embedRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    return (jsx("div", Object.assign({ className: s$8.root, ref: embedRootRef }, { children: jsx("div", Object.assign({ className: s$8.container }, { children: jsx("div", Object.assign({ className: s$8.embed }, { children: isInViewport && jsx("iframe", { src: url, frameBorder: 0, allowFullScreen: true, className: s$8.iframe, height: "450px" }) })) })) })));
+}
+
+var css_248z$7 = ".FigmaEmbed-module_root{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.FigmaEmbed-module_iframe{background-color:#fff}.FigmaEmbed-module_container,.FigmaEmbed-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.FigmaEmbed-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.FigmaEmbed-module_embed{height:100%;position:relative;width:100%}";
+var s$7 = {"root":"FigmaEmbed-module_root","iframe":"FigmaEmbed-module_iframe","container":"FigmaEmbed-module_container","iframePreview":"FigmaEmbed-module_iframePreview","embed":"FigmaEmbed-module_embed"};
+styleInject(css_248z$7);
+
+function FigmaEmbed(_a) {
+    var { providerId, url } = _a; __rest(_a, ["providerId", "url"]);
+    const figmaRootRef = useRef(null);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(figmaRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    return (jsx("div", Object.assign({ className: s$7.root, ref: figmaRootRef }, { children: jsx("div", Object.assign({ className: s$7.container }, { children: jsx("div", Object.assign({ className: s$7.embed }, { children: isInViewport && (jsx("iframe", { src: `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`, frameBorder: 0, allowFullScreen: true, className: s$7.iframe, height: "450px" })) })) })) })));
+}
+
+var css_248z$6 = ".TweetEmbed-module_root{display:flex;height:100%;justify-content:center;min-height:100px;padding-bottom:86%;position:relative;width:100%}.TweetEmbed-module_iframe{background-color:#fff}.TweetEmbed-module_container,.TweetEmbed-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.TweetEmbed-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.TweetEmbed-module_embed{height:100%;position:relative;width:100%}.TweetEmbed-module_embed>div,.TweetEmbed-module_embed>div>div{height:100%}.TweetEmbed-module_embed iframe{height:100%!important;width:100%!important}";
+var s$6 = {"root":"TweetEmbed-module_root","iframe":"TweetEmbed-module_iframe","container":"TweetEmbed-module_container","iframePreview":"TweetEmbed-module_iframePreview","embed":"TweetEmbed-module_embed"};
+styleInject(css_248z$6);
+
+function TweetEmbed({ providerId }) {
+    const twitterRootRef = useRef(null);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(twitterRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    useEffect(() => {
+        var _a;
+        if (!isInViewport)
+            return;
+        const script = document.createElement('script');
+        script.src = 'https://platform.twitter.com/widgets.js';
+        (_a = twitterRootRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(script);
+        script.onload = () => {
+            if (window.twttr) {
+                window.twttr.widgets.createTweet(providerId, document.getElementById(providerId), {
+                    align: 'center',
+                    conversation: 'none',
+                    dnt: true,
+                    theme: 'dark',
+                    height: 300,
+                });
+            }
+        };
+    }, [providerId, isInViewport]);
+    return (jsx("div", Object.assign({ className: s$6.root, ref: twitterRootRef }, { children: jsx("div", Object.assign({ className: s$6.container }, { children: jsx("div", Object.assign({ className: s$6.embed }, { children: jsx("div", { id: providerId }) })) })) })));
+}
+
+var css_248z$5 = ".VimeoPlayer-module_root{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.VimeoPlayer-module_iframe{background-color:#fff}.VimeoPlayer-module_container,.VimeoPlayer-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.VimeoPlayer-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.VimeoPlayer-module_embed{height:100%;position:relative;width:100%}";
+var s$5 = {"root":"VimeoPlayer-module_root","iframe":"VimeoPlayer-module_iframe","container":"VimeoPlayer-module_container","iframePreview":"VimeoPlayer-module_iframePreview","embed":"VimeoPlayer-module_embed"};
+styleInject(css_248z$5);
+
+const VIMEO_API_URI = 'https://vimeo.com/api/v2/video';
+function VimeoPlayer(_a) {
+    var { providerId } = _a, other = __rest(_a, ["providerId"]);
+    const vimeoRootRef = useRef(null);
+    const [src, setSrc] = useState(null);
+    const [isFrameLoaded, setFrameLoaded] = useState(false);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(vimeoRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    useEffect(() => {
+        fetch(`${VIMEO_API_URI}/${providerId}.json`)
+            .then((data) => data.json())
+            .then((data) => setSrc(data[0].thumbnail_medium))
+            .catch(() => setSrc(null));
+    }, [providerId]);
+    return (jsx("div", Object.assign({ className: s$5.root, ref: vimeoRootRef }, { children: jsx("div", Object.assign({ className: s$5.container }, { children: jsxs("div", Object.assign({ className: s$5.embed }, { children: [jsx("img", { src: src || '', alt: "vimeo_video_preview", width: "100%", height: "100%", className: s$5.iframePreview, style: {
+                            opacity: isInViewport && isFrameLoaded ? 0 : 1,
+                            zIndex: isInViewport && isFrameLoaded ? -1 : 0,
+                        } }), isInViewport && (jsx("iframe", Object.assign({ title: "Vimeo Player", 
+                        // https://developer.vimeo.com/player/embedding
+                        src: `https://player.vimeo.com/video/${providerId}?badge=0&byline=0&portrait=0&title=0`, frameBorder: 0, allowFullScreen: true, onLoad: () => setFrameLoaded(true), className: s$5.iframe }, other)))] })) })) })));
+}
+
+var css_248z$4 = ".YoutubePlayer-module_root{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.YoutubePlayer-module_iframe{background-color:#fff}.YoutubePlayer-module_container,.YoutubePlayer-module_iframe{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.YoutubePlayer-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.YoutubePlayer-module_embed{height:100%;position:relative;width:100%}";
+var s$4 = {"root":"YoutubePlayer-module_root","iframe":"YoutubePlayer-module_iframe","container":"YoutubePlayer-module_container","iframePreview":"YoutubePlayer-module_iframePreview","embed":"YoutubePlayer-module_embed"};
+styleInject(css_248z$4);
+
+function YouTubePlayer(_a) {
+    var { providerId } = _a, other = __rest(_a, ["providerId"]);
+    const youtubeRootRef = useRef(null);
+    const [isFrameLoaded, setFrameLoaded] = useState(false);
+    const { isIntersecting: isInViewport } = useIntersectionObserver(youtubeRootRef, {
+        freezeOnceVisible: true,
+        rootMargin: '50%',
+    });
+    return (jsx("div", Object.assign({ className: s$4.root, ref: youtubeRootRef }, { children: jsx("div", Object.assign({ className: s$4.container }, { children: jsxs("div", Object.assign({ className: s$4.embed }, { children: [jsx("img", { src: `https://i.ytimg.com/vi/${providerId}/default.jpg`, alt: "youtube_video_preview", width: "100%", height: "100%", className: s$4.iframePreview, style: {
+                            opacity: isInViewport && isFrameLoaded ? 0 : 1,
+                            zIndex: isInViewport && isFrameLoaded ? -1 : 0,
+                        } }), isInViewport && (jsx("iframe", Object.assign({ title: "Youtube Player", 
+                        // https://developers.google.com/youtube/player_parameters?hl=en
+                        src: `https://www.youtube.com/embed/${providerId}?hl=no&rel=0`, frameBorder: 0, onLoad: () => setFrameLoaded(true), allowFullScreen: true, className: s$4.iframe }, other)))] })) })) })));
+}
+
+var css_248z$3 = ".Embed-module_embedElement{margin:20px 0 10px;position:relative}";
+var s$3 = {"embedElement":"Embed-module_embedElement"};
+styleInject(css_248z$3);
+
+const PROVIDERS = {
+    vimeo: VimeoPlayer,
+    youtube: YouTubePlayer,
+    dailymotion: DailyMotion,
+    twitter: TweetEmbed,
+    figma: FigmaEmbed,
+};
+const Embed$1 = ({ attributes, element, children, HTMLAttributes }) => {
+    if (typeof element.data.provider === 'string' && element.data.providerId && PROVIDERS[element.data.provider]) {
+        const ProviderComponent = PROVIDERS[element.data.provider];
+        return (jsxs("div", Object.assign({}, attributes, { contentEditable: false, draggable: false }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$3.embedElement }) }, { children: [jsx(ProviderComponent, Object.assign({}, element.data, { providerId: element.data.providerId })), children] })));
+    }
+    if (!element.data.url)
+        return jsx("div", {});
+    return (jsxs("div", Object.assign({}, attributes, { contentEditable: false, draggable: false }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$3.embedElement }) }, { children: [jsx(DefaultEmbed, Object.assign({}, element.data, { providerId: element.data.providerId })), children] })));
+};
+
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+var rowSizeBase = {
+    width: '100%',
+    height: '10px',
+    top: '0px',
+    left: '0px',
+    cursor: 'row-resize',
+};
+var colSizeBase = {
+    width: '10px',
+    height: '100%',
+    top: '0px',
+    left: '0px',
+    cursor: 'col-resize',
+};
+var edgeBase = {
+    width: '20px',
+    height: '20px',
+    position: 'absolute',
+};
+var styles = {
+    top: __assign$1(__assign$1({}, rowSizeBase), { top: '-5px' }),
+    right: __assign$1(__assign$1({}, colSizeBase), { left: undefined, right: '-5px' }),
+    bottom: __assign$1(__assign$1({}, rowSizeBase), { top: undefined, bottom: '-5px' }),
+    left: __assign$1(__assign$1({}, colSizeBase), { left: '-5px' }),
+    topRight: __assign$1(__assign$1({}, edgeBase), { right: '-10px', top: '-10px', cursor: 'ne-resize' }),
+    bottomRight: __assign$1(__assign$1({}, edgeBase), { right: '-10px', bottom: '-10px', cursor: 'se-resize' }),
+    bottomLeft: __assign$1(__assign$1({}, edgeBase), { left: '-10px', bottom: '-10px', cursor: 'sw-resize' }),
+    topLeft: __assign$1(__assign$1({}, edgeBase), { left: '-10px', top: '-10px', cursor: 'nw-resize' }),
+};
+var Resizer = /** @class */ (function (_super) {
+    __extends$1(Resizer, _super);
+    function Resizer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onMouseDown = function (e) {
+            _this.props.onResizeStart(e, _this.props.direction);
+        };
+        _this.onTouchStart = function (e) {
+            _this.props.onResizeStart(e, _this.props.direction);
+        };
+        return _this;
+    }
+    Resizer.prototype.render = function () {
+        return (React.createElement("div", { className: this.props.className || '', style: __assign$1(__assign$1({ position: 'absolute', userSelect: 'none' }, styles[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children));
+    };
+    return Resizer;
+}(React.PureComponent));
+
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var DEFAULT_SIZE = {
+    width: 'auto',
+    height: 'auto',
+};
+var clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); };
+var snap = function (n, size) { return Math.round(n / size) * size; };
+var hasDirection = function (dir, target) {
+    return new RegExp(dir, 'i').test(target);
+};
+// INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`.
+var isTouchEvent = function (event) {
+    return Boolean(event.touches && event.touches.length);
+};
+var isMouseEvent = function (event) {
+    return Boolean((event.clientX || event.clientX === 0) &&
+        (event.clientY || event.clientY === 0));
+};
+var findClosestSnap = function (n, snapArray, snapGap) {
+    if (snapGap === void 0) { snapGap = 0; }
+    var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0);
+    var gap = Math.abs(snapArray[closestGapIndex] - n);
+    return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
+};
+var getStringSize = function (n) {
+    n = n.toString();
+    if (n === 'auto') {
+        return n;
+    }
+    if (n.endsWith('px')) {
+        return n;
+    }
+    if (n.endsWith('%')) {
+        return n;
+    }
+    if (n.endsWith('vh')) {
+        return n;
+    }
+    if (n.endsWith('vw')) {
+        return n;
+    }
+    if (n.endsWith('vmax')) {
+        return n;
+    }
+    if (n.endsWith('vmin')) {
+        return n;
+    }
+    return n + "px";
+};
+var getPixelSize = function (size, parentSize, innerWidth, innerHeight) {
+    if (size && typeof size === 'string') {
+        if (size.endsWith('px')) {
+            return Number(size.replace('px', ''));
+        }
+        if (size.endsWith('%')) {
+            var ratio = Number(size.replace('%', '')) / 100;
+            return parentSize * ratio;
+        }
+        if (size.endsWith('vw')) {
+            var ratio = Number(size.replace('vw', '')) / 100;
+            return innerWidth * ratio;
+        }
+        if (size.endsWith('vh')) {
+            var ratio = Number(size.replace('vh', '')) / 100;
+            return innerHeight * ratio;
+        }
+    }
+    return size;
+};
+var calculateNewMax = function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) {
+    maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
+    maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
+    minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
+    minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
+    return {
+        maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
+        maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
+        minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
+        minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
+    };
+};
+var definedProps = [
+    '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',
+];
+// HACK: This class is used to calculate % size.
+var baseClassName = '__resizable_base__';
+var Resizable = /** @class */ (function (_super) {
+    __extends(Resizable, _super);
+    function Resizable(props) {
+        var _this = _super.call(this, props) || this;
+        _this.ratio = 1;
+        _this.resizable = null;
+        // For parent boundary
+        _this.parentLeft = 0;
+        _this.parentTop = 0;
+        // For boundary
+        _this.resizableLeft = 0;
+        _this.resizableRight = 0;
+        _this.resizableTop = 0;
+        _this.resizableBottom = 0;
+        // For target boundary
+        _this.targetLeft = 0;
+        _this.targetTop = 0;
+        _this.appendBase = function () {
+            if (!_this.resizable || !_this.window) {
+                return null;
+            }
+            var parent = _this.parentNode;
+            if (!parent) {
+                return null;
+            }
+            var element = _this.window.document.createElement('div');
+            element.style.width = '100%';
+            element.style.height = '100%';
+            element.style.position = 'absolute';
+            element.style.transform = 'scale(0, 0)';
+            element.style.left = '0';
+            element.style.flex = '0 0 100%';
+            if (element.classList) {
+                element.classList.add(baseClassName);
+            }
+            else {
+                element.className += baseClassName;
+            }
+            parent.appendChild(element);
+            return element;
+        };
+        _this.removeBase = function (base) {
+            var parent = _this.parentNode;
+            if (!parent) {
+                return;
+            }
+            parent.removeChild(base);
+        };
+        _this.ref = function (c) {
+            if (c) {
+                _this.resizable = c;
+            }
+        };
+        _this.state = {
+            isResizing: false,
+            width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined'
+                ? 'auto'
+                : _this.propsSize && _this.propsSize.width,
+            height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined'
+                ? 'auto'
+                : _this.propsSize && _this.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: undefined,
+        };
+        _this.onResizeStart = _this.onResizeStart.bind(_this);
+        _this.onMouseMove = _this.onMouseMove.bind(_this);
+        _this.onMouseUp = _this.onMouseUp.bind(_this);
+        return _this;
+    }
+    Object.defineProperty(Resizable.prototype, "parentNode", {
+        get: function () {
+            if (!this.resizable) {
+                return null;
+            }
+            return this.resizable.parentNode;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizable.prototype, "window", {
+        get: function () {
+            if (!this.resizable) {
+                return null;
+            }
+            if (!this.resizable.ownerDocument) {
+                return null;
+            }
+            return this.resizable.ownerDocument.defaultView;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizable.prototype, "propsSize", {
+        get: function () {
+            return this.props.size || this.props.defaultSize || DEFAULT_SIZE;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizable.prototype, "size", {
+        get: function () {
+            var width = 0;
+            var height = 0;
+            if (this.resizable && this.window) {
+                var orgWidth = this.resizable.offsetWidth;
+                var orgHeight = this.resizable.offsetHeight;
+                // HACK: Set position `relative` to get parent size.
+                //       This is because when re-resizable set `absolute`, I can not get base width correctly.
+                var orgPosition = this.resizable.style.position;
+                if (orgPosition !== 'relative') {
+                    this.resizable.style.position = 'relative';
+                }
+                // INFO: Use original width or height if set auto.
+                width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;
+                height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;
+                // Restore original position
+                this.resizable.style.position = orgPosition;
+            }
+            return { width: width, height: height };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizable.prototype, "sizeStyle", {
+        get: function () {
+            var _this = this;
+            var size = this.props.size;
+            var getSize = function (key) {
+                if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') {
+                    return 'auto';
+                }
+                if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) {
+                    if (_this.state[key].toString().endsWith('%')) {
+                        return _this.state[key].toString();
+                    }
+                    var parentSize = _this.getParentSize();
+                    var value = Number(_this.state[key].toString().replace('px', ''));
+                    var percent = (value / parentSize[key]) * 100;
+                    return percent + "%";
+                }
+                return getStringSize(_this.state[key]);
+            };
+            var width = size && typeof size.width !== 'undefined' && !this.state.isResizing
+                ? getStringSize(size.width)
+                : getSize('width');
+            var height = size && typeof size.height !== 'undefined' && !this.state.isResizing
+                ? getStringSize(size.height)
+                : getSize('height');
+            return { width: width, height: height };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Resizable.prototype.getParentSize = function () {
+        if (!this.parentNode) {
+            if (!this.window) {
+                return { width: 0, height: 0 };
+            }
+            return { width: this.window.innerWidth, height: this.window.innerHeight };
+        }
+        var base = this.appendBase();
+        if (!base) {
+            return { width: 0, height: 0 };
+        }
+        // INFO: To calculate parent width with flex layout
+        var wrapChanged = false;
+        var wrap = this.parentNode.style.flexWrap;
+        if (wrap !== 'wrap') {
+            wrapChanged = true;
+            this.parentNode.style.flexWrap = 'wrap';
+            // HACK: Use relative to get parent padding size
+        }
+        base.style.position = 'relative';
+        base.style.minWidth = '100%';
+        base.style.minHeight = '100%';
+        var size = {
+            width: base.offsetWidth,
+            height: base.offsetHeight,
+        };
+        if (wrapChanged) {
+            this.parentNode.style.flexWrap = wrap;
+        }
+        this.removeBase(base);
+        return size;
+    };
+    Resizable.prototype.bindEvents = function () {
+        if (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: true,
+                passive: false,
+            });
+            this.window.addEventListener('touchend', this.onMouseUp);
+        }
+    };
+    Resizable.prototype.unbindEvents = function () {
+        if (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, true);
+            this.window.removeEventListener('touchend', this.onMouseUp);
+        }
+    };
+    Resizable.prototype.componentDidMount = function () {
+        if (!this.resizable || !this.window) {
+            return;
+        }
+        var computedStyle = this.window.getComputedStyle(this.resizable);
+        this.setState({
+            width: this.state.width || this.size.width,
+            height: this.state.height || this.size.height,
+            flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined,
+        });
+    };
+    Resizable.prototype.componentWillUnmount = function () {
+        if (this.window) {
+            this.unbindEvents();
+        }
+    };
+    Resizable.prototype.createSizeForCssProperty = function (newSize, kind) {
+        var propsSize = this.propsSize && this.propsSize[kind];
+        return this.state[kind] === 'auto' &&
+            this.state.original[kind] === newSize &&
+            (typeof propsSize === 'undefined' || propsSize === 'auto')
+            ? 'auto'
+            : newSize;
+    };
+    Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
+        var boundsByDirection = this.props.boundsByDirection;
+        var direction = this.state.direction;
+        var widthByDirection = boundsByDirection && hasDirection('left', direction);
+        var heightByDirection = boundsByDirection && hasDirection('top', direction);
+        var boundWidth;
+        var boundHeight;
+        if (this.props.bounds === 'parent') {
+            var parent_1 = this.parentNode;
+            if (parent_1) {
+                boundWidth = widthByDirection
+                    ? this.resizableRight - this.parentLeft
+                    : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft);
+                boundHeight = heightByDirection
+                    ? this.resizableBottom - this.parentTop
+                    : parent_1.offsetHeight + (this.parentTop - this.resizableTop);
+            }
+        }
+        else if (this.props.bounds === 'window') {
+            if (this.window) {
+                boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft;
+                boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop;
+            }
+        }
+        else if (this.props.bounds) {
+            boundWidth = widthByDirection
+                ? this.resizableRight - this.targetLeft
+                : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
+            boundHeight = heightByDirection
+                ? this.resizableBottom - this.targetTop
+                : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
+        }
+        if (boundWidth && Number.isFinite(boundWidth)) {
+            maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
+        }
+        if (boundHeight && Number.isFinite(boundHeight)) {
+            maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+        }
+        return { maxWidth: maxWidth, maxHeight: maxHeight };
+    };
+    Resizable.prototype.calculateNewSizeFromDirection = function (clientX, clientY) {
+        var scale = this.props.scale || 1;
+        var resizeRatio = this.props.resizeRatio || 1;
+        var _a = this.state, direction = _a.direction, original = _a.original;
+        var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
+        var newWidth = original.width;
+        var newHeight = original.height;
+        var extraHeight = lockAspectRatioExtraHeight || 0;
+        var extraWidth = lockAspectRatioExtraWidth || 0;
+        if (hasDirection('right', direction)) {
+            newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
+            if (lockAspectRatio) {
+                newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
+            }
+        }
+        if (hasDirection('left', direction)) {
+            newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
+            if (lockAspectRatio) {
+                newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
+            }
+        }
+        if (hasDirection('bottom', direction)) {
+            newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
+            if (lockAspectRatio) {
+                newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
+            }
+        }
+        if (hasDirection('top', direction)) {
+            newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
+            if (lockAspectRatio) {
+                newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
+            }
+        }
+        return { newWidth: newWidth, newHeight: newHeight };
+    };
+    Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) {
+        var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth;
+        var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width;
+        var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;
+        var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height;
+        var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;
+        var extraHeight = lockAspectRatioExtraHeight || 0;
+        var extraWidth = lockAspectRatioExtraWidth || 0;
+        if (lockAspectRatio) {
+            var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth;
+            var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth;
+            var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight;
+            var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight;
+            var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
+            var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
+            var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
+            var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
+            newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
+            newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
+        }
+        else {
+            newWidth = clamp(newWidth, computedMinWidth, computedMaxWidth);
+            newHeight = clamp(newHeight, computedMinHeight, computedMaxHeight);
+        }
+        return { newWidth: newWidth, newHeight: newHeight };
+    };
+    Resizable.prototype.setBoundingClientRect = function () {
+        // For parent boundary
+        if (this.props.bounds === 'parent') {
+            var parent_2 = this.parentNode;
+            if (parent_2) {
+                var parentRect = parent_2.getBoundingClientRect();
+                this.parentLeft = parentRect.left;
+                this.parentTop = parentRect.top;
+            }
+        }
+        // For target(html element) boundary
+        if (this.props.bounds && typeof this.props.bounds !== 'string') {
+            var targetRect = this.props.bounds.getBoundingClientRect();
+            this.targetLeft = targetRect.left;
+            this.targetTop = targetRect.top;
+        }
+        // For boundary
+        if (this.resizable) {
+            var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom;
+            this.resizableLeft = left;
+            this.resizableRight = right;
+            this.resizableTop = top_1;
+            this.resizableBottom = bottom;
+        }
+    };
+    Resizable.prototype.onResizeStart = function (event, direction) {
+        if (!this.resizable || !this.window) {
+            return;
+        }
+        var clientX = 0;
+        var clientY = 0;
+        if (event.nativeEvent && isMouseEvent(event.nativeEvent)) {
+            clientX = event.nativeEvent.clientX;
+            clientY = event.nativeEvent.clientY;
+        }
+        else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) {
+            clientX = event.nativeEvent.touches[0].clientX;
+            clientY = event.nativeEvent.touches[0].clientY;
+        }
+        if (this.props.onResizeStart) {
+            if (this.resizable) {
+                var startResize = this.props.onResizeStart(event, direction, this.resizable);
+                if (startResize === false) {
+                    return;
+                }
+            }
+        }
+        // Fix #168
+        if (this.props.size) {
+            if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {
+                this.setState({ height: this.props.size.height });
+            }
+            if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {
+                this.setState({ width: this.props.size.width });
+            }
+        }
+        // For lockAspectRatio case
+        this.ratio =
+            typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height;
+        var flexBasis;
+        var computedStyle = this.window.getComputedStyle(this.resizable);
+        if (computedStyle.flexBasis !== 'auto') {
+            var parent_3 = this.parentNode;
+            if (parent_3) {
+                var dir = this.window.getComputedStyle(parent_3).flexDirection;
+                this.flexDir = dir.startsWith('row') ? 'row' : 'column';
+                flexBasis = computedStyle.flexBasis;
+            }
+        }
+        // For boundary
+        this.setBoundingClientRect();
+        this.bindEvents();
+        var state = {
+            original: {
+                x: clientX,
+                y: clientY,
+                width: this.size.width,
+                height: this.size.height,
+            },
+            isResizing: true,
+            backgroundStyle: __assign(__assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }),
+            direction: direction,
+            flexBasis: flexBasis,
+        };
+        this.setState(state);
+    };
+    Resizable.prototype.onMouseMove = function (event) {
+        var _this = this;
+        if (!this.state.isResizing || !this.resizable || !this.window) {
+            return;
+        }
+        if (this.window.TouchEvent && isTouchEvent(event)) {
+            try {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            catch (e) {
+                // Ignore on fail
+            }
+        }
+        var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight;
+        var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX;
+        var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY;
+        var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height;
+        var parentSize = this.getParentSize();
+        var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight);
+        maxWidth = max.maxWidth;
+        maxHeight = max.maxHeight;
+        minWidth = max.minWidth;
+        minHeight = max.minHeight;
+        // Calculate new size
+        var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth;
+        // Calculate max size from boundary settings
+        var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);
+        if (this.props.snap && this.props.snap.x) {
+            newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);
+        }
+        if (this.props.snap && this.props.snap.y) {
+            newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);
+        }
+        // Calculate new size from aspect ratio
+        var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight });
+        newWidth = newSize.newWidth;
+        newHeight = newSize.newHeight;
+        if (this.props.grid) {
+            var newGridWidth = snap(newWidth, this.props.grid[0]);
+            var newGridHeight = snap(newHeight, this.props.grid[1]);
+            var gap = this.props.snapGap || 0;
+            newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
+            newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
+        }
+        var delta = {
+            width: newWidth - original.width,
+            height: newHeight - original.height,
+        };
+        if (width && typeof width === 'string') {
+            if (width.endsWith('%')) {
+                var percent = (newWidth / parentSize.width) * 100;
+                newWidth = percent + "%";
+            }
+            else if (width.endsWith('vw')) {
+                var vw = (newWidth / this.window.innerWidth) * 100;
+                newWidth = vw + "vw";
+            }
+            else if (width.endsWith('vh')) {
+                var vh = (newWidth / this.window.innerHeight) * 100;
+                newWidth = vh + "vh";
+            }
+        }
+        if (height && typeof height === 'string') {
+            if (height.endsWith('%')) {
+                var percent = (newHeight / parentSize.height) * 100;
+                newHeight = percent + "%";
+            }
+            else if (height.endsWith('vw')) {
+                var vw = (newHeight / this.window.innerWidth) * 100;
+                newHeight = vw + "vw";
+            }
+            else if (height.endsWith('vh')) {
+                var vh = (newHeight / this.window.innerHeight) * 100;
+                newHeight = vh + "vh";
+            }
+        }
+        var newState = {
+            width: this.createSizeForCssProperty(newWidth, 'width'),
+            height: this.createSizeForCssProperty(newHeight, 'height'),
+        };
+        if (this.flexDir === 'row') {
+            newState.flexBasis = newState.width;
+        }
+        else if (this.flexDir === 'column') {
+            newState.flexBasis = newState.height;
+        }
+        // For v18, update state sync
+        flushSync(function () {
+            _this.setState(newState);
+        });
+        if (this.props.onResize) {
+            this.props.onResize(event, direction, this.resizable, delta);
+        }
+    };
+    Resizable.prototype.onMouseUp = function (event) {
+        var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original;
+        if (!isResizing || !this.resizable) {
+            return;
+        }
+        var delta = {
+            width: this.size.width - original.width,
+            height: this.size.height - original.height,
+        };
+        if (this.props.onResizeStop) {
+            this.props.onResizeStop(event, direction, this.resizable, delta);
+        }
+        if (this.props.size) {
+            this.setState(this.props.size);
+        }
+        this.unbindEvents();
+        this.setState({
+            isResizing: false,
+            backgroundStyle: __assign(__assign({}, this.state.backgroundStyle), { cursor: 'auto' }),
+        });
+    };
+    Resizable.prototype.updateSize = function (size) {
+        this.setState({ width: size.width, height: size.height });
+    };
+    Resizable.prototype.renderResizer = function () {
+        var _this = this;
+        var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
+        if (!enable) {
+            return null;
+        }
+        var resizers = Object.keys(enable).map(function (dir) {
+            if (enable[dir] !== false) {
+                return (React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null));
+            }
+            return null;
+        });
+        // #93 Wrap the resize box in span (will not break 100% width/height)
+        return (React.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers));
+    };
+    Resizable.prototype.render = function () {
+        var _this = this;
+        var extendsProps = Object.keys(this.props).reduce(function (acc, key) {
+            if (definedProps.indexOf(key) !== -1) {
+                return acc;
+            }
+            acc[key] = _this.props[key];
+            return acc;
+        }, {});
+        var style = __assign(__assign(__assign({ 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 });
+        if (this.state.flexBasis) {
+            style.flexBasis = this.state.flexBasis;
+        }
+        var Wrapper = this.props.as || 'div';
+        return (React.createElement(Wrapper, __assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps),
+            this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }),
+            this.props.children,
+            this.renderResizer()));
+    };
+    Resizable.defaultProps = {
+        as: 'div',
+        onResizeStart: function () { },
+        onResize: function () { },
+        onResizeStop: function () { },
+        enable: {
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            topRight: true,
+            bottomRight: true,
+            bottomLeft: true,
+            topLeft: true,
+        },
+        style: {},
+        grid: [1, 1],
+        lockAspectRatio: false,
+        lockAspectRatioExtraWidth: 0,
+        lockAspectRatioExtraHeight: 0,
+        scale: 1,
+        resizeRatio: 1,
+        snapGap: 0,
+    };
+    return Resizable;
+}(React.PureComponent));
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgUpload = function SvgUpload(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    "data-testid": "uploadImage"
+  }, props), _path || (_path = /*#__PURE__*/React.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"
+  })));
+};
+
+var css_248z$2 = ".EditorUploader-module_container{position:fixed}.EditorUploader-module_content{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}.EditorUploader-module_tabs{box-shadow:inset 0 -1px 0 rgba(55,53,47,.09);display:flex;font-size:14px;height:40px;padding:0 8px;position:relative;width:100%;z-index:1}.EditorUploader-module_tab{align-items:center;background-color:inherit;border:none;border-radius:4px;color:#37352f;cursor:pointer;display:inline-flex;flex-shrink:0;font-size:14px;height:100%;line-height:1.2;min-width:0;padding:6px 8px;position:relative;transition:height 20ms ease-in 0s;user-select:none;white-space:nowrap}.EditorUploader-module_activeTab:after{background-color:#37352f;bottom:0;content:\"\";height:2px;left:0;position:absolute;width:100%}.EditorUploader-module_uploadContent{display:flex;justify-content:center;margin-left:12px;margin-right:12px;margin-top:4px;padding-bottom:6px;padding-top:6px}.EditorUploader-module_uploader{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%}.EditorUploader-module_embed{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.EditorUploader-module_uploaderLabel{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%}.EditorUploader-module_uploaderInput{left:0;position:absolute;top:0;visibility:hidden}.EditorUploader-module_embedInput{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}.EditorUploader-module_embedButton,.EditorUploader-module_embedInput{align-items:center;border:none;border-radius:4px;display:flex;font-size:14px;width:100%}.EditorUploader-module_embedButton{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}";
+var s$2 = {"container":"EditorUploader-module_container","content":"EditorUploader-module_content","tabs":"EditorUploader-module_tabs","tab":"EditorUploader-module_tab","activeTab":"EditorUploader-module_activeTab","uploadContent":"EditorUploader-module_uploadContent","uploader":"EditorUploader-module_uploader","embed":"EditorUploader-module_embed EditorUploader-module_uploader","uploaderLabel":"EditorUploader-module_uploaderLabel","uploaderInput":"EditorUploader-module_uploaderInput","embedInput":"EditorUploader-module_embedInput","embedButton":"EditorUploader-module_embedButton"};
+styleInject(css_248z$2);
+
+const EmbedLink = ({ onEmbed }) => {
+    const [value, setValue] = useState('');
+    const onChange = (e) => setValue(e.target.value);
+    const onEmbedLink = () => onEmbed(value);
+    return (jsxs("div", Object.assign({ className: s$2.embed }, { children: [jsx("input", { type: "text", placeholder: "Paste embed link", value: value, className: s$2.embedInput, onChange: onChange }), jsx("button", Object.assign({ type: "button", className: s$2.embedButton, onClick: onEmbedLink }, { children: "Embed" }))] })));
+};
+const EditorUploader = ({ style, onEmbed, onClose }) => {
+    return (jsxs(UI_HELPERS.Overlay, Object.assign({ onClose: onClose }, { children: [jsx("div", Object.assign({ className: s$2.container, style: style }, { children: jsxs("div", Object.assign({ className: s$2.content }, { children: [jsx("div", Object.assign({ className: s$2.tabs }, { children: jsx("button", Object.assign({ type: "button", className: cx(s$2.tab, { [s$2.activeTab]: true }) }, { children: "Embed link" })) })), jsx("div", Object.assign({ className: s$2.uploadContent }, { children: jsx(EmbedLink, { onEmbed: onEmbed }) }))] })) })), jsx("div", {})] })));
+};
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+// Older browsers don't support event options, feature detect it.
+
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+var hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+  var passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return undefined;
+    }
+  };
+  window.addEventListener('testPassive', null, passiveTestOptions);
+  window.removeEventListener('testPassive', null, passiveTestOptions);
+}
+
+var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+
+
+var locks = [];
+var documentListenerAdded = false;
+var initialClientY = -1;
+var previousBodyOverflowSetting = void 0;
+var previousBodyPosition = void 0;
+var previousBodyPaddingRight = void 0;
+
+// returns true if `el` should be allowed to receive touchmove events.
+var allowTouchMove = function allowTouchMove(el) {
+  return locks.some(function (lock) {
+    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+      return true;
+    }
+
+    return false;
+  });
+};
+
+var preventDefault = function preventDefault(rawEvent) {
+  var e = rawEvent || window.event;
+
+  // For the case whereby consumers adds a touchmove event listener to document.
+  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+  // the touchmove event on document will break.
+  if (allowTouchMove(e.target)) {
+    return true;
+  }
+
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1) return true;
+
+  if (e.preventDefault) e.preventDefault();
+
+  return false;
+};
+
+var setOverflowHidden = function setOverflowHidden(options) {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+    if (_reserveScrollBarGap && scrollBarGap > 0) {
+      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+    }
+  }
+
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+};
+
+var restoreOverflowSetting = function restoreOverflowSetting() {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight;
+
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined;
+  }
+
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting;
+
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined;
+  }
+};
+
+var setPositionFixed = function setPositionFixed() {
+  return window.requestAnimationFrame(function () {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+      previousBodyPosition = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+
+      // Update the dom inside an animation frame 
+      var _window = window,
+          scrollY = _window.scrollY,
+          scrollX = _window.scrollX,
+          innerHeight = _window.innerHeight;
+
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollY;
+      document.body.style.left = -scrollX;
+
+      setTimeout(function () {
+        return window.requestAnimationFrame(function () {
+          // Attempt to check if the bottom bar appeared due to the position change
+          var bottomBarHeight = innerHeight - window.innerHeight;
+          if (bottomBarHeight && scrollY >= innerHeight) {
+            // Move the content further up so that the bottom bar doesn't hide it
+            document.body.style.top = -(scrollY + bottomBarHeight);
+          }
+        });
+      }, 300);
+    }
+  });
+};
+
+var restorePositionSetting = function restorePositionSetting() {
+  if (previousBodyPosition !== undefined) {
+    // Convert the position from "px" to Int
+    var y = -parseInt(document.body.style.top, 10);
+    var x = -parseInt(document.body.style.left, 10);
+
+    // Restore styles
+    document.body.style.position = previousBodyPosition.position;
+    document.body.style.top = previousBodyPosition.top;
+    document.body.style.left = previousBodyPosition.left;
+
+    // Restore scroll
+    window.scrollTo(x, y);
+
+    previousBodyPosition = undefined;
+  }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
+  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+};
+
+var handleScroll = function handleScroll(event, targetElement) {
+  var clientY = event.targetTouches[0].clientY - initialClientY;
+
+  if (allowTouchMove(event.target)) {
+    return false;
+  }
+
+  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+    // element is at the top of its scroll.
+    return preventDefault(event);
+  }
+
+  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+    // element is at the bottom of its scroll.
+    return preventDefault(event);
+  }
+
+  event.stopPropagation();
+  return true;
+};
+
+var disableBodyScroll = function disableBodyScroll(targetElement, options) {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    return;
+  }
+
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(function (lock) {
+    return lock.targetElement === targetElement;
+  })) {
+    return;
+  }
+
+  var lock = {
+    targetElement: targetElement,
+    options: options || {}
+  };
+
+  locks = [].concat(_toConsumableArray(locks), [lock]);
+
+  if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        initialClientY = event.targetTouches[0].clientY;
+      }
+    };
+    targetElement.ontouchmove = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        handleScroll(event, targetElement);
+      }
+    };
+
+    if (!documentListenerAdded) {
+      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = true;
+    }
+  }
+};
+
+var enableBodyScroll = function enableBodyScroll(targetElement) {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    return;
+  }
+
+  locks = locks.filter(function (lock) {
+    return lock.targetElement !== targetElement;
+  });
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = null;
+    targetElement.ontouchmove = null;
+
+    if (documentListenerAdded && locks.length === 0) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+};
+
+var css_248z$1 = ".EditorPlaceholder-module_editor{margin:20px 0 10px;position:relative;user-select:none;width:100%}.EditorPlaceholder-module_content{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;position:relative;text-align:left;transition:background-color .1s ease-in;width:100%}.EditorPlaceholder-module_content:hover{background-color:#e3e3e3}.EditorPlaceholder-module_icon{margin-right:8px;user-select:none}";
+var s$1 = {"editor":"EditorPlaceholder-module_editor","content":"EditorPlaceholder-module_content","icon":"EditorPlaceholder-module_icon"};
+styleInject(css_248z$1);
+
+const getYoutubeId = (url) => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = url.match(regExp);
+    return match && match[2].length === 11 ? match[2] : null;
+};
+const getVimeoId = (url) => {
+    const vimeoUrl = new URL(url);
+    const vimeoVideoId = vimeoUrl.pathname.split('/')[1];
+    return vimeoVideoId;
+};
+const getDailymotionId = (url) => {
+    var m = url.match(/^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/);
+    if (m !== null) {
+        if (m[4] !== undefined) {
+            return m[4];
+        }
+        return m[2];
+    }
+    return null;
+};
+function getTwitterEmbedId(url) {
+    const match = url.match(/\/status\/(\d+)/);
+    if (match) {
+        return match[1];
+    }
+    return null;
+}
+function getFigmaUrl(url) {
+    const search = new URL(url).searchParams;
+    const nodeId = search.get('node-id');
+    if (search.get('node-id')) {
+        return nodeId;
+    }
+    return 'unknown';
+}
+function getProvider(url) {
+    if (url.includes('youtube.com') || url.includes('youtu.be')) {
+        return 'youtube';
+    }
+    else if (url.includes('vimeo.com')) {
+        return 'vimeo';
+    }
+    else if (url.includes('dailymotion.com') || url.includes('dai.ly')) {
+        return 'dailymotion';
+    }
+    else if (url.includes('twitter')) {
+        return 'twitter';
+    }
+    else if (url.includes('figma')) {
+        return 'figma';
+    }
+    else {
+        return null;
+    }
+}
+
+const UPLOADER_HEIGHT = 88;
+const EditorPlaceholder = ({ element, attributes, maxSizes, children, editor }) => {
+    const [uploaderPos, setUploaderPos] = useState(null);
+    const imageEditorRef = useRef(null);
+    const toggleUploaderOpen = (e) => {
+        var _a;
+        e.stopPropagation();
+        if (uploaderPos !== null) {
+            enableBodyScroll(document.body);
+            setUploaderPos(null);
+            return;
+        }
+        const imageEditorRect = (_a = imageEditorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (imageEditorRect) {
+            const showAtTop = imageEditorRect.top + imageEditorRect.height + UPLOADER_HEIGHT + 20 > window.innerHeight;
+            const showAtBottom = !showAtTop;
+            console.log({ showAtTop, showAtBottom });
+            disableBodyScroll(document.body, { reserveScrollBarGap: true });
+            setUploaderPos({
+                left: imageEditorRect.left,
+                top: showAtTop ? imageEditorRect.top - UPLOADER_HEIGHT - 5 : imageEditorRect.top + imageEditorRect.height + 5,
+            });
+        }
+    };
+    const onEmbed = (src) => __awaiter(void 0, void 0, void 0, function* () {
+        if (src.length === 0)
+            return;
+        const provider = getProvider(src);
+        let providerId = null;
+        if (provider === 'youtube')
+            providerId = getYoutubeId(src);
+        else if (provider === 'vimeo')
+            providerId = getVimeoId(src);
+        else if (provider === 'dailymotion')
+            providerId = getDailymotionId(src);
+        else if (provider === 'twitter')
+            providerId = getTwitterEmbedId(src);
+        else if (provider === 'figma')
+            providerId = getFigmaUrl(src);
+        console.log({ provider, providerId });
+        try {
+            enableBodyScroll(document.body);
+            setUploaderPos(null);
+            const updatedEmbedNode = {
+                data: Object.assign(Object.assign({}, element.data), { url: src, size: { width: element.data.size.width, height: element.data.size.height }, provider: provider, providerId }),
+            };
+            Transforms.setNodes(editor, updatedEmbedNode, {
+                at: ReactEditor.findPath(editor, element),
+                match: (n) => Element.isElement(n) && n.type === 'embed',
+            });
+        }
+        catch (error) {
+            enableBodyScroll(document.body);
+            setUploaderPos(null);
+        }
+    });
+    return (jsxs("div", Object.assign({ className: s$1.editor }, attributes, { contentEditable: false }, { children: [jsxs("div", Object.assign({ ref: imageEditorRef }, { children: [jsxs("button", Object.assign({ className: s$1.content, onClick: toggleUploaderOpen }, { children: [jsx(SvgUpload, { className: s$1.icon, width: 24, height: 24 }), jsx("span", { children: "Click to add embed" })] })), uploaderPos !== null && jsx(EditorUploader, { onEmbed: onEmbed, onClose: toggleUploaderOpen, style: uploaderPos })] })), children] })));
+};
+
+var css_248z = ".EmbedEditor-module_root{cursor:pointer;display:block;position:relative}.EmbedEditor-module_root:hover .EmbedEditor-module_dotsOptions,.EmbedEditor-module_root:hover .EmbedEditor-module_resizer{opacity:1}.EmbedEditor-module_loadingState{pointer-events:none}.EmbedEditor-module_extraMargin{margin:20px 0 30px}.EmbedEditor-module_resizeLib{margin:0 auto}.EmbedEditor-module_resizer{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}.EmbedEditor-module_leftResizer{left:0;top:0}.EmbedEditor-module_rightResizer{right:0;top:0}.EmbedEditor-module_resizeItem{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}.EmbedEditor-module_selectImg{opacity:0}.EmbedEditor-module_selected{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}.EmbedEditor-module_loader{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.EmbedEditor-module_dotsOptions{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}.EmbedEditor-module_dot{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}";
+var s = {"root":"EmbedEditor-module_root","resizer":"EmbedEditor-module_resizer","dotsOptions":"EmbedEditor-module_dotsOptions","loadingState":"EmbedEditor-module_loadingState","extraMargin":"EmbedEditor-module_extraMargin","resizeLib":"EmbedEditor-module_resizeLib","leftResizer":"EmbedEditor-module_leftResizer EmbedEditor-module_resizer","rightResizer":"EmbedEditor-module_rightResizer EmbedEditor-module_resizer","resizeItem":"EmbedEditor-module_resizeItem","selectImg":"EmbedEditor-module_selectImg","selected":"EmbedEditor-module_selected","loader":"EmbedEditor-module_loader","dot":"EmbedEditor-module_dot"};
+styleInject(css_248z);
+
+const OPTIONS_WIDTH = 265;
+const EmbedEditorFactory = (editor, plugin) => (props) => jsx(EmbedEditor, Object.assign({ editor: editor, plugin: plugin }, props));
+function EmbedEditor(props) {
+    var _a, _b, _c, _d, _e;
+    const { element, editor, plugin } = props;
+    const selected = useSelected();
+    const readOnly = useReadOnly();
+    const [optionsPos, setOptionsPos] = useState(null);
+    const [size, setSize] = useState({
+        width: ((_b = (_a = element.data) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.width) || 750,
+        height: ((_d = (_c = element.data) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.height) || 440,
+    });
+    const updateSize = (updatedSize) => setSize(Object.assign(Object.assign({}, size), updatedSize));
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (element.data) {
+            updateSize({
+                width: ((_b = (_a = element.data) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.width) || 750,
+                height: ((_d = (_c = element.data) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.height) || 440,
+            });
+        }
+    }, [(_e = element.data) === null || _e === void 0 ? void 0 : _e.size]);
+    const resizeProps = useMemo(() => {
+        var _a, _b;
+        return ({
+            minWidth: 300,
+            size: { width: size.width, height: size.height },
+            maxWidth: ((_a = plugin.options) === null || _a === void 0 ? void 0 : _a.maxWidth) || 800,
+            maxHeight: ((_b = plugin.options) === null || _b === void 0 ? void 0 : _b.maxHeight) || 720,
+            lockAspectRatio: true,
+            resizeRatio: 2,
+            enable: {
+                left: !readOnly,
+                right: !readOnly,
+            },
+            handleStyles: {
+                left: { left: 0 },
+                right: { right: 0 },
+            },
+            onResize: (e, direction, ref) => {
+                updateSize({ width: ref.offsetWidth, height: ref.offsetHeight });
+            },
+            onResizeStop: (e, direction, ref) => {
+                console.log('image editor editor.children', editor.children);
+                console.log('ReactEditor.findPath(editor, element)', ReactEditor.findPath(editor, element));
+                console.log('element', element);
+                Transforms.setNodes(editor, { data: Object.assign(Object.assign({}, element.data), { size: { width: ref.offsetWidth, height: ref.offsetHeight } }) }, {
+                    at: ReactEditor.findPath(editor, element),
+                    match: (n) => Element.isElement(n) && n.type === 'embed',
+                });
+            },
+            handleComponent: {
+                left: (jsx("div", Object.assign({ contentEditable: false, className: s.leftResizer }, { children: jsx("div", { className: s.resizeItem }) }))),
+                right: (jsx("div", Object.assign({ contentEditable: false, className: s.rightResizer }, { children: jsx("div", { className: s.resizeItem }) }))),
+            },
+        });
+    }, [size.width, size.height, editor]);
+    const closeOptions = () => {
+        enableBodyScroll(document.body);
+        setOptionsPos(null);
+    };
+    const toggleOptionsOpen = (e) => {
+        var _a;
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        if (optionsPos !== null) {
+            return closeOptions();
+        }
+        const optionsButtonRect = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const UPLOADER_HEIGHT = 164;
+        if (optionsButtonRect) {
+            const showAtTop = optionsButtonRect.top + optionsButtonRect.height + UPLOADER_HEIGHT + 20 > window.innerHeight;
+            disableBodyScroll(document.body, { reserveScrollBarGap: true });
+            setOptionsPos({
+                left: optionsButtonRect.right - optionsButtonRect.width + OPTIONS_WIDTH > window.innerWidth
+                    ? window.innerWidth - OPTIONS_WIDTH - optionsButtonRect.width
+                    : optionsButtonRect.right - optionsButtonRect.width,
+                top: showAtTop
+                    ? optionsButtonRect.top - UPLOADER_HEIGHT / 2 - optionsButtonRect.height
+                    : optionsButtonRect.top + optionsButtonRect.height + 5,
+            });
+        }
+    };
+    if (!element.data.url && !element.data['data-src']) {
+        const { maxWidth = 750, maxHeight = 800 } = plugin.options || {};
+        return (jsxs("div", Object.assign({ className: s.root, contentEditable: false, draggable: false }, { children: [jsx("div", { className: cx(s.selectImg, { [s.selected]: selected }) }), jsx(EditorPlaceholder, Object.assign({ attributes: props.attributes, element: element, editor: editor, maxSizes: { maxWidth, maxHeight } }, { children: !readOnly && (jsxs("div", { children: [jsxs("button", Object.assign({ type: "button", className: s.dotsOptions, onClick: toggleOptionsOpen }, { children: [jsx("span", { className: s.dot }), jsx("span", { className: s.dot }), jsx("span", { className: s.dot })] })), optionsPos !== null && (jsx(UI_HELPERS.ElementOptions, { onClose: closeOptions, style: optionsPos, element: element, onCopy: closeOptions, onDelete: closeOptions, onDuplicate: closeOptions }, element.id))] })) })), props.children] }), element.id));
+    }
+    return (jsx("div", Object.assign({ contentEditable: false, draggable: false, className: s.root }, { children: jsxs(Resizable, Object.assign({}, resizeProps, { className: s.resizeLib }, { children: [plugin.renderer.render(Object.assign(Object.assign({}, props), { size })), jsx("div", { className: cx(s.selectImg, { [s.selected]: selected }) }), !readOnly && (jsxs("div", { children: [jsxs("button", Object.assign({ type: "button", className: s.dotsOptions, onClick: toggleOptionsOpen }, { children: [jsx("span", { className: s.dot }), jsx("span", { className: s.dot }), jsx("span", { className: s.dot })] })), optionsPos !== null && (jsx(UI_HELPERS.ElementOptions, { onClose: closeOptions, style: optionsPos, element: element, onCopy: closeOptions, onDelete: closeOptions, onDuplicate: closeOptions }, element.id))] }))] })) }), element.id));
+}
+
+const Embed = createYooptaPlugin({
+    type: 'embed',
+    shortcut: 'embed',
+    renderer: {
+        // @ts-ignore [TODO: fix types]
+        editor: EmbedEditorFactory,
+        render: Embed$1,
+    },
+    extendEditor(editor) {
+        const { isVoid } = editor;
+        editor.isVoid = (element) => {
+            return element.type === Embed.getPlugin.type ? true : isVoid(element);
+        };
+        return editor;
+    },
+    events: {
+        onKeyDown: (editor, { defaultNode, hotkeys }) => (event) => {
+            var _a;
+            const currentNode = getElementByPath(editor, (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path, 'highest');
+            if (currentNode.type !== 'embed' || !editor.selection)
+                return;
+            if (hotkeys.isEnter(event)) {
+                event.preventDefault();
+                Transforms.insertNodes(editor, defaultNode, { mode: 'highest' });
+                return;
+            }
+        },
+    },
+    defineElement: () => ({
+        id: generateId(),
+        type: 'embed',
+        nodeType: 'void',
+        data: { url: null, size: { width: 'auto', height: 'auto' }, providerId: null },
+        children: [{ text: '' }],
+    }),
+    createElement: (editor, elementData) => {
+        var _a;
+        const node = Object.assign(Object.assign({}, Embed.getPlugin.defineElement()), elementData);
+        Transforms.setNodes(editor, node, {
+            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+        });
+    },
+    exports: {
+        markdown: {
+            serialize: (node, text) => {
+                return `[embed-url](${node.data.url})\n`;
+            },
+        },
+        html: {
+            serialize: (node, children) => {
+                var _a, _b;
+                return `<iframe src="https://player.vimeo.com/video/807053663?badge=0&amp;byline=0&amp;portrait=0&amp;title=0" frameborder="0" height="${(_a = node.data.size) === null || _a === void 0 ? void 0 : _a.height}" width="${(_b = node.data.size) === null || _b === void 0 ? void 0 : _b.width}" allowfullscreen="" url="https://vimeo.com/807053663" provider="${node.data.provider || ''}" />`;
+            },
+            deserialize: {
+                nodeName: 'IFRAME',
+                parse: (el) => ({
+                    url: el.getAttribute('src'),
+                    size: {
+                        height: typeof el.getAttribute('height') === 'string' ? Number(el.getAttribute('height')) : 'auto',
+                        width: typeof el.getAttribute('width') === 'string' ? Number(el.getAttribute('width')) : 'auto',
+                    },
+                }),
+            },
+        },
+    },
+    options: {
+        searchString: 'Embed media',
+        displayLabel: 'Embed',
+    },
+});
+
+export { Embed as default };