Merge branch 'develop' into feature/table-of-contents

apps/common/main/lib/component/DataView.js

@@ -395,7 +395,7 @@ define([
             return this.store.where({selected: true});
         },
 
-        onAddItem: function(record, index, opts) {
+        onAddItem: function(record, store, opts) {
             var view = new Common.UI.DataViewItem({
                 template: this.itemTemplate,
                 model: record
@@ -418,7 +418,8 @@ define([
                         innerEl.append(view.render().el);
 
                     innerEl.find('.empty-text').remove();
-                    this.dataViewItems.push(view);
+                    var idx = _.indexOf(this.store.models, record);
+                    this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
 
                     if (record.get('tip')) {
                         var view_el = $(view.el);
@@ -498,6 +499,12 @@ define([
         },
 
         onRemoveItem: function(view, record) {
+            var tip = view.$el.data('bs.tooltip');
+            if (tip) {
+                if (tip.dontShow===undefined)
+                    tip.dontShow = true;
+                (tip.tip()).remove();
+            }
             this.stopListening(view);
             view.stopListening();
 

apps/common/main/lib/component/ListView.js

@@ -67,7 +67,7 @@ define([
                 this.trigger('items:reset', this);
             },
 
-            onAddItem: function(record, index) {
+            onAddItem: function(record, store, opts) {
                 var view = new Common.UI.DataViewItem({
                     template: this.itemTemplate,
                     model: record
@@ -79,7 +79,8 @@ define([
                 if (view && this.innerEl) {
                     this.innerEl.find('.empty-text').remove();
                     if (this.options.simpleAddMode) {
-                        this.innerEl.append(view.render().el)
+                        this.innerEl.append(view.render().el);
+                        this.dataViewItems.push(view);
                     } else {
                         var idx = _.indexOf(this.store.models, record);
                         var innerDivs = this.innerEl.find('> div');
@@ -89,9 +90,8 @@ define([
                         else {
                             (innerDivs.length > 0) ? $(innerDivs[idx]).before(view.render().el) : this.innerEl.append(view.render().el);
                         }
-
+                        this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
                     }
-                    this.dataViewItems.push(view);
                     this.listenTo(view, 'change',  this.onChangeItem);
                     this.listenTo(view, 'remove',  this.onRemoveItem);
                     this.listenTo(view, 'click',   this.onClickItem);

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -60,7 +60,7 @@ define([
                 height      : '100%',
                 documentType: 'spreadsheet',
                 document    : {
-                    url         : '_offline_',
+                    url         : '_chart_',
                     permissions : {
                         edit    : true,
                         download: false

apps/common/main/lib/controller/ExternalMergeEditor.js

@@ -60,7 +60,7 @@ define([
                 height      : '100%',
                 documentType: 'spreadsheet',
                 document    : {
-                    url         : '_offline_',
+                    url         : '_chart_',
                     permissions : {
                         edit    : true,
                         download: false

apps/common/main/lib/controller/Plugins.js

@@ -194,13 +194,22 @@ define([
             if ( me.$toolbarPanelPlugins ) {
                 me.$toolbarPanelPlugins.empty();
 
-                var _group = $('<div class="group"></div>');
+                var _group = $('<div class="group"></div>'),
+                    rank = -1;
                 collection.each(function (model) {
+                    var new_rank = model.get('groupRank');
+                    if (new_rank!==rank && rank>-1) {
+                        _group.appendTo(me.$toolbarPanelPlugins);
+                        $('<div class="separator long"></div>').appendTo(me.$toolbarPanelPlugins);
+                        _group = $('<div class="group"></div>');
+                    }
+
                     var btn = me.panelPlugins.createPluginButton(model);
                     if (btn) {
                         var $slot = $('<span class="slot"></span>').appendTo(_group);
                         btn.render($slot);
                     }
+                    rank = new_rank;
                 });
                 _group.appendTo(me.$toolbarPanelPlugins);
             }

apps/common/main/lib/model/Plugin.js

@@ -84,7 +84,9 @@ define([
                 pluginObj: undefined,
                 allowSelected: false,
                 selected: false,
-                visible: true
+                visible: true,
+                groupName: '',
+                groupRank: 0
             }
         }
     });

apps/common/main/lib/view/Comments.js

@@ -420,7 +420,16 @@ define([
                             } else if (btn.hasClass('btn-inner-edit', false)) {
 
                                 if (record.get('dummy')) {
-                                    t.fireEvent('comment:addDummyComment', [this.getActiveTextBoxVal()]);
+                                    var commentVal = this.getActiveTextBoxVal();
+                                    if (commentVal.length>0)
+                                        t.fireEvent('comment:addDummyComment', [commentVal]);
+                                    else {
+                                        var text = me.$window.find('textarea:not(.user-message)');
+                                        if (text && text.length)
+                                            setTimeout(function(){
+                                                text.focus();
+                                            }, 10);
+                                    }
                                     return;
                                 }
 

apps/common/main/lib/view/Plugins.js

@@ -331,6 +331,11 @@ define([
             return btn;
         },
 
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+            this.fireEvent('hide', this );
+        },
+
         strPlugins: 'Plugins',
         textLoading: 'Loading',
         textStart: 'Start',

apps/common/main/lib/view/ReviewChanges.js

@@ -443,6 +443,12 @@ define([
                 '</div>' +
             '</section>';
 
+        function _click_turnpreview(btn, e) {
+            if (this.appConfig.canReview) {
+                Common.NotificationCenter.trigger('reviewchanges:turn', btn.pressed ? 'on' : 'off');
+            }
+        };
+
         function setEvents() {
             var me = this;
 
@@ -471,12 +477,6 @@ define([
                     me.fireEvent('reviewchange:reject', [menu, item]);
                 });
 
-                function _click_turnpreview(btn, e) {
-                    if (me.appConfig.canReview) {
-                        Common.NotificationCenter.trigger('reviewchanges:turn', btn.pressed ? 'on' : 'off');
-                    }
-                };
-
                 this.btnsTurnReview.forEach(function (button) {
                     button.on('click', _click_turnpreview.bind(me));
                     Common.NotificationCenter.trigger('edit:complete', me);

apps/common/main/resources/less/input.less

@@ -76,3 +76,7 @@ input.error {
 ::-ms-clear {
     display: none;
 }
+
+input[type="password"] {
+    font-size: 16px;
+}

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

@@ -301,5 +301,12 @@
 .button-normal-icon(~'x-huge .btn-ic-history', 34, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-protect', 35, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-signature', 36, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-add-pivot', 37, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-update-pivot', 38, @toolbar-big-icon-size);
 .button-normal-icon(btn-contents-update, 38, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-pivot-layout', 39, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-blank-rows', 43, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-subtotals', 46, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-grand-totals', 52, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-contents', 53, @toolbar-big-icon-size);
+.button-normal-icon(btn-controls,         54, @toolbar-big-icon-size);

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

@@ -72,7 +72,8 @@ define([
                     'hide':    _.bind(this.aboutShowHide, this, true)
                 },
                 'Common.Views.Plugins': {
-                    'plugin:open': _.bind(this.onPluginOpen, this)
+                    'plugin:open': _.bind(this.onPluginOpen, this),
+                    'hide':        _.bind(this.onHidePlugins, this)
                 },
                 'LeftMenu': {
                     'comments:show': _.bind(this.commentsShowHide, this, 'show'),
@@ -406,6 +407,10 @@ define([
             $(this.leftMenu.btnChat.el).blur();
             Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
         },
+
+        onHidePlugins: function() {
+            Common.NotificationCenter.trigger('layout:changed', 'leftmenu');
+        },
         /** coauthoring end **/
 
         onQuerySearch: function(d, w, opts) {

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

@@ -215,6 +215,8 @@ define([
                                 !/area_id/.test(e.target.id) && ($(e.target).parent().find(e.relatedTarget).length<1 || e.target.localName == 'textarea') /* Check if focus in combobox goes from input to it's menu button or menu items, or from comment editing area to Ok/Cancel button */
                                 && (e.relatedTarget.localName != 'input' || !/form-control/.test(e.relatedTarget.className)) /* Check if focus goes to text input with class "form-control" */
                                 && (e.relatedTarget.localName != 'textarea' || /area_id/.test(e.relatedTarget.id))) /* Check if focus goes to textarea, but not to "area_id" */ {
+                                if (Common.Utils.isIE && e.originalEvent && e.originalEvent.target && /area_id/.test(e.originalEvent.target.id) && (e.originalEvent.target === e.originalEvent.srcElement))
+                                    return;
                                 me.api.asc_enableKeyEvents(true);
                                 if (/msg-reply/.test(e.target.className))
                                     me.dontCloseDummyComment = false;
@@ -678,7 +680,7 @@ define([
                     case Asc.c_oAscAsyncAction['ForceSaveButton']:
                         clearTimeout(this._state.timerSave);
                         force = true;
-                        title   = (!this.appOptions.isOffline) ? this.saveTitleText : '';
+                        title   = this.saveTitleText;
                         text    = (!this.appOptions.isOffline) ? this.saveTextText : '';
                         break;
 
@@ -904,6 +906,7 @@ define([
                 pluginsController.setApi(me.api);
                 me.requestPlugins('../../../../plugins.json');
                 me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me));
+                me.api.asc_registerCallback('asc_onPluginsReset', _.bind(me.resetPluginsList, me));
 
                 navigationController.setApi(me.api);
 
@@ -957,7 +960,6 @@ define([
                             me.fillTextArt(me.api.asc_getTextArtPreviews());
 
                             Common.NotificationCenter.trigger('document:ready', 'main');
-
                             me.applyLicense();
                         }
                     }, 50);
@@ -1077,7 +1079,7 @@ define([
                 this.appOptions.forcesave      = this.appOptions.canForcesave;
                 this.appOptions.canEditComments= this.appOptions.isOffline || !(typeof (this.editorConfig.customization) == 'object' && this.editorConfig.customization.commentAuthorOnly);
                 this.appOptions.trialMode      = params.asc_getLicenseMode();
-                this.appOptions.canProtect      = this.appOptions.isDesktopApp && this.api.asc_isSignaturesSupport();
+                this.appOptions.canProtect     = this.appOptions.isEdit && this.appOptions.isDesktopApp && this.api.asc_isSignaturesSupport();
 
                 if ( this.appOptions.isLightVersion ) {
                     this.appOptions.canUseHistory =
@@ -2045,15 +2047,27 @@ define([
                                 baseUrl : item.baseUrl,
                                 variations: variationsArr,
                                 currentVariation: 0,
-                                visible: pluginVisible
+                                visible: pluginVisible,
+                                groupName: (item.group) ? item.group.name : '',
+                                groupRank: (item.group) ? item.group.rank : 0
                             }));
                     });
 
                     if ( uiCustomize!==false )  // from ui customizer in editor config or desktop event
                         this.UICustomizePlugins = arrUI;
 
-                    if ( !uiCustomize ) {
+                    if ( !uiCustomize && pluginStore) {
-                        if (pluginStore) pluginStore.add(arr);
+                        arr = pluginStore.models.concat(arr);
+                        arr.sort(function(a, b){
+                            var rank_a = a.get('groupRank'),
+                                rank_b = b.get('groupRank');
+                            if (rank_a < rank_b)
+                                return (rank_a==0) ? 1 : -1;
+                            if (rank_a > rank_b)
+                                return (rank_b==0) ? -1 : 1;
+                            return 0;
+                        });
+                        pluginStore.reset(arr);
                         this.appOptions.canPlugins = !pluginStore.isEmpty();
                     }
                 } else if (!uiCustomize){
@@ -2065,6 +2079,10 @@ define([
                 if (!uiCustomize) this.getApplication().getController('LeftMenu').enablePlugins();
             },
 
+            resetPluginsList: function() {
+                this.getApplication().getCollection('Common.Collections.Plugins').reset();
+            },
+
             leavePageText: 'You have unsaved changes in this document. Click \'Stay on this Page\' then \'Save\' to save them. Click \'Leave this Page\' to discard all the unsaved changes.',
             defaultTitleText: 'ONLYOFFICE Document Editor',
             criticalErrorTitle: 'Error',

apps/documenteditor/main/app/controller/Toolbar.js

@@ -54,7 +54,8 @@ define([
     'documenteditor/main/app/view/PageMarginsDialog',
     'documenteditor/main/app/view/PageSizeDialog',
     'documenteditor/main/app/controller/PageLayout',
-    'documenteditor/main/app/view/CustomColumnsDialog'
+    'documenteditor/main/app/view/CustomColumnsDialog',
+    'documenteditor/main/app/view/ControlSettingsDialog'
 ], function () {
     'use strict';
 
@@ -280,6 +281,7 @@ define([
             toolbar.btnInsertText.on('click',                           _.bind(this.onBtnInsertTextClick, this));
             toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
             toolbar.btnDropCap.menu.on('item:click',                    _.bind(this.onDropCapSelect, this));
+            toolbar.btnContentControls.menu.on('item:click',            _.bind(this.onControlsSelect, this));
             toolbar.mnuDropCapAdvanced.on('click',                      _.bind(this.onDropCapAdvancedClick, this));
             toolbar.btnColumns.menu.on('item:click',                    _.bind(this.onColumnsSelect, this));
             toolbar.btnPageOrient.menu.on('item:click',                 _.bind(this.onPageOrientSelect, this));
@@ -626,7 +628,8 @@ define([
                 in_chart = false,
                 in_equation = false,
                 btn_eq_state = false,
-                in_image = false;
+                in_image = false,
+                in_control = false;
 
             while (++i < selectedObjects.length) {
                 type = selectedObjects[i].get_ObjectType();
@@ -672,6 +675,19 @@ define([
                 }, this);
             }
 
+            in_control = this.api.asc_IsContentControl();
+            var control_props = in_control ? this.api.asc_GetContentControlProperties() : null,
+                lock_type = (in_control&&control_props) ? control_props.get_Lock() : Asc.c_oAscSdtLockType.Unlocked,
+                control_plain = (in_control&&control_props) ? (control_props.get_ContentControlType()==Asc.c_oAscSdtLevelType.Inline) : false;
+            (lock_type===undefined) && (lock_type = Asc.c_oAscSdtLockType.Unlocked);
+
+            if (!paragraph_locked && !header_locked) {
+                toolbar.btnContentControls.menu.items[0].setDisabled(control_plain || lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.ContentLocked);
+                toolbar.btnContentControls.menu.items[1].setDisabled(control_plain || lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.ContentLocked);
+                toolbar.btnContentControls.menu.items[3].setDisabled(!in_control || lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.SdtLocked);
+                toolbar.btnContentControls.menu.items[5].setDisabled(!in_control);
+            }
+
             var need_text_disable = paragraph_locked || header_locked || in_chart;
             if (this._state.textonlycontrolsdisable != need_text_disable) {
                 if (this._state.activated) this._state.textonlycontrolsdisable = need_text_disable;
@@ -700,22 +716,22 @@ define([
                     this.onDropCap(drop_value);
             }
 
-            need_disable = need_disable || !enable_dropcap || in_equation;
+            need_disable = need_disable || !enable_dropcap || in_equation || control_plain;
             toolbar.btnDropCap.setDisabled(need_disable);
 
             if ( !toolbar.btnDropCap.isDisabled() )
                 toolbar.mnuDropCapAdvanced.setDisabled(disable_dropcapadv);
 
-            need_disable = !can_add_table || header_locked || in_equation;
+            need_disable = !can_add_table || header_locked || in_equation || control_plain;
             toolbar.btnInsertTable.setDisabled(need_disable);
 
-            need_disable = toolbar.mnuPageNumCurrentPos.isDisabled() && toolbar.mnuPageNumberPosPicker.isDisabled();
+            need_disable = toolbar.mnuPageNumCurrentPos.isDisabled() && toolbar.mnuPageNumberPosPicker.isDisabled() || control_plain;
             toolbar.mnuInsertPageNum.setDisabled(need_disable);
 
-            need_disable = paragraph_locked || header_locked || in_header || in_image || in_equation && !btn_eq_state || this.api.asc_IsCursorInFootnote();
+            need_disable = paragraph_locked || header_locked || in_header || in_image || in_equation && !btn_eq_state || this.api.asc_IsCursorInFootnote() || in_control;
             toolbar.btnsPageBreak.disable(need_disable);
 
-            need_disable = paragraph_locked || header_locked || !can_add_image || in_equation;
+            need_disable = paragraph_locked || header_locked || !can_add_image || in_equation || control_plain;
             toolbar.btnInsertImage.setDisabled(need_disable);
             toolbar.btnInsertShape.setDisabled(need_disable);
             toolbar.btnInsertText.setDisabled(need_disable);
@@ -726,10 +742,10 @@ define([
                 this._state.in_chart = in_chart;
             }
 
-            need_disable = in_chart && image_locked || !in_chart && need_disable;
+            need_disable = in_chart && image_locked || !in_chart && need_disable || control_plain;
             toolbar.btnInsertChart.setDisabled(need_disable);
 
-            need_disable = paragraph_locked || header_locked || in_chart || !can_add_image&&!in_equation;
+            need_disable = paragraph_locked || header_locked || in_chart || !can_add_image&&!in_equation || control_plain;
             toolbar.btnInsertEquation.setDisabled(need_disable);
 
             need_disable = paragraph_locked || header_locked || in_equation;
@@ -738,8 +754,7 @@ define([
 
             toolbar.btnEditHeader.setDisabled(in_equation);
 
-
+            need_disable = paragraph_locked || header_locked || in_image || control_plain;
-            need_disable = paragraph_locked || header_locked || in_image;
             if (need_disable != toolbar.btnColumns.isDisabled())
                 toolbar.btnColumns.setDisabled(need_disable);
 
@@ -1598,6 +1613,39 @@ define([
             }
         },
 
+        onControlsSelect: function(menu, item) {
+            if (item.value == 'settings' || item.value == 'remove') {
+                if (this.api.asc_IsContentControl()) {
+                    var props = this.api.asc_GetContentControlProperties();
+                    if (props) {
+                        var id = props.get_InternalId();
+                        if (item.value == 'settings') {
+                            var me = this;
+                            (new DE.Views.ControlSettingsDialog({
+                                props: props,
+                                handler: function(result, value) {
+                                    if (result == 'ok') {
+                                        me.api.asc_SetContentControlProperties(value, id);
+                                    }
+
+                                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                                }
+                            })).show();
+
+                        } else {
+                            this.api.asc_RemoveContentControlWrapper(id);
+                            Common.component.Analytics.trackEvent('ToolBar', 'Remove Content Control');
+                        }
+                    }
+                }
+            } else {
+                this.api.asc_AddContentControl(item.value);
+                Common.component.Analytics.trackEvent('ToolBar', 'Add Content Control');
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         onColumnsSelect: function(menu, item) {
             if (_.isUndefined(item.value))
                 return;

apps/documenteditor/main/app/template/Toolbar.template

@@ -139,6 +139,10 @@
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-btn-dropcap"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-controls"></span>
+                </div>
             </section>
             <section class="panel" data-tab="layout">
                 <div class="group">

apps/documenteditor/main/app/view/ControlSettingsDialog.js

@@ -0,0 +1,212 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+
+/**
+ *  ControlSettingsDialog.js.js
+ *
+ *  Created by Julia Radzhabova on 12.12.2017
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/CheckBox',
+    'common/main/lib/component/InputField',
+    'common/main/lib/view/AdvancedSettingsWindow'
+], function () { 'use strict';
+
+    DE.Views.ControlSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 300,
+            height: 275
+        },
+
+        initialize : function(options) {
+            var me = this;
+
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: [
+                    '<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
+                        '<div class="content-panel" style="padding: 0 5px;"><div class="inner-content">',
+                            '<div class="settings-panel active">',
+                                '<table cols="1" style="width: 100%;">',
+                                '<tr>',
+                                    '<td class="padding-large">',
+                                        '<label class="input-label">', me.textName, '</label>',
+                                        '<div id="control-settings-txt-name"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-large">',
+                                        '<label class="input-label">', me.textTag, '</label>',
+                                        '<div id="control-settings-txt-tag"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-small">',
+                                        '<label class="header">', me.textLock, '</label>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-small">',
+                                        '<div id="control-settings-chb-lock-delete"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '<tr>',
+                                    '<td class="padding-small">',
+                                        '<div id="control-settings-chb-lock-edit"></div>',
+                                    '</td>',
+                                '</tr>',
+                                '</table>',
+                            '</div></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="footer center">',
+                    '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + me.okButtonText + '</button>',
+                    '<button class="btn normal dlg-btn" result="cancel">' + me.cancelButtonText + '</button>',
+                    '</div>'
+                ].join('')
+            }, options);
+
+            this.handler    = options.handler;
+            this.props      = options.props;
+
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+
+            this.txtName = new Common.UI.InputField({
+                el          : $('#control-settings-txt-name'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : ''
+            });
+
+            this.txtTag = new Common.UI.InputField({
+                el          : $('#control-settings-txt-tag'),
+                allowBlank  : true,
+                validateOnChange: false,
+                validateOnBlur: false,
+                style       : 'width: 100%;',
+                value       : ''
+            });
+
+            this.chLockDelete = new Common.UI.CheckBox({
+                el: $('#control-settings-chb-lock-delete'),
+                labelText: this.txtLockDelete
+            });
+
+            this.chLockEdit = new Common.UI.CheckBox({
+                el: $('#control-settings-chb-lock-edit'),
+                labelText: this.txtLockEdit
+            });
+
+            this.afterRender();
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        show: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+        },
+
+        _setDefaults: function (props) {
+            if (props) {
+                var val = props.get_Alias();
+                this.txtName.setValue(val ? val : '');
+
+                val = props.get_Tag();
+                this.txtTag.setValue(val ? val : '');
+
+                val = props.get_Lock();
+                (val===undefined) && (val = Asc.c_oAscSdtLockType.Unlocked);
+                this.chLockDelete.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked);
+                this.chLockEdit.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.ContentLocked);
+            }
+        },
+
+        getSettings: function () {
+            var props   = new AscCommon.CContentControlPr();
+
+
+            props.put_Alias(this.txtName.getValue());
+            props.put_Tag(this.txtTag.getValue());
+
+
+            var lock = Asc.c_oAscSdtLockType.Unlocked;
+
+            if (this.chLockDelete.getValue()=='checked' && this.chLockEdit.getValue()=='checked')
+                lock = Asc.c_oAscSdtLockType.SdtContentLocked;
+            else if (this.chLockDelete.getValue()=='checked')
+                lock = Asc.c_oAscSdtLockType.SdtLocked;
+            else if (this.chLockEdit.getValue()=='checked')
+                lock = Asc.c_oAscSdtLockType.ContentLocked;
+            props.put_Lock(lock);
+
+            return props;
+        },
+
+        onDlgBtnClick: function(event) {
+            var me = this;
+            var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
+            if (state == 'ok') {
+                this.handler && this.handler.call(this, state, this.getSettings());
+            }
+
+            this.close();
+        },
+
+        onPrimary: function() {
+            return true;
+        },
+
+        textTitle:    'Content Control Settings',
+        textName: 'Title',
+        textTag: 'Tag',
+        txtLockDelete: 'Content control cannot be deleted',
+        txtLockEdit: 'Contents cannot be edited',
+        textLock: 'Locking',
+        cancelButtonText: 'Cancel',
+        okButtonText: 'Ok'
+
+    }, DE.Views.ControlSettingsDialog || {}))
+});

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -52,7 +52,8 @@ define([
     'documenteditor/main/app/view/DropcapSettingsAdvanced',
     'documenteditor/main/app/view/HyperlinkSettingsDialog',
     'documenteditor/main/app/view/ParagraphSettingsAdvanced',
-    'documenteditor/main/app/view/TableSettingsAdvanced'
+    'documenteditor/main/app/view/TableSettingsAdvanced',
+    'documenteditor/main/app/view/ControlSettingsDialog'
 ], function ($, _, Backbone, gateway) { 'use strict';
 
     DE.Views.DocumentHolder =  Backbone.View.extend(_.extend({
@@ -1793,6 +1794,28 @@ define([
             me.fireEvent('editcomplete', me);
         },
 
+        onControlsSelect: function(item, e) {
+            var props = this.api.asc_GetContentControlProperties();
+            if (props) {
+                if (item.value == 'settings') {
+                    var me = this;
+                    (new DE.Views.ControlSettingsDialog({
+                        props: props,
+                        handler: function (result, value) {
+                            if (result == 'ok') {
+                                me.api.asc_SetContentControlProperties(value, props.get_InternalId());
+                            }
+
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                        }
+                    })).show();
+                } else if (item.value == 'remove') {
+                    this.api.asc_RemoveContentControlWrapper(props.get_InternalId());
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         createDelayedElementsViewer: function() {
             var me = this;
 
@@ -2485,6 +2508,27 @@ define([
                 })
             });
 
+            var menuTableRemoveControl = new Common.UI.MenuItem({
+                caption: me.textRemove,
+                value: 'remove'
+            }).on('click', _.bind(me.onControlsSelect, me));
+
+            var menuTableControlSettings = new Common.UI.MenuItem({
+                    caption: me.textSettings,
+                    value: 'settings'
+            }).on('click', _.bind(me.onControlsSelect, me));
+
+            var menuTableControl = new Common.UI.MenuItem({
+                caption: me.textContentControls,
+                menu        : new Common.UI.Menu({
+                    menuAlign: 'tl-tr',
+                    items   : [
+                        menuTableRemoveControl,
+                        menuTableControlSettings
+                    ]
+                })
+            });
+
             /** coauthoring begin **/
             var menuAddCommentTable = new Common.UI.MenuItem({
                 caption     : me.addCommentText
@@ -2744,6 +2788,14 @@ define([
                     } else
                         me.clearEquationMenu(false, 6);
                     menuEquationSeparatorInTable.setVisible(isEquation && eqlen>0);
+
+                    var in_control = me.api.asc_IsContentControl();
+                    menuTableControl.setVisible(in_control);
+                    if (in_control) {
+                        var control_props = me.api.asc_GetContentControlProperties(),
+                            lock_type = (control_props) ? control_props.get_Lock() : Asc.c_oAscSdtLockType.Unlocked;
+                        menuTableRemoveControl.setDisabled(lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.SdtLocked);
+                    }
                 },
                 items: [
                     me.menuSpellCheckTable,
@@ -2864,6 +2916,7 @@ define([
                     menuAddHyperlinkTable,
                     menuHyperlinkTable,
                     menuHyperlinkSeparator,
+                    menuTableControl,
                     menuParagraphAdvancedInTable
                 ]
             }).on('hide:after', function(menu, e, isFromInputControl) {
@@ -3119,6 +3172,21 @@ define([
                 caption     : '--'
             });
 
+            var menuParaRemoveControl = new Common.UI.MenuItem({
+                caption: me.textRemoveControl,
+                value: 'remove'
+            }).on('click', _.bind(me.onControlsSelect, me));
+
+            var menuParaControlSettings = new Common.UI.MenuItem(
+            {
+                caption: me.textEditControls,
+                value: 'settings'
+            }).on('click', _.bind(me.onControlsSelect, me));
+
+            var menuParaControlSeparator = new Common.UI.MenuItem({
+                caption     : '--'
+            });
+
             this.textMenu = new Common.UI.Menu({
                 initMenu: function(value){
                     var isInShape = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ShapeProperties()));
@@ -3219,6 +3287,16 @@ define([
                     if (me.mode.canEditStyles && !isInChart) {
                         me.menuStyleUpdate.setCaption(me.updateStyleText.replace('%1', DE.getController('Main').translationTable[window.currentStyleName] || window.currentStyleName));
                     }
+
+                    var in_control = me.api.asc_IsContentControl();
+                    menuParaRemoveControl.setVisible(in_control);
+                    menuParaControlSettings.setVisible(in_control);
+                    menuParaControlSeparator.setVisible(in_control);
+                    if (in_control) {
+                        var control_props = me.api.asc_GetContentControlProperties(),
+                            lock_type = (control_props) ? control_props.get_Lock() : Asc.c_oAscSdtLockType.Unlocked;
+                        menuParaRemoveControl.setDisabled(lock_type==Asc.c_oAscSdtLockType.SdtContentLocked || lock_type==Asc.c_oAscSdtLockType.SdtLocked);
+                    }
                 },
                 items: [
                     me.menuSpellPara,
@@ -3233,6 +3311,9 @@ define([
                     menuParaPaste,
                     { caption: '--' },
                     menuEquationSeparator,
+                    menuParaRemoveControl,
+                    menuParaControlSettings,
+                    menuParaControlSeparator,
                     menuParagraphBreakBefore,
                     menuParagraphKeepLines,
                     menuParagraphVAlign,
@@ -3551,7 +3632,12 @@ define([
         strSetup: 'Signature Setup',
         strDelete: 'Remove Signature',
         txtOverwriteCells: 'Overwrite cells',
-        textNest: 'Nest table'
+        textNest: 'Nest table',
+        textContentControls: 'Content control',
+        textRemove: 'Remove',
+        textSettings: 'Settings',
+        textRemoveControl: 'Remove content control',
+        textEditControls: 'Content control settings'
 
     }, DE.Views.DocumentHolder || {}));
 });

apps/documenteditor/main/app/view/FileMenu.js

@@ -280,7 +280,7 @@ define([
                 }
             }
 
-            if (this.mode.isDesktopApp && this.mode.isOffline) {
+            if (this.mode.isEdit && this.mode.isDesktopApp && this.mode.isOffline) {
 //                this.$el.find('#fm-btn-back').hide();
                 this.panels['protect'] = (new DE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
                 this.panels['protect'].setMode(this.mode);
@@ -378,6 +378,6 @@ define([
         textDownload            : 'Download',
         btnRenameCaption        : 'Rename...',
         btnCloseMenuCaption     : 'Close Menu',
-        btnProtectCaption: 'Protect\\Sign'
+        btnProtectCaption: 'Protect'
     }, DE.Views.FileMenu || {}));
 });

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -953,8 +953,8 @@ define([
 
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
-                '<div id="id-help-contents" style="position: absolute; width:200px; top: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 200px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
@@ -965,33 +965,56 @@ define([
             this.urlPref = 'resources/help/en/';
 
             this.en_data = [
-                {src: "UsageInstructions/SetPageParameters.htm", name: "Set page parameters", headername: "Usage Instructions", selected: true},
+                {"src": "ProgramInterface/ProgramInterface.htm", "name": "Introducing Document Editor user interface", "headername": "Program Interface"},
-                {src: "UsageInstructions/CopyPasteUndoRedo.htm", name: "Copy/paste text passages, undo/redo your actions"},
+                {"src": "ProgramInterface/FileTab.htm", "name": "File tab"},
-                {src: "UsageInstructions/NonprintingCharacters.htm", name: "Show/hide nonprinting characters"},
+                {"src": "ProgramInterface/HomeTab.htm", "name": "Home Tab"},
-                {src: "UsageInstructions/AlignText.htm", name: "Align your text in a line or paragraph"},
+                {"src": "ProgramInterface/InsertTab.htm", "name": "Insert tab"},
-                {src: "UsageInstructions/FormattingPresets.htm", name: "Apply formatting presets"},
+                {"src": "ProgramInterface/LayoutTab.htm", "name": "Layout tab"},
-                {src: "UsageInstructions/BackgroundColor.htm", name: "Select background color for a paragraph"},
+                {"src": "ProgramInterface/ReviewTab.htm", "name": "Review tab"},
-                {src: "UsageInstructions/ParagraphIndents.htm", name: "Change paragraph indents"},
+                {"src": "ProgramInterface/PluginsTab.htm", "name": "Plugins tab"},
-                {src: "UsageInstructions/LineSpacing.htm", name: "Set paragraph line spacing"},
+                {"src": "UsageInstructions/ChangeColorScheme.htm", "name": "Change color scheme", "headername": "Basic operations"},
-                {src: "UsageInstructions/PageBreaks.htm", name: "Insert page breaks"},
+                {"src": "UsageInstructions/CopyPasteUndoRedo.htm", "name": "Copy/paste text passages, undo/redo your actions"},
-                {src: "UsageInstructions/AddBorders.htm", name: "Add Borders"},
+                {"src": "UsageInstructions/OpenCreateNew.htm", "name": "Create a new document or open an existing one"},
-                {src: "UsageInstructions/FontTypeSizeColor.htm", name: "Set font type, size, and color"},
+                {"src": "UsageInstructions/SetPageParameters.htm", "name": "Set page parameters", "headername": "Page formatting"},
-                {src: "UsageInstructions/DecorationStyles.htm", name: "Apply font decoration styles"},
+                {"src": "UsageInstructions/NonprintingCharacters.htm", "name": "Show/hide nonprinting characters" },
-                {src: "UsageInstructions/CopyClearFormatting.htm", name: "Copy/clear text formatting"},
+                {"src": "UsageInstructions/SectionBreaks.htm", "name": "Insert section breaks" },
-                {src: "UsageInstructions/CreateLists.htm", name: "Create lists"},
+                {"src": "UsageInstructions/InsertHeadersFooters.htm", "name": "Insert headers and footers"},
-                {src: "UsageInstructions/InsertTables.htm", name: "Insert tables"},
+                {"src": "UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers"},
-                {src: "UsageInstructions/InsertImages.htm", name: "Insert images"},
+                {"src": "UsageInstructions/InsertFootnotes.htm", "name": "Insert footnotes"},
-                {src: "UsageInstructions/AddHyperlinks.htm", name: "Add hyperlinks"},
+                {"src": "UsageInstructions/AlignText.htm", "name": "Align your text in a paragraph", "headername": "Paragraph formatting"},
-                {src: "UsageInstructions/InsertHeadersFooters.htm", name: "Insert headers and footers"},
+                {"src": "UsageInstructions/BackgroundColor.htm", "name": "Select background color for a paragraph"},
-                {src: "UsageInstructions/InsertPageNumbers.htm", name: "Insert page numbers"},
+                {"src": "UsageInstructions/ParagraphIndents.htm", "name": "Change paragraph indents"},
-                {src: "UsageInstructions/ViewDocInfo.htm", name: "View document information"},
+                {"src": "UsageInstructions/LineSpacing.htm", "name": "Set paragraph line spacing"},
-                {src: "UsageInstructions/SavePrintDownload.htm", name: "Save/print/download your document"},
+                {"src": "UsageInstructions/PageBreaks.htm", "name": "Insert page breaks"},
-                {src: "UsageInstructions/OpenCreateNew.htm", name: "Create a new document or open an existing one"},
+                {"src": "UsageInstructions/AddBorders.htm", "name": "Add borders"},
-                {src: "HelpfulHints/About.htm", name: "About ONLYOFFICE Document Editor", headername: "Helpful Hints"},
+                {"src": "UsageInstructions/SetTabStops.htm", "name": "Set tab stops"},
-                {src: "HelpfulHints/SupportedFormats.htm", name: "Supported Formats of Electronic Documents"},
+                {"src": "UsageInstructions/CreateLists.htm", "name": "Create lists"},
-                {src: "HelpfulHints/Navigation.htm", name: "Navigation through Your Document"},
+                {"src": "UsageInstructions/FormattingPresets.htm", "name": "Apply formatting styles", "headername": "Text formatting"},
-                {src: "HelpfulHints/Search.htm", name: "Search Function"},
+                {"src": "UsageInstructions/FontTypeSizeColor.htm", "name": "Set font type, size, and color"},
-                {src: "HelpfulHints/KeyboardShortcuts.htm", name: "Keyboard Shortcuts"}
+                {"src": "UsageInstructions/DecorationStyles.htm", "name": "Apply font decoration styles"},
+                {"src": "UsageInstructions/CopyClearFormatting.htm", "name": "Copy/clear text formatting" },
+                {"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
+                {"src": "UsageInstructions/InsertDropCap.htm", "name": "Insert a drop cap"},
+                {"src": "UsageInstructions/InsertTables.htm", "name": "Insert tables", "headername": "Operations on objects"},
+                {"src": "UsageInstructions/InsertImages.htm", "name": "Insert images"},
+                {"src": "UsageInstructions/InsertAutoshapes.htm", "name": "Insert autoshapes"},
+                {"src": "UsageInstructions/InsertCharts.htm", "name": "Insert charts" },
+                {"src": "UsageInstructions/InsertTextObjects.htm", "name": "Insert text objects" },
+                {"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Align and arrange objects on a page" },
+                {"src": "UsageInstructions/ChangeWrappingStyle.htm", "name": "Change wrapping style" },
+                {"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge", "headername": "Mail Merge"},
+                {"src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations", "headername": "Math equations"},
+                {"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative document editing", "headername": "Document co-editing"},
+                {"src": "HelpfulHints/Review.htm", "name": "Document Review"},
+                {"src": "UsageInstructions/ViewDocInfo.htm", "name": "View document information", "headername": "Tools and settings"},
+                {"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/download/print your document" },
+                {"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced settings of Document Editor"},
+                {"src": "HelpfulHints/Navigation.htm", "name": "View settings and navigation tools"},
+                {"src": "HelpfulHints/Search.htm", "name": "Search and replace function"},
+                {"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
+                {"src": "HelpfulHints/About.htm", "name": "About Document Editor", "headername": "Helpful hints"},
+                {"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported formats of electronic documents" },
+                {"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard shortcuts"}
             ];
 
             if (Common.Utils.isIE) {
@@ -1251,7 +1274,7 @@ define([
         },
 
         strProtect: 'Protect Document',
-        strSignature: 'Signature',
+        strSignature: 'With Signature',
         txtView: 'View signatures',
         txtEdit: 'Edit document',
         txtSigned: 'Valid signatures has been added to the document. The document is protected from editing.',
@@ -1259,7 +1282,7 @@ define([
         txtRequestedSignatures: 'This document needs to be signed.',
         notcriticalErrorTitle: 'Warning',
         txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?',
-        strEncrypt: 'Password',
+        strEncrypt: 'With Password',
         txtEncrypted: 'This document has been protected by password'
 
     }, DE.Views.FileMenuPanels.ProtectDoc || {}));

apps/documenteditor/main/app/view/SignatureSettings.js

@@ -168,10 +168,12 @@ define([
             var me = this,
                 requestedSignatures = [],
                 validSignatures = [],
-                invalidSignatures = [];
+                invalidSignatures = [],
+                name_index = 1;
 
             _.each(requested, function(item, index){
-                requestedSignatures.push({name: item.asc_getSigner1(), guid: item.asc_getGuid(), requested: true});
+                var name = item.asc_getSigner1();
+                requestedSignatures.push({name: (name !== "") ? name : (me.strSigner + " " + name_index++) , guid: item.asc_getGuid(), requested: true});
             });
             _.each(valid, function(item, index){
                 var item_date = item.asc_getDate();
@@ -381,7 +383,8 @@ define([
         txtContinueEditing: 'Edit anyway',
         notcriticalErrorTitle: 'Warning',
         txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?',
-        strDelete: 'Remove Signature'
+        strDelete: 'Remove Signature',
+        strSigner: 'Signer'
 
     }, DE.Views.SignatureSettings || {}));
 });

apps/documenteditor/main/app/view/Toolbar.js

@@ -601,6 +601,40 @@ define([
                 });
                 this.paragraphControls.push(this.btnDropCap);
 
+                this.btnContentControls = new Common.UI.Button({
+                    id: 'tlbtn-controls',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-controls',
+                    caption: me.capBtnInsControls,
+                    menu: new Common.UI.Menu({
+                        cls: 'ppm-toolbar',
+                        items: [
+                            {
+                                caption: this.textPlainControl,
+                                iconCls: 'mnu-control-plain',
+                                value: Asc.c_oAscSdtLevelType.Inline
+                            },
+                            {
+                                caption: this.textRichControl,
+                                iconCls: 'mnu-control-rich',
+                                value: Asc.c_oAscSdtLevelType.Block
+                            },
+                            {caption: '--'},
+                            {
+                                caption: this.textRemoveControl,
+                                iconCls: 'mnu-control-remove',
+                                value: 'remove'
+                            },
+                            {caption: '--'},
+                            {
+                                caption: this.mniEditControls,
+                                value: 'settings'
+                            }
+                        ]
+                    })
+                });
+                this.paragraphControls.push(this.btnContentControls);
+
                 this.btnColumns = new Common.UI.Button({
                     id: 'tlbtn-columns',
                     cls: 'btn-toolbar x-huge icon-top',
@@ -1240,6 +1274,7 @@ define([
                 _injectComponent('#slot-btn-instext', this.btnInsertText);
                 _injectComponent('#slot-btn-instextart', this.btnInsertTextArt);
                 _injectComponent('#slot-btn-dropcap', this.btnDropCap);
+                _injectComponent('#slot-btn-controls', this.btnContentControls);
                 _injectComponent('#slot-btn-columns', this.btnColumns);
                 _injectComponent('#slot-btn-editheader', this.btnEditHeader);
                 _injectComponent('#slot-btn-insshape', this.btnInsertShape);
@@ -1494,6 +1529,7 @@ define([
                 this.btnInsertShape.updateHint(this.tipInsertShape);
                 this.btnInsertEquation.updateHint(this.tipInsertEquation);
                 this.btnDropCap.updateHint(this.tipDropCap);
+                this.btnContentControls.updateHint(this.tipControls);
                 this.btnColumns.updateHint(this.tipColumns);
                 this.btnPageOrient.updateHint(this.tipPageOrient);
                 this.btnPageSize.updateHint(this.tipPageSize);
@@ -2396,7 +2432,13 @@ define([
             textSurface: 'Surface',
             textTabCollaboration: 'Collaboration',
             textTabProtect: 'Protection',
-            textTabLinks: 'Links'
+            textTabLinks: 'Links',
+            capBtnInsControls: 'Content Control',
+            textRichControl: 'Rich text',
+            textPlainControl: 'Plain text',
+            textRemoveControl: 'Remove',
+            mniEditControls: 'Settings',
+            tipControls: 'Insert content control'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/resources/help/editor.css

@@ -0,0 +1,132 @@
+body
+{
+font-family: Tahoma, Arial, Verdana;
+font-size: 12px;
+color: #666;
+background: #fff;
+}
+
+img
+{
+border: none;
+vertical-align: middle;
+}
+
+img.floatleft 
+{ 
+float: left;
+margin-right: 30px;
+margin-bottom: 10px;
+}
+
+img.floatright 
+{ 
+float: right;
+margin-left: 30px;
+margin-bottom: 10px;
+}
+
+li
+{
+line-height: 2em;
+}
+
+.mainpart
+{
+margin: 0;
+padding: 10px 20px;
+}
+
+.mainpart h1
+{
+font-size: 16px;
+font-weight: bold;
+}
+
+table,
+tr,
+td,
+th
+{
+border-left: 0;
+border-right: 0;
+border-bottom: solid 1px #E4E4E4;
+border-collapse: collapse;
+padding: 8px;
+text-align: left;
+}
+
+table
+{
+margin: 20px 0;
+width: 100%;
+}
+
+th
+{
+font-size: 14px;
+font-weight: bold;
+padding-top: 20px;
+}
+
+td.function
+{
+width: 35%;
+}
+
+td.shortfunction
+{
+width: 20%;
+}
+
+td.combination
+{
+width: 15%;
+}
+
+td.description
+{
+width: 50%;
+}
+
+td.longdescription
+{
+width: 80%;
+}
+
+.note
+{
+background: #F4F4F4 url(images/help.png) no-repeat 7px 5px;
+font-size: 11px;
+padding: 10px 20px 10px 37px;
+width: 90%;
+margin: 10px 0;
+line-height: 1em;
+min-height: 14px;
+}
+
+hr
+{
+height: 1px;
+width: 90%;
+text-align: left;
+margin: 10px 0 15px;
+color: #E4E4E4;
+background-color: #E4E4E4;
+border: 0;
+clear: both;
+}
+
+a
+{
+color: #7496DD;
+text-decoration: underline;
+}
+
+a:hover
+{
+text-decoration: none;
+}
+a.sup_link {
+text-decoration: none;	
+}

apps/documenteditor/main/resources/help/en/Contents.json

@@ -1,45 +1,52 @@
 [
-	{"src": "UsageInstructions/SetPageParameters.htm", "name": "Set page parameters", "headername": "Usage Instructions"},
+    {"src": "ProgramInterface/ProgramInterface.htm", "name": "Introducing Document Editor user interface", "headername": "Program Interface"},
-	{"src": "UsageInstructions/ChangeColorScheme.htm", "name": "Change color scheme"},
+    {"src": "ProgramInterface/FileTab.htm", "name": "File tab"},
-	{"src": "UsageInstructions/CopyPasteUndoRedo.htm", "name": "Copy/paste text passages, undo/redo your actions"},
+    {"src": "ProgramInterface/HomeTab.htm", "name": "Home Tab"},
-	{"src": "UsageInstructions/NonprintingCharacters.htm", "name": "Show/hide nonprinting characters"},
+    {"src": "ProgramInterface/InsertTab.htm", "name": "Insert tab"},
-	{"src": "UsageInstructions/AlignText.htm", "name": "Align your text in a paragraph"},
+    {"src": "ProgramInterface/LayoutTab.htm", "name": "Layout tab"},
-	{"src": "UsageInstructions/FormattingPresets.htm", "name": "Apply formatting styles"},
+    {"src": "ProgramInterface/ReviewTab.htm", "name": "Review tab"},
-	{"src": "UsageInstructions/BackgroundColor.htm", "name": "Select background color for a paragraph"},
+    {"src": "ProgramInterface/PluginsTab.htm", "name": "Plugins tab"},
-	{"src": "UsageInstructions/ParagraphIndents.htm", "name": "Change paragraph indents"},
+    {"src": "UsageInstructions/ChangeColorScheme.htm", "name": "Change color scheme", "headername": "Basic operations"},
-	{"src": "UsageInstructions/LineSpacing.htm", "name": "Set paragraph line spacing"},
+    {"src": "UsageInstructions/CopyPasteUndoRedo.htm", "name": "Copy/paste text passages, undo/redo your actions"},
-	{"src": "UsageInstructions/PageBreaks.htm", "name": "Insert page breaks"},
+    {"src": "UsageInstructions/OpenCreateNew.htm", "name": "Create a new document or open an existing one"},
-	{"src": "UsageInstructions/SectionBreaks.htm", "name": "Insert section breaks"},
+    {"src": "UsageInstructions/SetPageParameters.htm", "name": "Set page parameters", "headername": "Page formatting"},
-	{"src": "UsageInstructions/AddBorders.htm", "name": "Add borders"},
+    {"src": "UsageInstructions/NonprintingCharacters.htm", "name": "Show/hide nonprinting characters" },
-	{"src": "UsageInstructions/FontTypeSizeColor.htm", "name": "Set font type, size, and color"},
+    {"src": "UsageInstructions/SectionBreaks.htm", "name": "Insert section breaks" },
-	{"src": "UsageInstructions/DecorationStyles.htm", "name": "Apply font decoration styles"},
+    {"src": "UsageInstructions/InsertHeadersFooters.htm", "name": "Insert headers and footers"},
-	{"src": "UsageInstructions/CopyClearFormatting.htm", "name": "Copy/clear text formatting"},
+    {"src": "UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers"},
-	{"src": "UsageInstructions/SetTabStops.htm", "name": "Set tab stops"},
+    {"src": "UsageInstructions/InsertFootnotes.htm", "name": "Insert footnotes"},
-	{"src": "UsageInstructions/CreateLists.htm", "name": "Create lists"},
+    {"src": "UsageInstructions/AlignText.htm", "name": "Align your text in a paragraph", "headername": "Paragraph formatting"},
-	{"src": "UsageInstructions/InsertTables.htm", "name": "Insert tables"},
+    {"src": "UsageInstructions/BackgroundColor.htm", "name": "Select background color for a paragraph"},
-	{"src": "UsageInstructions/InsertImages.htm", "name": "Insert images"},
+    {"src": "UsageInstructions/ParagraphIndents.htm", "name": "Change paragraph indents"},
-	{"src": "UsageInstructions/InsertAutoshapes.htm", "name": "Insert autoshapes"},
+    {"src": "UsageInstructions/LineSpacing.htm", "name": "Set paragraph line spacing"},
+    {"src": "UsageInstructions/PageBreaks.htm", "name": "Insert page breaks"},
+    {"src": "UsageInstructions/AddBorders.htm", "name": "Add borders"},
+    {"src": "UsageInstructions/SetTabStops.htm", "name": "Set tab stops"},
+    {"src": "UsageInstructions/CreateLists.htm", "name": "Create lists"},
+    {"src": "UsageInstructions/FormattingPresets.htm", "name": "Apply formatting styles", "headername": "Text formatting"},
+    {"src": "UsageInstructions/FontTypeSizeColor.htm", "name": "Set font type, size, and color"},
+    {"src": "UsageInstructions/DecorationStyles.htm", "name": "Apply font decoration styles"},
+    {"src": "UsageInstructions/CopyClearFormatting.htm", "name": "Copy/clear text formatting" },
+    {"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
+    {"src": "UsageInstructions/InsertDropCap.htm", "name": "Insert a drop cap"},
+    {"src": "UsageInstructions/InsertTables.htm", "name": "Insert tables", "headername": "Operations on objects"},
+    {"src": "UsageInstructions/InsertImages.htm", "name": "Insert images"},
+    {"src": "UsageInstructions/InsertAutoshapes.htm", "name": "Insert autoshapes"},
     {"src": "UsageInstructions/InsertCharts.htm", "name": "Insert charts" },
-    {"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Align and arrange objects on a page" },
-    {"src": "UsageInstructions/ChangeWrappingStyle.htm", "name": "Change wrapping style"},
-	{"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
-	{"src": "UsageInstructions/InsertDropCap.htm", "name": "Insert a drop cap"},
-	{"src": "UsageInstructions/InsertHeadersFooters.htm", "name": "Insert headers and footers"},
-    { "src": "UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers" },
-    {"src": "UsageInstructions/InsertFootnotes.htm", "name": "Insert footnotes" },
-    {"src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations" },
     {"src": "UsageInstructions/InsertTextObjects.htm", "name": "Insert text objects" },
-    {"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge"},
+    {"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Align and arrange objects on a page" },
-	{"src": "UsageInstructions/ViewDocInfo.htm", "name": "View document information"},
+    {"src": "UsageInstructions/ChangeWrappingStyle.htm", "name": "Change wrapping style" },
-	{"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/download/print your document"},
+    {"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge", "headername": "Mail Merge"},
-	{"src": "UsageInstructions/OpenCreateNew.htm", "name": "Create a new document or open an existing one"},
+    {"src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations", "headername": "Math equations"},
-	{"src": "HelpfulHints/About.htm", "name": "About Document Editor", "headername": "Helpful Hints"},
+    {"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative document editing", "headername": "Document co-editing"},
-	{"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported Formats of Electronic Documents"},
+    {"src": "HelpfulHints/Review.htm", "name": "Document Review"},
-	{"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced Settings of Document Editor"},
+    {"src": "UsageInstructions/ViewDocInfo.htm", "name": "View document information", "headername": "Tools and settings"},
-	{"src": "HelpfulHints/Navigation.htm", "name": "View Settings and Navigation Tools"},
+    {"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/download/print your document" },
-	{"src": "HelpfulHints/Search.htm", "name": "Search and Replace Function"},
+    {"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced settings of Document Editor"},
-	{"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative Document Editing"},
+    {"src": "HelpfulHints/Navigation.htm", "name": "View settings and navigation tools"},
-	{"src": "HelpfulHints/Review.htm", "name": "Document Review"},
+    {"src": "HelpfulHints/Search.htm", "name": "Search and replace function"},
-	{"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
+    {"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
-	{"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard Shortcuts"}
+    {"src": "HelpfulHints/About.htm", "name": "About Document Editor", "headername": "Helpful hints"},
+    {"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported formats of electronic documents" },
+    {"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard shortcuts"}
 ]

apps/documenteditor/main/resources/help/en/HelpfulHints/About.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The short description of Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 		<h1>About Document Editor</h1>
 			<p><b>Document Editor</b> is an <span class="onlineDocumentFeatures">online</span> application that lets you look through 
 			and edit documents<span class="onlineDocumentFeatures"> directly in your browser</span>.</p>

apps/documenteditor/main/resources/help/en/HelpfulHints/AdvancedSettings.htm

@@ -5,9 +5,14 @@
     <meta charset="utf-8" />
     <meta name="description" content="The advanced settings of Document Editor" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
+    <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
 <body>
     <div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
         <h1>Advanced Settings of Document Editor</h1>
         <p><b>Document Editor</b> lets you change its advanced settings. To access them, open the <b>File</b> tab at the top toolbar and select the <b>Advanced Settings...</b> option. You can also use the <img alt="Advanced settings icon" src="../images/advanced_settings_icon.png" /> icon in the right upper corner at the <b>Home</b> tab of the top toolbar.</p>
         <p>The advanced settings are:</p>

apps/documenteditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm

@@ -6,9 +6,13 @@
     <meta name="description" content="Tips on collaborative editing" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
     <script type="text/javascript" src="../callback.js"></script>
+    <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
 <body>
     <div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
         <h1>Collaborative Document Editing</h1>
         <p><b>Document Editor</b> offers you the possibility to work at a document collaboratively with other users. This feature includes:</p>
         <ul>
@@ -26,7 +30,7 @@
         <p>When no users are viewing or editing the file, the icon in the editor header will look like <img alt="Manage document access rights icon" src="../images/access_rights.png" /> allowing you to manage the users who have access to the file right from the document: invite new users giving them permissions to edit, read or review the document, or deny some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <img alt="Number of users icon" src="../images/usersnumber.png" />.</p>
         <p>As soon as one of the users saves his/her changes by clicking the <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
         <p>You can specify what changes you want to be highlighted during co-editing if you click the <b>File</b> tab at the top toolbar, select the <b>Advanced Settings...</b> option and choose between <b>none</b>, <b>all</b> and <b>last</b> realtime collaboration changes. Selecting <b>View all</b> changes, all the changes made during the current session will be highlighted. Selecting <b>View last</b> changes, only the changes made since you last time clicked the <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted. Selecting <b>View None</b> changes, changes made during the current session will not be highlighted.</p>
-        <h3>Chat</h3>
+        <h3 id="chat">Chat</h3>
         <p>You can use this tool to coordinate the co-editing process on-the-fly, for example, to arrange with your collaborators about who is doing what, which paragraph you are going to edit now etc.</p>
         <p>The chat messages are stored during one session only. To discuss the document content it is better to use comments which are stored until you decide to delete them.</p>
         <p>To access the chat and leave a message for other users,</p>
@@ -38,7 +42,7 @@
         <p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
         <p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon once again.</p>
         </div>
-                <h3>Comments</h3>
+                <h3 id="comments">Comments</h3>
         <p>To leave a comment,</p>
         <ol>
             <li>select a text passage where you think there is an error or problem,</li>

apps/documenteditor/main/resources/help/en/HelpfulHints/KeyboardShortcuts.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="The keyboard shortcut list used for a faster and easier access to the features of Document Editor using the keyboard." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Keyboard Shortcuts</h1>
 			<table>
 				<tr>

apps/documenteditor/main/resources/help/en/HelpfulHints/Navigation.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of view settings and navigation tools such as zoom, previous/next page buttons" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 		<h1>View Settings and Navigation Tools</h1>
 			<p><b>Document Editor</b> offers several tools to help you view and navigate through your document: zoom, page number indicator etc.</p>
 			<h3>Adjust the View Settings</h3>

apps/documenteditor/main/resources/help/en/HelpfulHints/Review.htm

@@ -5,9 +5,14 @@
     <meta charset="utf-8" />
     <meta name="description" content="Tips on document review option" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
+    <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
 <body>
     <div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
         <h1>Document Review</h1>
         <p>When somebody shares a file with you that has review permissions, you need to use the document <b>Review</b> feature.</p>
         <p>If you are the reviewer, then you can use the <b>Review</b> option to review the document, change the sentences, phrases and other page elements, correct spelling, and do other things to the document without actually editing it. All your changes will be recorded and shown to the person who sent the document to you.</p>
@@ -19,14 +24,14 @@
             <li>switch to the <b>Review</b> tab at the top toolbar and press the <img alt="Track Changes button" src="../images/trackchangestoptoolbar.png" /> <b>Track Changes</b> button.</li>
         </ul>
         <p class="note"><b>Note</b>: it is not necessary for the reviewer to enable the <b>Track Changes</b> option. It is enabled by default and cannot be disabled when the document is shared with review only access rights.</p>
-        <h3>Choose the changes display mode</h3>
+        <h3 id="displaymode">Choose the changes display mode</h3>
         <p>Click the <img alt="Display Mode button" src="../images/review_displaymode.png" /> <b>Display Mode</b> button at the top toolbar and select one of the available modes from the list:</p>
         <ul>
             <li><b>All changes (Editing)</b> - this option is selected by default. It allows both to view suggested changes and edit the document.</li>
             <li><b>All changes accepted (Preview)</b> - this mode is used to display all the changes as if they were accepted. This option does not actually accept all changes, it only allows you to see how the document will look like after you accept all the changes. In this mode, you cannot edit the document.</li>
             <li><b>All changes rejected (Preview)</b> - this mode is used to display all the changes as if they were rejected. This option does not actually reject all changes, it only allows you to view the document without changes. In this mode, you cannot edit the document.</li>
         </ul>
-        <h3>Accept or reject changes</h3>
+        <h3 id="managechanges">Accept or reject changes</h3>
         <p>Use the <img alt="To Previous Change button" src="../images/review_previous.png" /> <b>Previous</b> and the <img alt="To Next Change button" src="../images/review_next.png" /> <b>Next</b> buttons at the top toolbar to navigate among the changes.</p>
         <p>To accept the currently selected change you can:</p>
         <ul>

apps/documenteditor/main/resources/help/en/HelpfulHints/Search.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The description of the document search and replace function in Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 		<h1>Search and Replace Function</h1>
 			<p>To search for the needed characters, words or phrases used in the currently edited document, 
 			click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated at the left sidebar. </p>

apps/documenteditor/main/resources/help/en/HelpfulHints/SpellChecking.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Spell check the text in your language while editing a document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 		<h1>Spell-checking</h1>
 			<p><b>Document Editor</b> allows you to check the spelling of your text in a certain language and correct mistakes while editing.</p>
 			<p>First of all, <b>choose a language</b> for your document. Switch to the <b>Review</b> tab of the top toolbar and click the <img alt="Set Document Language icon" src="../images/document_language.png" /> <b>Language</b> icon. In the window that appears, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole document. </p>

apps/documenteditor/main/resources/help/en/HelpfulHints/SupportedFormats.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="The list of document formats supported by Document Editor" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 		<h1>Supported Formats of Electronic Documents</h1>
 			<p>Electronic documents represent one of the most commonly used computer files. 
 			Thanks to the computer network highly developed nowadays, it's possible and more convenient to distribute electronic documents than printed ones. 

apps/documenteditor/main/resources/help/en/ProgramInterface/FileTab.htm

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>File tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - File tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>File tab</h1>
+            <p>The <b>File</b> tab allows to perform some basic operations on the current file.</p>
+            <p><img alt="File tab" src="../images/interface/filetab.png" /></p>
+            <p>Using this tab, you can:</p>
+            <ul>
+                <li><a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save</a> the current file (in case the <b>Autosave</b> option is disabled), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">download, print</a> or <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">rename</a> it,</li>
+                <li><a href="../UsageInstructions/OpenCreateNew.htm" onclick="onhyperlinkclick(this)">create</a> a new document or open a recently edited one,</li>
+                <li>view <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">general information</a> about the document,</li>
+                <li>manage <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">access rights</a>,</li>
+                <li>track <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">version history</a>,</li>
+                <li>access the editor <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>,</li>
+                <li>return to the Documents list.</li>
+            </ul>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/HomeTab.htm

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Home tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - Home tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Home tab</h1>
+            <p>The <b>Home</b> tab opens by default when you open a document. It allows to format font and paragraphs. Some other options are also available here, such as Mail Merge, color schemes, view settings.</p>
+            <p><img alt="Home tab" src="../images/interface/hometab.png" /></p>
+            <p>Using this tab, you can:</p>
+            <ul>
+                <li>adjust font <a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">type, size, color</a>,</li>
+                <li>apply font <a href="../UsageInstructions/DecorationStyles.htm" onclick="onhyperlinkclick(this)">decoration styles</a>,</li>
+                <li>select <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)">background color</a> for a paragraph,</li>
+                <li>create bulleted and numbered <a href="../UsageInstructions/CreateLists.htm" onclick="onhyperlinkclick(this)">lists</a>,</li>
+                <li>change paragraph <a href="../UsageInstructions/ParagraphIndents.htm" onclick="onhyperlinkclick(this)">indents</a>,</li>
+                <li>set paragraph <a href="../UsageInstructions/LineSpacing.htm" onclick="onhyperlinkclick(this)">line spacing</a>,</li>
+                <li><a href="../UsageInstructions/AlignText.htm" onclick="onhyperlinkclick(this)">align your text</a> in a paragraph,</li>
+                <li>show/hide <a href="../UsageInstructions/NonprintingCharacters.htm" onclick="onhyperlinkclick(this)">nonprinting characters</a>,</li>
+                <li><a href="../UsageInstructions/CopyClearFormatting.htm" onclick="onhyperlinkclick(this)">copy/clear</a> text formatting,</li>
+                <li>change <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">color scheme</a>,</li>
+                <li>use <a href="../UsageInstructions/UseMailMerge.htm" onclick="onhyperlinkclick(this)">Mail Merge</a>,</li>
+                <li>manage <a href="../UsageInstructions/FormattingPresets.htm" onclick="onhyperlinkclick(this)">styles</a>,</li>
+                <li>adjust <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and access the editor <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>.</li>
+            </ul>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/InsertTab.htm

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - Insert tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Insert tab</h1>
+            <p>The <b>Insert</b> tab allows to add some page formatting elements, as well as visual objects and comments.</p>
+            <p><img alt="Insert tab" src="../images/interface/inserttab.png" /></p>
+            <p>Using this tab, you can:</p>
+            <ul>
+                <li>insert <a href="../UsageInstructions/PageBreaks.htm" onclick="onhyperlinkclick(this)">page breaks</a>, <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> and <a href="../UsageInstructions/SetPageParameters.htm#columns" onclick="onhyperlinkclick(this)">column breaks</a>,</li>
+                <li>insert <a href="../UsageInstructions/InsertHeadersFooters.htm" onclick="onhyperlinkclick(this)">headers and footers</a> and <a href="../UsageInstructions/InsertPageNumbers.htm" onclick="onhyperlinkclick(this)">page numbers</a>,</li>
+                <li>insert <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>,</li>
+                <li>insert <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">hyperlinks</a>, <a href="../UsageInstructions/InsertFootnotes.htm" onclick="onhyperlinkclick(this)">footnotes</a>, <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">comments</a>,</li>
+                <li>insert <a href="../UsageInstructions/InsertTextObjects.htm" onclick="onhyperlinkclick(this)">text boxes and Text Art objects</a>, <a href="../UsageInstructions/InsertEquation.htm" onclick="onhyperlinkclick(this)">equations</a>, <a href="../UsageInstructions/InsertDropCap.htm" onclick="onhyperlinkclick(this)">drop caps</a>.</li>
+            </ul>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/LayoutTab.htm

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Layout tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - Layout tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Layout tab</h1>
+            <p>The <b>Layout</b> tab allows to change the document appearance: set up page parameters and define the arrangement of visual elements.</p>
+            <p><img alt="Layout tab" src="../images/interface/layouttab.png" /></p>
+            <p>Using this tab, you can:</p>
+            <ul>
+                <li>adjust page <a href="../UsageInstructions/SetPageParameters.htm#margins" onclick="onhyperlinkclick(this)">margins</a>, <a href="../UsageInstructions/SetPageParameters.htm#orientation" onclick="onhyperlinkclick(this)">orientation</a>, <a href="../UsageInstructions/SetPageParameters.htm#size" onclick="onhyperlinkclick(this)">size</a>,</li>
+                <li>add <a href="../UsageInstructions/SetPageParameters.htm#columns" onclick="onhyperlinkclick(this)">columns</a>,</li>
+                <li>insert <a href="../UsageInstructions/PageBreaks.htm" onclick="onhyperlinkclick(this)">page breaks</a>, <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> and <a href="../UsageInstructions/SetPageParameters.htm#columns" onclick="onhyperlinkclick(this)">column breaks</a>,</li>
+                <li>align and arrange objects (<a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>),</li>
+                <li>change <a href="../UsageInstructions/ChangeWrappingStyle.htm" onclick="onhyperlinkclick(this)">wrapping style</a>.</li>
+            </ul>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/PluginsTab.htm

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Plugins tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - Plugins tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Plugins tab</h1>
+            <p>The <b>Plugins</b> tab allows to access advanced editing features using available third-party components.</p>
+            <p><img alt="Plugins tab" src="../images/interface/pluginstab.png" /></p>
+            <p>Currently, the following plugins are available:</p>		
+            <ul>
+                <li><b>ClipArt</b> allows to add images from the clipart collection into your document,</li>
+                <li><b>OCR</b> allows to recognize text included into a picture and insert it into the document text,</li>
+                <li><b>PhotoEditor</b> allows to edit images: crop, resize them, apply effects etc.,</li>
+                <li><b>Speech</b> allows to convert the selected text into speech,</li>
+                <li><b>Symbol Table</b> allows to insert special symbols into your text,</li>
+                <li><b>Translator</b> allows to translate the selected text into other languages,</li>
+                <li><b>YouTube</b> allows to embed YouTube videos into your document.</li>
+            </ul>
+            <p>To learn more about plugins please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/basic" onclick="onhyperlinkclick(this)">API Documentation</a>. All the currently existing open source plugin examples are available on <a target="_blank" href="https://github.com/ONLYOFFICE/sdkjs-plugins" onclick="onhyperlinkclick(this)">GitHub</a>.</p>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/ProgramInterface.htm

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Introducing the Document Editor user interface</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Introducing the Document Editor user interface</h1>
+			<p><b>Document Editor</b> uses a tabbed interface where editing commands are grouped into tabs by functionality.</p>
+            <p><img alt="Editor window" src="../images/interface/editorwindow.png" /></p>
+            <p>The editor interface consists of the following main elements:</p>
+            <ol>
+                <li><b>Editor header</b> displays the logo, menu tabs, document name as well as two icons on the right that allow to <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">set access rights</a> and return to the Documents list.
+                <p><img alt="Icons in the editor header" src="../images/interface/rightpart.png" /></p>
+                </li>
+                <li><b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/LayoutTab.htm" onclick="onhyperlinkclick(this)">Layout</a>, <a href="../ProgramInterface/ReviewTab.htm" onclick="onhyperlinkclick(this)">Review</a>, <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
+                <p>The <b>Print</b>, <b>Save</b>, <b>Copy</b>, <b>Paste</b>, <b>Undo</b> and <b>Redo</b> options are always available at the left part of the <b>Top toolbar</b> regardless of the selected tab.</p>
+                <p><img alt="Icons on the top toolbar" src="../images/interface/leftpart.png" /></p>
+                </li>
+                <li><b>Status bar</b> at the bottom of the editor window contains the page number indicator, displays some notifications (such as "All changes saved" etc.), allows to <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">set text language, enable spell checking</a>, turn on the <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">track changes mode</a>, adjust <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">zoom</a>.</li>
+                <li><b>Left sidebar</b> contains icons that allow to use the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool, open the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> and <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chat</a> panel, contact our support team and view the information about the program.</li>
+                <li><b>Right sidebar</b> allows to adjust additional parameters of different objects. When you select a particular object in the text, the corresponding icon is activated at the right sidebar. Click this icon to expand the right sidebar.</li>
+                <li>Horizontal and vertical <b>Rulers</b> allow to align text and other elements in a document, set up margins, tab stops, and paragraph indents.</li>
+                <li><b>Working area</b> allows to view document content, enter and edit data.</li>
+                <li><b>Scroll bar</b> on the right allows to scroll up and down multi-page documents.</li>
+            </ol>
+            <p>For your convenience you can hide some components and display them again when it is necessary. To learn more on how to adjust view settings please refer to <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
+           
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/ReviewTab.htm

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Review tab</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Introducing the Document Editor user interface - Review tab" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
+			<h1>Review tab</h1>
+            <p>The <b>Review</b> tab allows to proof the document: make sure that the spelling of the text is correct, manage comments, track changes made by a reviewer.</p>
+            <p><img alt="Review tab" src="../images/interface/reviewtab.png" /></p>	
+            <p>Using this tab, you can:</p>
+            <ul>
+                <li>switch document language and enable <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">spell checking</a>,</li>
+                <li>add <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">comments</a> to the document,</li>
+                <li>enable the <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">Track Changes</a> feature,</li>
+                <li>choose the <a href="../HelpfulHints/Review.htm#displaymode" onclick="onhyperlinkclick(this)">changes display mode</a>,</li>
+                <li>manage the <a href="../HelpfulHints/Review.htm#managechanges" onclick="onhyperlinkclick(this)">suggested changes</a>.</li>
+            </ul>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/UsageInstructions/AddBorders.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add borders to your document selecting their style" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Add borders</h1>
 			<p>To add borders to a paragraph, page, or the whole document,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/AddHyperlinks.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Add hyperlinks to a word or text fragment leading to an external website" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Add hyperlinks</h1>
 			<p>To add a hyperlink,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/AlignArrangeObjects.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Align and arrange text boxes, autoshapes, images and charts on a page." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Align and arrange objects on a page</h1>
 			<p>The added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped and ordered on a page. To perform any of these actions, first select a separate object or several objects on the page. To select several objects, hold down the <b>Ctrl</b> key and left-click the necessary objects. To select a text box, click on its border, not the text within it. After that you can use either the icons at the <b>Layout</b> tab of the top toolbar described below or the analogous options from the right-click menu.</p>
 			<h3>Align objects</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/AlignText.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Everything that pertains to the text alignment in a paragraph: aligning left, right, justified, center" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Align your text in a paragraph</h1>
 			<p>The text is commonly aligned in four ways: left, right, center or justified. To do that,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/BackgroundColor.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Learn how to select background color for a paragraph" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Select background color for a paragraph</h1>
 			<p>Background color is applied to the whole paragraph and completely fills all the paragraph space from the left page margin to the right page margin.</p>
 			<p>To apply a background color to a certain paragraph or change the current one,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/ChangeColorScheme.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Learn how to change color scheme for a document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Change color scheme</h1>
 			<p>Color schemes are applied to the whole document. They are used to quickly change the appearance of your document, since they are define the <b>Theme Colors</b> palette for document elements (<a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">font</a>, <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)">background</a>, <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">autoshapes</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>). If you've applied some <b>Theme Colors</b> to document elements and then selected a different <b>Color Scheme</b>, the applied colors in your document change correspondingly.</p>
 			<p>To change a color scheme, click the downward arrow next to the <b>Change color scheme</b> <img alt="Change color scheme" src="../images/changecolorscheme.png" /> icon at the <b>Home</b> tab of the top toolbar and select the necessary color scheme from the available ones: <b>Office</b>, <b>Grayscale</b>, <b>Apex</b>, <b>Aspect</b>, <b>Civic</b>, <b>Concourse</b>, <b>Equity</b>, <b>Flow</b>, <b>Foundry</b>, <b>Median</b>, <b>Metro</b>, <b>Module</b>, <b>Odulent</b>, <b>Oriel</b>, <b>Origin</b>, <b>Paper</b>, <b>Solstice</b>, <b>Technic</b>, <b>Trek</b>, <b>Urban</b>, <b>Verve</b>.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/ChangeWrappingStyle.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Change the text wrapping style to specify the way the object is positioned relative to the text." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Change text wrapping</h1>
             <p>The <b>Wrapping Style</b> option determines the way the object is positioned relative to the text. You can change the text wrapping style for inserted objects, such as <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">images</a>, <a href="../UsageInstructions/InsertCharts.htm#" onclick="onhyperlinkclick(this)">charts</a>, <a href="../UsageInstructions/InsertTextObjects.htm" onclick="onhyperlinkclick(this)">text boxes</a> or <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>.</p>
             <h3>Change text wrapping for shapes, images, charts, text boxes</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/CopyClearFormatting.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Copy/clear text formatting within your document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Copy/clear text formatting</h1>
 			<p>To copy a certain text formatting,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/CopyPasteUndoRedo.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Perform the basic operations with the document text: copy, paste, undo, redo" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Copy/paste text passages, undo/redo your actions</h1>
             <h3>Use basic clipboard operations</h3>
 			<p>To cut, copy and paste text passages and inserted objects (autoshapes, images, charts) within the current document use the corresponding options from the right-click menu or icons available at any tab of the top toolbar:</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/CreateLists.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Create bulleted and numbered lists in the document changing the lists outline" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Create lists</h1>
 			<p>To create a list in your document,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/DecorationStyles.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Apply font decoration styles: increment/decrement values, bold, italic, underline, strikeout, superscript/subscript" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Apply font decoration styles</h1>
 			<p>You can apply various font decoration styles using the corresponding icons situated at the <b>Home</b> tab of the top toolbar.</p>
 			<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and apply the formatting.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/FontTypeSizeColor.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Change the following text formatting parameters: font type, size, and color" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Set font type, size, and color</h1>
 			<p>You can select the font type, its size and color using the corresponding icons situated at the <b>Home</b> tab of the top toolbar.</p>
 			<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and apply the formatting.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/FormattingPresets.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Apply formatting styles: normal, heading, quote, list, etc." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Apply formatting styles</h1>
             <p>Each formatting style is a set of predefined formatting options: (font size, color, line spacing, alignment etc.). The styles allow you to quickly format different parts of the document (headings, subheadings, lists, normal text, quotes) instead of applying several formatting options individually each time. This also ensures a consistent appearance throughout the entire document. A style can be applied to the whole paragraph only.</p>
 			<h3>Use default styles</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Add an autoshape to your document and adjust its properties." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert autoshapes</h1>
             <h3>Insert an autoshape</h3>
 			<p>To add an autoshape to your document,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertCharts.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Add a chart to your document and adjust its position, size and properties" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert charts</h1>
             <h3>Insert a chart</h3>
 			<p>To insert a chart into your document,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertDropCap.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert a drop cap and adjust its frame properties to make your document look more expressive." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert a drop cap</h1>
 			<p>A <b>Drop cap</b> is the first letter of a paragraph that is much larger than others and takes up several lines in height.</p>
 			<p>To add a drop cap,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertEquation.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert equations and mathematical symbols." />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert equations</h1>
             <p><b>Document Editor</b> allows you to build equations using the built-in templates, edit them, insert special characters (including mathematical operators, Greek letters, accents etc.).</p>
             <h3>Add a new equation</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertFootnotes.htm

@@ -6,9 +6,13 @@
         <meta name="description" content="Insert footnotes to provide explanations for some terms or make references to the sources" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert footnotes</h1>
             <p>You can add footnotes to provide explanations or comments for certain sentences or terms used in your text, make references to the sources etc.</p>
 			<p>To insert a footnote into your document,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertHeadersFooters.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Insert headers and footers into your document, add different headers and footer to the first page or odd and even pages" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert headers and footers</h1>
 			<p>To add a header or footer to your document or edit the existing one,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertImages.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add an image to your document and adjust its position and properties" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert images</h1>
 			<p>In Document Editor, you can insert images in the most popular formats into your document. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
             <h3>Insert an image</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertPageNumbers.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Insert page numbers to navigate through your document easier" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert page numbers</h1>
 			<p>To insert page numbers into your document,</p>
 			<ol>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertRichTextContentControls.htm

@@ -6,9 +6,13 @@
         <meta name="description" content="Insert rich text content controls to create a form with input fields that can be filled in by other users, or protect some parts of the document from being edited or deleted" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Create forms</h1>
             <p>Using rich text content controls you can create a form with input fields that can be filled in by other users, or protect some parts of the document from being edited or deleted. Rich text content controls are objects containing text that can be formatted. Inline controls cannot contain more than one paragraph, while floating controls can contain several paragraphs, lists, and objects (images, shapes, tables etc.). </p>
 			<h3>Adding controls</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertTables.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Add a table to your document and adjust its properties" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert tables</h1>
             <h3>Insert a table</h3>
 			<p>To insert a table into the document text,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertTextObjects.htm

@@ -6,9 +6,13 @@
         <meta name="description" content="Insert text objects such as text boxes and Text Art to make your text more impressive" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert text objects</h1>
             <p>To make your text more emphatic and draw attention to a specific part of the document, you can insert a text box (a rectangular frame that allows to enter text within it) or a Text Art object (a text box with a predefined font style and color that allows to apply some text effects).</p>
 			<h3>Add a text object</h3>

apps/documenteditor/main/resources/help/en/UsageInstructions/LineSpacing.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Set paragraph line spacing in your document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Set paragraph line spacing</h1>
 			<p>In Document Editor, you can set the line height for the text lines within the paragraph as well as the margins between the current and the preceding or the subsequent paragraph.</p>
 			<p>To do that,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/NonprintingCharacters.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Show or hide nonprinting characters while formatting text, creating tables, and editing documents" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Show/hide nonprinting characters</h1>
 			<p>Nonprinting characters help you edit a document. They indicate the presence of various types of formatting, but they do not print with the document, even when they are displayed on the screen.</p>
 			<p>To show or hide nonprinting characters, click the <b>Nonprinting characters</b> <img alt="Nonprinting characters" src="../images/nonprintingcharacters.png" /> icon at the <b>Home</b> tab of the top toolbar.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/OpenCreateNew.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Open a recently edited document, create a new one, or return to the list of existing documents" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Create a new document or open an existing one</h1>
 			<p>After you finished working at one document, you can immediately proceed to an already existing document that you have recently edited, create a new one, or return to the list of existing documents.</p>
 			<p>To create a new document,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/PageBreaks.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Insert page breaks and keep lines together" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert page breaks</h1>
 			<p>In Document Editor, you can add the page break to start a new page and adjust pagination options.</p>
 			<p>To insert a page break at the current cursor position click the <img alt="Breaks icon" src="../images/pagebreak1.png" /> <b>Breaks</b> icon at the <b>Insert</b> or <b>Layout</b> tab of the top toolbar or click the arrow next to this icon and select the <b>Insert Page Break</b> option from the menu.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/ParagraphIndents.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Change paragraph indents: the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Change paragraph indents</h1>
 			<p>In Document Editor, you can change the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page.</p>
 			<p>To do that,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/SavePrintDownload.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Save, download and print your documents in various formats" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Save/<span class="onlineDocumentFeatures">download/</span>print your document</h1>
 			<p>By default, <b>Document Editor</b> automatically saves your file each 2 seconds when you work on it preventing your data loss in case of the unexpected program closing.<span class="onlineDocumentFeatures"> If you co-edit the file in the <b>Fast</b> mode, the timer requests for updates 25 times a second and saves the changes if they have been made. When the file is being co-edited in the <b>Strict</b> mode, changes are automatically saved at 10-minute intervals. If you need, you can easily select the preferred co-editing mode or disable the <b>Autosave</b> feature on the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> page.</span></p>
 			<p>To save your current document manually,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/SectionBreaks.htm

@@ -6,9 +6,13 @@
 		<meta name="description" content="Insert section breaks to use different formatting for each section of the document" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Insert section breaks</h1>
 			<p>Section breaks allow you to apply a different layout or formatting for the certain parts of your document. For example, you can use individual <a href="../UsageInstructions/InsertHeadersFooters.htm" onclick="onhyperlinkclick(this)">headers and footers</a>, <a href="../UsageInstructions/InsertPageNumbers.htm" onclick="onhyperlinkclick(this)">page numbering</a>, <a href="../UsageInstructions/InsertFootnotes.htm" onclick="onhyperlinkclick(this)">footnotes format</a>, <a href="../UsageInstructions/SetPageParameters.htm" onclick="onhyperlinkclick(this)">margins, size, orientation, or column number</a> for each separate section.</p>
 			<p class="note"><b>Note</b>: an inserted section break defines formatting of the preceding part of the document.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/SetPageParameters.htm

@@ -6,15 +6,19 @@
         <meta name="description" content="Set page parameters: change page orientation and size, adjust margins and insert columns" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
         <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Set page parameters</h1>
 			<p>To change page layout, i.e. set page orientation and size, adjust margins and insert columns, use the corresponding icons at the <b>Layout</b> tab of the top toolbar.</p>
             <p class="note"><b>Note</b>: all these parameters are applied to the entire document. If you need to set different page margins, orientation, size, or column number for the separate parts of your document, please refer to <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
-			<h3>Page Orientation</h3>
+			<h3 id="orientation">Page Orientation</h3>
             <p>Change the current orientation type clicking the <img alt="Orientation icon" src="../images/orientation.png" /> <b>Orientation</b> icon. The default orientation type is <b>Portrait</b> that can be switched to <b>Album</b>.</p>
-            <h3>Page Size</h3>
+            <h3 id="size">Page Size</h3>
             <p>Change the default A4 format clicking the <img alt="Size icon" src="../images/pagesize.png" /> <b>Size</b> icon and selecting the needed one from the list. The available preset sizes are:</p>
             <ul>
                 <li>US Letter (21,59cm x 27,94cm)</li>
@@ -33,12 +37,12 @@
             </ul>
             <p>You can also set a special page size by selecting the <b>Custom Page Size</b> option from the list. The <b>Page Size</b> window will open where you'll be able to set necessary <b>Width</b> and <b>Height</b> values. Enter your new values into the entry fields or adjust the existing values using arrow buttons. When ready, click <b>OK</b> to apply the changes.</p>
             <p><img alt="Custom Page Size" src="../images/custompagesize.png" /></p>
-            <h3>Page Margins</h3>
+            <h3 id="margins">Page Margins</h3>
             <p>Change default margins, i.e. the blank space between the left, right, top and bottom page edges and the paragraph text, clicking the <img alt="Margins icon" src="../images/pagemargins.png" /> <b>Margins</b> icon and selecting one of the available presets: <b>Normal</b>, <b>US Normal</b>, <b>Narrow</b>, <b>Moderate</b>, <b>Wide</b>. You can also use the <b>Custom Margins</b> option to set your own values in the <b>Margins</b> window that opens. Enter the necessary <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> page margin values into the entry fields or adjust the existing values using arrow buttons. When ready, click <b>OK</b>. The custom margins will be applied to the current document and the <b>Last Custom</b> option with the specified parameters will appear in the <img alt="Margins icon" src="../images/pagemargins.png" /> <b>Margins</b> list so that you can apply them to some other documents.</p>
             <p><img alt="Custom Margins" src="../images/custommargins.png" /></p>
             <p>You can also change the margins manually by dragging the border between the grey and white areas on the rulers (the grey areas of the rulers indicate page margins):</p>
             <p><img alt="Margins Adjustment" src="../images/margins.png" /></p>
-            <h3>Columns</h3>
+            <h3 id="columns">Columns</h3>
             <p>Apply a multi-column layout clicking the <img alt="Columns icon" src="../images/insertcolumns.png" /> <b>Columns</b> icon and selecting the necessary column type from the drop-down list. The following options are available:</p>
             <ul>
                 <li><b>Two</b> <img alt="Two columns icon" src="../images/twocolumns.png" /> - to add two columns of the same width,</li>

apps/documenteditor/main/resources/help/en/UsageInstructions/SetTabStops.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Set tab stops" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Set tab stops</h1>
 			<p>In Document Editor, you can change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key on the keyboard.</p>
 			<p>To set tab stops you can use the horizontal ruler:</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/UseMailMerge.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Use Mail Merge to create a lot of personalized letters and send them to recipients" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>Use Mail Merge</h1>
             <p class="note"><b>Note</b>: this option is available for paid versions only.</p>
 			<p>The <b>Mail Merge</b> feature is used to create a set of documents combining a common content which is taken from a text document and some individual components (variables, such as names, greetings etc.) taken from a spreadsheet (for example, a customer list). It can be useful if you need to create a lot of personalized letters and send them to recipients.</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/ViewDocInfo.htm

@@ -5,9 +5,14 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="View document title, author, location, creation date, persons with the rights to view or edit the document, and statistics" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+        </div>
 			<h1>View document information</h1>
 			<p>To access the detailed information about the currently edited document, click the <b>File</b> tab of the top toolbar and select the <b>Document Info...</b> option.</p>
 			<h3>General Information</h3>

apps/documenteditor/main/resources/help/en/editor.css

@@ -1,8 +1,8 @@
 body
 {
-font-family: Tahoma, Arial, Verdana;
+font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 12px;
-color: #666;
+color: #444;
 background: #fff;
 }
 
@@ -10,6 +10,7 @@ img
 {
 border: none;
 vertical-align: middle;
+max-width: 95%;
 }
 
 img.floatleft 
@@ -19,13 +20,6 @@ margin-right: 30px;
 margin-bottom: 10px;
 }
 
-img.floatright 
-{ 
-float: right;
-margin-left: 30px;
-margin-bottom: 10px;
-}
-
 li
 {
 line-height: 2em;
@@ -130,3 +124,26 @@ text-decoration: none;
 a.sup_link {
 text-decoration: none;	
 }
+
+.search-field {
+    display: block;
+    float: right;
+}
+.search-field input {
+    width: 250px;
+    height: 25px;
+    box-sizing: border-box;
+    padding: 7px 10px 7px 25px;
+    border: 1px solid #e1e1e1;
+    border-radius: 6px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAQVJREFUGBl1j71KxUAQhe8uJkZcC/ERfADBRsheCSkFwcLKxkbuM1jaa2+l1pZ6FW2EJJgUdqYOdinsAuIfRDZ+E24qceAw55w5O7urRlRRFKtt2x5DQ/AGrn3fPwrD8Avel5qFnlEOTMFK13Vb9CcwjuP4hz6aY9MJ3Xmet26tfREzy7ID59yZ1nofeSGeBhZcDSExoyg6V0o1bN4ULSXBd7AsYqgkSQL4AvgcPM2pG8R2mqZ7YlZVNc+2U/yAq+XNfak8z5d45yNqjcAr3RAyMkXfwXf50LcSQ7bUdT2Bjhl+0G8JHNI30A/GmJ0+iPGnZjfdM7CEp/8G5WRZlotN01xCg18HsWi9HzrHEgAAAABJRU5ErkJggg==') center left 9px no-repeat;
+}
+
+.search-field input:focus {
+    outline:0 !important;
+}
+
+.subtitle {
+    font-size: 0.9em;
+    font-style: italic;
+}

apps/documenteditor/main/resources/help/en/search/js/lunr-languages/lunr.multi.js

@@ -0,0 +1,75 @@
+/**
+ * export the module via AMD, CommonJS or as a browser global
+ * Export code from https://github.com/umdjs/umd/blob/master/returnExports.js
+ */
+;(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(factory)
+    } else if (typeof exports === 'object') {
+        /**
+         * Node. Does not work with strict CommonJS, but
+         * only CommonJS-like environments that support module.exports,
+         * like Node.
+         */
+        module.exports = factory()
+    } else {
+        // Browser globals (root is window)
+        factory()(root.lunr);
+    }
+}(this, function () {
+    /**
+     * Just return a value to define the module export.
+     * This example returns an object, but the module
+     * can return a function as the exported value.
+     */
+    return function(lunr) {
+        /* Set up the pipeline for indexing content in multiple languages. The
+           corresponding lunr.{lang} files must be loaded before calling this
+           function; English ('en') is built in.
+
+           Returns: a lunr plugin for use in your indexer.
+
+           Known drawback: every word will be stemmed with stemmers for every
+           language. This could mean that sometimes words that have the same
+           stemming root will not be stemmed as such.
+           */
+        lunr.multiLanguage = function(/* lang1, lang2, ... */) {
+            var languages = Array.prototype.slice.call(arguments);
+            var nameSuffix = languages.join('-');
+            var wordCharacters = "";
+            var pipeline = [];
+            var searchPipeline = [];
+            for (var i = 0; i < languages.length; ++i) {
+                if (languages[i] == 'en') {
+                    wordCharacters += '\\w';
+                    pipeline.unshift(lunr.stopWordFilter);
+                    pipeline.push(lunr.stemmer);
+                    searchPipeline.push(lunr.stemmer);
+                } else {
+                    wordCharacters += lunr[languages[i]].wordCharacters;
+                    pipeline.unshift(lunr[languages[i]].stopWordFilter);
+                    pipeline.push(lunr[languages[i]].stemmer);
+                    searchPipeline.push(lunr[languages[i]].stemmer);
+                }
+            };
+            var multiTrimmer = lunr.trimmerSupport.generateTrimmer(wordCharacters);
+            lunr.Pipeline.registerFunction(multiTrimmer, 'lunr-multi-trimmer-' + nameSuffix);
+            pipeline.unshift(multiTrimmer);
+
+            return function() {
+                this.pipeline.reset();
+
+                this.pipeline.add.apply(this.pipeline, pipeline);
+
+                // for lunr version 2
+                // this is necessary so that every searched word is also stemmed before
+                // in lunr <= 1 this is not needed, as it is done using the normal pipeline
+                if (this.searchPipeline) {
+                    this.searchPipeline.reset();
+                    this.searchPipeline.add.apply(this.searchPipeline, searchPipeline);
+                }
+            };
+        }
+    }
+}));

apps/documenteditor/main/resources/help/en/search/js/lunr-languages/lunr.stemmer.support.js

@@ -0,0 +1,304 @@
+/*!
+ * Snowball JavaScript Library v0.3
+ * http://code.google.com/p/urim/
+ * http://snowball.tartarus.org/
+ *
+ * Copyright 2010, Oleg Mazko
+ * http://www.mozilla.org/MPL/
+ */
+
+/**
+ * export the module via AMD, CommonJS or as a browser global
+ * Export code from https://github.com/umdjs/umd/blob/master/returnExports.js
+ */
+;(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(factory)
+    } else if (typeof exports === 'object') {
+        /**
+         * Node. Does not work with strict CommonJS, but
+         * only CommonJS-like environments that support module.exports,
+         * like Node.
+         */
+        module.exports = factory()
+    } else {
+        // Browser globals (root is window)
+        factory()(root.lunr);
+    }
+}(this, function () {
+    /**
+     * Just return a value to define the module export.
+     * This example returns an object, but the module
+     * can return a function as the exported value.
+     */
+    return function(lunr) {
+        /* provides utilities for the included stemmers */
+        lunr.stemmerSupport = {
+            Among: function(s, substring_i, result, method) {
+                this.toCharArray = function(s) {
+                    var sLength = s.length, charArr = new Array(sLength);
+                    for (var i = 0; i < sLength; i++)
+                        charArr[i] = s.charCodeAt(i);
+                    return charArr;
+                };
+
+                if ((!s && s != "") || (!substring_i && (substring_i != 0)) || !result)
+                    throw ("Bad Among initialisation: s:" + s + ", substring_i: "
+                        + substring_i + ", result: " + result);
+                this.s_size = s.length;
+                this.s = this.toCharArray(s);
+                this.substring_i = substring_i;
+                this.result = result;
+                this.method = method;
+            },
+            SnowballProgram: function() {
+                var current;
+                return {
+                    bra : 0,
+                    ket : 0,
+                    limit : 0,
+                    cursor : 0,
+                    limit_backward : 0,
+                    setCurrent : function(word) {
+                        current = word;
+                        this.cursor = 0;
+                        this.limit = word.length;
+                        this.limit_backward = 0;
+                        this.bra = this.cursor;
+                        this.ket = this.limit;
+                    },
+                    getCurrent : function() {
+                        var result = current;
+                        current = null;
+                        return result;
+                    },
+                    in_grouping : function(s, min, max) {
+                        if (this.cursor < this.limit) {
+                            var ch = current.charCodeAt(this.cursor);
+                            if (ch <= max && ch >= min) {
+                                ch -= min;
+                                if (s[ch >> 3] & (0X1 << (ch & 0X7))) {
+                                    this.cursor++;
+                                    return true;
+                                }
+                            }
+                        }
+                        return false;
+                    },
+                    in_grouping_b : function(s, min, max) {
+                        if (this.cursor > this.limit_backward) {
+                            var ch = current.charCodeAt(this.cursor - 1);
+                            if (ch <= max && ch >= min) {
+                                ch -= min;
+                                if (s[ch >> 3] & (0X1 << (ch & 0X7))) {
+                                    this.cursor--;
+                                    return true;
+                                }
+                            }
+                        }
+                        return false;
+                    },
+                    out_grouping : function(s, min, max) {
+                        if (this.cursor < this.limit) {
+                            var ch = current.charCodeAt(this.cursor);
+                            if (ch > max || ch < min) {
+                                this.cursor++;
+                                return true;
+                            }
+                            ch -= min;
+                            if (!(s[ch >> 3] & (0X1 << (ch & 0X7)))) {
+                                this.cursor++;
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                    out_grouping_b : function(s, min, max) {
+                        if (this.cursor > this.limit_backward) {
+                            var ch = current.charCodeAt(this.cursor - 1);
+                            if (ch > max || ch < min) {
+                                this.cursor--;
+                                return true;
+                            }
+                            ch -= min;
+                            if (!(s[ch >> 3] & (0X1 << (ch & 0X7)))) {
+                                this.cursor--;
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                    eq_s : function(s_size, s) {
+                        if (this.limit - this.cursor < s_size)
+                            return false;
+                        for (var i = 0; i < s_size; i++)
+                            if (current.charCodeAt(this.cursor + i) != s.charCodeAt(i))
+                                return false;
+                        this.cursor += s_size;
+                        return true;
+                    },
+                    eq_s_b : function(s_size, s) {
+                        if (this.cursor - this.limit_backward < s_size)
+                            return false;
+                        for (var i = 0; i < s_size; i++)
+                            if (current.charCodeAt(this.cursor - s_size + i) != s
+                                .charCodeAt(i))
+                                return false;
+                        this.cursor -= s_size;
+                        return true;
+                    },
+                    find_among : function(v, v_size) {
+                        var i = 0, j = v_size, c = this.cursor, l = this.limit, common_i = 0, common_j = 0, first_key_inspected = false;
+                        while (true) {
+                            var k = i + ((j - i) >> 1), diff = 0, common = common_i < common_j
+                                ? common_i
+                                : common_j, w = v[k];
+                            for (var i2 = common; i2 < w.s_size; i2++) {
+                                if (c + common == l) {
+                                    diff = -1;
+                                    break;
+                                }
+                                diff = current.charCodeAt(c + common) - w.s[i2];
+                                if (diff)
+                                    break;
+                                common++;
+                            }
+                            if (diff < 0) {
+                                j = k;
+                                common_j = common;
+                            } else {
+                                i = k;
+                                common_i = common;
+                            }
+                            if (j - i <= 1) {
+                                if (i > 0 || j == i || first_key_inspected)
+                                    break;
+                                first_key_inspected = true;
+                            }
+                        }
+                        while (true) {
+                            var w = v[i];
+                            if (common_i >= w.s_size) {
+                                this.cursor = c + w.s_size;
+                                if (!w.method)
+                                    return w.result;
+                                var res = w.method();
+                                this.cursor = c + w.s_size;
+                                if (res)
+                                    return w.result;
+                            }
+                            i = w.substring_i;
+                            if (i < 0)
+                                return 0;
+                        }
+                    },
+                    find_among_b : function(v, v_size) {
+                        var i = 0, j = v_size, c = this.cursor, lb = this.limit_backward, common_i = 0, common_j = 0, first_key_inspected = false;
+                        while (true) {
+                            var k = i + ((j - i) >> 1), diff = 0, common = common_i < common_j
+                                ? common_i
+                                : common_j, w = v[k];
+                            for (var i2 = w.s_size - 1 - common; i2 >= 0; i2--) {
+                                if (c - common == lb) {
+                                    diff = -1;
+                                    break;
+                                }
+                                diff = current.charCodeAt(c - 1 - common) - w.s[i2];
+                                if (diff)
+                                    break;
+                                common++;
+                            }
+                            if (diff < 0) {
+                                j = k;
+                                common_j = common;
+                            } else {
+                                i = k;
+                                common_i = common;
+                            }
+                            if (j - i <= 1) {
+                                if (i > 0 || j == i || first_key_inspected)
+                                    break;
+                                first_key_inspected = true;
+                            }
+                        }
+                        while (true) {
+                            var w = v[i];
+                            if (common_i >= w.s_size) {
+                                this.cursor = c - w.s_size;
+                                if (!w.method)
+                                    return w.result;
+                                var res = w.method();
+                                this.cursor = c - w.s_size;
+                                if (res)
+                                    return w.result;
+                            }
+                            i = w.substring_i;
+                            if (i < 0)
+                                return 0;
+                        }
+                    },
+                    replace_s : function(c_bra, c_ket, s) {
+                        var adjustment = s.length - (c_ket - c_bra), left = current
+                            .substring(0, c_bra), right = current.substring(c_ket);
+                        current = left + s + right;
+                        this.limit += adjustment;
+                        if (this.cursor >= c_ket)
+                            this.cursor += adjustment;
+                        else if (this.cursor > c_bra)
+                            this.cursor = c_bra;
+                        return adjustment;
+                    },
+                    slice_check : function() {
+                        if (this.bra < 0 || this.bra > this.ket || this.ket > this.limit
+                            || this.limit > current.length)
+                            throw ("faulty slice operation");
+                    },
+                    slice_from : function(s) {
+                        this.slice_check();
+                        this.replace_s(this.bra, this.ket, s);
+                    },
+                    slice_del : function() {
+                        this.slice_from("");
+                    },
+                    insert : function(c_bra, c_ket, s) {
+                        var adjustment = this.replace_s(c_bra, c_ket, s);
+                        if (c_bra <= this.bra)
+                            this.bra += adjustment;
+                        if (c_bra <= this.ket)
+                            this.ket += adjustment;
+                    },
+                    slice_to : function() {
+                        this.slice_check();
+                        return current.substring(this.bra, this.ket);
+                    },
+                    eq_v_b : function(s) {
+                        return this.eq_s_b(s.length, s);
+                    }
+                };
+            }
+        };
+
+        lunr.trimmerSupport = {
+            generateTrimmer: function(wordCharacters) {
+                var startRegex = new RegExp("^[^" + wordCharacters + "]+")
+                var endRegex = new RegExp("[^" + wordCharacters + "]+$")
+
+                return function(token) {
+                    // for lunr version 2
+                    if (typeof token.update === "function") {
+                        return token.update(function (s) {
+                            return s
+                                .replace(startRegex, '')
+                                .replace(endRegex, '');
+                        })
+                    } else { // for lunr version 1
+                        return token
+                            .replace(startRegex, '')
+                            .replace(endRegex, '');
+                    }
+                };
+            }
+        }
+    }
+}));

apps/documenteditor/main/resources/help/en/search/js/page-search.js

@@ -0,0 +1,5 @@
+function doSearch(e) {
+    if (e.keyCode == 13) {
+        document.location.href = '../search/search.html?query=' + document.getElementById('search').value;
+    }
+}

apps/documenteditor/main/resources/help/en/search/search.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Search results</title>
+        <meta charset="utf-8" />
+        <meta name="description" content="Search results" />
+        <link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script src="js/jquery.min.js"></script>
+        <script src="indexes.js"></script>
+        <script src="js/lunr.js"></script>
+        <script src="js/lunr-languages/lunr.stemmer.support.js"></script>
+        <script src="js/lunr-languages/lunr.multi.js"></script>
+
+        <style type="text/css">
+            ul {
+                padding-left: 15px;
+                margin-top: 20px;
+            }
+
+            li {
+                list-style-type: decimal;
+                line-height: 1.5em;
+                padding-bottom: 1.5em;
+            }
+
+            li a {
+                font-family: 'Open Sans',sans-serif,Arial;
+                font-size: 1.2em;
+            }
+
+            li p {
+                margin: 0.5em 0;
+            }
+
+            li p.info {
+                color: #999;
+                font-size: 0.9em;
+                font-style: italic;
+            }
+
+            li a span {
+                background: yellow;
+            }
+
+            li p span {
+                background: yellow;
+            }
+
+        </style>
+    </head>
+    <body>
+        <script>
+            (function() {
+                var getParameterByName = function(name, url) {
+                    if (!url) url = window.location.href;
+                    name = name.replace(/[\[\]]/g, "\\$&");
+                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                        results = regex.exec(url);
+                    if (!results) return null;
+                    if (!results[2]) return '';
+                    return decodeURIComponent(results[2].replace(/\+/g, " "));
+                };
+
+                var getInfoById = function(id) {
+                    var objects = $.grep(indexes, function(e){ return e.id == id; });
+
+                    if (objects.length > 0) {
+                        return objects[0]
+                    }
+
+                    return null;
+                };
+
+                var uniqueArray = function(array) {
+                    return array.map(JSON.stringify).reverse().filter(function (e, i, a) {
+                        return a.indexOf(e, i+1) === -1;
+                    }).reverse().map(JSON.parse)
+                };
+
+                var higtlightTitles = function(result, info, positions) {
+                    var elements = positions.map(function(position) {
+                        return $('<li>')
+                            .append(
+                                $('<a>', {
+                                    href: "../" + result.ref,
+                                    html: [
+                                        info.title.slice(0, position[0]),
+                                        "<span>",
+                                        info.title.slice(position[0], position[0] + position[1]),
+                                        "</span>",
+                                        info.title.slice(position[0] + position[1])
+                                    ].join('')
+                               })
+                            )
+                            .append($('<p>').text(info.body.substring(0, 250) + "..."))
+                    });
+
+                    return elements;
+                };
+
+                var higtlightBodyes = function(result, info, positions) {
+                    var elements = positions.map(function(position) {
+                        var html = [
+                            info.body.slice(0, position[0]),
+                            "<span>",
+                            info.body.slice(position[0], position[0] + position[1]),
+                            "</span>",
+                            info.body.slice(position[0] + position[1])
+                        ].join('');
+
+                        var sentences = html.split("."),
+                            displayBody = "",
+                            sentenceCount = 0,
+                            commonLength = 0;
+
+
+                        $(sentences).each(function(index, sentence) {
+                            commonLength += sentence.length;
+
+                            if (commonLength > position[0]) {
+                                sentenceCount++;
+                                displayBody += sentence + ".";
+                            }
+
+                            if (commonLength > 450 && sentenceCount > 2) {
+                                displayBody = displayBody.substring(0, 450) + "..."
+                                return false;
+                            }
+                        });
+
+                        
+                        return $('<li>')
+                            .append(
+                                $('<a>', {
+                                    href: "../" + result.ref,
+                                    html: info.title.substring(0, 150)
+                               })
+                            )
+                            .append(
+                                $('<p>')
+                                    .html(displayBody)
+                            )
+                    });
+
+                    return elements;
+                };
+
+                var processSearch = function() {
+                    var self = this,
+                        query = getParameterByName("query");
+
+                    if (query !== null && query.length > 0) {
+                        var parameterisedPlugin = function (builder, fields) {
+                            fields.forEach(function (field) {
+                                builder.field(field)
+                            })
+                        }
+
+                        var idx = lunr(function () {
+                            this.use(lunr.multiLanguage('en'))
+                            this.ref('id')
+                            this.field('title', {boost: 10})
+                            this.field('body')
+                            this.metadataWhitelist = ['position']
+                            this.use(parameterisedPlugin, ['title', 'body']);
+
+                            indexes.forEach(function (doc) {
+                              this.add(doc)
+                            }, this)
+                        });
+
+                        var results = idx.search(query),
+                            resultsCount = 0;
+
+                        if (results.length > 0) {
+                            $("#search-results").append(
+                                results.map(function(result) {
+                                    var displayInfo = getInfoById(result.ref);
+                                    if (displayInfo) {
+                                        var elements = []
+
+                                        Object.keys(result.matchData.metadata).forEach(function (term) {
+                                            Object.keys(result.matchData.metadata[term]).forEach(function (fieldName) {
+                                                if (fieldName == "title") {
+                                                    var positions = uniqueArray(result.matchData.metadata[term][fieldName].position);
+                                                    elements = elements.concat(higtlightTitles(result, displayInfo, positions));
+                                                } else if (fieldName == "body") {
+                                                    var positions = uniqueArray(result.matchData.metadata[term][fieldName].position);
+                                                    elements = elements.concat(higtlightBodyes(result, displayInfo, positions));
+                                                }
+                                            })
+                                        })
+
+                                        resultsCount += elements.length;
+
+                                        return elements.map(function(element) {
+                                            return $("<div>").append(element).html()
+                                        }).join('');
+                                    }
+                                })
+                            )
+                            $(".subtitle").html("Search results: " + resultsCount);
+                        } else {
+                            $(".subtitle").html("No search results");
+                        }
+
+                        $("h1").text("Search results");
+                    } else {
+                        $("h1").text("Search results");
+                        $(".subtitle").html("No search results");
+                    }
+                }
+
+                $(document).ready(function() {
+                    setTimeout(processSearch, 50);
+                });
+            })();
+
+            function doSearch(e) {
+                if (e.keyCode == 13) {
+                    document.location.href = 'search.html?query=' + document.getElementById('search').value;
+                }
+            }
+        </script>
+        <div class="mainpart">
+            <div class="search-field">
+                <input id="search" class="searchBar" placeholder="Search" type="search" onkeypress="doSearch(event)">
+            </div>
+            <h1>Searching...</h1>
+            <span class="subtitle"></span>
+            <ul id="search-results"></ul>
+        </div>
+    </body>
+</html>

apps/documenteditor/main/resources/help/ru/Contents.json

@@ -1,45 +1,52 @@
 [
-    {"src":"UsageInstructions/SetPageParameters.htm", "name": "Задание параметров страницы", "headername": "Инструкции по использованию"},
+    {"src": "ProgramInterface/ProgramInterface.htm", "name": "Знакомство с пользовательским интерфейсом редактора документов", "headername": "Интерфейс программы"},
+	{"src": "ProgramInterface/FileTab.htm", "name": "Вкладка Файл"},
+	{"src": "ProgramInterface/HomeTab.htm", "name": "Вкладка Главная"},
+	{"src": "ProgramInterface/InsertTab.htm", "name": "Вкладка Вставка"},
+	{"src": "ProgramInterface/LayoutTab.htm", "name": "Вкладка Макет"},
+	{"src": "ProgramInterface/ReviewTab.htm", "name": "Вкладка Рецензирование"},
+    {"src": "ProgramInterface/PluginsTab.htm", "name": "Вкладка Плагины" },
+    {"src": "UsageInstructions/ChangeColorScheme.htm", "name": "Изменение цветовой схемы", "headername": "Базовые операции" },
     {"src":"UsageInstructions/CopyPasteUndoRedo.htm", "name": "Копирование/вставка текста, отмена/повтор действий"},
+    {"src":"UsageInstructions/OpenCreateNew.htm", "name": "Создание нового документа или открытие существующего"},
+    {"src":"UsageInstructions/SetPageParameters.htm", "name": "Задание параметров страницы", "headername": "Форматирование страницы" },
     {"src":"UsageInstructions/NonprintingCharacters.htm", "name": "Отображение/скрытие непечатаемых символов"},
-    {"src":"UsageInstructions/AlignText.htm", "name": "Выравнивание текста в абзаце"},
+    {"src":"UsageInstructions/SectionBreaks.htm", "name": "Вставка разрывов раздела"},
-    {"src":"UsageInstructions/FormattingPresets.htm", "name": "Применение стилей форматирования"},
+    {"src":"UsageInstructions/InsertHeadersFooters.htm", "name": "Вставка колонтитулов"},
-    {"src":"UsageInstructions/ChangeColorScheme.htm", "name": "Изменение цветовой схемы"},
+    {"src":"UsageInstructions/InsertPageNumbers.htm", "name": "Вставка номеров страниц" },
-	{"src":"UsageInstructions/BackgroundColor.htm", "name": "Выбор цвета фона для абзаца"},
+    {"src":"UsageInstructions/InsertFootnotes.htm", "name": "Вставка сносок" },
+    {"src":"UsageInstructions/AlignText.htm", "name": "Выравнивание текста в абзаце", "headername": "Форматирование абзаца" },
+    {"src":"UsageInstructions/BackgroundColor.htm", "name": "Выбор цвета фона для абзаца"},
     {"src":"UsageInstructions/ParagraphIndents.htm", "name": "Изменение отступов абзацев"},
     {"src":"UsageInstructions/LineSpacing.htm", "name": "Задание междустрочного интервала в абзацах"},
-    {"src":"UsageInstructions/PageBreaks.htm", "name": "Вставка разрывов страниц"},
+    {"src":"UsageInstructions/PageBreaks.htm", "name": "Вставка разрывов страниц" },
-	{"src":"UsageInstructions/SectionBreaks.htm", "name": "Вставка разрывов раздела"},
+    {"src":"UsageInstructions/AddBorders.htm", "name": "Добавление границ" },
-    {"src":"UsageInstructions/AddBorders.htm", "name": "Добавление границ"},
-    {"src":"UsageInstructions/FontTypeSizeColor.htm", "name": "Задание типа, размера и цвета шрифта"},
-    {"src":"UsageInstructions/DecorationStyles.htm", "name": "Применение стилей оформления шрифта"},
-    {"src":"UsageInstructions/CopyClearFormatting.htm", "name": "Копирование/очистка форматирования текста"},
     {"src":"UsageInstructions/SetTabStops.htm", "name": "Установка позиций табуляции"},
     {"src":"UsageInstructions/CreateLists.htm", "name": "Создание списков"},
-    {"src":"UsageInstructions/InsertTables.htm", "name": "Вставка таблиц"},
+    {"src":"UsageInstructions/FormattingPresets.htm", "name": "Применение стилей форматирования", "headername": "Форматирование текста"},    
-    {"src":"UsageInstructions/InsertImages.htm", "name": "Вставка изображений"},
+    {"src":"UsageInstructions/FontTypeSizeColor.htm", "name": "Задание типа, размера и цвета шрифта"},
-    {"src":"UsageInstructions/InsertAutoshapes.htm", "name": "Вставка автофигур"},
+    {"src":"UsageInstructions/DecorationStyles.htm", "name": "Применение стилей оформления шрифта"},
-    {"src": "UsageInstructions/InsertCharts.htm", "name": "Вставка диаграмм" },
+    {"src":"UsageInstructions/CopyClearFormatting.htm", "name": "Копирование/очистка форматирования текста" },
-    {"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Выравнивание и упорядочивание объектов на странице" },
-    {"src": "UsageInstructions/ChangeWrappingStyle.htm", "name": "Изменение стиля обтекания текстом"},
     {"src":"UsageInstructions/AddHyperlinks.htm", "name": "Добавление гиперссылок"},
     {"src":"UsageInstructions/InsertDropCap.htm", "name": "Вставка буквицы"},    
-    {"src":"UsageInstructions/InsertHeadersFooters.htm", "name": "Вставка колонтитулов"},
+    {"src":"UsageInstructions/InsertTables.htm", "name": "Вставка таблиц", "headername": "Действия над объектами"},
-    { "src": "UsageInstructions/InsertPageNumbers.htm", "name": "Вставка номеров страниц" },
+    {"src":"UsageInstructions/InsertImages.htm", "name": "Вставка изображений"},
-    {"src": "UsageInstructions/InsertFootnotes.htm", "name": "Вставка сносок" },
+    {"src":"UsageInstructions/InsertAutoshapes.htm", "name": "Вставка автофигур"},
-    {"src": "UsageInstructions/InsertEquation.htm", "name": "Вставка формул" },
+    {"src":"UsageInstructions/InsertCharts.htm", "name": "Вставка диаграмм" },
-    {"src": "UsageInstructions/InsertTextObjects.htm", "name": "Вставка текстовых объектов" },
+    {"src":"UsageInstructions/InsertTextObjects.htm", "name": "Вставка текстовых объектов" },
-    {"src": "UsageInstructions/UseMailMerge.htm", "name": "Использование слияния"},
+    {"src":"UsageInstructions/AlignArrangeObjects.htm", "name": "Выравнивание и упорядочивание объектов на странице" },
-    {"src":"UsageInstructions/ViewDocInfo.htm", "name": "Просмотр сведений о документе"},
+    {"src":"UsageInstructions/ChangeWrappingStyle.htm", "name": "Изменение стиля обтекания текстом"},
-    {"src":"UsageInstructions/SavePrintDownload.htm", "name": "Сохранение/загрузка/печать документа"},
+    {"src":"UsageInstructions/UseMailMerge.htm", "name": "Использование слияния", "headername": "Слияние"},    
-    {"src":"UsageInstructions/OpenCreateNew.htm", "name": "Создание нового документа или открытие существующего"},
+    {"src":"UsageInstructions/InsertEquation.htm", "name": "Вставка формул", "headername": "Математические формулы"},
-    {"src":"HelpfulHints/About.htm", "name": "О редакторе документов", "headername": "Полезные советы"},
+    {"src":"HelpfulHints/CollaborativeEditing.htm", "name": "Совместное редактирование документа", "headername": "Совместное редактирование документов"},
-    {"src":"HelpfulHints/SupportedFormats.htm", "name": "Поддерживаемые форматы электронных документов"},
+    {"src":"HelpfulHints/Review.htm", "name": "Рецензирование документа"},    
-    {"src":"HelpfulHints/AdvancedSettings.htm", "name": "Дополнительные параметры редактора документов"},
+    {"src":"UsageInstructions/ViewDocInfo.htm", "name": "Просмотр сведений о документе", "headername": "Инструменты и настройки"},
+    {"src":"UsageInstructions/SavePrintDownload.htm", "name": "Сохранение/скачивание/печать документа" },
+    {"src":"HelpfulHints/AdvancedSettings.htm", "name": "Дополнительные параметры редактора документов" },
     {"src":"HelpfulHints/Navigation.htm", "name": "Параметры представления и инструменты навигации"},
     {"src":"HelpfulHints/Search.htm", "name": "Функция поиска и замены"},    
-    { "src": "HelpfulHints/CollaborativeEditing.htm", "name": "Совместное редактирование документа" },
-    {"src": "HelpfulHints/Review.htm", "name": "Рецензирование документа"},
     {"src":"HelpfulHints/SpellChecking.htm", "name": "Проверка орфографии"},    
+    {"src":"HelpfulHints/About.htm", "name": "О редакторе документов", "headername": "Полезные советы"},
+    {"src":"HelpfulHints/SupportedFormats.htm", "name": "Поддерживаемые форматы электронных документов"},    
     {"src":"HelpfulHints/KeyboardShortcuts.htm", "name": "Сочетания клавиш"}
 ]

apps/documenteditor/main/resources/help/ru/HelpfulHints/About.htm

@@ -5,8 +5,9 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Краткое описание редактора документов" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
-	</head>
+    </head>
 	<body>
 		<div class="mainpart">
         <div class="search-field">

apps/documenteditor/main/resources/help/ru/HelpfulHints/AdvancedSettings.htm

@@ -5,6 +5,7 @@
 		<meta charset="utf-8" />
         <meta name="description" content="Дополнительные параметры редактора документов" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
         <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>

apps/documenteditor/main/resources/help/ru/HelpfulHints/CollaborativeEditing.htm

@@ -33,7 +33,7 @@
                 <p>Если файл не просматривают или не редактируют другие пользователи, значок в шапке редактора будет выглядеть следующим образом: <img alt="Значок Управление правами доступа к документу" src="../images/access_rights.png" />. С его помощью можно непосредственно из документа управлять пользователями, имеющими доступ к файлу: приглашать новых пользователей, предоставляя им права на редактирование, просмотр или рецензирование документа, или запрещать доступ к файлу для некоторых пользователей. Нажмите на этот значок для управления доступом к файлу; это можно сделать и в отсутствие других пользователей, которые просматривают или совместно редактируют документ в настоящий момент, и при наличии других пользователей, когда значок выглядит так: <img alt="Значок Количество пользователей" src="../images/usersnumber.png" />.</p>
                 <p>Как только один из пользователей сохранит свои изменения, нажав на значок <img alt="Значок Сохранить" src="../images/savewhilecoediting.png" />, все остальные увидят в строке состояния примечание, которое сообщает о наличии обновлений. Чтобы сохранить внесенные вами изменения и сделать их доступными для других пользователей, а также получить обновления, сохраненные другими пользователями, нажмите на значок <img alt="Значок Сохранить и получить обновления" src="../images/saveupdate.png" /> в левом верхнем углу верхней панели инструментов. Обновления будут подсвечены, чтобы Вы могли проверить, что конкретно изменилось.</p>
                 <p>Можно указать, какие изменения требуется подсвечивать во время совместного редактирования: для этого нажмите на вкладку <b>Файл</b> на верхней панели инструментов, выберите опцию <b>Дополнительные параметры...</b>, а затем укажите, отображать ли <b>все</b> или <b>последние</b> изменения, внесенные при совместной работе. При выборе опции <b>Все</b> будут подсвечиваться все изменения, внесенные за время текущей сессии. При выборе опции <b>Последние</b> будут подсвечиваться только те изменения, которые были внесены с момента, когда Вы последний раз нажимали на значок <img alt="Значок Сохранить и получить изменения" src="../images/saveupdate.png" />. При выборе опции <b>Никакие</b> изменения, внесенные во время текущей сессии, подсвечиваться не будут.</p>
-                <h3>Чат</h3>
+                <h3 id="chat">Чат</h3>
                 <p>Этот инструмент можно использовать для оперативного согласования процесса совместного редактирования, например, для того, чтобы договориться с другими участниками, кто и что должен делать, какой абзац вы собираетесь сейчас отредактировать и т.д.</p>
                 <p>Сообщения в чате хранятся только в течение одной сессии. Для обсуждения содержания документа лучше использовать комментарии, которые хранятся до тех пор, пока вы не решите их удалить.</p>
                 <p>Чтобы войти в чат и оставить сообщение для других пользователей:</p>
@@ -45,7 +45,7 @@
                 <p>Все сообщения, оставленные пользователями, будут отображаться на панели слева. Если есть новые сообщения, которые Вы еще не прочитали, значок чата будет выглядеть так - <img alt="Значок Чат" src="../images/chaticon_new.png" />.</p>
                 <p>Чтобы закрыть панель с сообщениями чата, нажмите на значок <img alt="Значок Чат" src="../images/chaticon.png" /> еще раз.</p>
             </div>
-                <h3>Комментарии</h3>
+            <h3 id="comments">Комментарии</h3>
                 <p>Чтобы оставить комментарий:</p>
                 <ol>
                     <li>выделите фрагмент текста, в котором, по Вашему мнению, содержится какая-то ошибка или проблема,</li>

apps/documenteditor/main/resources/help/ru/HelpfulHints/Navigation.htm

@@ -5,7 +5,8 @@
 		<meta charset="utf-8" />
 		<meta name="description" content="Описание параметров представления и инструментов навигации, таких как масштаб, кнопки предыдущей/следующей страницы" />
 		<link type="text/css" rel="stylesheet" href="../editor.css" />
-		<script type="text/javascript" src="../search/js/page-search.js"></script>
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
 	</head>
 	<body>
 		<div class="mainpart">

apps/documenteditor/main/resources/help/ru/HelpfulHints/Review.htm

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Советы по работе с функцией рецензирования документа" />
     <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
     <script type="text/javascript" src="../search/js/page-search.js"></script>
 </head>
 <body>
@@ -23,14 +24,14 @@
             <li>перейдите на вкладку <b>Рецензирование</b> на верхней панели инструментов и нажмите на кнопку <img alt="Кнопка Отслеживание изменений" src="../images/trackchangestoptoolbar.png" /> <b>Отслеживание изменений</b>.</li>
         </ul>
         <p class="note"><b>Примечание</b>: рецензенту нет необходимости включать опцию <b>Отслеживание изменений</b>. Она включена по умолчанию, и ее нельзя отключить, если к документу предоставлен доступ с правами только на рецензирование.</p>
-        <h3>Выбор режима отображения изменений</h3>
+        <h3 id="displaymode">Выбор режима отображения изменений</h3>
         <p>Нажмите кнопку <img alt="Кнопка Отображение" src="../images/review_displaymode.png" /> <b>Отображение</b> на верхней панели инструментов и выберите из списка один из доступных режимов:</p>
         <ul>
             <li><b>Все изменения (Редактирование)</b> - эта опция выбрана по умолчанию. Она позволяет и просматривать предложенные изменения, и редактировать документ.</li>
             <li><b>Все изменения приняты (Просмотр)</b> - этот режим используется, чтобы отобразить все изменения, как если бы они были приняты. Эта опция не позволяет в действительности принять все изменения, а только дает возможность увидеть, как будет выглядеть документ после того, как вы примете все изменения. В этом режиме документ нельзя редактировать.</li>
             <li><b>Все изменения отклонены (Просмотр)</b> - этот режим используется, чтобы отобразить все изменения, как если бы они были отклонены. Эта опция не позволяет в действительности отклонить все изменения, а только дает возможность просмотреть документ без изменений. В этом режиме документ нельзя редактировать.</li>
         </ul>
-        <h3>Принятие и отклонение изменений</h3>
+        <h3 id="managechanges">Принятие и отклонение изменений</h3>
         <p>Используйте кнопки <img alt="Кнопка К предыдущему изменению" src="../images/review_previous.png" /> <b>К предыдущему</b> и <img alt="Кнопка К следующему изменению" src="../images/review_next.png" /> <b>К следующему</b> на верхней панели инструментов для навигации по изменениям.</p>
         <p>Чтобы принять выделенное в данный момент изменение, можно сделать следующее:</p>
         <ul>