@yoopta/video 1.9.13-rc → 1.9.15-rc

package/dist/index.js

@@ -1,1601 +1 @@
-import { getElementClassname, UI_HELPERS, cx, createYooptaPlugin, getElementByPath, generateId } from '@yoopta/editor';
-import { Transforms, Element } from 'slate';
-import { jsxs, jsx } 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$4 = ".Video-module_videoElement{margin:20px 0 10px;position:relative}.Video-module_video{border-radius:1px;display:block;margin:0 auto;max-width:100%;object-fit:cover;pointer-events:auto}.Video-module_iframRoot{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.Video-module_iframe{background-color:#fff}.Video-module_iframe,.Video-module_iframeWrap{border-radius:1px;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:100%}.Video-module_iframePreview{filter:blur(10px);left:0;object-fit:cover;position:absolute;top:0;transition:opacity .15s ease-in,filter .15s ease-in}.Video-module_iframeRoot{height:100%;position:relative;width:100%}";
-var s$4 = {"videoElement":"Video-module_videoElement","video":"Video-module_video","iframRoot":"Video-module_iframRoot","iframe":"Video-module_iframe","iframeWrap":"Video-module_iframeWrap","iframePreview":"Video-module_iframePreview","iframeRoot":"Video-module_iframeRoot"};
-styleInject(css_248z$4);
-
-const getDayliMotionAPI = (videoId) => `https://api.dailymotion.com/video/${videoId}?fields=thumbnail_url`;
-function DailyMotion(_a) {
-    var { videoId } = _a, other = __rest(_a, ["videoId"]);
-    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(videoId))
-            .then((data) => data.json())
-            .then((data) => setSrc(data.thumbnail_url))
-            .catch(() => setSrc(null));
-    }, [videoId]);
-    return (jsxs("div", Object.assign({ ref: dailyMotionRootRef, className: s$4.iframeRoot }, { children: [jsx("img", { src: src || '', alt: "daylimotion_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: "Dailymotion Video Player", frameBorder: 0, onLoad: () => setFrameLoaded(true), src: `https://www.dailymotion.com/embed/video/${videoId}`, allowFullScreen: true, className: s$4.iframe }, other)))] })));
-}
-
-const VIMEO_API_URI = 'https://vimeo.com/api/v2/video';
-function VimeoPlayer(_a) {
-    var { videoId } = _a, other = __rest(_a, ["videoId"]);
-    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}/${videoId}.json`)
-            .then((data) => data.json())
-            .then((data) => setSrc(data[0].thumbnail_medium))
-            .catch(() => setSrc(null));
-    }, [videoId]);
-    return (jsxs("div", Object.assign({ ref: vimeoRootRef, className: s$4.iframeRoot }, { children: [jsx("img", { src: src || '', alt: "vimeo_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: "Video Player", 
-                // https://developer.vimeo.com/player/embedding
-                src: `https://player.vimeo.com/video/${videoId}?badge=0&byline=0&portrait=0&title=0`, frameBorder: 0, allowFullScreen: true, onLoad: () => setFrameLoaded(true), className: s$4.iframe }, other)))] })));
-}
-
-function YouTubePlayer(_a) {
-    var { videoId } = _a, other = __rest(_a, ["videoId"]);
-    const youtubeRootRef = useRef(null);
-    const [isFrameLoaded, setFrameLoaded] = useState(false);
-    const { isIntersecting: isInViewport } = useIntersectionObserver(youtubeRootRef, {
-        freezeOnceVisible: true,
-        rootMargin: '50%',
-    });
-    return (jsxs("div", Object.assign({ ref: youtubeRootRef, className: s$4.iframeRoot }, { children: [jsx("img", { src: `https://i.ytimg.com/vi/${videoId}/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: "Video Player", 
-                // https://developers.google.com/youtube/player_parameters?hl=en
-                src: `https://www.youtube.com/embed/${videoId}`, frameBorder: 0, onLoad: () => setFrameLoaded(true), allowFullScreen: true, className: s$4.iframe }, other)))] })));
-}
-
-const PROVIDERS = {
-    vimeo: VimeoPlayer,
-    youtube: YouTubePlayer,
-    dailymotion: DailyMotion,
-};
-const Video$1 = ({ attributes, element, children, size, HTMLAttributes }) => {
-    var _a, _b, _c, _d;
-    const width = (size === null || size === void 0 ? void 0 : size.width) || ((_b = (_a = element.data) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.width) || '100%';
-    const height = (size === null || size === void 0 ? void 0 : size.height) || ((_d = (_c = element.data) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.height) || 400;
-    if (typeof element.data.provider === 'string' && element.data.videoId && PROVIDERS[element.data.provider]) {
-        const ProviderComponent = PROVIDERS[element.data.provider];
-        return (jsxs("div", Object.assign({}, attributes, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$4.videoElement }), contentEditable: false, draggable: false }, { children: [jsx("div", Object.assign({ className: s$4.iframRoot }, { children: jsx("div", Object.assign({ className: s$4.iframeWrap }, { children: jsx(ProviderComponent, { videoId: element.data.videoId }) })) })), children] })));
-    }
-    if (!element.data.url && !element.data['data-src'])
-        return (jsx("div", Object.assign({}, attributes, { className: s$4.videoElement, contentEditable: false, draggable: false }, { children: children })));
-    return (jsxs("div", Object.assign({}, attributes, { className: s$4.videoElement, contentEditable: false, draggable: false }, { children: [jsx("video", Object.assign({ controls: true, preload: "metadata", playsInline: true, src: element.data.url || element.data['data-src'] || '', width: width, height: height, onDragStart: (e) => e.preventDefault() }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$4.video }) })), 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$3 = ".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_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_embed{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.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$3 = {"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","uploaderLabel":"EditorUploader-module_uploaderLabel","uploaderInput":"EditorUploader-module_uploaderInput","embed":"EditorUploader-module_embed EditorUploader-module_uploader","embedInput":"EditorUploader-module_embedInput","embedButton":"EditorUploader-module_embedButton"};
-styleInject(css_248z$3);
-
-const Uploader = ({ onChange }) => {
-    const onChangeFile = (e) => {
-        const files = e.currentTarget.files;
-        if (files && files.length > 0) {
-            onChange(files[0]);
-        }
-    };
-    return (jsx("div", Object.assign({ className: s$3.uploader }, { children: jsxs("label", Object.assign({ htmlFor: "video-uploader", className: s$3.uploaderLabel }, { children: [jsx("input", { type: "file", id: "video-uploader", className: s$3.uploaderInput, accept: "video/*", onChange: onChangeFile, multiple: false }), "Upload file"] })) })));
-};
-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$3.embed }, { children: [jsx("input", { type: "text", placeholder: "Paste video link (Youtube, Vimeo, Dailymotion)", value: value, className: s$3.embedInput, onChange: onChange }), jsx("button", Object.assign({ type: "button", className: s$3.embedButton, onClick: onEmbedLink }, { children: "Embed video" }))] })));
-};
-const EditorUploader = ({ activeTab = 'upload', style, switchTab, onChange, onClose, onEmbed }) => {
-    const isUploader = activeTab === 'upload';
-    const isEmbed = activeTab === 'embed';
-    return (jsx(UI_HELPERS.Overlay, Object.assign({ onClose: onClose }, { children: jsx("div", Object.assign({ className: s$3.container, style: style }, { children: jsxs("div", Object.assign({ className: s$3.content }, { children: [jsxs("div", Object.assign({ className: s$3.tabs }, { children: [jsx("button", Object.assign({ type: "button", onClick: () => switchTab('upload'), className: cx(s$3.tab, { [s$3.activeTab]: isUploader }) }, { children: "Upload" })), jsx("button", Object.assign({ type: "button", onClick: () => switchTab('embed'), className: cx(s$3.tab, { [s$3.activeTab]: isEmbed }) }, { children: "Video link" }))] })), jsxs("div", Object.assign({ className: s$3.uploadContent }, { children: [isUploader && jsx(Uploader, { onChange: onChange }), isEmbed && jsx(EmbedLink, { onEmbed: onEmbed })] }))] })) })) })));
-};
-
-const getAspectRatio = (srcWidth, srcHeight, maxWidth, maxHeight) => {
-    if (!srcWidth || !srcHeight)
-        return {};
-    const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
-    return { width: srcWidth * ratio, height: srcHeight * ratio };
-};
-
-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();
-  }
-};
-
-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 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('twitch.tv')) {
-    //   return 'Twitch';
-    // }
-    else {
-        return null;
-    }
-}
-
-var css_248z$2 = ".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_disabledUpload{background-color:#efefef;color:rgba(55,53,47,.65);cursor:not-allowed;pointer-events:none}.EditorPlaceholder-module_icon{margin-right:8px;user-select:none}.EditorPlaceholder-module_loading{left:50%;position:absolute;top:50%}";
-var s$2 = {"editor":"EditorPlaceholder-module_editor","content":"EditorPlaceholder-module_content","disabledUpload":"EditorPlaceholder-module_disabledUpload","icon":"EditorPlaceholder-module_icon","loading":"EditorPlaceholder-module_loading"};
-styleInject(css_248z$2);
-
-var css_248z$1 = ".Loader-module_container{height:100%;position:relative;width:100%}.Loader-module_container .Loader-module_dot{background-color:#909090;border-radius:5rem;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.Loader-module_container .Loader-module_dot:first-child{animation:Loader-module_waveUp 2s,Loader-module_smallExtend 2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 60px)}.Loader-module_container .Loader-module_dot:nth-child(2){animation:Loader-module_waveUp 2s,Loader-module_largeExtend 2s;animation-delay:.15s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 30px)}.Loader-module_container .Loader-module_dot:nth-child(3){animation:Loader-module_waveUp 2s,Loader-module_smallExtend 2s;animation-delay:.3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:50%}.Loader-module_container .Loader-module_dot:nth-child(4){animation:Loader-module_waveUp 2s,Loader-module_largeExtend 2s;animation-delay:.45s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 30px)}.Loader-module_container .Loader-module_dot:nth-child(5){animation:Loader-module_waveUp 2s,Loader-module_smallExtend 2s;animation-delay:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 60px)}@keyframes Loader-module_waveUp{0%,15%{top:50%}45%,65%{top:42.5%}85%,to{top:50%}}@keyframes Loader-module_smallExtend{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:17.5px}46%,to{background-color:#909090;height:10px}}@keyframes Loader-module_largeExtend{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:32.5px}46%,to{background-color:#909090;height:10px}}";
-var s$1 = {"container":"Loader-module_container","dot":"Loader-module_dot","waveUp":"Loader-module_waveUp","smallExtend":"Loader-module_smallExtend","largeExtend":"Loader-module_largeExtend"};
-styleInject(css_248z$1);
-
-const Loader = () => {
-    return (jsxs("div", Object.assign({ className: s$1.container }, { children: [jsx("div", { className: s$1.dot }), jsx("div", { className: s$1.dot }), jsx("div", { className: s$1.dot }), jsx("div", { className: s$1.dot }), jsx("div", { className: s$1.dot })] })));
-};
-
-const UPLOADER_HEIGHT = 88;
-const EditorPlaceholder = ({ element, attributes, maxSizes, children, editor, onUpload }) => {
-    const [uploaderPos, setUploaderPos] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [activeTab, setActiveTab] = useState('upload');
-    const videoEditorRef = useRef(null);
-    const toggleUploaderOpen = (e) => {
-        var _a;
-        e.stopPropagation();
-        if (uploaderPos !== null) {
-            enableBodyScroll(document.body);
-            setUploaderPos(null);
-            return;
-        }
-        const videoEditorRect = (_a = videoEditorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (videoEditorRect) {
-            const showAtTop = videoEditorRect.top + videoEditorRect.height + UPLOADER_HEIGHT + 20 > window.innerHeight;
-            const showAtBottom = !showAtTop;
-            console.log({ showAtTop, showAtBottom });
-            disableBodyScroll(document.body, { reserveScrollBarGap: true });
-            setUploaderPos({
-                left: videoEditorRect.left,
-                top: showAtTop ? videoEditorRect.top - UPLOADER_HEIGHT - 5 : videoEditorRect.top + videoEditorRect.height + 5,
-            });
-        }
-    };
-    const onEmbed = (src) => __awaiter(void 0, void 0, void 0, function* () {
-        if (src.length === 0)
-            return;
-        const provider = getProvider(src);
-        let videoId = null;
-        if (provider === 'youtube')
-            videoId = getYoutubeId(src);
-        else if (provider === 'vimeo')
-            videoId = getVimeoId(src);
-        else if (provider === 'dailymotion')
-            videoId = getDailymotionId(src);
-        if (!videoId)
-            return;
-        try {
-            enableBodyScroll(document.body);
-            setUploaderPos(null);
-            const updatedVideoNode = {
-                data: Object.assign(Object.assign({}, element.data), { url: null, 'data-src': undefined, size: { width: element.data.size.width, height: element.data.size.height }, provider: provider, videoId }),
-            };
-            Transforms.setNodes(editor, updatedVideoNode, {
-                at: ReactEditor.findPath(editor, element),
-                match: (n) => Element.isElement(n) && n.type === 'video',
-            });
-        }
-        catch (error) {
-            enableBodyScroll(document.body);
-            setUploaderPos(null);
-        }
-    });
-    const onChangeFile = (file) => __awaiter(void 0, void 0, void 0, function* () {
-        enableBodyScroll(document.body);
-        setUploaderPos(null);
-        setLoading(true);
-        if (!onUpload)
-            return console.error('Provide `onUpload` props in Video options');
-        try {
-            const response = yield onUpload(file);
-            const { width, height } = getAspectRatio(response.width, response.height, maxSizes.maxWidth, maxSizes.maxHeight);
-            const updateVideoNode = {
-                data: {
-                    url: response.url,
-                    'data-src': undefined,
-                    size: { width: width || element.data.size.width, height: height || element.data.size.height },
-                },
-            };
-            setLoading(false);
-            Transforms.setNodes(editor, updateVideoNode, {
-                at: ReactEditor.findPath(editor, element),
-                match: (n) => Element.isElement(n) && n.type === 'video',
-            });
-        }
-        catch (error) {
-            enableBodyScroll(document.body);
-            setUploaderPos(null);
-            setLoading(false);
-        }
-    });
-    return (jsxs("div", Object.assign({ className: cx(s$2.editor, { [s$2.disabledUpload]: loading }) }, attributes, { contentEditable: false }, { children: [jsxs("div", Object.assign({ ref: videoEditorRef }, { children: [jsxs("button", Object.assign({ className: s$2.content, onClick: toggleUploaderOpen, disabled: loading }, { children: [loading && (jsx("div", Object.assign({ className: s$2.loading }, { children: jsx(Loader, {}) }))), jsx(SvgUpload, { className: s$2.icon, width: 24, height: 24 }), jsx("span", { children: "Click to add video" })] })), uploaderPos !== null && (jsx(EditorUploader, { onChange: onChangeFile, onClose: toggleUploaderOpen, activeTab: activeTab, switchTab: (tab) => setActiveTab(tab), style: uploaderPos, onEmbed: onEmbed }))] })), children] })));
-};
-
-var css_248z = ".VideoEditor-module_root{cursor:pointer;display:block;position:relative}.VideoEditor-module_root:hover .VideoEditor-module_dotsOptions,.VideoEditor-module_root:hover .VideoEditor-module_resizer{opacity:1}.VideoEditor-module_loadingState{pointer-events:none}.VideoEditor-module_extraMargin{margin:20px 0 30px}.VideoEditor-module_resizeLib{margin:0 auto}.VideoEditor-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}.VideoEditor-module_leftResizer{left:0;top:0}.VideoEditor-module_rightResizer{right:0;top:0}.VideoEditor-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}.VideoEditor-module_selectImg{opacity:0}.VideoEditor-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}.VideoEditor-module_loader{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.VideoEditor-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}.VideoEditor-module_dot{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}";
-var s = {"root":"VideoEditor-module_root","resizer":"VideoEditor-module_resizer","dotsOptions":"VideoEditor-module_dotsOptions","loadingState":"VideoEditor-module_loadingState","extraMargin":"VideoEditor-module_extraMargin","resizeLib":"VideoEditor-module_resizeLib","leftResizer":"VideoEditor-module_leftResizer VideoEditor-module_resizer","rightResizer":"VideoEditor-module_rightResizer VideoEditor-module_resizer","resizeItem":"VideoEditor-module_resizeItem","selectImg":"VideoEditor-module_selectImg","selected":"VideoEditor-module_selected","loader":"VideoEditor-module_loader","dot":"VideoEditor-module_dot"};
-styleInject(css_248z);
-
-const OPTIONS_WIDTH = 265;
-const VideoEditorFactory = (editor, plugin) => (props) => jsx(VideoEditor, Object.assign({ editor: editor, plugin: plugin }, props));
-function VideoEditor(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    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) || 'auto',
-        height: ((_d = (_c = element.data) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.height) || 'auto',
-    });
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (element.data) {
-            setSize({
-                width: ((_b = (_a = element.data) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.width) || 'auto',
-                height: ((_d = (_c = element.data) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.height) || 'auto',
-            });
-        }
-    }, [(_e = element.data) === null || _e === void 0 ? void 0 : _e.size]);
-    const resizeProps = useMemo(() => {
-        var _a;
-        return ({
-            minWidth: 92,
-            size: { width: size.width, height: size.height },
-            maxWidth: ((_a = plugin.options) === null || _a === void 0 ? void 0 : _a.maxWidth) || 800,
-            lockAspectRatio: true,
-            resizeRatio: 2,
-            enable: {
-                left: !readOnly,
-                right: !readOnly,
-            },
-            handleStyles: {
-                left: { left: 0 },
-                right: { right: 0 },
-            },
-            onResize: (e, direction, ref) => {
-                setSize({ width: ref.offsetWidth, height: ref.offsetHeight });
-            },
-            onResizeStop: (e, direction, ref) => {
-                console.log('video 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 === 'video',
-                });
-            },
-            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 hasCaption = !!((_f = element.data) === null || _f === void 0 ? void 0 : _f.caption);
-    const isLoading = !!element.data['data-src'] && !element.data.url;
-    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'] && !element.data.videoId) {
-        const { maxWidth = 750, maxHeight = 800 } = plugin.options || {};
-        return (jsxs("div", Object.assign({ className: s.root, contentEditable: false }, { children: [jsx("div", { className: cx(s.selectImg, { [s.selected]: selected }) }), jsx(EditorPlaceholder, Object.assign({ attributes: props.attributes, element: props.element, editor: editor, onUpload: (_g = plugin.options) === null || _g === void 0 ? void 0 : _g.onUpload, 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: cx(s.root, { [s.extraMargin]: hasCaption, [s.loadingState]: isLoading }) }, { 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 }) }), isLoading && (jsx("div", Object.assign({ className: s.loader }, { children: jsx(Loader, {}) }))), !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 Video = createYooptaPlugin({
-    type: 'video',
-    renderer: {
-        // @ts-ignore [TODO: fix types]
-        editor: VideoEditorFactory,
-        render: Video$1,
-    },
-    extendEditor(editor) {
-        const { isVoid } = editor;
-        editor.isVoid = (element) => {
-            return element.type === Video.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 !== 'video' || !editor.selection)
-                return;
-            console.log('hotkeys.isEnter(event)', hotkeys.isEnter(event));
-            if (hotkeys.isEnter(event)) {
-                event.preventDefault();
-                Transforms.insertNodes(editor, defaultNode, { mode: 'highest' });
-                return;
-            }
-        },
-    },
-    defineElement: () => ({
-        id: generateId(),
-        type: 'video',
-        nodeType: 'void',
-        data: { url: null, size: { width: 'auto', height: 'auto' } },
-        children: [{ text: '' }],
-    }),
-    createElement: (editor, elementData) => {
-        var _a;
-        const node = Object.assign(Object.assign({}, Video.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 `<video preload controls src="${node.data.url}" height="${node.data.size.height}" width="${node.data.size.width}"></video>\n`;
-            },
-        },
-        html: {
-            serialize: (node) => {
-                // [TODO] - change to <source /> and add format
-                return `<video preload controls src="${node.data.url}" height="${node.data.size.height}" width="${node.data.size.width}"></video>`;
-            },
-            deserialize: {
-                nodeName: 'VIDEO',
-                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: 'video media',
-        displayLabel: 'Video',
-    },
-});
-
-export { Video as default };
+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{jsxs as d,jsx 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 f}from"react-dom";import{ReactEditor as m,useSelected as v,useReadOnly as b}from"slate-react";function w(t,e){var i={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(i[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(t);n<o.length;n++)e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(t,o[n])&&(i[o[n]]=t[o[n]])}return i}function y(t,e,i,o){return new(i||(i=Promise))((function(n,s){function r(t){try{d(o.next(t))}catch(t){s(t)}}function a(t){try{d(o.throw(t))}catch(t){s(t)}}function d(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,a)}d((o=o.apply(t,e||[])).next())}))}function x(t,{threshold:e=0,root:i=null,rootMargin:o="0%",freezeOnceVisible:n=!1}={}){const[s,r]=c({}),a=s.isIntersecting&&n,d=([t])=>r(t);return p((()=>{const n=null==t?void 0:t.current;if(!window.IntersectionObserver||a||!n)return;const s=new IntersectionObserver(d,{threshold:e,root:i,rootMargin:o});return s.observe(n),()=>s.disconnect()}),[t,e,i,o,a]),s}function z(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))}}"function"==typeof SuppressedError&&SuppressedError;var N="TvZseAeh",S="EZu95fyq",j="dkxsZ5ZT",O="KsFU0JBg",E="D-8E3vsv",k="eEtEqZrx",R="_0icGyC6M";z(".TvZseAeh{margin:20px 0 10px;position:relative}.EZu95fyq{border-radius:1px;display:block;margin:0 auto;max-width:100%;object-fit:cover;pointer-events:auto}.dkxsZ5ZT{display:flex;height:0;justify-content:center;min-height:100px;padding-bottom:56.25%;position:relative;width:100%}.KsFU0JBg{background-color:#fff}.D-8E3vsv,.KsFU0JBg{border-radius:1px;height:100%;pointer-events:auto;width:100%}.D-8E3vsv,.KsFU0JBg,.eEtEqZrx{left:0;position:absolute;top:0}.eEtEqZrx{filter:blur(10px);object-fit:cover;transition:opacity .15s ease-in,filter .15s ease-in}._0icGyC6M{height:100%;position:relative;width:100%}");const W={vimeo:function(t){var{videoId:e}=t,i=w(t,["videoId"]);const o=u(null),[n,s]=c(null),[r,a]=c(!1),{isIntersecting:h}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return p((()=>{fetch(`https://vimeo.com/api/v2/video/${e}.json`).then((t=>t.json())).then((t=>s(t[0].thumbnail_medium))).catch((()=>s(null)))}),[e]),d("div",Object.assign({ref:o,className:R},{children:[l("img",{src:n||"",alt:"vimeo_video_preview",width:"100%",height:"100%",className:k,style:{opacity:h&&r?0:1,zIndex:h&&r?-1:0}}),h&&l("iframe",Object.assign({title:"Video Player",src:`https://player.vimeo.com/video/${e}?badge=0&byline=0&portrait=0&title=0`,frameBorder:0,allowFullScreen:!0,onLoad:()=>a(!0),className:O},i))]}))},youtube:function(t){var{videoId:e}=t,i=w(t,["videoId"]);const o=u(null),[n,s]=c(!1),{isIntersecting:r}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return d("div",Object.assign({ref:o,className:R},{children:[l("img",{src:`https://i.ytimg.com/vi/${e}/default.jpg`,alt:"youtube_video_preview",width:"100%",height:"100%",className:k,style:{opacity:r&&n?0:1,zIndex:r&&n?-1:0}}),r&&l("iframe",Object.assign({title:"Video Player",src:`https://www.youtube.com/embed/${e}`,frameBorder:0,onLoad:()=>s(!0),allowFullScreen:!0,className:O},i))]}))},dailymotion:function(t){var{videoId:e}=t,i=w(t,["videoId"]);const o=u(null),[n,s]=c(null),[r,a]=c(!1),{isIntersecting:h}=x(o,{freezeOnceVisible:!0,rootMargin:"50%"});return p((()=>{fetch((t=>`https://api.dailymotion.com/video/${t}?fields=thumbnail_url`)(e)).then((t=>t.json())).then((t=>s(t.thumbnail_url))).catch((()=>s(null)))}),[e]),d("div",Object.assign({ref:o,className:R},{children:[l("img",{src:n||"",alt:"daylimotion_video_preview",width:"100%",height:"100%",className:k,style:{opacity:h&&r?0:1,zIndex:h&&r?-1:0}}),h&&l("iframe",Object.assign({title:"Dailymotion Video Player",frameBorder:0,onLoad:()=>a(!0),src:`https://www.dailymotion.com/embed/video/${e}`,allowFullScreen:!0,className:O},i))]}))}};var H,M,C=(H=function(t,e){return H=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])},H(t,e)},function(t,e){function i(){this.constructor=t}H(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),B=function(){return B=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},B.apply(this,arguments)},A={width:"100%",height:"10px",top:"0px",left:"0px",cursor:"row-resize"},L={width:"10px",height:"100%",top:"0px",left:"0px",cursor:"col-resize"},P={width:"20px",height:"20px",position:"absolute"},D={top:B(B({},A),{top:"-5px"}),right:B(B({},L),{left:void 0,right:"-5px"}),bottom:B(B({},A),{top:void 0,bottom:"-5px"}),left:B(B({},L),{left:"-5px"}),topRight:B(B({},P),{right:"-10px",top:"-10px",cursor:"ne-resize"}),bottomRight:B(B({},P),{right:"-10px",bottom:"-10px",cursor:"se-resize"}),bottomLeft:B(B({},P),{left:"-10px",bottom:"-10px",cursor:"sw-resize"}),topLeft:B(B({},P),{left:"-10px",top:"-10px",cursor:"nw-resize"})},I=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 C(e,t),e.prototype.render=function(){return h.createElement("div",{className:this.props.className||"",style:B(B({position:"absolute",userSelect:"none"},D[this.props.direction]),this.props.replaceStyles||{}),onMouseDown:this.onMouseDown,onTouchStart:this.onTouchStart},this.props.children)},e}(h.PureComponent),_=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)}}(),T=function(){return T=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},T.apply(this,arguments)},V={width:"auto",height:"auto"},G=function(t,e,i){return Math.max(Math.min(t,i),e)},U=function(t,e){return Math.round(t/e)*e},F=function(t,e){return new RegExp(t,"i").test(e)},Y=function(t){return Boolean(t.touches&&t.touches.length)},X=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},Q=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"},q=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},J=["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"],Z="__resizable_base__",K=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(Z):e.className+=Z,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 _(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||V},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 Q(t.state[e])};return{width:e&&void 0!==e.width&&!this.state.isResizing?Q(e.width):i("width"),height:e&&void 0!==e.height&&!this.state.isResizing?Q(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&&F("left",s),a=n&&F("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)&&(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,d=a.lockAspectRatio,l=a.lockAspectRatioExtraHeight,h=a.lockAspectRatioExtraWidth,c=r.width,p=r.height,u=l||0,g=h||0;return F("right",s)&&(c=r.width+(t-r.x)*o/i,d&&(p=(c-g)/this.ratio+u)),F("left",s)&&(c=r.width-(t-r.x)*o/i,d&&(p=(c-g)/this.ratio+u)),F("bottom",s)&&(p=r.height+(e-r.y)*o/i,d&&(c=(p-u)*this.ratio+g)),F("top",s)&&(p=r.height-(e-r.y)*o/i,d&&(c=(p-u)*this.ratio+g)),{newWidth:c,newHeight:p}},e.prototype.calculateNewSizeFromAspectRatio=function(t,e,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?t:i.width,h=void 0===o.height?10:o.height,c=void 0===i.height||i.height<0?e:i.height,p=r||0,u=a||0;if(s){var g=(h-p)*this.ratio+u,f=(c-p)*this.ratio+u,m=(d-u)/this.ratio+p,v=(l-u)/this.ratio+p,b=Math.max(d,g),w=Math.min(l,f),y=Math.max(h,m),x=Math.min(c,v);t=G(t,b,w),e=G(e,y,x)}else t=G(t,d,l),e=G(e,h,c);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&&Y(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 d={original:{x:o,y:n,width:this.size.width,height:this.size.height},isResizing:!0,backgroundStyle:T(T({},this.state.backgroundStyle),{cursor:this.window.getComputedStyle(t.target).cursor||"auto"}),direction:e,flexBasis:i};this.setState(d)}},e.prototype.onMouseMove=function(t){var e=this;if(this.state.isResizing&&this.resizable&&this.window){if(this.window.TouchEvent&&Y(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=Y(t)?t.touches[0].clientX:t.clientX,d=Y(t)?t.touches[0].clientY:t.clientY,l=this.state,h=l.direction,c=l.original,p=l.width,u=l.height,g=this.getParentSize(),m=function(t,e,i,o,n,s,r){return o=q(o,t.width,e,i),n=q(n,t.height,e,i),s=q(s,t.width,e,i),r=q(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,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=U(w,this.props.grid[0]),N=U(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(N-b)<=S?N:b}var j={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 O={width:this.createSizeForCssProperty(w,"width"),height:this.createSizeForCssProperty(b,"height")};"row"===this.flexDir?O.flexBasis=O.width:"column"===this.flexDir&&(O.flexBasis=O.height),f((function(){e.setState(O)})),this.props.onResize&&this.props.onResize(t,h,this.resizable,j)}},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:T(T({},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 d=Object.keys(i).map((function(e){return!1!==i[e]?h.createElement(I,{key:e,direction:e,onResizeStart:t.onResizeStart,replaceStyles:o&&o[e],className:n&&n[e]},a&&a[e]?a[e]:null):null}));return h.createElement("div",{className:r,style:s},d)},e.prototype.render=function(){var t=this,e=Object.keys(this.props).reduce((function(e,i){return-1!==J.indexOf(i)||(e[i]=t.props[i]),e}),{}),i=T(T(T({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,T({ref:this.ref,style:i,className:this.props.className},e),this.state.isResizing&&h.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}(h.PureComponent);function $(){return $=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},$.apply(this,arguments)}var tt=function(t){return h.createElement("svg",$({fill:"currentColor","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"uploadImage"},t),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"})))},et="rq2V2ceB",it="rc-sSm2o",ot="pa2jWsNN",nt="WCrDI0dy",st="d-YDdEGm",rt="zaYe5qHX",at="M0t11tGQ",dt="_9cpXcl96",lt="DZJetA3e",ht="oVy3BbqO M0t11tGQ",ct="GIpAKCJ0",pt="k7HVhRkA";z('.rq2V2ceB{position:fixed}.rc-sSm2o{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}.pa2jWsNN{box-shadow:inset 0 -1px 0 rgba(55,53,47,.09);display:flex;height:40px;padding:0 8px;width:100%;z-index:1}.WCrDI0dy,.pa2jWsNN{font-size:14px;position:relative}.WCrDI0dy{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}.d-YDdEGm:after{background-color:#37352f;bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}.zaYe5qHX{display:flex;justify-content:center;margin-left:12px;margin-right:12px;margin-top:4px;padding-bottom:6px;padding-top:6px}.M0t11tGQ{border:1px solid rgba(55,53,47,.16);border-radius:4px;height:32px;padding-left:12px;padding-right:12px;transition:background 20ms ease-in 0s;user-select:none;white-space:nowrap}.M0t11tGQ,._9cpXcl96{cursor:pointer;width:100%}._9cpXcl96{align-items:center;display:inline-flex;font-size:14px;font-weight:500;height:100%;justify-content:center;line-height:1.2}.DZJetA3e{left:0;position:absolute;top:0;visibility:hidden}.oVy3BbqO{border:none!important;cursor:pointer!important;height:auto!important;padding-left:0!important;padding-right:0!important}.GIpAKCJ0{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}.GIpAKCJ0,.k7HVhRkA{align-items:center;border:none;border-radius:4px;display:flex;font-size:14px;width:100%}.k7HVhRkA{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 ut=({onChange:t})=>l("div",Object.assign({className:at},{children:d("label",Object.assign({htmlFor:"video-uploader",className:dt},{children:[l("input",{type:"file",id:"video-uploader",className:lt,accept:"video/*",onChange:e=>{const i=e.currentTarget.files;i&&i.length>0&&t(i[0])},multiple:!1}),"Upload file"]}))})),gt=({onEmbed:t})=>{const[e,i]=c("");return d("div",Object.assign({className:ht},{children:[l("input",{type:"text",placeholder:"Paste video link (Youtube, Vimeo, Dailymotion)",value:e,className:ct,onChange:t=>i(t.target.value)}),l("button",Object.assign({type:"button",className:pt,onClick:()=>t(e)},{children:"Embed video"}))]}))},ft=({activeTab:t="upload",style:o,switchTab:n,onChange:s,onClose:r,onEmbed:a})=>{const h="upload"===t,c="embed"===t;return l(e.Overlay,Object.assign({onClose:r},{children:l("div",Object.assign({className:et,style:o},{children:d("div",Object.assign({className:it},{children:[d("div",Object.assign({className:ot},{children:[l("button",Object.assign({type:"button",onClick:()=>n("upload"),className:i(nt,{[st]:h})},{children:"Upload"})),l("button",Object.assign({type:"button",onClick:()=>n("embed"),className:i(nt,{[st]:c})},{children:"Video link"}))]})),d("div",Object.assign({className:rt},{children:[h&&l(ut,{onChange:s}),c&&l(gt,{onEmbed:a})]}))]}))}))}))};var mt=!1;if("undefined"!=typeof window){var vt={get passive(){mt=!0}};window.addEventListener("testPassive",null,vt),window.removeEventListener("testPassive",null,vt)}var bt="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&window.navigator.maxTouchPoints>1),wt=[],yt=!1,xt=-1,zt=void 0,Nt=void 0,St=void 0,jt=function(t){return wt.some((function(e){return!(!e.options.allowTouchMove||!e.options.allowTouchMove(t))}))},Ot=function(t){var e=t||window.event;return!!jt(e.target)||(e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1))},Et=function(t,e){if(t){if(!wt.some((function(e){return e.targetElement===t}))){var i={targetElement:t,options:e||{}};wt=[].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)}(wt),[i]),bt?window.requestAnimationFrame((function(){if(void 0===Nt){Nt={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===St){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);St=document.body.style.paddingRight,document.body.style.paddingRight=o+i+"px"}}void 0===zt&&(zt=document.body.style.overflow,document.body.style.overflow="hidden")}(e),bt&&(t.ontouchstart=function(t){1===t.targetTouches.length&&(xt=t.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(t,e){var i=t.targetTouches[0].clientY-xt;!jt(t.target)&&(e&&0===e.scrollTop&&i>0||function(t){return!!t&&t.scrollHeight-t.scrollTop<=t.clientHeight}(e)&&i<0?Ot(t):t.stopPropagation())}(e,t)},yt||(document.addEventListener("touchmove",Ot,mt?{passive:!1}:void 0),yt=!0))}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")},kt=function(t){t?(wt=wt.filter((function(e){return e.targetElement!==t})),bt&&(t.ontouchstart=null,t.ontouchmove=null,yt&&0===wt.length&&(document.removeEventListener("touchmove",Ot,mt?{passive:!1}:void 0),yt=!1)),bt?function(){if(void 0!==Nt){var t=-parseInt(document.body.style.top,10),e=-parseInt(document.body.style.left,10);document.body.style.position=Nt.position,document.body.style.top=Nt.top,document.body.style.left=Nt.left,window.scrollTo(e,t),Nt=void 0}}():(void 0!==St&&(document.body.style.paddingRight=St,St=void 0),void 0!==zt&&(document.body.style.overflow=zt,zt=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")};var Rt="ejxIcizu",Wt="tGCxkSAc",Ht="BAqjz8jz",Mt="tab3XKrp",Ct="UnxRu3H0";z(".ejxIcizu{margin:20px 0 10px;user-select:none}.ejxIcizu,.tGCxkSAc{position:relative;width:100%}.tGCxkSAc{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}.tGCxkSAc:hover{background-color:#e3e3e3}.BAqjz8jz{background-color:#efefef;color:rgba(55,53,47,.65);cursor:not-allowed;pointer-events:none}.tab3XKrp{margin-right:8px;user-select:none}.UnxRu3H0{left:50%;position:absolute;top:50%}");var Bt="tmpFyHNs",At="NdlfkJmx";z(".tmpFyHNs{height:100%;position:relative;width:100%}.tmpFyHNs .NdlfkJmx{background-color:#909090;border-radius:5rem;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.tmpFyHNs .NdlfkJmx:first-child{animation:p3veiLIQ 2s,_4Q-HiXe1 2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 60px)}.tmpFyHNs .NdlfkJmx:nth-child(2){animation:p3veiLIQ 2s,NAkUMYzr 2s;animation-delay:.15s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% - 30px)}.tmpFyHNs .NdlfkJmx:nth-child(3){animation:p3veiLIQ 2s,_4Q-HiXe1 2s;animation-delay:.3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:50%}.tmpFyHNs .NdlfkJmx:nth-child(4){animation:p3veiLIQ 2s,NAkUMYzr 2s;animation-delay:.45s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 30px)}.tmpFyHNs .NdlfkJmx:nth-child(5){animation:p3veiLIQ 2s,_4Q-HiXe1 2s;animation-delay:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;left:calc(50% + 60px)}@keyframes p3veiLIQ{0%,15%{top:50%}45%,65%{top:42.5%}85%,to{top:50%}}@keyframes _4Q-HiXe1{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:17.5px}46%,to{background-color:#909090;height:10px}}@keyframes NAkUMYzr{0%,8%{background-color:#909090;height:10px}14%,34%{background-color:#f8f8f8;height:32.5px}46%,to{background-color:#909090;height:10px}}");const Lt=()=>d("div",Object.assign({className:Bt},{children:[l("div",{className:At}),l("div",{className:At}),l("div",{className:At}),l("div",{className:At}),l("div",{className:At})]})),Pt=({element:t,attributes:e,maxSizes:o,children:n,editor:s,onUpload:h})=>{const[p,g]=c(null),[f,v]=c(!1),[b,w]=c("upload"),x=u(null),z=t=>{var e;if(t.stopPropagation(),null!==p)return kt(document.body),void g(null);const i=null===(e=x.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}),Et(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:i(Rt,{[Ht]:f})},e,{contentEditable:!1},{children:[d("div",Object.assign({ref:x},{children:[d("button",Object.assign({className:Wt,onClick:z,disabled:f},{children:[f&&l("div",Object.assign({className:Ct},{children:l(Lt,{})})),l(tt,{className:Mt,width:24,height:24}),l("span",{children:"Click to add video"})]})),null!==p&&l(ft,{onChange:e=>y(void 0,void 0,void 0,(function*(){if(kt(document.body),g(null),v(!0),!h)return console.error("Provide `onUpload` props in Video options");try{const i=yield h(e),{width:n,height:d}=((t,e,i,o)=>{if(!t||!e)return{};const n=Math.min(i/t,o/e);return{width:t*n,height:e*n}})(i.width,i.height,o.maxWidth,o.maxHeight),l={data:{url:i.url,"data-src":void 0,size:{width:n||t.data.size.width,height:d||t.data.size.height}}};v(!1),r.setNodes(s,l,{at:m.findPath(s,t),match:t=>a.isElement(t)&&"video"===t.type})}catch(t){kt(document.body),g(null),v(!1)}})),onClose:z,activeTab:b,switchTab:t=>w(t),style:p,onEmbed:e=>y(void 0,void 0,void 0,(function*(){if(0===e.length)return;const i=(o=e).includes("youtube.com")||o.includes("youtu.be")?"youtube":o.includes("vimeo.com")?"vimeo":o.includes("dailymotion.com")||o.includes("dai.ly")?"dailymotion":null;var o;let n=null;if("youtube"===i?n=(t=>{const e=t.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return e&&11===e[2].length?e[2]:null})(e):"vimeo"===i?n=(t=>new URL(t).pathname.split("/")[1])(e):"dailymotion"===i&&(n=(t=>{var e=t.match(/^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/);return null!==e?void 0!==e[4]?e[4]:e[2]:null})(e)),n)try{kt(document.body),g(null);const e={data:Object.assign(Object.assign({},t.data),{url:null,"data-src":void 0,size:{width:t.data.size.width,height:t.data.size.height},provider:i,videoId:n})};r.setNodes(s,e,{at:m.findPath(s,t),match:t=>a.isElement(t)&&"video"===t.type})}catch(t){kt(document.body),g(null)}}))})]})),n]}))};var Dt="jsof5eGh",It="_9ivUDLVr",_t="hD5QV2jP",Tt="M9o3j8I5",Vt="-dEl6QRc",Gt="_72L6ylPc WOn73-dw",Ut="OhmV3u2l WOn73-dw",Ft="fdfDEgiq",Yt="_7b-PdGXE",Xt="YKGzSDVj",Qt="yDd0Sn4a",qt="VZUnkjYn";z(".jsof5eGh{cursor:pointer;display:block;position:relative}.jsof5eGh:hover .WOn73-dw,.jsof5eGh:hover ._9ivUDLVr{opacity:1}.hD5QV2jP{pointer-events:none}.M9o3j8I5{margin:20px 0 30px}.-dEl6QRc{margin:0 auto}.WOn73-dw{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}._72L6ylPc{left:0;top:0}.OhmV3u2l{right:0;top:0}.fdfDEgiq{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}._7b-PdGXE{opacity:0}.YKGzSDVj{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}.yDd0Sn4a{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}._9ivUDLVr{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}.VZUnkjYn{background-color:gray;border-radius:50%;min-height:3px;min-width:3px}");function Jt(t){var o,n,s,h,u,f,w;const{element:y,editor:x,plugin:z}=t,N=v(),S=b(),[j,O]=c(null),[E,k]=c({width:(null===(n=null===(o=y.data)||void 0===o?void 0:o.size)||void 0===n?void 0:n.width)||"auto",height:(null===(h=null===(s=y.data)||void 0===s?void 0:s.size)||void 0===h?void 0:h.height)||"auto"});p((()=>{var t,e,i,o;y.data&&k({width:(null===(e=null===(t=y.data)||void 0===t?void 0:t.size)||void 0===e?void 0:e.width)||"auto",height:(null===(o=null===(i=y.data)||void 0===i?void 0:i.size)||void 0===o?void 0:o.height)||"auto"})}),[null===(u=y.data)||void 0===u?void 0:u.size]);const R=g((()=>{var t;return{minWidth:92,size:{width:E.width,height:E.height},maxWidth:(null===(t=z.options)||void 0===t?void 0:t.maxWidth)||800,lockAspectRatio:!0,resizeRatio:2,enable:{left:!S,right:!S},handleStyles:{left:{left:0},right:{right:0}},onResize:(t,e,i)=>{k({width:i.offsetWidth,height:i.offsetHeight})},onResizeStop:(t,e,i)=>{console.log("video editor editor.children",x.children),console.log("ReactEditor.findPath(editor, element)",m.findPath(x,y)),console.log("element",y),r.setNodes(x,{data:Object.assign(Object.assign({},y.data),{size:{width:i.offsetWidth,height:i.offsetHeight}})},{at:m.findPath(x,y),match:t=>a.isElement(t)&&"video"===t.type})},handleComponent:{left:l("div",Object.assign({contentEditable:!1,className:Gt},{children:l("div",{className:Ft})})),right:l("div",Object.assign({contentEditable:!1,className:Ut},{children:l("div",{className:Ft})}))}}}),[E.width,E.height,x]),W=!!(null===(f=y.data)||void 0===f?void 0:f.caption),H=!!y.data["data-src"]&&!y.data.url,M=()=>{kt(document.body),O(null)},C=t=>{var e;if(null==t||t.stopPropagation(),null!==j)return M();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;Et(document.body,{reserveScrollBarGap:!0}),O({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(!y.data.url&&!y.data["data-src"]&&!y.data.videoId){const{maxWidth:o=750,maxHeight:n=800}=z.options||{};return d("div",Object.assign({className:Dt,contentEditable:!1},{children:[l("div",{className:i(Yt,{[Xt]:N})}),l(Pt,Object.assign({attributes:t.attributes,element:t.element,editor:x,onUpload:null===(w=z.options)||void 0===w?void 0:w.onUpload,maxSizes:{maxWidth:o,maxHeight:n}},{children:!S&&d("div",{children:[d("button",Object.assign({type:"button",className:It,onClick:C},{children:[l("span",{className:qt}),l("span",{className:qt}),l("span",{className:qt})]})),null!==j&&l(e.ElementOptions,{onClose:M,style:j,element:y,onCopy:M,onDelete:M,onDuplicate:M},y.id)]})})),t.children]}),y.id)}return l("div",Object.assign({contentEditable:!1,draggable:!1,className:i(Dt,{[Tt]:W,[_t]:H})},{children:d(K,Object.assign({},R,{className:Vt},{children:[z.renderer.render(Object.assign(Object.assign({},t),{size:E})),l("div",{className:i(Yt,{[Xt]:N})}),H&&l("div",Object.assign({className:Qt},{children:l(Lt,{})})),!S&&d("div",{children:[d("button",Object.assign({type:"button",className:It,onClick:C},{children:[l("span",{className:qt}),l("span",{className:qt}),l("span",{className:qt})]})),null!==j&&l(e.ElementOptions,{onClose:M,style:j,element:y,onCopy:M,onDelete:M,onDuplicate:M},y.id)]})]}))}),y.id)}const Zt=o({type:"video",renderer:{editor:(t,e)=>i=>l(Jt,Object.assign({editor:t,plugin:e},i)),render:({attributes:e,element:i,children:o,size:n,HTMLAttributes:s})=>{var r,a,h,c;const p=(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%",u=(null==n?void 0:n.height)||(null===(c=null===(h=i.data)||void 0===h?void 0:h.size)||void 0===c?void 0:c.height)||400;if("string"==typeof i.data.provider&&i.data.videoId&&W[i.data.provider]){const n=W[i.data.provider];return d("div",Object.assign({},e,s,{className:t({element:i,HTMLAttributes:s,className:N}),contentEditable:!1,draggable:!1},{children:[l("div",Object.assign({className:j},{children:l("div",Object.assign({className:E},{children:l(n,{videoId:i.data.videoId})}))})),o]}))}return i.data.url||i.data["data-src"]?d("div",Object.assign({},e,{className:N,contentEditable:!1,draggable:!1},{children:[l("video",Object.assign({controls:!0,preload:"metadata",playsInline:!0,src:i.data.url||i.data["data-src"]||"",width:p,height:u,onDragStart:t=>t.preventDefault()},s,{className:t({element:i,HTMLAttributes:s,className:S})})),o]})):l("div",Object.assign({},e,{className:N,contentEditable:!1,draggable:!1},{children:o}))}},extendEditor(t){const{isVoid:e}=t;return t.isVoid=t=>t.type===Zt.getPlugin.type||e(t),t},events:{onKeyDown:(t,{defaultNode:e,hotkeys:i})=>o=>{var s;if("video"===n(t,null===(s=t.selection)||void 0===s?void 0:s.anchor.path,"highest").type&&t.selection)return console.log("hotkeys.isEnter(event)",i.isEnter(o)),i.isEnter(o)?(o.preventDefault(),void r.insertNodes(t,e,{mode:"highest"})):void 0}},defineElement:()=>({id:s(),type:"video",nodeType:"void",data:{url:null,size:{width:"auto",height:"auto"}},children:[{text:""}]}),createElement:(t,e)=>{var i;const o=Object.assign(Object.assign({},Zt.getPlugin.defineElement()),e);r.setNodes(t,o,{at:null===(i=t.selection)||void 0===i?void 0:i.anchor})},exports:{markdown:{serialize:(t,e)=>`<video preload controls src="${t.data.url}" height="${t.data.size.height}" width="${t.data.size.width}"></video>\n`},html:{serialize:t=>`<video preload controls src="${t.data.url}" height="${t.data.size.height}" width="${t.data.size.width}"></video>`,deserialize:{nodeName:"VIDEO",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:"video media",displayLabel:"Video"}});export{Zt as default};