From 39197ed975bc1ca925fb986f043cb7ab7dc2bee5 Mon Sep 17 00:00:00 2001
From: Konstantin Kireyev <konstantin.kireyev@onlyoffice.com>
Date: Wed, 18 Sep 2024 16:03:45 +0500
Subject: [PATCH] fix/[de,pe,de]: remove apply button

---
 .../main/lib/view/DocumentPropertyDialog.js   |  18 +-
 .../main/app/view/FileMenuPanels.js           | 169 +++++++++---------
 apps/documenteditor/main/locale/en.json       |   1 +
 .../main/resources/less/filemenu.less         |  16 +-
 .../main/app/view/FileMenuPanels.js           | 167 ++++++++---------
 apps/presentationeditor/main/locale/en.json   |   1 +
 .../main/resources/less/leftmenu.less         |  18 +-
 .../main/app/view/FileMenuPanels.js           | 163 +++++++++--------
 apps/spreadsheeteditor/main/locale/en.json    |   1 +
 .../main/resources/less/leftmenu.less         |  18 +-
 10 files changed, 302 insertions(+), 270 deletions(-)

diff --git a/apps/common/main/lib/view/DocumentPropertyDialog.js b/apps/common/main/lib/view/DocumentPropertyDialog.js
index 18339f97be..9768508def 100644
--- a/apps/common/main/lib/view/DocumentPropertyDialog.js
+++ b/apps/common/main/lib/view/DocumentPropertyDialog.js
@@ -84,13 +84,17 @@ define([], function () { 'use strict';
         render: function() {
             Common.UI.Window.prototype.render.call(this);
 
+            var me = this;
             this.inputTitle = new Common.UI.InputField({
                 el: $('#id-dlg-title'),
                 allowBlank: false,
+                blankError: this.txtPropertyTitleBlankError,
                 validateOnBlur: false,
                 hideErrorOnInput: true,
                 validation: function(value) {
-                    return value.length === 0 ? this.txtPropertyTitleBlankError : true;
+                    if (me.options.nameValidator !== undefined) {
+                        return me.options.nameValidator(value);
+                    }
                 }
             });
             if (this.options.defaultValue.name) {
@@ -111,7 +115,8 @@ define([], function () { 'use strict';
                 dataHint: '1',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big',
-                ariaLabel: this.strLineHeight
+                ariaLabel: this.strLineHeight,
+                takeFocusOnClose: true
             });
             var currentType = this.options.defaultValue.type ? this.asc2type(this.options.defaultValue.type) : 'text'
             this.comboboxType.setValue(currentType);
@@ -126,11 +131,9 @@ define([], function () { 'use strict';
                 style: 'width: 100%;',
                 validateOnBlur: false,
                 hideErrorOnInput: true,
+                allowBlank: false,
+                blankError: this.txtPropertyValueBlankError,
                 validation: function(value) {
-                    if (value.length === 0) {
-                        return this.txtPropertyValueBlankError;
-                    }
-
                     if (this.comboboxType.getValue() === 'number' && (typeof value !== 'number' && isNaN(value.replace(',', '.')))) {
                         return this.txtPropertyTypeNumberInvalid;
                     }
@@ -159,7 +162,8 @@ define([], function () { 'use strict';
                 dataHint: '1',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big',
-                ariaLabel: this.strLineHeight
+                ariaLabel: this.strLineHeight,
+                takeFocusOnClose: true
             });
             this.comboboxBoolean.setValue(this.options.defaultValue.value !== undefined && currentType === 'boolean' ? (this.options.defaultValue.value ? 1 : 0) : 1);
             this.comboboxBoolean.setVisible(this.options.defaultValue.type ? this.options.defaultValue.type === AscCommon.c_oVariantTypes.vtBool : currentType === 'boolean');
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index d31b79372c..c2c4c69626 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -1470,16 +1470,6 @@ define([], function () {
                         '</tr>',
                     '</table>',
                 '</div>',
-                '<div id="fms-flex-apply">',
-                    '<table class="main">',
-                        '<tr>',
-                            '<td class="left"></td>',
-                            '<td class="right">',
-                                '<button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button>',
-                            '</td>',
-                        '</tr>',
-                    '</table>',
-                '</div>'
             ].join(''));
 
             this.infoObj = {PageCount: 0, WordsCount: 0, ParagraphCount: 0, SymbolsCount: 0, SymbolsWSCount:0};
@@ -1537,7 +1527,11 @@ define([], function () {
                 dataHintDirection: 'left',
                 dataHintOffset: 'small',
                 ariaLabel: this.txtTitle
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putTitle(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputTags = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-tags'),
                 style       : 'width: 200px;',
@@ -1547,7 +1541,11 @@ define([], function () {
                 dataHintDirection: 'left',
                 dataHintOffset: 'small',
                 ariaLabel: this.txtTags
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putKeywords(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputSubject = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
@@ -1557,7 +1555,11 @@ define([], function () {
                 dataHintDirection: 'left',
                 dataHintOffset: 'small',
                 ariaLabel: this.txtSubject
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putSubject(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputComment = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
@@ -1567,7 +1569,10 @@ define([], function () {
                 dataHintDirection: 'left',
                 dataHintOffset: 'small',
                 ariaLabel: this.txtComment
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putDescription(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
 
             // modify info
             this.lblModifyDate = $markup.findById('#id-info-modify-date');
@@ -1587,6 +1592,8 @@ define([], function () {
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.coreProps.asc_putCreator(me.authors.join(';'));
+                    me.api.asc_setCoreProps(me.coreProps);
                     me.updateScroller(true);
                 }
             });
@@ -1619,6 +1626,9 @@ define([], function () {
                     });
                     !isFromApply && me.inputAuthor.setValue('');
                 }
+
+                me.coreProps.asc_putCreator(me.authors.join(';'));
+                me.api.asc_setCoreProps(me.coreProps);
             }).on('keydown:before', keyDownBefore);
 
             // pdf info
@@ -1631,18 +1641,11 @@ define([], function () {
             this.lblPdfProducer = $markup.findById('#id-info-pdf-produce');
             this.lblFastWV = $markup.findById('#id-info-fast-wv');
 
-            this.btnApply = new Common.UI.Button({
-                el: $markup.findById('#fminfo-btn-apply')
-            });
-            this.btnApply.on('click', _.bind(this.applySettings, this));
-
             this.btnAddProperty = new Common.UI.Button({
                 el: $markup.findById('#fminfo-btn-add-property')
             });
             this.btnAddProperty.on('click', _.bind(this.onAddPropertyClick, this));
 
-            this.pnlApply = $markup.findById('#fms-flex-apply');
-
             this.rendered = true;
 
             this.updateInfo(this.doc);
@@ -1730,12 +1733,8 @@ define([], function () {
                 this._ShowHideInfoItem(this.lblDate, !!value);
             } else if (pdfProps)
                 this.updatePdfInfo(pdfProps);
-
-            if (this.api) {
-                _.each(this.api.asc_getAllCustomProperties(), _.bind(function(prop, idx) {
-                    this.renderCustomProperty(prop.asc_getName(), prop.asc_getType(), prop.asc_getValue(), idx);
-                }, this));
-            }
+            
+            this.renderCustomProperties();
         },
 
         updateFileInfo: function() {
@@ -1898,7 +1897,7 @@ define([], function () {
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
+            this.btnAddProperty.setVisible(mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             this.inputTitle._input.attr('placeholder', mode.isEdit ? this.txtAddText : '');
             this.inputTags._input.attr('placeholder', mode.isEdit ? this.txtAddText : '');
@@ -1962,10 +1961,10 @@ define([], function () {
                 value = this.dateToString(new Date(value), true);
             }
 
-            return '<tr data-name="' + name +'">' +
+            return '<tr data-custom-property>' +
                 '<td class="left"><label>' + name + '</label></td>' +
                 '<td class="right"><div class="custom-property-wrapper">' +
-                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' +  value +'">' +
+                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' + Common.Utils.String.htmlEncode(value) +'">' +
                 '<div class="tool close img-colored" data-hint="2" data-hint-direction="right" data-hint-offset="small"></div>' +
                 '</div></td></tr>';
         },
@@ -1985,49 +1984,59 @@ define([], function () {
             return text;
         },
 
-        renderCustomProperty: function(name, type, value, idx) {
-            var me = this;
-
-            var currentCustomProperty = $('tr[data-name="' + name + '"]');
-            if (currentCustomProperty.length) {
-                currentCustomProperty.off('click');
-                currentCustomProperty.html($(this.tplCustomProperty(name, type, value)));
-            } else {
-                currentCustomProperty = $(this.tplCustomProperty(name, type, value));
-                $('tbody.properties-tab').append(currentCustomProperty);
+        renderCustomProperties: function() {
+            if (!this.api) {
+                return;
             }
 
-            currentCustomProperty.on('click', function (e) {
-                if (currentCustomProperty.find('div.disabled').length) {
-                    return;
-                }
+            $('tr[data-custom-property]').remove();
 
-                var btn = currentCustomProperty.find(e.target);
-                if (btn.hasClass('close')) {
-                    me.api.asc_removeCustomProperty(idx);
-                    $('tr[data-name="' + name + '"]').remove();
-                } else if (btn.hasClass('form-control')) {
-                    (new Common.Views.DocumentPropertyDialog({
-                        title: me.txtDocumentPropertyUpdateTitle,
-                        lang: me.mode.lang,
-                        defaultValue: {
-                            name: name,
-                            type: type,
-                            value: value
-                        },
-                        handler: function(result, name, type, value) {
-                            if (result === 'ok') {
-                                me.api.asc_modifyCustomProperty(idx, name, type, value);
-                                me.renderCustomProperty(name, type, value, idx);
+            var properties = this.api.asc_getAllCustomProperties();
+            _.each(properties, _.bind(function(prop, idx) {
+                var me = this, name = prop.asc_getName(), type = prop.asc_getType(), value = prop.asc_getValue();
+                var $propertyEl = $(this.tplCustomProperty(name, type, value));
+
+                $('tbody.properties-tab').append($propertyEl);
+
+                $propertyEl.on('click', function (e) {
+                    if ($propertyEl.find('div.disabled').length) {
+                        return;
+                    }
+
+                    var btn = $propertyEl.find(e.target);
+                    if (btn.hasClass('close')) {
+                        me.api.asc_removeCustomProperty(idx);
+                        me.renderCustomProperties();
+                    } else if (btn.hasClass('form-control')) {
+                        (new Common.Views.DocumentPropertyDialog({
+                            title: me.txtDocumentPropertyUpdateTitle,
+                            lang: me.mode.lang,
+                            defaultValue: {
+                                name: name,
+                                type: type,
+                                value: value
+                            },
+                            nameValidator: function(newName) {
+                                if (newName !== name && _.some(properties, function (prop) { return prop.name === newName; })) {
+                                    return me.txtPropertyTitleConflictError;
+                                }
+
+                                return true;
+                            },
+                            handler: function(result, name, type, value) {
+                                if (result === 'ok') {
+                                    me.api.asc_modifyCustomProperty(idx, name, type, value);
+                                    me.renderCustomProperties();
+                                }
                             }
-                        }
-                    })).show();
-                }
-            })
+                        })).show();
+                    }
+                });
+            }, this));
         },
 
         setDisabledCustomProperties: function(disable) {
-            _.each($('tr[data-name]'), function(prop) {
+            _.each($('tr[data-custom-property]'), function(prop) {
                 $(prop).find('div.custom-property-wrapper')[disable ? 'addClass' : 'removeClass']('disabled');
                 $(prop).find('div.close')[disable ? 'hide' : 'show']();
             })
@@ -2070,7 +2079,6 @@ define([], function () {
             this.inputAuthor.setDisabled(disable);
             this.tblAuthor.find('.close').toggleClass('disabled', this._state._locked);
             this.tblAuthor.toggleClass('disabled', disable);
-            this.btnApply.setDisabled(this._state._locked);
             this.btnAddProperty.setDisabled(disable);
             this.setDisabledCustomProperties(disable);
         },
@@ -2079,31 +2087,23 @@ define([], function () {
             var me = this;
             (new Common.Views.DocumentPropertyDialog({
                 lang: me.mode.lang,
+                nameValidator: function(newName) {
+                    var properties = me.api.asc_getAllCustomProperties();
+                    if (_.some(properties, function (prop) { return prop.name === newName; })) {
+                        return me.txtPropertyTitleConflictError;
+                    }
+
+                    return true;
+                },
                 handler: function(result, title, type, value) {
                     if (result === 'ok') {
                         me.api.asc_addCustomProperty(title, type, value);
-                        var properties = me.api.asc_getAllCustomProperties();
-                        if (properties.length) {
-                            var prop = properties[properties.length - 1];
-                            me.renderCustomProperty(prop.asc_getName(), prop.asc_getType(), prop.asc_getValue(), properties.length - 1);
-                        }
+                        me.renderCustomProperties();
                     }
                 }
             })).show();
         },
 
-        applySettings: function() {
-            if (this.coreProps && this.api) {
-                this.coreProps.asc_putTitle(this.inputTitle.getValue());
-                this.coreProps.asc_putKeywords(this.inputTags.getValue());
-                this.coreProps.asc_putSubject(this.inputSubject.getValue());
-                this.coreProps.asc_putDescription(this.inputComment.getValue());
-                this.coreProps.asc_putCreator(this.authors.join(';'));
-                this.api.asc_setCoreProps(this.coreProps);
-            }
-            this.menu.hide();
-        },
-
         txtPlacement: 'Location',
         txtOwner: 'Owner',
         txtUploaded: 'Uploaded',
@@ -2139,6 +2139,7 @@ define([], function () {
         txtProperties: 'Properties',
         txtDocumentInfo: 'Document Info',
         txtDocumentPropertyUpdateTitle: "Document Property",
+        txtPropertyTitleConflictError: 'Property with this title already exists',
         txtAddProperty: 'Add property'
 
     }, DE.Views.FileMenuPanels.DocumentInfo || {}));
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index e1acf2ec58..bbe52492ee 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -2194,6 +2194,7 @@
   "DE.Views.FileMenuPanels.DocumentInfo.txtProperties": "Properties",
   "DE.Views.FileMenuPanels.DocumentInfo.txtDocumentPropertyUpdateTitle": "Document Property",
   "DE.Views.FileMenuPanels.DocumentInfo.txtAddProperty": "Add property",
+  "DE.Views.FileMenuPanels.DocumentInfo.txtPropertyTitleConflictError": "Property with this title already exists",
   "DE.Views.FileMenuPanels.DocumentRights.txtAccessRights": "Access rights",
   "DE.Views.FileMenuPanels.DocumentRights.txtBtnAccessRights": "Change access rights",
   "DE.Views.FileMenuPanels.DocumentRights.txtRights": "Persons who have rights",
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index fda3074b3c..d495d675fc 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -54,7 +54,7 @@
 
       .header {
         .font-size-very-huge();
-        margin-bottom: 20px;
+        margin-bottom: 30px;
       }
 
       .format-items {
@@ -205,7 +205,7 @@
 
   .header {
     .font-size-very-huge();
-    line-height: 26px;
+    line-height: 22px;
   }
 
   table {
@@ -226,7 +226,7 @@
     tr {
       display: flex;
       gap: 24px;
-      align-items: center;
+
       td {
         font-size: 11px;
         line-height: 16px;
@@ -241,8 +241,12 @@
 
         &.left {
           width: 120px;
-          height: 16px;
           flex-shrink: 0;
+          line-height: 22px;
+
+          label {
+            overflow-wrap: break-word;
+          }
         }
 
         &.right {
@@ -380,7 +384,7 @@
     padding: 0 0 0 10px;
     white-space: nowrap;
     margin-top: 30px;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 
     .rtl & {
       padding: 0 10px 10px 0;
@@ -794,7 +798,7 @@
   }
 
   #fms-btn-invisible-sign {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
   }
 
   #id-fms-lbl-protect-header {
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 680e592c69..ad560f200c 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1167,14 +1167,6 @@ define([], function () {
                         '</td>',
                     '</tr>',
                 '</table>',
-            '</div>',
-            '<div id="fms-flex-apply">',
-                '<table class="main">',
-                    '<tr>',
-                        '<td class="left"></td>',
-                        '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
-                    '</tr>',
-                '</table>',
             '</div>'
             ].join(''));
 
@@ -1213,7 +1205,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putTitle(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputTags = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-tags'),
                 style       : 'width: 200px;',
@@ -1222,7 +1218,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putKeywords(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputSubject = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
@@ -1231,7 +1231,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putSubject(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputComment = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
@@ -1240,7 +1244,10 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putDescription(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
 
             // modify info
             this.lblModifyDate = $markup.findById('#id-info-modify-date');
@@ -1260,6 +1267,8 @@ define([], function () {
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.coreProps.asc_putCreator(me.authors.join(';'));
+                    me.api.asc_setCoreProps(me.coreProps);
                     me.updateScroller(true);
                 }
             });
@@ -1291,15 +1300,11 @@ define([], function () {
                     });
                     !isFromApply && me.inputAuthor.setValue('');
                 }
+
+                me.coreProps.asc_putCreator(me.authors.join(';'));
+                me.api.asc_setCoreProps(me.coreProps);
             }).on('keydown:before', keyDownBefore);
 
-            this.btnApply = new Common.UI.Button({
-                el: $markup.findById('#fminfo-btn-apply')
-            });
-            this.btnApply.on('click', _.bind(this.applySettings, this));
-
-            this.pnlApply = $markup.findById('#fms-flex-apply');
-
             this.btnAddProperty = new Common.UI.Button({
                 el: $markup.findById('#fminfo-btn-add-property')
             });
@@ -1382,11 +1387,7 @@ define([], function () {
                 this._ShowHideInfoItem(this.lblDate, !!value);
             }
 
-            if (this.api) {
-                _.each(this.api.asc_getAllCustomProperties(), _.bind(function(prop, idx) {
-                    this.renderCustomProperty(prop.asc_getName(), prop.asc_getType(), prop.asc_getValue(), idx);
-                }, this));
-            }
+            this.renderCustomProperties();
         },
 
         updateFileInfo: function() {
@@ -1448,10 +1449,10 @@ define([], function () {
                 value = this.dateToString(new Date(value), true);
             }
 
-            return '<tr data-name="' + name +'">' +
+            return '<tr data-custom-property>' +
                 '<td class="left"><label>' + name + '</label></td>' +
                 '<td class="right"><div class="custom-property-wrapper">' +
-                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' +  value +'">' +
+                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' + Common.Utils.String.htmlEncode(value) +'">' +
                 '<div class="tool close img-colored" data-hint="2" data-hint-direction="right" data-hint-offset="small"></div>' +
                 '</div></td></tr>';
         },
@@ -1471,49 +1472,59 @@ define([], function () {
             return text;
         },
 
-        renderCustomProperty: function(name, type, value, idx) {
-            var me = this;
-
-            var currentCustomProperty = $('tr[data-name="' + name + '"]');
-            if (currentCustomProperty.length) {
-                currentCustomProperty.off('click');
-                currentCustomProperty.html($(this.tplCustomProperty(name, type, value)));
-            } else {
-                currentCustomProperty = $(this.tplCustomProperty(name, type, value));
-                $('tbody.properties-tab').append(currentCustomProperty);
+        renderCustomProperties: function() {
+            if (!this.api) {
+                return;
             }
 
-            currentCustomProperty.on('click', function (e) {
-                if (currentCustomProperty.find('div.disabled').length) {
-                    return;
-                }
+            $('tr[data-custom-property]').remove();
 
-                var btn = currentCustomProperty.find(e.target);
-                if (btn.hasClass('close')) {
-                    me.api.asc_removeCustomProperty(idx);
-                    $('tr[data-name="' + name + '"]').remove();
-                } else if (btn.hasClass('form-control')) {
-                    (new Common.Views.DocumentPropertyDialog({
-                        title: me.txtDocumentPropertyUpdateTitle,
-                        lang: me.mode.lang,
-                        defaultValue: {
-                            name: name,
-                            type: type,
-                            value: value
-                        },
-                        handler: function(result, name, type, value) {
-                            if (result === 'ok') {
-                                me.api.asc_modifyCustomProperty(idx, name, type, value);
-                                me.renderCustomProperty(name, type, value, idx);
+            var properties = this.api.asc_getAllCustomProperties();
+            _.each(properties, _.bind(function(prop, idx) {
+                var me = this, name = prop.asc_getName(), type = prop.asc_getType(), value = prop.asc_getValue();
+                var $propertyEl = $(this.tplCustomProperty(name, type, value));
+
+                $('tbody.properties-tab').append($propertyEl);
+
+                $propertyEl.on('click', function (e) {
+                    if ($propertyEl.find('div.disabled').length) {
+                        return;
+                    }
+
+                    var btn = $propertyEl.find(e.target);
+                    if (btn.hasClass('close')) {
+                        me.api.asc_removeCustomProperty(idx);
+                        me.renderCustomProperties();
+                    } else if (btn.hasClass('form-control')) {
+                        (new Common.Views.DocumentPropertyDialog({
+                            title: me.txtDocumentPropertyUpdateTitle,
+                            lang: me.mode.lang,
+                            defaultValue: {
+                                name: name,
+                                type: type,
+                                value: value
+                            },
+                            nameValidator: function(newName) {
+                                if (newName !== name && _.some(properties, function (prop) { return prop.name === newName; })) {
+                                    return me.txtPropertyTitleConflictError;
+                                }
+
+                                return true;
+                            },
+                            handler: function(result, name, type, value) {
+                                if (result === 'ok') {
+                                    me.api.asc_modifyCustomProperty(idx, name, type, value);
+                                    me.renderCustomProperties();
+                                }
                             }
-                        }
-                    })).show();
-                }
-            })
+                        })).show();
+                    }
+                });
+            }, this));
         },
 
         setDisabledCustomProperties: function(disable) {
-            _.each($('tr[data-name]'), function(prop) {
+            _.each($('tr[data-custom-property]'), function(prop) {
                 $(prop).find('div.custom-property-wrapper')[disable ? 'addClass' : 'removeClass']('disabled');
                 $(prop).find('div.close')[disable ? 'hide' : 'show']();
             })
@@ -1523,14 +1534,18 @@ define([], function () {
             var me = this;
             (new Common.Views.DocumentPropertyDialog({
                 lang: me.mode.lang,
+                nameValidator: function(newName) {
+                    var properties = me.api.asc_getAllCustomProperties();
+                    if (_.some(properties, function (prop) { return prop.name === newName; })) {
+                        return me.txtPropertyTitleConflictError;
+                    }
+
+                    return true;
+                },
                 handler: function(result, name, type, value) {
                     if (result === 'ok') {
                         me.api.asc_addCustomProperty(name, type, value);
-                        var properties = me.api.asc_getAllCustomProperties();
-                        if (properties.length) {
-                            var prop = properties[properties.length - 1];
-                            me.renderCustomProperty(prop.asc_getName(), prop.asc_getType(), prop.asc_getValue(), properties.length - 1);
-                        }
+                        me.renderCustomProperties();
                     }
                 }
             })).show();
@@ -1550,7 +1565,7 @@ define([], function () {
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
+            this.btnAddProperty.setVisible(mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
@@ -1584,23 +1599,10 @@ define([], function () {
             this.inputAuthor.setDisabled(disable);
             this.tblAuthor.find('.close').toggleClass('disabled', this._locked);
             this.tblAuthor.toggleClass('disabled', disable);
-            this.btnApply.setDisabled(this._locked);
             this.btnAddProperty.setDisabled(disable);
             this.setDisabledCustomProperties(disable);
         },
 
-        applySettings: function() {
-            if (this.coreProps && this.api) {
-                this.coreProps.asc_putTitle(this.inputTitle.getValue());
-                this.coreProps.asc_putKeywords(this.inputTags.getValue());
-                this.coreProps.asc_putSubject(this.inputSubject.getValue());
-                this.coreProps.asc_putDescription(this.inputComment.getValue());
-                this.coreProps.asc_putCreator(this.authors.join(';'));
-                this.api.asc_setCoreProps(this.coreProps);
-            }
-            this.menu.hide();
-        },
-
         txtPlacement: 'Location',
         txtOwner: 'Owner',
         txtUploaded: 'Uploaded',
@@ -1624,7 +1626,8 @@ define([], function () {
         txtDocumentPropertyUpdateTitle: "Document Property",
         txtAddProperty: 'Add property',
         txtYes: 'Yes',
-        txtNo: 'No'
+        txtNo: 'No',
+        txtPropertyTitleConflictError: 'Property with this title already exists',
     }, PE.Views.FileMenuPanels.DocumentInfo || {}));
 
     PE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index a796d6cf82..53709cfaf8 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -2053,6 +2053,7 @@
   "PE.Views.FileMenuPanels.DocumentInfo.txtProperties": "Properties",
   "PE.Views.FileMenuPanels.DocumentInfo.txtDocumentPropertyUpdateTitle": "Document Property",
   "PE.Views.FileMenuPanels.DocumentInfo.txtAddProperty": "Add property",
+  "PE.Views.FileMenuPanels.DocumentInfo.txtPropertyTitleConflictError": "Property with this title already exists",
   "PE.Views.FileMenuPanels.DocumentRights.txtAccessRights": "Access rights",
   "PE.Views.FileMenuPanels.DocumentRights.txtBtnAccessRights": "Change access rights",
   "PE.Views.FileMenuPanels.DocumentRights.txtRights": "Persons who have rights",
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 39b51e4a32..1c10a4034f 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -145,7 +145,7 @@
 
                 .header {
                     .font-size-very-huge();
-                    margin-bottom: 20px;
+                    margin-bottom: 30px;
                 }
 
                 .format-items {
@@ -243,7 +243,7 @@
                 padding: 0 0 0 10px;
                 white-space: nowrap;
                 margin-top: 30px;
-                margin-bottom: 20px;
+                margin-bottom: 30px;
 
                 .rtl & {
                     padding: 0 10px 10px 0;
@@ -517,7 +517,7 @@
 
             .header {
                 .font-size-very-huge();
-                line-height: 26px;
+                line-height: 22px;
             }
 
             table {
@@ -538,7 +538,7 @@
                 tr {
                     display: flex;
                     gap: 24px;
-                    align-items: center;
+
                     td {
                         font-size: 11px;
                         line-height: 16px;
@@ -553,8 +553,12 @@
 
                         &.left {
                             width: 120px;
-                            height: 16px;
                             flex-shrink: 0;
+                            line-height: 22px;
+
+                            label {
+                                overflow-wrap: break-word;
+                            }
                         }
 
                         &.right {
@@ -578,7 +582,7 @@
                 }
 
                 .author-info tbody tr:last-child {
-                    margin-bottom: 20px;
+                    margin-bottom: 30px;
                 }
 
                 &.main {
@@ -707,7 +711,7 @@
             }
 
             #fms-btn-invisible-sign {
-                margin-bottom: 20px;
+                margin-bottom: 30px;
             }
 
             #id-fms-lbl-protect-header {
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index c5901fb17b..ed49564719 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1639,14 +1639,6 @@ define([], function () {
                     '</tr>',
                 '</table>',
             '</div>',
-            '<div id="fms-flex-apply">',
-                '<table class="main">',
-                    '<tr>',
-                        '<td class="left"></td>',
-                        '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
-                    '</tr>',
-                '</table>',
-            '</div>'
             ].join(''));
 
             this.menu = options.menu;
@@ -1684,7 +1676,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putTitle(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputTags = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-tags'),
                 style       : 'width: 200px;',
@@ -1693,7 +1689,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putKeywords(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputSubject = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
@@ -1702,7 +1702,11 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putSubject(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
+
             this.inputComment = new Common.UI.InputField({
                 el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
@@ -1711,7 +1715,10 @@ define([], function () {
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
-            }).on('keydown:before', keyDownBefore);
+            }).on('keydown:before', keyDownBefore).on('changed:after', function(_, newValue) {
+                me.coreProps.asc_putDescription(newValue);
+                me.api.asc_setCoreProps(me.coreProps);
+            });
 
             // modify info
             this.lblModifyDate = $markup.findById('#id-info-modify-date');
@@ -1731,6 +1738,8 @@ define([], function () {
                         idx = me.tblAuthor.find('tr').index(el);
                     el.remove();
                     me.authors.splice(idx, 1);
+                    me.coreProps.asc_putCreator(me.authors.join(';'));
+                    me.api.asc_setCoreProps(me.coreProps);
                     me.updateScroller(true);
                 }
             });
@@ -1762,15 +1771,11 @@ define([], function () {
                     });
                     !isFromApply && me.inputAuthor.setValue('');
                 }
+
+                me.coreProps.asc_putCreator(me.authors.join(';'));
+                me.api.asc_setCoreProps(me.coreProps);
             }).on('keydown:before', keyDownBefore);
 
-            this.btnApply = new Common.UI.Button({
-                el: $markup.findById('#fminfo-btn-apply')
-            });
-            this.btnApply.on('click', _.bind(this.applySettings, this));
-
-            this.pnlApply = $markup.findById('#fms-flex-apply');
-
             this.btnAddProperty = new Common.UI.Button({
                 el: $markup.findById('#fminfo-btn-add-property')
             });
@@ -1852,6 +1857,8 @@ define([], function () {
                 this.lblDate.text(this.dateToString(value));
                 this._ShowHideInfoItem(this.lblDate, !!value);
             }
+
+            this.renderCustomProperties();
         },
 
         updateFileInfo: function() {
@@ -1920,7 +1927,7 @@ define([], function () {
         setMode: function(mode) {
             this.mode = mode;
             this.inputAuthor.setVisible(mode.isEdit);
-            this.pnlApply.toggleClass('hidden', !mode.isEdit);
+            this.btnAddProperty.setVisible(mode.isEdit);
             this.tblAuthor.find('.close').toggleClass('hidden', !mode.isEdit);
             if (!mode.isEdit) {
                 this.inputTitle._input.attr('placeholder', '');
@@ -1952,10 +1959,10 @@ define([], function () {
                 value = this.dateToString(new Date(value), true);
             }
 
-            return '<tr data-name="' + name +'">' +
+            return '<tr data-custom-property>' +
                 '<td class="left"><label>' + name + '</label></td>' +
                 '<td class="right"><div class="custom-property-wrapper">' +
-                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' +  value +'">' +
+                '<input type="text" spellcheck="false" class="form-control" readonly style="width: 200px;" value="' + Common.Utils.String.htmlEncode(value) +'">' +
                 '<div class="tool close img-colored" data-hint="2" data-hint-direction="right" data-hint-offset="small"></div>' +
                 '</div></td></tr>';
         },
@@ -1975,49 +1982,59 @@ define([], function () {
             return text;
         },
 
-        renderCustomProperty: function(name, type, value, idx) {
-            var me = this;
-
-            var currentCustomProperty = $('tr[data-name="' + name + '"]');
-            if (currentCustomProperty.length) {
-                currentCustomProperty.off('click');
-                currentCustomProperty.html($(this.tplCustomProperty(name, type, value)));
-            } else {
-                currentCustomProperty = $(this.tplCustomProperty(name, type, value));
-                $('tbody.properties-tab').append(currentCustomProperty);
+        renderCustomProperties: function() {
+            if (!this.api) {
+                return;
             }
 
-            currentCustomProperty.on('click', function (e) {
-                if (currentCustomProperty.find('div.disabled').length) {
-                    return;
-                }
+            $('tr[data-custom-property]').remove();
 
-                var btn = currentCustomProperty.find(e.target);
-                if (btn.hasClass('close')) {
-                    me.api.asc_removeCustomProperty(idx);
-                    $('tr[data-name="' + name + '"]').remove();
-                } else if (btn.hasClass('form-control')) {
-                    (new Common.Views.DocumentPropertyDialog({
-                        title: me.txtDocumentPropertyUpdateTitle,
-                        lang: me.mode.lang,
-                        defaultValue: {
-                            name: name,
-                            type: type,
-                            value: value
-                        },
-                        handler: function(result, name, type, value) {
-                            if (result === 'ok') {
-                                me.api.asc_modifyCustomProperty(idx, name, type, value);
-                                me.renderCustomProperty(name, type, value, idx);
+            var properties = this.api.asc_getAllCustomProperties();
+            _.each(properties, _.bind(function(prop, idx) {
+                var me = this, name = prop.asc_getName(), type = prop.asc_getType(), value = prop.asc_getValue();
+                var $propertyEl = $(this.tplCustomProperty(name, type, value));
+
+                $('tbody.properties-tab').append($propertyEl);
+
+                $propertyEl.on('click', function (e) {
+                    if ($propertyEl.find('div.disabled').length) {
+                        return;
+                    }
+
+                    var btn = $propertyEl.find(e.target);
+                    if (btn.hasClass('close')) {
+                        me.api.asc_removeCustomProperty(idx);
+                        me.renderCustomProperties();
+                    } else if (btn.hasClass('form-control')) {
+                        (new Common.Views.DocumentPropertyDialog({
+                            title: me.txtDocumentPropertyUpdateTitle,
+                            lang: me.mode.lang,
+                            defaultValue: {
+                                name: name,
+                                type: type,
+                                value: value
+                            },
+                            nameValidator: function(newName) {
+                                if (newName !== name && _.some(properties, function (prop) { return prop.name === newName; })) {
+                                    return me.txtPropertyTitleConflictError;
+                                }
+
+                                return true;
+                            },
+                            handler: function(result, name, type, value) {
+                                if (result === 'ok') {
+                                    me.api.asc_modifyCustomProperty(idx, name, type, value);
+                                    me.renderCustomProperties();
+                                }
                             }
-                        }
-                    })).show();
-                }
-            })
+                        })).show();
+                    }
+                });
+            }, this));
         },
 
         setDisabledCustomProperties: function(disable) {
-            _.each($('tr[data-name]'), function(prop) {
+            _.each($('tr[data-custom-property]'), function(prop) {
                 $(prop).find('div.custom-property-wrapper')[disable ? 'addClass' : 'removeClass']('disabled');
                 $(prop).find('div.close')[disable ? 'hide' : 'show']();
             })
@@ -2027,14 +2044,18 @@ define([], function () {
             var me = this;
             (new Common.Views.DocumentPropertyDialog({
                 lang: me.mode.lang,
+                nameValidator: function(newName) {
+                    var properties = me.api.asc_getAllCustomProperties();
+                    if (_.some(properties, function (prop) { return prop.name === newName; })) {
+                        return me.txtPropertyTitleConflictError;
+                    }
+
+                    return true;
+                },
                 handler: function(result, name, type, value) {
                     if (result === 'ok') {
                         me.api.asc_addCustomProperty(name, type, value);
-                        var properties = me.api.asc_getAllCustomProperties();
-                        if (properties.length) {
-                            var prop = properties[properties.length - 1];
-                            me.renderCustomProperty(prop.asc_getName(), prop.asc_getType(), prop.asc_getValue(), properties.length - 1);
-                        }
+                        me.renderCustomProperties();
                     }
                 }
             })).show();
@@ -2049,23 +2070,10 @@ define([], function () {
             this.inputAuthor.setDisabled(disable);
             this.tblAuthor.find('.close').toggleClass('disabled', this._locked);
             this.tblAuthor.toggleClass('disabled', disable);
-            this.btnApply.setDisabled(this._locked);
             this.btnAddProperty.setDisabled(disable);
             this.setDisabledCustomProperties(disable);
         },
 
-        applySettings: function() {
-            if (this.coreProps && this.api) {
-                this.coreProps.asc_putTitle(this.inputTitle.getValue());
-                this.coreProps.asc_putKeywords(this.inputTags.getValue());
-                this.coreProps.asc_putSubject(this.inputSubject.getValue());
-                this.coreProps.asc_putDescription(this.inputComment.getValue());
-                this.coreProps.asc_putCreator(this.authors.join(';'));
-                this.api.asc_setCoreProps(this.coreProps);
-            }
-            this.menu.hide();
-        },
-
         txtPlacement: 'Location',
         txtOwner: 'Owner',
         txtUploaded: 'Uploaded',
@@ -2088,7 +2096,8 @@ define([], function () {
         txtDocumentPropertyUpdateTitle: "Document Property",
         txtAddProperty: 'Add property',
         txtYes: 'Yes',
-        txtNo: 'No'
+        txtNo: 'No',
+        txtPropertyTitleConflictError: 'Property with this title already exists',
     }, SSE.Views.FileMenuPanels.DocumentInfo || {}));
 
     SSE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index e5e23ee212..ee0826f364 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -2660,6 +2660,7 @@
   "SSE.Views.FileMenuPanels.DocumentInfo.txtProperties": "Properties",
   "SSE.Views.FileMenuPanels.DocumentInfo.txtDocumentPropertyUpdateTitle": "Document Property",
   "SSE.Views.FileMenuPanels.DocumentInfo.txtAddProperty": "Add property",
+  "SSE.Views.FileMenuPanels.DocumentInfo.txtPropertyTitleConflictError": "Property with this title already exists",
   "SSE.Views.FileMenuPanels.DocumentRights.txtAccessRights": "Access Rights",
   "SSE.Views.FileMenuPanels.DocumentRights.txtBtnAccessRights": "Change access rights",
   "SSE.Views.FileMenuPanels.DocumentRights.txtRights": "Persons who have rights",
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 3b4ce1de98..f40f12152e 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -148,7 +148,7 @@
 
                 .header {
                     .font-size-very-huge();
-                    margin-bottom: 20px;
+                    margin-bottom: 30px;
                 }
 
                 .format-items {
@@ -185,7 +185,7 @@
 
             .header {
                 .font-size-very-huge();
-                line-height: 26px;
+                line-height: 22px;
             }
 
             table {
@@ -206,7 +206,7 @@
                 tr {
                     display: flex;
                     gap: 24px;
-                    align-items: center;
+
                     td {
                         font-size: 11px;
                         line-height: 16px;
@@ -221,8 +221,12 @@
 
                         &.left {
                             width: 120px;
-                            height: 16px;
                             flex-shrink: 0;
+                            line-height: 22px;
+
+                            label {
+                                overflow-wrap: break-word;
+                            }
                         }
 
                         &.right {
@@ -246,7 +250,7 @@
                 }
 
                 .author-info tbody tr:last-child {
-                    margin-bottom: 20px;
+                    margin-bottom: 30px;
                 }
 
                 &.main {
@@ -428,7 +432,7 @@
                 padding: 0 0 0 10px;
                 white-space: nowrap;
                 margin-top: 30px;
-                margin-bottom: 20px;
+                margin-bottom: 30px;
 
                 .rtl & {
                     padding: 0 10px 0 0;
@@ -793,7 +797,7 @@
             }
 
             #fms-btn-invisible-sign {
-                margin-bottom: 20px;
+                margin-bottom: 30px;
             }
 
             #id-fms-lbl-protect-header {