@scaleflex/widget-image-editor 4.4.0 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.5.0...v4.5.1) (2025-10-14)
+
+**Note:** Version bump only for package @scaleflex/widget-image-editor
+
+
+
+
+
+# [4.5.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.4.0...v4.5.0) (2025-10-08)
+
+**Note:** Version bump only for package @scaleflex/widget-image-editor
+
+
+
+
+
 # [4.4.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.4.0) (2025-10-07)
 
 **Note:** Version bump only for package @scaleflex/widget-image-editor

package/dist/style.css

@@ -0,0 +1,27 @@
+@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 { ScaleflexWidget } 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 = ScaleflexWidget.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
+        });
+      }
+    });
+  }
+});

package/lib/b64ToBlob.js

@@ -0,0 +1,19 @@
+var b64toBlob = function b64toBlob(b64Data) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'blob';
+    xhr.open('GET', b64Data);
+    xhr.send();
+    xhr.onload = function () {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response);
+      } else {
+        reject(new Error("Error while loading base64 image. (".concat(xhr.status, ": ").concat(xhr.error, ")")));
+      }
+    };
+    xhr.onerror = function () {
+      reject(new Error("Error while loading base64 image. (".concat(xhr.status, ": ").concat(xhr.error, ")")));
+    };
+  });
+};
+export default b64toBlob;

package/lib/defaultLocale.js

@@ -0,0 +1,13 @@
+export default {
+  imageEditorPathText: 'Path',
+  imageEditorBrowseFoldersButtonLabel: 'Browse',
+  imageEditorNoCloudimgTokenInfo: 'No cloudimage token is provided, so it is not possible to edit the URL.',
+  imageEditorChooseFolderPathTitle: 'Choose folder path',
+  imageEditorSelectFolderTitle: 'Select folder',
+  mutualizedSelectLabel: 'Select',
+  imageEditorSaveAsNewVersionLabel: 'Save as new version',
+  imageEditorDuplicateTheImageLabel: 'Duplicate the image',
+  imageEditorInvalidImageUrl: 'Wrong image URL provided (not found or not valid).',
+  imageEditorImgPreparationForEditInfo: 'Please wait, Image is being prepared for editing...',
+  imageEditorImgNewVersionStartedUploading: 'New version started uploading'
+};

package/lib/index.js

@@ -0,0 +1,126 @@
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, 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); }
+import { Plugin } from '@scaleflex/widget-core';
+import Explorer from '@scaleflex/widget-explorer';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { selectUploadsCount } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { imageEditorOpened, selectImageEditorFile } from '@scaleflex/widget-explorer/lib/slices/panels.slice';
+import ImageEditorUI from './ImageEditor';
+import defaultLocale from './defaultLocale';
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+var ImageEditor = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function ImageEditor(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, ImageEditor);
+    _this = _callSuper(this, ImageEditor, [filerobot, opts]);
+    _defineProperty(_this, "forceOpenImgEditor", function (file) {
+      if (isImage(file) && selectUploadsCount(_this.getGlobalState()) === 1) {
+        _this.dispatch(imageEditorOpened({
+          file: file,
+          showBackButton: 'auto'
+        }));
+      }
+    });
+    _defineProperty(_this, "closeImgEditor", function (closeReason) {
+      // If the force open for image editor enabled, and user closed the image editor then remove the image as it is not saved from image editor.
+      if (closeReason && _this.opts.forceOpenOnImgAddedToUpload && selectUploadsCount(_this.getGlobalState()) > 0) {
+        _this.filerobot.removeUploads(selectImageEditorFile(_this.getGlobalState()));
+      }
+      _this.dispatch(imageEditorOpened({
+        file: null,
+        showBackButton: 'auto'
+      }));
+    });
+    _defineProperty(_this, "render", function (props) {
+      return ImageEditorUI(_objectSpread(_objectSpread({}, props), {}, {
+        closeEditor: _this.closeImgEditor,
+        opts: _this.opts,
+        i18n: _this.i18n
+      }));
+    });
+    _this.id = PLUGINS_IDS.IMAGE_EDITOR;
+    _this.title = 'Image Editor';
+    _this.type = 'editor';
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    _this.i18nInit();
+    _this.opts = _objectSpread(_objectSpread({
+      forceOpenOnImgAddedToUpload: false
+    }, opts), {}, {
+      cloudimage: _objectSpread(_objectSpread({
+        token: filerobot.opts.container
+      }, opts.cloudimage), {}, {
+        dontPrefixUrl: true
+      }),
+      showBackButton: true
+    });
+    return _this;
+  }
+  _inherits(ImageEditor, _Plugin);
+  return _createClass(ImageEditor, [{
+    key: "i18nInit",
+    value: function i18nInit() {
+      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
+      this.i18n = this.translator.translate.bind(this.translator);
+      this.i18nArray = this.translator.translateArray.bind(this.translator);
+    }
+  }, {
+    key: "install",
+    value: function install() {
+      var _this2 = this;
+      if (Explorer) {
+        this.mount(Explorer, this);
+        if (this.opts.forceOpenOnImgAddedToUpload) {
+          this.filerobot.on('file-added', this.forceOpenImgEditor);
+        }
+        if (this.opts.forceOpenAfterUpload) {
+          this.filerobot.on('complete', function (_ref) {
+            var successful = _ref.successful;
+            return _this2.forceOpenImgEditor(successful === null || successful === void 0 ? void 0 : successful[0]);
+          });
+        }
+      }
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.unmount();
+      if (this.opts.forceOpenOnImgAddedToUpload) {
+        this.filerobot.off('file-added', this.forceOpenImgEditor);
+      }
+      if (this.opts.forceOpenAfterUpload) {
+        this.filerobot.off('complete', this.forceOpenImgEditor);
+      }
+    }
+  }]);
+}(Plugin);
+export default ImageEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/widget-image-editor",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "description": "FilerobotImageEditor integration with Scaleflex",
   "license": "MIT",
   "main": "lib/index.js",
@@ -15,9 +15,9 @@
   "dependencies": {
     "@scaleflex/icons": "^3.0.0-beta.11",
     "@scaleflex/ui": "^3.0.0-beta.11",
-    "@scaleflex/widget-common": "^4.4.0",
-    "@scaleflex/widget-icons": "^4.4.0",
-    "@scaleflex/widget-utils": "^4.4.0",
+    "@scaleflex/widget-common": "^4.5.1",
+    "@scaleflex/widget-icons": "^4.5.1",
+    "@scaleflex/widget-utils": "^4.5.1",
     "react-filerobot-image-editor": "5.0.0-beta.93",
     "react-filerobot-video-editor": "1.1.3"
   },
@@ -35,5 +35,5 @@
     "react-konva": ">=19.0.3",
     "react-redux": "^8.1.1"
   },
-  "gitHead": "04b8ec545c4f10be89f5a44eed954acf8433360c"
+  "gitHead": "b211f9961ad30d3eaa01138f34e190ad5d38fb91"
 }