Merge pull request #221 from ONLYOFFICE/feature/sse-spellcheck

Feature/sse spellcheck

apps/common/main/resources/less/buttons.less

@@ -198,6 +198,10 @@
 
     .btn.small;
 
+    &.bg-white {
+        background-color: #fff;
+    }
+
     &:before,
     &:after {
         content: "";

apps/common/main/resources/less/toolbar.less

@@ -542,6 +542,10 @@
         }
     }
 
+    .img-toolbarmenu.btn-ic-docspell {
+        .background-ximage('@{common-image-path}/controls/toolbar-menu-ru.png', '@{common-image-path}/controls/toolbar-menu-ru@2x.png', 60px);
+    }
+
     .button-normal-icon(btn-notes,            77, @toolbar-big-icon-size);
     .button-normal-icon(btn-controls,         78, @toolbar-big-icon-size);
 

apps/spreadsheeteditor/main/app.js

@@ -152,6 +152,7 @@ require([
             'Print',
             'Toolbar',
             'Statusbar',
+            'Spellcheck',
             'RightMenu',
             'LeftMenu',
             'Main',
@@ -174,6 +175,7 @@ require([
         'spreadsheeteditor/main/app/controller/CellEditor',
         'spreadsheeteditor/main/app/controller/Toolbar',
         'spreadsheeteditor/main/app/controller/Statusbar',
+        'spreadsheeteditor/main/app/controller/Spellcheck',
         'spreadsheeteditor/main/app/controller/RightMenu',
         'spreadsheeteditor/main/app/controller/LeftMenu',
         'spreadsheeteditor/main/app/controller/Main',

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -202,6 +202,12 @@ define([
                 this.leftMenu.btnChat.hide();
                 this.leftMenu.btnComments.hide();
             }
+
+            if (this.mode.isEdit) {
+                this.leftMenu.btnSpellcheck.show();
+                this.leftMenu.setOptionsPanel('spellcheck', this.getApplication().getController('Spellcheck').getView('Spellcheck'));
+            }
+
             this.mode.trialMode && this.leftMenu.setDeveloperMode(this.mode.trialMode);
             /** coauthoring end **/
             Common.util.Shortcuts.resumeEvents();
@@ -646,6 +652,7 @@ define([
             this.leftMenu.btnChat.setDisabled(true);
             /** coauthoring end **/
             this.leftMenu.btnPlugins.setDisabled(true);
+            this.leftMenu.btnSpellcheck.setDisabled(true);
 
             this.leftMenu.getMenu('file').setMode({isDisconnected: true, enableDownload: !!enableDownload});
             if ( this.dlgSearch ) {
@@ -844,6 +851,7 @@ define([
 
             this.leftMenu.btnAbout.setDisabled(isRangeSelection);
             this.leftMenu.btnSearch.setDisabled(isRangeSelection);
+            this.leftMenu.btnSpellcheck.setDisabled(isRangeSelection);
             if (this.mode.canPlugins && this.leftMenu.panelPlugins) {
                 this.leftMenu.panelPlugins.setLocked(isRangeSelection);
                 this.leftMenu.panelPlugins.disableControls(isRangeSelection);
@@ -855,6 +863,7 @@ define([
 
             this.leftMenu.btnAbout.setDisabled(isEditFormula);
             this.leftMenu.btnSearch.setDisabled(isEditFormula);
+            this.leftMenu.btnSpellcheck.setDisabled(isEditFormula);
             if (this.mode.canPlugins && this.leftMenu.panelPlugins) {
                 this.leftMenu.panelPlugins.setLocked(isEditFormula);
                 this.leftMenu.panelPlugins.disableControls(isEditFormula);

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -167,6 +167,7 @@ define([
                 this.api.asc_registerCallback('asc_onDocumentName',          _.bind(this.onDocumentName, this));
                 this.api.asc_registerCallback('asc_onPrintUrl',              _.bind(this.onPrintUrl, this));
                 this.api.asc_registerCallback('asc_onMeta',                  _.bind(this.onMeta, this));
+                this.api.asc_registerCallback('asc_onSpellCheckInit',        _.bind(this.loadLanguages, this));
                 Common.NotificationCenter.on('api:disconnect',               _.bind(this.onCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('goback',                       _.bind(this.goBack, this));
                 Common.NotificationCenter.on('namedrange:locked',            _.bind(this.onNamedRangeLocked, this));
@@ -686,7 +687,8 @@ define([
                     leftMenuView                = leftmenuController.getView('LeftMenu'),
                     documentHolderView          = documentHolderController.getView('DocumentHolder'),
                     chatController              = application.getController('Common.Controllers.Chat'),
-                    pluginsController           = application.getController('Common.Controllers.Plugins');
+                    pluginsController           = application.getController('Common.Controllers.Plugins'),
+                    spellcheckController        = application.getController('Spellcheck');
 
                 leftMenuView.getMenu('file').loadDocument({doc:me.appOptions.spreadsheet});
                 leftmenuController.setMode(me.appOptions).createDelayedElements().setApi(me.api);
@@ -713,6 +715,8 @@ define([
                 this.formulaInput = celleditorController.getView('CellEditor').$el.find('textarea');
 
                 if (me.appOptions.isEdit) {
+                    spellcheckController.setApi(me.api).setMode(me.appOptions);
+
                     if (me.appOptions.canAutosave) {
                         value = Common.localStorage.getItem("sse-settings-autosave");
                         if (value===null && me.appOptions.customization && me.appOptions.customization.autosave===false)
@@ -743,6 +747,7 @@ define([
 
                             documentHolderView.createDelayedElements();
                             toolbarController.createDelayedElements();
+                            me.setLanguages();
 
                             if (!me.appOptions.isEditMailMerge && !me.appOptions.isEditDiagram) {
                                 var shapes = me.api.asc_getPropertyEditorShapes();
@@ -1831,6 +1836,15 @@ define([
                 }
             },
 
+            loadLanguages: function(apiLangs) {
+                this.languages = apiLangs;
+                window.styles_loaded && this.setLanguages();
+            },
+
+            setLanguages: function() {
+                this.getApplication().getController('Spellcheck').setLanguages(this.languages);
+            },
+
             onInternalCommand: function(data) {
                 if (data) {
                     switch (data.command) {

apps/spreadsheeteditor/main/app/controller/Spellcheck.js

@@ -0,0 +1,249 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 30.07.19
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/main/app/view/Spellcheck'
+], function () {
+    'use strict';
+
+    SSE.Controllers.Spellcheck = Backbone.Controller.extend(_.extend({
+        models: [],
+        collections: [
+        ],
+        views: [
+            'Spellcheck'
+        ],
+
+        initialize: function() {
+            var me = this;
+            this.addListeners({
+                'Spellcheck': {
+                    'show': function() {
+                        me.loadLanguages();
+                    },
+                    'hide': function() {
+                    }
+                }
+            });
+        },
+
+        events: function() {
+        },
+
+        onLaunch: function() {
+            this.panelSpellcheck= this.createView('Spellcheck', {
+            });
+            this.panelSpellcheck.on('render:after', _.bind(this.onAfterRender, this));
+            this._isDisabled = false;
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            this.api.asc_registerCallback('asc_onSpellCheckVariantsFound', _.bind(this.onSpellCheckVariantsFound, this));
+            this.api.asc_registerCallback('asc_onEditCell', _.bind(this.onApiEditCell, this));
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+            if (this.panelSpellcheck) {
+                this.panelSpellcheck.btnToDictionary.setVisible(mode.isDesktopApp);
+            }
+            return this;
+        },
+
+        onAfterRender: function(panelSpellcheck) {
+            panelSpellcheck.buttonNext.on('click', _.bind(this.onClickNext, this));
+            panelSpellcheck.btnToDictionary.on('click', _.bind(this.onDictionary, this));
+            panelSpellcheck.cmbDictionaryLanguage.on('selected', _.bind(this.onSelectLanguage, this));
+            panelSpellcheck.btnChange.on('click', _.bind(this.onClickChange, this));
+            panelSpellcheck.btnIgnore.on('click', _.bind(this.onClickIgnore, this));
+            panelSpellcheck.btnChange.menu.on('item:click', _.bind(this.onClickChangeMenu, this));
+            panelSpellcheck.btnIgnore.menu.on('item:click', _.bind(this.onClickIgnoreMenu, this));
+        },
+
+        onClickNext: function() {
+            if (this.api) {
+                this.api.asc_nextWord();
+            }
+        },
+
+        onDictionary: function() {
+            if (this.api) {
+                var str = this.panelSpellcheck.currentWord.getValue();
+                str && this.api.asc_spellCheckAddToDictionary(str);
+            }
+        },
+
+        SetDisabled: function(state) {
+            this._isDisabled = state;
+        },
+
+        setLanguages: function (array) {
+            this.languages = array;
+        },
+
+        loadLanguages: function () {
+            var value = Common.localStorage.getItem("sse-spellcheck-locale");
+            if (value)
+                value = parseInt(value);
+            else
+                value = this.mode.lang ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.mode.lang)) : 0x0409;
+
+            var combo = this.panelSpellcheck.cmbDictionaryLanguage;
+            if (this.languages && this.languages.length>0) {
+                var langs = [], info,
+                    allLangs = Common.util.LanguageInfo.getLanguages();
+                this.languages.forEach(function (code) {
+                    code = parseInt(code);
+                    if (allLangs.hasOwnProperty(code)) {
+                        info = allLangs[code];
+                        langs.push({
+                            displayValue:   info[1],
+                            shortName:      info[0],
+                            value:          code
+                        });
+                    }
+                });
+                langs.sort(function(a, b){
+                    if (a.shortName < b.shortName) return -1;
+                    if (a.shortName > b.shortName) return 1;
+                    return 0;
+                });
+                combo.setData(langs);
+                var item = combo.store.findWhere({value: value});
+                if (!item && allLangs[value]) {
+                    value = allLangs[value][0].split(/[\-\_]/)[0];
+                    item = combo.store.find(function(model){
+                                return model.get('shortName').indexOf(value)==0;
+                            });
+                }
+                combo.setValue(item ? item.get('value') : langs[0].value);
+                value = combo.getValue();
+            } else {
+                combo.setValue(Common.util.LanguageInfo.getLocalLanguageName(value)[1]);
+                combo.setDisabled(true);
+            }
+            this.api.asc_setDefaultLanguage(value);
+        },
+
+        onSelectLanguage: function (combo, record) {
+            var lang = record.value;
+            if (this.api && lang) {
+                this.api.asc_setDefaultLanguage(lang);
+                Common.localStorage.setItem("sse-spellcheck-locale", this.panelSpellcheck.cmbDictionaryLanguage.getValue());
+            }
+        },
+
+        onClickChange: function (btn, e) {
+            if (this.api) {
+                var rec = this.panelSpellcheck.suggestionList.getSelectedRec();
+                rec && this.api.asc_replaceMisspelledWord(rec.get('value'), this._currentSpellObj);
+            }
+        },
+
+        onClickChangeMenu: function (menu, item) {
+            if (this.api) {
+                var rec = this.panelSpellcheck.suggestionList.getSelectedRec();
+                if (item.value == 0) {
+                    rec && this.api.asc_replaceMisspelledWord(rec.get('value'), this._currentSpellObj);
+                } else if (item.value == 1) {
+                    rec && this.api.asc_replaceMisspelledWord(rec.get('value'), this._currentSpellObj, true);
+                }
+            }
+        },
+
+        onClickIgnore: function () {
+            if (this.api) {
+                this.api.asc_ignoreMisspelledWord(this._currentSpellObj, false)
+            }
+        },
+
+        onClickIgnoreMenu: function (menu, item) {
+            if (this.api) {
+                if (item.value == 0) {
+                    this.api.asc_ignoreMisspelledWord(this._currentSpellObj, false);
+                } else if (item.value == 1) {
+                    this.api.asc_ignoreMisspelledWord(this._currentSpellObj, true);
+                }
+            }
+        },
+
+        onSpellCheckVariantsFound: function (property) {
+            this._currentSpellObj = property;
+
+            var arr = [],
+                word;
+            if (property) {
+                word = property.get_Word();
+                var variants = property.get_Variants();
+                variants && variants.forEach(function (item) {
+                    var rec = new Common.UI.DataViewModel();
+                    rec.set({
+                        value: item
+                    });
+                    arr.push(rec);
+                });
+            }
+            var disabled = this.api.isCellEdited;
+            this.panelSpellcheck.currentWord.setValue(word || '');
+            this.panelSpellcheck.suggestionList.store.reset(arr);
+            (arr.length>0) && this.panelSpellcheck.suggestionList.selectByIndex(0);
+            this.panelSpellcheck.currentWord.setDisabled(!word || disabled);
+            this.panelSpellcheck.btnChange.setDisabled(arr.length<1 || disabled);
+            this.panelSpellcheck.btnIgnore.setDisabled(!word || disabled);
+            this.panelSpellcheck.btnToDictionary.setDisabled(!word || disabled);
+            this.panelSpellcheck.lblComplete.toggleClass('hidden', !property || !!word);
+        },
+
+        onApiEditCell: function(state) {
+            if (state == Asc.c_oAscCellEditorState.editEnd) {
+                this.panelSpellcheck.buttonNext.setDisabled(false);
+                this.panelSpellcheck.cmbDictionaryLanguage.setDisabled(false);
+            } else {
+                this.panelSpellcheck.buttonNext.setDisabled(true);
+                this.panelSpellcheck.currentWord.setDisabled(true);
+                this.panelSpellcheck.btnChange.setDisabled(true);
+                this.panelSpellcheck.btnIgnore.setDisabled(true);
+                this.panelSpellcheck.btnToDictionary.setDisabled(true);
+                this.panelSpellcheck.cmbDictionaryLanguage.setDisabled(true);
+            }
+        }
+
+    }, SSE.Controllers.Spellcheck || {}));
+});

apps/spreadsheeteditor/main/app/template/LeftMenu.template

@@ -6,6 +6,7 @@
         <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat"><i class="icon img-toolbarmenu btn-menu-chat">&nbsp;</i></button>
         <!-- /** coauthoring end **/ -->
         <button id="left-btn-plugins" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-plugin">&nbsp;</i></button>
+        <button id="left-btn-spellcheck" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-ic-docspell">&nbsp;</i></button>
         <button id="left-btn-support" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-support">&nbsp;</i></button>
         <button id="left-btn-about" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-about">&nbsp;</i></button>
     </div>
@@ -13,6 +14,7 @@
         <!-- /** coauthoring begin **/ -->
         <div id="left-panel-comments" class="" style="display: none;" />
         <div id="left-panel-chat" class="" style="display: none;" />
+        <div id="left-panel-spellcheck" class="" style="display: none; height: 100%;" />
         <!-- /** coauthoring end **/ -->
         <div id="left-panel-plugins" class="" style="display: none; height: 100%; position: relative;" />
     </div>

apps/spreadsheeteditor/main/app/view/LeftMenu.js

@@ -63,6 +63,7 @@ define([
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-spellcheck': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -141,6 +142,16 @@ define([
             this.btnPlugins.hide();
             this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
 
+            this.btnSpellcheck = new Common.UI.Button({
+                el: $('#left-btn-spellcheck'),
+                hint: this.tipSpellcheck,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+            this.btnSpellcheck.hide();
+            this.btnSpellcheck.on('click',      _.bind(this.onBtnMenuClick, this));
+
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
 
@@ -210,6 +221,12 @@ define([
                         this.panelChat['hide']();
                }
             }
+            if (this.panelSpellcheck) {
+                if (this.btnSpellcheck.pressed) {
+                    this.panelSpellcheck.show();
+                } else
+                    this.panelSpellcheck['hide']();
+            }
             // if (this.mode.canPlugins && this.panelPlugins) {
             //     if (this.btnPlugins.pressed) {
             //         this.panelPlugins.show();
@@ -226,6 +243,9 @@ define([
             } else
             if (name == 'plugins' && !this.panelPlugins) {
                 this.panelPlugins = panel.render('#left-panel-plugins');
+            } else
+            if (name == 'spellcheck' && !this.panelSpellcheck) {
+                this.panelSpellcheck = panel.render('#left-panel-spellcheck');
             }
         },
 
@@ -263,6 +283,10 @@ define([
                 this.panelPlugins['hide']();
                 this.btnPlugins.toggle(false, true);
             }
+            if (this.panelSpellcheck) {
+                this.panelSpellcheck['hide']();
+                this.btnSpellcheck.toggle(false, true);
+            }
         },
 
         isOpened: function() {
@@ -282,6 +306,7 @@ define([
             this.btnChat.setDisabled(false);
             /** coauthoring end **/
             this.btnPlugins.setDisabled(false);
+            this.btnSpellcheck.setDisabled(false);
         },
 
         showMenu: function(menu) {
@@ -356,6 +381,7 @@ define([
         tipSearch   : 'Search',
         tipPlugins  : 'Plugins',
         txtDeveloper: 'DEVELOPER MODE',
-        txtTrial: 'TRIAL MODE'
+        txtTrial: 'TRIAL MODE',
+        tipSpellcheck: 'Spell Checking'
     }, SSE.Views.LeftMenu || {}));
 });

apps/spreadsheeteditor/main/app/view/Spellcheck.js

@@ -0,0 +1,197 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 30.07.19
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/ListView',
+    'common/main/lib/component/InputField',
+    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/ComboDataView'
+], function (template) {
+    'use strict';
+
+    SSE.Views.Spellcheck = Common.UI.BaseView.extend(_.extend({
+        el: '#left-panel-spellcheck',
+
+        template: _.template([
+            '<div id="spellcheck-box" class="layout-ct vbox active" style="padding: 20px 15px 0; width: 100%; position: relative;overflow: hidden;">',
+            '<div id="spellcheck-header" style="font-size: 14px; padding-bottom: 16px;"><%= scope.txtSpelling %></div>',
+            '<div style="display: flex; width: 100%; padding-bottom: 8px;"><div id="spellcheck-current-word" style="vertical-align: top; width: 100%; display: inline-block;"></div><div id="spellcheck-next" style="display: inline-block;"></div></div>',
+            '<div id="spellcheck-suggestions-list" style="width: 100%; height: 116px; background-color: #fff; margin-bottom: 8px;"></div>',
+            '<div id="spellcheck-change" style="display: inline-block; padding-bottom: 16px;"></div><div id="spellcheck-ignore" class="padding-large" style="margin-left: 9px; display: inline-block;"></div>',
+            '<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary" style="min-width: 110px; display: block; margin-bottom: 16px;"><%= scope.txtAddToDictionary %></button>',
+            '<label class="header" style=" display: block;"><%= scope.txtDictionaryLanguage %></label><div id="spellcheck-dictionary-language" style="margin-top: 3px; padding-bottom: 16px;display: flex;"></div>',
+            '<div id="spellcheck-complete" style="display: flex;" class="hidden"><i class="img-commonctrl img-complete" style="display: inline-block;margin-right: 10px;"></i><%= scope.txtComplete %></div>',
+            '</div>'
+        ].join('')),
+
+        initialize: function(options) {
+            _.extend(this, options);
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+        },
+
+        render: function(el) {
+            el = el || this.el;
+            this.$el = $(el);
+            this.$el.html(this.template({scope: this}));
+
+            this.currentWord = new Common.UI.InputField({
+                el : $('#spellcheck-current-word'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                disabled: true
+            });
+
+            this.buttonNext = new Common.UI.Button({
+                style: 'margin-left: 5px; width: 22px; height: 22px; border: 1px solid #cfcfcf;',
+                cls: 'btn-toolbar bg-white',
+                iconCls: 'btn-spellcheck-next',
+                hint: this.txtNextTip
+            });
+            this.buttonNext.render($('#spellcheck-next'));
+
+            this.suggestionList = new Common.UI.ListView({
+                el: $('#spellcheck-suggestions-list'),
+                emptyText: this.noSuggestions,
+                store: new Common.UI.DataViewStore(),
+                scrollAlwaysVisible: true
+            });
+
+            this.btnChange = new Common.UI.Button({
+                cls: 'btn-text-split-default',
+                caption: this.textChange,
+                split: true,
+                width: 110,
+                disabled: true,
+                menu        : new Common.UI.Menu({
+                    style       : 'min-width: 110px',
+                    items: [
+                        {
+                            caption: this.textChange,
+                            value: 0
+                        },
+                        {
+                            caption: this.textChangeAll,
+                            value: 1,
+                            disabled: true
+                        }
+                        ]
+                })
+            });
+            this.btnChange.render( $('#spellcheck-change')) ;
+
+            this.btnIgnore = new Common.UI.Button({
+                cls: 'btn-text-split-default',
+                caption: this.textIgnore,
+                split: true,
+                width: 110,
+                disabled: true,
+                menu        : new Common.UI.Menu({
+                    style       : 'min-width: 110px;',
+                    items: [
+                        {
+                            caption: this.textIgnore,
+                            value: 0
+                        },
+                        {
+                            caption: this.textIgnoreAll,
+                            value: 1,
+                            disabled: true
+                        }
+                    ]
+                })
+            });
+            this.btnIgnore.render( $('#spellcheck-ignore')) ;
+
+            this.cmbDictionaryLanguage = new Common.UI.ComboBox({
+                el          : $('#spellcheck-dictionary-language'),
+                style       : 'width: 100%',
+                menuStyle   : 'width: 100%;max-height: 163px;',
+                editable    : false,
+                cls         : 'input-group-nr',
+                scroller    : {
+                    suppressScrollX: true
+                }
+            });
+
+            this.btnToDictionary = new Common.UI.Button({
+                el: $('#spellcheck-add-to-dictionary'),
+                disabled    : true
+            });
+
+            this.lblComplete = this.$el.find('#spellcheck-complete');
+            this.trigger('render:after', this);
+
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: this.$el.find('#spellcheck-box'),
+                    suppressScrollX: true
+                });
+            }
+
+            return this;
+        },
+
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            this.fireEvent('show', this );
+        },
+
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+            this.fireEvent('hide', this );
+        },
+
+        ChangeSettings: function(props) {
+        },
+
+        txtSpelling: 'Spelling',
+        noSuggestions: 'No spelling suggestions',
+        textChange: 'Change',
+        textChangeAll: 'Change All',
+        textIgnore: 'Ignore',
+        textIgnoreAll: 'Ignore All',
+        txtAddToDictionary: 'Add To Dictionary',
+        txtDictionaryLanguage: 'Dictionary Language',
+        txtComplete: 'Spellcheck has been complete',
+        txtNextTip: 'Go to the next word'
+
+    }, SSE.Views.Spellcheck || {}));
+});

apps/spreadsheeteditor/main/app_dev.js

@@ -142,6 +142,7 @@ require([
             'Print',
             'Toolbar',
             'Statusbar',
+            'Spellcheck',
             'RightMenu',
             'LeftMenu',
             'Main',
@@ -164,6 +165,7 @@ require([
         'spreadsheeteditor/main/app/controller/CellEditor',
         'spreadsheeteditor/main/app/controller/Toolbar',
         'spreadsheeteditor/main/app/controller/Statusbar',
+        'spreadsheeteditor/main/app/controller/Spellcheck',
         'spreadsheeteditor/main/app/controller/RightMenu',
         'spreadsheeteditor/main/app/controller/LeftMenu',
         'spreadsheeteditor/main/app/controller/Main',

apps/spreadsheeteditor/main/locale/en.json

@@ -1720,6 +1720,7 @@
   "SSE.Views.LeftMenu.tipSupport": "Feedback & Support",
   "SSE.Views.LeftMenu.txtDeveloper": "DEVELOPER MODE",
   "SSE.Views.LeftMenu.txtTrial": "TRIAL MODE",
+  "SSE.Views.LeftMenu.tipSpellcheck": "Spell Checking",
   "SSE.Views.MainSettingsPrint.okButtonText": "Save",
   "SSE.Views.MainSettingsPrint.strBottom": "Bottom",
   "SSE.Views.MainSettingsPrint.strLandscape": "Landscape",
@@ -2394,5 +2395,15 @@
   "SSE.Views.Top10FilterDialog.txtItems": "Item",
   "SSE.Views.Top10FilterDialog.txtPercent": "Percent",
   "SSE.Views.Top10FilterDialog.txtTitle": "Top 10 AutoFilter",
-  "SSE.Views.Top10FilterDialog.txtTop": "Top"
+  "SSE.Views.Top10FilterDialog.txtTop": "Top",
+  "SSE.Views.Spellcheck.txtSpelling": "Spelling",
+  "SSE.Views.Spellcheck.noSuggestions": "No spelling suggestions",
+  "SSE.Views.Spellcheck.textChange": "Change",
+  "SSE.Views.Spellcheck.textChangeAll": "Change All",
+  "SSE.Views.Spellcheck.textIgnore": "Ignore",
+  "SSE.Views.Spellcheck.textIgnoreAll": "Ignore All",
+  "SSE.Views.Spellcheck.txtAddToDictionary": "Add To Dictionary",
+  "SSE.Views.Spellcheck.txtDictionaryLanguage": "Dictionary Language",
+  "SSE.Views.Spellcheck.txtComplete": "Spellcheck has been complete",
+  "SSE.Views.Spellcheck.txtNextTip": "Go to the next word"
 }

apps/spreadsheeteditor/main/locale/ru.json

@@ -1715,6 +1715,7 @@
   "SSE.Views.LeftMenu.tipSupport": "Обратная связь и поддержка",
   "SSE.Views.LeftMenu.txtDeveloper": "РЕЖИМ РАЗРАБОТЧИКА",
   "SSE.Views.LeftMenu.txtTrial": "ПРОБНЫЙ РЕЖИМ",
+  "SSE.Views.LeftMenu.tipSpellcheck": "Проверка орфографии",
   "SSE.Views.MainSettingsPrint.okButtonText": "Сохранить",
   "SSE.Views.MainSettingsPrint.strBottom": "Снизу",
   "SSE.Views.MainSettingsPrint.strLandscape": "Альбомная",
@@ -2389,5 +2390,15 @@
   "SSE.Views.Top10FilterDialog.txtItems": "Элемент",
   "SSE.Views.Top10FilterDialog.txtPercent": "Процент",
   "SSE.Views.Top10FilterDialog.txtTitle": "Наложение условия по списку",
-  "SSE.Views.Top10FilterDialog.txtTop": "Наибольшие"
+  "SSE.Views.Top10FilterDialog.txtTop": "Наибольшие",
+  "SSE.Views.Spellcheck.txtSpelling": "Орфография",
+  "SSE.Views.Spellcheck.noSuggestions": "Вариантов не найдено",
+  "SSE.Views.Spellcheck.textChange": "Заменить",
+  "SSE.Views.Spellcheck.textChangeAll": "Заменить все",
+  "SSE.Views.Spellcheck.textIgnore": "Пропустить",
+  "SSE.Views.Spellcheck.textIgnoreAll": "Пропустить все",
+  "SSE.Views.Spellcheck.txtAddToDictionary": "Добавить в словарь",
+  "SSE.Views.Spellcheck.txtDictionaryLanguage": "Язык словаря",
+  "SSE.Views.Spellcheck.txtComplete": "Проверка орфографии закончена",
+  "SSE.Views.Spellcheck.txtNextTip": "Перейти к следующему слову"
 }

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -7,28 +7,22 @@
 
         .tool-menu-btns {
             border-right: 1px solid @gray-dark;
-
-            .toolbar-btn-icon(btn-menu-file,        61, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-search,      62, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-comments,    63, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-chat,        59, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-about,       58, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-support,     75, @toolbar-icon-size);
-            .toolbar-btn-icon(btn-menu-plugin,      81, @toolbar-icon-size);
-
-            button.notify .btn-menu-chat,
-            button.notify.over > .btn-menu-chat {background-position: -0*@toolbar-icon-size -60*@toolbar-icon-size;}
-            button.notify:active   > .btn-menu-chat {background-position: -1*@toolbar-icon-size -60*@toolbar-icon-size;}
-            button.notify.disabled > .btn-menu-chat {background-position: -2*@toolbar-icon-size -60*@toolbar-icon-size;}
-
-            button.notify .btn-menu-comments,
-            button.notify.over > .btn-menu-comments {background-position: -0*@toolbar-icon-size -2*@toolbar-icon-size;}
-            button.notify:active   > .btn-menu-comments {background-position: -1*@toolbar-icon-size -2*@toolbar-icon-size;}
-            button.notify.disabled > .btn-menu-comments {background-position: -2*@toolbar-icon-size -2*@toolbar-icon-size;}
         }
     }
 }
 
+button.notify .btn-menu-chat {background-position: -0*@toolbar-icon-size -63*@toolbar-icon-size;}
+button.notify .btn-menu-comments {background-position: -0*@toolbar-icon-size -60*@toolbar-icon-size;}
+
+.button-normal-icon(btn-menu-file,        61, @toolbar-icon-size);
+.button-normal-icon(btn-menu-search,      62, @toolbar-icon-size);
+.button-normal-icon(btn-menu-comments,    63, @toolbar-icon-size);
+.button-normal-icon(btn-menu-chat,        59, @toolbar-icon-size);
+.button-normal-icon(btn-menu-about,       58, @toolbar-icon-size);
+.button-normal-icon(btn-menu-support,     75, @toolbar-icon-size);
+.button-normal-icon(btn-menu-plugin,      81, @toolbar-icon-size);
+.button-normal-icon(btn-ic-docspell,      93, @toolbar-icon-size);
+
 #left-menu {
     &+.layout-resizer {
         border-left: 0 none;
@@ -560,3 +554,9 @@
     transform: rotate(180deg);
     cursor: default;
 }
+
+.img-complete {
+    background-position: -42px -234px;
+    height: 16px;
+    width: 16px;
+}

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -5,33 +5,6 @@
         border-left: 1px solid @gray-dark;
         background-color: @gray-light;
         right: 0;
-
-        /*menuText*/
-        .toolbar-btn-icon(btn-menu-text,    64, @toolbar-icon-size);
-
-        /*menuImage*/
-        .toolbar-btn-icon(btn-menu-image,   34, @toolbar-icon-size);
-
-        /*menuChart*/
-        .toolbar-btn-icon(btn-menu-chart,   36, @toolbar-icon-size);
-
-        /*menuShape*/
-        .toolbar-btn-icon(btn-menu-shape,   47, @toolbar-icon-size);
-
-        /*menuTextArt*/
-        .toolbar-btn-icon(btn-menu-textart, 66, @toolbar-icon-size);
-
-        /*menuTable*/
-        .toolbar-btn-icon(btn-menu-table,   80, @toolbar-icon-size);
-
-        /**menuSignature*/
-        .toolbar-btn-icon(btn-menu-signature, 83, @toolbar-icon-size);
-
-        /*menuPivot*/
-        .toolbar-btn-icon(btn-menu-pivot,   87, @toolbar-icon-size);
-
-        /*menuCell*/
-        .toolbar-btn-icon(btn-menu-cell,   88, @toolbar-icon-size);
     }
 }
 
@@ -105,6 +78,27 @@
     }
 }
 
+/*menuText*/
+.button-normal-icon(btn-menu-text,    64, @toolbar-icon-size);
+/*menuImage*/
+.button-normal-icon(btn-menu-image,   34, @toolbar-icon-size);
+/*menuChart*/
+.button-normal-icon(btn-menu-chart,   36, @toolbar-icon-size);
+/*menuShape*/
+.button-normal-icon(btn-menu-shape,   47, @toolbar-icon-size);
+/*menuTextArt*/
+.button-normal-icon(btn-menu-textart, 66, @toolbar-icon-size);
+/*menuTable*/
+.button-normal-icon(btn-menu-table,   80, @toolbar-icon-size);
+/**menuSignature*/
+.button-normal-icon(btn-menu-signature, 83, @toolbar-icon-size);
+/*menuPivot*/
+.button-normal-icon(btn-menu-pivot,   87, @toolbar-icon-size);
+/*menuCell*/
+.button-normal-icon(btn-menu-cell,   88, @toolbar-icon-size);
+
+.button-otherstates-icon2(btn-category, @toolbar-icon-size);
+
 .btn-toolbar:not(.x-huge) .icon:not(svg).btn-borders-small {
     .background-ximage('@{common-image-path}/right-panels/SmallBorders.png', '@{common-image-path}/right-panels/SmallBorders@2x.png', 84px);
 }

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -146,6 +146,9 @@
 .button-normal-icon(btn-border-diagup,    42, @toolbar-icon-size);
 .button-normal-icon(btn-border-diagdown,  43, @toolbar-icon-size);
 
+.button-normal-icon(btn-spellcheck-next,    70, @toolbar-icon-size);
+.button-normal-icon(btn-spellcheck-preview, 72, @toolbar-icon-size);
+
 .button-normal-icon(btn-named-range,      77, @toolbar-icon-size);
 .button-normal-icon(btn-strikeout,        84, @toolbar-icon-size);
 .button-normal-icon(btn-subscript,        85, @toolbar-icon-size);

apps/spreadsheeteditor/sdk_dev_scripts.js

@@ -6,6 +6,7 @@ var sdk_dev_scrpipts = [
 	"../../../../sdkjs/common/commonDefines.js",
 	"../../../../sdkjs/common/docscoapicommon.js",
 	"../../../../sdkjs/common/docscoapi.js",
+    "../../../../sdkjs/common/spellcheckapi.js",
 	"../../../../sdkjs/common/apiCommon.js",
 	"../../../../sdkjs/common/SerializeCommonWordExcel.js",
 	"../../../../sdkjs/common/editorscommon.js",