Merge pull request #42 from ONLYOFFICE/feature/de-content-controls

Feature/de content controls

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

@@ -293,3 +293,4 @@
 .button-normal-icon(btn-img-bkwd,         27, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-frwd,         28, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-wrap,         29, @toolbar-big-icon-size);
+.button-normal-icon(btn-controls,         54, @toolbar-big-icon-size);

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

@@ -56,7 +56,8 @@ define([
     'documenteditor/main/app/view/PageSizeDialog',
     'documenteditor/main/app/view/NoteSettingsDialog',
     'documenteditor/main/app/controller/PageLayout',
-    'documenteditor/main/app/view/CustomColumnsDialog'
+    'documenteditor/main/app/view/CustomColumnsDialog',
+    'documenteditor/main/app/view/ControlSettingsDialog'
 ], function () {
     'use strict';
 
@@ -283,6 +284,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));
@@ -640,7 +642,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();
@@ -686,6 +689,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() : AscCommonWord.sdtlock_Unlocked,
+                control_plain = (in_control&&control_props) ? (control_props.get_ContentControlType()==AscCommonWord.sdttype_InlineLevel) : false;
+            (lock_type===undefined) && (lock_type = AscCommonWord.sdtlock_Unlocked);
+
+            if (!paragraph_locked && !header_locked) {
+                toolbar.btnContentControls.menu.items[0].setDisabled(control_plain || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_ContentLocked);
+                toolbar.btnContentControls.menu.items[1].setDisabled(control_plain || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_ContentLocked);
+                toolbar.btnContentControls.menu.items[3].setDisabled(!in_control || lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_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;
@@ -714,22 +730,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_equation && !btn_eq_state || this.api.asc_IsCursorInFootnote();
+            need_disable = paragraph_locked || header_locked || in_header || 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);
@@ -740,10 +756,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;
@@ -752,11 +768,11 @@ define([
 
             toolbar.btnEditHeader.setDisabled(in_equation);
 
-            need_disable = paragraph_locked || in_equation || in_image || in_header;
+            need_disable = paragraph_locked || in_equation || in_image || in_header || control_plain;
             if (need_disable !== toolbar.btnNotes.isDisabled())
                 toolbar.btnNotes.setDisabled(need_disable);
 
-            need_disable = paragraph_locked || header_locked || in_image;
+            need_disable = paragraph_locked || header_locked || in_image || control_plain;
             if (need_disable != toolbar.btnColumns.isDisabled())
                 toolbar.btnColumns.setDisabled(need_disable);
 
@@ -1667,6 +1683,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

@@ -138,6 +138,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_Id();
+                this.txtName.setValue(val ? val : '');
+
+                val = props.get_Tag();
+                this.txtTag.setValue(val ? val : '');
+
+                val = props.get_Lock();
+                (val===undefined) && (val = AscCommonWord.sdtlock_Unlocked);
+                this.chLockDelete.setValue(val==AscCommonWord.sdtlock_SdtContentLocked || val==AscCommonWord.sdtlock_SdtLocked);
+                this.chLockEdit.setValue(val==AscCommonWord.sdtlock_SdtContentLocked || val==AscCommonWord.sdtlock_ContentLocked);
+            }
+        },
+
+        getSettings: function () {
+            var props   = new AscCommonWord.CContentControlPr();
+
+
+            props.put_Id(this.txtName.getValue());
+            props.put_Tag(this.txtTag.getValue());
+
+
+            var lock = AscCommonWord.sdtlock_Unlocked;
+
+            if (this.chLockDelete.getValue()=='checked' && this.chLockEdit.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_SdtContentLocked;
+            else if (this.chLockDelete.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_SdtLocked;
+            else if (this.chLockEdit.getValue()=='checked')
+                lock = AscCommonWord.sdtlock_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({
@@ -1791,6 +1792,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;
 
@@ -2484,6 +2507,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
@@ -2742,6 +2786,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() : AscCommonWord.sdtlock_Unlocked;
+                        menuTableRemoveControl.setDisabled(lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_SdtLocked);
+                    }
                 },
                 items: [
                     me.menuSpellCheckTable,
@@ -2862,6 +2914,7 @@ define([
                     menuAddHyperlinkTable,
                     menuHyperlinkTable,
                     menuHyperlinkSeparator,
+                    menuTableControl,
                     menuParagraphAdvancedInTable
                 ]
             }).on('hide:after', function(menu, e, isFromInputControl) {
@@ -3117,6 +3170,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()));
@@ -3216,6 +3284,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() : AscCommonWord.sdtlock_Unlocked;
+                        menuParaRemoveControl.setDisabled(lock_type==AscCommonWord.sdtlock_SdtContentLocked || lock_type==AscCommonWord.sdtlock_SdtLocked);
+                    }
                 },
                 items: [
                     me.menuSpellPara,
@@ -3230,6 +3308,9 @@ define([
                     menuParaPaste,
                     { caption: '--' },
                     menuEquationSeparator,
+                    menuParaRemoveControl,
+                    menuParaControlSettings,
+                    menuParaControlSeparator,
                     menuParagraphBreakBefore,
                     menuParagraphKeepLines,
                     menuParagraphVAlign,
@@ -3546,7 +3627,12 @@ define([
         strSign: 'Sign',
         strDetails: 'Signature Details',
         strSetup: 'Signature Setup',
-        strDelete: 'Remove Signature'
+        strDelete: 'Remove Signature',
+        textContentControls: 'Content control',
+        textRemove: 'Remove',
+        textSettings: 'Settings',
+        textRemoveControl: 'Remove content control',
+        textEditControls: 'Content control settings'
 
     }, DE.Views.DocumentHolder || {}));
 });

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

@@ -608,6 +608,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: AscCommonWord.sdttype_InlineLevel
+                            },
+                            {
+                                caption: this.textRichControl,
+                                iconCls: 'mnu-control-rich',
+                                value: AscCommonWord.sdttype_BlockLevel
+                            },
+                            {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',
@@ -1270,6 +1304,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-inshyperlink', this.btnInsertHyperlink);
                 _injectComponent('#slot-btn-editheader', this.btnEditHeader);
@@ -1527,6 +1562,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);
@@ -2470,7 +2506,13 @@ define([
             capBtnComment: 'Comment',
             textColumnsCustom: 'Custom Columns',
             textSurface: 'Surface',
-            textTabProtect: 'Protection'
+            textTabProtect: 'Protection',
+            capBtnInsControls: 'Content Control',
+            textRichControl: 'Rich text',
+            textPlainControl: 'Plain text',
+            textRemoveControl: 'Remove',
+            mniEditControls: 'Settings',
+            tipControls: 'Insert content control'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -783,6 +783,14 @@
   "DE.Views.ChartSettings.txtTight": "Tight",
   "DE.Views.ChartSettings.txtTitle": "Chart",
   "DE.Views.ChartSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ControlSettingsDialog.textTitle": "Content Control Settings",
+  "DE.Views.ControlSettingsDialog.textName": "Title",
+  "DE.Views.ControlSettingsDialog.textTag": "Tag",
+  "DE.Views.ControlSettingsDialog.txtLockDelete": "Content control cannot be deleted",
+  "DE.Views.ControlSettingsDialog.txtLockEdit": "Contents cannot be edited",
+  "DE.Views.ControlSettingsDialog.textLock": "Locking",
+  "DE.Views.ControlSettingsDialog.cancelButtonText": "Cancel",
+  "DE.Views.ControlSettingsDialog.okButtonText": "Ok",
   "DE.Views.CustomColumnsDialog.cancelButtonText": "Cancel",
   "DE.Views.CustomColumnsDialog.okButtonText": "Ok",
   "DE.Views.CustomColumnsDialog.textColumns": "Number of columns",
@@ -961,6 +969,11 @@
   "DE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "DE.Views.DocumentHolder.updateStyleText": "Update %1 style",
   "DE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "DE.Views.DocumentHolder.textContentControls": "Content control",
+  "DE.Views.DocumentHolder.textRemove": "Remove",
+  "DE.Views.DocumentHolder.textSettings": "Settings",
+  "DE.Views.DocumentHolder.textRemoveControl": "Remove content control",
+  "DE.Views.DocumentHolder.textEditControls": "Content control settings",
   "DE.Views.DropcapSettingsAdvanced.cancelButtonText": "Cancel",
   "DE.Views.DropcapSettingsAdvanced.okButtonText": "Ok",
   "DE.Views.DropcapSettingsAdvanced.strBorders": "Borders & Fill",
@@ -1791,5 +1804,11 @@
   "DE.Views.Toolbar.txtScheme6": "Concourse",
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
-  "DE.Views.Toolbar.txtScheme9": "Foundry"
+  "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.capBtnInsControls": "Content Control",
+  "DE.Views.Toolbar.textRichControl": "Rich text",
+  "DE.Views.Toolbar.textPlainControl": "Plain text",
+  "DE.Views.Toolbar.textRemoveControl": "Remove",
+  "DE.Views.Toolbar.mniEditControls": "Settings",
+  "DE.Views.Toolbar.tipControls": "Insert content control"
 }

apps/documenteditor/main/resources/less/toolbar.less

@@ -364,6 +364,10 @@
 
 .menu-icon-normal(mnu-orient-portrait,     36, @menu-icon-size);
 .menu-icon-normal(mnu-orient-landscape,    37, @menu-icon-size);
+.menu-icon-normal(mnu-control-plain,       38, @menu-icon-size);
+.menu-icon-normal(mnu-control-rich,        39, @menu-icon-size);
+.menu-icon-normal(mnu-control-remove,      40, @menu-icon-size);
+
 .menu-otherstates-icon(ppm-toolbar, @menu-icon-size);