diff --git a/apps/common/main/lib/component/AceEditor.js b/apps/common/main/lib/component/AceEditor.js
new file mode 100644
index 0000000000..639bc53ab5
--- /dev/null
+++ b/apps/common/main/lib/component/AceEditor.js
@@ -0,0 +1,144 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2024
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([], function () {
+    'use strict';
+
+    Common.UI.AceEditor = Common.UI.BaseView.extend({
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            this.parentEl = options.parentEl;
+            this.parentEl && this.render(this.parentEl);
+        },
+
+        render: function (parentEl) {
+            this.parentEl = typeof parentEl === 'string' ? $(parentEl) : parentEl;
+
+            this.iframe = document.createElement("iframe");
+            this.iframe.width        = '100%';
+            this.iframe.height       = '100%';
+            this.iframe.align        = "top";
+            this.iframe.frameBorder  = 0;
+            this.iframe.scrolling    = "no";
+            this.iframe.onload       = _.bind(this._onLoad,this);
+            this.parentEl.append(this.iframe);
+
+            this.loadMask = new Common.UI.LoadMask({owner: this.parentEl});
+            this.loadMask.show();
+
+            this.iframe.src = '../../../vendor/ace/component/AceEditor.html?editorType=' + (window.SSE ? 'cell' : window.PE ? 'slide' : 'word');
+
+            var me = this;
+            this._eventfunc = function(msg) {
+                me._onMessage(msg);
+            };
+            this._bindWindowEvents.call(this);
+        },
+
+        _bindWindowEvents: function() {
+            if (window.addEventListener) {
+                window.addEventListener("message", this._eventfunc, false)
+            } else if (window.attachEvent) {
+                window.attachEvent("onmessage", this._eventfunc);
+            }
+        },
+
+        _unbindWindowEvents: function() {
+            if (window.removeEventListener) {
+                window.removeEventListener("message", this._eventfunc)
+            } else if (window.detachEvent) {
+                window.detachEvent("onmessage", this._eventfunc);
+            }
+        },
+
+        _postMessage: function(wnd, msg) {
+            if (wnd && wnd.postMessage && window.JSON) {
+                wnd.postMessage(window.JSON.stringify(msg), "*");
+            }
+        },
+
+        _onMessage: function(msg) {
+            var data = msg.data;
+            if (Object.prototype.toString.apply(data) !== '[object String]' || !window.JSON) {
+                return;
+            }
+            var cmd, handler;
+
+            try {
+                cmd = window.JSON.parse(data)
+            } catch(e) {
+                cmd = '';
+            }
+
+            if (cmd && cmd.referer == "ace-editor") {
+                if (cmd.command==='changeValue') {
+                    this.fireEvent('change', cmd.data);
+                }else if (cmd.command==='aceEditorReady') {
+                    this.fireEvent('ready', cmd.data);
+                }
+            }
+        },
+
+        _onLoad: function() {
+            this.updateTheme();
+            if (this.loadMask)
+                this.loadMask.hide();
+        },
+
+        setValue: function(value, readonly) {
+            this._postMessage(this.iframe.contentWindow, {
+                command: 'setValue',
+                referer: 'ace-editor',
+                data: {
+                    value: value,
+                    readonly: readonly
+                }
+            });
+        },
+
+        updateTheme: function() {
+            this._postMessage(this.iframe.contentWindow, {
+                command: 'setTheme',
+                referer: 'ace-editor',
+                data: Common.localStorage.getItem('ui-theme')
+            });
+        },
+
+        destroyEditor: function() {
+            this._unbindWindowEvents();
+        }
+    });
+});
diff --git a/apps/common/main/lib/view/MacrosDialog.js b/apps/common/main/lib/view/MacrosDialog.js
index dbad547c00..45630683ed 100644
--- a/apps/common/main/lib/view/MacrosDialog.js
+++ b/apps/common/main/lib/view/MacrosDialog.js
@@ -44,7 +44,7 @@ define([], function () {
     'use strict';
     Common.Views.MacrosDialog = Common.UI.Window.extend(_.extend({
         template:
-            '<div class="content invisible">' +
+            '<div class="content">' +
                 '<div class="common_menu noselect">' +
                     '<div id="menu_macros" class="menu_macros_long" <% if(!isFunctionsSupport){%> style="height: 100%;" <% } %>>' +
                         '<div class="menu_header">' +
@@ -66,7 +66,7 @@ define([], function () {
                     '</div>' +
                 '</div>' +
                 '<div class="separator vertical" style="position: relative"></div>' +
-                '<div id="code-editor"></div>' +
+                '<div id="code-editor" class="invisible"></div>' +
             '</div>'+
             '<div class="separator horizontal" style="position: relative"></div>',
 
@@ -105,8 +105,8 @@ define([], function () {
                 isFunctionsSupport: !!window.SSE,
                 macrosItemMenuOpen: null,
                 functionItemMenuOpen: null,
-                isDisable: false,
-                currentElementMode: this.CurrentElementModeType.Macros
+                currentElementMode: this.CurrentElementModeType.Macros,
+                currentValue: ''
             };
 
             _options.tpl = _.template(this.template)({
@@ -137,23 +137,12 @@ define([], function () {
                 $window = this.getChild();
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
+            // this.loadMask = new Common.UI.LoadMask({owner: this.$window.find('.body')[0]});
+            // this.loadMask.setTitle(this.textLoading);
+            // this.loadMask.show();
 
-            this.loadMask = new Common.UI.LoadMask({owner: this.$window.find('.body')[0]});
-            this.loadMask.setTitle(this.textLoading);
-            this.loadMask.show();
-            require(['../vendor/ace/ace'], function(ace) {
-                require(['../vendor/ace/ext-language_tools'], function() {
-                    me.createCodeEditor();
-                });
-            });
-        },
-
-        onAceLoadModule: function() {
-            if( _.values(this._state.aceLoadedModules).every(function(val) { return val })) {
-                this.renderAfterAceLoaded();
-                this.loadMask.hide();
-                this.$window.find('.content').removeClass('invisible');
-            }
+            me.createCodeEditor();
+            me.renderAfterAceLoaded();
         },
 
         renderAfterAceLoaded: function() {
@@ -270,94 +259,19 @@ define([], function () {
 
         createCodeEditor: function() {
             var me = this;
-            function onInitServer(type){
-                if (type === (me._state.initCounter & type))
-                    return;
-                me._state.initCounter |= type;
-                if (me._state.initCounter === 3) {
-                    var nameDocEditor = 'word';
-                    if(!!window.SSE) nameDocEditor = 'cell';
-                    else if(!!window.PE) nameDocEditor = 'slide';
-                    loadLibrary("onlyoffice", "../../../vendor/ace/libs/" + nameDocEditor + "/api.js");
-                }
-            }
 
-            function loadLibrary(name, url) {
-                var xhr = new XMLHttpRequest();
-                xhr.open("GET", url, true);
-                xhr.onreadystatechange = function()
-                {
-                    if (xhr.readyState == 4)
-                    {
-                        var EditSession = ace.require("ace/edit_session").EditSession;
-                        var editDoc = new EditSession(xhr.responseText, "ace/mode/javascript");
-                        me.codeEditor.ternServer.addDoc(name, editDoc);
-                    }
-                };
-                xhr.send();
-            }
-
-            this.codeEditor = ace.edit("code-editor");
-            this.codeEditor.session.setMode("ace/mode/javascript");
-            this.codeEditor.container.style.lineHeight = "20px";
-            this.codeEditor.setValue("");
-
-            this.codeEditor.getSession().setUseWrapMode(true);
-            this.codeEditor.getSession().setWrapLimitRange(null, null);
-            this.codeEditor.setShowPrintMargin(false);
-            this.codeEditor.$blockScrolling = Infinity;
-            this.codeEditor.setTheme(Common.UI.Themes.isDarkTheme() ? "ace/theme/vs-dark" : "ace/theme/vs-light");
-
-            onInitServer(2);
-
-            ace.config.loadModule('ace/ext/tern', function () {
-                me._state.aceLoadedModules.tern = true;
-                me.onAceLoadModule();
-                me.codeEditor.setOptions({
-                    enableTern: {
-                        defs: ['browser', 'ecma5'],
-                        plugins: { doc_comment: { fullDocs: true } },
-                        useWorker: !!window.Worker,
-                        switchToDoc: function (name, start) {},
-                        startedCb: function () {
-                            onInitServer(1);
-                        },
-                    },
-                    enableSnippets: false,
-                    tooltipContainer: '#code-editor'
-                });
+            this.codeEditor = new Common.UI.AceEditor({parentEl: '#code-editor'});
+            this.codeEditor.on('ready', function() {
+                me.codeEditor.updateTheme();
+                me.codeEditor.setValue(me._state.currentValue);
+                me.$window.find('#code-editor').removeClass('invisible');
+                // me.loadMask.hide();
             });
-
-
-            if (!window.isIE) {
-                ace.config.loadModule('ace/ext/language_tools', function () {
-                    me._state.aceLoadedModules.langTools = true;
-                    me.onAceLoadModule();
-                    me.codeEditor.setOptions({
-                        enableBasicAutocompletion: false,
-                        enableLiveAutocompletion: true
-                    });
-                });
-            }
-
-            ace.config.loadModule('ace/ext/html_beautify', function (beautify) {
-                me._state.aceLoadedModules.htmlBeautify = true;
-                me.onAceLoadModule();
-                me.codeEditor.setOptions({
-                    autoBeautify: true,
-                    htmlBeautify: true,
-                });
-                window.beautifyOptions = beautify.options;
-            });
-
-            this.codeEditor.getSession().on('change', function() {
+            this.codeEditor.on('change', function(value) {
                 var selectedItem = me._state.currentElementMode === me.CurrentElementModeType.Macros
                     ? me.listMacros.getSelectedRec()
                     : me.listFunctions.getSelectedRec();
-                if(!selectedItem || me._state.isDisable) {
-                    return;
-                }
-                selectedItem.set('value', me.codeEditor.getValue());
+                selectedItem && selectedItem.set('value', value);
             });
         },
 
@@ -649,11 +563,8 @@ define([], function () {
         },
 
         close: function(suppressevent) {
-            var $window = this.getChild();
-            if (!$window.find('.combobox.open').length) {
-                this.codeEditor.destroy();
-                Common.UI.Window.prototype.close.call(this, arguments);
-            }
+            this.codeEditor.destroyEditor();
+            Common.UI.Window.prototype.close.call(this, arguments);
         },
         _handleInput: function(state) {
             if (this.options.handler) {
@@ -738,17 +649,10 @@ define([], function () {
         },
         onSelectListMacrosItem: function(listView, itemView, record) {
             this._state.currentElementMode = this.CurrentElementModeType.Macros;
-            this._state.isDisable = true;
             this.codeEditor.setValue(record.get('value'));
-            this.codeEditor.setReadOnly(false);
-            this._state.isDisable = false;
-
-            this.codeEditor.focus();
-            this.codeEditor.selection.clearSelection();
-            this.codeEditor.scrollToRow(0);
+            this._state.currentValue = record.get('value');
 
             this.btnMacrosRun.setDisabled(false);
-
             this.listFunctions && this.listFunctions.deselectAll();
         },
         onRunMacros: function() {
@@ -788,7 +692,6 @@ define([], function () {
                 list.selectByIndex(selectedIndex);
             } else {
                 this.codeEditor.setValue('');
-                this.codeEditor.setReadOnly(true);
                 this.btnMacrosRun.setDisabled(true);
             }
         },
@@ -861,14 +764,7 @@ define([], function () {
         },
         onSelectListFunctionItem: function(listView, itemView, record) {
             this._state.currentElementMode = this.CurrentElementModeType.CustomFunction;
-            this._state.isDisable = true;
             this.codeEditor.setValue(record.get('value'));
-            this.codeEditor.setReadOnly(false);
-            this._state.isDisable = false;
-
-            this.codeEditor.focus();
-            this.codeEditor.selection.clearSelection();
-            this.codeEditor.scrollToRow(0);
 
             this.btnMacrosRun.setDisabled(true);
 
diff --git a/apps/common/main/resources/less/macros-dialog.less b/apps/common/main/resources/less/macros-dialog.less
index 77027bcc36..94e02ffd28 100644
--- a/apps/common/main/resources/less/macros-dialog.less
+++ b/apps/common/main/resources/less/macros-dialog.less
@@ -125,105 +125,3 @@
     }
   }
 }
-
-.ace_content {
-  background: @background-normal;
-  color: @text-normal;
-}
-.ace_layer.ace_gutter-layer.ace_folding-enabled {
-  color: @text-normal;
-}
-.divHeader {
-  border-color: @border-divider;
-}
-.ace_scroller {
-  border-left: none;
-}
-.ace_cursor {
-  color: @text-normal;
-}
-.Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description {
-  color: @text-normal;
-  background-color: @background-toolbar;
-}
-
-.ace-chrome .ace_marker-layer .ace_selected-word {
-  background: rgb(250, 250, 255, 0.3) !important;
-  border: 1px solid rgb(200, 200, 250);
-}
-.ace_active-line {
-  border-color: #333 !important;
-}
-.ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg {
-  border-bottom: 1px solid;
-  border-top: 1px solid;
-  border-color: @canvas-background !important;
-  background-color: @background-normal !important;
-}
-.oo_highlight {
-  background-color: #555 !important;
-}
-.ace_line-hover, .ace_autocomplete .ace_active-line {
-  background-color: @highlight-button-hover !important;
-  border: none !important;
-}
-.ace_completion-highlight {
-  color: #0000ff !important;
-  text-shadow: 0 0 0.01em;
-}
-.ace_dark .ace_completion-highlight {
-  color: #4FC1FF !important;
-}
-.Ace-Tern-farg {
-  color: gray;
-}
-.Ace-Tern-farg-current {
-  color: gray;
-}
-.Ace-Tern-type {
-  color: #569CD6;
-}
-.Ace-Tern-jsdoc-param-name {
-  color: gray;
-}
-.ace_gutter, .gutter_bg {
-  background: @background-normal !important;
-}
-.Ace-Tern-jsdoc-tag {
-  color: #FF5E5C;
-}
-.Ace-Tern-farg-current-description {
-  color : #FFFFFF;
-}
-.Ace-Tern-farg-current-name {
-  color : white;
-}
-.Ace-Tern-tooltip {
-  font-size: 11px;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid var(--border-divider);
-  background: @background-toolbar;
-  color: @text-normal;
-  width: 100%;
-  max-width: 100%;
-  bottom: 0;
-  left: 0 !important;
-  top: initial !important;
-
-  .Ace-Tern-tooltip-boxclose {
-    color: @icon-normal !important;
-    opacity: 0.7;
-
-    &:hover {
-      opacity: 1;
-      background: none;
-      text-decoration: none;
-    }
-  }
-}
-.ace_autocomplete {
-  border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
-  scrollbar-color: @canvas-scroll-thumb-pressed @canvas-scroll-thumb;
-}
diff --git a/apps/documenteditor/main/app_dev.js b/apps/documenteditor/main/app_dev.js
index 1d76170ac3..639cda567f 100644
--- a/apps/documenteditor/main/app_dev.js
+++ b/apps/documenteditor/main/app_dev.js
@@ -224,6 +224,7 @@ require([
                     'common/main/lib/util/define',
                     'common/main/lib/view/DocumentPropertyDialog',
                     'common/main/lib/view/MacrosDialog',
+                    'common/main/lib/component/AceEditor',
 
                     'documenteditor/main/app/view/FileMenuPanels',
                     'documenteditor/main/app/view/DocumentHolderExt',
diff --git a/apps/documenteditor/main/app_pack.js b/apps/documenteditor/main/app_pack.js
index 50d597214e..9312bda367 100644
--- a/apps/documenteditor/main/app_pack.js
+++ b/apps/documenteditor/main/app_pack.js
@@ -29,6 +29,7 @@ require([
     'common/main/lib/view/DocumentHolderExt',
     'common/main/lib/view/DocumentPropertyDialog',
     'common/main/lib/view/MacrosDialog',
+    'common/main/lib/component/AceEditor',
 
     'documenteditor/main/app/view/FileMenuPanels',
     'documenteditor/main/app/view/DocumentHolderExt',
diff --git a/vendor/ace/component/AceEditor.html b/vendor/ace/component/AceEditor.html
new file mode 100644
index 0000000000..8c9250209b
--- /dev/null
+++ b/vendor/ace/component/AceEditor.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CODE EDITOR</title>
+    <style type="text/css">
+        #editor {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        .ace_content {
+            background: #fff;
+            background: var(--background-normal, #fff);
+            color: #444;
+            color: var(--text-normal, #444);
+        }
+        .ace_layer.ace_gutter-layer.ace_folding-enabled {
+            color: #444;
+            color: var(--text-normal, #444);
+        }
+        .divHeader {
+            border-color: #dfdfdf;
+            border-color: var(--border-divider, #dfdfdf);
+        }
+        .ace_scroller {
+            border-left: none;
+        }
+        .ace_cursor {
+            color: #444 !important;
+            color: var(--text-normal, #444) !important;
+        }
+        .Ace-Tern-tooltip, .Ace-Tern-jsdoc-param-description {
+            color: #444;
+            color: var(--text-normal, #444);
+            background-color: #f7f7f7;
+            background-color: var(--background-toolbar, #f7f7f7);
+        }
+
+        .ace-chrome .ace_marker-layer .ace_selected-word {
+            background: rgb(250, 250, 255, 0.3) !important;
+            border: 1px solid rgb(200, 200, 250);
+        }
+        .ace_active-line {
+            border-color: #333 !important;
+        }
+        .ace_active-line, .ace_gutter-active-line, .ace_gutter-active-line-bg {
+            border-bottom: 1px solid;
+            border-top: 1px solid;
+            border-color: #eee !important;
+            border-color: var(--canvas-background, #eee) !important;
+            background-color: #fff  !important;
+            background-color: var(--background-normal, #fff)  !important;
+        }
+        .oo_highlight {
+            background-color: #555 !important;
+        }
+        .ace_line-hover, .ace_autocomplete .ace_active-line {
+            background-color: #e0e0e0; !important;
+            background-color: var(--highlight-button-hover, #e0e0e0) !important;
+            border: none !important;
+        }
+        .ace_completion-highlight {
+            color: #0000ff !important;
+            text-shadow: 0 0 0.01em;
+        }
+        .ace_dark .ace_completion-highlight {
+            color: #4FC1FF !important;
+        }
+        .Ace-Tern-farg {
+            color: gray;
+        }
+        .Ace-Tern-farg-current {
+            color: gray;
+        }
+        .Ace-Tern-type {
+            color: #569CD6;
+        }
+        .Ace-Tern-jsdoc-param-name {
+            color: gray;
+        }
+        .ace_gutter, .gutter_bg {
+            background: #fff  !important;
+            background: var(--background-normal, #fff)  !important;
+        }
+        .Ace-Tern-jsdoc-tag {
+            color: #FF5E5C;
+        }
+        .Ace-Tern-farg-current-description {
+            color : #FFFFFF;
+        }
+        .Ace-Tern-farg-current-name {
+            color : white;
+        }
+        .Ace-Tern-tooltip {
+            font-size: 11px;
+            border-radius: 0;
+            border: none;
+            border-top: 1px solid var(--border-divider);
+            background: #f7f7f7;
+            background: var(--background-toolbar, #f7f7f7);
+            color: #444;
+            color: var(--text-normal, #444);
+            width: 100%;
+            max-width: 100%;
+            bottom: 0;
+            left: 0 !important;
+            top: initial !important;
+        }
+        .Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose {
+            color: #444 !important;
+            color: var(--icon-normal, #444) !important;
+            opacity: 0.7;
+        }
+        .Ace-Tern-tooltip .Ace-Tern-tooltip-boxclose:hover {
+             opacity: 1;
+             background: none;
+             text-decoration: none;
+        }
+        .ace_autocomplete {
+            border-radius: 4px;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
+            scrollbar-color: #adadad #f7f7f7;
+            scrollbar-color: var(--canvas-scroll-thumb-pressed, #adadad) var(--canvas-scroll-thumb, #f7f7f7);
+        }
+    </style>
+</head>
+<body>
+    <div id="editor"></div>
+
+    <script src="../ace.js"></script>
+    <script src="../ext-language_tools.js"></script>
+
+    <!-- code -->
+    <script>
+        function getUrlParams() {
+            var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        }
+
+        var params = getUrlParams();
+        window.editorType = params["editorType"]; // word/cell/slide
+    </script>
+    <script src="AceEditorCode.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/vendor/ace/component/AceEditorCode.js b/vendor/ace/component/AceEditorCode.js
new file mode 100644
index 0000000000..ab9e2650d3
--- /dev/null
+++ b/vendor/ace/component/AceEditorCode.js
@@ -0,0 +1,195 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2024
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+window.initCounter = 0;
+
+function on_init_server(type)
+{
+    if (type === (window.initCounter & type))
+        return;
+    window.initCounter |= type;
+    if (window.initCounter === 3)
+    {
+        load_library("onlyoffice", "../libs/" + window.editorType + "/api.js");
+        _postMessage({
+            command: 'aceEditorReady',
+            referer: 'ace-editor'
+        });
+    }
+}
+
+function load_library(name, url)
+{
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.onreadystatechange = function()
+    {
+        if (xhr.readyState == 4)
+        {
+            var EditSession = ace.require("ace/edit_session").EditSession;
+            var editDoc = new EditSession(xhr.responseText, "ace/mode/javascript");
+            editor.ternServer.addDoc(name, editDoc);
+        }
+    };
+    xhr.send();
+}
+
+var editor = ace.edit("editor");
+editor.session.setMode("ace/mode/javascript");
+editor.container.style.lineHeight = "20px";
+editor.setValue("");
+
+editor.getSession().setUseWrapMode(true);
+editor.getSession().setWrapLimitRange(null, null);
+editor.setShowPrintMargin(false);
+editor.$blockScrolling = Infinity;
+
+ace.config.loadModule('ace/ext/tern', function () {
+    editor.setOptions({
+        enableTern: {
+            defs: ['browser', 'ecma5'],
+            plugins: { doc_comment: { fullDocs: true } },
+            useWorker: !!window.Worker,
+            switchToDoc: function (name, start) {},
+            startedCb: function () {
+                on_init_server(1);
+            },
+        },
+        enableSnippets: false,
+        // tooltipContainer: '#code-editor'
+    });
+});
+
+if (!window.isIE) {
+    ace.config.loadModule('ace/ext/language_tools', function () {
+        editor.setOptions({
+            enableBasicAutocompletion: false,
+            enableLiveAutocompletion: true
+        });
+    });
+}
+
+ace.config.loadModule('ace/ext/html_beautify', function (beautify) {
+    editor.setOptions({
+        autoBeautify: true,
+        htmlBeautify: true,
+    });
+    window.beautifyOptions = beautify.options;
+});
+
+editor.getSession().on('change', function() {
+    if (window.isDisable) return;
+    _postMessage({
+        command: 'changeValue',
+        data: editor.getValue(),
+        referer: 'ace-editor'
+    });
+});
+
+on_init_server(2);
+
+var editorSetValue = function(data) {
+    window.isDisable = true;
+    editor.setValue(data.value || '');
+    editor.setReadOnly(!!data.readonly);
+    if (!data.readonly) {
+        editor.focus();
+        editor.selection.clearSelection();
+        editor.scrollToRow(0);
+    }
+    window.isDisable = false;
+};
+
+var onThemeChanged = function(data) {
+    try {
+        data = window.JSON.parse(data)
+    } catch(e) {
+        data = {};
+    }
+
+    if (!data.colors) return;
+
+    var theme_type = data.type || 'light',
+        colors = data.colors;
+    if ( !!colors ) {
+        var _css_array = [':root ', '{'];
+        for (var c in colors) {
+            _css_array.push('--', c, ':', colors[c], ';');
+        }
+        _css_array.push('}');
+        var _css = _css_array.join('');
+
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.innerHTML = _css;
+        document.getElementsByTagName('head')[0].appendChild(style);
+    }
+
+    if (theme_type === 'dark')
+        editor.setTheme("ace/theme/vs-dark");
+    else
+        editor.setTheme("ace/theme/vs-light");
+
+};
+
+var _postMessage = function(msg) {
+    window.parent && window.JSON && window.parent.postMessage(window.JSON.stringify(msg), "*");
+};
+
+var _onMessage = function(msg) {
+    var data = msg.data;
+    if (Object.prototype.toString.apply(data) !== '[object String]' || !window.JSON) {
+        return;
+    }
+    var cmd, handler;
+
+    try {
+        cmd = window.JSON.parse(data)
+    } catch(e) {
+        cmd = '';
+    }
+
+    if (cmd && cmd.referer == "ace-editor") {
+        if (cmd.command==='setValue') {
+            editorSetValue(cmd.data);
+        } else if (cmd.command==='setTheme') {
+            onThemeChanged(cmd.data);
+        }
+    }
+};
+
+var fn = function(e) { _onMessage(e); };
+
+if (window.attachEvent) {
+    window.attachEvent('onmessage', fn);
+} else {
+    window.addEventListener('message', fn, false);
+}