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