@scaleflex/widget-image-editor 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+# `@scaleflex/widget-image-editor`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+The image editor plugin provides different functionality for editing the image available in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core), gives you the possibility to add watermark, text, shapes, edit image by filters, orientations...etc.
+
+It is required in case you need to have edit image, variants, exporting functionalities.
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-image-editor
+```
+
+### Yarn
+
+```bash
+yarn add @scaleflex/widget-image-editor
+```
+
+then
+
+```js
+import ImageEditor from '@scaleflex/widget-image-editor'
+...
+...
+...
+scaleflexWidget.use(ImageEditor, propertiesObject)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ImageEditor`
+
+```js
+const ImageEditor = window.ScaleflexWidget.ImageEditor
+...
+...
+...
+scaleflexWidget.use(ImageEditor, propertiesObject)
+```
+
+### Plugin's styles
+
+```js
+import '@scaleflex/widget-core/dist/style.css'
+import '@scaleflex/widget-image-editor/dist/style.css'
+```
+
+or if you prefer the minified version
+
+```js
+import '@scaleflex/widget-core/dist/style.min.css'
+import '@scaleflex/widget-image-editor/dist/style.min.css'
+```
+
+> The plugin's css file should be imported after the [Core's css file](../core/#modules-styles) for having the styles shown correctly.
+
+## Properties
+
+### `locale`
+
+<u>Type:</u> `object`.
+
+<u>Default:</u> default locales inside `lib/defaultLocale.js`.
+
+Customizing some of the translations or the language's strings and replace the default locale.
+
+### `forceOpenOnImgAddedToUpload`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `false`
+
+Automatically open the image editor on adding a single image in upload panel. (Note: Upload panel must contain only 1 image).
+
+Check the rest of the options available on [**filerobot-image-editor**](https://github.com/scaleflex/filerobot-image-editor#readme)
+
+> Note: `filerobot` object property, would be overridden internally with your `container` property & SASS key generated through `securityTemplateId` property that are provided in [@scaleflex/widget-core](../core) and cloudimage.token property's value would be the same as `container` unless you provided another value.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-image-editor
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-image-editor?label=Version&style=for-the-badge&logo=npm

package/dist/style.css

@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+.filerobot-ImageEditor-SaveAsModal-fieldGroup {
+  text-align: left;
+  margin-bottom: 12px; }
+
+.filerobot-ImageEditor-SaveAsModal-fieldInput {
+  margin-top: 4px;
+  height: 32px; }
+
+.filerobot-ImageEditor-SaveAsModal-folderFieldGroup {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center; }
+
+.filerobot-ImageEditor-SaveAsModal-folderPathInput {
+  flex-grow: 1;
+  border-radius: 2px 0 0 2px;
+  height: 100%; }
+
+.filerobot-ImageEditor-SaveAsModal-browseButton {
+  background: #E9EEF2;
+  border-radius: 0 2px 2px 0; }

package/dist/style.min.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");.filerobot-ImageEditor-SaveAsModal-fieldGroup{margin-bottom:12px;text-align:left}.filerobot-ImageEditor-SaveAsModal-fieldInput{height:32px;margin-top:4px}.filerobot-ImageEditor-SaveAsModal-folderFieldGroup{align-items:center;display:flex;justify-content:flex-start}.filerobot-ImageEditor-SaveAsModal-folderPathInput{border-radius:2px 0 0 2px;flex-grow:1;height:100%}.filerobot-ImageEditor-SaveAsModal-browseButton{background:#e9eef2;border-radius:0 2px 2px 0}

package/lib/ImageEditor.js

@@ -0,0 +1,452 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import FilerobotImageEditor from 'react-filerobot-image-editor';
+import FilerobotVideoEditor from 'react-filerobot-video-editor';
+import { Filerobot } from '@scaleflex/widget-core';
+import { FolderMoveTo, Duplicate } from '@scaleflex/icons';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import blobToDataURI from '@scaleflex/widget-utils/lib/blobToDataURI';
+import { HistoryIcon } from '@scaleflex/widget-icons';
+import { LoaderView, PC } from '@scaleflex/widget-common';
+import { IMAGE_EDITOR_MODES, PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useModal, useCore, usePlugin } from '@scaleflex/widget-core/lib/hooks';
+import { useExplorer, useLocateFile } from '@scaleflex/widget-explorer/lib/hooks';
+import { selectCurrentFolderPath } from '@scaleflex/widget-explorer/lib/slices/folders.slice';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import getImageEditUrl from '@scaleflex/widget-utils/lib/getImageEditUrl';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import FolderSelector from '@scaleflex/widget-explorer/lib/components/common/FolderSelector';
+import { addUploadActivity } from '@scaleflex/widget-explorer/lib/thunks/uploads.thunks';
+import { selectContainerWidth } from '@scaleflex/widget-explorer/lib/slices/common.slice';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import isVideo from '@scaleflex/widget-utils/lib/isVideo';
+import b64toBlob from './b64ToBlob';
+import { addVideoProcessingActivity } from './ImageEditor.thunks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var fallbackFolderPath = encodeURI('/Edited by image editor');
+
+// TODO: we might split this component into 2 components: one for handling image link retrieving if not found, and another for showing the editor.
+var ImageEditor = function ImageEditor(_ref) {
+  var _pluginOpts$cloudimag2, _pluginOpts$cloudimag3, _pluginOpts$cloudimag4;
+  var file = _ref.file,
+    userMode = _ref.mode,
+    showBackButton = _ref.showBackButton,
+    hideSavingOptions = _ref.hideSavingOptions,
+    pluginOpts = _ref.opts,
+    closeEditor = _ref.closeEditor,
+    i18n = _ref.i18n;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    info = _useCore.info,
+    hideInfo = _useCore.hideInfo,
+    addFile = _useCore.addFile,
+    emit = _useCore.emit,
+    off = _useCore.off,
+    setFileStateBeforeUpload = _useCore.setFileStateBeforeUpload,
+    _useCore$opts = _useCore.opts,
+    language = _useCore$opts.language,
+    container = _useCore$opts.container,
+    securityTemplateId = _useCore$opts.securityTemplateId,
+    sassKey = _useCore$opts.sassKey;
+  var _useExplorer = useExplorer(),
+    closeModal = _useExplorer.closeModal,
+    isDevEnv = _useExplorer.isDevEnv,
+    _useExplorer$opts = _useExplorer.opts,
+    inline = _useExplorer$opts.inline,
+    closeAfterImageEdit = _useExplorer$opts.closeAfterImageEdit,
+    imageEditorMode = _useExplorer$opts.imageEditorMode;
+  var isUpload = isUploadableFile(file);
+  var mode = !isUpload && userMode === IMAGE_EDITOR_MODES.DEFAULT && imageEditorMode || userMode;
+  var theme = useTheme();
+  var toggleModal = useModal();
+  var containerWidth = useSelector(selectContainerWidth);
+  var currentFolderPath = useSelector(selectCurrentFolderPath);
+  var progressPanelInstance = usePlugin(PLUGINS_IDS.PROGRESS_PANEL);
+  var locateFile = useLocateFile();
+  var _ref2 = (file === null || file === void 0 ? void 0 : file.info) || {},
+    imgWidth = _ref2.img_w,
+    imgHeight = _ref2.img_h;
+  var _useState = useState(function () {
+      var _window;
+      return getImageEditUrl(file, {
+        isDevEnv: isDevEnv,
+        containerToken: container,
+        mode: mode,
+        containerWidth: parseInt(containerWidth) || ((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth)
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    imgFileUrl = _useState2[0],
+    setImgFileUrl = _useState2[1];
+  var _useState3 = useState(function () {
+      return Boolean(imgFileUrl);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoadingUrl = _useState4[0],
+    setIsLoadingUrl = _useState4[1];
+  var isCloudimageMode = mode === IMAGE_EDITOR_MODES.CLOUDIMAGE || pluginOpts.useCloudimage;
+  var source = useMemo(function () {
+    return (
+      // we're providing width, height & src cause the provided src might be optimized by cloudimage's resizing then not the real original dimensions
+      isCloudimageMode && imgWidth && imgHeight ? {
+        width: imgWidth,
+        height: imgHeight,
+        src: imgFileUrl
+      } : imgFileUrl
+    );
+  }, [isCloudimageMode, imgWidth, imgHeight, imgFileUrl]);
+
+  // We remove the bg-primary-active provided from the theme as it is not handled properly from configurations, so we are keep using image editor's default.
+  var defaultImgEditorTheme = useMemo(function () {
+    var newTheme = _objectSpread({
+      palette: _objectSpread({}, theme.palette)
+    }, theme.typography && {
+      typography: {
+        fontFamily: theme.typography.fontFamily
+      }
+    });
+    if (newTheme.palette['bg-primary-active']) {
+      delete newTheme.palette['bg-primary-active'];
+    }
+    return newTheme;
+  }, [theme]);
+  var iconAccentActiveColor = theme.palette[PC.AccentPrimaryActive];
+  var handleClose = function handleClose() {
+    closeEditor();
+    off('url-modified');
+    if (!inline && closeAfterImageEdit) {
+      closeModal();
+    }
+  };
+  useEffect(function () {
+    if (!imgFileUrl && isUpload) {
+      info(i18n('imageEditorImgPreparationForEditInfo', 'info'));
+      setIsLoadingUrl(true);
+      var fileData = Filerobot.uploadFilesData[file.id];
+      if (isVideo(file)) {
+        setImgFileUrl(fileData);
+      } else {
+        handlePromise(blobToDataURI(fileData), setImgFileUrl, info, function () {
+          info(i18n('imageEditorInvalidImageUrl'), 'error', 5000);
+          setIsLoadingUrl(false);
+          hideInfo();
+        });
+      }
+    }
+  }, [file.uuid, file.id]);
+  useEffect(function () {
+    var _pluginOpts$cloudimag;
+    if (mode === IMAGE_EDITOR_MODES.CLOUDIMAGE && !((_pluginOpts$cloudimag = pluginOpts.cloudimage) !== null && _pluginOpts$cloudimag !== void 0 && _pluginOpts$cloudimag.token)) {
+      handleClose();
+      info(i18n('imageEditorNoCloudimgTokenInfo'), 'error', 5000);
+    }
+  }, [mode, (_pluginOpts$cloudimag2 = pluginOpts.cloudimage) === null || _pluginOpts$cloudimag2 === void 0 ? void 0 : _pluginOpts$cloudimag2.token]);
+  if (!imgFileUrl) {
+    if (isLoadingUrl) {
+      return /*#__PURE__*/_jsx(LoaderView, {
+        loaderLabel: i18n('loaderLoadingLabel')
+      });
+    }
+    return null;
+  }
+  if (mode === IMAGE_EDITOR_MODES.CLOUDIMAGE && !((_pluginOpts$cloudimag3 = pluginOpts.cloudimage) !== null && _pluginOpts$cloudimag3 !== void 0 && _pluginOpts$cloudimag3.token)) {
+    return null;
+  }
+  var uploadToFolder = currentFolderPath || fallbackFolderPath;
+  var showEditor = mode !== IMAGE_EDITOR_MODES.CLOUDIMAGE || mode === IMAGE_EDITOR_MODES.CLOUDIMAGE && ((_pluginOpts$cloudimag4 = pluginOpts.cloudimage) === null || _pluginOpts$cloudimag4 === void 0 ? void 0 : _pluginOpts$cloudimag4.token);
+
+  // newFolderPath are being passed in 2 cases of folder (canceling or selecting).
+  var toggleFolderSelector = function toggleFolderSelector(triggerUpload, newFolderPath) {
+    var defaultFolderPath = newFolderPath || uploadToFolder;
+    toggleModal({
+      icon: /*#__PURE__*/_jsx(FolderMoveTo, {
+        size: 29,
+        color: iconAccentActiveColor
+      }),
+      title: i18n('imageEditorChooseFolderPathTitle'),
+      showTitleLabel: true,
+      content: function content(_ref3) {
+        var setPrimaryButtonDisabled = _ref3.setPrimaryButtonDisabled,
+          updateData = _ref3.updateData,
+          data = _ref3.data;
+        return /*#__PURE__*/_jsx(FolderSelector, {
+          setPrimaryButtonDisabled: setPrimaryButtonDisabled,
+          selectedFolder: data || defaultFolderPath,
+          onSelect: updateData,
+          onRemoveSelectedFolder: function onRemoveSelectedFolder() {
+            return updateData(null);
+          },
+          hideAddNewFolderButton: true
+        });
+      },
+      buttonPrimaryLabel: i18n('mutualizedConfirmButtonLabel'),
+      onButtonPrimaryClick: function onButtonPrimaryClick(_ref4) {
+        var selectedFolder = _ref4.data,
+          closeModal = _ref4.closeModal;
+        triggerUpload((selectedFolder === null || selectedFolder === void 0 ? void 0 : selectedFolder.path) || defaultFolderPath);
+        closeModal();
+        handleClose();
+      },
+      enterKeySubmits: true,
+      modalStyle: {
+        maxWidth: 400
+      },
+      modalFooterStyle: {
+        flexDirection: 'row'
+      },
+      modalPrimaryButton: {
+        width: 170
+      },
+      modalSecondaryButton: {
+        width: 170
+      },
+      modalSecondaryButtonColor: 'basic'
+    });
+  };
+  var uploadNewFile = function uploadNewFile(fileDescriptor, toFolder, activityId) {
+    var _file$folder;
+    var onUpload = function onUpload(file) {
+      if (progressPanelInstance) {
+        dispatch(addUploadActivity({
+          file: file,
+          locateFile: locateFile,
+          activityId: activityId
+        }));
+      }
+    };
+    addFile(_objectSpread(_objectSpread({}, fileDescriptor), {}, {
+      meta: file.meta,
+      product: file.product,
+      toFolder: toFolder || ((_file$folder = file.folder) === null || _file$folder === void 0 ? void 0 : _file$folder.name) || file.toFolder,
+      currentUploadId: activityId
+    }), true, onUpload);
+    if (!isVideo(file)) {
+      info(i18n('imageEditorImgNewVersionStartedUploading'), 'info', 3000);
+    }
+  };
+  var prepareNewFile = function prepareNewFile(_ref5) {
+    var mediaFile = _ref5.mediaFile,
+      blobData = _ref5.blobData,
+      url = _ref5.url;
+    try {
+      var fileName = mediaFile.fullName || mediaFile.name;
+      var commonFileDescriptor = {
+        source: PLUGINS_IDS.IMAGE_EDITOR,
+        name: fileName,
+        type: mediaFile.mimeType,
+        xhrQueryParams: {
+          image_editor: 'edited'
+        },
+        info: {
+          type: mediaFile.mimeType
+        }
+      };
+      var fileDescriptor = {};
+      if (blobData) {
+        var newFileData = new File([blobData], fileName, {
+          type: mediaFile.mimeType
+        });
+        fileDescriptor = _objectSpread(_objectSpread({}, commonFileDescriptor), {}, {
+          data: newFileData,
+          size: newFileData.size
+        });
+      }
+      if (url) {
+        fileDescriptor = _objectSpread(_objectSpread({}, commonFileDescriptor), {}, {
+          uploadUrl: url,
+          xhrHeaders: {
+            'Content-Type': 'application/json'
+          }
+        });
+      }
+      return fileDescriptor;
+      // It is not needed to pass the new file data in the file's object
+      // as thumbnail generator retrieves the files from the core state while generating previews
+    } catch (err) {
+      info(err, 'error', 3000);
+    }
+  };
+  var finishSaving = function finishSaving(_ref6) {
+    var newFile = _ref6.newFile,
+      toFolderPath = _ref6.toFolderPath,
+      activityId = _ref6.activityId,
+      avoidSaveAsModal = _ref6.avoidSaveAsModal;
+    if (isUploadableFile(file)) {
+      setFileStateBeforeUpload(file.id, newFile);
+      emit('thumbnail:update', _objectSpread({
+        id: file.id
+      }, newFile));
+      return;
+    }
+    if (avoidSaveAsModal) {
+      uploadNewFile(newFile, toFolderPath, activityId);
+      return;
+    }
+    toggleFolderSelector(function (toFolderPath) {
+      uploadNewFile(newFile, toFolderPath, activityId);
+    });
+  };
+  var handleSaving = async function handleSaving(_ref7) {
+    var mediaFile = _ref7.mediaFile,
+      designState = _ref7.designState,
+      _ref7$avoidSaveAsModa = _ref7.avoidSaveAsModal,
+      avoidSaveAsModal = _ref7$avoidSaveAsModa === void 0 ? true : _ref7$avoidSaveAsModa,
+      activityId = _ref7.activityId,
+      toFolderPath = _ref7.toFolderPath,
+      _ref7$enableClose = _ref7.enableClose,
+      enableClose = _ref7$enableClose === void 0 ? true : _ref7$enableClose;
+    if (mediaFile.videoBlob || mediaFile.videoUrl) {
+      var newFile = prepareNewFile({
+        mediaFile: mediaFile,
+        blobData: mediaFile.videoBlob,
+        url: mediaFile.videoUrl
+      });
+      finishSaving({
+        newFile: newFile,
+        toFolderPath: toFolderPath,
+        activityId: activityId,
+        avoidSaveAsModal: avoidSaveAsModal
+      });
+    }
+    if (mediaFile.cloudimageUrl) {
+      var _designState$adjustme;
+      var sanitizedCloudimageUrl = mediaFile.cloudimageUrl.replace(imgFileUrl, getFileLink(file));
+      emit('url-modified', sanitizedCloudimageUrl, _objectSpread(_objectSpread({}, designState === null || designState === void 0 ? void 0 : (_designState$adjustme = designState.adjustments) === null || _designState$adjustme === void 0 ? void 0 : _designState$adjustme.crop), {}, {
+        onClose: handleClose
+      }), info);
+    }
+    if (mediaFile.imageBase64) {
+      b64toBlob(mediaFile.imageBase64).then(function (blobData) {
+        var newFile = prepareNewFile({
+          mediaFile: mediaFile,
+          blobData: blobData
+        });
+        finishSaving({
+          newFile: newFile,
+          toFolderPath: toFolderPath,
+          activityId: activityId,
+          avoidSaveAsModal: avoidSaveAsModal
+        });
+      })["catch"](function (err) {
+        info(err, 'error', 3000);
+      });
+    }
+    if (enableClose) {
+      handleClose();
+    }
+  };
+  var handleSavingVideoAfterUpload = async function handleSavingVideoAfterUpload(_ref8) {
+    var mediaFile = _ref8.mediaFile,
+      processVideo = _ref8.processVideo,
+      checkVideoStatus = _ref8.checkVideoStatus,
+      getFinalVideoData = _ref8.getFinalVideoData,
+      toFolderPath = _ref8.toFolderPath;
+    handleClose();
+    var processedFileData = await dispatch(addVideoProcessingActivity({
+      mediaFile: mediaFile,
+      processVideo: processVideo,
+      checkVideoStatus: checkVideoStatus
+    }));
+    var processedMediaFile = getFinalVideoData(processedFileData.mediaFileInfo, processedFileData.result);
+    handleSaving({
+      mediaFile: processedMediaFile.data,
+      activityId: processedFileData.activity.id,
+      toFolderPath: toFolderPath,
+      enableClose: false
+    });
+  };
+  var moreSavingOptions = [_objectSpread({
+    label: i18n('imageEditorSaveAsNewVersionLabel'),
+    icon: HistoryIcon,
+    onClick: function onClick(_, startSaving) {
+      startSaving(function (mediaFile, designState) {
+        return handleSaving({
+          mediaFile: mediaFile,
+          designState: designState
+        });
+      });
+    }
+  }, !isUploadableFile(file) && isVideo(file) && {
+    onSaveVideoCb: function onSaveVideoCb(_, startSaving) {
+      startSaving(handleSavingVideoAfterUpload);
+    }
+  }), _objectSpread({
+    label: i18n('imageEditorDuplicateTheImageLabel'),
+    icon: Duplicate,
+    onClick: function onClick(triggerSaveModal) {
+      triggerSaveModal(function (mediaFile, designState) {
+        return handleSaving({
+          mediaFile: mediaFile,
+          designState: designState,
+          avoidSaveAsModal: false,
+          enableClose: false
+        });
+      });
+    }
+  }, !isUploadableFile(file) && isVideo(file) && {
+    onSaveVideoCb: function onSaveVideoCb(triggerSaveModal) {
+      triggerSaveModal(function (_ref9) {
+        var mediaFile = _ref9.mediaFile,
+          processVideo = _ref9.processVideo,
+          checkVideoStatus = _ref9.checkVideoStatus,
+          getFinalVideoData = _ref9.getFinalVideoData;
+        toggleFolderSelector(function (toFolderPath) {
+          handleSavingVideoAfterUpload({
+            mediaFile: mediaFile,
+            processVideo: processVideo,
+            checkVideoStatus: checkVideoStatus,
+            getFinalVideoData: getFinalVideoData,
+            toFolderPath: toFolderPath
+          });
+        });
+      });
+    }
+  })];
+  var commonProps = _objectSpread(_objectSpread({
+    language: language.toLowerCase(),
+    defaultSavedImageName: file.name,
+    onBeforeSave: function onBeforeSave() {
+      return false;
+    },
+    theme: defaultImgEditorTheme
+  }, pluginOpts), {}, {
+    onClose: handleClose,
+    source: source,
+    onSave: function onSave(mediaFile, designState) {
+      return handleSaving({
+        mediaFile: mediaFile,
+        designState: designState
+      });
+    },
+    showBackButton: showBackButton,
+    useCloudimage: mode === IMAGE_EDITOR_MODES.CLOUDIMAGE || pluginOpts.useCloudimage,
+    moreSaveOptions: mode !== IMAGE_EDITOR_MODES.CLOUDIMAGE && !hideSavingOptions && moreSavingOptions,
+    cloudimage: _objectSpread(_objectSpread({}, pluginOpts.cloudimage), {}, {
+      loadableQuery: file.cloudimageQuery
+    })
+  });
+  if (isVideo(file) && showEditor) {
+    return /*#__PURE__*/_jsx(FilerobotVideoEditor, _objectSpread(_objectSpread({}, commonProps), {}, {
+      useBackendProcess: true,
+      backendProcess: {
+        token: container,
+        key: securityTemplateId || sassKey,
+        url: getFileLink(file, 'permalink')
+      }
+    }));
+  }
+  return showEditor && /*#__PURE__*/_jsx(FilerobotImageEditor, _objectSpread({}, commonProps));
+};
+export default ImageEditor;

package/lib/ImageEditor.thunks.js

@@ -0,0 +1,63 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import cuid from 'cuid';
+import createThunk from '@scaleflex/widget-utils/lib/createThunk';
+import { PLUGINS_IDS, PROGRESS_PANEL_STATUS, PROGRESS_PANEL_ACTIVITY } from '@scaleflex/widget-utils/lib/constants';
+import { PC } from '@scaleflex/widget-common';
+export var addVideoProcessingActivity = createThunk(async function (_ref, thunkApi) {
+  var activityId = _ref.id,
+    mediaFile = _ref.mediaFile,
+    processVideo = _ref.processVideo,
+    checkVideoStatus = _ref.checkVideoStatus;
+  var extra = thunkApi.extra;
+  var progressPanelPlugin = extra.filerobot.getPlugin(PLUGINS_IDS.PROGRESS_PANEL);
+  var id = activityId || cuid();
+  if (progressPanelPlugin) {
+    return progressPanelPlugin.addActivity({
+      activity: {
+        id: id,
+        name: "".concat(mediaFile.name, ".").concat(mediaFile.extension),
+        type: PROGRESS_PANEL_ACTIVITY.PROCESSING_VIDEO,
+        progress: {
+          percentage: 0,
+          startedAt: Date.now(),
+          status: PROGRESS_PANEL_STATUS.PREPARING
+        },
+        icon: {
+          name: 'Video',
+          color: PC.Instagram
+        },
+        statusData: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PROGRESS_PANEL_STATUS.PREPARING, {
+          labelI18nKey: 'progressPanelPreparingVideoLabel'
+        }), PROGRESS_PANEL_STATUS.PROGRESSING, {
+          labelI18nKey: 'progressPanelPreparingVideoLabel'
+        }), PROGRESS_PANEL_STATUS.ERROR, {
+          labelI18nKey: 'progressPanelVideoFailedLabel'
+        }), PROGRESS_PANEL_STATUS.COMPLETE, {
+          labelI18nKey: 'progressPanelVideoCompletedLabel'
+        })
+      },
+      onStart: function onStart() {
+        return processVideo(mediaFile);
+      },
+      onProgress: async function onProgress(_ref2) {
+        var onStartData = _ref2.onStartData;
+        return await checkVideoStatus({
+          response: onStartData.response,
+          mediaFileInfo: onStartData.mediaFileInfo,
+          isRecursive: false
+        });
+      },
+      onRetry: function onRetry() {
+        return addVideoProcessingActivity({
+          id: id,
+          mediaFile: mediaFile,
+          processVideo: processVideo,
+          checkVideoStatus: checkVideoStatus
+        });
+      }
+    });
+  }
+});