Merge branch 'feature/mobile-apps-on-reactjs' into feature/fix-bug-shimaginA

apps/common/mobile/lib/view/About.jsx

@@ -120,6 +120,7 @@ const PageAbout = props => {
 
 const About = inject("storeAppOptions")(observer(PageAbout));
 About.appVersion = () => (__PRODUCT_VERSION__);
+About.compareVersions = () => /d$/.test(__PRODUCT_VERSION__);
 
 
 export default About;

apps/common/mobile/lib/view/Search.jsx

@@ -272,13 +272,13 @@ class SearchView extends Component {
                     </div>
                     <div className="searchbar-inner__center">
                         <div className="searchbar-input-wrap">
-                            <input placeholder={_t.textSearch} type="search" value={searchQuery} 
+                            <input placeholder={_t.textSearch} type="search" maxLength="255" value={searchQuery} 
                                 onChange={e => {this.changeSearchQuery(e.target.value)}} />
                             {isIos ? <i className="searchbar-icon" /> : null}
                             <span className="input-clear-button" />
                         </div>
                         <div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
-                            <input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery} 
+                            <input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val" value={replaceQuery} 
                                 onChange={e => {this.changeReplaceQuery(e.target.value)}} />
                             {isIos ? <i className="searchbar-icon" /> : null}
                             <span className="input-clear-button" />

apps/common/mobile/resources/less/common-material.less

@@ -7,6 +7,17 @@
     @darkGrey: #757575;
 
     --f7-navbar-shadow-image: none;
+
+    --f7-navbar-bg-color: @themeColor;
+    --f7-navbar-link-color: @navBarIconColor;
+    --f7-navbar-text-color: @navBarIconColor;
+    --f7-navbar-height: 56px;
+
+    --f7-subnavbar-bg-color: @themeColor;
+    --f7-subnavbar-link-color: @navBarIconColor;
+    --f7-subnavbar-text-color: @navBarIconColor;
+    --f7-subnavbar-height: 56px;
+
     --f7-radio-active-color: @themeColor;
     --f7-toggle-active-color: @themeColor;
     --f7-range-bar-active-bg-color: @themeColor;
@@ -29,6 +40,13 @@
             justify-content: center;
         }
     }
+
+    .page.page-with-subnavbar.page-with-logo {
+        .page-content {
+            --f7-page-navbar-offset: var(--f7-navbar-height);
+        }
+    }
+
     // Buttons
     .segmented {
         .decrement, .increment {
@@ -412,7 +430,7 @@
         }
         a.icon-only {
             width: auto;
-            height: 48px;
+            height: 56px;
         }
         .buttons-row-replace a {
             color: @white;

apps/common/mobile/resources/less/common.less

@@ -25,6 +25,12 @@
     }
 }
 
+.subnavbar {
+    .subnavbar-inner {
+        padding: 0;
+    }
+}
+
 .page.page-with-subnavbar {
     .page-content {
         --f7-page-subnavbar-offset: 0px;
@@ -110,6 +116,12 @@
     }
 }
 
+.dialog {
+    .content-block {
+        padding: 0;
+    }
+}
+
 .about {
     .content-block {
         margin: 0 auto 15px;
@@ -218,6 +230,7 @@
         height: 38px;
         margin-top: 14px;
         background-image: url(../img/themes/themes.png);
+        display: block;
     }
     .item-theme.active:before {
         content: '';
@@ -721,6 +734,24 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 
+.picker-3d { 
+    .picker-item {
+        padding: 0;
+        text-align: left;
+        font-size: 16px;
+        span {
+            padding: 0;
+        }
+    }
+}
+
+.picker-center-highlight {
+    width: 100%;
+    left: 0;
+    right: 0;
+}
+
+
 
 
 

apps/documenteditor/mobile/locale/en.json

@@ -94,7 +94,8 @@
     "errorUpdateVersionOnDisconnect": "Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.",
     "errorDefaultMessage": "Error code: %1",
     "criticalErrorExtText": "Press 'OK' to back to document list.",
-    "notcriticalErrorTitle": "Warning"
+    "notcriticalErrorTitle": "Warning",
+    "scriptLoadError": "The connection is too slow, some of the components could not be loaded. Please reload the page."
   },
   "LongActions": {
     "openTitleText": "Opening Document",

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

@@ -65,7 +65,7 @@ class ContextMenu extends ContextMenuController {
     onMenuItemClick(action) {
         super.onMenuItemClick(action);
 
-        if ( EditorUIController.ContextMenu.handleMenuItemClick(this, action) )
+        if ( EditorUIController.ContextMenu && EditorUIController.ContextMenu.handleMenuItemClick(this, action) )
             return;
 
         const api = Common.EditorApi.get();
@@ -73,17 +73,27 @@ class ContextMenu extends ContextMenuController {
             case 'cut':
                 if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-
                 break;
             case 'copy':
-                if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
+                if (!api.Copy() && !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-
                 break;
             case 'paste':
                 if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-
+                break;
+            case 'viewcomment':
+                Common.Notifications.trigger('viewcomment');
+                break;
+            case 'openlink':
+                const stack = api.getSelectedElements();
+                let value;
+                stack.forEach((item) => {
+                    if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                        value = item.get_ObjectValue().get_Value();
+                    }
+                });
+                value && this.openLink(value);
                 break;
             case 'review':
                 setTimeout(() => {
@@ -95,19 +105,6 @@ class ContextMenu extends ContextMenuController {
                     this.props.openOptions('coauth', 'cm-review-change');
                 }, 400);
                 break;
-            case 'split':
-                this.showSplitModal();
-                break;
-            case 'edit':
-                setTimeout(() => {
-                    this.props.openOptions('edit');
-                }, 0);
-                break;
-            case 'addlink':
-                setTimeout(() => {
-                    this.props.openOptions('add', 'link');
-                }, 400);
-                break;
         }
 
         console.log("click context menu item: " + action);
@@ -206,8 +203,53 @@ class ContextMenu extends ContextMenuController {
 
     initMenuItems() {
         if ( !Common.EditorApi ) return [];
+        const { isEdit } = this.props;
 
-        return EditorUIController.ContextMenu.mapMenuItems(this);
+        if (isEdit && EditorUIController.ContextMenu) {
+            return EditorUIController.ContextMenu.mapMenuItems(this);
+        } else {
+            const { t } = this.props;
+            const _t = t("ContextMenu", {returnObjects: true});
+            const { canViewComments } = this.props;
+
+            const api = Common.EditorApi.get();
+            const stack = api.getSelectedElements();
+            const canCopy = api.can_CopyCut();
+
+            let itemsIcon = [],
+                itemsText = [];
+
+            if ( canCopy ) {
+                itemsIcon.push({
+                    event: 'copy',
+                    icon: 'icon-copy'
+                });
+            }
+
+            if ( canViewComments && this.isComments ) {
+                itemsText.push({
+                    caption: _t.menuViewComment,
+                    event: 'viewcomment'
+                });
+            }
+
+            let isLink = false;
+            stack.forEach(item => {
+                const objectType = item.get_ObjectType();
+                if ( objectType === Asc.c_oAscTypeSelectElement.Hyperlink ) {
+                    isLink = true;
+                }
+            });
+
+            if ( isLink ) {
+                itemsText.push({
+                    caption: _t.menuOpenLink,
+                    event: 'openlink'
+                });
+            }
+
+            return itemsIcon.concat(itemsText);
+        }
     }
 
     initExtraItems () {

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

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { inject } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
-import LongActionsController from "./LongActions";
 
 const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
     const {t} = useTranslation();
@@ -22,7 +21,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
         if (id === Asc.c_oAscError.ID.LoadingScriptError) {
             f7.notification.create({
                 title: _t.criticalErrorTitle,
-                text: _t.criticalErrorTitle,
+                text: _t.scriptLoadError,
                 closeButton: true
             }).open();
             return;
@@ -183,7 +182,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
             // report only critical errors
             Common.Gateway.reportError(id, config.msg);
 
-            config.title = this.criticalErrorTitle;
+            config.title = _t.criticalErrorTitle;
 
             if (storeAppOptions.canBackToFolder && !storeAppOptions.isDesktopApp) {
                 config.msg += '</br></br>' + _t.criticalErrorExtText;

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

@@ -1,82 +1,78 @@
-import React, { Component } from 'react';
-import { inject } from 'mobx-react';
+import React, { useEffect } from 'react';
 import { f7 } from 'framework7-react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import IrregularStack from "../../../../common/mobile/utils/IrregularStack";
 
-class LongActions extends Component {
-    constructor(props) {
-        super(props);
+const LongActionsController = () => {
+    const {t} = useTranslation();
+    const _t = t("LongActions", { returnObjects: true });
 
-        this.stackLongActions = new IrregularStack({
-            strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
-            weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
-        });
+    const ApplyEditRights = -255;
+    const LoadingDocument = -256;
 
-        this.onLongActionBegin = this.onLongActionBegin.bind(this);
-        this.onLongActionEnd = this.onLongActionEnd.bind(this);
-        this.onOpenDocument = this.onOpenDocument.bind(this);
-        this.closePreloader = this.closePreloader.bind(this);
-    }
+    const stackLongActions = new IrregularStack({
+        strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+        weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
+    });
 
-    closePreloader() {
-        if (this.loadMask.el) {
-            f7.dialog.close(this.loadMask.el);
+    let loadMask = null;
+
+    const closePreloader = () => {
+        if (loadMask && loadMask.el) {
+            f7.dialog.close(loadMask.el);
         }
-    }
+    };
 
-    componentDidMount() {
+    useEffect( () => {
         Common.Notifications.on('engineCreated', (api) => {
-            api.asc_registerCallback('asc_onStartAction', this.onLongActionBegin);
-            api.asc_registerCallback('asc_onEndAction', this.onLongActionEnd);
-            api.asc_registerCallback('asc_onOpenDocumentProgress', this.onOpenDocument);
+            api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
         });
-        Common.Notifications.on('preloader:endAction', this.onLongActionEnd);
-        Common.Notifications.on('preloader:beginAction', this.onLongActionBegin);
-        Common.Notifications.on('preloader:close', this.closePreloader);
-    }
+        Common.Notifications.on('preloader:endAction', onLongActionEnd);
+        Common.Notifications.on('preloader:beginAction', onLongActionBegin);
+        Common.Notifications.on('preloader:close', closePreloader);
 
-    componentWillUnmount() {
-        const api = Common.EditorApi.get();
-        api.asc_unregisterCallback('asc_onStartAction', this.onLongActionBegin);
-        api.asc_unregisterCallback('asc_onEndAction', this.onLongActionEnd);
-        api.asc_unregisterCallback('asc_onOpenDocumentProgress', this.onOpenDocument);
+        return ( () => {
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
 
-        Common.Notifications.off('preloader:endAction', this.onLongActionEnd);
-        Common.Notifications.off('preloader:beginAction', this.onLongActionBegin);
-        Common.Notifications.off('preloader:close', this.closePreloader);
-    }
+            Common.Notifications.off('preloader:endAction', onLongActionEnd);
+            Common.Notifications.off('preloader:beginAction', onLongActionBegin);
+            Common.Notifications.off('preloader:close', closePreloader);
+        })
+    });
 
-    onLongActionBegin (type, id) {
+    const onLongActionBegin = (type, id) => {
         const action = {id: id, type: type};
-        this.stackLongActions.push(action);
-        this.setLongActionView(action);
-    }
+        stackLongActions.push(action);
+        setLongActionView(action);
+    };
 
-    onLongActionEnd (type, id) {
+    const onLongActionEnd = (type, id) => {
         let action = {id: id, type: type};
-        this.stackLongActions.pop(action);
+        stackLongActions.pop(action);
 
         //this.updateWindowTitle(true);
 
-        action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
 
         if (action) {
-            this.setLongActionView(action)
+            setLongActionView(action)
         }
 
-        action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
 
         if (action) {
-            this.setLongActionView(action)
+            setLongActionView(action)
         } else {
-            this.loadMask.el && this.loadMask.el.classList.contains('modal-in') && f7.dialog.close(this.loadMask.el);
+            loadMask && loadMask.el && loadMask.el.classList.contains('modal-in') && f7.dialog.close(loadMask.el);
         }
-    }
+    };
 
-    setLongActionView (action) {
-        const { t } = this.props;
-        const _t = t("LongActions", { returnObjects: true });
+    const setLongActionView = (action) => {
         let title = '';
         let text = '';
         switch (action.id) {
@@ -177,31 +173,25 @@ class LongActions extends Component {
                 return;
             }
 
-            if (this.loadMask && this.loadMask.el && this.loadMask.el.classList.contains('modal-in')) {
-                this.loadMask.el.getElementsByClassName('dialog-title')[0].innerHTML = title;
+            if (loadMask && loadMask.el && loadMask.el.classList.contains('modal-in')) {
+                loadMask.el.getElementsByClassName('dialog-title')[0].innerHTML = title;
             } else {
-                this.loadMask = f7.dialog.preloader(title);
+                loadMask = f7.dialog.preloader(title);
             }
         }
 
-    }
+    };
 
-    onOpenDocument (progress) {
-        if (this.loadMask && this.loadMask.el) {
-            const $title = this.loadMask.el.getElementsByClassName('dialog-title')[0];
+    const onOpenDocument = (progress) => {
+        if (loadMask && loadMask.el) {
+            const $title = loadMask.el.getElementsByClassName('dialog-title')[0];
             const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
 
-            const { t } = this.props;
-            const _t = t("LongActions", { returnObjects: true });
             $title.innerHTML = `${_t.textLoadingDocument}: ${Math.min(Math.round(proc * 100), 100)}%`;
         }
     }
 
-    render() {
-        return null;
-    }
-}
-
-const LongActionsController = withTranslation()(LongActions);
+    return null;
+};
 
 export default LongActionsController;

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

@@ -9,8 +9,6 @@ import {InitReviewController as ReviewController} from '../../../../common/mobil
 import { onAdvancedOptions } from './settings/Download.jsx';
 import {
     CommentsController,
-    AddCommentController,
-    EditCommentController,
     ViewCommentsController
 } from "../../../../common/mobile/lib/controller/collaboration/Comments";
 import About from '../../../../common/mobile/lib/view/About';
@@ -191,6 +189,9 @@ class MainController extends Component {
             };
 
             const onDocumentContentReady = () => {
+                if (this._isDocReady)
+                    return;
+
                 const appOptions = this.props.storeAppOptions;
                 const appSettings = this.props.storeApplicationSettings;
 
@@ -329,8 +330,8 @@ class MainController extends Component {
         Common.Utils.Metric.setCurrentMetric(value);
         this.api.asc_SetDocumentUnits((value === Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value===Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
 
-        //me.api.asc_registerCallback('asc_onDocumentModifiedChanged', _.bind(me.onDocumentModifiedChanged, me));
-        //me.api.asc_registerCallback('asc_onDocumentCanSaveChanged',  _.bind(me.onDocumentCanSaveChanged, me));
+        this.api.asc_registerCallback('asc_onDocumentModifiedChanged', this.onDocumentModifiedChanged.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentCanSaveChanged',  this.onDocumentCanSaveChanged.bind(this));
 
         //if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
         //    me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
@@ -344,6 +345,19 @@ class MainController extends Component {
         window.onunload = this.onUnload.bind(this);
     }
 
+    onDocumentModifiedChanged () {
+        const isModified = this.api.asc_isDocumentCanSave();
+        if (this._state.isDocModified !== isModified) {
+            this._isDocReady && Common.Gateway.setDocumentModified(this.api.isDocumentModified());
+        }
+
+        this.updateWindowTitle();
+    }
+
+    onDocumentCanSaveChanged (isCanSave) {
+        //
+    }
+
     onBeforeUnload () {
         LocalStorage.save();
 
@@ -469,7 +483,7 @@ class MainController extends Component {
         if (this.changeServerVersion) return true;
         const _t = this._t;
 
-        if (About.appVersion() !== buildVersion && !window.compareVersions) {
+        if (About.appVersion() !== buildVersion && !About.compareVersions()) {
             this.changeServerVersion = true;
             f7.dialog.alert(
                 _t.errorServerVersion,
@@ -487,10 +501,9 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onServerVersion', this.onServerVersion.bind(this));
         this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
         this.api.asc_registerCallback('asc_onPrintUrl', this.onPrintUrl.bind(this));
+        this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this));
 
-        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
-            Common.Utils.ThemeColor.setColors(colors, standart_colors);
-        });
+        EditorUIController.initThemeColors && EditorUIController.initThemeColors();
 
         this.api.asc_registerCallback('asc_onDownloadUrl', this.onDownloadUrl.bind(this));
 
@@ -504,8 +517,8 @@ class MainController extends Component {
 
         //text settings
         const storeTextSettings = this.props.storeTextSettings;
-        EditorUIController.initFonts(storeTextSettings);
-        EditorUIController.initFocusObjects(this.props.storeFocusObjects);
+        EditorUIController.initFonts && EditorUIController.initFonts(storeTextSettings);
+        EditorUIController.initFocusObjects && EditorUIController.initFocusObjects(this.props.storeFocusObjects);
 
         this.api.asc_registerCallback('asc_onVerticalAlign', (typeBaseline) => {
             storeTextSettings.resetTypeBaseline(typeBaseline);
@@ -517,10 +530,15 @@ class MainController extends Component {
             switch (type) {
                 case 0:
                     storeTextSettings.resetBullets(subtype);
+                    storeTextSettings.resetNumbers(-1);
                     break;
                 case 1:
                     storeTextSettings.resetNumbers(subtype);
+                    storeTextSettings.resetBullets(-1);
                     break;
+                default: 
+                    storeTextSettings.resetBullets(-1);
+                    storeTextSettings.resetNumbers(-1);
             }
         });
         this.api.asc_registerCallback('asc_onPrAlign', (align) => {
@@ -538,19 +556,13 @@ class MainController extends Component {
         });
 
         //paragraph settings
-        EditorUIController.initEditorStyles(this.props.storeParagraphSettings);
+        EditorUIController.initEditorStyles && EditorUIController.initEditorStyles(this.props.storeParagraphSettings);
 
         //table settings
-        EditorUIController.initTableTemplates(this.props.storeTableSettings);
+        EditorUIController.initTableTemplates && EditorUIController.initTableTemplates(this.props.storeTableSettings);
 
         //chart settings
-        const storeChartSettings = this.props.storeChartSettings;
-        const storeFocusObjects = this.props.storeFocusObjects;
-        this.api.asc_registerCallback('asc_onUpdateChartStyles', () => {
-            if (storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties()) {
-                storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType()));
-            }
-        });
+        EditorUIController.updateChartStyles && EditorUIController.updateChartStyles(this.props.storeChartSettings, this.props.storeFocusObjects);
 
         // Document Info
 
@@ -682,6 +694,14 @@ class MainController extends Component {
         }
     }
 
+    onPrint () {
+        if (!this.props.storeAppOptions.canPrint) return;
+
+        if (this.api)
+            this.api.asc_Print();
+        Common.component.Analytics.trackEvent('Print');
+    }
+
     onPrintUrl (url) {
         if (this.iframePrint) {
             this.iframePrint.parentNode.removeChild(this.iframePrint);
@@ -777,8 +797,7 @@ class MainController extends Component {
                 <CollaborationController />
                 <ReviewController />
                 <CommentsController />
-                <AddCommentController />
-                <EditCommentController />
+                {EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
                 <ViewCommentsController />
             </Fragment>
             )

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

@@ -25,6 +25,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
             Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.on('toolbar:activatecontrols', activateControls);
             Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.on('goback', goBack);
         };
         if ( !Common.EditorApi ) {
             Common.Notifications.on('document:ready', onDocumentReady);
@@ -40,6 +41,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
             Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.off('goback', goBack);
 
             const api = Common.EditorApi.get();
             api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);

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

@@ -18,7 +18,7 @@ class EditTextController extends Component {
             if (isDecrement) {
                 typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size);
             } else {
-                typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(100, ++size);
+                typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(300, ++size);
             }
             if (typeof size !== 'undefined') {
                 api.put_TextPrFontSize(size);

apps/documenteditor/mobile/src/controller/settings/Download.jsx

@@ -55,6 +55,8 @@ class DownloadController extends Component {
 const DownloadWithTranslation = withTranslation()(DownloadController);
 
 const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequestClose) => {
+    if ($$('.dlg-adv-options.modal-in').length > 0) return;
+
     const api = Common.EditorApi.get();
     if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
         let picker;
@@ -97,7 +99,8 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequest
                 '</div>' +
                 '<div id="txt-encoding"></div>' +
                 '</div>',
-            buttons: buttons
+            buttons: buttons,
+            cssClass: 'dlg-adv-options'
         }).open();
         dialog.on('opened', () => {
             picker = f7.picker.create({
@@ -122,7 +125,7 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequest
                 const password = document.getElementById('modal-password').value;
                 api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
                 //if (!me._isDocReady) {
-                    //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                    //Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
                 //}
             }
         }];
@@ -138,7 +141,8 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequest
             text: _t.txtProtected,
             content:
                 '<div class="input-field"><input type="password" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>',
-            buttons: buttons
+            buttons: buttons,
+            cssClass: 'dlg-adv-options'
         }).open();
     }
 };

apps/documenteditor/mobile/src/controller/settings/Settings.jsx

@@ -43,16 +43,35 @@ const Settings = props => {
                 closeModal();
             }, 1);
         }
-    }
+    };
 
     const onPrint = () => {
         setTimeout(() => {
             Common.EditorApi.get().asc_Print();
         }, 1);
         closeModal();
-    }
+    };
 
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint}/>
+    const showHelp = () => {
+        let url = __HELP_URL__;
+        // let url = 'https://helpcenter.onlyoffice.com';
+
+        if (url.charAt(url.length-1) !== '/') {
+            url += '/';
+        }
+
+        if (Device.sailfish || Device.android) {
+            url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
+        }
+        else {
+            url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
+        }
+
+        closeModal();
+        window.open(url, "_blank");
+    };
+
+    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint} showHelp={showHelp}/>
 };
 
 export default inject("storeAppOptions")(observer(Settings));

apps/documenteditor/mobile/src/less/app-material.less

@@ -5,14 +5,6 @@
 
 
 .device-android {
-    --f7-navbar-bg-color: @themeColor;
-    --f7-navbar-link-color: @navBarIconColor;
-    --f7-navbar-text-color: @navBarIconColor;
-
-    --f7-subnavbar-bg-color: @themeColor;
-    --f7-subnavbar-link-color: @navBarIconColor;
-    --f7-subnavbar-text-color: @navBarIconColor;
-
     // Main Toolbar
     #editor-navbar.navbar .right {
         padding-right: 4px;

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -9,7 +9,7 @@ const ToolbarView = props => {
         <Fragment>
             <NavLeft>
                 {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
-                {props.isEdit && EditorUIController.getUndoRedo({
+                {props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
                     disabledUndo: !props.isCanUndo,
                     disabledRedo: !props.isCanRedo,
                     onUndoClick: props.onUndo,
@@ -18,7 +18,7 @@ const ToolbarView = props => {
             </NavLeft>
             {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
             <NavRight>
-                {props.isEdit && EditorUIController.getToolbarOptions({
+                {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
                         disabled: disableEditBtn || props.disabledControls,
                         onEditClick: e => props.openOptions('edit'),
                         onAddClick: e => props.openOptions('add')

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

@@ -76,10 +76,10 @@ const PageWrap = props => {
             }
             <List>
                 <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
-                    <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
+                    <Toggle checked={moveText} onChange={() => {props.onMoveText(!moveText)}}/>
                 </ListItem>
                 <ListItem title={_t.textAllowOverlap}>
-                    <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
+                    <Toggle checked={overlap} onChange={() => {props.onOverlap(!overlap)}}/>
                 </ListItem>
             </List>
             {

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

@@ -70,10 +70,10 @@ const PageWrap = props => {
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
             <List>
-                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_NONE)}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-table-inline"></Icon>}
                 </ListItem>
-                <ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onClick={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}>
+                <ListItem title={_t.textFlow} radio checked={wrapType === 'flow'} onChange={() => {props.onWrapType(c_tableWrap.TABLE_WRAP_PARALLEL)}}>
                     {!isAndroid && <Icon slot="media" icon="icon-wrap-table-flow"></Icon>}
                 </ListItem>
             </List>

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

@@ -131,6 +131,7 @@ const PageBullets = props => {
     ];
     const storeTextSettings = props.storeTextSettings;
     const typeBullets = storeTextSettings.typeBullets;
+    
     return(
         <Page className='bullets dataview'>
             <Navbar title={t('Edit.textBullets')} backLink={t('Edit.textBack')} />

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -151,7 +151,7 @@ const SettingsList = inject("storeAppOptions")(observer(props => {
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
                     {_canHelp &&
-                        <ListItem title={_t.textHelp} link="#">
+                        <ListItem title={_t.textHelp} link="#" onClick={props.showHelp}>
                             <Icon slot="media" icon="icon-help"></Icon>
                         </ListItem>
                     }
@@ -182,10 +182,10 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
+                    <SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint} showHelp={this.props.showHelp}/>
                 </Popup>
         )
     }

apps/presentationeditor/mobile/locale/en.json

@@ -21,9 +21,112 @@
         "Slide subtitle": "Slide subtitle",
         "Table": "Table",
         "Slide title": "Slide title"
-      }
+      },
+      "closeButtonText": "Close File",
+      "advDRMOptions": "Protected File",
+      "advDRMPassword": "Password",
+
+      "leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
+      "titleLicenseExp": "License expired",
+      "warnLicenseExp": "Your license has expired. Please update your license and refresh the page.",
+      "errorServerVersion": "The editor version has been updated. The page will be reloaded to apply the changes.",
+      "titleServerVersion": "Editor updated",
+      "notcriticalErrorTitle": "Warning",
+      "errorOpensource": "Using the free Community version you can open documents for viewing only. To access mobile web editors, a commercial license is required.",
+      "warnLicenseLimitedNoAccess": "License expired. You have no access to document editing functionality. Please contact your administrator.",
+      "warnLicenseLimitedRenewed": "License needs to be renewed. You have a limited access to document editing functionality.<br>Please contact your administrator to get full access",
+      "warnLicenseExceeded": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact your administrator to learn more.",
+      "warnLicenseUsersExceeded": "You've reached the user limit for %1 editors. Contact your administrator to learn more.",
+      "warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact %1 sales team for personal upgrade terms.",
+      "warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.",
+      "textBuyNow": "Visit website",
+      "textContactUs": "Contact sales",
+      "textNoLicenseTitle": "License limit reached",
+      "textPaidFeature": "Paid feature",
+      "textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.",
+      "textClose": "Close",
+
+      "errorProcessSaveResult": "Saving is failed.",
+      "criticalErrorTitle": "Error",
+      "warnProcessRightsChange": "You have been denied the right to edit the file.",
+      "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
+
+      "errorUpdateVersion": "The file version has been changed. The page will be reloaded.",
+      "titleUpdateVersion": "Version changed",
+      "textHasMacros": "The file contains automatic macros.<br>Do you want to run macros?",
+      "textRemember": "Remember my choice",
+      "textYes": "Yes",
+      "textNo": "No"
     }
   },
+  "Error": {
+    "criticalErrorTitle": "Error",
+    "unknownErrorText": "Unknown error.",
+    "convertationTimeoutText": "Convertation timeout exceeded.",
+    "openErrorText": "An error has occurred while opening the file",
+    "saveErrorText": "An error has occurred while saving the file",
+    "downloadErrorText": "Download failed.",
+    "uploadImageSizeMessage": "Maximium image size limit exceeded.",
+    "uploadImageExtMessage": "Unknown image format.",
+    "uploadImageFileCountMessage": "No images uploaded.",
+    "splitMaxRowsErrorText": "The number of rows must be less than %1",
+    "splitMaxColsErrorText": "The number of columns must be less than %1",
+    "splitDividerErrorText": "The number of rows must be a divisor of %1",
+    "errorKeyEncrypt": "Unknown key descriptor",
+    "errorKeyExpire": "Key descriptor expired",
+    "errorUsersExceed": "Count of users was exceed",
+    "errorViewerDisconnect": "Connection is lost. You can still view the document,<br>but will not be able to download until the connection is restored and page is reloaded.",
+    "errorFilePassProtect": "The file is password protected and could not be opened.",
+    "errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",
+    "errorDataRange": "Incorrect data range.",
+    "errorDatabaseConnection": "External error.<br>Database connection error. Please, contact support.",
+    "errorUserDrop": "The file cannot be accessed right now.",
+    "errorConnectToServer": " The document could not be saved. Please check connection settings or contact your administrator.<br>When you click the 'OK' button, you will be prompted to download the document.",
+    "errorBadImageUrl": "Image url is incorrect",
+    "errorSessionAbsolute": "The document editing session has expired. Please reload the page.",
+    "errorSessionIdle": "The document has not been edited for quite a long time. Please reload the page.",
+    "errorSessionToken": "The connection to the server has been interrupted. Please reload the page.",
+    "errorDataEncrypted": "Encrypted changes have been received, they cannot be deciphered.",
+    "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
+    "errorEditingDownloadas": "An error occurred during the work with the document.<br>Use the 'Download' option to save the file backup copy to your computer hard drive.",
+    "errorFileSizeExceed": "The file size exceeds the limitation set for your server.<br>Please contact your Document Server administrator for details.",
+    "errorUpdateVersionOnDisconnect": "Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.",
+    "errorDefaultMessage": "Error code: %1",
+    "criticalErrorExtText": "Press 'OK' to back to document list.",
+    "notcriticalErrorTitle": "Warning",
+    "scriptLoadError": "The connection is too slow, some of the components could not be loaded. Please reload the page."
+  },
+  "LongActions": {
+    "openTitleText": "Opening Document",
+    "openTextText": "Opening document...",
+    "saveTitleText": "Saving Document",
+    "saveTextText": "Saving document...",
+    "loadFontsTitleText": "Loading Data",
+    "loadFontsTextText": "Loading data...",
+    "loadImagesTitleText": "Loading Images",
+    "loadImagesTextText": "Loading images...",
+    "loadFontTitleText": "Loading Data",
+    "loadFontTextText": "Loading data...",
+    "loadImageTitleText": "Loading Image",
+    "loadImageTextText": "Loading image...",
+    "downloadTitleText": "Downloading Document",
+    "downloadTextText": "Downloading document...",
+    "printTitleText": "Printing Document",
+    "printTextText": "Printing document...",
+    "uploadImageTitleText": "Uploading Image",
+    "uploadImageTextText": "Uploading image...",
+    "applyChangesTitleText": "Loading Data",
+    "applyChangesTextText": "Loading data...",
+    "savePreparingText": "Preparing to save",
+    "savePreparingTitle": "Preparing to save. Please wait...",
+    "waitText": "Please, wait...",
+    "txtEditingMode": "Set editing mode...",
+    "loadingDocumentTitleText": "Loading document",
+    "loadingDocumentTextText": "Loading document...",
+    "textLoadingDocument": "Loading document",
+    "loadThemeTitleText": "Loading Theme",
+    "loadThemeTextText": "Loading theme..."
+  },
   "ContextMenu": {
     "menuViewComment": "View Comment",
     "menuAddComment": "Add Comment",
@@ -37,6 +140,12 @@
     "errorCopyCutPaste": "Copy, cut and paste actions using the context menu will be performed within the current file only.",
     "textDoNotShowAgain": "Don't show again"
   },
+  "Toolbar": {
+    "dlgLeaveTitleText": "You leave the application",
+    "dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
+    "leaveButtonText": "Leave this Page",
+    "stayButtonText": "Stay on this Page"
+  },
   "View": {
     "Settings": {
       "textDone": "Done",
@@ -273,7 +382,9 @@
       "textSearch": "Search",
       "textCaseSensitive": "Case Sensitive",
       "textHighlight": "Highlight Results",
-      "textNoTextFound": "Text not Found"
+      "textNoTextFound": "Text not Found",
+      "textSelectObjectToEdit": "Select object to edit",
+      "textFinalMessage": "The end of slide preview. Click to exit."
     }
   },
   "Common": {

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

@@ -7,6 +7,7 @@ import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
 import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
 import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch';
 
 @inject ( stores => ({
     isEdit: stores.storeAppOptions.isEdit,
@@ -57,10 +58,13 @@ class ContextMenu extends ContextMenuController {
     onMenuItemClick(action) {
         super.onMenuItemClick(action);
 
+        if ( EditorUIController.ContextMenu && EditorUIController.ContextMenu.handleMenuItemClick(this, action) )
+            return;
+
         const api = Common.EditorApi.get();
         switch (action) {
             case 'cut':
-                if (!api.Cut() && !LocalStorage.getBool("pe-hide-copy-cut-paste-warning")) {
+                if ( !LocalStorage.getBool("pe-hide-copy-cut-paste-warning")) {
                     this.showCopyCutPasteModal();
                 }
                 break;
@@ -70,29 +74,13 @@ class ContextMenu extends ContextMenuController {
                 }
                 break;
             case 'paste':
-                if (!api.Paste() && !LocalStorage.getBool("pe-hide-copy-cut-paste-warning")) {
+                if ( !LocalStorage.getBool("pe-hide-copy-cut-paste-warning")) {
                     this.showCopyCutPasteModal();
                 }
                 break;
-            case 'addcomment':
-                Common.Notifications.trigger('addcomment');
-                break;
             case 'viewcomment':
                 Common.Notifications.trigger('viewcomment');
                 break;
-            case 'delete':
-                api.asc_Remove();
-                break;
-            case 'edit':
-                setTimeout(() => {
-                    this.props.openOptions('edit');
-                }, 0);
-                break;
-            case 'addlink':
-                setTimeout(() => {
-                    this.props.openOptions('add', 'link');
-                }, 400)
-                break;
             case 'openlink':
                 const stack = Common.EditorApi.get().getSelectedElements();
                 let value;
@@ -104,8 +92,6 @@ class ContextMenu extends ContextMenuController {
                 value && this.openLink(value);
                 break;
         }
-
-        console.log("click context menu item: " + action);
     }
 
     showCopyCutPasteModal() {
@@ -154,152 +140,77 @@ class ContextMenu extends ContextMenuController {
     initMenuItems() {
         if ( !Common.EditorApi ) return [];
 
-        const { t } = this.props;
-        const _t = t("ContextMenu", { returnObjects: true });
+        const { isEdit } = this.props;
 
-        const { isEdit, canViewComments, isDisconnected } = this.props;
+        if (isEdit && EditorUIController.ContextMenu) {
+            return EditorUIController.ContextMenu.mapMenuItems(this);
+        } else {
+            const { t } = this.props;
+            const _t = t("ContextMenu", { returnObjects: true });
 
-        const api = Common.EditorApi.get();
-        const stack = api.getSelectedElements();
-        const canCopy = api.can_CopyCut();
+            const { canViewComments, isDisconnected } = this.props;
 
-        let itemsIcon = [],
-            itemsText = [];
+            const api = Common.EditorApi.get();
+            const stack = api.getSelectedElements();
+            const canCopy = api.can_CopyCut();
 
-        let isText = false,
-            isTable = false,
-            isImage = false,
-            isChart = false,
-            isShape = false,
-            isLink = false,
-            isSlide = false,
-            isObject = false;
+            let itemsIcon = [],
+                itemsText = [];
 
-        stack.forEach(item => {
-            const objectType = item.get_ObjectType(),
-                objectValue = item.get_ObjectValue();
+            let isText = false,
+                isTable = false,
+                isImage = false,
+                isChart = false,
+                isShape = false,
+                isLink = false,
+                isSlide = false,
+                isObject = false;
 
-            if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
-                isText = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
-                isImage = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Chart) {
-                isChart = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Shape) {
-                isShape = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
-                isTable = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                isLink = true;
-            } else if (objectType == Asc.c_oAscTypeSelectElement.Slide) {
-                isSlide = true;
-            }
-        });
+            stack.forEach(item => {
+                const objectType = item.get_ObjectType(),
+                    objectValue = item.get_ObjectValue();
 
-        isObject = isText || isImage || isChart || isShape || isTable;
-
-        if (canCopy && isObject) {
-            itemsIcon.push({
-                event: 'copy',
-                icon: 'icon-copy'
-            });
-        }
-        if (canViewComments && this.isComments && !isEdit) {
-            itemsText.push({
-                caption: _t.menuViewComment,
-                event: 'viewcomment'
-            });
-        }
-
-        if ( stack.length > 0 ) {
-            let topObject = stack[stack.length - 1],
-                topObjectType = topObject.get_ObjectType(),
-                topObjectValue = topObject.get_ObjectValue(),
-                objectLocked = typeof topObjectValue.get_Locked === 'function' ? topObjectValue.get_Locked() : false;
-
-            !objectLocked && (objectLocked = typeof topObjectValue.get_LockDelete === 'function' ? topObjectValue.get_LockDelete() : false);
-
-            const swapItems = function(items, indexBefore, indexAfter) {
-                items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
-            };
-
-            if (!objectLocked && isEdit && !isDisconnected) {
-                if (canCopy && isObject) {
-                    itemsIcon.push({
-                        event: 'cut',
-                        icon: 'icon-cut'
-                    });
-
-                    // Swap 'Copy' and 'Cut'
-                    swapItems(itemsIcon, 0, 1);
+                if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
+                    isText = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
+                    isImage = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Chart) {
+                    isChart = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Shape) {
+                    isShape = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
+                    isTable = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                    isLink = true;
+                } else if (objectType == Asc.c_oAscTypeSelectElement.Slide) {
+                    isSlide = true;
                 }
+            });
 
+            isObject = isText || isImage || isChart || isShape || isTable;
+
+            if (canCopy && isObject) {
                 itemsIcon.push({
-                    event: 'paste',
-                    icon: 'icon-paste'
+                    event: 'copy',
+                    icon: 'icon-copy'
                 });
-
-                if (isObject)
-                    itemsText.push({
-                        caption: _t.menuDelete,
-                        event: 'delete'
-                    });
-
-                itemsText.push({
-                    caption: _t.menuEdit,
-                    event: 'edit'
-                });
-
-                if (!isLink && api.can_AddHyperlink() !== false) {
-                    itemsText.push({
-                        caption: _t.menuAddLink,
-                        event: 'addlink'
-                    });
-                }
-
-                if (this.isComments && canViewComments) {
-                    itemsText.push({
-                        caption: _t.menuViewComment,
-                        event: 'viewcomment'
-                    });
-                }
-
-                const hideAddComment = (isText && isChart) || api.can_AddQuotedComment() === false || !canViewComments;
-                if (!hideAddComment) {
-                    itemsText.push({
-                        caption: _t.menuAddComment,
-                        event: 'addcomment'
-                    });
-                }
             }
+            if (canViewComments && this.isComments && !isEdit) {
+                itemsText.push({
+                    caption: _t.menuViewComment,
+                    event: 'viewcomment'
+                });
+            }
+
+            if (isLink) {
+                itemsText.push({
+                    caption: _t.menuOpenLink,
+                    event: 'openlink'
+                });
+            }
+
+            return itemsIcon.concat(itemsText);
         }
-
-        if (isLink) {
-            itemsText.push({
-                caption: _t.menuOpenLink,
-                event: 'openlink'
-            });
-        }
-
-
-        if ( Device.phone && itemsText.length > 2 ) {
-            this.extraItems = itemsText.splice(2,itemsText.length, {
-                caption: _t.menuMore,
-                event: 'showActionSheet'
-            });
-        }
-
-        return itemsIcon.concat(itemsText);
-        // return [{
-        //         caption: 'Edit',
-        //         event: 'edit'
-        //     }, {
-        //         caption: 'View',
-        //         event: 'view'
-        //     }, {
-        //         icon: 'icon-paste',
-        //         event: 'review'
-        //     }];
     }
 
     initExtraItems () {

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

@@ -0,0 +1,222 @@
+import React, { useEffect } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
+    const {t} = useTranslation();
+    const _t = t("Error", { returnObjects: true });
+
+    useEffect(() => {
+        Common.Notifications.on('engineCreated', (api) => {
+            api.asc_registerCallback('asc_onError', onError);
+        });
+        return () => {
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onError', onError);
+        }
+    });
+
+    const onError = (id, level, errData) => {
+        if (id === -82) return; // format error
+
+        if (id === Asc.c_oAscError.ID.LoadingScriptError) {
+            f7.notification.create({
+                title: _t.criticalErrorTitle,
+                text: _t.scriptLoadError,
+                closeButton: true
+            }).open();
+            return;
+        }
+
+        Common.Notifications.trigger('preloader:close');
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
+        const api = Common.EditorApi.get();
+
+        const config = {
+            closable: false
+        };
+
+        switch (id)
+        {
+            case Asc.c_oAscError.ID.Unknown:
+                config.msg = _t.unknownErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationTimeout:
+                config.msg = _t.convertationTimeoutText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationOpenError:
+                config.msg = _t.openErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationSaveError:
+                config.msg = _t.saveErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.DownloadError:
+                config.msg = _t.downloadErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageSize:
+                config.msg = _t.uploadImageSizeMessage;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageExt:
+                config.msg = _t.uploadImageExtMessage;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageFileCount:
+                config.msg = _t.uploadImageFileCountMessage;
+                break;
+
+            case Asc.c_oAscError.ID.SplitCellMaxRows:
+                config.msg = _t.splitMaxRowsErrorText.replace('%1', errData.get_Value());
+                break;
+
+            case Asc.c_oAscError.ID.SplitCellMaxCols:
+                config.msg = _t.splitMaxColsErrorText.replace('%1', errData.get_Value());
+                break;
+
+            case Asc.c_oAscError.ID.SplitCellRowsDivider:
+                config.msg = _t.splitDividerErrorText.replace('%1', errData.get_Value());
+                break;
+
+            case Asc.c_oAscError.ID.VKeyEncrypt:
+                config.msg = _t.errorKeyEncrypt;
+                break;
+
+            case Asc.c_oAscError.ID.KeyExpire:
+                config.msg = _t.errorKeyExpire;
+                break;
+
+            case Asc.c_oAscError.ID.UserCountExceed:
+                config.msg = _t.errorUsersExceed;
+                break;
+
+            case Asc.c_oAscError.ID.CoAuthoringDisconnect:
+                config.msg = _t.errorViewerDisconnect;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationPassword:
+                config.msg = _t.errorFilePassProtect;
+                break;
+
+            case Asc.c_oAscError.ID.StockChartError:
+                config.msg = _t.errorStockChart;
+                break;
+
+            case Asc.c_oAscError.ID.DataRangeError:
+                config.msg = _t.errorDataRange;
+                break;
+
+            case Asc.c_oAscError.ID.Database:
+                config.msg = _t.errorDatabaseConnection;
+                break;
+
+            case Asc.c_oAscError.ID.UserDrop:
+                const lostEditingRights = storeAppOptions.lostEditingRights;
+                if (lostEditingRights) {
+                    storeAppOptions.changeEditingRights(false);
+                    return;
+                }
+                storeAppOptions.changeEditingRights(true);
+                config.msg = _t.errorUserDrop;
+                break;
+
+            case Asc.c_oAscError.ID.Warning:
+                config.msg = _t.errorConnectToServer;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageUrl:
+                config.msg = _t.errorBadImageUrl;
+                break;
+
+            case Asc.c_oAscError.ID.SessionAbsolute:
+                config.msg = _t.errorSessionAbsolute;
+                break;
+
+            case Asc.c_oAscError.ID.SessionIdle:
+                config.msg = _t.errorSessionIdle;
+                break;
+
+            case Asc.c_oAscError.ID.SessionToken:
+                config.msg = _t.errorSessionToken;
+                break;
+
+            case Asc.c_oAscError.ID.DataEncrypted:
+                config.msg = _t.errorDataEncrypted;
+                break;
+
+            case Asc.c_oAscError.ID.AccessDeny:
+                config.msg = _t.errorAccessDeny;
+                break;
+
+            case Asc.c_oAscError.ID.EditingError:
+                config.msg = _t.errorEditingDownloadas;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationOpenLimitError:
+                config.msg = _t.errorFileSizeExceed;
+                break;
+
+            case Asc.c_oAscError.ID.UpdateVersion:
+                config.msg = _t.errorUpdateVersionOnDisconnect;
+                break;
+
+            default:
+                config.msg = _t.errorDefaultMessage.replace('%1', id);
+                break;
+        }
+
+        if (level === Asc.c_oAscError.Level.Critical) {
+
+            // report only critical errors
+            Common.Gateway.reportError(id, config.msg);
+
+            config.title = _t.criticalErrorTitle;
+
+            if (storeAppOptions.canBackToFolder && !storeAppOptions.isDesktopApp) {
+                config.msg += '</br></br>' + _t.criticalErrorExtText;
+                config.callback = function() {
+                    Common.Notifications.trigger('goback', true);
+                }
+            }
+            if (id === Asc.c_oAscError.ID.DataEncrypted) {
+                api.asc_coAuthoringDisconnect();
+                Common.Notifications.trigger('api:disconnect');
+            }
+        }
+        else {
+            Common.Gateway.reportWarning(id, config.msg);
+
+            config.title    = _t.notcriticalErrorTitle;
+            config.callback = (btn) => {
+                if (id === Asc.c_oAscError.ID.Warning && btn === 'ok' && (storeAppOptions.canDownload || storeAppOptions.canDownloadOrigin)) {
+                    api.asc_DownloadOrigin();
+                }
+                storeAppOptions.changeEditingRights(false);
+            };
+        }
+
+        f7.dialog.create({
+            cssClass: 'error-dialog',
+            title   : config.title,
+            text    : config.msg,
+            buttons: [
+                {
+                    text: 'OK',
+                    onClick: config.callback
+                }
+            ]
+        }).open();
+
+        Common.component.Analytics.trackEvent('Internal Error', id.toString());
+    };
+
+    return null
+});
+
+export default ErrorController;

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

@@ -0,0 +1,186 @@
+import React, { useEffect } from 'react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import IrregularStack from "../../../../common/mobile/utils/IrregularStack";
+
+const LongActionsController = () => {
+    const {t} = useTranslation();
+    const _t = t("LongActions", {returnObjects: true});
+
+    const ApplyEditRights = -255;
+    const LoadingDocument = -256;
+
+    const stackLongActions = new IrregularStack({
+        strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+        weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
+    });
+
+    let loadMask = null;
+
+    const closePreloader = () => {
+        if (loadMask && loadMask.el) {
+            f7.dialog.close(loadMask.el);
+        }
+    };
+
+    useEffect( () => {
+        Common.Notifications.on('engineCreated', (api) => {
+            api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
+        });
+        Common.Notifications.on('preloader:endAction', onLongActionEnd);
+        Common.Notifications.on('preloader:beginAction', onLongActionBegin);
+        Common.Notifications.on('preloader:close', closePreloader);
+
+        return (() => {
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+
+            Common.Notifications.off('preloader:endAction', onLongActionEnd);
+            Common.Notifications.off('preloader:beginAction', onLongActionBegin);
+            Common.Notifications.off('preloader:close', closePreloader);
+        })
+    });
+
+    const onLongActionBegin = (type, id) => {
+        const action = {id: id, type: type};
+        stackLongActions.push(action);
+        setLongActionView(action);
+    };
+
+    const onLongActionEnd = (type, id) => {
+        let action = {id: id, type: type};
+        stackLongActions.pop(action);
+
+        //this.updateWindowTitle(true);
+
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+
+        if (action) {
+            setLongActionView(action)
+        }
+
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
+
+        if (action) {
+            setLongActionView(action)
+        } else {
+            loadMask && loadMask.el && loadMask.el.classList.contains('modal-in') && f7.dialog.close(loadMask.el);
+        }
+    };
+
+    const setLongActionView = (action) => {
+        let title = '';
+        let text = '';
+        switch (action.id) {
+            case Asc.c_oAscAsyncAction['Open']:
+                title   = _t.openTitleText;
+                text    = _t.openTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['Save']:
+                title   = _t.saveTitleText;
+                text    = _t.saveTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
+                title   = _t.loadFontsTitleText;
+                text    = _t.loadFontsTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadDocumentImages']:
+                title   = _t.loadImagesTitleText;
+                text    = _t.loadImagesTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadFont']:
+                title   = _t.loadFontTitleText;
+                text    = _t.loadFontTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadImage']:
+                title   = _t.loadImageTitleText;
+                text    = _t.loadImageTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['DownloadAs']:
+                title   = _t.downloadTitleText;
+                text    = _t.downloadTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['Print']:
+                title   = _t.printTitleText;
+                text    = _t.printTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['UploadImage']:
+                title   = _t.uploadImageTitleText;
+                text    = _t.uploadImageTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadTheme']:
+                title   = _t.loadThemeTitleText;
+                text    = _t.loadThemeTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['ApplyChanges']:
+                title   = _t.applyChangesTitleText;
+                text    = _t.applyChangesTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['PrepareToSave']:
+                title   = _t.savePreparingText;
+                text    = _t.savePreparingTitle;
+                break;
+
+            case Asc.c_oAscAsyncAction['Waiting']:
+                title   = _t.waitText;
+                text    = _t.waitText;
+                break;
+
+            case ApplyEditRights:
+                title   = _t.txtEditingMode;
+                text    = _t.txtEditingMode;
+                break;
+
+            case LoadingDocument:
+                title   = _t.loadingDocumentTitleText;
+                text    = _t.loadingDocumentTextText;
+                break;
+            default:
+                if (typeof action.id == 'string'){
+                    title   = action.id;
+                    text    = action.id;
+                }
+                break;
+        }
+
+        if (action.type === Asc.c_oAscAsyncActionType['BlockInteraction']) {
+            if (action.id === Asc.c_oAscAsyncAction['ApplyChanges'] || action.id === Asc.c_oAscAsyncAction['LoadDocumentFonts']) {
+                return;
+            }
+
+            if (loadMask && loadMask.el && loadMask.el.classList.contains('modal-in')) {
+                loadMask.el.getElementsByClassName('dialog-title')[0].innerHTML = title;
+            } else {
+                loadMask = f7.dialog.preloader(title);
+            }
+        }
+    };
+
+    const onOpenDocument = (progress) => {
+        if (loadMask && loadMask.el) {
+            const $title = loadMask.el.getElementsByClassName('dialog-title')[0];
+            const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
+
+            $title.innerHTML = `${_t.textLoadingDocument}: ${Math.min(Math.round(proc * 100), 100)}%`;
+        }
+    };
+
+    return null;
+};
+
+export default LongActionsController;

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

@@ -7,19 +7,44 @@ import CollaborationController from '../../../../common/mobile/lib/controller/co
 import EditorUIController from '../lib/patch';
 import {
     CommentsController,
-    AddCommentController,
-    EditCommentController,
     ViewCommentsController
 } from "../../../../common/mobile/lib/controller/collaboration/Comments";
+import ErrorController from "./Error";
+import LongActionsController from "./LongActions";
+import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage";
+import About from '../../../../common/mobile/lib/view/About';
 
-@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeChartSettings", "storeLinkSettings")
+@inject(
+    "storeFocusObjects",
+    "storeAppOptions",
+    "storePresentationInfo",
+    "storePresentationSettings",
+    "storeSlideSettings",
+    "storeTextSettings",
+    "storeTableSettings",
+    "storeChartSettings",
+    "storeLinkSettings",
+    "storeApplicationSettings"
+    )
 class MainController extends Component {
-    constructor(props) {
+    constructor (props) {
         super(props)
         window.editorType = 'pe';
+
+        this.LoadingDocument = -256;
+
+        this._state = {
+            licenseType: false,
+            isDocModified: false
+        };
+
+        this.defaultTitleText = __APP_TITLE_TEXT__;
+
+        const { t } = this.props;
+        this._t = t('Controller.Main', {returnObjects:true});
     }
 
-    initSdk() {
+    initSdk () {
         const script = document.createElement("script");
         script.src = "../../../../sdkjs/develop/sdkjs/slide/scripts.js";
         script.async = true;
@@ -54,7 +79,15 @@ class MainController extends Component {
                 this.props.storeAppOptions.setConfigOptions(this.editorConfig);
 
                 this.editorConfig.lang && this.api.asc_setLocale(this.editorConfig.lang);
-                // console.log(this.editorConfig);
+
+                let value = LocalStorage.getItem("pe-mobile-macros-mode");
+                if (value === null) {
+                    value = this.editorConfig.customization ? this.editorConfig.customization.macrosMode : 'warn';
+                    value = (value === 'enable') ? 1 : (value === 'disable' ? 2 : 0);
+                } else {
+                    value = parseInt(value);
+                }
+                this.props.storeApplicationSettings.changeMacrosSettings(value);
             };
 
             const loadDocument = data => {
@@ -85,15 +118,15 @@ class MainController extends Component {
                     docInfo.put_Permissions(_permissions);
                     docInfo.put_EncryptedInfo(this.editorConfig.encryptionKeys);
 
-                    // var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
-                    // docInfo.asc_putIsEnabledMacroses(!!enable);
-                    // enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false);
-                    // docInfo.asc_putIsEnabledPlugins(!!enable);
+                    let enable = !this.editorConfig.customization || (this.editorConfig.customization.macros !== false);
+                    docInfo.asc_putIsEnabledMacroses(!!enable);
+                    enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins !== false);
+                    docInfo.asc_putIsEnabledPlugins(!!enable);
                 }
 
                 this.api.asc_registerCallback('asc_onGetEditorPermissions', onEditorPermissions);
-                // this.api.asc_registerCallback('asc_onLicenseChanged',       _.bind(this.onLicenseChanged, this));
-                // this.api.asc_registerCallback('asc_onRunAutostartMacroses', _.bind(this.onRunAutostartMacroses, this));
+                this.api.asc_registerCallback('asc_onLicenseChanged', this.onLicenseChanged.bind(this));
+                this.api.asc_registerCallback('asc_onRunAutostartMacroses', this.onRunAutostartMacroses.bind(this));
                 this.api.asc_setDocInfo(docInfo);
                 this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
 
@@ -105,26 +138,22 @@ class MainController extends Component {
 
                 // Common.SharedSettings.set('document', data.doc);
 
-                // if (data.doc) {
-                //     DE.getController('Toolbar').setDocumentTitle(data.doc.title);
-                //     if (data.doc.info) {
-                //         data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
-                //         data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead.");
-                //     }
-                // }
+                if (data.doc) {
+                    Common.Notifications.trigger('setdoctitle', data.doc.title);
+                }
             };
 
             const onEditorPermissions = params => {
-                let me = this;
                 const licType = params.asc_getLicenseType();
 
-                me.appOptions.canLicense      = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
+                this.appOptions.canLicense      = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
 
-                this.props.storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions);
+                const storeAppOptions = this.props.storeAppOptions;
+                storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions);
+                this.applyMode(storeAppOptions);
 
-                // me.api.asc_setViewMode(!me.appOptions.isEdit);
-                me.api.asc_setViewMode(false);
-                me.api.asc_LoadDocument();
+                this.api.asc_LoadDocument();
+                this.api.Resize();
             };
 
             const _process_array = (array, fn) => {
@@ -148,23 +177,36 @@ class MainController extends Component {
                         'translate': t('Controller.Main.SDK', {returnObjects:true})
                     });
 
+                    Common.Notifications.trigger('engineCreated', this.api);
+                    Common.EditorApi = {get: () => this.api};
+
                     this.appOptions   = {};
                     this.bindEvents();
 
-                    let value = null /*Common.localStorage.getItem("pe-settings-fontrender")*/;
+                    let value = LocalStorage.getItem("pe-settings-fontrender");
                     if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
                     this.api.SetFontRenderingMode(parseInt(value));
                     this.api.SetDrawingFreeze(true);
                     this.api.SetThemesPath("../../../../sdkjs/slide/themes/");
-                    // Common.Utils.Metric.setCurrentMetric(1); //pt
+                    Common.Utils.Metric.setCurrentMetric(1); //pt
 
                     Common.Gateway.on('init',           loadConfig);
-                    // Common.Gateway.on('showmessage',    _.bind(me.onExternalMessage, me));
+                    Common.Gateway.on('showmessage',    this.onExternalMessage.bind(this));
                     Common.Gateway.on('opendocument',   loadDocument);
                     Common.Gateway.appReady();
 
-                    Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
+                    Common.Gateway.on('internalcommand', function(data) {
+                        if (data.command === 'hardBack') {
+                            if ($$('.modal-in').length > 0) {
+                                if ( !($$('.error-dialog.modal-in').length > 0) ) {
+                                    f7.dialog.close();
+                                }
+                                Common.Gateway.internalMessage('hardBack', false);
+                            } else
+                                Common.Gateway.internalMessage('hardBack', true);
+                        }
+                    });
+                    Common.Gateway.internalMessage('listenHardBack');
                 }, error => {
                     console.log('promise failed ' + error);
                 });
@@ -177,90 +219,98 @@ class MainController extends Component {
         document.body.appendChild(script);
     }
 
-    bindEvents() {
-        const me = this;
-       
-        // me.api.asc_registerCallback('asc_onError',                      _.bind(me.onError, me));
-        me.api.asc_registerCallback('asc_onDocumentContentReady',       me._onDocumentContentReady.bind(me));
-        me.api.asc_registerCallback('asc_onOpenDocumentProgress',       me._onOpenDocumentProgress.bind(me));
+    applyMode(appOptions) {
+        this.api.asc_enableKeyEvents(appOptions.isEdit);
+        this.api.asc_setViewMode(!appOptions.isEdit && !appOptions.isRestrictedEdit);
+        (appOptions.isRestrictedEdit && appOptions.canComments) && this.api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyComments);
+
+        let value = LocalStorage.getItem('pe-mobile-settings-unit');
+        value = (value !== null) ?
+            parseInt(value) :
+            (appOptions.customization && appOptions.customization.unit ? Common.Utils.Metric.c_MetricUnits[appOptions.customization.unit.toLocaleLowerCase()] : Common.Utils.Metric.getDefaultMetric());
+        (value === undefined) && (value = Common.Utils.Metric.getDefaultMetric());
+        Common.Utils.Metric.setCurrentMetric(value);
+        this.api.asc_SetDocumentUnits((value === Common.Utils.Metric.c_MetricUnits.inch) ?
+            Asc.c_oAscDocumentUnits.Inch :
+            ((value === Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
+
+        this.api.asc_registerCallback('asc_onDocumentModifiedChanged', this.onDocumentModifiedChanged.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentCanSaveChanged',  this.onDocumentCanSaveChanged.bind(this));
+
+        //if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) {
+        //    me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights);
+        //} else if (!this._isDocReady) {
+        //    me.hidePreloader();
+        //    me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+        //}
+
+        // Message on window close
+        window.onbeforeunload = this.onBeforeUnload.bind(this);
+        window.onunload = this.onUnload.bind(this);
+    }
+
+    onDocumentModifiedChanged () {
+        const isModified = this.api.asc_isDocumentCanSave();
+        if (this._state.isDocModified !== isModified) {
+            this._isDocReady && Common.Gateway.setDocumentModified(this.api.isDocumentModified());
+        }
+
+        this.updateWindowTitle();
+    }
+
+    onDocumentCanSaveChanged (isCanSave) {
+        //
+    }
+
+    onBeforeUnload () {
+        LocalStorage.save();
+
+        if (this.api.isDocumentModified()) {
+            this.api.asc_stopSaving();
+            this.continueSavingTimer = window.setTimeout(() => {
+                this.api.asc_continueSaving();
+            }, 500);
+
+            return this._t.leavePageText;
+        }
+    }
+
+    onUnload () {
+        if (this.continueSavingTimer)
+            clearTimeout(this.continueSavingTimer);
+    }
+
+    bindEvents () {
+        this.api.asc_registerCallback('asc_onDocumentContentReady', this.onDocumentContentReady.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentUpdateVersion', this.onUpdateVersion.bind(this));
+        this.api.asc_registerCallback('asc_onServerVersion', this.onServerVersion.bind(this));
+        this.api.asc_registerCallback('asc_onAdvancedOptions', this.onAdvancedOptions.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
+        this.api.asc_registerCallback('asc_onPrintUrl', this.onPrintUrl.bind(this));
+        this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this));
+        this.api.asc_registerCallback('asc_onMeta', this.onMeta.bind(this));
+
+        EditorUIController.initThemeColors && EditorUIController.initThemeColors();
 
         const storePresentationSettings = this.props.storePresentationSettings;
 
-        me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
+        this.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
             storePresentationSettings.changeSizeIndex(width, height);
         });
 
-        me.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => {
+        this.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => {
             storePresentationSettings.addSchemes(arr);
         });
 
-        // api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(this.onSendThemeColorSchemes, this));
-        // me.api.asc_registerCallback('asc_onDocumentUpdateVersion',      _.bind(me.onUpdateVersion, me));
-        // me.api.asc_registerCallback('asc_onServerVersion',              _.bind(me.onServerVersion, me));
-        // me.api.asc_registerCallback('asc_onAdvancedOptions',            _.bind(me.onAdvancedOptions, me));
-        // me.api.asc_registerCallback('asc_onDocumentName',               _.bind(me.onDocumentName, me));
-        // me.api.asc_registerCallback('asc_onPrintUrl',                   _.bind(me.onPrintUrl, me));
-        // me.api.asc_registerCallback('asc_onThumbnailsShow',             _.bind(me.onThumbnailsShow, me));
-        // me.api.asc_registerCallback('asc_onMeta',                       _.bind(me.onMeta, me));
+        EditorUIController.initFocusObjects && EditorUIController.initFocusObjects(this.props.storeFocusObjects);
 
-        const storeFocusObjects = this.props.storeFocusObjects;
-        const storeSlideSettings = this.props.storeSlideSettings;
-        
-        this.api.asc_registerCallback('asc_onFocusObject', objects => {
-            // console.log(objects);
-            storeFocusObjects.resetFocusObjects(objects);
-        });
-
-        this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
-            // console.log(themes);
-            storeSlideSettings.addArrayThemes(themes);
-        });
-
-        this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
-            // console.log(themeId);
-            storeSlideSettings.changeSlideThemeIndex(themeId);
-        });
-
-        this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
-            // console.log(layouts);
-            storeSlideSettings.addArrayLayouts(layouts);
-        });
-
-        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
-            Common.Utils.ThemeColor.setColors(colors, standart_colors);
-        });
+        EditorUIController.initEditorStyles && EditorUIController.initEditorStyles(this.props.storeSlideSettings);
 
         // Text settings 
 
         const storeTextSettings = this.props.storeTextSettings;
 
-        this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
-            storeTextSettings.initEditorFonts(fonts, select);
-        });
-
-        this.api.asc_registerCallback('asc_onFontFamily', (font) => {
-            storeTextSettings.resetFontName(font);
-        });
-
-        this.api.asc_registerCallback('asc_onFontSize', (size) => {
-            storeTextSettings.resetFontSize(size);
-        });
-
-        this.api.asc_registerCallback('asc_onBold', (isBold) => {
-            storeTextSettings.resetIsBold(isBold);
-        });
-
-        this.api.asc_registerCallback('asc_onItalic', (isItalic) => {
-            storeTextSettings.resetIsItalic(isItalic);
-        });
-
-        this.api.asc_registerCallback('asc_onUnderline', (isUnderline) => {
-            storeTextSettings.resetIsUnderline(isUnderline);
-        });
-
-        this.api.asc_registerCallback('asc_onStrikeout', (isStrikeout) => {
-            storeTextSettings.resetIsStrikeout(isStrikeout);
-        });
+        EditorUIController.initFonts && EditorUIController.initFonts(storeTextSettings);
 
         this.api.asc_registerCallback('asc_onVerticalAlign', (typeBaseline) => {
             storeTextSettings.resetTypeBaseline(typeBaseline);
@@ -275,9 +325,11 @@ class MainController extends Component {
             switch (type) {
                 case 0:
                     storeTextSettings.resetBullets(subtype);
+                    storeTextSettings.resetNumbers(-1);
                     break;
                 case 1:
                     storeTextSettings.resetNumbers(subtype);
+                    storeTextSettings.resetBullets(-1);
                     break;
                 default: 
                     storeTextSettings.resetBullets(-1);
@@ -317,30 +369,57 @@ class MainController extends Component {
 
         // Table settings
 
-        const storeTableSettings = this.props.storeTableSettings;
-        
-        this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
-            storeTableSettings.initTableTemplates(templates);
-        });
+        EditorUIController.initTableTemplates && EditorUIController.initTableTemplates(this.props.storeTableSettings);
 
         // Chart settings
 
-        const storeChartSettings = this.props.storeChartSettings;
-
-        this.api.asc_registerCallback('asc_onUpdateChartStyles', () => {
-            if (storeFocusObjects.chartObject) {
-                storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.getType()));
-            }
-        });
+        EditorUIController.updateChartStyles && EditorUIController.updateChartStyles(this.props.storeChartSettings, this.props.storeFocusObjects);
     }
 
-    _onDocumentContentReady() {
-        const me = this;
-        me.api.SetDrawingFreeze(false);
+    onDocumentContentReady () {
+        if (this._isDocReady)
+            return;
 
-        me.api.Resize();
-        me.api.zoomFitToPage();
-        // me.api.asc_GetDefaultTableStyles && _.defer(function () {me.api.asc_GetDefaultTableStyles()});
+        this._isDocReady = true;
+
+        const appOptions = this.props.storeAppOptions;
+        const appSettings = this.props.storeApplicationSettings;
+
+        this.api.SetDrawingFreeze(false);
+
+        Common.Notifications.trigger('preloader:close');
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+
+        let value = LocalStorage.getItem("pe-settings-zoom");
+        const zf = (value!==null) ? parseInt(value) : (appOptions.customization && appOptions.customization.zoom ? parseInt(appOptions.customization.zoom) : -1);
+        (zf === -1) ? this.api.zoomFitToPage() : ((zf === -2) ? this.api.zoomFitToWidth() : this.api.zoom(zf>0 ? zf : 100));
+
+        value = LocalStorage.getBool("pe-mobile-spellcheck", !(appOptions.customization && appOptions.customization.spellcheck===false));
+        appSettings.changeSpellCheck(value);
+        this.api.asc_setSpellCheck(value);
+
+        this.updateWindowTitle(true);
+
+        this.api.SetTextBoxInputMode(LocalStorage.getBool("pe-settings-inputmode"));
+
+        if (appOptions.isEdit && this.needToUpdateVersion) {
+            Common.Notifications.trigger('api:disconnect');
+        }
+
+        Common.Gateway.on('processsaveresult', this.onProcessSaveResult.bind(this));
+        Common.Gateway.on('processrightschange', this.onProcessRightsChange.bind(this));
+        Common.Gateway.on('downloadas', this.onDownloadAs.bind(this));
+        Common.Gateway.on('requestclose', this.onRequestClose.bind(this));
+
+        Common.Gateway.sendInfo({
+            mode: appOptions.isEdit ? 'edit' : 'view'
+        });
+
+        this.api.Resize();
+        this.api.zoomFitToPage();
+        this.api.asc_GetDefaultTableStyles && setTimeout(() => {this.api.asc_GetDefaultTableStyles()}, 1);
+
+        this.applyLicense();
 
         Common.Gateway.documentReady();
         f7.emit('resize');
@@ -348,28 +427,363 @@ class MainController extends Component {
         Common.Notifications.trigger('document:ready');
     }
 
-    _onOpenDocumentProgress(progress) {
-        // if (this.loadMask) {
-        //     var $title = $$(this.loadMask).find('.modal-title'),
-        //         const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
-
-            // $title.text(this.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
-        // }
+    onLicenseChanged (params) {
+        const appOptions = this.props.storeAppOptions;
+        const licType = params.asc_getLicenseType();
+        if (licType !== undefined && appOptions.canEdit && appOptions.config.mode !== 'view' &&
+            (licType === Asc.c_oLicenseResult.Connections || licType === Asc.c_oLicenseResult.UsersCount || licType === Asc.c_oLicenseResult.ConnectionsOS || licType === Asc.c_oLicenseResult.UsersCountOS
+                || licType === Asc.c_oLicenseResult.SuccessLimit && (appOptions.trialMode & Asc.c_oLicenseMode.Limited) !== 0))
+            this._state.licenseType = licType;
+        if (this._isDocReady && this._state.licenseType)
+            this.applyLicense();
     }
 
-    render() {
+    applyLicense () {
+        const _t = this._t;
+        const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
+        const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
+        const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
+        const warnLicenseExceeded = _t.warnLicenseExceeded.replace(/%1/g, __COMPANY_NAME__);
+        const warnLicenseUsersExceeded = _t.warnLicenseUsersExceeded.replace(/%1/g, __COMPANY_NAME__);
+
+        const appOptions = this.props.storeAppOptions;
+        if (appOptions.config.mode !== 'view' && !EditorUIController.isSupportEditFeature()) {
+            let value = LocalStorage.getItem("pe-opensource-warning");
+            value = (value !== null) ? parseInt(value) : 0;
+            const now = (new Date).getTime();
+            if (now - value > 86400000) {
+                LocalStorage.setItem("pe-opensource-warning", now);
+                f7.dialog.create({
+                    title: _t.notcriticalErrorTitle,
+                    text : _t.errorOpensource,
+                    buttons: [{text: 'OK'}]
+                }).open();
+            }
+            Common.Notifications.trigger('toolbar:activatecontrols');
+            return;
+        }
+
+        if (this._state.licenseType) {
+            let license = this._state.licenseType;
+            let buttons = [{text: 'OK'}];
+            if ((appOptions.trialMode & Asc.c_oLicenseMode.Limited) !== 0 &&
+                (license === Asc.c_oLicenseResult.SuccessLimit ||
+                    license === Asc.c_oLicenseResult.ExpiredLimited ||
+                    appOptions.permissionsLicense === Asc.c_oLicenseResult.SuccessLimit)
+            ) {
+                license = (license === Asc.c_oLicenseResult.ExpiredLimited) ? _t.warnLicenseLimitedNoAccess : _t.warnLicenseLimitedRenewed;
+            } else if (license === Asc.c_oLicenseResult.Connections || license === Asc.c_oLicenseResult.UsersCount) {
+                license = (license===Asc.c_oLicenseResult.Connections) ? warnLicenseExceeded : warnLicenseUsersExceeded;
+            } else {
+                license = (license === Asc.c_oLicenseResult.ConnectionsOS) ? warnNoLicense : warnNoLicenseUsers;
+                buttons = [{
+                    text: _t.textBuyNow,
+                    bold: true,
+                    onClick: function() {
+                        window.open(`${__PUBLISHER_URL__}`, "_blank");
+                    }
+                },
+                    {
+                        text: _t.textContactUs,
+                        onClick: function() {
+                            window.open(`mailto:${__SALES_EMAIL__}`, "_blank");
+                        }
+                    }];
+            }
+            if (this._state.licenseType === Asc.c_oLicenseResult.SuccessLimit) {
+                Common.Notifications.trigger('toolbar:activatecontrols');
+            } else {
+                Common.Notifications.trigger('toolbar:activatecontrols');
+                Common.Notifications.trigger('toolbar:deactivateeditcontrols');
+                Common.Notifications.trigger('api:disconnect');
+            }
+
+            let value = LocalStorage.getItem("pe-license-warning");
+            value = (value !== null) ? parseInt(value) : 0;
+            const now = (new Date).getTime();
+
+            if (now - value > 86400000) {
+                LocalStorage.setItem("pe-license-warning", now);
+                f7.dialog.create({
+                    title: textNoLicenseTitle,
+                    text : license,
+                    buttons: buttons
+                }).open();
+            }
+        } else {
+            if (!appOptions.isDesktopApp && !appOptions.canBrandingExt &&
+                appOptions.config && appOptions.config.customization && (appOptions.config.customization.loaderName || appOptions.config.customization.loaderLogo)) {
+                f7.dialog.create({
+                    title: _t.textPaidFeature,
+                    text  : _t.textCustomLoader,
+                    buttons: [{
+                        text: _t.textContactUs,
+                        bold: true,
+                        onClick: () => {
+                            window.open(`mailto:${__SALES_EMAIL__}`, "_blank");
+                        }
+                    },
+                        { text: _t.textClose }]
+                }).open();
+            }
+            Common.Notifications.trigger('toolbar:activatecontrols');
+        }
+    }
+
+    onUpdateVersion (callback) {
+        const _t = this._t;
+
+        this.needToUpdateVersion = true;
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+
+        f7.dialog.alert(
+            _t.errorUpdateVersion,
+            _t.titleUpdateVersion,
+            () => {
+                Common.Gateway.updateVersion();
+                if (callback) {
+                    callback.call(this);
+                }
+                Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+            });
+    }
+
+    onServerVersion (buildVersion) {
+        if (this.changeServerVersion) return true;
+        const _t = this._t;
+
+        if (About.appVersion() !== buildVersion && !window.compareVersions) {
+            this.changeServerVersion = true;
+            f7.dialog.alert(
+                _t.errorServerVersion,
+                _t.titleServerVersion,
+                () => {
+                    setTimeout(() => {Common.Gateway.updateVersion()}, 0);
+                });
+            return true;
+        }
+        return false;
+    }
+
+    onAdvancedOptions (type, advOptions) {
+        if ($$('.dlg-adv-options.modal-in').length > 0) return;
+
+        const _t = this._t;
+
+        if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
+            Common.Notifications.trigger('preloader:close');
+            Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+
+            const buttons = [{
+                text: 'OK',
+                bold: true,
+                close: false,
+                onClick: () => {
+                    const password = document.getElementById('modal-password').value;
+                    this.api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
+
+                    if (!this._isDocReady) {
+                        Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+                    }
+                }
+            }];
+            if (this.props.storeAppOptions.canRequestClose)
+                buttons.push({
+                    text: _t.closeButtonText,
+                    onClick: () => {
+                        Common.Gateway.requestClose();
+                    }
+                });
+
+            f7.dialog.create({
+                title: _t.advDRMOptions,
+                text: (typeof advOptions === 'string' ? advOptions : _t.txtProtected),
+                content:
+                    `<div class="input-field">
+                        <input type="password" name="modal-password" placeholder="${ _t.advDRMPassword }" class="modal-text-input">
+                    </div>`,
+                buttons: buttons,
+                cssClass: 'dlg-adv-options'
+            }).open();
+        }
+    }
+
+    onDocumentName () {
+        this.updateWindowTitle(true);
+    }
+
+    updateWindowTitle (force) {
+        const isModified = this.api.isDocumentModified();
+        if (this._state.isDocModified !== isModified || force) {
+            const title = this.defaultTitleText;
+
+            if (window.document.title !== title) {
+                window.document.title = title;
+            }
+
+            this._isDocReady && (this._state.isDocModified !== isModified) && Common.Gateway.setDocumentModified(isModified);
+            this._state.isDocModified = isModified;
+        }
+    }
+
+    onPrint () {
+        if (!this.props.storeAppOptions.canPrint) return;
+
+        if (this.api)
+            this.api.asc_Print();
+        Common.component.Analytics.trackEvent('Print');
+    }
+
+    onPrintUrl (url) {
+        if (this.iframePrint) {
+            this.iframePrint.parentNode.removeChild(this.iframePrint);
+            this.iframePrint = null;
+        }
+
+        if (!this.iframePrint) {
+            this.iframePrint = document.createElement("iframe");
+            this.iframePrint.id = "id-print-frame";
+            this.iframePrint.style.display = 'none';
+            this.iframePrint.style.visibility = "hidden";
+            this.iframePrint.style.position = "fixed";
+            this.iframePrint.style.right = "0";
+            this.iframePrint.style.bottom = "0";
+            document.body.appendChild(this.iframePrint);
+            this.iframePrint.onload = function() {
+                this.iframePrint.contentWindow.focus();
+                this.iframePrint.contentWindow.print();
+                this.iframePrint.contentWindow.blur();
+                window.focus();
+            };
+        }
+
+        if (url) {
+            this.iframePrint.src = url;
+        }
+    }
+
+    onMeta (meta) {
+        this.updateWindowTitle(true);
+        Common.Gateway.metaChange(meta);
+    }
+
+    onExternalMessage (msg) {
+        if (msg && msg.msg) {
+            msg.msg = (msg.msg).toString();
+            f7.notification.create({
+                //title: uiApp.params.modalTitle,
+                text: [msg.msg.charAt(0).toUpperCase() + msg.msg.substring(1)],
+                closeButton: true
+            }).open();
+
+            Common.component.Analytics.trackEvent('External Error');
+        }
+    }
+
+    onRunAutostartMacroses () {
+        const config = this.props.storeAppOptions.config;
+        const enable = !config.customization || (config.customization.macros !== false);
+        if (enable) {
+            const value = this.props.storeApplicationSettings.macrosMode;
+            if (value === 1) {
+                this.api.asc_runAutostartMacroses();
+            } else if (value === 0) {
+                const _t = this._t;
+                f7.dialog.create({
+                    title: _t.notcriticalErrorTitle,
+                    text: _t.textHasMacros,
+                    content: `<div class="checkbox-in-modal">
+                      <label class="checkbox">
+                        <input type="checkbox" name="checkbox-show-macros" />
+                        <i class="icon-checkbox"></i>
+                      </label>
+                      <span class="right-text">${_t.textRemember}</span>
+                      </div>`,
+                    buttons: [{
+                        text: _t.textYes,
+                        onClick: () => {
+                            const dontshow = $$('input[name="checkbox-show-macros"]').prop('checked');
+                            if (dontshow) {
+                                this.props.storeApplicationSettings.changeMacrosSettings(1);
+                                LocalStorage.setItem("pe-mobile-macros-mode", 1);
+                            }
+                            setTimeout(() => {
+                                this.api.asc_runAutostartMacroses();
+                            }, 1);
+                        }},
+                        {
+                            text: _t.textNo,
+                            onClick: () => {
+                                const dontshow = $$('input[name="checkbox-show-macros"]').prop('checked');
+                                if (dontshow) {
+                                    this.props.storeApplicationSettings.changeMacrosSettings(2);
+                                    LocalStorage.setItem("pe-mobile-macros-mode", 2);
+                                }
+                            }
+                        }]
+                }).open();
+            }
+        }
+    }
+
+    onProcessSaveResult (data) {
+        this.api.asc_OnSaveEnd(data.result);
+
+        if (data && data.result === false) {
+            const _t = this._t;
+            f7.dialog.alert(
+                (!data.message) ? _t.errorProcessSaveResult : data.message,
+                _t.criticalErrorTitle
+            );
+        }
+    }
+
+    onProcessRightsChange (data) {
+        if (data && data.enabled === false) {
+            const appOptions = this.props.storeAppOptions;
+            const old_rights = appOptions.lostEditingRights;
+            appOptions.changeEditingRights(!old_rights);
+            this.api.asc_coAuthoringDisconnect();
+            Common.Notifications.trigger('api:disconnect');
+
+            if (!old_rights) {
+                const _t = this._t;
+                f7.dialog.alert(
+                    (!data.message) ? _t.warnProcessRightsChange : data.message,
+                    _t.notcriticalErrorTitle,
+                    () => { appOptions.changeEditingRights(false); }
+                );
+            }
+        }
+    }
+
+    onDownloadAs () {
+        if ( !this.props.storeAppOptions.canDownload) {
+            Common.Gateway.reportError(Asc.c_oAscError.ID.AccessDeny, this.errorAccessDeny);
+            return;
+        }
+        this._state.isFromGatewayDownloadAs = true;
+        this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PPTX, true));
+    }
+
+    onRequestClose () {
+        Common.Gateway.requestClose();
+    }
+
+    render () {
         return (
             <Fragment>
+                <LongActionsController />
+                <ErrorController LoadingDocument={this.LoadingDocument}/>
                 <CollaborationController />
                 <CommentsController />
-                <AddCommentController />
-                <EditCommentController />
+                {EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
                 <ViewCommentsController />
             </Fragment>
             )
     }
 
-    componentDidMount() {
+    componentDidMount () {
         this.initSdk();
     }
 }

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

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import Preview from "../view/Preview";
+
+const PreviewController = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true})
+
+    let _view, _touches, _touchStart, _touchEnd;
+
+    _view = $$('#pe-preview');
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
+
+            api.asc_registerCallback('asc_onEndDemonstration', onEndDemonstration);
+            api.DemonstrationEndShowMessage(_t.textFinalMessage);
+        };
+
+        show();
+        onDocumentReady();
+
+        _view.on('touchstart', onTouchStart);
+        _view.on('touchmove', onTouchMove);
+        _view.on('touchend', onTouchEnd);
+        _view.on('click', onClick);
+
+        return () => {
+            const api = Common.EditorApi.get();
+
+            api.asc_unregisterCallback('asc_onEndDemonstration', onEndDemonstration);
+        
+            _view.off('touchstart', onTouchStart);
+            _view.off('touchmove', onTouchMove);
+            _view.off('touchend', onTouchEnd);
+            _view.off('click', onClick);
+        };
+    }, []);
+
+    const show = () => {
+        const api = Common.EditorApi.get();
+        api.StartDemonstration('presentation-preview', api.getCurrentPage());
+    };
+
+    const onTouchStart = e => {
+        e.preventDefault();
+
+        _touches = [];
+
+        for (let i = 0; i < e.touches.length; i++) {
+            _touches.push([e.touches[i].pageX, e.touches[i].pageY]);
+        }
+        _touchEnd = _touchStart = [e.touches[0].pageX, e.touches[0].pageY];
+    };
+
+    const onTouchMove = e => {
+        e.preventDefault();
+
+        const api = Common.EditorApi.get();
+
+        _touchEnd = [e.touches[0].pageX, e.touches[0].pageY];
+
+        if (e.touches.length < 2 ) return;
+
+        for (let i = 0; i < e.touches.length; i++) {
+            if (Math.abs(e.touches[i].pageX - _touches[i][0]) > 20 || Math.abs(e.touches[i].pageY - _touches[i][1]) > 20 ) {
+                api.EndDemonstration();
+                break;
+            }
+        }
+    };
+
+    const onTouchEnd = e => {
+        e.preventDefault();
+
+        const api = Common.EditorApi.get();
+
+        if (_touchEnd[0] - _touchStart[0] > 20)
+            api.DemonstrationPrevSlide();
+        else if (_touchStart[0] - _touchEnd[0] > 20)
+            api.DemonstrationNextSlide();
+    };
+
+    const onClick = e => {
+        const api = Common.EditorApi.get();
+        api.DemonstrationNextSlide();
+    };
+
+    // API Handlers
+
+    const onEndDemonstration = () => {
+        props.onclosed();
+    };
+
+    return (
+        <Preview />
+    )
+};
+
+export {PreviewController as Preview};
+
+
+

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

@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import ToolbarView from "../view/Toolbar";
+
+const ToolbarController = inject('storeAppOptions', 'users')(props => {
+    const {t} = useTranslation();
+    const _t = t("Toolbar", { returnObjects: true });
+
+    const appOptions = props.storeAppOptions;
+    const isDisconnected = props.users.isDisconnected;
+    const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
+            api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
+            api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
+            api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
+            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+            api.asc_registerCallback('asc_onCountPages', onApiCountPages);
+            Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.on('toolbar:activatecontrols', activateControls);
+            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.on('goback', goBack);
+        };
+        if ( !Common.EditorApi ) {
+            Common.Notifications.on('document:ready', onDocumentReady);
+            Common.Notifications.on('setdoctitle', setDocTitle);
+            Common.Gateway.on('init', loadConfig);
+        } else {
+            onDocumentReady();
+        }
+
+        return () => {
+            Common.Notifications.off('document:ready', onDocumentReady);
+            Common.Notifications.off('setdoctitle', setDocTitle);
+            Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.off('toolbar:activatecontrols', activateControls);
+            Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.off('goback', goBack);
+
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
+            api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
+            api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
+            api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+            api.asc_unregisterCallback('asc_onCountPages', onApiCountPages);
+        }
+    });
+
+    const [docTitle, resetDocTitle] = useState('');
+    const setDocTitle = (title) => {
+        resetDocTitle(title);
+    }
+
+    // Back button
+    const [isShowBack, setShowBack] = useState(false);
+    const loadConfig = (data) => {
+        if (data && data.config && data.config.canBackToFolder !== false &&
+            data.config.customization && data.config.customization.goback &&
+            (data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
+            setShowBack(true);
+        }
+    };
+    const onBack = () => {
+        const api = Common.EditorApi.get();
+        if (api.isDocumentModified()) {
+            f7.dialog.create({
+                title   : _t.dlgLeaveTitleText,
+                text    : _t.dlgLeaveMsgText,
+                verticalButtons: true,
+                buttons : [
+                    {
+                        text: _t.leaveButtonText,
+                        onClick: function() {
+                            goBack();
+                        }
+                    },
+                    {
+                        text: _t.stayButtonText,
+                        bold: true
+                    }
+                ]
+            }).open();
+        } else {
+            goBack();
+        }
+    };
+    const goBack = (current) => {
+        //if ( !Common.Controllers.Desktop.process('goback') ) {
+            if (appOptions.customization.goback.requestClose && appOptions.canRequestClose) {
+                Common.Gateway.requestClose();
+            } else {
+                const href = appOptions.customization.goback.url;
+                if (!current && appOptions.customization.goback.blank !== false) {
+                    window.open(href, "_blank");
+                } else {
+                    parent.location.href = href;
+                }
+            }
+        //}
+    }
+
+    // Undo and Redo
+    const [isCanUndo, setCanUndo] = useState(true);
+    const [isCanRedo, setCanRedo] = useState(true);
+    const onApiCanUndo = (can) => {
+        if (isDisconnected) return;
+        setCanUndo(can);
+    };
+    const onApiCanRedo = (can) => {
+        if (isDisconnected) return;
+        setCanRedo(can);
+    };
+    const onUndo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.Undo();
+        }
+    };
+    const onRedo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.Redo();
+        }
+    }
+
+    const [disabledAdd, setDisabledAdd] = useState(false);
+    const [disabledEdit, setDisabledEdit] = useState(false);
+    const onApiFocusObject = (objects) => {
+        if (isDisconnected) return;
+
+        if (objects.length > 0) {
+            let slide_deleted = false,
+                slide_lock = false,
+                no_object = true,
+                objectLocked = false;
+            objects.forEach((object) => {
+                const type = object.get_ObjectType();
+                const objectValue = object.get_ObjectValue();
+                if (type === Asc.c_oAscTypeSelectElement.Slide) {
+                    slide_deleted = objectValue.get_LockDelete();
+                    slide_lock = objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming();
+                } else if (objectValue && typeof objectValue.get_Locked === 'function') {
+                    no_object = false;
+                    objectLocked = objectLocked || objectValue.get_Locked();
+                }
+            });
+
+            setDisabledAdd(slide_deleted);
+            setDisabledEdit(slide_deleted || (objectLocked || no_object) && slide_lock);
+        }
+    };
+
+    const [disabledPreview, setDisabledPreview] = useState(false);
+    const onApiCountPages = (count) => {
+        setDisabledPreview(count <= 0);
+    };
+
+    const [disabledEditControls, setDisabledEditControls] = useState(false);
+    const [disabledSettings, setDisabledSettings] = useState(false);
+    const deactivateEditControls = (enableDownload) => {
+        setDisabledEditControls(true);
+        if (enableDownload) {
+            //DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
+        } else {
+            setDisabledSettings(true);
+        }
+    };
+
+
+    const [disabledControls, setDisabledControls] = useState(true);
+    const activateControls = () => {
+        setDisabledControls(false);
+    };
+
+    const onCoAuthoringDisconnect = (enableDownload) => {
+        deactivateEditControls(enableDownload);
+        setCanUndo(false);
+        setCanRedo(false);
+        f7.popover.close();
+        f7.sheet.close();
+        f7.popup.close();
+    };
+
+    return (
+        <ToolbarView openOptions={props.openOptions}
+                     isEdit={appOptions.isEdit}
+                     docTitle={docTitle}
+                     isShowBack={isShowBack}
+                     onBack={onBack}
+                     isCanUndo={isCanUndo}
+                     isCanRedo={isCanRedo}
+                     onUndo={onUndo}
+                     onRedo={onRedo}
+                     disabledAdd={disabledAdd}
+                     disabledEdit={disabledEdit}
+                     disabledPreview={disabledPreview}
+                     disabledControls={disabledControls}
+                     disabledEditControls={disabledEditControls}
+                     disabledSettings={disabledSettings}
+                     displayCollaboration={displayCollaboration}
+        />
+    )
+});
+
+export {ToolbarController as Toolbar};

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

@@ -132,7 +132,7 @@ class EditTextController extends Component {
         if (isDecrement) {
             typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size);
         } else {
-            typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(100, ++size);
+            typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(300, ++size);
         }
         if (typeof size !== 'undefined') {
             api.put_TextPrFontSize(size);

apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 class ApplicationSettingsController extends Component {
     constructor(props) {
@@ -8,23 +9,19 @@ class ApplicationSettingsController extends Component {
 
     setUnitMeasurement(value) {
         const api = Common.EditorApi.get();
-        value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
+        value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
         Common.Utils.Metric.setCurrentMetric(value);
-        // Common.localStorage.setItem("pe-mobile-settings-unit", value);
-        api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
+        LocalStorage.setItem("pe-mobile-settings-unit", value);
+        api.asc_SetDocumentUnits((value === Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value === Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
     }
 
     switchSpellCheck(value) {
-        const api = Common.EditorApi.get();
-        // let state = value === '1' ? true : false;
-        // Common.localStorage.setItem("pe-mobile-spellcheck", state ? 1 : 0);
-        // Common.Utils.InternalSettings.set("pe-mobile-spellcheck", state);
-        api.asc_setSpellCheck(value);
+        LocalStorage.setBool("pe-mobile-spellcheck", value);
+        Common.EditorApi.get().asc_setSpellCheck(value);
     }
 
     setMacrosSettings(value) {
-        Common.Utils.InternalSettings.set("pe-mobile-macros-mode", value);
-        // Common.localStorage.setItem("pe-mobile-macros-mode", value);
+        LocalStorage.setItem("pe-mobile-macros-mode", value);
     }
 
 

apps/presentationeditor/mobile/src/page/app.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
 import { f7ready } from 'framework7-react';
 
+import '../../../../common/Analytics.js';
+
 import '../../../../common/Gateway.js';
 import '../../../../common/main/lib/util/utils.js';
 

apps/presentationeditor/mobile/src/page/main.jsx

@@ -1,15 +1,16 @@
-import React, { Component } from 'react';
-import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
+import React, { Component, Fragment } from 'react';
+import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import { observer, inject } from "mobx-react";
 
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
-import { Device } from '../../../../common/mobile/utils/device';
+import { Preview } from "../controller/Preview";
 import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
-
-export default class MainPage extends Component {
+import { Toolbar } from "../controller/Toolbar";
+class MainPage extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -17,9 +18,14 @@ export default class MainPage extends Component {
             addOptionsVisible: false,
             settingsVisible: false,
             collaborationVisible: false,
+            previewVisible: false
         };
     }
 
+    onClosePreview = () => {
+        this.setState({previewVisible: false});
+    }
+
     handleClickToOpenOptions = (opts, showOpts) => {
         ContextMenu.closeContextMenu();
 
@@ -34,7 +40,9 @@ export default class MainPage extends Component {
             else if ( opts == 'settings' )
                 return {settingsVisible: true};
             else if ( opts == 'coauth' )
-                return {collaborationVisible: true}
+                return {collaborationVisible: true};
+            else if ( opts == 'preview' )
+                return {previewVisible: true};
         });
     };
 
@@ -49,52 +57,55 @@ export default class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false}
+                else if ( opts == 'preview' )
+                    return {previewVisible: false};
             })
         })();
     };
 
-  render() {
-    return (
-        <Page name="home">
-            {/* Top Navbar */}
-            <Navbar id='editor-navbar'>
-                {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
-                <NavLeft>
-                    <Link icon='icon-undo'></Link>
-                    <Link icon='icon-redo'></Link>
-                </NavLeft>
-                <NavRight>
-                    <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
-                    <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                    { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                    <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
-                    <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
-                </NavRight>
-                <Search useSuspense={false} />
-            </Navbar>
-            {/* Page content */}
-            <View id="editor_sdk" />
+    render() {
+        const appOptions = this.props.storeAppOptions;
+        const config = appOptions.config;
+        const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
 
-            <SearchSettings useSuspense={false} />
+        return (
+            <Fragment>
+                {!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
+                <Page name="home" className={showLogo && 'page-with-logo'}>
+                    {/* Top Navbar */}
+                    <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
+                        {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
+                        <Subnavbar>
+                            <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+                            <Search useSuspense={false}/>
+                        </Subnavbar>
+                    </Navbar>
+                    {/* Page content */}
+                    <View id="editor_sdk" />
 
-            {
-                !this.state.editOptionsVisible ? null :
-                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-            }
-            {
-                !this.state.addOptionsVisible ? null :
-                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-            }
-            {
-                !this.state.settingsVisible ? null :
-                    <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-            }
-            {
-                !this.state.collaborationVisible ? null :
-                    <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
-            }
-            <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
-        </Page>
-    )
-  }
-};
+                    <SearchSettings useSuspense={false} />
+
+                    {
+                        !this.state.editOptionsVisible ? null :
+                            <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                    }
+                    {
+                        !this.state.addOptionsVisible ? null :
+                            <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                    }
+                    {
+                        !this.state.settingsVisible ? null :
+                            <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                    }
+                    {
+                        !this.state.collaborationVisible ? null :
+                            <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                    }
+                    <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
+                </Page>
+            </Fragment>
+        )
+    }
+}
+
+export default inject("storeAppOptions")(observer(MainPage));

apps/presentationeditor/mobile/src/store/focusObjects.js

@@ -25,79 +25,15 @@ export class storeFocusObjects {
     }
 
     get settings() {
-        const _settings = [];
-        let no_text = true;
-        for (let object of this._focusObjects) {
-            const type = object.get_ObjectType(),
-                objectValue = object.get_ObjectValue();
-            if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
-                if ( !objectValue.get_Locked() )
-                    no_text = false;
-            } else if (Asc.c_oAscTypeSelectElement.Table == type) {
-                if ( !objectValue.get_Locked() ) {
-                    _settings.push('table');
-                    no_text = false;
-                }
-            } else if (Asc.c_oAscTypeSelectElement.Slide == type) {
-                if ( !(objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming() ))
-                    _settings.push('slide');
-            } else if (Asc.c_oAscTypeSelectElement.Image == type) {
-                if ( !objectValue.get_Locked() )
-                    _settings.push('image');
-            } else if (Asc.c_oAscTypeSelectElement.Chart == type) {
-                if ( !objectValue.get_Locked() )
-                    _settings.push('chart');
-            } else if (Asc.c_oAscTypeSelectElement.Shape == type && !objectValue.get_FromChart()) {
-                if ( !objectValue.get_Locked() ) {
-                    _settings.push('shape');
-                    no_text = false;
-                }
-            } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
-                _settings.push('hyperlink');
-            }
-        }
-        if (!no_text && _settings.indexOf('image') < 0)
-            _settings.unshift('text');
-        const resultArr = _settings.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
-        // Exclude hyperlink if text is locked
-        if (resultArr.indexOf('hyperlink') > -1 && resultArr.indexOf('text') < 0) {
-            resultArr.splice(resultArr.indexOf('hyperlink'), 1);
-        }
-        // Exclude shapes if chart exist
-        if (resultArr.indexOf('chart') > -1 && resultArr.indexOf('shape') > -1) {
-            resultArr.splice(resultArr.indexOf('shape'), 1);
-        }
-        return resultArr;
+        return !!this.intf ? this.intf.filterFocusObjects() : null;
     }
 
     get slideObject() {
-        const slides = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
-                slides.push(object);
-            }
-        }
-        if (slides.length > 0) {
-            const object = slides[slides.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getSlideObject() : null;
     }
 
     get paragraphObject() {
-        const paragraphs = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
-                paragraphs.push(object);
-            }
-        }
-        if (paragraphs.length > 0) {
-            const object = paragraphs[paragraphs.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getParagraphObject() : null;
     }
 
     get paragraphLocked() {
@@ -111,48 +47,15 @@ export class storeFocusObjects {
     }
 
     get shapeObject() {
-        const shapes = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
-                shapes.push(object);
-            }
-        }
-        if (shapes.length > 0) {
-            const object = shapes[shapes.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getShapeObject() : null;
     }
 
     get imageObject() {
-        const images = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image && object.get_ObjectValue()) {
-                images.push(object);
-            }
-        }
-        if (images.length > 0) {
-            const object = images[images.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getImageObject() : null;
     }
 
     get tableObject() {
-        const tables = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
-                tables.push(object);
-            }
-        }
-        if (tables.length > 0) {
-            const object = tables[tables.length - 1]; // get top table
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getTableObject() : null;
     }
 
     get isTableInStack() {
@@ -165,34 +68,10 @@ export class storeFocusObjects {
     }
 
     get chartObject() {
-        const charts = [];
-        
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart) {
-                charts.push(object);
-            }
-        }
-
-        if (charts.length > 0) {
-            const object = charts[charts.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getChartObject() : null;
     }
 
     get linkObject() {
-        const links = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                links.push(object);
-            }
-        }
-        if (links.length > 0) {
-            const object = links[links.length - 1]; // get top
-            return  object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getLinkObject() : null;
     }
 }

apps/presentationeditor/mobile/src/view/Preview.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Preview = () => {
+    return (
+        <div id="pe-preview" style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 1000}}>
+            <div id="presentation-preview" style={{width: '100%', height: '100%'}}></div>
+        </div>
+    )
+};
+
+export default Preview;

apps/presentationeditor/mobile/src/view/Toolbar.jsx

@@ -0,0 +1,35 @@
+import React, {Fragment} from 'react';
+import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch'
+
+const ToolbarView = props => {
+    return (
+        <Fragment>
+            <NavLeft>
+                {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
+                {props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
+                    disabledUndo: !props.isCanUndo,
+                    disabledRedo: !props.isCanRedo,
+                    onUndoClick: props.onUndo,
+                    onRedoClick: props.onRedo
+                })}
+            </NavLeft>
+            {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
+            <NavRight>
+                <Link className={(props.disabledControls || props.disabledPreview) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
+                {props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
+                    disabledAdd: props.disabledAdd || props.disabledControls,
+                    disabledEdit: props.disabledEdit || props.disabledControls,
+                    onEditClick: () => props.openOptions('edit'),
+                    onAddClick: () => props.openOptions('add')
+                })}
+                { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
+                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
+                <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+            </NavRight>
+        </Fragment>
+    )
+};
+
+export default ToolbarView;

apps/presentationeditor/mobile/src/view/add/Add.jsx

@@ -73,9 +73,11 @@ const AddLayoutContent = ({ tabs }) => {
 const AddTabs = props => {
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
+    const api = Common.EditorApi.get();
+    const countPages = api.getCountPages();
     const showPanels = props.showPanels;
     const tabs = [];
-    if (!showPanels) {
+    if (!showPanels && countPages) {
         tabs.push({
             caption: _t.textSlide,
             id: 'add-slide',
@@ -101,6 +103,14 @@ const AddTabs = props => {
             component: <AddOtherController/>
         });
     }
+    if(!showPanels && !countPages) {
+        tabs.push({
+            caption: _t.textSlide,
+            id: 'add-slide',
+            icon: 'icon-add-slide',
+            component: <AddSlideController />
+        });
+    }
     if (showPanels && showPanels === 'link') {
         tabs.push({
             caption: _t.textAddLink,

apps/presentationeditor/mobile/src/view/edit/EditTable.jsx

@@ -60,24 +60,24 @@ const PageStyleOptions = props => {
             <Navbar title={_t.textOptions} backLink={_t.textBack}/>
             <List>
                 <ListItem title={_t.textHeaderRow}>
-                    <Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
+                    <Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
                 </ListItem>
                 <ListItem title={_t.textTotalRow}>
-                    <Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
+                    <Toggle checked={isLastRow} onChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
                 </ListItem>
                 <ListItem title={_t.textBandedRow}>
-                    <Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
+                    <Toggle checked={isBandHor} onChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
                 </ListItem>
             </List>
             <List>
                 <ListItem title={_t.textFirstColumn}>
-                    <Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
+                    <Toggle checked={isFirstCol} onChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
                 </ListItem>
                 <ListItem title={_t.textLastColumn}>
-                    <Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
+                    <Toggle checked={isLastCol} onChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
                 </ListItem>
                 <ListItem title={_t.textBandedColumn}>
-                    <Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
+                    <Toggle checked={isBandVer} onChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
                 </ListItem>
             </List>
         </Page>

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -84,7 +84,8 @@ const SettingsList = withTranslation()(props => {
 
     const showHelp = () => {
         // let url = '{{HELP_URL}}';
-        let url = 'https://helpcenter.onlyoffice.com';
+        let url = __HELP_URL__;
+        // let url = 'https://helpcenter.onlyoffice.com';
 
         if (url.charAt(url.length-1) !== '/') {
             url += '/';

apps/spreadsheeteditor/mobile/locale/en.json

@@ -2,10 +2,163 @@
     "Controller" : {
         "Main" : {
             "SDK": {
+                "txtStyle_Normal": "Normal",
+                "txtStyle_Heading_1": "Heading 1",
+                "txtStyle_Heading_2": "Heading 2",
+                "txtStyle_Heading_3": "Heading 3",
+                "txtStyle_Heading_4": "Heading 4",
+                "txtStyle_Title": "Title",
+                "txtStyle_Neutral": "Neutral",
+                "txtStyle_Bad": "Bad",
+                "txtStyle_Good": "Good",
+                "txtStyle_Input": "Input",
+                "txtStyle_Output": "Output",
+                "txtStyle_Calculation": "Calculation",
+                "txtStyle_Check_Cell": "Check Cell",
+                "txtStyle_Explanatory_Text": "Explanatory Text",
+                "txtStyle_Note": "Note",
+                "txtStyle_Linked_Cell": "Linked Cell",
+                "txtStyle_Warning_Text": "Warning Text",
+                "txtStyle_Total": "Total",
+                "txtStyle_Currency": "Currency",
+                "txtStyle_Percent": "Percent",
+                "txtStyle_Comma": "Comma",
+                "txtSeries": "Series",
+                "txtDiagramTitle": "Chart Title",
+                "txtXAxis": "X Axis",
+                "txtYAxis": "Y Axis",
+                "txtArt": "Your text here",
+                "txtAccent": "Accent"
             },
-            "textAnonymous": "Anonymous"
+            "textGuest": "Guest",
+            "textAnonymous": "Anonymous",
+            "warnLicenseExceeded": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact your administrator to learn more.",
+            "warnLicenseUsersExceeded": "You've reached the user limit for %1 editors. Contact your administrator to learn more.",
+            "warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact %1 sales team for personal upgrade terms.",
+            "warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.",
+            "textNoLicenseTitle": "License limit reached",
+            "warnLicenseLimitedNoAccess": "License expired. You have no access to document editing functionality. Please contact your administrator.",
+            "warnLicenseLimitedRenewed": "License needs to be renewed. You have a limited access to document editing functionality.<br>Please contact your administrator to get full access",
+            "textBuyNow": "Visit website",
+            "textContactUs": "Contact sales",
+            "textPaidFeature": "Paid feature",
+            "textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.",
+            "textClose": "Close",
+
+            "notcriticalErrorTitle": "Warning",
+            "textHasMacros": "The file contains automatic macros.<br>Do you want to run macros?",
+            "textRemember": "Remember my choice",
+            "textYes": "Yes",
+            "textNo": "No",
+
+            "leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
+            "errorUpdateVersion": "The file version has been changed. The page will be reloaded.",
+            "titleUpdateVersion": "Version changed",
+            "errorServerVersion": "The editor version has been updated. The page will be reloaded to apply the changes.",
+            "titleServerVersion": "Editor updated",
+            "errorProcessSaveResult": "Saving is failed.",
+            "criticalErrorTitle": "Error",
+            "warnProcessRightsChange": "You have been denied the right to edit the file.",
+            "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator."
         }
     },
+    "LongActions": {
+        "openTitleText": "Opening Document",
+        "openTextText": "Opening document...",
+        "saveTitleText": "Saving Document",
+        "saveTextText": "Saving document...",
+        "loadFontsTitleText": "Loading Data",
+        "loadFontsTextText": "Loading data...",
+        "loadImagesTitleText": "Loading Images",
+        "loadImagesTextText": "Loading images...",
+        "loadFontTitleText": "Loading Data",
+        "loadFontTextText": "Loading data...",
+        "loadImageTitleText": "Loading Image",
+        "loadImageTextText": "Loading image...",
+        "downloadTitleText": "Downloading Document",
+        "downloadTextText": "Downloading document...",
+        "printTitleText": "Printing Document",
+        "printTextText": "Printing document...",
+        "uploadImageTitleText": "Uploading Image",
+        "uploadImageTextText": "Uploading image...",
+        "applyChangesTitleText": "Loading Data",
+        "applyChangesTextText": "Loading data...",
+        "savePreparingText": "Preparing to save",
+        "savePreparingTitle": "Preparing to save. Please wait...",
+        "waitText": "Please, wait...",
+        "txtEditingMode": "Set editing mode...",
+        "loadingDocumentTitleText": "Loading document",
+        "loadingDocumentTextText": "Loading document...",
+        "textLoadingDocument": "Loading document"
+    },
+    "Error": {
+        "criticalErrorTitle": "Error",
+        "unknownErrorText": "Unknown error.",
+        "convertationTimeoutText": "Convertation timeout exceeded.",
+        "openErrorText": "An error has occurred while opening the file",
+        "saveErrorText": "An error has occurred while saving the file",
+        "downloadErrorText": "Download failed.",
+        "uploadImageSizeMessage": "Maximium image size limit exceeded.",
+        "uploadImageExtMessage": "Unknown image format.",
+        "uploadImageFileCountMessage": "No images uploaded.",
+        "errorKeyEncrypt": "Unknown key descriptor",
+        "errorKeyExpire": "Key descriptor expired",
+        "errorUsersExceed": "Count of users was exceed",
+        "errorViewerDisconnect": "Connection is lost. You can still view the document,<br>but will not be able to download until the connection is restored and page is reloaded.",
+        "errorFilePassProtect": "The file is password protected and could not be opened.",
+        "errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",
+        "errorDataRange": "Incorrect data range.",
+        "errorDatabaseConnection": "External error.<br>Database connection error. Please, contact support.",
+        "errorUserDrop": "The file cannot be accessed right now.",
+        "errorConnectToServer": " The document could not be saved. Please check connection settings or contact your administrator.<br>When you click the 'OK' button, you will be prompted to download the document.",
+        "errorBadImageUrl": "Image url is incorrect",
+        "errorSessionAbsolute": "The document editing session has expired. Please reload the page.",
+        "errorSessionIdle": "The document has not been edited for quite a long time. Please reload the page.",
+        "errorSessionToken": "The connection to the server has been interrupted. Please reload the page.",
+        "errorDataEncrypted": "Encrypted changes have been received, they cannot be deciphered.",
+        "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
+        "errorEditingDownloadas": "An error occurred during the work with the document.<br>Use the 'Download' option to save the file backup copy to your computer hard drive.",
+        "errorFileSizeExceed": "The file size exceeds the limitation set for your server.<br>Please contact your Document Server administrator for details.",
+        "errorUpdateVersionOnDisconnect": "Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.",
+        "errorDefaultMessage": "Error code: %1",
+        "criticalErrorExtText": "Press 'OK' to back to document list.",
+        "notcriticalErrorTitle": "Warning",
+        "scriptLoadError": "The connection is too slow, some of the components could not be loaded. Please reload the page.",
+        "pastInMergeAreaError": "Cannot change part of a merged cell",
+        "errorWrongBracketsCount": "Found an error in the formula entered.<br>Wrong cout of brackets.",
+        "errorWrongOperator": "An error in the entered formula. Wrong operator is used.<br>Please correct the error or use the Esc button to cancel the formula editing.",
+        "errorCountArgExceed": "Found an error in the formula entered.<br>Count of arguments exceeded.",
+        "errorCountArg": "Found an error in the formula entered.<br>Invalid number of arguments.",
+        "errorFormulaName": "Found an error in the formula entered.<br>Incorrect formula name.",
+        "errorFormulaParsing": "Internal error while the formula parsing.",
+        "errorArgsRange": "Found an error in the formula entered.<br>Incorrect arguments range.",
+        "errorUnexpectedGuid": "External error.<br>Unexpected Guid. Please, contact support.",
+        "errorFileRequest": "External error.<br>File Request. Please, contact support.",
+        "errorFileVKey": "External error.<br>Incorrect securety key. Please, contact support.",
+        "errorMaxPoints": "The maximum number of points in series per chart is 4096.",
+        "errorOperandExpected": "The entered function syntax is not correct. Please check if you are missing one of the parentheses - '(' or ')'.",
+        "errorMoveRange": "Cann't change a part of merged cell",
+        "errorAutoFilterDataRange": "The operation could not be done for the selected range of cells.<br>Select a uniform data range inside or outside the table and try again.",
+        "errorAutoFilterChangeFormatTable": "The operation could not be done for the selected cells as you cannot move a part of the table.<br>Select another data range so that the whole table was shifted and try again.",
+        "errorAutoFilterChange": "The operation is not allowed, as it is attempting to shift cells in a table on your worksheet.",
+        "errorAutoFilterHiddenRange": "The operation cannot be performed because the area contains filtered cells.<br>Please unhide the filtered elements and try again.",
+        "errorFillRange": "Could not fill the selected range of cells.<br>All the merged cells need to be the same size.",
+        "errorInvalidRef": "Enter a correct name for the selection or a valid reference to go to.",
+        "errorCreateDefName": "The existing named ranges cannot be edited and the new ones cannot be created<br>at the moment as some of them are being edited.",
+        "errorPasteMaxRange": "The copy and paste area does not match. Please select an area with the same size or click the first cell in a row to paste the copied cells.",
+        "errorLockedAll": "The operation could not be done as the sheet has been locked by another user.",
+        "errorLockedWorksheetRename": "The sheet cannot be renamed at the moment as it is being renamed by another user",
+        "errorOpenWarning": "The length of one of the formulas in the file exceeded<br>the allowed number of characters and it was removed.",
+        "errorFrmlWrongReferences": "The function refers to a sheet that does not exist.<br>Please check the data and try again.",
+        "errorCopyMultiselectArea": "This command cannot be used with multiple selections.<br>Select a single range and try again.",
+        "errorPrintMaxPagesCount": "Unfortunately, it’s not possible to print more than 1500 pages at once in the current version of the program.<br>This restriction will be eliminated in upcoming releases.",
+        "errorChangeArray": "You cannot change part of an array.",
+        "errorMultiCellFormula": "Multi-cell array formulas are not allowed in tables.",
+        "errorFrmlMaxTextLength": "Text values in formulas are limited to 255 characters.<br>Use the CONCATENATE function or concatenation operator (&)",
+        "errorFrmlMaxLength": "You cannot add this formula as its length exceeded the allowed number of characters.<br>Please edit it and try again.",
+        "errorFrmlMaxReference": "You cannot enter this formula because it has too many values,<br>cell references, and/or names.",
+        "errorDataValidate":"The value you entered is not valid.<br>A user has restricted values that can be entered into this cell."
+    },
     "ContextMenu": {
         "menuViewComment": "View Comment",
         "menuAddComment": "Add Comment",
@@ -29,6 +182,12 @@
         "menuEdit": "Edit",
         "menuDelete": "Delete"
     },
+    "Toolbar": {
+        "dlgLeaveTitleText": "You leave the application",
+        "dlgLeaveMsgText": "You have unsaved changes in this document. Click \\'Stay on this Page\\' to await the autosave of the document. Click \\'Leave this Page\\' to discard all the unsaved changes.",
+        "leaveButtonText": "Leave this Page",
+        "stayButtonText": "Stay on this Page"
+    },
     "View" : {
         "Add" : {
             "textChart": "Chart",
@@ -239,7 +398,10 @@
             "textExternalLink": "External Link",
             "textDefault": "Selected range",
             "textInvalidRange": "Invalid cells range",
-            "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
+            "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+            "textFilterOptions": "Filter Options",
+            "textClearFilter": "Clear Filter",
+            "textDeleteFilter": "Delete Filter"
         },
         "Settings": {
             "textFindAndReplace": "Find and Replace",

apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx

@@ -7,6 +7,7 @@ import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
 import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
 import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch';
 
 @inject ( stores => ({
     isEdit: stores.storeAppOptions.isEdit,
@@ -61,11 +62,14 @@ class ContextMenu extends ContextMenuController {
 
         super.onMenuItemClick(action);
 
+        if ( EditorUIController.ContextMenu && EditorUIController.ContextMenu.handleMenuItemClick(this, action) )
+            return;
+
         const api = Common.EditorApi.get();
         const info = api.asc_getCellInfo();
         switch (action) {
             case 'cut':
-                if (!api.asc_Cut() && !LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
+                if (!LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
                     this.showCopyCutPasteModal();
                 }
                 break;
@@ -75,55 +79,13 @@ class ContextMenu extends ContextMenuController {
                 }
                 break;
             case 'paste':
-                if (!api.asc_Paste() && !LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
+                if (!LocalStorage.getBool("sse-hide-copy-cut-paste-warning")) {
                     this.showCopyCutPasteModal();
                 }
                 break;
-            case 'addcomment':
-                Common.Notifications.trigger('addcomment');
-                break;
             case 'viewcomment':
                 Common.Notifications.trigger('viewcomment');
                 break;
-            case 'del':
-                api.asc_emptyCells(Asc.c_oAscCleanOptions.All);
-                break;
-            case 'wrap':
-                api.asc_setCellTextWrap(true);
-                break;
-            case 'unwrap':
-                api.asc_setCellTextWrap(false);
-                break;
-            case 'edit':
-                setTimeout(() => {
-                    this.props.openOptions('edit');
-                }, 0);
-                break;
-            case 'merge':
-                if (api.asc_mergeCellsDataLost(Asc.c_oAscMergeOptions.Merge)) {
-                    setTimeout(() => {
-                        f7.dialog.confirm(_t.warnMergeLostData, _t.notcriticalErrorTitle, () => {
-                            api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
-                        });
-                    }, 0);
-                } else {
-                    api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
-                }
-                break;
-            case 'unmerge':
-                api.asc_mergeCells(Asc.c_oAscMergeOptions.None);
-                break;
-            case 'hide':
-                api[info.asc_getSelectionType() == Asc.c_oAscSelectionType.RangeRow ? 'asc_hideRows' : 'asc_hideColumns']();
-                break;
-            case 'show':
-                api[info.asc_getSelectionType() == Asc.c_oAscSelectionType.RangeRow ? 'asc_showRows' : 'asc_showColumns']();
-                break;
-            case 'addlink':
-                setTimeout(() => {
-                    this.props.openOptions('add', 'link');
-                }, 400)
-                break;
             case 'openlink':
                 const linkinfo = info.asc_getHyperlink();
                 if ( linkinfo.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink ) {
@@ -145,12 +107,22 @@ class ContextMenu extends ContextMenuController {
                     api.asc_getUrlType(url) > 0 && this.openLink(url);
                 }
                 break;
-            case 'freezePanes':
-                api.asc_freezePane();
-                break;
         }
+    }
 
-        console.log("click context menu item: " + action);
+    onMergeCells() {
+        const { t } = this.props;
+        const _t = t("ContextMenu", { returnObjects: true });
+        const api = Common.EditorApi.get();
+        if (api.asc_mergeCellsDataLost(Asc.c_oAscMergeOptions.Merge)) {
+            setTimeout(() => {
+                f7.dialog.confirm(_t.warnMergeLostData, _t.notcriticalErrorTitle, () => {
+                    api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
+                });
+            }, 0);
+        } else {
+            api.asc_mergeCells(Asc.c_oAscMergeOptions.Merge);
+        }
     }
 
     showCopyCutPasteModal() {
@@ -198,33 +170,35 @@ class ContextMenu extends ContextMenuController {
         const { t } = this.props;
         const _t = t("ContextMenu", { returnObjects: true });
 
-        const { isEdit, canViewComments, isDisconnected } = this.props;
+        const { isEdit } = this.props;
 
-        const api = Common.EditorApi.get();
-        const cellinfo = api.asc_getCellInfo();
+        if (isEdit && EditorUIController.ContextMenu) {
+            return EditorUIController.ContextMenu.mapMenuItems(this);
+        } else {
+            const {canViewComments } = this.props;
 
-        const itemsIcon = [];
-        const itemsText = [];
+            const api = Common.EditorApi.get();
+            const cellinfo = api.asc_getCellInfo();
 
-        let iscellmenu, isrowmenu, iscolmenu, isallmenu, ischartmenu, isimagemenu, istextshapemenu, isshapemenu, istextchartmenu;
-        let iscelllocked = cellinfo.asc_getLocked();
-        const seltype = cellinfo.asc_getSelectionType();
-        const xfs = cellinfo.asc_getXfs();
-        const isComments = cellinfo.asc_getComments().length > 0; //prohibit adding multiple comments in one cell;
+            const itemsIcon = [];
+            const itemsText = [];
 
-        switch (seltype) {
-            case Asc.c_oAscSelectionType.RangeCells:     iscellmenu  = true;     break;
-            case Asc.c_oAscSelectionType.RangeRow:       isrowmenu   = true;     break;
-            case Asc.c_oAscSelectionType.RangeCol:       iscolmenu   = true;     break;
-            case Asc.c_oAscSelectionType.RangeMax:       isallmenu   = true;     break;
-            case Asc.c_oAscSelectionType.RangeImage:     isimagemenu = true;     break;
-            case Asc.c_oAscSelectionType.RangeShape:     isshapemenu = true;     break;
-            case Asc.c_oAscSelectionType.RangeChart:     ischartmenu = true;     break;
-            case Asc.c_oAscSelectionType.RangeChartText: istextchartmenu = true; break;
-            case Asc.c_oAscSelectionType.RangeShapeText: istextshapemenu = true; break;
-        }
+            let iscellmenu, isrowmenu, iscolmenu, isallmenu, ischartmenu, isimagemenu, istextshapemenu, isshapemenu, istextchartmenu;
+            const seltype = cellinfo.asc_getSelectionType();
+            const isComments = cellinfo.asc_getComments().length > 0; //prohibit adding multiple comments in one cell;
+
+            switch (seltype) {
+                case Asc.c_oAscSelectionType.RangeCells:     iscellmenu  = true;     break;
+                case Asc.c_oAscSelectionType.RangeRow:       isrowmenu   = true;     break;
+                case Asc.c_oAscSelectionType.RangeCol:       iscolmenu   = true;     break;
+                case Asc.c_oAscSelectionType.RangeMax:       isallmenu   = true;     break;
+                case Asc.c_oAscSelectionType.RangeImage:     isimagemenu = true;     break;
+                case Asc.c_oAscSelectionType.RangeShape:     isshapemenu = true;     break;
+                case Asc.c_oAscSelectionType.RangeChart:     ischartmenu = true;     break;
+                case Asc.c_oAscSelectionType.RangeChartText: istextchartmenu = true; break;
+                case Asc.c_oAscSelectionType.RangeShapeText: istextshapemenu = true; break;
+            }
 
-        if (!isEdit) {
             if (iscellmenu || istextchartmenu || istextshapemenu) {
                 itemsIcon.push({
                     event: 'copy',
@@ -243,136 +217,9 @@ class ContextMenu extends ContextMenuController {
                     event: 'viewcomment'
                 });
             }
-        } else {
 
-            if (!iscelllocked && (isimagemenu || isshapemenu || ischartmenu || istextshapemenu || istextchartmenu)) {
-                api.asc_getGraphicObjectProps().every((object) => {
-                    if (object.asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        iscelllocked = object.asc_getObjectValue().asc_getLocked();
-                    }
-                    return !iscelllocked;
-                });
-            }
-
-            if (iscelllocked || api.isCellEdited) {
-                itemsIcon.push({
-                    event: 'copy',
-                    icon: 'icon-copy'
-                });
-
-            } else {
-                itemsIcon.push({
-                    event: 'cut',
-                    icon: 'icon-cut'
-                });
-                itemsIcon.push({
-                    event: 'copy',
-                    icon: 'icon-copy'
-                });
-                itemsIcon.push({
-                    event: 'paste',
-                    icon: 'icon-paste'
-                });
-                itemsText.push({
-                    caption: _t.menuDelete,
-                    event: 'del'
-                });
-
-                if (isimagemenu || isshapemenu || ischartmenu ||
-                    istextshapemenu || istextchartmenu) {
-                    itemsText.push({
-                        caption: _t.menuEdit,
-                        event: 'edit'
-                    });
-                } else {
-                    if (iscolmenu || isrowmenu) {
-                        itemsText.push({
-                            caption: _t.menuHide,
-                            event: 'hide'
-                        });
-                        itemsText.push({
-                            caption: _t.menuShow,
-                            event: 'show'
-                        });
-                    } else if (iscellmenu) {
-                        if (!iscelllocked) {
-                            itemsText.push({
-                                caption: _t.menuCell,
-                                event: 'edit'
-                            });
-                        }
-
-                        if (cellinfo.asc_getMerge() == Asc.c_oAscMergeOptions.None) {
-                            itemsText.push({
-                                caption: _t.menuMerge,
-                                event: 'merge'
-                            });
-                        }
-
-                        if (cellinfo.asc_getMerge() == Asc.c_oAscMergeOptions.Merge) {
-                            itemsText.push({
-                                caption: _t.menuUnmerge,
-                                event: 'unmerge'
-                            });
-                        }
-
-                        itemsText.push(
-                            xfs.asc_getWrapText() ?
-                                {
-                                    caption: _t.menuUnwrap,
-                                    event: 'unwrap'
-                                } :
-                                {
-                                    caption: _t.menuWrap,
-                                    event: 'wrap'
-                                });
-
-                        if (cellinfo.asc_getHyperlink() && !cellinfo.asc_getMultiselect()) {
-                            itemsText.push({
-                                caption: _t.menuOpenLink,
-                                event: 'openlink'
-                            });
-                        } else if (!cellinfo.asc_getHyperlink() && !cellinfo.asc_getMultiselect() &&
-                            !cellinfo.asc_getLockText() && !!cellinfo.asc_getText()) {
-                            itemsText.push({
-                                caption: _t.menuAddLink,
-                                event: 'addlink'
-                            });
-                        }
-                    }
-
-                    itemsText.push({
-                        caption: api.asc_getSheetViewSettings().asc_getIsFreezePane() ? _t.menuUnfreezePanes : _t.menuFreezePanes,
-                        event: 'freezePanes'
-                    });
-
-                }
-
-                if (canViewComments) {
-                    if (isComments) {
-                        itemsText.push({
-                            caption: _t.menuViewComment,
-                            event: 'viewcomment'
-                        });
-                    } else if (iscellmenu) {
-                        itemsText.push({
-                            caption: _t.menuAddComment,
-                            event: 'addcomment'
-                        });
-                    }
-                }
-            }
+            return itemsIcon.concat(itemsText);
         }
-
-
-        if ( Device.phone && itemsText.length > 2 ) {
-            this.extraItems = itemsText.splice(2,itemsText.length, {
-                caption: _t.menuMore,
-                event: 'showActionSheet'
-            });
-        }
-
-        return itemsIcon.concat(itemsText);
     }
 
     initExtraItems () {

apps/spreadsheeteditor/mobile/src/controller/Error.jsx

@@ -0,0 +1,355 @@
+import React, { useEffect } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
+    const {t} = useTranslation();
+    const _t = t("Error", { returnObjects: true });
+
+    useEffect(() => {
+        Common.Notifications.on('engineCreated', (api) => {
+            api.asc_registerCallback('asc_onError', onError);
+        });
+        return () => {
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onError', onError);
+        }
+    });
+
+    const onError = (id, level, errData) => {
+
+        if (id === Asc.c_oAscError.ID.LoadingScriptError) {
+            f7.notification.create({
+                title: _t.criticalErrorTitle,
+                text: _t.scriptLoadError,
+                closeButton: true
+            }).open();
+            return;
+        }
+
+        Common.Notifications.trigger('preloader:close');
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+
+        const api = Common.EditorApi.get();
+
+        const config = {
+            closable: false
+        };
+
+        switch (id)
+        {
+            case Asc.c_oAscError.ID.Unknown:
+                config.msg = _t.unknownErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationTimeout:
+                config.msg = _t.convertationTimeoutText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationOpenError:
+                config.msg = _t.openErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationSaveError:
+                config.msg = _t.saveErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.DownloadError:
+                config.msg = _t.downloadErrorText;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageSize:
+                config.msg = _t.uploadImageSizeMessage;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageExt:
+                config.msg = _t.uploadImageExtMessage;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageFileCount:
+                config.msg = _t.uploadImageFileCountMessage;
+                break;
+
+            case Asc.c_oAscError.ID.PastInMergeAreaError:
+                config.msg = _t.pastInMergeAreaError;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongCountParentheses:
+                config.msg = _t.errorWrongBracketsCount;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongOperator:
+                config.msg = _t.errorWrongOperator;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongMaxArgument:
+                config.msg = _t.errorCountArgExceed;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongCountArgument:
+                config.msg = _t.errorCountArg;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongFunctionName:
+                config.msg = _t.errorFormulaName;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlAnotherParsingError:
+                config.msg = _t.errorFormulaParsing;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongArgumentRange:
+                config.msg = _t.errorArgsRange;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.UnexpectedGuid:
+                config.msg = _t.errorUnexpectedGuid;
+                break;
+
+            case Asc.c_oAscError.ID.FileRequest:
+                config.msg = _t.errorFileRequest;
+                break;
+
+            case Asc.c_oAscError.ID.FileVKey:
+                config.msg = _t.errorFileVKey;
+                break;
+
+            case Asc.c_oAscError.ID.MaxDataPointsError:
+                config.msg = _t.errorMaxPoints;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlOperandExpected:
+                config.msg = _t.errorOperandExpected;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.CannotMoveRange:
+                config.msg = _t.errorMoveRange;
+                break;
+
+            case Asc.c_oAscError.ID.AutoFilterDataRangeError:
+                config.msg = _t.errorAutoFilterDataRange;
+                break;
+
+            case Asc.c_oAscError.ID.AutoFilterChangeFormatTableError:
+                config.msg = _t.errorAutoFilterChangeFormatTable;
+                break;
+
+            case Asc.c_oAscError.ID.AutoFilterChangeError:
+                config.msg = _t.errorAutoFilterChange;
+                break;
+
+            case Asc.c_oAscError.ID.AutoFilterMoveToHiddenRangeError:
+                config.msg = _t.errorAutoFilterHiddenRange;
+                break;
+
+            case Asc.c_oAscError.ID.CannotFillRange:
+                config.msg = _t.errorFillRange;
+                break;
+
+            case Asc.c_oAscError.ID.InvalidReferenceOrName:
+                config.msg = _t.errorInvalidRef;
+                break;
+
+            case Asc.c_oAscError.ID.LockCreateDefName:
+                config.msg = _t.errorCreateDefName;
+                break;
+
+            case Asc.c_oAscError.ID.PasteMaxRangeError:
+                config.msg = _t.errorPasteMaxRange;
+                break;
+
+            case Asc.c_oAscError.ID.LockedAllError:
+                config.msg = _t.errorLockedAll;
+                break;
+
+            case Asc.c_oAscError.ID.LockedWorksheetRename:
+                config.msg = _t.errorLockedWorksheetRename;
+                break;
+
+            case Asc.c_oAscError.ID.OpenWarning:
+                config.msg = _t.errorOpenWarning;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlWrongReferences:
+                config.msg = _t.errorFrmlWrongReferences;
+                config.closable = true;
+                break;
+
+            case Asc.c_oAscError.ID.CopyMultiselectAreaError:
+                config.msg = _t.errorCopyMultiselectArea;
+                break;
+
+            case Asc.c_oAscError.ID.PrintMaxPagesCount:
+                config.msg = _t.errorPrintMaxPagesCount;
+                break;
+
+            case Asc.c_oAscError.ID.CannotChangeFormulaArray:
+                config.msg = _t.errorChangeArray;
+                break;
+
+            case Asc.c_oAscError.ID.MultiCellsInTablesFormulaArray:
+                config.msg = _t.errorMultiCellFormula;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlMaxTextLength:
+                config.msg = _t.errorFrmlMaxTextLength;
+                break;
+
+            case  Asc.c_oAscError.ID.FrmlMaxLength:
+                config.msg = _t.errorFrmlMaxLength;
+                break;
+
+            case Asc.c_oAscError.ID.FrmlMaxReference:
+                config.msg = _t.errorFrmlMaxReference;
+                break;
+
+            case Asc.c_oAscError.ID.DataValidate:
+                errData && errData.asc_getErrorTitle() && (config.title = Common.Utils.String.htmlEncode(errData.asc_getErrorTitle()));
+                config.msg = errData && errData.asc_getError() ? Common.Utils.String.htmlEncode(errData.asc_getError()) : _t.errorDataValidate;
+                break;
+
+            case Asc.c_oAscError.ID.VKeyEncrypt:
+                config.msg = _t.errorKeyEncrypt;
+                break;
+
+            case Asc.c_oAscError.ID.KeyExpire:
+                config.msg = _t.errorKeyExpire;
+                break;
+
+            case Asc.c_oAscError.ID.UserCountExceed:
+                config.msg = _t.errorUsersExceed;
+                break;
+
+            case Asc.c_oAscError.ID.CoAuthoringDisconnect:
+                config.msg = _t.errorViewerDisconnect;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationPassword:
+                config.msg = _t.errorFilePassProtect;
+                break;
+
+            case Asc.c_oAscError.ID.StockChartError:
+                config.msg = _t.errorStockChart;
+                break;
+
+            case Asc.c_oAscError.ID.DataRangeError:
+                config.msg = _t.errorDataRange;
+                break;
+
+            case Asc.c_oAscError.ID.Database:
+                config.msg = _t.errorDatabaseConnection;
+                break;
+
+            case Asc.c_oAscError.ID.UserDrop:
+                const lostEditingRights = storeAppOptions.lostEditingRights;
+                if (lostEditingRights) {
+                    storeAppOptions.changeEditingRights(false);
+                    return;
+                }
+                storeAppOptions.changeEditingRights(true);
+                config.msg = _t.errorUserDrop;
+                break;
+
+            case Asc.c_oAscError.ID.Warning:
+                config.msg = _t.errorConnectToServer;
+                break;
+
+            case Asc.c_oAscError.ID.UplImageUrl:
+                config.msg = _t.errorBadImageUrl;
+                break;
+
+            case Asc.c_oAscError.ID.SessionAbsolute:
+                config.msg = _t.errorSessionAbsolute;
+                break;
+
+            case Asc.c_oAscError.ID.SessionIdle:
+                config.msg = _t.errorSessionIdle;
+                break;
+
+            case Asc.c_oAscError.ID.SessionToken:
+                config.msg = _t.errorSessionToken;
+                break;
+
+            case Asc.c_oAscError.ID.DataEncrypted:
+                config.msg = _t.errorDataEncrypted;
+                break;
+
+            case Asc.c_oAscError.ID.AccessDeny:
+                config.msg = _t.errorAccessDeny;
+                break;
+
+            case Asc.c_oAscError.ID.EditingError:
+                config.msg = _t.errorEditingDownloadas;
+                break;
+
+            case Asc.c_oAscError.ID.ConvertationOpenLimitError:
+                config.msg = _t.errorFileSizeExceed;
+                break;
+
+            case Asc.c_oAscError.ID.UpdateVersion:
+                config.msg = _t.errorUpdateVersionOnDisconnect;
+                break;
+
+            default:
+                config.msg = _t.errorDefaultMessage.replace('%1', id);
+                break;
+        }
+
+        if (level === Asc.c_oAscError.Level.Critical) {
+
+            // report only critical errors
+            Common.Gateway.reportError(id, config.msg);
+
+            config.title = _t.criticalErrorTitle;
+
+            if (storeAppOptions.canBackToFolder && !storeAppOptions.isDesktopApp) {
+                config.msg += '</br></br>' + _t.criticalErrorExtText;
+                config.callback = function() {
+                    Common.Notifications.trigger('goback', true);
+                }
+            }
+            if (id === Asc.c_oAscError.ID.DataEncrypted) {
+                api.asc_coAuthoringDisconnect();
+                Common.Notifications.trigger('api:disconnect');
+            }
+        }
+        else {
+            Common.Gateway.reportWarning(id, config.msg);
+
+            config.title    = config.title || _t.notcriticalErrorTitle;
+            config.callback = (btn) => {
+                if (id == Asc.c_oAscError.ID.DataValidate) {
+                    api.asc_closeCellEditor(true);
+                }
+                storeAppOptions.changeEditingRights(false);
+            };
+        }
+
+        f7.dialog.create({
+            cssClass: 'error-dialog',
+            title   : config.title,
+            text    : config.msg,
+            buttons: [
+                {
+                    text: 'OK',
+                    onClick: config.callback
+                }
+            ]
+        }).open();
+
+        Common.component.Analytics.trackEvent('Internal Error', id.toString());
+    };
+
+    return null
+});
+
+export default ErrorController;

apps/spreadsheeteditor/mobile/src/controller/LongActions.jsx

@@ -0,0 +1,193 @@
+import React, { useEffect } from 'react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import IrregularStack from "../../../../common/mobile/utils/IrregularStack";
+
+const LongActionsController = () => {
+    const {t} = useTranslation();
+    const _t = t("LongActions", { returnObjects: true });
+
+    const ApplyEditRights = -255;
+    const LoadingDocument = -256;
+
+    const stackLongActions = new IrregularStack({
+        strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+        weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
+    });
+
+    let loadMask = null;
+
+    const closePreloader = () => {
+        if (loadMask && loadMask.el) {
+            f7.dialog.close(loadMask.el);
+        }
+    };
+
+    useEffect( () => {
+        Common.Notifications.on('engineCreated', (api) => {
+            api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
+        });
+        Common.Notifications.on('preloader:endAction', onLongActionEnd);
+        Common.Notifications.on('preloader:beginAction', onLongActionBegin);
+        Common.Notifications.on('preloader:close', closePreloader);
+
+        return ( () => {
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+
+            Common.Notifications.off('preloader:endAction', onLongActionEnd);
+            Common.Notifications.off('preloader:beginAction', onLongActionBegin);
+            Common.Notifications.off('preloader:close', closePreloader);
+        })
+    });
+
+    const onLongActionBegin = (type, id) => {
+        const action = {id: id, type: type};
+        stackLongActions.push(action);
+        setLongActionView(action);
+    };
+
+    const onLongActionEnd = (type, id) => {
+        let action = {id: id, type: type};
+        stackLongActions.pop(action);
+
+        //this.updateWindowTitle(true);
+
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information});
+
+        if (action) {
+            this.setLongActionView(action)
+        }
+
+        action = stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction});
+
+        if (action) {
+            setLongActionView(action)
+        } else {
+            loadMask && loadMask.el && loadMask.el.classList.contains('modal-in') && f7.dialog.close(loadMask.el);
+        }
+    };
+
+    const setLongActionView = (action) => {
+        let title = '';
+        let text = '';
+        switch (action.id) {
+            case Asc.c_oAscAsyncAction['Open']:
+                title   = _t.openTitleText;
+                text    = _t.openTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['Save']:
+                title   = _t.saveTitleText;
+                text    = _t.saveTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadDocumentFonts']:
+                title   = _t.loadFontsTitleText;
+                text    = _t.loadFontsTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadDocumentImages']:
+                title   = _t.loadImagesTitleText;
+                text    = _t.loadImagesTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadFont']:
+                title   = _t.loadFontTitleText;
+                text    = _t.loadFontTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['LoadImage']:
+                title   = _t.loadImageTitleText;
+                text    = _t.loadImageTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['DownloadAs']:
+                title   = _t.downloadTitleText;
+                text    = _t.downloadTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['Print']:
+                title   = _t.printTitleText;
+                text    = _t.printTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['UploadImage']:
+                title   = _t.uploadImageTitleText;
+                text    = _t.uploadImageTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['ApplyChanges']:
+                title   = _t.applyChangesTitleText;
+                text    = _t.applyChangesTextText;
+                break;
+
+            case Asc.c_oAscAsyncAction['PrepareToSave']:
+                title   = _t.savePreparingText;
+                text    = _t.savePreparingTitle;
+                break;
+
+            case Asc.c_oAscAsyncAction['MailMergeLoadFile']:
+                title   = _t.mailMergeLoadFileText;
+                text    = _t.mailMergeLoadFileTitle;
+                break;
+
+            case Asc.c_oAscAsyncAction['DownloadMerge']:
+                title   = _t.downloadMergeTitle;
+                text    = _t.downloadMergeText;
+                break;
+
+            case Asc.c_oAscAsyncAction['SendMailMerge']:
+                title   = _t.sendMergeTitle;
+                text    = _t.sendMergeText;
+                break;
+
+            case Asc.c_oAscAsyncAction['Waiting']:
+                title   = _t.waitText;
+                text    = _t.waitText;
+                break;
+
+            case ApplyEditRights:
+                title   = _t.txtEditingMode;
+                text    = _t.txtEditingMode;
+                break;
+
+            case LoadingDocument:
+                title   = _t.loadingDocumentTitleText;
+                text    = _t.loadingDocumentTextText;
+                break;
+            default:
+                if (typeof action.id == 'string'){
+                    title   = action.id;
+                    text    = action.id;
+                }
+                break;
+        }
+
+        if (action.type == Asc.c_oAscAsyncActionType.BlockInteraction) {
+            if (loadMask && loadMask.el && loadMask.el.classList.contains('modal-in')) {
+                loadMask.el.getElementsByClassName('dialog-title')[0].innerHTML = title;
+            } else {
+                loadMask = f7.dialog.preloader(title);
+            }
+        }
+
+    };
+
+    const onOpenDocument = (progress) => {
+        if (loadMask && loadMask.el) {
+            const $title = loadMask.el.getElementsByClassName('dialog-title')[0];
+            const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
+
+            $title.innerHTML = `${_t.textLoadingDocument}: ${Math.min(Math.round(proc * 100), 100)}%`;
+        }
+    }
+
+    return null;
+};
+
+export default LongActionsController;

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

@@ -12,12 +12,38 @@ import {
     EditCommentController,
     ViewCommentsController
 } from "../../../../common/mobile/lib/controller/collaboration/Comments";
+import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage";
+import LongActionsController from "./LongActions";
+import ErrorController from "./Error";
+import app from "../page/app";
+import About from "../../../../common/mobile/lib/view/About";
 
-@inject("storeAppOptions", "storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo")
+@inject(
+    "storeAppOptions",
+    "storeFocusObjects",
+    "storeCellSettings",
+    "storeTextSettings",
+    "storeChartSettings",
+    "storeSpreadsheetSettings",
+    "storeSpreadsheetInfo",
+    "storeApplicationSettings"
+    )
 class MainController extends Component {
     constructor(props) {
         super(props);
         window.editorType = 'sse';
+
+        this.LoadingDocument = -256;
+
+        this._state = {
+            licenseType: false,
+            isDocModified: false
+        };
+
+        this.defaultTitleText = __APP_TITLE_TEXT__;
+
+        const { t } = this.props;
+        this._t = t('Controller.Main', {returnObjects:true});
     }
 
     initSdk() {
@@ -52,46 +78,52 @@ class MainController extends Component {
             };
 
             const loadConfig = data => {
+                const _t = this._t;
+
                 EditorUIController.isSupportEditFeature();
 
-                let me = this;
+                this.editorConfig = Object.assign({}, this.editorConfig, data.config);
+                this.appOptions.lang            = this.editorConfig.lang;
 
-                me.editorConfig = Object.assign({}, this.editorConfig, data.config);
-                me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/);
-/**/
-                me.editorConfig.user          =
-                me.appOptions.user            = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, me.textAnonymous);
-                me.appOptions.lang            = me.editorConfig.lang;
+                const appOptions = this.props.storeAppOptions;
+                appOptions.setConfigOptions(this.editorConfig, _t);
 
-                this.props.storeAppOptions.setConfigOptions(this.editorConfig);
+                let value;
+                if (appOptions.canRenameAnonymous) {
+                    value = LocalStorage.getItem("guest-username");
+                    //Common.Utils.InternalSettings.set("guest-username", value);
+                    //Common.Utils.InternalSettings.set("save-guest-username", !!value);
+                }
 
-                // var value = Common.localStorage.getItem("sse-settings-regional");
-                // if (value!==null)
-                //     this.api.asc_setLocale(parseInt(value));
-                // else {
-                //     value = me.appOptions.region;
-                //     value = Common.util.LanguageInfo.getLanguages().hasOwnProperty(value) ? value : Common.util.LanguageInfo.getLocalLanguageCode(value);
-                //     if (value!==null)
-                //         value = parseInt(value);
-                //     else
-                //         value = (this.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(me.editorConfig.lang)) : 0x0409;
-                //     this.api.asc_setLocale(value);
-                // }
+                value = LocalStorage.getItem("sse-settings-regional");
+                if (value !== null) {
+                    this.api.asc_setLocale(parseInt(value));
+                } else {
+                     value = appOptions.region;
+                     value = Common.util.LanguageInfo.getLanguages().hasOwnProperty(value) ? value : Common.util.LanguageInfo.getLocalLanguageCode(value);
+                     if (value !== null) {
+                         value = parseInt(value);
+                     } else {
+                         value = (appOptions.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(appOptions.lang)) : 0x0409;
+                     }
+                     this.api.asc_setLocale(value);
+                }
 
-                // if (me.appOptions.location == 'us' || me.appOptions.location == 'ca')
-                //     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
-                //
-                // if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
-                //     $('#editor_sdk').append('<div class="doc-placeholder">' + '<div class="columns"></div>'.repeat(2) + '</div>');
-                //
-                // var value = Common.localStorage.getItem("sse-mobile-macros-mode");
-                // if (value === null) {
-                //     value = this.editorConfig.customization ? this.editorConfig.customization.macrosMode : 'warn';
-                //     value = (value == 'enable') ? 1 : (value == 'disable' ? 2 : 0);
-                // } else
-                //     value = parseInt(value);
-                // Common.Utils.InternalSettings.set("sse-mobile-macros-mode", value);
+                if (appOptions.location == 'us' || appOptions.location == 'ca') {
+                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
+                }
 
+                //if (!appOptions.customization || !(appOptions.customization.loaderName || appOptions.customization.loaderLogo))
+                    //$('#editor_sdk').append('<div class="doc-placeholder">' + '<div class="columns"></div>'.repeat(2) + '</div>');
+
+                value = LocalStorage.getItem("sse-mobile-macros-mode");
+                if (value === null) {
+                     value = appOptions.customization ? appOptions.customization.macrosMode : 'warn';
+                     value = (value === 'enable') ? 1 : (value === 'disable' ? 2 : 0);
+                } else {
+                    value = parseInt(value);
+                }
+                this.props.storeApplicationSettings.changeMacrosSettings(value);
             };
 
             const loadDocument = data => {
@@ -123,17 +155,16 @@ class MainController extends Component {
                     docInfo.put_Permissions(_permissions);
                     docInfo.put_EncryptedInfo(this.editorConfig.encryptionKeys);
 
-                    // var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
-                    // docInfo.asc_putIsEnabledMacroses(!!enable);
-                    // enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false);
-                    // docInfo.asc_putIsEnabledPlugins(!!enable);
-
-                    // SSE.getController('Toolbar').setDocumentTitle(data.doc.title);
+                    const appOptions = this.props.storeAppOptions;
+                    let enable = !appOptions.customization || (appOptions.customization.macros !== false);
+                    docInfo.asc_putIsEnabledMacroses(!!enable);
+                    enable = !appOptions.customization || (appOptions.customization.plugins!==false);
+                    docInfo.asc_putIsEnabledPlugins(!!enable);
                 }
 
                 this.api.asc_registerCallback('asc_onGetEditorPermissions', onEditorPermissions);
-                // this.api.asc_registerCallback('asc_onLicenseChanged',       _.bind(this.onLicenseChanged, this));
-                // this.api.asc_registerCallback('asc_onRunAutostartMacroses', _.bind(this.onRunAutostartMacroses, this));
+                this.api.asc_registerCallback('asc_onLicenseChanged',       this.onLicenseChanged.bind(this));
+                this.api.asc_registerCallback('asc_onRunAutostartMacroses', this.onRunAutostartMacroses.bind(this));
                 this.api.asc_setDocInfo(docInfo);
                 this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
                 this.api.asc_enableKeyEvents(true);
@@ -148,21 +179,20 @@ class MainController extends Component {
             };
 
             const onEditorPermissions = params => {
-                let me = this;
                 const licType = params.asc_getLicenseType();
+                this.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
 
-                me.appOptions.canLicense      = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
+                const appOptions = this.props.storeAppOptions;
+                appOptions.setPermissionOptions(this.document, licType, params, this.permissions);
 
-                this.props.storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions);
-                // me.appOptions.canEdit         = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review
-                //     (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined
-                //     (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true
-                //     me.isSupportEditFeature();
-                // me.appOptions.isEdit          = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view';
+                this.applyMode(appOptions);
 
-                // me.api.asc_setViewMode(!me.appOptions.isEdit);
-                me.api.asc_setViewMode(false);
-                me.api.asc_LoadDocument();
+                this.api.asc_LoadDocument();
+
+                //if (!me.appOptions.isEdit) {
+                    //me.hidePreloader();
+                    //me.onLongActionBegin(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
+                //}
             };
 
             const _process_array = (array, fn) => {
@@ -180,29 +210,64 @@ class MainController extends Component {
             _process_array(dep_scripts, promise_get_script)
                 .then ( result => {
                     const {t} = this.props;
+                    const _t = t('Controller.Main.SDK', {returnObjects:true})
+                    const styleNames = ['Normal', 'Neutral', 'Bad', 'Good', 'Input', 'Output', 'Calculation', 'Check Cell', 'Explanatory Text', 'Note', 'Linked Cell', 'Warning Text',
+                            'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Title', 'Total', 'Currency', 'Percent', 'Comma'];
+                    const translate = {
+                        'Series': _t.txtSeries,
+                        'Diagram Title': _t.txtDiagramTitle,
+                        'X Axis': _t.txtXAxis,
+                        'Y Axis': _t.txtYAxis,
+                        'Your text here': _t.txtArt
+                    };
+                    styleNames.forEach(function(item){
+                        translate[item] = _t['txtStyle_' + item.replace(/ /g, '_')] || item;
+                    });
+                    translate['Currency [0]'] = _t.txtStyle_Currency + ' [0]';
+                    translate['Comma [0]'] = _t.txtStyle_Comma + ' [0]';
+
+                    for (let i=1; i<7; i++) {
+                        translate['Accent'+i] = _t.txtAccent + i;
+                        translate['20% - Accent'+i] = '20% - ' + _t.txtAccent + i;
+                        translate['40% - Accent'+i] = '40% - ' + _t.txtAccent + i;
+                        translate['60% - Accent'+i] = '60% - ' + _t.txtAccent + i;
+                    }
                     this.api = new Asc.spreadsheet_api({
                         'id-view': 'editor_sdk',
                         'id-input': 'idx-cell-content',
-                        'mobile': true
-                        // 'translate': translate
+                        'mobile': true,
+                        'translate': translate
                     });
 
+                    Common.Notifications.trigger('engineCreated', this.api);
+                    Common.EditorApi = {get: () => this.api};
+
                     this.appOptions = {};
                     this.bindEvents();
 
-                    let value = null /*Common.localStorage.getItem("sse-settings-fontrender")*/;
-                    if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
+                    let value = LocalStorage.getItem("sse-settings-fontrender");
+                    if (value === null) value = window.devicePixelRatio > 1 ? '1' : '3';
                     this.api.asc_setFontRenderingMode(parseInt(value));
 
                     Common.Utils.Metric.setCurrentMetric(Common.Utils.Metric.c_MetricUnits.pt); // TODO: beautify c_MetricUnits
 
-                    Common.Gateway.on('init',           loadConfig);
-                    // Common.Gateway.on('showmessage',    _.bind(me.onExternalMessage, me));
+                    Common.Gateway.on('init', loadConfig);
+                    Common.Gateway.on('showmessage', this.onExternalMessage.bind(this));
                     Common.Gateway.on('opendocument',   loadDocument);
                     Common.Gateway.appReady();
 
-                    Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
+                    Common.Gateway.on('internalcommand', function(data) {
+                        if (data.command === 'hardBack') {
+                            if ($$('.modal-in').length > 0) {
+                                if ( !($$('.error-dialog.modal-in').length > 0) ) {
+                                    f7.dialog.close();
+                                }
+                                Common.Gateway.internalMessage('hardBack', false);
+                            } else
+                                Common.Gateway.internalMessage('hardBack', true);
+                        }
+                    });
+                    Common.Gateway.internalMessage('listenHardBack');
                 }, error => {
                     console.log('promise failed ' + error);
                 });
@@ -216,69 +281,26 @@ class MainController extends Component {
     }
 
     bindEvents() {
-        const me = this;
+        this.api.asc_registerCallback('asc_onDocumentUpdateVersion',      this.onUpdateVersion.bind(this));
+        this.api.asc_registerCallback('asc_onServerVersion',              this.onServerVersion.bind(this));
+        this.api.asc_registerCallback('asc_onPrintUrl',                   this.onPrintUrl.bind(this));
+        this.api.asc_registerCallback('asc_onPrint',                      this.onPrint.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentName',               this.onDocumentName.bind(this));
+        this.api.asc_registerCallback('asc_onEndAction',                  this._onLongActionEnd.bind(this));
 
-        // me.api.asc_registerCallback('asc_onError',                      _.bind(me.onError, me));
-        me.api.asc_registerCallback('asc_onOpenDocumentProgress',       me._onOpenDocumentProgress.bind(me));
-        // me.api.asc_registerCallback('asc_onAdvancedOptions',            _.bind(me.onAdvancedOptions, me));
-        // me.api.asc_registerCallback('asc_onDocumentUpdateVersion',      _.bind(me.onUpdateVersion, me));
-        // me.api.asc_registerCallback('asc_onServerVersion',              _.bind(me.onServerVersion, me));
-        // me.api.asc_registerCallback('asc_onPrintUrl',                   _.bind(me.onPrintUrl, me));
-        // me.api.asc_registerCallback('asc_onDocumentName',               _.bind(me.onDocumentName, me));
-        me.api.asc_registerCallback('asc_onEndAction',                  me._onLongActionEnd.bind(me));
+        EditorUIController.initCellInfo && EditorUIController.initCellInfo(this.props);
 
-        const storeSpreadsheetSettings = this.props.storeSpreadsheetSettings;
-        const storeFocusObjects = this.props.storeFocusObjects;
-        const storeCellSettings = this.props.storeCellSettings;
-        const storeTextSettings = this.props.storeTextSettings;
-        const storeChartSettings = this.props.storeChartSettings;
-        const styleSize = storeCellSettings.styleSize;
-       
-        this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
-            console.log(cellInfo);
-            
-            storeFocusObjects.resetCellInfo(cellInfo);
-            storeCellSettings.initCellSettings(cellInfo);
-            storeTextSettings.initTextSettings(cellInfo);
+        EditorUIController.initEditorStyles && EditorUIController.initEditorStyles(this.props.storeCellSettings);
 
-            let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
-
-            if(selectedObjects.length) {
-                storeFocusObjects.resetFocusObjects(selectedObjects);
-
-                // Chart Settings
-
-                if (storeFocusObjects.chartObject) { 
-                    storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType()));
-                }
-            }
-        });
+        EditorUIController.initFonts && EditorUIController.initFonts(this.props);
 
+        const styleSize = this.props.storeCellSettings.styleSize;
         this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height);
 
-        this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
-            storeCellSettings.initEditorFonts(fonts, select);
-            storeTextSettings.initEditorFonts(fonts, select);
-        });
-
-        this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => {
-            console.log(fontObj)
-            storeCellSettings.initFontInfo(fontObj);
-            storeTextSettings.initFontInfo(fontObj);
-        });
-
-        this.api.asc_registerCallback('asc_onInitEditorStyles', styles => {
-            storeCellSettings.initCellStyles(styles);
-        });
-
-        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
-            Common.Utils.ThemeColor.setColors(colors, standart_colors);
-        });
-
         // Spreadsheet Settings
 
         this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => {
-            storeSpreadsheetSettings.addSchemes(schemes);
+            this.props.storeSpreadsheetSettings.addSchemes(schemes);
         });
 
         // Downloaded Advanced Options
@@ -295,41 +317,438 @@ class MainController extends Component {
         if ( type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open ) {
             Common.Gateway.internalMessage('documentReady', {});
             Common.Notifications.trigger('document:ready');
-            this._onDocumentContentReady();
+            this.onDocumentContentReady();
         }
     }
 
-    _onDocumentContentReady() {
-        const me = this;
+    onDocumentContentReady() {
+        if (this._isDocReady)
+            return;
 
-        me.api.asc_Resize();
+        const appOptions = this.props.storeAppOptions;
+        const appSettings = this.props.storeApplicationSettings;
 
-        let value = null /*(this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) ? 100 : Common.localStorage.getItem("sse-settings-zoom")*/;
-        var zf = (value !== null) ? parseInt(value)/100 : (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom)/100 : 1);
+        this._isDocReady = true;
+
+        this.api.asc_showWorksheet(this.api.asc_getActiveWorksheetIndex());
+        this.api.asc_Resize();
+
+        Common.Notifications.trigger('preloader:close');
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+
+        let value = (appOptions.isEditMailMerge || appOptions.isEditDiagram) ? 100 : LocalStorage.getItem("sse-settings-zoom");
+        var zf = (value !== null) ? parseInt(value)/100 : (appOptions.customization && appOptions.customization.zoom ? parseInt(appOptions.customization.zoom)/100 : 1);
         this.api.asc_setZoom(zf>0 ? zf : 1);
 
-        // this.api.asc_SetFastCollaborative(false);
+        this.updateWindowTitle(true);
 
-        me.api.asc_enableKeyEvents(true);
-        me.api.asc_getWorksheetsCount();
-        me.api.asc_showWorksheet(me.api.asc_getActiveWorksheetIndex());
+        if (appOptions.isEdit) {
+            if (this.needToUpdateVersion) {
+                Common.Notifications.trigger('api:disconnect');
+            }
+        }
+
+        if (appOptions.canAnalytics && false) {
+            Common.component.Analytics.initialize('UA-12442749-13', 'Spreadsheet Editor');
+        }
+
+        Common.Gateway.on('processsaveresult',      this.onProcessSaveResult.bind(this));
+        Common.Gateway.on('processrightschange',    this.onProcessRightsChange.bind(this));
+        Common.Gateway.on('downloadas',             this.onDownloadAs.bind(this));
+        Common.Gateway.on('requestclose',           this.onRequestClose.bind(this));
+
+        Common.Gateway.sendInfo({
+            mode: appOptions.isEdit ? 'edit' : 'view'
+        });
+
+        this.applyLicense();
+
+        //R1C1 reference style
+        value = LocalStorage.getBool('sse-settings-r1c1', false);
+        appSettings.changeRefStyle(value);
+        this.api.asc_setR1C1Mode(value);
 
         Common.Gateway.documentReady();
         f7.emit('resize');
     }
 
-    _onOpenDocumentProgress(progress) {
-        // if (this.loadMask) {
-        //     var $title = $$(this.loadMask).find('.modal-title'),
-        //         const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
+    applyMode (appOptions) {
+        this.api.asc_enableKeyEvents(appOptions.isEdit);
 
-            // $title.text(this.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
-        // }
+        if (!appOptions.isEditMailMerge && !appOptions.isEditDiagram) {
+            EditorUIController.initThemeColors && EditorUIController.initThemeColors();
+            this.api.asc_registerCallback('asc_onDownloadUrl', this.onDownloadUrl.bind(this));
+        }
+
+        this.api.asc_setViewMode(!appOptions.isEdit && !appOptions.isRestrictedEdit);
+        (appOptions.isRestrictedEdit && appOptions.canComments) && this.api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyComments);
+
+        let value = LocalStorage.getItem('sse-mobile-settings-unit');
+        value = (value !== null) ? parseInt(value) : (appOptions.customization && appOptions.customization.unit ? Common.Utils.Metric.c_MetricUnits[appOptions.customization.unit.toLocaleLowerCase()] : Common.Utils.Metric.getDefaultMetric());
+        (value === undefined) && (value = Common.Utils.Metric.getDefaultMetric());
+        Common.Utils.Metric.setCurrentMetric(value);
+
+        this.api.asc_registerCallback('asc_onDocumentModifiedChanged', this.onDocumentModifiedChanged.bind(this));
+        this.api.asc_registerCallback('asc_onDocumentCanSaveChanged',  this.onDocumentCanSaveChanged.bind(this));
+
+        //if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType.BlockInteraction})) {
+            //me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, ApplyEditRights);
+        //} else if (!this._isDocReady) {
+            //me.hidePreloader();
+            //me.onLongActionBegin(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
+        //}
+
+        // Message on window close
+        window.onbeforeunload = this.onBeforeUnload.bind(this);
+        window.onunload = this.onUnload.bind(this);
+    }
+
+    onLicenseChanged (params) {
+        const appOptions = this.props.storeAppOptions;
+        if (appOptions.isEditDiagram || appOptions.isEditMailMerge) return;
+
+        const licType = params.asc_getLicenseType();
+        if (licType !== undefined && appOptions.canEdit && appOptions.config.mode !== 'view' &&
+            (licType === Asc.c_oLicenseResult.Connections || licType === Asc.c_oLicenseResult.UsersCount || licType === Asc.c_oLicenseResult.ConnectionsOS || licType === Asc.c_oLicenseResult.UsersCountOS
+                || licType === Asc.c_oLicenseResult.SuccessLimit && (appOptions.trialMode & Asc.c_oLicenseMode.Limited) !== 0))
+            this._state.licenseType = licType;
+
+        if (this._isDocReady && this._state.licenseType)
+            this.applyLicense();
+    }
+
+    applyLicense () {
+        const _t = this._t;
+        const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
+        const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
+        const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
+        const warnLicenseExceeded = _t.warnLicenseExceeded.replace(/%1/g, __COMPANY_NAME__);
+        const warnLicenseUsersExceeded = _t.warnLicenseUsersExceeded.replace(/%1/g, __COMPANY_NAME__);
+
+        const appOptions = this.props.storeAppOptions;
+        if (appOptions.config.mode !== 'view' && !EditorUIController.isSupportEditFeature()) {
+            let value = LocalStorage.getItem("sse-opensource-warning");
+            value = (value !== null) ? parseInt(value) : 0;
+            const now = (new Date).getTime();
+            if (now - value > 86400000) {
+                LocalStorage.setItem("sse-opensource-warning", now);
+                f7.dialog.create({
+                    title: _t.notcriticalErrorTitle,
+                    text : _t.errorOpensource,
+                    buttons: [{text: 'OK'}]
+                }).open();
+            }
+            Common.Notifications.trigger('toolbar:activatecontrols');
+            return;
+        }
+
+        if (this._state.licenseType) {
+            let license = this._state.licenseType;
+            let buttons = [{text: 'OK'}];
+            if ((appOptions.trialMode & Asc.c_oLicenseMode.Limited) !== 0 &&
+                (license === Asc.c_oLicenseResult.SuccessLimit ||
+                    license === Asc.c_oLicenseResult.ExpiredLimited ||
+                    appOptions.permissionsLicense === Asc.c_oLicenseResult.SuccessLimit)
+            ) {
+                license = (license === Asc.c_oLicenseResult.ExpiredLimited) ? _t.warnLicenseLimitedNoAccess : _t.warnLicenseLimitedRenewed;
+            } else if (license === Asc.c_oLicenseResult.Connections || license === Asc.c_oLicenseResult.UsersCount) {
+                license = (license===Asc.c_oLicenseResult.Connections) ? warnLicenseExceeded : warnLicenseUsersExceeded;
+            } else {
+                license = (license === Asc.c_oLicenseResult.ConnectionsOS) ? warnNoLicense : warnNoLicenseUsers;
+                buttons = [{
+                    text: _t.textBuyNow,
+                    bold: true,
+                    onClick: function() {
+                        window.open(`${__PUBLISHER_URL__}`, "_blank");
+                    }
+                },
+                    {
+                        text: _t.textContactUs,
+                        onClick: function() {
+                            window.open(`mailto:${__SALES_EMAIL__}`, "_blank");
+                        }
+                    }];
+            }
+            if (this._state.licenseType === Asc.c_oLicenseResult.SuccessLimit) {
+                Common.Notifications.trigger('toolbar:activatecontrols');
+            } else {
+                Common.Notifications.trigger('toolbar:activatecontrols');
+                Common.Notifications.trigger('toolbar:deactivateeditcontrols');
+                Common.Notifications.trigger('api:disconnect');
+            }
+
+            let value = LocalStorage.getItem("sse-license-warning");
+            value = (value !== null) ? parseInt(value) : 0;
+            const now = (new Date).getTime();
+
+            if (now - value > 86400000) {
+                LocalStorage.setItem("sse-license-warning", now);
+                f7.dialog.create({
+                    title: textNoLicenseTitle,
+                    text : license,
+                    buttons: buttons
+                }).open();
+            }
+        } else {
+            if (!appOptions.isDesktopApp && !appOptions.canBrandingExt &&
+                appOptions.config && appOptions.config.customization && (appOptions.config.customization.loaderName || appOptions.config.customization.loaderLogo)) {
+                f7.dialog.create({
+                    title: _t.textPaidFeature,
+                    text  : _t.textCustomLoader,
+                    buttons: [{
+                        text: _t.textContactUs,
+                        bold: true,
+                        onClick: () => {
+                            window.open(`mailto:${__SALES_EMAIL__}`, "_blank");
+                        }
+                    },
+                        { text: _t.textClose }]
+                }).open();
+            }
+            Common.Notifications.trigger('toolbar:activatecontrols');
+        }
+    }
+
+    onExternalMessage (msg) {
+        if (msg && msg.msg) {
+            msg.msg = (msg.msg).toString();
+            f7.notification.create({
+                //title: uiApp.params.modalTitle,
+                text: [msg.msg.charAt(0).toUpperCase() + msg.msg.substring(1)],
+                closeButton: true
+            }).open();
+
+            Common.component.Analytics.trackEvent('External Error');
+        }
+    }
+
+    onRunAutostartMacroses () {
+        const appOptions = this.props.storeAppOptions;
+        const enable = !appOptions.customization || (appOptions.customization.macros !== false);
+        if (enable) {
+            const value = this.props.storeApplicationSettings.macrosMode;
+            if (value === 1) {
+                this.api.asc_runAutostartMacroses();
+            } else if (value === 0) {
+                const _t = this._t;
+                f7.dialog.create({
+                    title: _t.notcriticalErrorTitle,
+                    text: _t.textHasMacros,
+                    content: `<div class="checkbox-in-modal">
+                      <label class="checkbox">
+                        <input type="checkbox" name="checkbox-show-macros" />
+                        <i class="icon-checkbox"></i>
+                      </label>
+                      <span class="right-text">${_t.textRemember}</span>
+                      </div>`,
+                    buttons: [{
+                        text: _t.textYes,
+                        onClick: () => {
+                            const dontshow = $$('input[name="checkbox-show-macros"]').prop('checked');
+                            if (dontshow) {
+                                this.props.storeApplicationSettings.changeMacrosSettings(1);
+                                LocalStorage.setItem("sse-mobile-macros-mode", 1);
+                            }
+                            setTimeout(() => {
+                                this.api.asc_runAutostartMacroses();
+                            }, 1);
+                        }},
+                        {
+                            text: _t.textNo,
+                            onClick: () => {
+                                const dontshow = $$('input[name="checkbox-show-macros"]').prop('checked');
+                                if (dontshow) {
+                                    this.props.storeApplicationSettings.changeMacrosSettings(2);
+                                    LocalStorage.setItem("sse-mobile-macros-mode", 2);
+                                }
+                            }
+                        }]
+                }).open();
+            }
+        }
+    }
+
+    onDownloadUrl () {
+        if (this._state.isFromGatewayDownloadAs) {
+            Common.Gateway.downloadAs(url);
+        }
+
+        this._state.isFromGatewayDownloadAs = false;
+    }
+
+    onBeforeUnload () {
+        const _t = this._t;
+
+        LocalStorage.save();
+
+        const config = this.props.storeAppOptions.config;
+        const isEdit = this.permissions.edit !== false && config.mode !== 'view' && config.mode !== 'editdiagram';
+        if (isEdit && this.api.asc_isDocumentModified()) {
+            this.api.asc_stopSaving();
+            this.continueSavingTimer = window.setTimeout(() => {
+                this.api.asc_continueSaving();
+            }, 500);
+
+            return _t.leavePageText;
+        }
+    }
+
+    onUnload () {
+        if (this.continueSavingTimer)
+            clearTimeout(this.continueSavingTimer);
+    }
+
+    onUpdateVersion (callback) {
+        const _t = this._t;
+
+        this.needToUpdateVersion = true;
+        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+
+        f7.dialog.alert(
+            _t.errorUpdateVersion,
+            _t.titleUpdateVersion,
+            () => {
+                Common.Gateway.updateVersion();
+                if (callback) {
+                    callback.call(this);
+                }
+                Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], this.LoadingDocument);
+            });
+    }
+
+    onServerVersion (buildVersion) {
+        if (this.changeServerVersion) return true;
+        const _t = this._t;
+
+        if (About.appVersion() !== buildVersion && !About.compareVersions()) {
+            this.changeServerVersion = true;
+            f7.dialog.alert(
+                _t.errorServerVersion,
+                _t.titleServerVersion,
+                () => {
+                    setTimeout(() => {Common.Gateway.updateVersion()}, 0);
+                });
+            return true;
+        }
+        return false;
+    }
+
+    onPrintUrl (url) {
+        if (this.iframePrint) {
+            this.iframePrint.parentNode.removeChild(this.iframePrint);
+            this.iframePrint = null;
+        }
+
+        if (!this.iframePrint) {
+            this.iframePrint = document.createElement("iframe");
+            this.iframePrint.id = "id-print-frame";
+            this.iframePrint.style.display = 'none';
+            this.iframePrint.style.visibility = "hidden";
+            this.iframePrint.style.position = "fixed";
+            this.iframePrint.style.right = "0";
+            this.iframePrint.style.bottom = "0";
+            document.body.appendChild(this.iframePrint);
+            this.iframePrint.onload = function() {
+                this.iframePrint.contentWindow.focus();
+                this.iframePrint.contentWindow.print();
+                this.iframePrint.contentWindow.blur();
+                window.focus();
+            };
+        }
+
+        if (url) {
+            this.iframePrint.src = url;
+        }
+    }
+
+    onDocumentName (name) {
+        this.updateWindowTitle(true);
+    }
+
+    updateWindowTitle (force) {
+        const isModified = this.api.asc_isDocumentModified();
+        if (this._state.isDocModified !== isModified || force) {
+            const title = this.defaultTitleText;
+
+            if (window.document.title !== title) {
+                window.document.title = title;
+            }
+
+            this._isDocReady && (this._state.isDocModified !== isModified) && Common.Gateway.setDocumentModified(isModified);
+            this._state.isDocModified = isModified;
+        }
+    }
+
+    onDocumentModifiedChanged () {
+        const isModified = this.api.asc_isDocumentCanSave();
+        if (this._state.isDocModified !== isModified) {
+            this._isDocReady && Common.Gateway.setDocumentModified(this.api.asc_isDocumentModified());
+        }
+
+        this.updateWindowTitle();
+    }
+
+    onDocumentCanSaveChanged (isCanSave) {
+        //
+    }
+
+    onPrint () {
+        if (!this.props.storeAppOptions.canPrint) return;
+
+        if (this.api)
+            this.api.asc_Print();
+        Common.component.Analytics.trackEvent('Print');
+    }
+
+    onProcessSaveResult (data) {
+        this.api.asc_OnSaveEnd(data.result);
+
+        if (data && data.result === false) {
+            const _t = this._t;
+            f7.dialog.alert(
+                (!data.message) ? _t.errorProcessSaveResult : data.message,
+                _t.criticalErrorTitle
+            );
+        }
+    }
+
+    onProcessRightsChange (data) {
+        if (data && data.enabled === false) {
+            const appOptions = this.props.storeAppOptions;
+            const old_rights = appOptions.lostEditingRights;
+            appOptions.changeEditingRights(!old_rights);
+            this.api.asc_coAuthoringDisconnect();
+            Common.Notifications.trigger('api:disconnect');
+
+            if (!old_rights) {
+                const _t = this._t;
+                f7.dialog.alert(
+                    (!data.message) ? _t.warnProcessRightsChange : data.message,
+                    _t.notcriticalErrorTitle,
+                    () => { appOptions.changeEditingRights(false); }
+                );
+            }
+        }
+    }
+
+    onDownloadAs () {
+        if ( this.props.storeAppOptions.canDownload) {
+            Common.Gateway.reportError(Asc.c_oAscError.ID.AccessDeny, this._t.errorAccessDeny);
+            return;
+        }
+        this._state.isFromGatewayDownloadAs = true;
+        this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.XLSX, true));
+    }
+
+    onRequestClose () {
+        Common.Gateway.requestClose();
     }
 
     render() {
         return (
             <Fragment>
+                <LongActionsController />
+                <ErrorController LoadingDocument={this.LoadingDocument}/>
                 <CollaborationController />
                 <CommentsController />
                 <AddCommentController />

apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx

@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from 'react';
+import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import ToolbarView from "../view/Toolbar";
+
+const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo')(props => {
+    const {t} = useTranslation();
+    const _t = t("Toolbar", { returnObjects: true });
+
+    const appOptions = props.storeAppOptions;
+    const isDisconnected = props.users.isDisconnected;
+    const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments;
+    const docTitle = props.storeSpreadsheetInfo.dataDoc ? props.storeSpreadsheetInfo.dataDoc.title : '';
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            const api = Common.EditorApi.get();
+            api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
+            api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
+            api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onWorksheetLocked', onApiSelectionChanged);
+            api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
+            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+
+            Common.Notifications.on('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.on('toolbar:activatecontrols', activateControls);
+            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.on('goback', goBack);
+            Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
+        };
+        if ( !Common.EditorApi ) {
+            Common.Notifications.on('document:ready', onDocumentReady);
+            Common.Gateway.on('init', loadConfig);
+        } else {
+            onDocumentReady();
+        }
+
+        return () => {
+            Common.Notifications.off('document:ready', onDocumentReady);
+            Common.Notifications.off('api:disconnect', onCoAuthoringDisconnect);
+            Common.Notifications.off('toolbar:activatecontrols', activateControls);
+            Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
+            Common.Notifications.off('goback', goBack);
+            Common.Notifications.off('sheet:active', onApiActiveSheetChanged);
+
+            const api = Common.EditorApi.get();
+            api.asc_unregisterCallback('asc_onCanUndoChanged', onApiCanUndo);
+            api.asc_unregisterCallback('asc_onCanRedoChanged', onApiCanRedo);
+            //api.asc_unregisterCallback('asc_onSelectionChanged', onApiSelectionChanged); TO DO
+            api.asc_unregisterCallback('asc_onWorkbookLocked', onApiSelectionChanged);
+            api.asc_unregisterCallback('asc_onWorksheetLocked', onApiSelectionChanged);
+            api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
+            api.asc_unregisterCallback('asc_onCoAuthoringDisconnect', onCoAuthoringDisconnect);
+        }
+    });
+
+    // Back button
+    const [isShowBack, setShowBack] = useState(false);
+    const loadConfig = (data) => {
+        if (data && data.config && data.config.canBackToFolder !== false &&
+            data.config.customization && data.config.customization.goback &&
+            (data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
+            setShowBack(true);
+        }
+    };
+    const onBack = () => {
+        const api = Common.EditorApi.get();
+        if (api.asc_isDocumentModified()) {
+            f7.dialog.create({
+                title   : _t.dlgLeaveTitleText,
+                text    : _t.dlgLeaveMsgText,
+                verticalButtons: true,
+                buttons : [
+                    {
+                        text: _t.leaveButtonText,
+                        onClick: function() {
+                            goBack();
+                        }
+                    },
+                    {
+                        text: _t.stayButtonText,
+                        bold: true
+                    }
+                ]
+            }).open();
+        } else {
+            goBack();
+        }
+    };
+    const goBack = (current) => {
+        //if ( !Common.Controllers.Desktop.process('goback') ) {
+        if (appOptions.customization.goback.requestClose && appOptions.canRequestClose) {
+            Common.Gateway.requestClose();
+        } else {
+            const href = appOptions.customization.goback.url;
+            if (!current && appOptions.customization.goback.blank !== false) {
+                window.open(href, "_blank");
+            } else {
+                parent.location.href = href;
+            }
+        }
+        //}
+    }
+
+    // Undo and Redo
+    const [isCanUndo, setCanUndo] = useState(false);
+    const [isCanRedo, setCanRedo] = useState(false);
+    const onApiCanUndo = (can) => {
+        if (isDisconnected) return;
+        setCanUndo(can);
+    };
+    const onApiCanRedo = (can) => {
+        if (isDisconnected) return;
+        setCanRedo(can);
+    };
+    const onUndo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_Undo();
+        }
+    };
+    const onRedo = () => {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_Redo();
+        }
+    }
+
+    const [disabledEditControls, setDisabledEditControls] = useState(false);
+    const onApiSelectionChanged = (cellInfo) => {
+        if (isDisconnected) return;
+
+        const api = Common.EditorApi.get();
+        const info = !!cellInfo ? cellInfo : api.asc_getCellInfo();
+        let islocked = false;
+
+        switch (info.asc_getSelectionType()) {
+            case Asc.c_oAscSelectionType.RangeChart:
+            case Asc.c_oAscSelectionType.RangeImage:
+            case Asc.c_oAscSelectionType.RangeShape:
+            case Asc.c_oAscSelectionType.RangeChartText:
+            case Asc.c_oAscSelectionType.RangeShapeText:
+                const objects = api.asc_getGraphicObjectProps();
+                for ( let i in objects ) {
+                    if ( objects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image ) {
+                        if ((islocked = objects[i].asc_getObjectValue().asc_getLocked()))
+                            break;
+                    }
+                }
+                break;
+            default:
+                islocked = info.asc_getLocked();
+        }
+
+        setDisabledEditControls(islocked);
+    };
+
+    const onApiActiveSheetChanged = (index) => {
+        Common.Notifications.trigger('comments:filterchange', ['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)], false );
+    };
+
+    const [disabledSettings, setDisabledSettings] = useState(false);
+    const deactivateEditControls = (enableDownload) => {
+        setDisabledEditControls(true);
+        if (enableDownload) {
+            //DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
+        } else {
+            setDisabledSettings(true);
+        }
+    };
+
+
+    const [disabledControls, setDisabledControls] = useState(true);
+    const activateControls = () => {
+        setDisabledControls(false);
+    };
+
+    const onCoAuthoringDisconnect = (enableDownload) => {
+        deactivateEditControls(enableDownload);
+        setCanUndo(false);
+        setCanRedo(false);
+        f7.popover.close();
+        f7.sheet.close();
+        f7.popup.close();
+    };
+
+    return (
+        <ToolbarView openOptions={props.openOptions}
+                     isEdit={appOptions.isEdit}
+                     docTitle={docTitle}
+                     isShowBack={isShowBack}
+                     onBack={onBack}
+                     isCanUndo={isCanUndo}
+                     isCanRedo={isCanRedo}
+                     onUndo={onUndo}
+                     onRedo={onRedo}
+                     disabledControls={disabledControls}
+                     disabledEditControls={disabledEditControls}
+                     disabledSettings={disabledSettings}
+                     displayCollaboration={displayCollaboration}
+        />
+    )
+});
+
+export {ToolbarController as Toolbar};

apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx

@@ -47,7 +47,7 @@ class EditCellController extends Component {
         if (isDecrement) {
             typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size);
         } else {
-            typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size);
+            typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(409, ++size);
         }
 
         if (typeof size !== 'undefined') {

apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx

@@ -69,7 +69,7 @@ class EditTextController extends Component {
         if (isDecrement) {
             typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size);
         } else {
-            typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size);
+            typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(409, ++size);
         }
 
         if (typeof size !== 'undefined') {

apps/spreadsheeteditor/mobile/src/page/app.jsx

@@ -1,10 +1,13 @@
-import '../../../../common/Gateway.js';
 
 import React from 'react';
 
 import {App,Views,View,Navbar,NavLeft,NavRight,Link} from 'framework7-react';
 import { f7ready } from 'framework7-react';
 
+import '../../../../common/Analytics.js';
+
+import '../../../../common/Gateway.js';
+
 import routes from '../router/routes.js';
 
 import '../../../../common/main/lib/util/utils.js';

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -1,21 +1,22 @@
 import React, { Component } from 'react';
-import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
+import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import { observer, inject } from "mobx-react";
 
-// import EditOptions from '../view/edit/Edit';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
+import FilterOptionsController from '../controller/FilterOptions.jsx'
 import Statusbar from '../controller/StatusBar'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";
-import { Device } from '../../../../common/mobile/utils/device';
 import { Search, SearchSettings } from '../controller/Search';
 import { f7 } from 'framework7-react';
 
 import {FunctionGroups} from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
+import { Toolbar } from "../controller/Toolbar";
 
-export default class MainPage extends Component {
+class MainPage extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -61,25 +62,21 @@ export default class MainPage extends Component {
     };
 
   render() {
+      const appOptions = this.props.storeAppOptions;
+      const config = appOptions.config;
+      const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-            <Page name="home">
+            <Page name="home" className={showLogo && 'page-with-logo'}>
               {/* Top Navbar */}
-                <Navbar id='editor-navbar'>
-                    {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
-                    <NavLeft>
-                        <Link icon='icon-undo'></Link>
-                        <Link icon='icon-redo'></Link>
-                    </NavLeft>
-                    <NavRight>
-                        <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
-                        <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                        { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                        <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
-                        <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
-                    </NavRight>
-                    <Search useSuspense={false} />
+                <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
+                    {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
+                    <Subnavbar>
+                        <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+                        <Search useSuspense={false}/>
+                    </Subnavbar>
                 </Navbar>
                 <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
+                <FilterOptionsController/>
                 {/* Page content */}
                 <View id="editor_sdk" />
                 <SearchSettings useSuspense={false} />
@@ -106,4 +103,6 @@ export default class MainPage extends Component {
             </Page>
       )
   }
-};
+}
+
+export default inject("storeAppOptions")(observer(MainPage));

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

@@ -12,13 +12,20 @@ export class storeAppOptions {
 
     isEdit = false;
     config = {};
-
-    isEdit = false;
     canViewComments = false;
 
-    setConfigOptions (config) {
+    setConfigOptions (config, _t) {
         this.config = config;
-        this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
+        this.customization = config.customization;
+        this.canRenameAnonymous = !((typeof (this.customization) == 'object') && (typeof (this.customization.anonymous) == 'object') && (this.customization.anonymous.request===false));
+        this.guestName = (typeof (this.customization) == 'object') && (typeof (this.customization.anonymous) == 'object') &&
+        (typeof (this.customization.anonymous.label) == 'string') && this.customization.anonymous.label.trim()!=='' ?
+            Common.Utils.String.htmlEncode(this.customization.anonymous.label) : _t.textGuest;
+
+        const value = this.canRenameAnonymous ? Common.localStorage.getItem("guest-username") : null;
+        this.user = Common.Utils.fillUserInfo(config.user, config.lang, value ? (value + ' (' + this.guestName + ')' ) : _t.textAnonymous);
+
+        config.user = this.user;
         this.isDesktopApp = config.targetApp == 'desktop';
         this.canCreateNew = !!config.createUrl && !this.isDesktopApp;
         this.canOpenRecent = config.recent !== undefined && !this.isDesktopApp;

apps/spreadsheeteditor/mobile/src/store/focusObjects.js

@@ -61,140 +61,19 @@ export class storeFocusObjects {
     }
 
     get selections () {
-        const _selections = [];
-
-        let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart,
-            selType             = this._cellInfo.asc_getSelectionType(),
-            isObjLocked         = false;
-
-        switch (selType) {
-            case Asc.c_oAscSelectionType.RangeCells:    isCell  = true; break;
-            case Asc.c_oAscSelectionType.RangeRow:      isRow   = true; break;
-            case Asc.c_oAscSelectionType.RangeCol:      isCol   = true; break;
-            case Asc.c_oAscSelectionType.RangeMax:      isAll   = true; break;
-            case Asc.c_oAscSelectionType.RangeImage:    isImage = true; break;
-            case Asc.c_oAscSelectionType.RangeShape:    isShape = true; break;
-            case Asc.c_oAscSelectionType.RangeChart:    isChart = true; break;
-            case Asc.c_oAscSelectionType.RangeChartText:isTextChart = true; break;
-            case Asc.c_oAscSelectionType.RangeShapeText: isTextShape = true; break;
-        }
-
-        if (isImage || isShape || isChart) {
-            isImage = isShape = isChart = false;
-            let has_chartprops = false;
-            let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
-
-            for (let i = 0; i < selectedObjects.length; i++) {
-                if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                    const elValue = selectedObjects[i].asc_getObjectValue();
-                    isObjLocked = isObjLocked || elValue.asc_getLocked();
-                    const shapeProps = elValue.asc_getShapeProperties();
-
-                    if (shapeProps) {
-                        if (shapeProps.asc_getFromChart()) {
-                            isChart = true;
-                        } else {
-                            isShape = true;
-
-                        }
-                    } else if (elValue.asc_getChartProperties()) {
-                        isChart = true;
-                        has_chartprops = true;
-                    } else {
-                        isImage = true;
-                    }
-                }
-            }
-        } else if (isTextShape || isTextChart) {
-            const selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
-            let isEquation = false;
-
-            for (var i = 0; i < selectedObjects.length; i++) {
-                const elType = selectedObjects[i].asc_getObjectType();
-                if (elType == Asc.c_oAscTypeSelectElement.Image) {
-                    const value = selectedObjects[i].asc_getObjectValue();
-                    isObjLocked = isObjLocked || value.asc_getLocked();
-                } else if (elType == Asc.c_oAscTypeSelectElement.Paragraph) {
-                } else if (elType == Asc.c_oAscTypeSelectElement.Math) {
-                    isEquation = true;
-                }
-            }
-        }
-        if (isChart || isTextChart) {
-            _selections.push('chart');
-
-            if (isTextChart) {
-                _selections.push('text');
-            }
-        } else if ((isShape || isTextShape) && !isImage) {
-            _selections.push('shape');
-
-            if (isTextShape) {
-                _selections.push('text');
-            }
-        } else if (isImage) {
-            _selections.push('image');
-
-            if (isShape) {
-                _selections.push('shape');
-            }
-        } else {
-            _selections.push('cell');
-
-            if (this._cellInfo.asc_getHyperlink()) {
-                _selections.push('hyperlink');
-            }
-        }
-        return _selections;
+        return !!this.intf ? this.intf.getSelections() : null;
     }
 
     get shapeObject() {
-        const shapes = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
-                if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
-                    shapes.push(object);    
-                }
-            }
-        }
-        if (shapes.length > 0) {
-            const object = shapes[shapes.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getShapeObject() : null;
     }
 
     get imageObject() {
-        const images = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
-                images.push(object);     
-            }
-        }
-        if (images.length > 0) {
-            const object = images[images.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getImageObject() : null;
     }
 
     get chartObject() {
-        const charts = [];
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
-                if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
-                    charts.push(object);
-                }  
-            }
-        }
-        if (charts.length > 0) {
-            const object = charts[charts.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
+        return !!this.intf ? this.intf.getChartObject() : null;
     }
 
 }

apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx

@@ -0,0 +1,33 @@
+import React, {Fragment} from 'react';
+import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch'
+
+const ToolbarView = props => {
+    return (
+        <Fragment>
+            <NavLeft>
+                {props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
+                {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getUndoRedo({
+                    disabledUndo: !props.isCanUndo,
+                    disabledRedo: !props.isCanRedo,
+                    onUndoClick: props.onUndo,
+                    onRedoClick: props.onRedo
+                })}
+            </NavLeft>
+            {!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
+            <NavRight>
+                {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
+                    disabled: props.disabledEditControls || props.disabledControls,
+                    onEditClick: () => props.openOptions('edit'),
+                    onAddClick: () => props.openOptions('add')
+                })}
+                { Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
+                {props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link>}
+                <Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
+            </NavRight>
+        </Fragment>
+    )
+};
+
+export default ToolbarView;

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -92,7 +92,8 @@ const SettingsList = withTranslation()(props => {
 
     const showHelp = () => {
         // let url = '{{HELP_URL}}';
-        let url = 'https://helpcenter.onlyoffice.com';
+        // let url = 'https://helpcenter.onlyoffice.com';
+        let url = __HELP_URL__;
 
         if (url.charAt(url.length-1) !== '/') {
             url += '/';

build/package.json

@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "chai": "1.9.1",
-    "mocha": "^6.2.2",
-    "grunt-mocha": "^1.0.0"
+    "grunt-mocha": "^1.0.0",
+    "mocha": "^6.2.2"
   }
 }

vendor/framework7-react/build/webpack.config.js

@@ -79,6 +79,8 @@ module.exports = {
           resolvePath('node_modules/ssr-window'),
 
           resolvePath('../../../web-apps-mobile/word'),
+          resolvePath('../../../web-apps-mobile/slide'),
+          resolvePath('../../../web-apps-mobile/cell')
         ],
       },
 
@@ -158,14 +160,15 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(env),
       'process.env.TARGET': JSON.stringify(target),
-      __PRODUCT_VERSION__: JSON.stringify(process.env.PRODUCT_VERSION ? process.env.PRODUCT_VERSION : '6.2.0'),
+      __PRODUCT_VERSION__: JSON.stringify(process.env.PRODUCT_VERSION ? process.env.PRODUCT_VERSION : '6.2.0d'),
       __PUBLISHER_ADDRESS__: JSON.stringify('20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050'),
       __SUPPORT_EMAIL__: JSON.stringify('support@onlyoffice.com'),
       __PUBLISHER_PHONE__: JSON.stringify('+371 633-99867'),
       __PUBLISHER_URL__: JSON.stringify('https://www.onlyoffice.com'),
       __PUBLISHER_NAME__: JSON.stringify('Ascensio System SIA'),
       __APP_TITLE_TEXT__: JSON.stringify(process.env.APP_TITLE_TEXT ? process.env.APP_TITLE_TEXT : 'ONLYOFFICE'),
-      __COMPANY_NAME__: JSON.stringify(process.env.COMPANY_NAME ? process.env.COMPANY_NAME : 'ONLYOFFICE')
+      __COMPANY_NAME__: JSON.stringify(process.env.COMPANY_NAME ? process.env.COMPANY_NAME : 'ONLYOFFICE'),
+      __HELP_URL__: JSON.stringify('https://helpcenter.onlyoffice.com')
     }),
 
     ...(env === 'production' ? [