feat: add edit image from storage on mobile editors

apps/documenteditor/mobile/locale/en.json

@@ -50,6 +50,7 @@
     "textPageNumber": "Page Number",
     "textPasteImageUrl": "Paste an image URL",
     "textPictureFromLibrary": "Picture from Library",
+    "textPictureFromStorage": "Picture from Storage",
     "textPictureFromURL": "Picture from URL",
     "textPosition": "Position",
     "textRecommended": "Recommended",
@@ -361,6 +362,7 @@
     "textParagraph": "Paragraph",
     "textParagraphStyle": "Paragraph Style",
     "textPictureFromLibrary": "Picture from Library",
+    "textPictureFromStorage": "Picture from Storage",
     "textPictureFromURL": "Picture from URL",
     "textPlaceholder": "Placeholder",
     "textPt": "pt",

apps/documenteditor/mobile/locale/fr.json

@@ -50,6 +50,7 @@
     "textPageNumber": "Numéro de page",
     "textPasteImageUrl": "Coller l'URL de l'image",
     "textPictureFromLibrary": "Image depuis la bibliothèque",
+    "textPictureFromStorage": "Image de stockage",
     "textPictureFromURL": "Image à partir d'une URL",
     "textPosition": "Position",
     "textRecommended": "Recommandations",
@@ -361,6 +362,7 @@
     "textParagraph": "Paragraphe",
     "textParagraphStyle": "Style de paragraphe",
     "textPictureFromLibrary": "Image depuis la bibliothèque",
+    "textPictureFromStorage": "Image de stockage",
     "textPictureFromURL": "Image à partir d'une URL",
     "textPlaceholder": "Espace réservé",
     "textPt": "pt",

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -589,7 +589,12 @@ class MainController extends Component {
             data._urls = arr;
         }
 
-        this.insertImageFromStorage(data);
+        if(data.c === 'add') {
+            this.insertImageFromStorage(data);
+        }
+        else if(data.c === 'change') {
+            this.replaceImageFromStorage(data);
+        }
     }
 
     loadDefaultMetricSettings() {
@@ -1045,6 +1050,14 @@ class MainController extends Component {
         }
     }
 
+    replaceImageFromStorage (data) {
+        if (data && data._urls && (!data.c || data.c === 'change') && data._urls.length > 0) {
+            const image = new Asc.asc_CImgProperty();
+            image.put_ImageUrl(data._urls[0], data.token);
+            this.api.ImgApply(image);
+        }
+    }
+
     markFavorite(favorite) {
         Common.Gateway.metaChange({ favorite });
     }

apps/documenteditor/mobile/src/controller/add/AddImage.jsx

@@ -10,6 +10,7 @@ class AddImageController extends Component {
         super(props);
         this.onInsertByFile = this.onInsertByFile.bind(this);
         this.onInsertByUrl = this.onInsertByUrl.bind(this);
+        this.onInsertByStorage = this.onInsertByStorage.bind(this);
     }
 
     closeModal () {
@@ -45,15 +46,21 @@ class AddImageController extends Component {
         }
     }
 
+    onInsertByStorage () {
+        Common.Gateway.requestInsertImage('add');
+        this.closeModal();
+    }
+
     render () {
         return (
             <AddImage onInsertByFile={this.onInsertByFile}
                       onInsertByUrl={this.onInsertByUrl}
+                      onInsertByStorage={this.onInsertByStorage}
             />
         )
     }
 }
 
 const AddImageWithTranslation = withTranslation()(AddImageController);
 
-export {AddImageWithTranslation as AddImageController};
+export {AddImageWithTranslation as AddImageController};

apps/documenteditor/mobile/src/controller/edit/EditImage.jsx

@@ -12,6 +12,7 @@ class EditImageController extends Component {
         this.onRemoveImage = this.onRemoveImage.bind(this);
         this.onReplaceByFile = this.onReplaceByFile.bind(this);
         this.onReplaceByUrl = this.onReplaceByUrl.bind(this);
+        this.onReplaceByStorage = this.onReplaceByStorage.bind(this);
     }
 
     closeModal () {
@@ -117,6 +118,11 @@ class EditImageController extends Component {
         }
     }
 
+    onReplaceByStorage () {
+        Common.Gateway.requestInsertImage('change');
+        this.closeModal();
+    }
+
     onReorder (type) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -145,10 +151,11 @@ class EditImageController extends Component {
                        onWrapDistance={this.onWrapDistance}
                        onReplaceByFile={this.onReplaceByFile}
                        onReplaceByUrl={this.onReplaceByUrl}
+                       onReplaceByStorage={this.onReplaceByStorage}
                        onReorder={this.onReorder}
             />
         )
     }
 }
 
-export default inject("storeImageSettings")(observer(EditImageController));
+export default inject("storeImageSettings")(observer(EditImageController));

apps/documenteditor/mobile/src/store/appOptions.js

@@ -22,6 +22,10 @@ export class storeAppOptions {
             canBrandingExt: observable,
             canBranding: observable,
 
+
+            canRequestInsertImage: observable,
+            changeCanRequestInsertImage: action,
+
             isDocReady: observable,
             changeDocReady: action,
 
@@ -110,6 +114,11 @@ export class storeAppOptions {
         this.isDocReady = value;
     }
 
+    canRequestInsertImage = false;
+    changeCanRequestInsertImage(value) {
+        this.canRequestInsertImage = value;
+    }
+
     config = {};
     customization;
 
@@ -142,6 +151,7 @@ export class storeAppOptions {
         this.saveAsUrl = config.saveAsUrl;
         this.canAnalytics = false;
         this.canRequestClose = config.canRequestClose;
+        this.canRequestInsertImage = config.canRequestInsertImage === true;
         this.canCloseEditor = false;
 
         let canBack = false;
@@ -226,7 +236,7 @@ export class storeAppOptions {
         this.trialMode = params.asc_getLicenseMode();
 
         const type = /^(?:(pdf|djvu|xps|oxps))$/.exec(document.fileType);
-        
+
         this.canDownloadOrigin = false;
         this.canDownload = permissions.download !== false;
         this.canReader = (!type || typeof type[1] !== 'string');
@@ -240,12 +250,12 @@ export class storeAppOptions {
         if ( this.isLightVersion ) {
             this.canUseHistory = this.canReview = this.isReviewOnly = false;
         }
-        this.canUseReviewPermissions = this.canLicense && (!!permissions.reviewGroups || this.customization 
+        this.canUseReviewPermissions = this.canLicense && (!!permissions.reviewGroups || this.customization
             && this.customization.reviewPermissions && (typeof (this.customization.reviewPermissions) == 'object'));
         this.canUseCommentPermissions = this.canLicense && !!permissions.commentGroups;
         this.canUseUserInfoPermissions = this.canLicense && !!permissions.userInfoGroups;
         this.canUseReviewPermissions && AscCommon.UserInfoParser.setReviewPermissions(permissions.reviewGroups, this.customization.reviewPermissions);
-        this.canUseCommentPermissions && AscCommon.UserInfoParser.setCommentPermissions(permissions.commentGroups);    
+        this.canUseCommentPermissions && AscCommon.UserInfoParser.setCommentPermissions(permissions.commentGroups);
         this.canUseUserInfoPermissions && AscCommon.UserInfoParser.setUserInfoPermissions(permissions.userInfoGroups);
 
         this.canLiveView = !!params.asc_getLiveViewerSupport() && (this.config.mode === 'view') && !(type && typeof type[1] === 'string') && isSupportEditFeature;

apps/documenteditor/mobile/src/view/add/AddImage.jsx

@@ -8,6 +8,7 @@ import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg?ios';
 import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg';
 import IconLinkIos from '@common-ios-icons/icon-link.svg?ios';
 import IconLinkAndroid from '@common-android-icons/icon-link.svg';
+import IconImageStorage from '@common-icons/icon-image-storage.svg';
 
 
 const PageLinkSettings = props => {
@@ -36,9 +37,11 @@ const PageLinkSettings = props => {
     )
 };
 
-const AddImage = props => {
+const AddImage = inject('storeAppOptions')(observer(props => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
+    const canRequestInsertImage = props.storeAppOptions.canRequestInsertImage;
+
     return (
         <Page>
             <Navbar title={_t.textInsertImage} backLink={_t.textBack}></Navbar>
@@ -57,9 +60,15 @@ const AddImage = props => {
                         <SvgIcon slot="media" symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
                     }
                 </ListItem>
+                {
+                canRequestInsertImage &&
+                <ListItem title={_t.textPictureFromStorage} onClick={() => {props.onInsertByStorage()}}>
+                    <SvgIcon slot="media" symbolId={IconImageStorage.id} className={'icon icon-svg'} />
+                </ListItem>
+            }
             </List>
         </Page>
     )
-};
+}));
 
 export {AddImage, PageLinkSettings as PageImageLinkSettings};

apps/documenteditor/mobile/src/view/edit/EditImage.jsx

@@ -25,6 +25,7 @@ import IconMoveForeground from '@common-icons/icon-move-foreground.svg';
 import IconMoveBackground from '@common-icons/icon-move-background.svg';
 import IconMoveForward from '@common-icons/icon-move-forward.svg';
 import IconMoveBackward from '@common-icons/icon-move-backward.svg';
+import IconImageStorage from '@common-icons/icon-image-storage.svg';
 
 
 const PageWrap = props => {
@@ -287,6 +288,8 @@ const PageReplace = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const imageObject = props.storeFocusObjects.imageObject;
+    const canRequestInsertImage = props.storeAppOptions.canRequestInsertImage;
+
     if (!imageObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
         return null;
@@ -320,6 +323,12 @@ const PageReplace = props => {
                         <SvgIcon slot="media" symbolId={IconLinkAndroid.id} className={'icon icon-svg'} />
                     }
                 </ListItem>
+                {
+                    canRequestInsertImage &&
+                    <ListItem title={_t.textPictureFromStorage} onClick={() => {props.onReplaceByStorage()}}>
+                        <SvgIcon slot="media" symbolId={IconImageStorage.id} className={'icon icon-svg'} />
+                    </ListItem>
+                }
             </List>
         </Page>
     )
@@ -385,7 +394,8 @@ const EditImage = props => {
                 }}></ListItem>
                 <ListItem title={t('Edit.textReplaceImage')} link='/edit-image-replace/' className={pluginGuid ? 'disabled' : ''} routeProps={{
                     onReplaceByFile: props.onReplaceByFile,
-                    onReplaceByUrl: props.onReplaceByUrl
+                    onReplaceByUrl: props.onReplaceByUrl,
+                    onReplaceByStorage: props.onReplaceByStorage
                 }}></ListItem>
                 { wrapType !== 'inline' && <ListItem title={t('Edit.textArrange')} link='/edit-image-reorder/' routeProps={{
                     onReorder: props.onReorder
@@ -401,7 +411,7 @@ const EditImage = props => {
 
 const EditImageContainer = inject("storeFocusObjects", "storeImageSettings")(observer(EditImage));
 const PageWrapContainer = inject("storeFocusObjects", "storeImageSettings")(observer(PageWrap));
-const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace));
+const PageReplaceContainer = inject("storeAppOptions","storeFocusObjects")(observer(PageReplace));
 const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
 const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
 const PageWrappingStyleContainer = inject("storeFocusObjects")(observer(PageWrappingStyle));

apps/presentationeditor/mobile/locale/en.json

@@ -323,6 +323,7 @@
       "textPasteImageUrl": "Paste an image URL",
       "textPictureFromLibrary": "Picture from Library",
       "textPictureFromURL": "Picture from URL",
+      "textPictureFromStorage": "Picture from Storage",
       "textPreviousSlide": "Previous Slide",
       "textRecommended": "Recommended",
       "textRequired": "Required",
@@ -453,6 +454,7 @@
       "textOptions": "Options",
       "textPictureFromLibrary": "Picture from Library",
       "textPictureFromURL": "Picture from URL",
+      "textPictureFromStorage": "Picture from Storage",
       "textPreviousSlide": "Previous Slide",
       "textPt": "pt",
       "textPush": "Push",

apps/presentationeditor/mobile/locale/fr.json

@@ -321,6 +321,7 @@
       "textPasteImageUrl": "Coller l'URL de l'image",
       "textPictureFromLibrary": "Image depuis la bibliothèque",
       "textPictureFromURL": "Image à partir d'une URL",
+      "textPictureFromStorage": "Image de stockage",
       "textPreviousSlide": "Diapositive précédente",
       "textRecommended": "Recommandations",
       "textRequired": "Obligatoire",
@@ -451,6 +452,7 @@
       "textOptions": "Options",
       "textPictureFromLibrary": "Image depuis la bibliothèque",
       "textPictureFromURL": "Image à partir d'une URL",
+      "textPictureFromStorage": "Image de stockage",
       "textPreviousSlide": "Diapositive précédente",
       "textPt": "pt",
       "textPush": "Expulsion",

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -550,6 +550,14 @@ class MainController extends Component {
         }
     }
 
+    replaceImageFromStorage (data) {
+        if (data && data._urls && (!data.c || data.c === 'change') && data._urls.length > 0) {
+            const image = new Asc.asc_CImgProperty();
+            image.put_ImageUrl(data._urls[0], data.token);
+            this.api.ImgApply(image);
+        }
+    }
+
     onApiTextReplaced(found, replaced) {
         const { t } = this.props;
 
@@ -647,7 +655,12 @@ class MainController extends Component {
             data._urls = arr;
         }
 
-        this.insertImageFromStorage(data);
+        if(data.c === 'add') {
+            this.insertImageFromStorage(data);
+        }
+        else if(data.c === 'change') {
+            this.replaceImageFromStorage(data);
+        }
     }
 
     onLicenseChanged (params) {

apps/presentationeditor/mobile/src/controller/add/AddImage.jsx

@@ -10,6 +10,7 @@ class AddImageController extends Component {
         super(props);
         this.onInsertByFile = this.onInsertByFile.bind(this);
         this.onInsertByUrl = this.onInsertByUrl.bind(this);
+        this.onInsertByStorage = this.onInsertByStorage.bind(this);
     }
 
     closeModal () {
@@ -45,15 +46,22 @@ class AddImageController extends Component {
         }
     }
 
+    onInsertByStorage () {
+        Common.Gateway.requestInsertImage('add');
+        this.closeModal();
+    }
+
+
     render () {
         return (
             <AddImage onInsertByFile={this.onInsertByFile}
                       onInsertByUrl={this.onInsertByUrl}
+                      onInsertByStorage={this.onInsertByStorage}
             />
         )
     }
 }
 
 const AddImageWithTranslation = withTranslation()(AddImageController);
 
-export {AddImageWithTranslation as AddImageController};
+export {AddImageWithTranslation as AddImageController};

apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx

@@ -11,6 +11,7 @@ class EditImageController extends Component {
         this.onRemoveImage = this.onRemoveImage.bind(this);
         this.onReplaceByFile = this.onReplaceByFile.bind(this);
         this.onReplaceByUrl = this.onReplaceByUrl.bind(this);
+        this.onReplaceByStorage = this.onReplaceByStorage.bind(this);
     }
 
     onReorder(type) {
@@ -102,6 +103,10 @@ class EditImageController extends Component {
         this.closeModal();
     }
 
+    onReplaceByStorage () {
+        Common.Gateway.requestInsertImage('change');
+        this.closeModal();
+    }
 
     render () {
         return (
@@ -112,9 +117,10 @@ class EditImageController extends Component {
                 onReplaceByFile={this.onReplaceByFile}
                 onDefaultSize={this.onDefaultSize}
                 onReplaceByUrl={this.onReplaceByUrl}
+                onReplaceByStorage={this.onReplaceByStorage}
             />
         )
     }
 }
 
-export default EditImageController;
+export default EditImageController;