diff --git a/packages/devextreme/js/__internal/ui/html_editor/converters/m_delta.ts b/packages/devextreme/js/__internal/ui/html_editor/converters/m_delta.ts
index a50ebeb0488f..eebca0a33cf8 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/converters/m_delta.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/converters/m_delta.ts
@@ -1,30 +1,31 @@
-import ConverterController from '../converterController';
+import ConverterController from '../m_converterController';
 
 class DeltaConverter {
+  quillInstance: any;
 
-    setQuillInstance(quillInstance) {
-        this.quillInstance = quillInstance;
-    }
-
-    toHtml() {
-        if(!this.quillInstance) {
-            return;
-        }
+  setQuillInstance(quillInstance) {
+    this.quillInstance = quillInstance;
+  }
 
-        return this._isQuillEmpty() ?
-            '' :
-            this.quillInstance.getSemanticHTML(0, this.quillInstance.getLength() + 1);
+  toHtml() {
+    if (!this.quillInstance) {
+      return;
     }
 
-    _isQuillEmpty() {
-        const delta = this.quillInstance.getContents();
+    return this._isQuillEmpty()
+      ? ''
+      : this.quillInstance.getSemanticHTML(0, this.quillInstance.getLength() + 1);
+  }
 
-        return delta.length() === 1 && this._isDeltaEmpty(delta);
-    }
+  _isQuillEmpty() {
+    const delta = this.quillInstance.getContents();
 
-    _isDeltaEmpty(delta) {
-        return delta.reduce((__, { insert }) => insert.indexOf('\n') !== -1);
-    }
+    return delta.length() === 1 && this._isDeltaEmpty(delta);
+  }
+
+  _isDeltaEmpty(delta) {
+    return delta.reduce((__, { insert }) => insert.indexOf('\n') !== -1);
+  }
 }
 
 ConverterController.addConverter('delta', DeltaConverter);
diff --git a/packages/devextreme/js/__internal/ui/html_editor/converters/m_markdown.ts b/packages/devextreme/js/__internal/ui/html_editor/converters/m_markdown.ts
index 4fbfda530d9c..79f9d2319043 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/converters/m_markdown.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/converters/m_markdown.ts
@@ -1,59 +1,63 @@
-
-import TurnDown from 'turndown';
+import { getWindow } from '@js/core/utils/window';
+import Errors from '@js/ui/widget/ui.errors';
 import ShowDown from 'showdown';
+import TurnDown from 'turndown';
 
-import { getWindow } from '../../../core/utils/window';
-import Errors from '../../widget/ui.errors';
-import converterController from '../converterController';
+import converterController from '../m_converterController';
 
 class MarkdownConverter {
-    constructor() {
-        const window = getWindow();
-        const turndown = window && window.TurndownService || TurnDown;
-        const showdown = window && window.showdown || ShowDown;
-
-        if(!turndown) {
-            throw Errors.Error('E1041', 'Turndown');
-        }
-
-        if(!showdown) {
-            throw Errors.Error('E1041', 'Showdown');
-        }
-
-        this._html2Markdown = new turndown();
-
-        if(this._html2Markdown?.addRule) {
-            this._html2Markdown.addRule('emptyLine', {
-                filter: (element) => {
-                    return element.nodeName.toLowerCase() === 'p' && element.innerHTML === '<br>';
-                },
-                replacement: function() {
-                    return '<br>';
-                }
-            });
-            this._html2Markdown.keep(['table']);
-        }
-
-        this._markdown2Html = new showdown.Converter({
-            simpleLineBreaks: true,
-            strikethrough: true,
-            tables: true
-        });
+  _markdown2Html: any;
+
+  _html2Markdown: any;
+
+  constructor() {
+    const window = getWindow();
+    // @ts-expect-error
+    const turndown = window && window.TurndownService || TurnDown;
+    // @ts-expect-error
+    const showdown = window && window.showdown || ShowDown;
+
+    if (!turndown) {
+      throw Errors.Error('E1041', 'Turndown');
     }
 
-    toMarkdown(htmlMarkup) {
-        return this._html2Markdown.turndown(htmlMarkup || '');
+    if (!showdown) {
+      throw Errors.Error('E1041', 'Showdown');
     }
 
-    toHtml(markdownMarkup) {
-        let markup = this._markdown2Html.makeHtml(markdownMarkup);
+    // eslint-disable-next-line new-cap
+    this._html2Markdown = new turndown();
 
-        if(markup) {
-            markup = markup.replace(new RegExp('\\r?\\n', 'g'), '');
-        }
+    if (this._html2Markdown?.addRule) {
+      this._html2Markdown.addRule('emptyLine', {
+        filter: (element) => element.nodeName.toLowerCase() === 'p' && element.innerHTML === '<br>',
+        replacement() {
+          return '<br>';
+        },
+      });
+      this._html2Markdown.keep(['table']);
+    }
+
+    this._markdown2Html = new showdown.Converter({
+      simpleLineBreaks: true,
+      strikethrough: true,
+      tables: true,
+    });
+  }
+
+  toMarkdown(htmlMarkup) {
+    return this._html2Markdown.turndown(htmlMarkup || '');
+  }
 
-        return markup;
+  toHtml(markdownMarkup) {
+    let markup = this._markdown2Html.makeHtml(markdownMarkup);
+
+    if (markup) {
+      markup = markup.replace(new RegExp('\\r?\\n', 'g'), '');
     }
+
+    return markup;
+  }
 }
 
 converterController.addConverter('markdown', MarkdownConverter);
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_align.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_align.ts
index 1702eca11688..9a682a84eaaf 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_align.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_align.ts
@@ -1,10 +1,12 @@
 import Quill from 'devextreme-quill';
 
+// eslint-disable-next-line import/no-mutable-exports
 let AlignStyle = {};
 
-if(Quill) {
-    AlignStyle = Quill.import('attributors/style/align');
-    AlignStyle.whitelist.push('left');
+if (Quill) {
+  AlignStyle = Quill.import('attributors/style/align');
+  // @ts-expect-error
+  AlignStyle.whitelist.push('left');
 }
 
 export default AlignStyle;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_font.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_font.ts
index b79646b5a795..191158554a2c 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_font.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_font.ts
@@ -1,10 +1,12 @@
 import Quill from 'devextreme-quill';
 
+// eslint-disable-next-line import/no-mutable-exports
 let FontStyle = {};
 
-if(Quill) {
-    FontStyle = Quill.import('attributors/style/font');
-    FontStyle.whitelist = null;
+if (Quill) {
+  FontStyle = Quill.import('attributors/style/font');
+  // @ts-expect-error
+  FontStyle.whitelist = null;
 }
 
 export default FontStyle;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_image.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_image.ts
index 4ed7f113ce80..ca2d89145438 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_image.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_image.ts
@@ -1,67 +1,70 @@
+import { isObject } from '@js/core/utils/type';
 import Quill from 'devextreme-quill';
-import { isObject } from '../../../core/utils/type';
 
+// eslint-disable-next-line import/no-mutable-exports
 let ExtImage = {};
 
-if(Quill) {
-    const Image = Quill.import('formats/image');
-
-    ExtImage = class ExtImage extends Image {
-        static create(data) {
-            const SRC = data && data.src || data;
-            const node = super.create(SRC);
-
-            if(isObject(data)) {
-                const setAttribute = (attr, value) => {
-                    data[attr] && node.setAttribute(attr, value);
-                };
-
-                setAttribute('alt', data.alt);
-                setAttribute('width', data.width);
-                setAttribute('height', data.height);
-            }
-
-            return node;
-        }
-
-        static formats(domNode) {
-            const formats = super.formats(domNode);
-
-            formats['imageSrc'] = domNode.getAttribute('src');
-
-            return formats;
-        }
-
-        formats() {
-            const formats = super.formats();
-            const floatValue = this.domNode.style['float'];
-
-            if(floatValue) {
-                formats['float'] = floatValue;
-            }
-
-            return formats;
-        }
-
-        format(name, value) {
-            if(name === 'float') {
-                this.domNode.style[name] = value;
-            } else {
-                super.format(name, value);
-            }
-        }
-
-        static value(domNode) {
-            return {
-                src: domNode.getAttribute('src'),
-                width: domNode.getAttribute('width'),
-                height: domNode.getAttribute('height'),
-                alt: domNode.getAttribute('alt')
-            };
-        }
-    };
-
-    ExtImage.blotName = 'extendedImage';
+if (Quill) {
+  const Image = Quill.import('formats/image');
+
+  ExtImage = class ExtImage extends Image {
+    static create(data) {
+      const SRC = data && data.src || data;
+      const node = super.create(SRC);
+
+      if (isObject(data)) {
+        const setAttribute = (attr, value) => {
+          data[attr] && node.setAttribute(attr, value);
+        };
+        // @ts-expect-error
+        setAttribute('alt', data.alt);
+        // @ts-expect-error
+        setAttribute('width', data.width);
+        // @ts-expect-error
+        setAttribute('height', data.height);
+      }
+
+      return node;
+    }
+
+    static formats(domNode) {
+      const formats = super.formats(domNode);
+
+      formats.imageSrc = domNode.getAttribute('src');
+
+      return formats;
+    }
+
+    formats() {
+      const formats = super.formats();
+      const floatValue = this.domNode.style.float;
+
+      if (floatValue) {
+        formats.float = floatValue;
+      }
+
+      return formats;
+    }
+
+    format(name, value) {
+      if (name === 'float') {
+        this.domNode.style[name] = value;
+      } else {
+        super.format(name, value);
+      }
+    }
+
+    static value(domNode) {
+      return {
+        src: domNode.getAttribute('src'),
+        width: domNode.getAttribute('width'),
+        height: domNode.getAttribute('height'),
+        alt: domNode.getAttribute('alt'),
+      };
+    }
+  };
+  // @ts-expect-error
+  ExtImage.blotName = 'extendedImage';
 }
 
 export default ExtImage;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_link.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_link.ts
index ada55c58f394..7ab6be4b609c 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_link.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_link.ts
@@ -1,70 +1,77 @@
+import { isObject } from '@js/core/utils/type';
 import Quill from 'devextreme-quill';
-import { isObject } from '../../../core/utils/type';
 
+// eslint-disable-next-line import/no-mutable-exports
 let ExtLink = {};
 
-if(Quill) {
-    const Link = Quill.import('formats/link');
+if (Quill) {
+  const Link = Quill.import('formats/link');
 
-    ExtLink = class ExtLink extends Link {
-        static create(data) {
-            const HREF = data?.href ?? data;
-            const node = super.create(HREF);
+  ExtLink = class ExtLink extends Link {
+    static create(data) {
+      const HREF = data?.href ?? data;
+      const node = super.create(HREF);
 
-            if(isObject(data)) {
-                if(data.text) {
-                    node.innerText = data.text;
-                }
-                if(!data.target) {
-                    node.removeAttribute('target');
-                }
-            }
-
-            return node;
+      if (isObject(data)) {
+        // @ts-expect-error
+        if (data.text) {
+          // @ts-expect-error
+          node.innerText = data.text;
         }
-
-        static formats(domNode) {
-            return {
-                href: domNode.getAttribute('href'),
-                target: domNode.getAttribute('target')
-            };
+        // @ts-expect-error
+        if (!data.target) {
+          node.removeAttribute('target');
         }
+      }
 
-        formats() {
-            const formats = super.formats();
-            const { href, target } = ExtLink.formats(this.domNode);
+      return node;
+    }
 
-            formats.link = href;
-            formats.target = target;
+    static formats(domNode) {
+      return {
+        href: domNode.getAttribute('href'),
+        target: domNode.getAttribute('target'),
+      };
+    }
 
-            return formats;
-        }
+    formats() {
+      const formats = super.formats();
+      const { href, target } = ExtLink.formats(this.domNode);
 
-        format(name, value) {
-            if(name === 'link' && isObject(value)) {
-                if(value.text) {
-                    this.domNode.innerText = value.text;
-                }
-                if(value.target) {
-                    this.domNode.setAttribute('target', '_blank');
-                } else {
-                    this.domNode.removeAttribute('target');
-                }
-                this.domNode.setAttribute('href', value.href);
-            } else {
-                super.format(name, value);
-            }
-        }
+      formats.link = href;
+      formats.target = target;
 
-        static value(domNode) {
-            return {
-                href: domNode.getAttribute('href'),
-                text: domNode.innerText,
-                target: !!domNode.getAttribute('target')
-            };
+      return formats;
+    }
+
+    format(name, value) {
+      if (name === 'link' && isObject(value)) {
+        // @ts-expect-error
+        if (value.text) {
+          // @ts-expect-error
+          this.domNode.innerText = value.text;
         }
-    };
-}
+        // @ts-expect-error
+        if (value.target) {
+          this.domNode.setAttribute('target', '_blank');
+        } else {
+          this.domNode.removeAttribute('target');
+        }
+        // @ts-expect-error
+        this.domNode.setAttribute('href', value.href);
+      } else {
+        super.format(name, value);
+      }
+    }
 
+    static value(domNode) {
+      return {
+        href: domNode.getAttribute('href'),
+        text: domNode.innerText,
+        target: !!domNode.getAttribute('target'),
+      };
+    }
+  };
+}
 
 export default ExtLink;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_mention.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_mention.ts
index db5c090860b2..7cdb3d3144b5 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_mention.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_mention.ts
@@ -1,75 +1,77 @@
-
+import $ from '@js/core/renderer';
 import Quill from 'devextreme-quill';
-import $ from '../../../core/renderer';
-import TemplatesStorage from '../utils/templates_storage';
-
-let Mention = {};
-
-if(Quill) {
-    const Embed = Quill.import('blots/embed');
-    const MENTION_CLASS = 'dx-mention';
-
-    Mention = class Mention extends Embed {
-        constructor(scroll, node) {
-            super(scroll, node);
-            this.renderContent(this.contentNode, Mention.value(node));
-        }
-
-        static create(data) {
-            const node = super.create();
-
-            node.setAttribute('spellcheck', false);
-            node.dataset.marker = data.marker;
-            node.dataset.mentionValue = data.value;
-            node.dataset.id = data.id;
-
-            return node;
-        }
 
-        static value(node) {
-            return {
-                marker: node.dataset.marker,
-                id: node.dataset.id,
-                value: node.dataset.mentionValue
-            };
-        }
+import TemplatesStorage from '../utils/m_templates_storage';
 
-        renderContent(node, data) {
-            const template = Mention._templatesStorage.get({ editorKey: data.keyInTemplateStorage, marker: data.marker });
-
-            if(template) {
-                template.render({
-                    model: data,
-                    container: node
-                });
-            } else {
-                this.baseContentRender(node, data);
-            }
-
-        }
-
-        baseContentRender(node, data) {
-            const $marker = $('<span>').text(data.marker);
-
-            $(node)
-                .append($marker)
-                .append(data.value);
-        }
-
-        static addTemplate(data, template) {
-            this._templatesStorage.set(data, template);
-        }
-
-        static removeTemplate(data) {
-            this._templatesStorage.delete(data);
-        }
-    };
+// eslint-disable-next-line import/no-mutable-exports
+let Mention = {};
 
-    Mention.blotName = 'mention';
-    Mention.tagName = 'span';
-    Mention.className = MENTION_CLASS;
-    Mention._templatesStorage = new TemplatesStorage();
+if (Quill) {
+  const Embed = Quill.import('blots/embed');
+  const MENTION_CLASS = 'dx-mention';
+
+  Mention = class Mention extends Embed {
+    constructor(scroll, node) {
+      super(scroll, node);
+      this.renderContent(this.contentNode, Mention.value(node));
+    }
+
+    static create(data) {
+      const node = super.create();
+
+      node.setAttribute('spellcheck', false);
+      node.dataset.marker = data.marker;
+      node.dataset.mentionValue = data.value;
+      node.dataset.id = data.id;
+
+      return node;
+    }
+
+    static value(node) {
+      return {
+        marker: node.dataset.marker,
+        id: node.dataset.id,
+        value: node.dataset.mentionValue,
+      };
+    }
+
+    renderContent(node, data) {
+      const template = Mention._templatesStorage.get({ editorKey: data.keyInTemplateStorage, marker: data.marker });
+
+      if (template) {
+        template.render({
+          model: data,
+          container: node,
+        });
+      } else {
+        this.baseContentRender(node, data);
+      }
+    }
+
+    baseContentRender(node, data) {
+      const $marker = $('<span>').text(data.marker);
+
+      $(node)
+        .append($marker)
+        .append(data.value);
+    }
+
+    static addTemplate(data, template) {
+      this._templatesStorage.set(data, template);
+    }
+
+    static removeTemplate(data) {
+      this._templatesStorage.delete(data);
+    }
+  };
+  // @ts-expect-error
+  Mention.blotName = 'mention';
+  // @ts-expect-error
+  Mention.tagName = 'span';
+  // @ts-expect-error
+  Mention.className = MENTION_CLASS;
+  // @ts-expect-error
+  Mention._templatesStorage = new TemplatesStorage();
 }
 
-
 export default Mention;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_size.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_size.ts
index dc11343aa6e1..a7310e82fd0a 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_size.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_size.ts
@@ -1,10 +1,12 @@
 import Quill from 'devextreme-quill';
 
+// eslint-disable-next-line import/no-mutable-exports
 let SizeStyle = {};
 
-if(Quill) {
-    SizeStyle = Quill.import('attributors/style/size');
-    SizeStyle.whitelist = null;
+if (Quill) {
+  SizeStyle = Quill.import('attributors/style/size');
+  // @ts-expect-error
+  SizeStyle.whitelist = null;
 }
 
 export default SizeStyle;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/formats/m_variable.ts b/packages/devextreme/js/__internal/ui/html_editor/formats/m_variable.ts
index 0ab3ca714170..ef7406570042 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/formats/m_variable.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/formats/m_variable.ts
@@ -1,50 +1,53 @@
+import { ensureDefined } from '@js/core/utils/common';
+import { extend } from '@js/core/utils/extend';
 import Quill from 'devextreme-quill';
-import { ensureDefined } from '../../../core/utils/common';
-import { extend } from '../../../core/utils/extend';
 
+// eslint-disable-next-line import/no-mutable-exports
 let Variable = {};
 
-if(Quill) {
-    const Embed = Quill.import('blots/embed');
-
-    const VARIABLE_CLASS = 'dx-variable';
-
-    Variable = class Variable extends Embed {
-        static create(data) {
-            const node = super.create();
-            let startEscapeChar;
-            let endEscapeChar;
-            const text = data.value;
-
-            if(Array.isArray(data.escapeChar)) {
-                startEscapeChar = ensureDefined(data.escapeChar[0], '');
-                endEscapeChar = ensureDefined(data.escapeChar[1], '');
-            } else {
-                startEscapeChar = endEscapeChar = data.escapeChar;
-            }
-
-            node.innerText = startEscapeChar + text + endEscapeChar;
-            node.dataset.varStartEscChar = startEscapeChar;
-            node.dataset.varEndEscChar = endEscapeChar;
-            node.dataset.varValue = data.value;
-
-            return node;
-        }
-
-        static value(node) {
-            return extend({}, {
-                value: node.dataset.varValue,
-                escapeChar: [
-                    node.dataset.varStartEscChar || '',
-                    node.dataset.varEndEscChar || ''
-                ]
-            });
-        }
-    };
-
-    Variable.blotName = 'variable';
-    Variable.tagName = 'span';
-    Variable.className = VARIABLE_CLASS;
+if (Quill) {
+  const Embed = Quill.import('blots/embed');
+
+  const VARIABLE_CLASS = 'dx-variable';
+
+  Variable = class Variable extends Embed {
+    static create(data) {
+      const node = super.create();
+      let startEscapeChar;
+      let endEscapeChar;
+      const text = data.value;
+
+      if (Array.isArray(data.escapeChar)) {
+        startEscapeChar = ensureDefined(data.escapeChar[0], '');
+        endEscapeChar = ensureDefined(data.escapeChar[1], '');
+      } else {
+        startEscapeChar = endEscapeChar = data.escapeChar;
+      }
+
+      node.innerText = startEscapeChar + text + endEscapeChar;
+      node.dataset.varStartEscChar = startEscapeChar;
+      node.dataset.varEndEscChar = endEscapeChar;
+      node.dataset.varValue = data.value;
+
+      return node;
+    }
+
+    static value(node) {
+      return extend({}, {
+        value: node.dataset.varValue,
+        escapeChar: [
+          node.dataset.varStartEscChar || '',
+          node.dataset.varEndEscChar || '',
+        ],
+      });
+    }
+  };
+  // @ts-expect-error
+  Variable.blotName = 'variable';
+  // @ts-expect-error
+  Variable.tagName = 'span';
+  // @ts-expect-error
+  Variable.className = VARIABLE_CLASS;
 }
 
 export default Variable;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_converterController.ts b/packages/devextreme/js/__internal/ui/html_editor/m_converterController.ts
index 0f189556507f..a2971f25e1ee 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/m_converterController.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/m_converterController.ts
@@ -1,16 +1,17 @@
-
 class ConverterController {
-    constructor() {
-        this._converters = {};
-    }
+  _converters = {};
+
+  constructor() {
+    this._converters = {};
+  }
 
-    addConverter(name, converter) {
-        this._converters[name] = converter;
-    }
+  addConverter(name, converter) {
+    this._converters[name] = converter;
+  }
 
-    getConverter(name) {
-        return this._converters[name];
-    }
+  getConverter(name) {
+    return this._converters[name];
+  }
 }
 
 const controller = new ConverterController();
diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
index e19a3271e061..d6ce109e3896 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
@@ -1,32 +1,37 @@
-import $ from '../../core/renderer';
-import { extend } from '../../core/utils/extend';
-import { isDefined, isFunction } from '../../core/utils/type';
-import { getPublicElement } from '../../core/element';
-import { executeAsync, noop, ensureDefined, deferRender } from '../../core/utils/common';
-import registerComponent from '../../core/component_registrator';
-import { EmptyTemplate } from '../../core/templates/empty_template';
-import Editor from '../editor/editor';
-import Errors from '../widget/ui.errors';
-import Callbacks from '../../core/utils/callbacks';
-import { Deferred } from '../../core/utils/deferred';
-import eventsEngine from '../../events/core/events_engine';
-import { addNamespace } from '../../events/utils/index';
-import { Event as dxEvent } from '../../events/index';
-import scrollEvents from '../../events/gesture/emitter.gesture.scroll';
-import { prepareScrollData } from '../../__internal/ui/text_box/m_utils.scroll';
-
-import pointerEvents from '../../events/pointer';
-import devices from '../../core/devices';
-
-import QuillRegistrator from './quill_registrator';
-import './converters/delta';
-import ConverterController from './converterController';
-import getWordMatcher from './matchers/wordLists';
-import FormDialog from './ui/formDialog';
-import config from '../../core/config';
-import { getQuill } from './quill_importer';
-
-// STYLE htmlEditor
+import './converters/m_delta';
+
+import registerComponent from '@js/core/component_registrator';
+import config from '@js/core/config';
+import devices from '@js/core/devices';
+import { getPublicElement } from '@js/core/element';
+import $ from '@js/core/renderer';
+import { EmptyTemplate } from '@js/core/templates/empty_template';
+import Callbacks from '@js/core/utils/callbacks';
+import {
+  deferRender,
+  ensureDefined,
+  // @ts-expect-error
+  executeAsync,
+  noop,
+} from '@js/core/utils/common';
+import { Deferred } from '@js/core/utils/deferred';
+import { extend } from '@js/core/utils/extend';
+import { isDefined, isFunction } from '@js/core/utils/type';
+import eventsEngine from '@js/events/core/events_engine';
+import scrollEvents from '@js/events/gesture/emitter.gesture.scroll';
+// @ts-expect-error
+import { Event as dxEvent } from '@js/events/index';
+import pointerEvents from '@js/events/pointer';
+import { addNamespace } from '@js/events/utils/index';
+import Editor from '@js/ui/editor/editor';
+import Errors from '@js/ui/widget/ui.errors';
+import { prepareScrollData } from '@ts/ui/text_box/m_utils.scroll';
+
+import ConverterController from './m_converterController';
+import { getQuill } from './m_quill_importer';
+import QuillRegistrator from './m_quill_registrator';
+import getWordMatcher from './matchers/m_wordLists';
+import FormDialog from './ui/m_formDialog';
 
 const HTML_EDITOR_CLASS = 'dx-htmleditor';
 const QUILL_CONTAINER_CLASS = 'dx-quill-container';
@@ -41,738 +46,739 @@ const ANONYMOUS_TEMPLATE_NAME = 'htmlContent';
 const isIos = devices.current().platform === 'ios';
 
 let editorsCount = 0;
-
+// @ts-expect-error
 const HtmlEditor = Editor.inherit({
 
-    _getDefaultOptions: function() {
-        return extend(this.callBase(), {
-            focusStateEnabled: true,
-            valueType: 'html',
-            placeholder: '',
-            toolbar: null,
-            variables: null,
-            mediaResizing: null,
-            tableResizing: null,
-            mentions: null,
-            customizeModules: null,
-            tableContextMenu: null,
-            allowSoftLineBreak: false,
-
-            formDialogOptions: null,
-
-            imageUpload: null,
-
-            stylingMode: config().editorStylingMode || 'outlined',
-        });
-    },
-
-    _init: function() {
-        this._mentionKeyInTemplateStorage = editorsCount++;
-        this.callBase();
-        this._cleanCallback = Callbacks();
-        this._contentInitializedCallback = Callbacks();
-    },
-
-    _getAnonymousTemplateName: function() {
-        return ANONYMOUS_TEMPLATE_NAME;
-    },
-
-    _initTemplates: function() {
-        this._templateManager.addDefaultTemplates({
-            [ANONYMOUS_TEMPLATE_NAME]: new EmptyTemplate()
-        });
-        this.callBase();
-    },
-
-    _focusTarget: function() {
-        return this._getContent();
-    },
-
-    _getContent: function() {
-        return this.$element().find(`.${HTML_EDITOR_CONTENT_CLASS}`);
-    },
-
-    _focusInHandler: function({ relatedTarget }) {
-        if(this._shouldSkipFocusEvent(relatedTarget)) {
-            return;
-        }
+  _getDefaultOptions() {
+    return extend(this.callBase(), {
+      focusStateEnabled: true,
+      valueType: 'html',
+      placeholder: '',
+      toolbar: null,
+      variables: null,
+      mediaResizing: null,
+      tableResizing: null,
+      mentions: null,
+      customizeModules: null,
+      tableContextMenu: null,
+      allowSoftLineBreak: false,
+
+      formDialogOptions: null,
+
+      imageUpload: null,
+
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      stylingMode: config().editorStylingMode || 'outlined',
+    });
+  },
+
+  _init() {
+    this._mentionKeyInTemplateStorage = editorsCount++;
+    this.callBase();
+    this._cleanCallback = Callbacks();
+    this._contentInitializedCallback = Callbacks();
+  },
+
+  _getAnonymousTemplateName() {
+    return ANONYMOUS_TEMPLATE_NAME;
+  },
+
+  _initTemplates() {
+    this._templateManager.addDefaultTemplates({
+      [ANONYMOUS_TEMPLATE_NAME]: new EmptyTemplate(),
+    });
+    this.callBase();
+  },
+
+  _focusTarget() {
+    return this._getContent();
+  },
+
+  _getContent() {
+    return this.$element().find(`.${HTML_EDITOR_CONTENT_CLASS}`);
+  },
+
+  _focusInHandler({ relatedTarget }) {
+    if (this._shouldSkipFocusEvent(relatedTarget)) {
+      return;
+    }
 
-        this._toggleFocusClass(true, this.$element());
+    this._toggleFocusClass(true, this.$element());
 
-        this.callBase.apply(this, arguments);
-    },
+    this.callBase.apply(this, arguments);
+  },
 
-    _focusOutHandler: function({ relatedTarget }) {
-        if(this._shouldSkipFocusEvent(relatedTarget)) {
-            return;
-        }
+  _focusOutHandler({ relatedTarget }) {
+    if (this._shouldSkipFocusEvent(relatedTarget)) {
+      return;
+    }
 
-        this._toggleFocusClass(false, this.$element());
+    this._toggleFocusClass(false, this.$element());
 
-        this.callBase.apply(this, arguments);
-    },
+    this.callBase.apply(this, arguments);
+  },
 
-    _shouldSkipFocusEvent: function(relatedTarget) {
-        return $(relatedTarget).hasClass(QUILL_CLIPBOARD_CLASS);
-    },
+  _shouldSkipFocusEvent(relatedTarget) {
+    return $(relatedTarget).hasClass(QUILL_CLIPBOARD_CLASS);
+  },
 
-    _initMarkup: function() {
-        this._$htmlContainer = $('<div>').addClass(QUILL_CONTAINER_CLASS);
+  _initMarkup() {
+    this._$htmlContainer = $('<div>').addClass(QUILL_CONTAINER_CLASS);
 
-        this.$element()
-            .attr('role', 'application')
-            .addClass(HTML_EDITOR_CLASS)
-            .wrapInner(this._$htmlContainer);
+    this.$element()
+      .attr('role', 'application')
+      .addClass(HTML_EDITOR_CLASS)
+      .wrapInner(this._$htmlContainer);
 
-        this._renderStylingMode();
+    this._renderStylingMode();
 
-        const template = this._getTemplate(ANONYMOUS_TEMPLATE_NAME);
-        const transclude = true;
+    const template = this._getTemplate(ANONYMOUS_TEMPLATE_NAME);
+    const transclude = true;
 
-        this._$templateResult = template && template.render({
-            container: getPublicElement(this._$htmlContainer),
-            noModel: true,
-            transclude
-        });
+    this._$templateResult = template && template.render({
+      container: getPublicElement(this._$htmlContainer),
+      noModel: true,
+      transclude,
+    });
 
-        this._renderSubmitElement();
-        this.callBase();
-        this._updateContainerMarkup();
-    },
+    this._renderSubmitElement();
+    this.callBase();
+    this._updateContainerMarkup();
+  },
 
-    _renderValidationState() {
-        const $content = this._getContent();
+  _renderValidationState() {
+    const $content = this._getContent();
 
-        if($content.length === 1) {
-            this.callBase();
+    if ($content.length === 1) {
+      this.callBase();
+    }
+  },
+
+  _renderSubmitElement() {
+    this._$submitElement = $('<textarea>')
+      .addClass(HTML_EDITOR_SUBMIT_ELEMENT_CLASS)
+      .attr('hidden', true)
+      .appendTo(this.$element());
+
+    this._setSubmitValue(this.option('value'));
+  },
+
+  _setSubmitValue(value) {
+    this._getSubmitElement().val(value);
+  },
+
+  _getSubmitElement() {
+    return this._$submitElement;
+  },
+
+  _createNoScriptFrame() {
+    return $('<iframe>')
+      .css('display', 'none')
+      // @ts-expect-error
+      .attr({
+        // eslint-disable-next-line spellcheck/spell-checker
+        srcdoc: '', // NOTE: srcdoc is used to prevent an excess "Blocked script execution" error in Opera. See T1150911.
+        id: 'xss-frame',
+        sandbox: 'allow-same-origin',
+      });
+  },
+
+  _removeXSSVulnerableHtml(value) {
+    // NOTE: Script tags and inline handlers are removed to prevent XSS attacks.
+    // "Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
+    // error can be logged to the console if the html value is XSS vulnerable.
+
+    const $frame = this
+      ._createNoScriptFrame()
+      .appendTo('body');
+
+    const frame = $frame.get(0);
+    const frameWindow = frame.contentWindow;
+    const frameDocument = frameWindow.document;
+    const frameDocumentBody = frameDocument.body;
+
+    const quill = getQuill();
+
+    // NOTE: Operations with style attribute is required
+    // to prevent a 'unsafe-inline' CSP error in DOMParser.
+    const valueWithoutStyles = quill.replaceStyleAttribute(value);
+
+    frameDocumentBody.innerHTML = valueWithoutStyles;
+
+    const removeInlineHandlers = (element) => {
+      if (element.attributes) {
+        for (let i = 0; i < element.attributes.length; i++) {
+          const { name } = element.attributes[i];
+          if (name.startsWith('on')) {
+            element.removeAttribute(name);
+          }
         }
-    },
-
-    _renderSubmitElement: function() {
-        this._$submitElement = $('<textarea>')
-            .addClass(HTML_EDITOR_SUBMIT_ELEMENT_CLASS)
-            .attr('hidden', true)
-            .appendTo(this.$element());
-
-        this._setSubmitValue(this.option('value'));
-    },
-
-    _setSubmitValue: function(value) {
-        this._getSubmitElement().val(value);
-    },
-
-    _getSubmitElement: function() {
-        return this._$submitElement;
-    },
-
-    _createNoScriptFrame: function() {
-        return $('<iframe>')
-            .css('display', 'none')
-            .attr({
-                // eslint-disable-next-line spellcheck/spell-checker
-                srcdoc: '', // NOTE: srcdoc is used to prevent an excess "Blocked script execution" error in Opera. See T1150911.
-                id: 'xss-frame',
-                sandbox: 'allow-same-origin'
-            });
-    },
-
-    _removeXSSVulnerableHtml: function(value) {
-        // NOTE: Script tags and inline handlers are removed to prevent XSS attacks.
-        // "Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
-        // error can be logged to the console if the html value is XSS vulnerable.
-
-        const $frame = this
-            ._createNoScriptFrame()
-            .appendTo('body');
-
-        const frame = $frame.get(0);
-        const frameWindow = frame.contentWindow;
-        const frameDocument = frameWindow.document;
-        const frameDocumentBody = frameDocument.body;
-
-        const quill = getQuill();
-
-        // NOTE: Operations with style attribute is required
-        // to prevent a 'unsafe-inline' CSP error in DOMParser.
-        const valueWithoutStyles = quill.replaceStyleAttribute(value);
-
-        frameDocumentBody.innerHTML = valueWithoutStyles;
-
-        const removeInlineHandlers = (element) => {
-            if(element.attributes) {
-                for(let i = 0; i < element.attributes.length; i++) {
-                    const name = element.attributes[i].name;
-                    if(name.startsWith('on')) {
-                        element.removeAttribute(name);
-                    }
-                }
-            }
-            if(element.childNodes) {
-                for(let i = 0; i < element.childNodes.length; i++) {
-                    removeInlineHandlers(element.childNodes[i]);
-                }
-            }
-        };
-
-        removeInlineHandlers(frameDocumentBody);
-
-        // NOTE: Do not use jQuery to prevent an excess "Blocked script execution" error in Safari.
-        frameDocumentBody
-            .querySelectorAll('script')
-            .forEach(scriptNode => { scriptNode.remove(); });
-
-        const sanitizedHtml = frameDocumentBody.innerHTML;
-
-        $frame.remove();
-        return sanitizedHtml;
-    },
-
-    _updateContainerMarkup: function() {
-        let markup = this.option('value');
-
-        if(this._isMarkdownValue()) {
-            this._prepareMarkdownConverter();
-            markup = this._markdownConverter.toHtml(markup);
+      }
+      if (element.childNodes) {
+        for (let i = 0; i < element.childNodes.length; i++) {
+          removeInlineHandlers(element.childNodes[i]);
         }
+      }
+    };
 
-        if(markup) {
-            const sanitizedMarkup = this._removeXSSVulnerableHtml(markup);
-            this._$htmlContainer.html(sanitizedMarkup);
-        }
-    },
+    removeInlineHandlers(frameDocumentBody);
 
-    _prepareMarkdownConverter: function() {
-        const MarkdownConverter = ConverterController.getConverter('markdown');
+    // NOTE: Do not use jQuery to prevent an excess "Blocked script execution" error in Safari.
+    frameDocumentBody
+      .querySelectorAll('script')
+      .forEach((scriptNode) => { scriptNode.remove(); });
 
-        if(MarkdownConverter) {
-            this._markdownConverter = new MarkdownConverter();
-        } else {
-            throw Errors.Error('E1051', 'markdown');
-        }
-    },
+    const sanitizedHtml = frameDocumentBody.innerHTML;
 
-    _render: function() {
-        this._prepareConverters();
+    $frame.remove();
+    return sanitizedHtml;
+  },
 
-        this.callBase();
-    },
+  _updateContainerMarkup() {
+    let markup = this.option('value');
 
-    _prepareQuillRegistrator: function() {
-        if(!this._quillRegistrator) {
-            this._quillRegistrator = new QuillRegistrator();
-        }
-    },
+    if (this._isMarkdownValue()) {
+      this._prepareMarkdownConverter();
+      markup = this._markdownConverter.toHtml(markup);
+    }
 
-    _getRegistrator: function() {
-        this._prepareQuillRegistrator();
-        return this._quillRegistrator;
-    },
+    if (markup) {
+      const sanitizedMarkup = this._removeXSSVulnerableHtml(markup);
+      this._$htmlContainer.html(sanitizedMarkup);
+    }
+  },
 
-    _prepareConverters: function() {
-        if(!this._deltaConverter) {
-            const DeltaConverter = ConverterController.getConverter('delta');
+  _prepareMarkdownConverter() {
+    const MarkdownConverter = ConverterController.getConverter('markdown');
 
-            if(DeltaConverter) {
-                this._deltaConverter = new DeltaConverter();
-            }
-        }
+    if (MarkdownConverter) {
+      this._markdownConverter = new MarkdownConverter();
+    } else {
+      throw Errors.Error('E1051', 'markdown');
+    }
+  },
 
-        if(this.option('valueType') === MARKDOWN_VALUE_TYPE && !this._markdownConverter) {
-            this._prepareMarkdownConverter();
-        }
-    },
+  _render() {
+    this._prepareConverters();
 
-    _renderContentImpl: function() {
-        this._contentRenderedDeferred = new Deferred();
+    this.callBase();
+  },
 
-        const renderContentPromise = this._contentRenderedDeferred.promise();
+  _prepareQuillRegistrator() {
+    if (!this._quillRegistrator) {
+      this._quillRegistrator = new QuillRegistrator();
+    }
+  },
 
-        this.callBase();
-        this._renderHtmlEditor();
-        this._renderFormDialog();
-        this._addKeyPressHandler();
+  _getRegistrator() {
+    this._prepareQuillRegistrator();
+    return this._quillRegistrator;
+  },
 
-        return renderContentPromise;
-    },
+  _prepareConverters() {
+    if (!this._deltaConverter) {
+      const DeltaConverter = ConverterController.getConverter('delta');
 
-    _pointerMoveHandler: function(e) {
-        if(isIos) {
-            e.stopPropagation();
-        }
-    },
+      if (DeltaConverter) {
+        this._deltaConverter = new DeltaConverter();
+      }
+    }
 
-    _attachFocusEvents: function() {
-        deferRender(this.callBase.bind(this));
-    },
+    if (this.option('valueType') === MARKDOWN_VALUE_TYPE && !this._markdownConverter) {
+      this._prepareMarkdownConverter();
+    }
+  },
 
-    _addKeyPressHandler: function() {
-        const keyDownEvent = addNamespace('keydown', `${this.NAME}TextChange`);
+  _renderContentImpl() {
+    this._contentRenderedDeferred = Deferred();
 
-        eventsEngine.on(this._$htmlContainer, keyDownEvent, this._keyDownHandler.bind(this));
-    },
+    const renderContentPromise = this._contentRenderedDeferred.promise();
 
-    _keyDownHandler: function(e) {
-        this._saveValueChangeEvent(e);
-    },
+    this.callBase();
+    this._renderHtmlEditor();
+    this._renderFormDialog();
+    this._addKeyPressHandler();
 
-    _renderHtmlEditor: function() {
-        const customizeModules = this.option('customizeModules');
-        const modulesConfig = this._getModulesConfig();
+    return renderContentPromise;
+  },
 
-        if(isFunction(customizeModules)) {
-            customizeModules(modulesConfig);
-        }
+  _pointerMoveHandler(e) {
+    if (isIos) {
+      e.stopPropagation();
+    }
+  },
 
-        this._quillInstance = this._getRegistrator().createEditor(this._$htmlContainer[0], {
-            placeholder: this.option('placeholder'),
-            readOnly: this.option('readOnly') || this.option('disabled'),
-            modules: modulesConfig,
-            theme: 'basic'
-        });
-
-        this._renderValidationState();
-        this._deltaConverter.setQuillInstance(this._quillInstance);
-        this._textChangeHandlerWithContext = this._textChangeHandler.bind(this);
-        this._quillInstance.on('text-change', this._textChangeHandlerWithContext);
-        this._renderScrollHandler();
-        if(this._hasTranscludedContent()) {
-            this._updateContentTask = executeAsync(() => {
-                this._applyTranscludedContent();
-            });
-        } else {
-            this._finalizeContentRendering();
-        }
-    },
+  _attachFocusEvents() {
+    deferRender(this.callBase.bind(this));
+  },
 
-    _renderScrollHandler: function() {
-        const $scrollContainer = this._getContent();
+  _addKeyPressHandler() {
+    const keyDownEvent = addNamespace('keydown', `${this.NAME}TextChange`);
 
-        const initScrollData = prepareScrollData($scrollContainer);
+    eventsEngine.on(this._$htmlContainer, keyDownEvent, this._keyDownHandler.bind(this));
+  },
 
-        eventsEngine.on($scrollContainer, addNamespace(scrollEvents.init, this.NAME), initScrollData, noop);
+  _keyDownHandler(e) {
+    this._saveValueChangeEvent(e);
+  },
 
-        eventsEngine.on($scrollContainer, addNamespace(pointerEvents.move, this.NAME), this._pointerMoveHandler.bind(this));
-    },
+  _renderHtmlEditor() {
+    const customizeModules = this.option('customizeModules');
+    const modulesConfig = this._getModulesConfig();
 
-    _applyTranscludedContent: function() {
-        const valueOption = this.option('value');
-        if(!isDefined(valueOption)) {
-            const html = this._deltaConverter.toHtml();
-            const newDelta = this._quillInstance.clipboard.convert({ html });
+    if (isFunction(customizeModules)) {
+      customizeModules(modulesConfig);
+    }
 
-            if(newDelta.ops.length) {
-                this._quillInstance.setContents(newDelta);
-                return;
-            }
-        }
+    this._quillInstance = this._getRegistrator().createEditor(this._$htmlContainer[0], {
+      placeholder: this.option('placeholder'),
+      readOnly: this.option('readOnly') || this.option('disabled'),
+      modules: modulesConfig,
+      theme: 'basic',
+    });
+
+    this._renderValidationState();
+    this._deltaConverter.setQuillInstance(this._quillInstance);
+    this._textChangeHandlerWithContext = this._textChangeHandler.bind(this);
+    this._quillInstance.on('text-change', this._textChangeHandlerWithContext);
+    this._renderScrollHandler();
+    if (this._hasTranscludedContent()) {
+      this._updateContentTask = executeAsync(() => {
+        this._applyTranscludedContent();
+      });
+    } else {
+      this._finalizeContentRendering();
+    }
+  },
 
-        this._finalizeContentRendering();
-    },
-
-    _hasTranscludedContent: function() {
-        return this._$templateResult && this._$templateResult.length;
-    },
-
-    _getModulesConfig: function() {
-        const quill = this._getRegistrator().getQuill();
-        const wordListMatcher = getWordMatcher(quill);
-        const modulesConfig = extend({}, {
-            table: true,
-            toolbar: this._getModuleConfigByOption('toolbar'),
-            variables: this._getModuleConfigByOption('variables'),
-            // TODO: extract some IE11 tweaks for the Quill uploader module
-            // dropImage: this._getBaseModuleConfig(),
-            resizing: this._getModuleConfigByOption('mediaResizing'),
-            tableResizing: this._getModuleConfigByOption('tableResizing'),
-            tableContextMenu: this._getModuleConfigByOption('tableContextMenu'),
-            imageUpload: this._getModuleConfigByOption('imageUpload'),
-            imageCursor: this._getBaseModuleConfig(),
-            mentions: this._getModuleConfigByOption('mentions'),
-            uploader: {
-                onDrop: (e) => this._saveValueChangeEvent(dxEvent(e)),
-                imageBlot: 'extendedImage'
-            },
-            keyboard: {
-                onKeydown: (e) => this._saveValueChangeEvent(dxEvent(e))
-            },
-            clipboard: {
-                onPaste: (e) => this._saveValueChangeEvent(dxEvent(e)),
-                onCut: (e) => this._saveValueChangeEvent(dxEvent(e)),
-                matchers: [
-                    ['p.MsoListParagraphCxSpFirst', wordListMatcher],
-                    ['p.MsoListParagraphCxSpMiddle', wordListMatcher],
-                    ['p.MsoListParagraphCxSpLast', wordListMatcher]
-                ]
-            },
-            multiline: Boolean(this.option('allowSoftLineBreak'))
-        }, this._getCustomModules());
-
-        return modulesConfig;
-    },
-
-    _getModuleConfigByOption: function(userOptionName) {
-        const optionValue = this.option(userOptionName);
-        let config = {};
-
-        if(!isDefined(optionValue)) {
-            return undefined;
-        }
+  _renderScrollHandler() {
+    const $scrollContainer = this._getContent();
 
-        if(Array.isArray(optionValue)) {
-            config[userOptionName] = optionValue;
-        } else {
-            config = optionValue;
-        }
+    const initScrollData = prepareScrollData($scrollContainer);
 
-        return extend(this._getBaseModuleConfig(), config);
-    },
+    eventsEngine.on($scrollContainer, addNamespace(scrollEvents.init, this.NAME), initScrollData, noop);
 
-    _getBaseModuleConfig: function() {
-        return { editorInstance: this };
-    },
+    eventsEngine.on($scrollContainer, addNamespace(pointerEvents.move, this.NAME), this._pointerMoveHandler.bind(this));
+  },
 
-    _getCustomModules: function() {
-        const modules = {};
-        const moduleNames = this._getRegistrator().getRegisteredModuleNames();
+  _applyTranscludedContent() {
+    const valueOption = this.option('value');
+    if (!isDefined(valueOption)) {
+      const html = this._deltaConverter.toHtml();
+      const newDelta = this._quillInstance.clipboard.convert({ html });
 
-        moduleNames.forEach(modulePath => {
-            modules[modulePath] = this._getBaseModuleConfig();
-        });
+      if (newDelta.ops.length) {
+        this._quillInstance.setContents(newDelta);
+        return;
+      }
+    }
 
-        return modules;
-    },
+    this._finalizeContentRendering();
+  },
+
+  _hasTranscludedContent() {
+    return this._$templateResult && this._$templateResult.length;
+  },
+
+  _getModulesConfig() {
+    const quill = this._getRegistrator().getQuill();
+    const wordListMatcher = getWordMatcher(quill);
+    const modulesConfig = extend({}, {
+      table: true,
+      toolbar: this._getModuleConfigByOption('toolbar'),
+      variables: this._getModuleConfigByOption('variables'),
+      // TODO: extract some IE11 tweaks for the Quill uploader module
+      // dropImage: this._getBaseModuleConfig(),
+      resizing: this._getModuleConfigByOption('mediaResizing'),
+      tableResizing: this._getModuleConfigByOption('tableResizing'),
+      tableContextMenu: this._getModuleConfigByOption('tableContextMenu'),
+      imageUpload: this._getModuleConfigByOption('imageUpload'),
+      imageCursor: this._getBaseModuleConfig(),
+      mentions: this._getModuleConfigByOption('mentions'),
+      uploader: {
+        onDrop: (e) => this._saveValueChangeEvent(dxEvent(e)),
+        imageBlot: 'extendedImage',
+      },
+      keyboard: {
+        onKeydown: (e) => this._saveValueChangeEvent(dxEvent(e)),
+      },
+      clipboard: {
+        onPaste: (e) => this._saveValueChangeEvent(dxEvent(e)),
+        onCut: (e) => this._saveValueChangeEvent(dxEvent(e)),
+        matchers: [
+          ['p.MsoListParagraphCxSpFirst', wordListMatcher],
+          ['p.MsoListParagraphCxSpMiddle', wordListMatcher],
+          ['p.MsoListParagraphCxSpLast', wordListMatcher],
+        ],
+      },
+      multiline: Boolean(this.option('allowSoftLineBreak')),
+    }, this._getCustomModules());
+
+    return modulesConfig;
+  },
+
+  _getModuleConfigByOption(userOptionName) {
+    const optionValue = this.option(userOptionName);
+    let config = {};
+
+    if (!isDefined(optionValue)) {
+      return undefined;
+    }
 
-    _textChangeHandler: function(newDelta, oldDelta, source) {
-        const htmlMarkup = this._deltaConverter.toHtml();
-        const convertedValue = this._isMarkdownValue() ? this._updateValueByType(MARKDOWN_VALUE_TYPE, htmlMarkup) : htmlMarkup;
-        const currentValue = this.option('value');
+    if (Array.isArray(optionValue)) {
+      config[userOptionName] = optionValue;
+    } else {
+      config = optionValue;
+    }
 
-        if(currentValue !== convertedValue && !this._isNullValueConverted(currentValue, convertedValue)) {
-            this._isEditorUpdating = true;
-            this.option('value', convertedValue);
-        }
+    return extend(this._getBaseModuleConfig(), config);
+  },
 
-        this._finalizeContentRendering();
-    },
+  _getBaseModuleConfig() {
+    return { editorInstance: this };
+  },
 
-    _isNullValueConverted: function(currentValue, convertedValue) {
-        return currentValue === null && convertedValue === '';
-    },
+  _getCustomModules() {
+    const modules = {};
+    const moduleNames = this._getRegistrator().getRegisteredModuleNames();
 
-    _finalizeContentRendering: function() {
-        if(this._contentRenderedDeferred) {
-            this.clearHistory();
-            this._contentInitializedCallback.fire();
-            this._contentRenderedDeferred.resolve();
-            this._contentRenderedDeferred = undefined;
-        }
-    },
+    moduleNames.forEach((modulePath) => {
+      modules[modulePath] = this._getBaseModuleConfig();
+    });
 
-    _updateValueByType: function(valueType, value) {
-        const converter = this._markdownConverter;
+    return modules;
+  },
 
-        if(!isDefined(converter)) {
-            return;
-        }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _textChangeHandler(newDelta, oldDelta, source) {
+    const htmlMarkup = this._deltaConverter.toHtml();
+    const convertedValue = this._isMarkdownValue() ? this._updateValueByType(MARKDOWN_VALUE_TYPE, htmlMarkup) : htmlMarkup;
+    const currentValue = this.option('value');
 
-        const currentValue = ensureDefined(value, this.option('value'));
+    if (currentValue !== convertedValue && !this._isNullValueConverted(currentValue, convertedValue)) {
+      this._isEditorUpdating = true;
+      this.option('value', convertedValue);
+    }
 
-        return valueType === MARKDOWN_VALUE_TYPE ? converter.toMarkdown(currentValue) : converter.toHtml(currentValue);
-    },
+    this._finalizeContentRendering();
+  },
 
-    _isMarkdownValue: function() {
-        return this.option('valueType') === MARKDOWN_VALUE_TYPE;
-    },
+  _isNullValueConverted(currentValue, convertedValue) {
+    return currentValue === null && convertedValue === '';
+  },
 
-    _resetEnabledState: function() {
-        if(this._quillInstance) {
-            const isEnabled = !(this.option('readOnly') || this.option('disabled'));
+  _finalizeContentRendering() {
+    if (this._contentRenderedDeferred) {
+      this.clearHistory();
+      this._contentInitializedCallback.fire();
+      this._contentRenderedDeferred.resolve();
+      this._contentRenderedDeferred = undefined;
+    }
+  },
 
-            this._quillInstance.enable(isEnabled);
-        }
-    },
+  _updateValueByType(valueType, value) {
+    const converter = this._markdownConverter;
+
+    if (!isDefined(converter)) {
+      return;
+    }
 
-    _renderFormDialog: function() {
-        const userOptions = extend(true, {
-            width: 'auto',
-            height: 'auto',
-            hideOnOutsideClick: true
-        }, this.option('formDialogOptions'));
+    const currentValue = ensureDefined(value, this.option('value'));
 
-        this._formDialog = new FormDialog(this, userOptions);
-    },
+    return valueType === MARKDOWN_VALUE_TYPE ? converter.toMarkdown(currentValue) : converter.toHtml(currentValue);
+  },
 
-    _getStylingModePrefix: function() {
-        return 'dx-htmleditor-';
-    },
+  _isMarkdownValue() {
+    return this.option('valueType') === MARKDOWN_VALUE_TYPE;
+  },
 
-    _getQuillContainer: function() {
-        return this._$htmlContainer;
-    },
+  _resetEnabledState() {
+    if (this._quillInstance) {
+      const isEnabled = !(this.option('readOnly') || this.option('disabled'));
 
-    _prepareModuleOptions(args) {
-        const optionData = args.fullName?.split('.');
-        let value = args.value;
-        const optionName = optionData.length >= 2 ? optionData[1] : args.name;
+      this._quillInstance.enable(isEnabled);
+    }
+  },
 
-        if(optionData.length === 3) {
-            value = { [optionData[2]]: value };
-        }
+  _renderFormDialog() {
+    const userOptions = extend(true, {
+      width: 'auto',
+      height: 'auto',
+      hideOnOutsideClick: true,
+    }, this.option('formDialogOptions'));
 
-        return [ optionName, value ];
-    },
+    this._formDialog = new FormDialog(this, userOptions);
+  },
 
-    _moduleOptionChanged: function(moduleName, args) {
-        const moduleInstance = this.getModule(moduleName);
-        const shouldPassOptionsToModule = Boolean(moduleInstance);
+  _getStylingModePrefix() {
+    return 'dx-htmleditor-';
+  },
 
-        if(shouldPassOptionsToModule) {
-            moduleInstance.option(...this._prepareModuleOptions(args));
-        } else {
-            this._invalidate();
-        }
-    },
-
-    _optionChanged: function(args) {
-        switch(args.name) {
-            case 'value': {
-                if(this._quillInstance) {
-                    if(this._isEditorUpdating) {
-                        this._isEditorUpdating = false;
-                    } else {
-                        const updatedValue = this._isMarkdownValue() ? this._updateValueByType('HTML', args.value) : args.value;
-
-                        this._suppressValueChangeAction();
-                        this._updateHtmlContent(updatedValue);
-                        this._resumeValueChangeAction();
-                    }
-                } else {
-                    this._$htmlContainer.html(args.value);
-                }
-
-                // NOTE: value can be optimized by Quill
-                const value = this.option('value');
-                if(value !== args.previousValue) {
-                    this._setSubmitValue(value);
-                    this.callBase({ ...args, value });
-                }
-                break;
-            }
-            case 'placeholder':
-            case 'variables':
-            case 'toolbar':
-            case 'mentions':
-            case 'customizeModules':
-            case 'allowSoftLineBreak':
-                this._invalidate();
-                break;
-            case 'tableResizing':
-                this._moduleOptionChanged('tableResizing', args);
-                break;
-            case 'valueType': {
-                this._prepareConverters();
-                const newValue = this._updateValueByType(args.value);
-
-                if(args.value === 'html' && this._quillInstance) {
-                    this._updateHtmlContent(newValue);
-                } else {
-                    this.option('value', newValue);
-                }
-                break;
-            }
-            case 'stylingMode':
-                this._renderStylingMode();
-                break;
-            case 'readOnly':
-            case 'disabled':
-                this.callBase(args);
-                this._resetEnabledState();
-                break;
-            case 'formDialogOptions':
-                this._renderFormDialog();
-                break;
-            case 'tableContextMenu':
-                this._moduleOptionChanged('tableContextMenu', args);
-                break;
-            case 'mediaResizing':
-                if(!args.previousValue || !args.value) {
-                    this._invalidate();
-                } else {
-                    this.getModule('resizing').option(args.name, args.value);
-                }
-                break;
-            case 'width':
-                this.callBase(args);
-                this._repaintToolbar();
-                break;
-            case 'imageUpload':
-                this._moduleOptionChanged('imageUpload', args);
-                break;
-            default:
-                this.callBase(args);
-        }
-    },
+  _getQuillContainer() {
+    return this._$htmlContainer;
+  },
 
-    _repaintToolbar: function() {
-        this._applyToolbarMethod('repaint');
-    },
+  _prepareModuleOptions(args) {
+    const optionData = args.fullName?.split('.');
+    let { value } = args;
+    const optionName = optionData.length >= 2 ? optionData[1] : args.name;
 
-    _updateHtmlContent: function(html) {
-        const newDelta = this._quillInstance.clipboard.convert({ html });
-        this._quillInstance.setContents(newDelta);
-    },
+    if (optionData.length === 3) {
+      value = { [optionData[2]]: value };
+    }
 
-    _clean: function() {
-        if(this._quillInstance) {
-            eventsEngine.off(this._getContent(), `.${this.NAME}`);
-            this._quillInstance.off('text-change', this._textChangeHandlerWithContext);
-            this._cleanCallback.fire();
-        }
+    return [optionName, value];
+  },
 
-        this._abortUpdateContentTask();
-        this._cleanCallback.empty();
-        this._contentInitializedCallback.empty();
-        this.callBase();
-    },
+  _moduleOptionChanged(moduleName, args) {
+    const moduleInstance = this.getModule(moduleName);
+    const shouldPassOptionsToModule = Boolean(moduleInstance);
 
-    _abortUpdateContentTask: function() {
-        if(this._updateContentTask) {
-            this._updateContentTask.abort();
-            this._updateContentTask = undefined;
+    if (shouldPassOptionsToModule) {
+      moduleInstance.option(...this._prepareModuleOptions(args));
+    } else {
+      this._invalidate();
+    }
+  },
+
+  _optionChanged(args) {
+    switch (args.name) {
+      case 'value': {
+        if (this._quillInstance) {
+          if (this._isEditorUpdating) {
+            this._isEditorUpdating = false;
+          } else {
+            const updatedValue = this._isMarkdownValue() ? this._updateValueByType('HTML', args.value) : args.value;
+
+            this._suppressValueChangeAction();
+            this._updateHtmlContent(updatedValue);
+            this._resumeValueChangeAction();
+          }
+        } else {
+          this._$htmlContainer.html(args.value);
         }
-    },
 
-    _applyQuillMethod(methodName, args) {
-        if(this._quillInstance) {
-            return this._quillInstance[methodName].apply(this._quillInstance, args);
+        // NOTE: value can be optimized by Quill
+        const value = this.option('value');
+        if (value !== args.previousValue) {
+          this._setSubmitValue(value);
+          this.callBase({ ...args, value });
         }
-    },
+        break;
+      }
+      case 'placeholder':
+      case 'variables':
+      case 'toolbar':
+      case 'mentions':
+      case 'customizeModules':
+      case 'allowSoftLineBreak':
+        this._invalidate();
+        break;
+      case 'tableResizing':
+        this._moduleOptionChanged('tableResizing', args);
+        break;
+      case 'valueType': {
+        this._prepareConverters();
+        const newValue = this._updateValueByType(args.value);
 
-    _applyQuillHistoryMethod(methodName) {
-        if(this._quillInstance && this._quillInstance.history) {
-            this._quillInstance.history[methodName]();
+        if (args.value === 'html' && this._quillInstance) {
+          this._updateHtmlContent(newValue);
+        } else {
+          this.option('value', newValue);
         }
-    },
-
-    _applyToolbarMethod(methodName) {
-        this.getModule('toolbar')?.[methodName]();
-    },
-
-    addCleanCallback(callback) {
-        this._cleanCallback.add(callback);
-    },
-
-    addContentInitializedCallback(callback) {
-        this._contentInitializedCallback.add(callback);
-    },
-
-    register: function(components) {
-        this._getRegistrator().registerModules(components);
-
-        if(this._quillInstance) {
-            this.repaint();
+        break;
+      }
+      case 'stylingMode':
+        this._renderStylingMode();
+        break;
+      case 'readOnly':
+      case 'disabled':
+        this.callBase(args);
+        this._resetEnabledState();
+        break;
+      case 'formDialogOptions':
+        this._renderFormDialog();
+        break;
+      case 'tableContextMenu':
+        this._moduleOptionChanged('tableContextMenu', args);
+        break;
+      case 'mediaResizing':
+        if (!args.previousValue || !args.value) {
+          this._invalidate();
+        } else {
+          this.getModule('resizing').option(args.name, args.value);
         }
-    },
-
-    get: function(modulePath) {
-        return this._getRegistrator().getQuill().import(modulePath);
-    },
-
-    getModule: function(moduleName) {
-        return this._applyQuillMethod('getModule', arguments);
-    },
-
-    getQuillInstance: function() {
-        return this._quillInstance;
-    },
-
-    getSelection: function(focus) {
-        return this._applyQuillMethod('getSelection', arguments);
-    },
-
-    setSelection: function(index, length) {
-        this._applyQuillMethod('setSelection', arguments);
-    },
-
-    getText: function(index, length) {
-        return this._applyQuillMethod('getText', arguments);
-    },
-
-    format: function(formatName, formatValue) {
-        this._applyQuillMethod('format', arguments);
-    },
-
-    formatText: function(index, length, formatName, formatValue) {
-        this._applyQuillMethod('formatText', arguments);
-    },
-
-    formatLine: function(index, length, formatName, formatValue) {
-        this._applyQuillMethod('formatLine', arguments);
-    },
-
-    getFormat: function(index, length) {
-        return this._applyQuillMethod('getFormat', arguments);
-    },
-
-    removeFormat: function(index, length) {
-        return this._applyQuillMethod('removeFormat', arguments);
-    },
-
-    clearHistory: function() {
-        this._applyQuillHistoryMethod('clear');
-        this._applyToolbarMethod('updateHistoryWidgets');
-    },
-
-    undo: function() {
-        this._applyQuillHistoryMethod('undo');
-
-    },
-
-    redo: function() {
-        this._applyQuillHistoryMethod('redo');
-
-    },
-
-    getLength: function() {
-        return this._applyQuillMethod('getLength');
-    },
+        break;
+      case 'width':
+        this.callBase(args);
+        this._repaintToolbar();
+        break;
+      case 'imageUpload':
+        this._moduleOptionChanged('imageUpload', args);
+        break;
+      default:
+        this.callBase(args);
+    }
+  },
+
+  _repaintToolbar() {
+    this._applyToolbarMethod('repaint');
+  },
+
+  _updateHtmlContent(html) {
+    const newDelta = this._quillInstance.clipboard.convert({ html });
+    this._quillInstance.setContents(newDelta);
+  },
+
+  _clean() {
+    if (this._quillInstance) {
+      eventsEngine.off(this._getContent(), `.${this.NAME}`);
+      this._quillInstance.off('text-change', this._textChangeHandlerWithContext);
+      this._cleanCallback.fire();
+    }
 
-    getBounds: function(index, length) {
-        return this._applyQuillMethod('getBounds', arguments);
-    },
+    this._abortUpdateContentTask();
+    this._cleanCallback.empty();
+    this._contentInitializedCallback.empty();
+    this.callBase();
+  },
 
-    delete: function(index, length) {
-        this._applyQuillMethod('deleteText', arguments);
-    },
+  _abortUpdateContentTask() {
+    if (this._updateContentTask) {
+      this._updateContentTask.abort();
+      this._updateContentTask = undefined;
+    }
+  },
 
-    insertText: function(index, text, formats) {
-        this._applyQuillMethod('insertText', arguments);
-    },
+  _applyQuillMethod(methodName, args) {
+    if (this._quillInstance) {
+      return this._quillInstance[methodName].apply(this._quillInstance, args);
+    }
+  },
 
-    insertEmbed: function(index, type, config) {
-        this._applyQuillMethod('insertEmbed', arguments);
-    },
+  _applyQuillHistoryMethod(methodName) {
+    if (this._quillInstance && this._quillInstance.history) {
+      this._quillInstance.history[methodName]();
+    }
+  },
 
-    showFormDialog: function(formConfig) {
-        return this._formDialog.show(formConfig);
-    },
+  _applyToolbarMethod(methodName) {
+    this.getModule('toolbar')?.[methodName]();
+  },
 
-    formDialogOption: function(optionName, optionValue) {
-        return this._formDialog.popupOption.apply(this._formDialog, arguments);
-    },
+  addCleanCallback(callback) {
+    this._cleanCallback.add(callback);
+  },
 
-    focus: function() {
-        this.callBase();
-        this._applyQuillMethod('focus');
-    },
+  addContentInitializedCallback(callback) {
+    this._contentInitializedCallback.add(callback);
+  },
 
-    blur: function() {
-        this._applyQuillMethod('blur');
-    },
+  register(components) {
+    this._getRegistrator().registerModules(components);
 
-    getMentionKeyInTemplateStorage() {
-        return this._mentionKeyInTemplateStorage;
+    if (this._quillInstance) {
+      this.repaint();
     }
+  },
+
+  get(modulePath) {
+    return this._getRegistrator().getQuill().import(modulePath);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getModule(moduleName) {
+    return this._applyQuillMethod('getModule', arguments);
+  },
+
+  getQuillInstance() {
+    return this._quillInstance;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getSelection(focus) {
+    return this._applyQuillMethod('getSelection', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setSelection(index, length) {
+    this._applyQuillMethod('setSelection', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getText(index, length) {
+    return this._applyQuillMethod('getText', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  format(formatName, formatValue) {
+    this._applyQuillMethod('format', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  formatText(index, length, formatName, formatValue) {
+    this._applyQuillMethod('formatText', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  formatLine(index, length, formatName, formatValue) {
+    this._applyQuillMethod('formatLine', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getFormat(index, length) {
+    return this._applyQuillMethod('getFormat', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  removeFormat(index, length) {
+    return this._applyQuillMethod('removeFormat', arguments);
+  },
+
+  clearHistory() {
+    this._applyQuillHistoryMethod('clear');
+    this._applyToolbarMethod('updateHistoryWidgets');
+  },
+
+  undo() {
+    this._applyQuillHistoryMethod('undo');
+  },
+
+  redo() {
+    this._applyQuillHistoryMethod('redo');
+  },
+
+  getLength() {
+    return this._applyQuillMethod('getLength');
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getBounds(index, length) {
+    return this._applyQuillMethod('getBounds', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  delete(index, length) {
+    this._applyQuillMethod('deleteText', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  insertText(index, text, formats) {
+    this._applyQuillMethod('insertText', arguments);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  insertEmbed(index, type, config) {
+    this._applyQuillMethod('insertEmbed', arguments);
+  },
+
+  showFormDialog(formConfig) {
+    return this._formDialog.show(formConfig);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  formDialogOption(optionName, optionValue) {
+    return this._formDialog.popupOption.apply(this._formDialog, arguments);
+  },
+
+  focus() {
+    this.callBase();
+    this._applyQuillMethod('focus');
+  },
+
+  blur() {
+    this._applyQuillMethod('blur');
+  },
+
+  getMentionKeyInTemplateStorage() {
+    return this._mentionKeyInTemplateStorage;
+  },
 });
 
 registerComponent('dxHtmlEditor', HtmlEditor);
diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_quill_importer.ts b/packages/devextreme/js/__internal/ui/html_editor/m_quill_importer.ts
index 68bebc22e967..98555c17097a 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/m_quill_importer.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/m_quill_importer.ts
@@ -1,10 +1,10 @@
-import Errors from '../widget/ui.errors';
+import Errors from '@js/ui/widget/ui.errors';
 import Quill from 'devextreme-quill';
 
 export function getQuill() {
-    if(!Quill) {
-        throw Errors.Error('E1041', 'Quill');
-    }
+  if (!Quill) {
+    throw Errors.Error('E1041', 'Quill');
+  }
 
-    return Quill;
+  return Quill;
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_quill_registrator.ts b/packages/devextreme/js/__internal/ui/html_editor/m_quill_registrator.ts
index daf51163d984..462520cd8937 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/m_quill_registrator.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/m_quill_registrator.ts
@@ -1,86 +1,91 @@
-import { getQuill } from './quill_importer';
-import BaseTheme from './themes/base';
-import Image from './formats/image';
-import Link from './formats/link';
-import FontStyle from './formats/font';
-import SizeStyle from './formats/size';
-import AlignStyle from './formats/align';
-import Toolbar from './modules/toolbar';
-import DropImage from './modules/dropImage';
-import Variables from './modules/variables';
-import Resizing from './modules/resizing';
-import TableResizing from './modules/tableResizing';
-import TableContextMenu from './modules/tableContextMenu';
-import ImageUpload from './modules/imageUpload';
-import ImageCursor from './modules/imageCursor';
-import MentionsModule from './modules/mentions';
+import AlignStyle from './formats/m_align';
+import FontStyle from './formats/m_font';
+import Image from './formats/m_image';
+import Link from './formats/m_link';
+import SizeStyle from './formats/m_size';
+import { getQuill } from './m_quill_importer';
+import DropImage from './modules/m_dropImage';
+import ImageCursor from './modules/m_imageCursor';
+import ImageUpload from './modules/m_imageUpload';
+import MentionsModule from './modules/m_mentions';
+import Resizing from './modules/m_resizing';
+import TableContextMenu from './modules/m_tableContextMenu';
+import TableResizing from './modules/m_tableResizing';
+import Toolbar from './modules/m_toolbar';
+import Variables from './modules/m_variables';
+import BaseTheme from './themes/m_base';
 
 class QuillRegistrator {
-    constructor() {
-        if(QuillRegistrator.initialized) {
-            return;
-        }
-
-        const quill = this.getQuill();
-        const DirectionStyle = quill.import('attributors/style/direction');
-
-        quill.register({
-            'formats/align': AlignStyle,
-            'formats/direction': DirectionStyle,
-            'formats/font': FontStyle,
-            'formats/size': SizeStyle,
-
-            'formats/extendedImage': Image,
-            'formats/link': Link,
-
-            'modules/toolbar': Toolbar,
-            'modules/dropImage': DropImage,
-            'modules/variables': Variables,
-            'modules/resizing': Resizing,
-            'modules/tableResizing': TableResizing,
-            'modules/tableContextMenu': TableContextMenu,
-            'modules/imageUpload': ImageUpload,
-            'modules/imageCursor': ImageCursor,
-            'modules/mentions': MentionsModule,
-
-            'themes/basic': BaseTheme
-        },
-        true
-        );
-
-        this._customModules = [];
-        QuillRegistrator._initialized = true;
+  _customModules: any[] = [];
+
+  constructor() {
+    // @ts-expect-error
+    if (QuillRegistrator.initialized) {
+      return;
     }
 
-    createEditor(container, config) {
-        const quill = this.getQuill();
+    const quill = this.getQuill();
+    const DirectionStyle = quill.import('attributors/style/direction');
 
-        return new quill(container, config);
-    }
+    quill.register(
+      {
+        'formats/align': AlignStyle,
+        'formats/direction': DirectionStyle,
+        'formats/font': FontStyle,
+        'formats/size': SizeStyle,
 
-    registerModules(modulesConfig) {
-        const isModule = RegExp('modules/*');
-        const quill = this.getQuill();
-        const isRegisteredModule = (modulePath) => {
-            return !!quill.imports[modulePath];
-        };
+        'formats/extendedImage': Image,
+        'formats/link': Link,
 
-        for(const modulePath in modulesConfig) {
-            if(isModule.test(modulePath) && !isRegisteredModule(modulePath)) {
-                this._customModules.push(modulePath.slice(8));
-            }
-        }
+        'modules/toolbar': Toolbar,
+        'modules/dropImage': DropImage,
+        'modules/variables': Variables,
+        'modules/resizing': Resizing,
+        'modules/tableResizing': TableResizing,
+        'modules/tableContextMenu': TableContextMenu,
+        'modules/imageUpload': ImageUpload,
+        'modules/imageCursor': ImageCursor,
+        'modules/mentions': MentionsModule,
 
-        quill.register(modulesConfig, true);
-    }
+        'themes/basic': BaseTheme,
+      },
+      true,
+    );
 
-    getRegisteredModuleNames() {
-        return this._customModules;
-    }
+    this._customModules = [];
+    // @ts-expect-error
+    QuillRegistrator._initialized = true;
+  }
+
+  createEditor(container, config) {
+    const quill = this.getQuill();
 
-    getQuill() {
-        return getQuill();
+    // eslint-disable-next-line new-cap
+    return new quill(container, config);
+  }
+
+  registerModules(modulesConfig) {
+    const isModule = RegExp('modules/*');
+    const quill = this.getQuill();
+    const isRegisteredModule = (modulePath) => !!quill.imports[modulePath];
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const modulePath in modulesConfig) {
+      if (isModule.test(modulePath) && !isRegisteredModule(modulePath)) {
+        this._customModules.push(modulePath.slice(8));
+      }
     }
+
+    quill.register(modulesConfig, true);
+  }
+
+  getRegisteredModuleNames() {
+    return this._customModules;
+  }
+
+  getQuill() {
+    return getQuill();
+  }
 }
 
 export default QuillRegistrator;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/matchers/m_wordLists.ts b/packages/devextreme/js/__internal/ui/html_editor/matchers/m_wordLists.ts
index 29027c987e06..6cb438a4347d 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/matchers/m_wordLists.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/matchers/m_wordLists.ts
@@ -1,50 +1,49 @@
 function getListType(matches) {
-    const prefix = matches[1];
-    return prefix.match(/\S+\./) ? 'ordered' : 'bullet';
+  const prefix = matches[1];
+  return prefix.match(/\S+\./) ? 'ordered' : 'bullet';
 }
 
 function getIndent(node, msStyleAttributeName) {
-    const style = node.getAttribute(msStyleAttributeName);
+  const style = node.getAttribute(msStyleAttributeName);
 
-    if(style) {
-        const level = style
-            .replace(/\n+/g, '')
-            .match(/level(\d+)/);
+  if (style) {
+    const level = style
+      .replace(/\n+/g, '')
+      .match(/level(\d+)/);
 
-        return level ? level[1] - 1 : 0;
-    } else {
-        return false;
-    }
+    return level ? level[1] - 1 : 0;
+  }
+  return false;
 }
 
 function removeNewLineChar(operations) {
-    const newLineOperation = operations[operations.length - 1];
-    newLineOperation.insert = newLineOperation.insert.trim();
+  const newLineOperation = operations[operations.length - 1];
+  newLineOperation.insert = newLineOperation.insert.trim();
 }
 
 const getMatcher = (quill) => {
-    const Delta = quill.import('delta');
-    const msStyleAttributeName = quill.MS_LIST_DATA_KEY;
+  const Delta = quill.import('delta');
+  const msStyleAttributeName = quill.MS_LIST_DATA_KEY;
 
-    return (node, delta) => {
-        const ops = delta.ops.slice();
+  return (node, delta) => {
+    const ops = delta.ops.slice();
 
-        const insertOperation = ops[0];
-        insertOperation.insert = insertOperation.insert.replace(/^\s+/, '');
-        const listDecoratorMatches = insertOperation.insert.match(/^(\S+)\s+/);
-        const indent = listDecoratorMatches && getIndent(node, msStyleAttributeName);
+    const insertOperation = ops[0];
+    insertOperation.insert = insertOperation.insert.replace(/^\s+/, '');
+    const listDecoratorMatches = insertOperation.insert.match(/^(\S+)\s+/);
+    const indent = listDecoratorMatches && getIndent(node, msStyleAttributeName);
 
-        if(!listDecoratorMatches || indent === false) {
-            return delta;
-        }
+    if (!listDecoratorMatches || indent === false) {
+      return delta;
+    }
 
-        insertOperation.insert = insertOperation.insert.substring(listDecoratorMatches[0].length, insertOperation.insert.length);
+    insertOperation.insert = insertOperation.insert.substring(listDecoratorMatches[0].length, insertOperation.insert.length);
 
-        removeNewLineChar(ops);
+    removeNewLineChar(ops);
 
-        ops.push({ insert: '\n', attributes: { list: getListType(listDecoratorMatches), indent } });
-        return new Delta(ops);
-    };
+    ops.push({ insert: '\n', attributes: { list: getListType(listDecoratorMatches), indent } });
+    return new Delta(ops);
+  };
 };
 
 export default getMatcher;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/empty.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/empty.ts
index 25aad8c91935..14d52aa281a2 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/empty.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/empty.ts
@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default class EmptyModule {}
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_base.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_base.ts
index 0dd474f5edd0..c568220d6c89 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_base.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_base.ts
@@ -1,35 +1,37 @@
+import { isDefined, isObject } from '@js/core/utils/type';
 import Quill from 'devextreme-quill';
+
 import EmptyModule from './empty';
-import { isObject, isDefined } from '../../../core/utils/type';
 
+// eslint-disable-next-line import/no-mutable-exports
 let BaseModule = EmptyModule;
 
-if(Quill) {
-    const BaseQuillModule = Quill.import('core/module');
-
-    BaseModule = class BaseHtmlEditorModule extends BaseQuillModule {
-        constructor(quill, options) {
-            super(quill, options);
-
-            this.editorInstance = options.editorInstance;
-        }
-
-        saveValueChangeEvent(event) {
-            this.editorInstance._saveValueChangeEvent(event);
-        }
-
-        addCleanCallback(callback) {
-            this.editorInstance.addCleanCallback(callback);
-        }
-
-        handleOptionChangeValue(changes) {
-            if(isObject(changes)) {
-                Object.entries(changes).forEach(([name, value]) => this.option(name, value));
-            } else if(!isDefined(changes)) {
-                this?.clean();
-            }
-        }
-    };
+if (Quill) {
+  const BaseQuillModule = Quill.import('core/module');
+  // @ts-expect-error
+  BaseModule = class BaseHtmlEditorModule extends BaseQuillModule {
+    constructor(quill, options) {
+      super(quill, options);
+
+      this.editorInstance = options.editorInstance;
+    }
+
+    saveValueChangeEvent(event) {
+      this.editorInstance._saveValueChangeEvent(event);
+    }
+
+    addCleanCallback(callback) {
+      this.editorInstance.addCleanCallback(callback);
+    }
+
+    handleOptionChangeValue(changes) {
+      if (isObject(changes)) {
+        Object.entries(changes).forEach(([name, value]) => this.option(name, value));
+      } else if (!isDefined(changes)) {
+        this?.clean();
+      }
+    }
+  };
 }
 
 export default BaseModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_dropImage.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_dropImage.ts
index e9701af7017f..6f8ceef66a34 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_dropImage.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_dropImage.ts
@@ -1,90 +1,97 @@
+import browser from '@js/core/utils/browser';
+import { each } from '@js/core/utils/iterator';
+import { getWindow } from '@js/core/utils/window';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
 import Quill from 'devextreme-quill';
 
-import eventsEngine from '../../../events/core/events_engine';
-import { addNamespace } from '../../../events/utils/index';
-import { each } from '../../../core/utils/iterator';
-import browser from '../../../core/utils/browser';
-import { getWindow } from '../../../core/utils/window';
-
-import BaseModule from './base';
+import BaseModule from './m_base';
 
+// eslint-disable-next-line import/no-mutable-exports
 let DropImageModule = BaseModule;
 
-if(Quill) {
-    DropImageModule = class DropImageModule extends BaseModule {
-        constructor(quill, options) {
-            super(quill, options);
-
-            const widgetName = this.editorInstance.NAME;
-
-            eventsEngine.on(this.quill.root, addNamespace('drop', widgetName), this._dropHandler.bind(this));
-            eventsEngine.on(this.quill.root, addNamespace('paste', widgetName), this._pasteHandler.bind(this));
+if (Quill) {
+  // @ts-expect-error
+  DropImageModule = class DropImageModule extends BaseModule {
+    editorInstance: any;
+
+    quill: any;
+
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+
+      const widgetName = this.editorInstance.NAME;
+
+      eventsEngine.on(this.quill.root, addNamespace('drop', widgetName), this._dropHandler.bind(this));
+      eventsEngine.on(this.quill.root, addNamespace('paste', widgetName), this._pasteHandler.bind(this));
+    }
+
+    _dropHandler(e) {
+      const { dataTransfer } = e.originalEvent;
+      const hasFiles = dataTransfer?.files?.length;
+      // @ts-expect-error
+      this.saveValueChangeEvent(e);
+      e.preventDefault();
+      if (hasFiles) {
+        this._getImage(dataTransfer.files, this._addImage.bind(this));
+      }
+    }
+
+    _pasteHandler(e) {
+      const { clipboardData } = e.originalEvent;
+      // @ts-expect-error
+      this.saveValueChangeEvent(e);
+
+      if (!clipboardData) {
+        return;
+      }
+
+      const hasDataItems = clipboardData.items?.length;
+      const isHtmlData = clipboardData.getData('text/html');
+
+      if (!isHtmlData && hasDataItems) {
+        this._getImage(clipboardData.items, (imageData) => {
+          if (browser.mozilla) {
+            return;
+          }
+
+          this._addImage(imageData);
+        });
+      }
+    }
+
+    _isImage(file) {
+      return !!file.type.match(/^image\/(a?png|bmp|gif|p?jpe?g|svg|vnd\.microsoft\.icon|webp)/i);
+    }
+
+    _getImage(files, callback) {
+      const window = getWindow();
+      each(files, (index, file) => {
+        if (!this._isImage(file)) {
+          return;
         }
-
-        _dropHandler(e) {
-            const dataTransfer = e.originalEvent.dataTransfer;
-            const hasFiles = dataTransfer?.files?.length;
-
-            this.saveValueChangeEvent(e);
-            e.preventDefault();
-            if(hasFiles) {
-                this._getImage(dataTransfer.files, this._addImage.bind(this));
-            }
+        // @ts-expect-error
+        const reader = new window.FileReader();
+        reader.onload = ({ target }) => {
+          callback(target.result);
+        };
+
+        const readableFile = file.getAsFile ? file.getAsFile() : file;
+        // @ts-expect-error
+        if (readableFile instanceof window.Blob) {
+          reader.readAsDataURL(readableFile);
         }
+      });
+    }
 
-        _pasteHandler(e) {
-            const { clipboardData } = e.originalEvent;
-
-            this.saveValueChangeEvent(e);
-
-            if(!clipboardData) {
-                return;
-            }
-
-            const hasDataItems = clipboardData.items?.length;
-            const isHtmlData = clipboardData.getData('text/html');
-
-            if(!isHtmlData && hasDataItems) {
-                this._getImage(clipboardData.items, (imageData) => {
-                    if(browser.mozilla) {
-                        return;
-                    }
+    _addImage(data) {
+      const selection = this.quill.getSelection();
+      const pasteIndex = selection ? selection.index : this.quill.getLength();
 
-                    this._addImage(imageData);
-                });
-            }
-        }
-
-        _isImage(file) {
-            return !!file.type.match(/^image\/(a?png|bmp|gif|p?jpe?g|svg|vnd\.microsoft\.icon|webp)/i);
-        }
-
-        _getImage(files, callback) {
-            const window = getWindow();
-            each(files, (index, file) => {
-                if(!this._isImage(file)) {
-                    return;
-                }
-
-                const reader = new window.FileReader();
-                reader.onload = ({ target }) => {
-                    callback(target.result);
-                };
-
-                const readableFile = file.getAsFile ? file.getAsFile() : file;
-                if(readableFile instanceof window.Blob) {
-                    reader.readAsDataURL(readableFile);
-                }
-            });
-        }
-
-        _addImage(data) {
-            const selection = this.quill.getSelection();
-            const pasteIndex = selection ? selection.index : this.quill.getLength();
-
-            this.quill.insertEmbed(pasteIndex, 'extendedImage', data, 'user');
-        }
-    };
+      this.quill.insertEmbed(pasteIndex, 'extendedImage', data, 'user');
+    }
+  };
 }
 
 export default DropImageModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageCursor.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageCursor.ts
index 7db3ccb6aefa..a8f042f84d32 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageCursor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageCursor.ts
@@ -1,58 +1,63 @@
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
 import Quill from 'devextreme-quill';
-import BaseModule from './base';
-import eventsEngine from '../../../events/core/events_engine';
-import { addNamespace } from '../../../events/utils/index';
+
+import BaseModule from './m_base';
 
 const MODULE_NAMESPACE = 'dxHtmlEditorImageCursor';
 const clickEvent = addNamespace('dxclick', MODULE_NAMESPACE);
-
+// eslint-disable-next-line import/no-mutable-exports
 let ImageCursorModule = BaseModule;
 
-if(Quill) {
-    ImageCursorModule = class ImageCursorModule extends BaseModule {
-        constructor(quill, options) {
-            super(quill, options);
-
-            this.addCleanCallback(this.clean.bind(this));
-            this._attachEvents();
-        }
-
-        _attachEvents() {
-            eventsEngine.on(this.quill.root, clickEvent, this._clickHandler.bind(this));
-        }
-
-        _detachEvents() {
-            eventsEngine.off(this.quill.root, clickEvent);
-        }
-
-        _clickHandler(e) {
-            if(this._isAllowedTarget(e.target)) {
-                this._adjustSelection(e);
-            }
-        }
-
-        _isAllowedTarget(targetElement) {
-            return this._isImage(targetElement);
-        }
-
-        _isImage(targetElement) {
-            return targetElement.tagName.toUpperCase() === 'IMG';
-        }
-
-        _adjustSelection(e) {
-            const blot = this.quill.scroll.find(e.target);
-            if(blot) {
-                const index = blot.offset(this.quill.scroll);
-                this.quill.setSelection(index + 1, 0);
-            } else {
-                this.quill.setSelection(0, 0);
-            }
-        }
-
-        clean() {
-            this._detachEvents();
-        }
-    };
+if (Quill) {
+  // @ts-expect-error
+  ImageCursorModule = class ImageCursorModule extends BaseModule {
+    quill: any;
+
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+      // @ts-expect-error
+      this.addCleanCallback(this.clean.bind(this));
+      this._attachEvents();
+    }
+
+    _attachEvents() {
+      eventsEngine.on(this.quill.root, clickEvent, this._clickHandler.bind(this));
+    }
+
+    _detachEvents() {
+      eventsEngine.off(this.quill.root, clickEvent);
+    }
+
+    _clickHandler(e) {
+      if (this._isAllowedTarget(e.target)) {
+        this._adjustSelection(e);
+      }
+    }
+
+    _isAllowedTarget(targetElement) {
+      return this._isImage(targetElement);
+    }
+
+    _isImage(targetElement) {
+      return targetElement.tagName.toUpperCase() === 'IMG';
+    }
+
+    _adjustSelection(e) {
+      const blot = this.quill.scroll.find(e.target);
+      if (blot) {
+        const index = blot.offset(this.quill.scroll);
+        this.quill.setSelection(index + 1, 0);
+      } else {
+        this.quill.setSelection(0, 0);
+      }
+    }
+
+    clean() {
+      this._detachEvents();
+    }
+  };
 }
 
 export default ImageCursorModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageUpload.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageUpload.ts
index 7d99c76c79c7..14b7814d9d4d 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageUpload.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_imageUpload.ts
@@ -1,134 +1,153 @@
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { isDefined } from '@js/core/utils/type';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
+import FileUploader from '@js/ui/file_uploader';
 import Quill from 'devextreme-quill';
-import BaseModule from './base';
-import eventsEngine from '../../../events/core/events_engine';
-import $ from '../../../core/renderer';
-import { isDefined } from '../../../core/utils/type';
-import { extend } from '../../../core/utils/extend';
-import { serverUpload, getFileUploaderBaseOptions } from '../utils/image_uploader_helper';
-import { addNamespace } from '../../../events/utils/index';
-import FileUploader from '../../file_uploader';
+
+import { getFileUploaderBaseOptions, serverUpload } from '../utils/m_image_uploader_helper';
+import BaseModule from './m_base';
 
 const MODULE_NAMESPACE = 'dxHtmlEditorImageUpload';
 
 const HIDDEN_FILE_UPLOADER_CLASS = 'dx-htmleditor-hidden-content';
-
+// eslint-disable-next-line import/no-mutable-exports
 let ImageUploadModule = BaseModule;
 
-if(Quill) {
-    ImageUploadModule = class ImageUploadModule extends BaseModule {
-        constructor(quill, options) {
-            super(quill, options);
-
-            this.options = options;
-            this._quillContainer = this.editorInstance._getQuillContainer();
-
-            this.addCleanCallback(this.prepareCleanCallback());
-            this._handleServerUpload();
-        }
-
-        _handleServerUpload() {
-            const useServerUpload = isDefined(this.options.fileUploadMode) && this.options.fileUploadMode !== 'base64';
-
-            useServerUpload
-                ? this._enableDragAndDropUploading()
-                : this._disableDragAndDropUploading();
-        }
-
-        _getUploaderModule() {
-            if(!this._uploaderModule) {
-                this._uploaderModule = this.quill.getModule('uploader');
-            }
-
-            return this._uploaderModule;
-        }
-
-        _disableDragAndDropUploading() {
-            this._getUploaderModule().preventImageUploading(false);
-            this._detachEvents();
-            this._fileUploader?.dispose();
-        }
-
-        _enableDragAndDropUploading() {
-            this._initFileUploader();
-            this._getUploaderModule().preventImageUploading(true);
-            this._attachEvents();
-        }
-
-        _initFileUploader() {
-            const $container = $('<div>')
-                .addClass(HIDDEN_FILE_UPLOADER_CLASS)
-                .appendTo(this._quillContainer);
-
-            const fileUploaderOptions = extend({}, getFileUploaderBaseOptions(), {
-                uploadUrl: this.options.uploadUrl,
-                onUploaded: this._onUploaded.bind(this),
-            }, this.options.fileUploaderOptions);
-
-            this._fileUploader = this.editorInstance._createComponent($container, FileUploader, fileUploaderOptions);
-
-            return $container;
-        }
-
-        _onUploaded(data) {
-            const { index: pasteIndex } = this.quill.getSelection() ?? { index: this.quill.getLength() };
-            serverUpload(this.options.uploadDirectory, data.file.name, this.quill, pasteIndex);
-        }
-
-        _attachEvents() {
-            eventsEngine.on(this.quill.root, addNamespace('drop', MODULE_NAMESPACE), this._dropHandler.bind(this));
-            eventsEngine.on(this.quill.root, addNamespace('paste', MODULE_NAMESPACE), this._pasteHandler.bind(this));
-        }
-
-        _detachEvents() {
-            eventsEngine.off(this.quill.root, MODULE_NAMESPACE);
-        }
-
-        _dropHandler(e) {
-            this._handleInsertImages(e, 'dataTransfer');
-        }
-
-        _pasteHandler(e) {
-            this._handleInsertImages(e, 'clipboardData');
-        }
-
-        _handleInsertImages(e, filesField) {
-            this.saveValueChangeEvent(e);
-            const files = Array.from(e.originalEvent[filesField].files || []);
-
-            const uploads = files;
-
-            if(uploads.length) {
-                e.preventDefault();
-                e.stopPropagation();
-                this._fileUploader.option('value', uploads);
-                this._fileUploader.upload();
-            }
-        }
-
-        clean() {
-            this._disableDragAndDropUploading();
-        }
-
-        prepareCleanCallback() {
-            return () => {
-                this.clean();
-            };
-        }
-
-        option(option, value) {
-            switch(option) {
-                case 'imageUpload':
-                    this.handleOptionChangeValue(value);
-                    break;
-                case 'fileUploadMode':
-                    this.options.fileUploadMode = value;
-                    this._handleServerUpload();
-                    break;
-                case 'fileUploaderOptions':
-                    this._fileUploader.option(value);
-            }
-        }
-    };
+if (Quill) {
+  // @ts-expect-error
+  ImageUploadModule = class ImageUploadModule extends BaseModule {
+    quill: any;
+
+    options: any;
+
+    _quillContainer: any;
+
+    editorInstance: any;
+
+    _uploaderModule: any;
+
+    _fileUploader!: FileUploader;
+
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+
+      this.options = options;
+      this._quillContainer = this.editorInstance._getQuillContainer();
+      // @ts-expect-error
+      this.addCleanCallback(this.prepareCleanCallback());
+      this._handleServerUpload();
+    }
+
+    _handleServerUpload() {
+      const useServerUpload = isDefined(this.options.fileUploadMode) && this.options.fileUploadMode !== 'base64';
+
+      useServerUpload
+        ? this._enableDragAndDropUploading()
+        : this._disableDragAndDropUploading();
+    }
+
+    _getUploaderModule() {
+      if (!this._uploaderModule) {
+        this._uploaderModule = this.quill.getModule('uploader');
+      }
+
+      return this._uploaderModule;
+    }
+
+    _disableDragAndDropUploading() {
+      this._getUploaderModule().preventImageUploading(false);
+      this._detachEvents();
+      this._fileUploader?.dispose();
+    }
+
+    _enableDragAndDropUploading() {
+      this._initFileUploader();
+      this._getUploaderModule().preventImageUploading(true);
+      this._attachEvents();
+    }
+
+    _initFileUploader() {
+      const $container = $('<div>')
+        .addClass(HIDDEN_FILE_UPLOADER_CLASS)
+        .appendTo(this._quillContainer);
+
+      const fileUploaderOptions = extend({}, getFileUploaderBaseOptions(), {
+        uploadUrl: this.options.uploadUrl,
+        onUploaded: this._onUploaded.bind(this),
+      }, this.options.fileUploaderOptions);
+
+      this._fileUploader = this.editorInstance._createComponent($container, FileUploader, fileUploaderOptions);
+
+      return $container;
+    }
+
+    _onUploaded(data) {
+      const { index: pasteIndex } = this.quill.getSelection() ?? { index: this.quill.getLength() };
+      serverUpload(this.options.uploadDirectory, data.file.name, this.quill, pasteIndex);
+    }
+
+    _attachEvents() {
+      eventsEngine.on(this.quill.root, addNamespace('drop', MODULE_NAMESPACE), this._dropHandler.bind(this));
+      eventsEngine.on(this.quill.root, addNamespace('paste', MODULE_NAMESPACE), this._pasteHandler.bind(this));
+    }
+
+    _detachEvents() {
+      eventsEngine.off(this.quill.root, MODULE_NAMESPACE);
+    }
+
+    _dropHandler(e) {
+      this._handleInsertImages(e, 'dataTransfer');
+    }
+
+    _pasteHandler(e) {
+      this._handleInsertImages(e, 'clipboardData');
+    }
+
+    _handleInsertImages(e, filesField) {
+      // @ts-expect-error
+      this.saveValueChangeEvent(e);
+      const files = Array.from(e.originalEvent[filesField].files || []);
+
+      const uploads = files;
+
+      if (uploads.length) {
+        e.preventDefault();
+        e.stopPropagation();
+        // @ts-expect-error
+        this._fileUploader.option('value', uploads);
+        this._fileUploader.upload();
+      }
+    }
+
+    clean() {
+      this._disableDragAndDropUploading();
+    }
+
+    prepareCleanCallback() {
+      return () => {
+        this.clean();
+      };
+    }
+
+    option(option, value) {
+      // eslint-disable-next-line default-case
+      switch (option) {
+        case 'imageUpload':
+          // @ts-expect-error
+          this.handleOptionChangeValue(value);
+          break;
+        case 'fileUploadMode':
+          this.options.fileUploadMode = value;
+          this._handleServerUpload();
+          break;
+        case 'fileUploaderOptions':
+          this._fileUploader.option(value);
+      }
+    }
+  };
 }
 
 export default ImageUploadModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_mentions.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_mentions.ts
index 09325a1beb85..51c04b03d932 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_mentions.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_mentions.ts
@@ -1,428 +1,475 @@
-import $ from '../../../core/renderer';
+import { getPublicElement } from '@js/core/element';
+import $ from '@js/core/renderer';
+import { compileGetter } from '@js/core/utils/data';
+import { extend } from '@js/core/utils/extend';
+import { isString } from '@js/core/utils/type';
+import eventsEngine from '@js/events/core/events_engine';
+import type List from '@js/ui/list';
+import type Popup from '@js/ui/popup';
 import Quill from 'devextreme-quill';
-import { compileGetter } from '../../../core/utils/data';
-import { isString } from '../../../core/utils/type';
-import { extend } from '../../../core/utils/extend';
-import { getPublicElement } from '../../../core/element';
-import eventsEngine from '../../../events/core/events_engine';
-
-import BaseModule from './base';
-import PopupModule from './popup';
-import Mention from '../formats/mention';
 
+import Mention from '../formats/m_mention';
+import BaseModule from './m_base';
+import PopupModule from './m_popup';
+// eslint-disable-next-line import/no-mutable-exports
 let MentionModule = BaseModule;
 
-if(Quill) {
-    const USER_ACTION = 'user';
-    const DEFAULT_MARKER = '@';
-
-    const KEYS = {
-        ARROW_UP: 'upArrow',
-        ARROW_DOWN: 'downArrow',
-        ARROW_LEFT: 'leftArrow',
-        ARROW_RIGHT: 'rightArrow',
-        ENTER: 'enter',
-        ESCAPE: 'escape',
-        SPACE: 'space',
-        PAGE_UP: 'pageUp',
-        PAGE_DOWN: 'pageDown',
-        END: 'end',
-        HOME: 'home'
-    };
-
-    const NAVIGATION_KEYS = [
-        KEYS.ARROW_LEFT,
-        KEYS.ARROW_RIGHT,
-        KEYS.PAGE_UP,
-        KEYS.PAGE_DOWN,
-        KEYS.END,
-        KEYS.HOME
-    ];
-
-    const ALLOWED_PREFIX_CHARS = [' ', '\n'];
-
-    const DISABLED_STATE_CLASS = 'dx-state-disabled';
-
-    Quill.register({ 'formats/mention': Mention }, true);
-
-    MentionModule = class MentionModule extends PopupModule {
-        _getDefaultOptions() {
-            const baseConfig = super._getDefaultOptions();
-
-            return extend(baseConfig, {
-                itemTemplate: 'item',
-                valueExpr: 'this',
-                displayExpr: 'this',
-                template: null,
-                searchExpr: null,
-                searchTimeout: 500,
-                minSearchLength: 0
-            });
-        }
-
-        constructor(quill, options) {
-            super(quill, options);
-            this._mentions = {};
-
-            options.mentions.forEach((item) => {
-                let marker = item.marker;
-                if(!marker) {
-                    item.marker = marker = DEFAULT_MARKER;
-                }
-
-                const template = item.template;
-                if(template) {
-                    const preparedTemplate = this.editorInstance._getTemplate(template);
-                    preparedTemplate && Mention.addTemplate({ marker, editorKey: this.editorInstance.getMentionKeyInTemplateStorage() }, preparedTemplate);
-                }
-
-                this._mentions[marker] = extend({}, this._getDefaultOptions(), item);
-            });
-
-            this._attachKeyboardHandlers();
-            this.addCleanCallback(this.clean.bind(this));
-            this.quill.on('text-change', this.onTextChange.bind(this));
-        }
-
-        _attachKeyboardHandlers() {
-            this.quill.keyboard.addBinding({
-                key: KEYS.ARROW_UP
-            }, this._moveToItem.bind(this, 'prev'));
-
-            this.quill.keyboard.addBinding({
-                key: KEYS.ARROW_DOWN
-            }, this._moveToItem.bind(this, 'next'));
-
-            this.quill.keyboard.addBinding({
-                key: [KEYS.ENTER, KEYS.SPACE]
-            }, this._selectItemHandler.bind(this));
-
-            const enterBindings = this.quill.keyboard.bindings[KEYS.ENTER];
-            enterBindings.unshift(enterBindings.pop());
-
-            this.quill.keyboard.addBinding({
-                key: KEYS.ESCAPE
-            }, this._escapeKeyHandler.bind(this));
-
-            this.quill.keyboard.addBinding({
-                key: [KEYS.ARROW_LEFT, KEYS.ARROW_RIGHT],
-                shiftKey: true
-            }, this._ignoreKeyHandler.bind(this));
-
-            this.quill.keyboard.addBinding({
-                key: NAVIGATION_KEYS
-            }, this._ignoreKeyHandler.bind(this));
-        }
-
-        _moveToItem(direction) {
-            const dataSource = this._list.getDataSource();
-
-            if(this._isMentionActive && !dataSource.isLoading()) {
-                const $focusedItem = $(this._list.option('focusedElement'));
-                const defaultItemPosition = direction === 'next' ? 'first' : 'last';
-                let $nextItem = $focusedItem[direction]();
-
-                $nextItem = $nextItem.length ? $nextItem : this._activeListItems[defaultItemPosition]();
-                this._list.option('focusedElement', getPublicElement($nextItem));
-                this._list.scrollToItem($nextItem);
-            }
-
-            return !this._isMentionActive;
-        }
-
-        _ignoreKeyHandler() {
-            return !this._isMentionActive;
-        }
-
-        _fitIntoRange(value, start, end) {
-            if(value > end) {
-                return start;
-            }
-
-            if(value < start) {
-                return end;
-            }
-
-            return value;
-        }
+if (Quill) {
+  const USER_ACTION = 'user';
+  const DEFAULT_MARKER = '@';
 
-        _selectItemHandler() {
-            if(this._isMentionActive) {
-                this._list.option('items').length
-                    ? this._list.selectItem(this._list.option('focusedElement'))
-                    : this._popup.hide();
-            }
-            return !this._isMentionActive;
-        }
+  const KEYS = {
+    ARROW_UP: 'upArrow',
+    ARROW_DOWN: 'downArrow',
+    ARROW_LEFT: 'leftArrow',
+    ARROW_RIGHT: 'rightArrow',
+    ENTER: 'enter',
+    ESCAPE: 'escape',
+    SPACE: 'space',
+    PAGE_UP: 'pageUp',
+    PAGE_DOWN: 'pageDown',
+    END: 'end',
+    HOME: 'home',
+  };
 
-        _escapeKeyHandler() {
-            if(this._isMentionActive) {
-                this._popup.hide();
-            }
+  const NAVIGATION_KEYS = [
+    KEYS.ARROW_LEFT,
+    KEYS.ARROW_RIGHT,
+    KEYS.PAGE_UP,
+    KEYS.PAGE_DOWN,
+    KEYS.END,
+    KEYS.HOME,
+  ];
 
-            return !this._isMentionActive;
-        }
+  const ALLOWED_PREFIX_CHARS = [' ', '\n'];
 
-        renderList($container, options) {
-            this.compileGetters(this.options);
-            super.renderList($container, options);
-        }
+  const DISABLED_STATE_CLASS = 'dx-state-disabled';
 
-        compileGetters({ displayExpr, valueExpr }) {
-            this._valueGetter = compileGetter(displayExpr);
-            this._idGetter = compileGetter(valueExpr);
-        }
+  Quill.register({ 'formats/mention': Mention }, true);
+  // @ts-expect-error
+  MentionModule = class MentionModule extends PopupModule {
+    quill: any;
 
-        _getListConfig(options) {
-            const baseConfig = super._getListConfig(options);
-
-            return extend(baseConfig, {
-                itemTemplate: this.options.itemTemplate,
-                onContentReady: () => {
-                    if(this._hasSearch) {
-                        this._popup.repaint();
-                        this._focusFirstElement();
-                        this._hasSearch = false;
-                    }
-                }
-            });
-        }
+    editorInstance: any;
 
-        insertEmbedContent() {
-            const markerLength = this._activeMentionConfig.marker.length;
-            const textLength = markerLength + this._searchValue.length;
-            const caretPosition = this.getPosition();
-            const selectedItem = this._list.option('selectedItem');
-            const value = {
-                value: this._valueGetter(selectedItem),
-                id: this._idGetter(selectedItem),
-                marker: this._activeMentionConfig.marker,
-                keyInTemplateStorage: this.editorInstance.getMentionKeyInTemplateStorage()
-            };
-            const Delta = Quill.import('delta');
-            const startIndex = Math.max(0, caretPosition - markerLength);
-            const newDelta = new Delta()
-                .retain(startIndex)
-                .delete(textLength)
-                .insert({ mention: value })
-                .insert(' ');
-
-            this.quill.updateContents(newDelta);
-            this.quill.setSelection(startIndex + 2);
-        }
+    _searchTimer: any;
 
-        _getLastInsertOperation(ops) {
-            const lastOperation = ops[ops.length - 1];
-            const isLastOperationInsert = 'insert' in lastOperation;
+    options: any;
 
-            if(isLastOperationInsert) {
-                return lastOperation;
-            }
+    _mentions: any;
 
-            const isLastOperationDelete = 'delete' in lastOperation;
-
-            if(isLastOperationDelete && ops.length >= 2) {
-                const penultOperation = ops[ops.length - 2];
-                const isPenultOperationInsert = 'insert' in penultOperation;
-                const isSelectionReplacing = isLastOperationDelete && isPenultOperationInsert;
-
-                if(isSelectionReplacing) {
-                    return penultOperation;
-                }
-            }
-
-            return null;
-        }
-
-        onTextChange(newDelta, oldDelta, source) {
-            if(source === USER_ACTION) {
-                const lastOperation = newDelta.ops[newDelta.ops.length - 1];
-
-                if(this._isMentionActive && this._isPopupVisible) {
-                    this._processSearchValue(lastOperation) && this._filterList(this._searchValue);
-                } else {
-                    const { ops } = newDelta;
-                    const lastInsertOperation = this._getLastInsertOperation(ops);
-
-                    if(lastInsertOperation) {
-                        this.checkMentionRequest(lastInsertOperation, ops);
-                    }
-                }
-            }
-        }
+    _list!: List;
 
-        get _isPopupVisible() {
-            return this._popup?.option('visible');
-        }
+    _popup!: Popup;
 
-        _processSearchValue(operation) {
-            const isInsertOperation = 'insert' in operation;
-            if(isInsertOperation) {
-                this._searchValue += operation.insert;
-            } else {
-                if(!this._searchValue.length || operation.delete > 1) {
-                    this._popup.hide();
-                    return false;
-                } else {
-                    this._searchValue = this._searchValue.slice(0, -1);
-                }
-            }
-
-            return true;
-        }
+    _isMentionActive?: boolean;
 
-        checkMentionRequest({ insert }, ops) {
-            const caret = this.quill.getSelection();
-
-            if(!insert || !isString(insert) || !caret || this._isMarkerPartOfText(ops[0].retain)) {
-                return;
-            }
-
-            this._activeMentionConfig = this._mentions[insert];
-
-            if(this._activeMentionConfig) {
-                this._updateList(this._activeMentionConfig);
-                // NOTE: Fix of off-by-one error in selection index after insert on a new line.
-                // See https://github.com/quilljs/quill/issues/1763.
-                const isOnNewLine = caret.index && this._getCharByIndex(caret.index - 1) === '\n';
-                this.savePosition(caret.index + isOnNewLine);
-                this._popup.option('position', this._popupPosition);
-                this._searchValue = '';
-                this._popup.show();
-            }
-        }
+    _valueGetter: any;
 
-        _isMarkerPartOfText(retain) {
-            if(!retain || ALLOWED_PREFIX_CHARS.indexOf(this._getCharByIndex(retain - 1)) !== -1) {
-                return false;
-            }
+    _idGetter: any;
 
-            return true;
-        }
+    _searchValue: any;
 
-        _getCharByIndex(index) {
-            return this.quill.getContents(index, 1).ops[0].insert;
-        }
+    _activeMentionConfig: any;
 
-        _updateList({ dataSource, displayExpr, valueExpr, itemTemplate, searchExpr }) {
-            this.compileGetters({ displayExpr, valueExpr });
-            this._list.unselectAll();
-            this._list.option({
-                dataSource,
-                displayExpr,
-                itemTemplate,
-                searchExpr
-            });
-        }
+    _hasSearch?: boolean;
 
-        _filterList(searchValue) {
-            if(!this._isMinSearchLengthExceeded(searchValue)) {
-                this._resetFilter();
-                return;
-            }
-
-            const searchTimeout = this._activeMentionConfig.searchTimeout;
-
-            if(searchTimeout) {
-                clearTimeout(this._searchTimer);
-                this._searchTimer = setTimeout(() => {
-                    this._search(searchValue);
-                }, searchTimeout);
-            } else {
-                this._search(searchValue);
-            }
-        }
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+      this._mentions = {};
 
-        _isMinSearchLengthExceeded(searchValue) {
-            return searchValue.length >= this._activeMentionConfig.minSearchLength;
+      options.mentions.forEach((item) => {
+        let { marker } = item;
+        if (!marker) {
+          item.marker = marker = DEFAULT_MARKER;
         }
 
-        _resetFilter() {
-            clearTimeout(this._searchTimer);
-            this._search(null);
+        const { template } = item;
+        if (template) {
+          const preparedTemplate = this.editorInstance._getTemplate(template);
+          // @ts-expect-error
+          preparedTemplate && Mention.addTemplate({ marker, editorKey: this.editorInstance.getMentionKeyInTemplateStorage() }, preparedTemplate);
         }
 
-        _search(searchValue) {
-            this._hasSearch = true;
-            this._list.option('searchValue', searchValue);
+        this._mentions[marker] = extend({}, this._getDefaultOptions(), item);
+      });
+
+      this._attachKeyboardHandlers();
+      // @ts-expect-error
+      this.addCleanCallback(this.clean.bind(this));
+      this.quill.on('text-change', this.onTextChange.bind(this));
+    }
+
+    _getDefaultOptions() {
+      // @ts-expect-error
+      const baseConfig = super._getDefaultOptions();
+
+      return extend(baseConfig, {
+        itemTemplate: 'item',
+        valueExpr: 'this',
+        displayExpr: 'this',
+        template: null,
+        searchExpr: null,
+        searchTimeout: 500,
+        minSearchLength: 0,
+      });
+    }
+
+    _attachKeyboardHandlers() {
+      this.quill.keyboard.addBinding({
+        key: KEYS.ARROW_UP,
+      }, this._moveToItem.bind(this, 'prev'));
+
+      this.quill.keyboard.addBinding({
+        key: KEYS.ARROW_DOWN,
+      }, this._moveToItem.bind(this, 'next'));
+
+      this.quill.keyboard.addBinding({
+        key: [KEYS.ENTER, KEYS.SPACE],
+      }, this._selectItemHandler.bind(this));
+
+      const enterBindings = this.quill.keyboard.bindings[KEYS.ENTER];
+      enterBindings.unshift(enterBindings.pop());
+
+      this.quill.keyboard.addBinding({
+        key: KEYS.ESCAPE,
+      }, this._escapeKeyHandler.bind(this));
+
+      this.quill.keyboard.addBinding({
+        key: [KEYS.ARROW_LEFT, KEYS.ARROW_RIGHT],
+        shiftKey: true,
+      }, this._ignoreKeyHandler.bind(this));
+
+      this.quill.keyboard.addBinding({
+        key: NAVIGATION_KEYS,
+      }, this._ignoreKeyHandler.bind(this));
+    }
+
+    _moveToItem(direction) {
+      const dataSource = this._list.getDataSource();
+
+      if (this._isMentionActive && !dataSource.isLoading()) {
+        // @ts-expect-error
+        const $focusedItem = $(this._list.option('focusedElement'));
+        const defaultItemPosition = direction === 'next' ? 'first' : 'last';
+        let $nextItem = $focusedItem[direction]();
+
+        $nextItem = $nextItem.length ? $nextItem : this._activeListItems[defaultItemPosition]();
+        this._list.option('focusedElement', getPublicElement($nextItem));
+        this._list.scrollToItem($nextItem);
+      }
+
+      return !this._isMentionActive;
+    }
+
+    _ignoreKeyHandler() {
+      return !this._isMentionActive;
+    }
+
+    _fitIntoRange(value, start, end) {
+      if (value > end) {
+        return start;
+      }
+
+      if (value < start) {
+        return end;
+      }
+
+      return value;
+    }
+
+    _selectItemHandler() {
+      if (this._isMentionActive) {
+        // @ts-expect-error
+        this._list.option('items').length
+          ? this._list.selectItem(this._list.option('focusedElement'))
+          : this._popup.hide();
+      }
+      return !this._isMentionActive;
+    }
+
+    _escapeKeyHandler() {
+      if (this._isMentionActive) {
+        this._popup.hide();
+      }
+
+      return !this._isMentionActive;
+    }
+
+    renderList($container, options) {
+      this.compileGetters(this.options);
+      // @ts-expect-error
+      super.renderList($container, options);
+    }
+
+    compileGetters({ displayExpr, valueExpr }) {
+      this._valueGetter = compileGetter(displayExpr);
+      this._idGetter = compileGetter(valueExpr);
+    }
+
+    _getListConfig(options) {
+      // @ts-expect-error
+      const baseConfig = super._getListConfig(options);
+
+      return extend(baseConfig, {
+        itemTemplate: this.options.itemTemplate,
+        onContentReady: () => {
+          if (this._hasSearch) {
+            this._popup.repaint();
+            this._focusFirstElement();
+            this._hasSearch = false;
+          }
+        },
+      });
+    }
+
+    insertEmbedContent() {
+      const markerLength = this._activeMentionConfig.marker.length;
+      const textLength = markerLength + this._searchValue.length;
+      // @ts-expect-error
+      const caretPosition = this.getPosition();
+      const selectedItem = this._list.option('selectedItem');
+      const value = {
+        value: this._valueGetter(selectedItem),
+        id: this._idGetter(selectedItem),
+        marker: this._activeMentionConfig.marker,
+        keyInTemplateStorage: this.editorInstance.getMentionKeyInTemplateStorage(),
+      };
+      const Delta = Quill.import('delta');
+      const startIndex = Math.max(0, caretPosition - markerLength);
+      const newDelta = new Delta()
+        .retain(startIndex)
+        .delete(textLength)
+        .insert({ mention: value })
+        .insert(' ');
+
+      this.quill.updateContents(newDelta);
+      this.quill.setSelection(startIndex + 2);
+    }
+
+    _getLastInsertOperation(ops) {
+      const lastOperation = ops[ops.length - 1];
+      const isLastOperationInsert = 'insert' in lastOperation;
+
+      if (isLastOperationInsert) {
+        return lastOperation;
+      }
+
+      const isLastOperationDelete = 'delete' in lastOperation;
+
+      if (isLastOperationDelete && ops.length >= 2) {
+        const penultOperation = ops[ops.length - 2];
+        const isPenultOperationInsert = 'insert' in penultOperation;
+        const isSelectionReplacing = isLastOperationDelete && isPenultOperationInsert;
+
+        if (isSelectionReplacing) {
+          return penultOperation;
         }
+      }
 
-        _focusFirstElement() {
-            if(!this._list) {
-                return;
-            }
+      return null;
+    }
 
-            const $firstItem = this._activeListItems.first();
-            this._list.option('focusedElement', getPublicElement($firstItem));
-            this._list.scrollToItem($firstItem);
-        }
-
-        _toggleActiveDescendant(shown) {
-            if(shown) {
-                const ariaId = this._list.getFocusedItemId();
-                this.quill.root.setAttribute('aria-activedescendant', ariaId);
-            } else {
-                this.quill.root.removeAttribute('aria-activedescendant');
-            }
-        }
+    onTextChange(newDelta, oldDelta, source) {
+      if (source === USER_ACTION) {
+        const lastOperation = newDelta.ops[newDelta.ops.length - 1];
 
-        get _popupPosition() {
-            const position = this.getPosition();
-            const { left: mentionLeft, top: mentionTop, height: mentionHeight } = this.quill.getBounds(position ? position - 1 : position);
-            const { left: leftOffset, top: topOffset } = $(this.quill.root).offset();
-            const positionEvent = eventsEngine.Event('positionEvent', {
-                pageX: leftOffset + mentionLeft,
-                pageY: topOffset + mentionTop
-            });
-            return {
-                of: positionEvent,
-                offset: {
-                    v: mentionHeight
-                },
-                my: 'top left',
-                at: 'top left',
-                collision: {
-                    y: 'flip',
-                    x: 'flipfit'
-                }
-            };
-        }
+        if (this._isMentionActive && this._isPopupVisible) {
+          this._processSearchValue(lastOperation) && this._filterList(this._searchValue);
+        } else {
+          const { ops } = newDelta;
+          const lastInsertOperation = this._getLastInsertOperation(ops);
 
-        _getPopupConfig() {
-            return extend(super._getPopupConfig(), {
-                hideOnParentScroll: false,
-                onShown: () => {
-                    this._toggleActiveDescendant(true);
-                    this._isMentionActive = true;
-                    this._hasSearch = false;
-                    this._focusFirstElement();
-                },
-                onHidden: () => {
-                    this._toggleActiveDescendant(false);
-                    this._list.unselectAll();
-                    this._list.option('focusedElement', null);
-                    this._isMentionActive = false;
-                    this._search(null);
-                },
-                focusStateEnabled: false
-            });
+          if (lastInsertOperation) {
+            this.checkMentionRequest(lastInsertOperation, ops);
+          }
         }
-
-        get _activeListItems() {
-            return this._list.itemElements().filter(`:not(.${DISABLED_STATE_CLASS})`);
+      }
+    }
+
+    get _isPopupVisible() {
+      return this._popup?.option('visible');
+    }
+
+    _processSearchValue(operation) {
+      const isInsertOperation = 'insert' in operation;
+      if (isInsertOperation) {
+        this._searchValue += operation.insert;
+      } else {
+        if (!this._searchValue.length || operation.delete > 1) {
+          this._popup.hide();
+          return false;
         }
-
-        clean() {
-            Object.keys(this._mentions).forEach((marker) => {
-                if(this._mentions[marker].template) {
-                    Mention.removeTemplate({
-                        marker,
-                        editorKey: this.editorInstance.getMentionKeyInTemplateStorage()
-                    });
-                }
-            });
+        this._searchValue = this._searchValue.slice(0, -1);
+      }
+
+      return true;
+    }
+
+    checkMentionRequest({ insert }, ops) {
+      const caret = this.quill.getSelection();
+
+      if (!insert || !isString(insert) || !caret || this._isMarkerPartOfText(ops[0].retain)) {
+        return;
+      }
+
+      this._activeMentionConfig = this._mentions[insert];
+
+      if (this._activeMentionConfig) {
+        this._updateList(this._activeMentionConfig);
+        // NOTE: Fix of off-by-one error in selection index after insert on a new line.
+        // See https://github.com/quilljs/quill/issues/1763.
+        const isOnNewLine = caret.index && this._getCharByIndex(caret.index - 1) === '\n';
+        // @ts-expect-error
+        this.savePosition(caret.index + isOnNewLine);
+        // @ts-expect-error
+        this._popup.option('position', this._popupPosition);
+        this._searchValue = '';
+        this._popup.show();
+      }
+    }
+
+    _isMarkerPartOfText(retain) {
+      if (!retain || ALLOWED_PREFIX_CHARS.includes(this._getCharByIndex(retain - 1))) {
+        return false;
+      }
+
+      return true;
+    }
+
+    _getCharByIndex(index) {
+      return this.quill.getContents(index, 1).ops[0].insert;
+    }
+
+    _updateList({
+      dataSource, displayExpr, valueExpr, itemTemplate, searchExpr,
+    }) {
+      this.compileGetters({ displayExpr, valueExpr });
+      this._list.unselectAll();
+      this._list.option({
+        dataSource,
+        displayExpr,
+        itemTemplate,
+        searchExpr,
+      });
+    }
+
+    _filterList(searchValue) {
+      if (!this._isMinSearchLengthExceeded(searchValue)) {
+        this._resetFilter();
+        return;
+      }
+
+      const { searchTimeout } = this._activeMentionConfig;
+
+      if (searchTimeout) {
+        clearTimeout(this._searchTimer);
+        this._searchTimer = setTimeout(() => {
+          this._search(searchValue);
+        }, searchTimeout);
+      } else {
+        this._search(searchValue);
+      }
+    }
+
+    _isMinSearchLengthExceeded(searchValue) {
+      return searchValue.length >= this._activeMentionConfig.minSearchLength;
+    }
+
+    _resetFilter() {
+      clearTimeout(this._searchTimer);
+      this._search(null);
+    }
+
+    _search(searchValue) {
+      this._hasSearch = true;
+      this._list.option('searchValue', searchValue);
+    }
+
+    _focusFirstElement() {
+      if (!this._list) {
+        return;
+      }
+
+      const $firstItem = this._activeListItems.first();
+      this._list.option('focusedElement', getPublicElement($firstItem));
+      this._list.scrollToItem($firstItem);
+    }
+
+    _toggleActiveDescendant(shown) {
+      if (shown) {
+        // @ts-expect-error
+        const ariaId = this._list.getFocusedItemId();
+        this.quill.root.setAttribute('aria-activedescendant', ariaId);
+      } else {
+        this.quill.root.removeAttribute('aria-activedescendant');
+      }
+    }
+
+    get _popupPosition() {
+      // @ts-expect-error
+      const position = this.getPosition();
+      const { left: mentionLeft, top: mentionTop, height: mentionHeight } = this.quill.getBounds(position ? position - 1 : position);
+      // @ts-expect-error
+      const { left: leftOffset, top: topOffset } = $(this.quill.root).offset();
+      // @ts-expect-error
+      const positionEvent = eventsEngine.Event('positionEvent', {
+        pageX: leftOffset + mentionLeft,
+        pageY: topOffset + mentionTop,
+      });
+      return {
+        of: positionEvent,
+        offset: {
+          v: mentionHeight,
+        },
+        my: 'top left',
+        at: 'top left',
+        collision: {
+          y: 'flip',
+          x: 'flipfit',
+        },
+      };
+    }
+
+    _getPopupConfig() {
+      // @ts-expect-error
+      return extend(super._getPopupConfig(), {
+        hideOnParentScroll: false,
+        onShown: () => {
+          this._toggleActiveDescendant(true);
+          this._isMentionActive = true;
+          this._hasSearch = false;
+          this._focusFirstElement();
+        },
+        onHidden: () => {
+          this._toggleActiveDescendant(false);
+          this._list.unselectAll();
+          this._list.option('focusedElement', null);
+          this._isMentionActive = false;
+          this._search(null);
+        },
+        focusStateEnabled: false,
+      });
+    }
+
+    get _activeListItems() {
+      // @ts-expect-error
+      return this._list.itemElements().filter(`:not(.${DISABLED_STATE_CLASS})`);
+    }
+
+    clean() {
+      Object.keys(this._mentions).forEach((marker) => {
+        if (this._mentions[marker].template) {
+          // @ts-expect-error
+          Mention.removeTemplate({
+            marker,
+            editorKey: this.editorInstance.getMentionKeyInTemplateStorage(),
+          });
         }
-    };
+      });
+    }
+  };
 }
 
 export default MentionModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_popup.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_popup.ts
index fb43eb4025e5..3b94be8ce920 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_popup.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_popup.ts
@@ -1,131 +1,148 @@
-import { getHeight } from '../../../core/utils/size';
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { getHeight } from '@js/core/utils/size';
+import { getWindow } from '@js/core/utils/window';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
+import type ListType from '@js/ui/list';
+import List from '@js/ui/list_light';
+import Popup from '@js/ui/popup';
 import Quill from 'devextreme-quill';
-import $ from '../../../core/renderer';
-import { extend } from '../../../core/utils/extend';
-import { getWindow } from '../../../core/utils/window';
-import eventsEngine from '../../../events/core/events_engine';
-import { addNamespace } from '../../../events/utils/index';
-import BaseModule from './base';
-import Popup from '../../popup';
-import List from '../../list_light';
+
+import BaseModule from './m_base';
 
 const MODULE_NAMESPACE = 'dxHtmlEditorPopupModule';
 
+// eslint-disable-next-line import/no-mutable-exports
 let ListPopupModule = BaseModule;
 
-if(Quill) {
-    const SUGGESTION_LIST_CLASS = 'dx-suggestion-list';
-    const SUGGESTION_LIST_WRAPPER_CLASS = 'dx-suggestion-list-wrapper';
-    const DROPDOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay';
-
-    const MIN_HEIGHT = 100;
-
-    ListPopupModule = class ListPopupModule extends BaseModule {
-
-        _getDefaultOptions() {
-            return {
-                dataSource: null
-            };
-        }
-
-        constructor(quill, options) {
-            super(quill, options);
-
-            this.options = extend({}, this._getDefaultOptions(), options);
-            this._popup = this.renderPopup();
-            this._popup.$wrapper().addClass(`${SUGGESTION_LIST_WRAPPER_CLASS} ${DROPDOWN_EDITOR_OVERLAY_CLASS}`);
-            this._renderPreventFocusOut();
-        }
-
-        renderList($container, options) {
-            const $list = $('<div>')
-                .addClass(SUGGESTION_LIST_CLASS)
-                .appendTo($container);
-            this._list = this.options.editorInstance._createComponent($list, List, options);
-        }
-
-        renderPopup() {
-            const editorInstance = this.options.editorInstance;
-            const $container = $('<div>').appendTo(editorInstance.$element());
-            const popupConfig = this._getPopupConfig();
-
-            return editorInstance._createComponent($container, Popup, popupConfig);
-        }
-
-        _getPopupConfig() {
-            return {
-                contentTemplate: (contentElem) => {
-                    const listConfig = this._getListConfig(this.options);
-                    this.renderList($(contentElem), listConfig);
-                },
-                deferRendering: false,
-                onShown: () => {
-                    this._list.focus();
-                },
-                onHidden: () => {
-                    this._list.unselectAll();
-                    this._list.option('focusedElement', null);
-                },
-                showTitle: false,
-                width: 'auto',
-                height: 'auto',
-                shading: false,
-                hideOnParentScroll: true,
-                hideOnOutsideClick: true,
-                animation: {
-                    show: { type: 'fade', duration: 0, from: 0, to: 1 },
-                    hide: { type: 'fade', duration: 400, from: 1, to: 0 }
-                },
-                fullScreen: false,
-                maxHeight: this.maxHeight
-            };
-        }
-
-        _getListConfig(options) {
-            return {
-                dataSource: options.dataSource,
-                onSelectionChanged: this.selectionChangedHandler.bind(this),
-                selectionMode: 'single',
-                pageLoadMode: 'scrollBottom'
-            };
-        }
-
-        get maxHeight() {
-            const window = getWindow();
-            const windowHeight = window && getHeight(window) || 0;
-            return Math.max(MIN_HEIGHT, windowHeight * 0.5);
-        }
-
-        selectionChangedHandler(e) {
-            if(this._popup.option('visible')) {
-                this._popup.hide();
-
-                this.insertEmbedContent(e);
-            }
-        }
-
-        _renderPreventFocusOut() {
-            const eventName = addNamespace('mousedown', MODULE_NAMESPACE);
-
-            eventsEngine.on(this._popup.$wrapper(), eventName, (e) => {
-                e.preventDefault();
-            });
-        }
-
-        insertEmbedContent(selectionChangedEvent) { }
-
-        showPopup() {
-            this._popup && this._popup.show();
-        }
-
-        savePosition(position) {
-            this.caretPosition = position;
-        }
-
-        getPosition() {
-            return this.caretPosition;
-        }
-    };
+if (Quill) {
+  const SUGGESTION_LIST_CLASS = 'dx-suggestion-list';
+  const SUGGESTION_LIST_WRAPPER_CLASS = 'dx-suggestion-list-wrapper';
+  const DROPDOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay';
+
+  const MIN_HEIGHT = 100;
+  // @ts-expect-error
+  ListPopupModule = class ListPopupModule extends BaseModule {
+    _list!: ListType;
+
+    _popup: Popup;
+
+    caretPosition?: number;
+
+    options: any;
+
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+
+      this.options = extend({}, this._getDefaultOptions(), options);
+      this._popup = this.renderPopup();
+      // @ts-expect-error
+      this._popup.$wrapper().addClass(`${SUGGESTION_LIST_WRAPPER_CLASS} ${DROPDOWN_EDITOR_OVERLAY_CLASS}`);
+      this._renderPreventFocusOut();
+    }
+
+    _getDefaultOptions() {
+      return {
+        dataSource: null,
+      };
+    }
+
+    renderList($container, options) {
+      const $list = $('<div>')
+        .addClass(SUGGESTION_LIST_CLASS)
+        .appendTo($container);
+      this._list = this.options.editorInstance._createComponent($list, List, options);
+    }
+
+    renderPopup(): Popup {
+      const { editorInstance } = this.options;
+      const $container = $('<div>').appendTo(editorInstance.$element());
+      const popupConfig = this._getPopupConfig();
+
+      return editorInstance._createComponent($container, Popup, popupConfig);
+    }
+
+    _getPopupConfig() {
+      return {
+        contentTemplate: (contentElem) => {
+          const listConfig = this._getListConfig(this.options);
+          this.renderList($(contentElem), listConfig);
+        },
+        deferRendering: false,
+        onShown: () => {
+          this._list.focus();
+        },
+        onHidden: () => {
+          this._list.unselectAll();
+          this._list.option('focusedElement', null);
+        },
+        showTitle: false,
+        width: 'auto',
+        height: 'auto',
+        shading: false,
+        hideOnParentScroll: true,
+        hideOnOutsideClick: true,
+        animation: {
+          show: {
+            type: 'fade', duration: 0, from: 0, to: 1,
+          },
+          hide: {
+            type: 'fade', duration: 400, from: 1, to: 0,
+          },
+        },
+        fullScreen: false,
+        maxHeight: this.maxHeight,
+      };
+    }
+
+    _getListConfig(options) {
+      return {
+        dataSource: options.dataSource,
+        onSelectionChanged: this.selectionChangedHandler.bind(this),
+        selectionMode: 'single',
+        pageLoadMode: 'scrollBottom',
+      };
+    }
+
+    get maxHeight() {
+      const window = getWindow();
+      const windowHeight = window && getHeight(window) || 0;
+      return Math.max(MIN_HEIGHT, windowHeight * 0.5);
+    }
+
+    selectionChangedHandler(e) {
+      if (this._popup.option('visible')) {
+        this._popup.hide();
+
+        this.insertEmbedContent(e);
+      }
+    }
+
+    _renderPreventFocusOut() {
+      const eventName = addNamespace('mousedown', MODULE_NAMESPACE);
+      // @ts-expect-error
+      eventsEngine.on(this._popup.$wrapper(), eventName, (e) => {
+        e.preventDefault();
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    insertEmbedContent(selectionChangedEvent) { }
+
+    showPopup() {
+      this._popup && this._popup.show();
+    }
+
+    savePosition(position) {
+      this.caretPosition = position;
+    }
+
+    getPosition() {
+      return this.caretPosition;
+    }
+  };
 }
 
 export default ListPopupModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_resizing.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_resizing.ts
index 6a710c2b19f7..539bdbdfaae7 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_resizing.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_resizing.ts
@@ -1,14 +1,18 @@
-import $ from '../../../core/renderer';
-import eventsEngine from '../../../events/core/events_engine';
-import { name as ClickEvent } from '../../../events/click';
-import { addNamespace, normalizeKeyName } from '../../../events/utils/index';
-import { move } from '../../../animation/translator';
-import devices from '../../../core/devices';
-import Resizable from '../../resizable';
-import { getBoundingRect } from '../../../core/utils/position';
+import { move } from '@js/animation/translator';
+import devices from '@js/core/devices';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { getBoundingRect } from '@js/core/utils/position';
+import {
+  getHeight, getOuterHeight, getOuterWidth, getWidth,
+} from '@js/core/utils/size';
+import { name as ClickEvent } from '@js/events/click';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace, normalizeKeyName } from '@js/events/utils/index';
+import Resizable from '@js/ui/resizable';
 import Quill from 'devextreme-quill';
-import BaseModule from './base';
-import { getHeight, getOuterHeight, getOuterWidth, getWidth } from '../../../core/utils/size';
+
+import BaseModule from './m_base';
 
 const DX_RESIZE_FRAME_CLASS = 'dx-resize-frame';
 const DX_TOUCH_DEVICE_CLASS = 'dx-touch-device';
@@ -21,171 +25,198 @@ const MOUSEDOWN_EVENT = addNamespace('mousedown', MODULE_NAMESPACE);
 const FRAME_PADDING = 1;
 
 export default class ResizingModule extends BaseModule {
-    constructor(quill, options) {
-        super(quill, options);
-        this.allowedTargets = options.allowedTargets || ['image'];
-        this.enabled = !!options.enabled;
-        this._hideFrameWithContext = this.hideFrame.bind(this);
-        this._framePositionChangedHandler = this._prepareFramePositionChangedHandler();
-
-        if(this.enabled) {
-            this._attachEvents();
-            this._createResizeFrame();
-        }
-    }
-
-    _attachEvents() {
-        eventsEngine.on(this.quill.root, addNamespace(ClickEvent, MODULE_NAMESPACE), this._clickHandler.bind(this));
-        eventsEngine.on(this.quill.root, SCROLL_EVENT, this._framePositionChangedHandler);
-        this.editorInstance.on('focusOut', this._hideFrameWithContext);
-        this.quill.on('text-change', this._framePositionChangedHandler);
-    }
-
-    _detachEvents() {
-        eventsEngine.off(this.quill.root, MODULE_NAMESPACE);
-        this.editorInstance.off('focusOut', this._hideFrameWithContext);
-        this.quill.off('text-change', this._framePositionChangedHandler);
-    }
-
-    _clickHandler(e) {
-        if(this._isAllowedTarget(e.target)) {
-            if(this._$target === e.target) {
-                return;
-            }
-
-            this._$target = e.target;
-
-            const $target = $(this._$target);
-            const minWidth = Math.max(getOuterWidth($target) - getWidth($target), this.resizable.option('minWidth'));
-            const minHeight = Math.max(getOuterHeight($target) - getHeight($target), this.resizable.option('minHeight'));
-
-            this.resizable.option({ minWidth, minHeight });
+  quill: any;
 
-            this.updateFramePosition();
-            this.showFrame();
-            this._adjustSelection();
-        } else if(this._$target) {
-            this.hideFrame();
-        }
-    }
-
-    _prepareFramePositionChangedHandler(e) {
-        return () => {
-            if(this._$target) {
-                this.updateFramePosition();
-            }
-        };
-    }
+  editorInstance: any;
 
-    _adjustSelection() {
-        if(!this.quill.getSelection()) {
-            this.quill.setSelection(0, 0);
-        }
-    }
+  allowedTargets: any;
 
-    _isAllowedTarget(targetElement) {
-        return this._isImage(targetElement);
-    }
-
-    _isImage(targetElement) {
-        return this.allowedTargets.indexOf('image') !== -1 && targetElement.tagName.toUpperCase() === 'IMG';
-    }
-
-    showFrame() {
-        this._$resizeFrame.show();
-        eventsEngine.on(this.quill.root, KEYDOWN_EVENT, this._handleFrameKeyDown.bind(this));
-    }
+  enabled: boolean;
 
-    _handleFrameKeyDown(e) {
-        const keyName = normalizeKeyName(e);
-        if(keyName === 'del' || keyName === 'backspace') {
-            this._deleteImage();
-        }
-        this.hideFrame();
-    }
+  _hideFrameWithContext: any;
 
-    hideFrame() {
-        this._$target = null;
-        this._$resizeFrame.hide();
-        eventsEngine.off(this.quill.root, KEYDOWN_EVENT);
-    }
+  _framePositionChangedHandler: any;
 
-    updateFramePosition() {
-        const { height, width, top: targetTop, left: targetLeft } = getBoundingRect(this._$target);
-        const { top: containerTop, left: containerLeft } = getBoundingRect(this.quill.root);
-        const borderWidth = this._getBorderWidth();
-
-        this._$resizeFrame
-            .css({
-                height: height,
-                width: width,
-                padding: FRAME_PADDING,
-                top: targetTop - containerTop - borderWidth - FRAME_PADDING,
-                left: targetLeft - containerLeft - borderWidth - FRAME_PADDING
-            });
-        move(this._$resizeFrame, { left: 0, top: 0 });
-    }
+  _$target!: dxElementWrapper;
 
-    _getBorderWidth() {
-        return parseInt(this._$resizeFrame.css('borderTopWidth'));
-    }
+  resizable!: Resizable;
+
+  _$resizeFrame!: dxElementWrapper;
 
-    _createResizeFrame() {
-        if(this._$resizeFrame) {
-            return;
+  constructor(quill, options) {
+    // @ts-expect-error
+    super(quill, options);
+    this.allowedTargets = options.allowedTargets || ['image'];
+    this.enabled = !!options.enabled;
+    this._hideFrameWithContext = this.hideFrame.bind(this);
+    this._framePositionChangedHandler = this._prepareFramePositionChangedHandler();
+
+    if (this.enabled) {
+      this._attachEvents();
+      this._createResizeFrame();
+    }
+  }
+
+  _attachEvents() {
+    eventsEngine.on(this.quill.root, addNamespace(ClickEvent, MODULE_NAMESPACE), this._clickHandler.bind(this));
+    eventsEngine.on(this.quill.root, SCROLL_EVENT, this._framePositionChangedHandler);
+    this.editorInstance.on('focusOut', this._hideFrameWithContext);
+    this.quill.on('text-change', this._framePositionChangedHandler);
+  }
+
+  _detachEvents() {
+    eventsEngine.off(this.quill.root, MODULE_NAMESPACE);
+    this.editorInstance.off('focusOut', this._hideFrameWithContext);
+    this.quill.off('text-change', this._framePositionChangedHandler);
+  }
+
+  _clickHandler(e) {
+    if (this._isAllowedTarget(e.target)) {
+      if (this._$target === e.target) {
+        return;
+      }
+
+      this._$target = e.target;
+      const $target = $(this._$target);
+      // @ts-expect-error
+      const minWidth = Math.max(getOuterWidth($target) - getWidth($target), this.resizable.option('minWidth'));
+      // @ts-expect-error
+      const minHeight = Math.max(getOuterHeight($target) - getHeight($target), this.resizable.option('minHeight'));
+
+      this.resizable.option({ minWidth, minHeight });
+
+      this.updateFramePosition();
+      this.showFrame();
+      this._adjustSelection();
+    } else if (this._$target) {
+      this.hideFrame();
+    }
+  }
+
+  _prepareFramePositionChangedHandler() {
+    return () => {
+      if (this._$target) {
+        this.updateFramePosition();
+      }
+    };
+  }
+
+  _adjustSelection() {
+    if (!this.quill.getSelection()) {
+      this.quill.setSelection(0, 0);
+    }
+  }
+
+  _isAllowedTarget(targetElement) {
+    return this._isImage(targetElement);
+  }
+
+  _isImage(targetElement) {
+    return this.allowedTargets.indexOf('image') !== -1 && targetElement.tagName.toUpperCase() === 'IMG';
+  }
+
+  showFrame() {
+    this._$resizeFrame.show();
+    eventsEngine.on(this.quill.root, KEYDOWN_EVENT, this._handleFrameKeyDown.bind(this));
+  }
+
+  _handleFrameKeyDown(e) {
+    const keyName = normalizeKeyName(e);
+    if (keyName === 'del' || keyName === 'backspace') {
+      this._deleteImage();
+    }
+    this.hideFrame();
+  }
+
+  hideFrame() {
+    // @ts-expect-error
+    this._$target = null;
+    this._$resizeFrame.hide();
+    eventsEngine.off(this.quill.root, KEYDOWN_EVENT);
+  }
+
+  updateFramePosition() {
+    const {
+      height, width, top: targetTop, left: targetLeft,
+    } = getBoundingRect(this._$target);
+    const { top: containerTop, left: containerLeft } = getBoundingRect(this.quill.root);
+    const borderWidth = this._getBorderWidth();
+
+    this._$resizeFrame
+      // @ts-expect-error
+      .css({
+        height,
+        width,
+        padding: FRAME_PADDING,
+        top: targetTop - containerTop - borderWidth - FRAME_PADDING,
+        left: targetLeft - containerLeft - borderWidth - FRAME_PADDING,
+      });
+    move(this._$resizeFrame, { left: 0, top: 0 });
+  }
+
+  _getBorderWidth() {
+    // @ts-expect-error
+    // eslint-disable-next-line radix
+    return parseInt(this._$resizeFrame.css('borderTopWidth'));
+  }
+
+  _createResizeFrame() {
+    if (this._$resizeFrame) {
+      return;
+    }
+
+    const { deviceType } = devices.current();
+
+    this._$resizeFrame = $('<div>')
+      .addClass(DX_RESIZE_FRAME_CLASS)
+      .toggleClass(DX_TOUCH_DEVICE_CLASS, deviceType !== 'desktop')
+      .appendTo(this.editorInstance._getQuillContainer())
+      .hide();
+
+    eventsEngine.on(this._$resizeFrame, MOUSEDOWN_EVENT, (e) => {
+      e.preventDefault();
+    });
+
+    this.resizable = this.editorInstance._createComponent(this._$resizeFrame, Resizable, {
+      onResize: (e) => {
+        if (!this._$target) {
+          return;
         }
-
-        const { deviceType } = devices.current();
-
-        this._$resizeFrame = $('<div>')
-            .addClass(DX_RESIZE_FRAME_CLASS)
-            .toggleClass(DX_TOUCH_DEVICE_CLASS, deviceType !== 'desktop')
-            .appendTo(this.editorInstance._getQuillContainer())
-            .hide();
-
-
-        eventsEngine.on(this._$resizeFrame, MOUSEDOWN_EVENT, (e) => {
-            e.preventDefault();
-        });
-
-        this.resizable = this.editorInstance._createComponent(this._$resizeFrame, Resizable, {
-            onResize: (e) => {
-                if(!this._$target) {
-                    return;
-                }
-
-                $(this._$target).attr({
-                    height: e.height,
-                    width: e.width
-                });
-                this.updateFramePosition();
-            }
+        // @ts-expect-error
+        $(this._$target).attr({
+          height: e.height,
+          width: e.width,
         });
-    }
-
-    _deleteImage() {
-        if(this._isAllowedTarget(this._$target)) {
-            Quill.find(this._$target)?.deleteAt(0);
-        }
-    }
-
-    option(option, value) {
-        if(option === 'mediaResizing') {
-            this.handleOptionChangeValue(value);
-            return;
-        }
-
-        if(option === 'enabled') {
-            this.enabled = value;
-            value ? this._attachEvents() : this._detachEvents();
-        } else if(option === 'allowedTargets' && Array.isArray(value)) {
-            this.allowedTargets = value;
-        }
-    }
-
-    clean() {
-        this._detachEvents();
-        this._$resizeFrame.remove();
-        this._$resizeFrame = undefined;
-    }
+        this.updateFramePosition();
+      },
+    });
+  }
+
+  _deleteImage() {
+    if (this._isAllowedTarget(this._$target)) {
+      Quill.find(this._$target)?.deleteAt(0);
+    }
+  }
+
+  option(option, value) {
+    if (option === 'mediaResizing') {
+      // @ts-expect-error
+      this.handleOptionChangeValue(value);
+      return;
+    }
+
+    if (option === 'enabled') {
+      this.enabled = value;
+      value ? this._attachEvents() : this._detachEvents();
+    } else if (option === 'allowedTargets' && Array.isArray(value)) {
+      this.allowedTargets = value;
+    }
+  }
+
+  clean() {
+    this._detachEvents();
+    this._$resizeFrame.remove();
+    // @ts-expect-error
+    this._$resizeFrame = undefined;
+  }
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableContextMenu.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableContextMenu.ts
index 08a1d077b3f0..d2311df2fff6 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableContextMenu.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableContextMenu.ts
@@ -1,200 +1,223 @@
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { camelize, titleize } from '@js/core/utils/inflector';
+import { each } from '@js/core/utils/iterator';
+import { isObject, isString } from '@js/core/utils/type';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
+import localizationMessage from '@js/localization/message';
+import type { Item } from '@js/ui/context_menu';
+import ContextMenu from '@js/ui/context_menu';
 import Quill from 'devextreme-quill';
-import $ from '../../../core/renderer';
-import BaseModule from './base';
-import eventsEngine from '../../../events/core/events_engine';
-import { addNamespace } from '../../../events/utils/index';
-import ContextMenu from '../../context_menu';
-import localizationMessage from '../../../localization/message';
-import { getTableFormats } from '../utils/table_helper';
-import { getFormatHandlers, getDefaultClickHandler, ICON_MAP } from '../utils/toolbar_helper';
-import { each } from '../../../core/utils/iterator';
-import { isString, isObject } from '../../../core/utils/type';
-import { titleize, camelize } from '../../../core/utils/inflector';
-import { extend } from '../../../core/utils/extend';
+
+import { getTableFormats } from '../utils/m_table_helper';
+import { getDefaultClickHandler, getFormatHandlers, ICON_MAP } from '../utils/m_toolbar_helper';
+import BaseModule from './m_base';
 
 const MODULE_NAMESPACE = 'dxHtmlEditorTableContextMenu';
 
 const CONTEXT_MENU_EVENT = addNamespace('dxcontextmenu', MODULE_NAMESPACE);
-
+// eslint-disable-next-line import/no-mutable-exports
 let TableContextMenuModule = BaseModule;
 
-const localize = (name) => {
-    return localizationMessage.format(`dxHtmlEditor-${camelize(name)}`);
-};
-
-if(Quill) {
-    TableContextMenuModule = class TableContextMenuModule extends BaseModule {
-        constructor(quill, options) {
-            super(quill, options);
-            this.enabled = !!options.enabled;
-            this._quillContainer = this.editorInstance._getQuillContainer();
-            this.addCleanCallback(this.prepareCleanCallback());
-            this._formatHandlers = getFormatHandlers(this);
-            this._tableFormats = getTableFormats(quill);
-
-            if(this.enabled) {
-                this._enableContextMenu(options.items);
-            }
-        }
+const localize = (name) => localizationMessage.format(`dxHtmlEditor-${camelize(name)}`);
 
-        _enableContextMenu(items) {
-            this._contextMenu?.dispose();
-            this._contextMenu = this._createContextMenu(items);
+if (Quill) {
+  // @ts-expect-error
+  TableContextMenuModule = class TableContextMenuModule extends BaseModule {
+    quill: any;
 
-            this._attachEvents();
-        }
+    editorInstance: any;
 
-        _attachEvents() {
-            eventsEngine.on(this.editorInstance._getContent(), CONTEXT_MENU_EVENT, this._prepareContextMenuHandler());
-        }
+    enabled: boolean;
 
-        _detachEvents() {
-            eventsEngine.off(this.editorInstance._getContent(), CONTEXT_MENU_EVENT);
-        }
-
-        _createContextMenu(items) {
-            const $container = $('<div>').appendTo(this.editorInstance.$element());
-            const menuConfig = this._getMenuConfig(items);
-
-            return this.editorInstance._createComponent($container, ContextMenu, menuConfig);
-        }
+    _quillContainer: any;
 
-        showPropertiesForm(type = 'cell') {
-            const $element = $(this._targetElement).closest(type === 'cell' ? 'th, td' : 'table');
-            this._contextMenu.hide();
-            this._formatHandlers[`${type}Properties`]($element);
-            this._targetElement = null;
-        }
-
-        _isAcceptableItem(widget, acceptableWidgetName) {
-            return !widget || widget === acceptableWidgetName;
-        }
-
-        _handleObjectItem(item) {
-            if(item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
-                const defaultButtonItemConfig = this._prepareMenuItemConfig(item.name);
-                const buttonItemConfig = extend(true, defaultButtonItemConfig, item);
-
-                return buttonItemConfig;
-            } else if(item.items) {
-                item.items = this._prepareMenuItems(item.items);
-                return item;
-            } else {
-                return item;
-            }
-        }
-
-        _prepareMenuItemConfig(name) {
-            const iconName = ICON_MAP[name] ?? name;
-            const buttonText = titleize(name);
-
-            return {
-                text: localize(buttonText),
-                icon: iconName.toLowerCase(),
-                onClick: this._formatHandlers[name] ?? getDefaultClickHandler(this, name)
-            };
-        }
-
-        _prepareMenuItems(items) {
-            const resultItems = [];
-            each(items, (_, item) => {
-                let newItem;
-                if(isObject(item)) {
-                    newItem = this._handleObjectItem(item);
-                } else if(isString(item)) {
-                    newItem = this._prepareMenuItemConfig(item);
-                }
-                if(newItem) {
-                    resultItems.push(newItem);
-                }
-            });
-
-            return resultItems;
-        }
-
-        _getMenuConfig(items) {
-            const defaultItems = [
-                { text: localize('insert'), items: [
-                    'insertHeaderRow',
-                    'insertRowAbove',
-                    'insertRowBelow',
-                    extend(this._prepareMenuItemConfig('insertColumnLeft'), { beginGroup: true }),
-                    'insertColumnRight'
-                ] },
-                {
-                    text: localize('delete'),
-                    items: [
-                        'deleteColumn',
-                        'deleteRow',
-                        'deleteTable'
-                    ]
-                },
-                extend(this._prepareMenuItemConfig('cellProperties'), { onClick: (e) => { this.showPropertiesForm('cell'); } }),
-                extend(this._prepareMenuItemConfig('tableProperties'), { onClick: (e) => { this.showPropertiesForm('table'); } })
-            ];
-
-            const customItems = this._prepareMenuItems(items?.length ? items : defaultItems);
-
-            return {
-                target: this._quillContainer,
-                showEvent: null,
-                hideOnParentScroll: false,
-                items: customItems
-            };
-        }
-
-        _prepareContextMenuHandler() {
-            return (event) => {
-                if(this._isTableTarget(event.target)) {
-                    this._targetElement = event.target;
-                    this._setContextMenuPosition(event);
-                    this._contextMenu.show();
-                    event.preventDefault();
-                }
-            };
-        }
-
-        _setContextMenuPosition(event) {
-            const startPosition = this._quillContainer.get(0).getBoundingClientRect();
-            this._contextMenu.option({
-                position: {
-                    my: 'left top',
-                    at: 'left top',
-                    collision: 'fit fit',
-                    offset: { x: event.clientX - startPosition.left, y: event.clientY - startPosition.top }
-                }
-            });
-        }
-
-        _isTableTarget(targetElement) {
-            return !!$(targetElement).closest('.dx-htmleditor-content td, .dx-htmleditor-content th').length;
-        }
-
-        clean() {
-            this._detachEvents();
-        }
-
-        option(option, value) {
-            if(option === 'tableContextMenu') {
-                this.handleOptionChangeValue(value);
-                return;
-            }
-
-            if(option === 'enabled') {
-                this.enabled = value;
-                value ? this._enableContextMenu() : this.clean();
-            } else if(option === 'items') {
-                this._contextMenu?.dispose();
-                this._contextMenu = this._createContextMenu(value);
-            }
-        }
-
-        prepareCleanCallback() {
-            return () => {
-                this.clean();
-            };
-        }
-    };
+    _formatHandlers: any;
+
+    _tableFormats: any;
+
+    _contextMenu!: ContextMenu;
+
+    _targetElement: any;
+
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
+      this.enabled = !!options.enabled;
+      this._quillContainer = this.editorInstance._getQuillContainer();
+      // @ts-expect-error
+      this.addCleanCallback(this.prepareCleanCallback());
+      this._formatHandlers = getFormatHandlers(this);
+      this._tableFormats = getTableFormats(quill);
+
+      if (this.enabled) {
+        this._enableContextMenu(options.items);
+      }
+    }
+
+    _enableContextMenu(items?: Item[]) {
+      this._contextMenu?.dispose();
+      this._contextMenu = this._createContextMenu(items);
+
+      this._attachEvents();
+    }
+
+    _attachEvents() {
+      eventsEngine.on(this.editorInstance._getContent(), CONTEXT_MENU_EVENT, this._prepareContextMenuHandler());
+    }
+
+    _detachEvents() {
+      eventsEngine.off(this.editorInstance._getContent(), CONTEXT_MENU_EVENT);
+    }
+
+    _createContextMenu(items) {
+      const $container = $('<div>').appendTo(this.editorInstance.$element());
+      const menuConfig = this._getMenuConfig(items);
+
+      return this.editorInstance._createComponent($container, ContextMenu, menuConfig);
+    }
+
+    showPropertiesForm(type = 'cell') {
+      const $element = $(this._targetElement).closest(type === 'cell' ? 'th, td' : 'table');
+      this._contextMenu.hide();
+      this._formatHandlers[`${type}Properties`]($element);
+      this._targetElement = null;
+    }
+
+    _isAcceptableItem(widget, acceptableWidgetName) {
+      return !widget || widget === acceptableWidgetName;
+    }
+
+    _handleObjectItem(item) {
+      if (item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
+        const defaultButtonItemConfig = this._prepareMenuItemConfig(item.name);
+        const buttonItemConfig = extend(true, defaultButtonItemConfig, item);
+
+        return buttonItemConfig;
+      } if (item.items) {
+        item.items = this._prepareMenuItems(item.items);
+        return item;
+      }
+      return item;
+    }
+
+    _prepareMenuItemConfig(name) {
+      const iconName = ICON_MAP[name] ?? name;
+      const buttonText = titleize(name);
+
+      return {
+        text: localize(buttonText),
+        icon: iconName.toLowerCase(),
+        onClick: this._formatHandlers[name] ?? getDefaultClickHandler(this, name),
+      };
+    }
+
+    _prepareMenuItems(items) {
+      const resultItems: Item[] = [];
+      each(items, (_, item) => {
+        let newItem;
+        if (isObject(item)) {
+          newItem = this._handleObjectItem(item);
+        } else if (isString(item)) {
+          newItem = this._prepareMenuItemConfig(item);
+        }
+        if (newItem) {
+          resultItems.push(newItem);
+        }
+      });
+
+      return resultItems;
+    }
+
+    _getMenuConfig(items) {
+      const defaultItems = [
+        {
+          text: localize('insert'),
+          items: [
+            'insertHeaderRow',
+            'insertRowAbove',
+            'insertRowBelow',
+            extend(this._prepareMenuItemConfig('insertColumnLeft'), { beginGroup: true }),
+            'insertColumnRight',
+          ],
+        },
+        {
+          text: localize('delete'),
+          items: [
+            'deleteColumn',
+            'deleteRow',
+            'deleteTable',
+          ],
+        },
+        extend(this._prepareMenuItemConfig('cellProperties'), { onClick: () => { this.showPropertiesForm('cell'); } }),
+        extend(this._prepareMenuItemConfig('tableProperties'), { onClick: () => { this.showPropertiesForm('table'); } }),
+      ];
+
+      const customItems = this._prepareMenuItems(items?.length ? items : defaultItems);
+
+      return {
+        target: this._quillContainer,
+        showEvent: null,
+        hideOnParentScroll: false,
+        items: customItems,
+      };
+    }
+
+    _prepareContextMenuHandler() {
+      return (event) => {
+        if (this._isTableTarget(event.target)) {
+          this._targetElement = event.target;
+          this._setContextMenuPosition(event);
+          this._contextMenu.show();
+          event.preventDefault();
+        }
+      };
+    }
+
+    _setContextMenuPosition(event) {
+      const startPosition = this._quillContainer.get(0).getBoundingClientRect();
+      // @ts-expect-error
+      this._contextMenu.option({
+        position: {
+          my: 'left top',
+          at: 'left top',
+          collision: 'fit fit',
+          offset: { x: event.clientX - startPosition.left, y: event.clientY - startPosition.top },
+        },
+      });
+    }
+
+    _isTableTarget(targetElement) {
+      return !!$(targetElement).closest('.dx-htmleditor-content td, .dx-htmleditor-content th').length;
+    }
+
+    clean() {
+      this._detachEvents();
+    }
+
+    option(option, value) {
+      if (option === 'tableContextMenu') {
+        // @ts-expect-error
+        this.handleOptionChangeValue(value);
+        return;
+      }
+
+      if (option === 'enabled') {
+        this.enabled = value;
+        value ? this._enableContextMenu() : this.clean();
+      } else if (option === 'items') {
+        this._contextMenu?.dispose();
+        this._contextMenu = this._createContextMenu(value);
+      }
+    }
+
+    prepareCleanCallback() {
+      return () => {
+        this.clean();
+      };
+    }
+  };
 }
 
 export default TableContextMenuModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableResizing.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableResizing.ts
index 62128bfd9bb0..b0d6f348ef4e 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableResizing.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_tableResizing.ts
@@ -1,31 +1,33 @@
-import { getOuterWidth, getOuterHeight, getHeight } from '../../../core/utils/size';
-import $ from '../../../core/renderer';
-import eventsEngine from '../../../events/core/events_engine';
-import { isDefined } from '../../../core/utils/type';
-import { addNamespace } from '../../../events/utils/index';
-import _windowResizeCallbacks from '../../../core/utils/resize_callbacks';
-import { move } from '../../../animation/translator';
-import { getBoundingRect } from '../../../core/utils/position';
-import BaseModule from './base';
-import Draggable from '../../draggable';
-import { each } from '../../../core/utils/iterator';
-import { getWindow, hasWindow } from '../../../core/utils/window';
-import { extend } from '../../../core/utils/extend';
-import {
-    setLineElementsFormat,
-    getLineElements,
-    getAutoSizedElements,
-    getColumnElements,
-    unfixTableWidth
-} from '../utils/table_helper';
+import { move } from '@js/animation/translator';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { each } from '@js/core/utils/iterator';
+import { getBoundingRect } from '@js/core/utils/position';
+import _windowResizeCallbacks from '@js/core/utils/resize_callbacks';
+import { getHeight, getOuterHeight, getOuterWidth } from '@js/core/utils/size';
+import { isDefined } from '@js/core/utils/type';
+import { getWindow, hasWindow } from '@js/core/utils/window';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
+import type { Properties } from '@js/ui/draggable';
+import Draggable from '@js/ui/draggable';
 
+import {
+  getAutoSizedElements,
+  getColumnElements,
+  getLineElements,
+  setLineElementsFormat,
+  unfixTableWidth,
+} from '../utils/m_table_helper';
+import BaseModule from './m_base';
 
 const DX_COLUMN_RESIZE_FRAME_CLASS = 'dx-table-resize-frame';
 const DX_COLUMN_RESIZER_CLASS = 'dx-htmleditor-column-resizer';
 const DX_ROW_RESIZER_CLASS = 'dx-htmleditor-row-resizer';
 const DEFAULTS = {
-    minColumnWidth: 40,
-    minRowHeight: 24
+  minColumnWidth: 40,
+  minRowHeight: 24,
 };
 
 const DRAGGABLE_ELEMENT_OFFSET = 2;
@@ -37,642 +39,711 @@ const POINTERDOWN_EVENT = addNamespace('dxpointerdown', MODULE_NAMESPACE);
 const SCROLL_EVENT = addNamespace('scroll', MODULE_NAMESPACE);
 
 export default class TableResizingModule extends BaseModule {
-    constructor(quill, options) {
-        super(quill, options);
-        this.enabled = !!options.enabled;
-        this._tableResizeFrames = [];
-        this._minColumnWidth = this._minSizeLimit('minColumnWidth', options.minColumnWidth);
-        this._minRowHeight = this._minSizeLimit('minRowHeight', options.minRowHeight);
-        this._quillContainer = this.editorInstance._getQuillContainer();
-        this._tableData = [];
-
-        if(this.enabled) {
-            this._applyResizing();
-        }
-    }
+  quill: any;
 
-    _applyResizing(forcedStart) {
-        if(forcedStart) {
-            this._applyResizingImpl();
-        } else {
-            this.editorInstance.addContentInitializedCallback(this._applyResizingImpl.bind(this));
-        }
-
-        this.addCleanCallback(this.clean.bind(this));
-        this._resizeHandlerWithContext = _windowResizeCallbacks.add(this._resizeHandler.bind(this));
-    }
-
-    _minSizeLimit(propertyName, newValue) {
-        return isDefined(newValue) ? Math.max(newValue, 0) : DEFAULTS[propertyName];
-    }
-
-    _applyResizingImpl() {
-        const $tables = this._findTables();
-        if($tables.length) {
-            this._fixTablesWidths($tables);
-            this._createResizeFrames($tables);
-            this._updateFramesPositions();
-            this._updateFramesSeparators();
-        }
-
-        this._attachEvents();
-    }
-
-    _attachEvents() {
-        eventsEngine.on(this.editorInstance._getContent(), SCROLL_EVENT, this._updateFramesPositions.bind(this));
-
-        this.quill.on('text-change', this._getQuillTextChangeHandler());
-    }
+  _quillContainer: any;
 
-    _detachEvents() {
-        eventsEngine.off(this.editorInstance._getContent(), MODULE_NAMESPACE);
-        this.quill.off('text-change', this._quillTextChangeHandler);
-    }
+  _tableData: any[];
 
-    _getQuillTextChangeHandler(delta, oldContent, source) {
-        return (delta, oldContent, source) => {
-            if(this._isTableChanging()) {
-                const $tables = this._findTables();
-                this._removeResizeFrames();
-                if(source === 'api') {
-                    this._fixTablesWidths($tables);
-                }
-
-                this._updateTablesColumnsWidth($tables);
-                this._createResizeFrames($tables);
-                this._updateFramesPositions();
-                this._updateFramesSeparators();
-            } else {
-                this._updateFramesPositions();
-                if(!this._isDragging) {
-                    this._updateFramesSeparators();
-                }
-            }
-        };
-    }
+  enabled: boolean;
 
-    _getFrameForTable($table) {
-        return this._framesForTables?.get($table.get(0));
-    }
+  _tableResizeFrames: any[];
 
-    _resizeHandler() {
-        this._windowResizeTimeout = setTimeout(() => {
-            const $tables = this._findTables();
-            each($tables, (index, table) => {
-                const $table = $(table);
-                const frame = this._tableResizeFrames[index];
-                const actualTableWidth = getOuterWidth($table);
-                const lastTableWidth = this._tableLastWidth(frame);
-                if(Math.abs(actualTableWidth - lastTableWidth) > 1) {
-                    this._tableLastWidth(frame, actualTableWidth);
-                    this._updateColumnsWidth($table, index);
-                }
-            });
-            this._updateFramesPositions();
-            this._updateFramesSeparators();
-        });
-    }
+  _minColumnWidth: number;
 
-    _findTables() {
-        return $(this._quillContainer).find('table');
-    }
+  _minRowHeight: number;
 
-    _getWidthStyleValue($element) {
-        const styleValue = $element[0].style.width;
-        return styleValue !== '' ? parseInt(styleValue) : undefined;
-    }
+  editorInstance: any;
 
-    _tableLastWidth(frame, newValue) {
-        if(isDefined(newValue)) {
-            frame.lastWidth = newValue;
-        } else {
-            return frame?.lastWidth;
-        }
-    }
+  _isDragging?: boolean;
 
-    _fixTablesWidths($tables) {
-        each($tables, (index, table) => {
-            const $table = $(table);
-            const $columnElements = this._getTableDeterminantElements($table, 'horizontal');
+  _windowResizeTimeout: any;
 
-            if(!this._tableResizeFrames[index]) {
-                this._tableResizeFrames[index] = { lastWidth: undefined };
-            }
-            const frame = this._getFrameForTable($table);
+  _framesForTables: any;
 
-            if(!frame) {
-                this._tableResizeFrames.push({ $table: $table });
-            }
+  _quillTextChangeHandler: any;
 
-            if(getAutoSizedElements($table).length === 0) {
-                const { columnsSum } = this._getColumnElementsSum($columnElements);
+  _resizeHandlerWithContext: any;
 
-                unfixTableWidth($table, { quill: this.quill });
+  _startLineSize: any;
 
-                const tableWidth = this._tableLastWidth(frame) ?? getOuterWidth($table);
+  _nextLineSize: any;
 
-                if(frame) {
-                    this._tableLastWidth(frame, Math.max(columnsSum, tableWidth));
-                }
-            }
-        });
-    }
+  _$highlightedElement!: dxElementWrapper;
 
-    _createResizeFrames($tables) {
-        this._framesForTables = new Map();
-
-        $tables.each((index, table) => {
-            const $table = $(table);
-            const $lastTable = this._tableResizeFrames[index]?.$table;
-            const $tableLastWidth = this._tableResizeFrames[index].lastWidth;
-            this._tableResizeFrames[index] = {
-                $frame: this._createTableResizeFrame(table),
-                $table: $table,
-                index: index,
-                lastWidth: ($lastTable && table === $lastTable.get(0)) ? $tableLastWidth : undefined,
-                columnsCount: this._getTableDeterminantElements($table, 'horizontal').length,
-                rowsCount: this._getTableDeterminantElements($table, 'vertical').length
-            };
-
-            this._framesForTables.set(table, this._tableResizeFrames[index]);
-        });
+  _currentDraggableElement!: Draggable;
 
-        this._tableResizeFrames.length = $tables.length;
-    }
+  _nextColumnOffsetLimit: any;
 
-    _isTableChanging() {
-        const $tables = this._findTables();
+  _attachResizerTimeout: any;
 
-        let result = false;
-        if($tables.length !== this._tableResizeFrames.length) {
-            result = true;
-        } else {
-            each($tables, (index, table) => {
-                const $table = $(table);
-                const frame = this._tableResizeFrames[index];
-                const isColumnsCountChanged = frame?.columnsCount !== this._getTableDeterminantElements($table, 'horizontal').length;
-                const isRowCountChanged = frame?.rowsCount !== this._getTableDeterminantElements($table, 'vertical').length;
-
-                if(isColumnsCountChanged || isRowCountChanged) {
-                    result = true;
-                    return false;
-                }
-            });
-        }
-        return result;
-    }
+  _startTableWidth?: any;
 
-    _removeResizeFrames(clearArray) {
-        each(this._tableResizeFrames, (index, resizeFrame) => {
-            if(resizeFrame.$frame) {
-                const resizerElementsSelector = `.${DX_COLUMN_RESIZER_CLASS}, .${DX_ROW_RESIZER_CLASS}`;
-                this._detachSeparatorEvents(resizeFrame.$frame?.find(resizerElementsSelector));
-                resizeFrame.$frame.remove();
-            }
-        });
+  _startLineSeparatorPosition?: number;
 
-        this._framesForTables?.clear();
+  constructor(quill, options) {
+    // @ts-expect-error
+    super(quill, options);
+    this.enabled = !!options.enabled;
+    this._tableResizeFrames = [];
+    this._minColumnWidth = this._minSizeLimit('minColumnWidth', options.minColumnWidth);
+    this._minRowHeight = this._minSizeLimit('minRowHeight', options.minRowHeight);
+    this._quillContainer = this.editorInstance._getQuillContainer();
+    this._tableData = [];
 
-        if(clearArray) {
-            this._tableResizeFrames = [];
-        }
+    if (this.enabled) {
+      this._applyResizing();
     }
+  }
 
-    _detachSeparatorEvents($lineSeparators) {
-        $lineSeparators.each((i, $lineSeparator) => {
-            eventsEngine.off($lineSeparator, POINTERDOWN_EVENT);
-        });
+  _applyResizing(forcedStart?: boolean) {
+    if (forcedStart) {
+      this._applyResizingImpl();
+    } else {
+      this.editorInstance.addContentInitializedCallback(this._applyResizingImpl.bind(this));
     }
+    // @ts-expect-error
+    this.addCleanCallback(this.clean.bind(this));
+    this._resizeHandlerWithContext = _windowResizeCallbacks.add(this._resizeHandler.bind(this));
+  }
 
-    _createTableResizeFrame() {
-        return $('<div>')
-            .addClass(DX_COLUMN_RESIZE_FRAME_CLASS)
-            .appendTo(this._quillContainer);
-    }
+  _minSizeLimit(propertyName, newValue): number {
+    return isDefined(newValue) ? Math.max(newValue, 0) : DEFAULTS[propertyName];
+  }
 
-    _updateFramesPositions() {
-        each(this._tableResizeFrames, (index, tableResizeFrame) => {
-            this._updateFramePosition(tableResizeFrame.$table, tableResizeFrame.$frame);
-        });
+  _applyResizingImpl() {
+    const $tables = this._findTables();
+    if ($tables.length) {
+      this._fixTablesWidths($tables);
+      this._createResizeFrames($tables);
+      this._updateFramesPositions();
+      this._updateFramesSeparators();
     }
 
-    _updateFramePosition($table, $frame) {
-        const { height, width, top: targetTop, left: targetLeft } = getBoundingRect($table.get(0));
-        const { top: containerTop, left: containerLeft } = getBoundingRect(this.quill.root);
+    this._attachEvents();
+  }
 
-        $frame
-            .css({
-                height: height,
-                width: width,
-                top: targetTop - containerTop,
-                left: targetLeft - containerLeft
-            });
-        move($frame, { left: 0, top: 0 });
-    }
+  _attachEvents() {
+    eventsEngine.on(this.editorInstance._getContent(), SCROLL_EVENT, this._updateFramesPositions.bind(this));
 
-    _updateFramesSeparators(direction) {
-        each(this._tableResizeFrames, (index, frame) => {
-            if(direction) {
-                this._updateFrameSeparators(frame, direction);
-            } else {
-                this._updateFrameSeparators(frame, 'vertical');
-                this._updateFrameSeparators(frame, 'horizontal');
-            }
-        });
-    }
+    this.quill.on('text-change', this._getQuillTextChangeHandler());
+  }
 
-    _isDraggable($element) {
-        return $element.hasClass('dx-draggable') && $element.is(':visible');
-    }
+  _detachEvents() {
+    eventsEngine.off(this.editorInstance._getContent(), MODULE_NAMESPACE);
+    this.quill.off('text-change', this._quillTextChangeHandler);
+  }
 
-    _removeDraggable($currentLineSeparator, lineResizerClass) {
-        if(this._isDraggable($currentLineSeparator)) {
-            const draggable = $($currentLineSeparator).dxDraggable('instance');
-            draggable.dispose();
-            $($currentLineSeparator).addClass(lineResizerClass);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _getQuillTextChangeHandler(delta?: any, oldContent?: any, source?: any) {
+    return (delta, oldContent, source) => {
+      if (this._isTableChanging()) {
+        const $tables = this._findTables();
+        this._removeResizeFrames();
+        if (source === 'api') {
+          this._fixTablesWidths($tables);
         }
-    }
 
-    _getDirectionInfo(direction) {
-        if(direction === 'vertical') {
-            return {
-                lineResizerClass: DX_ROW_RESIZER_CLASS,
-                sizeFunction: (x) => getOuterHeight(x),
-                positionCoordinate: 'top',
-                positionStyleProperty: 'height',
-                positionCoordinateName: 'y'
-            };
-        } else {
-            return {
-                lineResizerClass: DX_COLUMN_RESIZER_CLASS,
-                sizeFunction: (x) => getOuterWidth(x),
-                positionCoordinate: this.editorInstance.option('rtlEnabled') ? 'right' : 'left',
-                positionStyleProperty: 'width',
-                positionCoordinateName: 'x'
-            };
+        this._updateTablesColumnsWidth($tables);
+        this._createResizeFrames($tables);
+        this._updateFramesPositions();
+        this._updateFramesSeparators();
+      } else {
+        this._updateFramesPositions();
+        if (!this._isDragging) {
+          this._updateFramesSeparators();
         }
-    }
+      }
+    };
+  }
+
+  _getFrameForTable($table) {
+    return this._framesForTables?.get($table.get(0));
+  }
+
+  _resizeHandler() {
+    this._windowResizeTimeout = setTimeout(() => {
+      const $tables = this._findTables();
+      each($tables, (index, table) => {
+        // @ts-expect-error
+        const $table = $(table);
+        const frame = this._tableResizeFrames[index];
+        const actualTableWidth = getOuterWidth($table);
+        const lastTableWidth = this._tableLastWidth(frame);
+        if (Math.abs(actualTableWidth - lastTableWidth) > 1) {
+          this._tableLastWidth(frame, actualTableWidth);
+          this._updateColumnsWidth($table, index);
+        }
+      });
+      this._updateFramesPositions();
+      this._updateFramesSeparators();
+    });
+  }
 
-    _getSize($element, directionInfo) {
-        return directionInfo.sizeFunction($element);
-    }
+  _findTables() {
+    return $(this._quillContainer).find('table');
+  }
 
-    _updateFrameSeparators(frame, direction) {
-        const $determinantElements = this._getTableDeterminantElements(frame.$table, direction);
-        const determinantElementsCount = $determinantElements.length;
-        const determinantElementsSeparatorsCount = determinantElementsCount - 1;
-        const directionInfo = this._getDirectionInfo(direction);
-        const lineSeparators = frame.$frame.find(`.${directionInfo.lineResizerClass}`);
-        const styleOptions = {
-            transform: 'none'
-        };
-
-        let currentPosition = 0;
-        for(let i = 0; i <= determinantElementsSeparatorsCount; i++) {
-            currentPosition += this._getSize($determinantElements.eq(i), directionInfo);
-
-            if(!isDefined(lineSeparators[i])) {
-                lineSeparators[i] = $('<div>')
-                    .addClass(directionInfo.lineResizerClass)
-                    .appendTo(frame.$frame)
-                    .get(0);
-            }
-
-            const $currentLineSeparator = $(lineSeparators[i]);
-
-            this._removeDraggable($currentLineSeparator, directionInfo.lineResizerClass);
-
-            styleOptions[directionInfo.positionCoordinate] = currentPosition - DRAGGABLE_ELEMENT_OFFSET;
-            $($currentLineSeparator).css(styleOptions);
-
-            const attachSeparatorData = {
-                lineSeparator: lineSeparators[i],
-                index: i,
-                $determinantElements,
-                frame,
-                direction
-            };
-            this._attachColumnSeparatorEvents(attachSeparatorData);
-        }
-    }
+  _getWidthStyleValue($element) {
+    const styleValue = $element[0].style.width;
+    // eslint-disable-next-line radix
+    return styleValue !== '' ? parseInt(styleValue) : undefined;
+  }
 
-    _getTableDeterminantElements($table, direction) {
-        if(direction === 'vertical') {
-            return $table.find('th:first-child, td:first-child');
-        } else {
-            return getColumnElements($table);
-        }
+  _tableLastWidth(frame, newValue?: any) {
+    if (isDefined(newValue)) {
+      frame.lastWidth = newValue;
+    } else {
+      return frame?.lastWidth;
     }
+  }
 
-    _attachColumnSeparatorEvents(options) {
-        eventsEngine.on(options.lineSeparator, POINTERDOWN_EVENT, () => {
-            this._createDraggableElement(options);
-        });
-    }
+  _fixTablesWidths($tables) {
+    each($tables, (index, table) => {
+      const $table = $(table);
+      const $columnElements = this._getTableDeterminantElements($table, 'horizontal');
 
-    _dragStartHandler({ $determinantElements, index, frame, direction, lineSeparator }) {
-        const directionInfo = this._getDirectionInfo(direction);
+      if (!this._tableResizeFrames[index]) {
+        this._tableResizeFrames[index] = { lastWidth: undefined };
+      }
+      const frame = this._getFrameForTable($table);
 
-        this._isDragging = true;
+      if (!frame) {
+        this._tableResizeFrames.push({ $table });
+      }
 
-        this._fixColumnsWidth(frame.$table);
-        this._startLineSize = parseInt(this._getSize($($determinantElements[index]), directionInfo));
-        this._startTableWidth = getOuterWidth(frame.$table);
-        this._startLineSeparatorPosition = parseInt($(lineSeparator).css(directionInfo.positionCoordinate));
-        this._nextLineSize = 0;
-        if($determinantElements[index + 1]) {
-            this._nextLineSize = parseInt(this._getSize($($determinantElements[index + 1]), directionInfo));
-        } else if(direction === 'horizontal') {
-            unfixTableWidth(frame.$table, { quill: this.quill });
-        }
-    }
+      if (getAutoSizedElements($table).length === 0) {
+        const { columnsSum } = this._getColumnElementsSum($columnElements);
 
-    _shouldRevertOffset(direction) {
-        return direction === 'horizontal' && this.editorInstance.option('rtlEnabled');
-    }
+        unfixTableWidth($table, { quill: this.quill });
 
-    _isNextColumnWidthEnough(nextColumnNewSize, $nextColumnElement, eventOffset) {
-        if(!this._nextLineSize) {
-            return true;
-        } else if((nextColumnNewSize >= this._minColumnWidth)) {
-            const isWidthIncreased = this._nextColumnOffsetLimit ? (eventOffset < this._nextColumnOffsetLimit) : (eventOffset < 0);
-            const isWidthLimited = Math.abs(this._getWidthStyleValue($nextColumnElement) - getOuterWidth($nextColumnElement)) > ROUGH_OFFSET;
+        const tableWidth = this._tableLastWidth(frame) ?? getOuterWidth($table);
 
-            return (isWidthIncreased || !isWidthLimited);
+        if (frame) {
+          this._tableLastWidth(frame, Math.max(columnsSum, tableWidth));
         }
-
-        return false;
-    }
-
-    _shouldSetNextColumnWidth(nextColumnNewSize) {
-        return this._nextLineSize && nextColumnNewSize > 0;
-    }
-
-    _horizontalDragHandler({ currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame }) {
-        let nextColumnNewSize = this._nextLineSize && this._nextLineSize - eventOffset;
-        const isCurrentColumnWidthEnough = currentLineNewSize >= this._minColumnWidth;
-        const $lineElements = getLineElements(frame.$table, index);
-        const $nextLineElements = getLineElements(frame.$table, index + 1);
-        const realWidthDiff = getOuterWidth($lineElements.eq(0)) - currentLineNewSize;
-
-        if(isCurrentColumnWidthEnough) {
-            if(this._isNextColumnWidthEnough(nextColumnNewSize, $determinantElements.eq(index + 1), eventOffset)) {
-                setLineElementsFormat(this, {
-                    elements: $lineElements,
-                    property: directionInfo.positionStyleProperty,
-                    value: currentLineNewSize
-                });
-
-                if(this._shouldSetNextColumnWidth(nextColumnNewSize)) {
-                    setLineElementsFormat(this, {
-                        elements: $nextLineElements,
-                        property: directionInfo.positionStyleProperty,
-                        value: nextColumnNewSize
-                    });
-                }
-
-
-                const isTableWidthChanged = Math.abs(this._startTableWidth - getOuterWidth(frame.$table)) < ROUGH_OFFSET;
-                const shouldRevertNewValue = Math.abs(realWidthDiff) > ROUGH_OFFSET || (!this._nextLineSize && isTableWidthChanged);
-
-                if(shouldRevertNewValue) {
-                    setLineElementsFormat(this, {
-                        elements: $lineElements,
-                        property: directionInfo.positionStyleProperty,
-                        value: getOuterWidth($lineElements.eq(0))
-                    });
-
-                    nextColumnNewSize += currentLineNewSize - getOuterWidth($lineElements.eq(0));
-
-                    if(this._shouldSetNextColumnWidth(nextColumnNewSize)) {
-                        setLineElementsFormat(this, {
-                            elements: $nextLineElements,
-                            property: directionInfo.positionStyleProperty,
-                            value: nextColumnNewSize
-                        });
-                    }
-                }
-            } else {
-                this._nextColumnOffsetLimit = this._nextColumnOffsetLimit || eventOffset;
-            }
+      }
+    });
+  }
+
+  _createResizeFrames($tables) {
+    this._framesForTables = new Map();
+
+    $tables.each((index, table) => {
+      const $table = $(table);
+      const $lastTable = this._tableResizeFrames[index]?.$table;
+      const $tableLastWidth = this._tableResizeFrames[index].lastWidth;
+      this._tableResizeFrames[index] = {
+        $frame: this._createTableResizeFrame(table),
+        $table,
+        index,
+        lastWidth: $lastTable && table === $lastTable.get(0) ? $tableLastWidth : undefined,
+        columnsCount: this._getTableDeterminantElements($table, 'horizontal').length,
+        rowsCount: this._getTableDeterminantElements($table, 'vertical').length,
+      };
+
+      this._framesForTables.set(table, this._tableResizeFrames[index]);
+    });
+
+    this._tableResizeFrames.length = $tables.length;
+  }
+
+  _isTableChanging() {
+    const $tables = this._findTables();
+
+    let result = false;
+    if ($tables.length !== this._tableResizeFrames.length) {
+      result = true;
+    } else {
+      // @ts-expect-error
+      each($tables, (index, table) => {
+        // @ts-expect-error
+        const $table = $(table);
+        const frame = this._tableResizeFrames[index];
+        const isColumnsCountChanged = frame?.columnsCount !== this._getTableDeterminantElements($table, 'horizontal').length;
+        const isRowCountChanged = frame?.rowsCount !== this._getTableDeterminantElements($table, 'vertical').length;
+
+        if (isColumnsCountChanged || isRowCountChanged) {
+          result = true;
+          return false;
         }
-
-        this._$highlightedElement.css(directionInfo.positionCoordinate, (this._startLineSeparatorPosition + eventOffset + realWidthDiff) + 'px');
-    }
-
-    _verticalDragHandler({ currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame }) {
-        const newHeight = Math.max(currentLineNewSize, this._minRowHeight);
-        const $lineElements = getLineElements(frame.$table, index, 'vertical');
-
+      });
+    }
+    return result;
+  }
+
+  _removeResizeFrames(clearArray?: boolean) {
+    each(this._tableResizeFrames, (index, resizeFrame) => {
+      if (resizeFrame.$frame) {
+        const resizerElementsSelector = `.${DX_COLUMN_RESIZER_CLASS}, .${DX_ROW_RESIZER_CLASS}`;
+        this._detachSeparatorEvents(resizeFrame.$frame?.find(resizerElementsSelector));
+        resizeFrame.$frame.remove();
+      }
+    });
+
+    this._framesForTables?.clear();
+
+    if (clearArray) {
+      this._tableResizeFrames = [];
+    }
+  }
+
+  _detachSeparatorEvents($lineSeparators) {
+    $lineSeparators.each((i, $lineSeparator) => {
+      eventsEngine.off($lineSeparator, POINTERDOWN_EVENT);
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _createTableResizeFrame(table?: any) {
+    return $('<div>')
+      .addClass(DX_COLUMN_RESIZE_FRAME_CLASS)
+      .appendTo(this._quillContainer);
+  }
+
+  _updateFramesPositions() {
+    each(this._tableResizeFrames, (index, tableResizeFrame) => {
+      this._updateFramePosition(tableResizeFrame.$table, tableResizeFrame.$frame);
+    });
+  }
+
+  _updateFramePosition($table, $frame) {
+    const {
+      height, width, top: targetTop, left: targetLeft,
+    } = getBoundingRect($table.get(0));
+    const { top: containerTop, left: containerLeft } = getBoundingRect(this.quill.root);
+
+    $frame
+      .css({
+        height,
+        width,
+        top: targetTop - containerTop,
+        left: targetLeft - containerLeft,
+      });
+    move($frame, { left: 0, top: 0 });
+  }
+
+  _updateFramesSeparators(direction?: any) {
+    each(this._tableResizeFrames, (index, frame) => {
+      if (direction) {
+        this._updateFrameSeparators(frame, direction);
+      } else {
+        this._updateFrameSeparators(frame, 'vertical');
+        this._updateFrameSeparators(frame, 'horizontal');
+      }
+    });
+  }
+
+  _isDraggable($element) {
+    return $element.hasClass('dx-draggable') && $element.is(':visible');
+  }
+
+  _removeDraggable($currentLineSeparator, lineResizerClass) {
+    if (this._isDraggable($currentLineSeparator)) {
+      // @ts-expect-error
+      const draggable = $($currentLineSeparator).dxDraggable('instance');
+      draggable.dispose();
+      $($currentLineSeparator).addClass(lineResizerClass);
+    }
+  }
+
+  _getDirectionInfo(direction) {
+    if (direction === 'vertical') {
+      return {
+        lineResizerClass: DX_ROW_RESIZER_CLASS,
+        sizeFunction: (x) => getOuterHeight(x),
+        positionCoordinate: 'top',
+        positionStyleProperty: 'height',
+        positionCoordinateName: 'y',
+      };
+    }
+    return {
+      lineResizerClass: DX_COLUMN_RESIZER_CLASS,
+      sizeFunction: (x) => getOuterWidth(x),
+      positionCoordinate: this.editorInstance.option('rtlEnabled') ? 'right' : 'left',
+      positionStyleProperty: 'width',
+      positionCoordinateName: 'x',
+    };
+  }
+
+  _getSize($element, directionInfo) {
+    return directionInfo.sizeFunction($element);
+  }
+
+  _updateFrameSeparators(frame, direction) {
+    const $determinantElements = this._getTableDeterminantElements(frame.$table, direction);
+    const determinantElementsCount = $determinantElements.length;
+    const determinantElementsSeparatorsCount = determinantElementsCount - 1;
+    const directionInfo = this._getDirectionInfo(direction);
+    const lineSeparators = frame.$frame.find(`.${directionInfo.lineResizerClass}`);
+    const styleOptions = {
+      transform: 'none',
+    };
+
+    let currentPosition = 0;
+    for (let i = 0; i <= determinantElementsSeparatorsCount; i++) {
+      currentPosition += this._getSize($determinantElements.eq(i), directionInfo);
+
+      if (!isDefined(lineSeparators[i])) {
+        lineSeparators[i] = $('<div>')
+          .addClass(directionInfo.lineResizerClass)
+          .appendTo(frame.$frame)
+          .get(0);
+      }
+
+      const $currentLineSeparator = $(lineSeparators[i]);
+
+      this._removeDraggable($currentLineSeparator, directionInfo.lineResizerClass);
+
+      styleOptions[directionInfo.positionCoordinate] = currentPosition - DRAGGABLE_ELEMENT_OFFSET;
+      // @ts-expect-error
+      $($currentLineSeparator).css(styleOptions);
+
+      const attachSeparatorData = {
+        lineSeparator: lineSeparators[i],
+        index: i,
+        $determinantElements,
+        frame,
+        direction,
+      };
+      this._attachColumnSeparatorEvents(attachSeparatorData);
+    }
+  }
+
+  _getTableDeterminantElements($table, direction?: any) {
+    if (direction === 'vertical') {
+      return $table.find('th:first-child, td:first-child');
+    }
+    return getColumnElements($table);
+  }
+
+  _attachColumnSeparatorEvents(options) {
+    eventsEngine.on(options.lineSeparator, POINTERDOWN_EVENT, () => {
+      this._createDraggableElement(options);
+    });
+  }
+
+  _dragStartHandler({
+    $determinantElements, index, frame, direction, lineSeparator,
+  }) {
+    const directionInfo = this._getDirectionInfo(direction);
+
+    this._isDragging = true;
+
+    this._fixColumnsWidth(frame.$table);
+    // eslint-disable-next-line radix
+    this._startLineSize = parseInt(this._getSize($($determinantElements[index]), directionInfo));
+    this._startTableWidth = getOuterWidth(frame.$table);
+    // @ts-expect-error
+    // eslint-disable-next-line radix
+    this._startLineSeparatorPosition = parseInt($(lineSeparator).css(directionInfo.positionCoordinate));
+    this._nextLineSize = 0;
+    if ($determinantElements[index + 1]) {
+      // eslint-disable-next-line radix
+      this._nextLineSize = parseInt(this._getSize($($determinantElements[index + 1]), directionInfo));
+    } else if (direction === 'horizontal') {
+      unfixTableWidth(frame.$table, { quill: this.quill });
+    }
+  }
+
+  _shouldRevertOffset(direction) {
+    return direction === 'horizontal' && this.editorInstance.option('rtlEnabled');
+  }
+
+  _isNextColumnWidthEnough(nextColumnNewSize, $nextColumnElement, eventOffset) {
+    if (!this._nextLineSize) {
+      return true;
+    } if (nextColumnNewSize >= this._minColumnWidth) {
+      const isWidthIncreased = this._nextColumnOffsetLimit ? eventOffset < this._nextColumnOffsetLimit : eventOffset < 0;
+      // @ts-expect-error
+      const isWidthLimited = Math.abs(this._getWidthStyleValue($nextColumnElement) - getOuterWidth($nextColumnElement)) > ROUGH_OFFSET;
+
+      return isWidthIncreased || !isWidthLimited;
+    }
+
+    return false;
+  }
+
+  _shouldSetNextColumnWidth(nextColumnNewSize) {
+    return this._nextLineSize && nextColumnNewSize > 0;
+  }
+
+  _horizontalDragHandler({
+    currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame,
+  }) {
+    let nextColumnNewSize = this._nextLineSize && this._nextLineSize - eventOffset;
+    const isCurrentColumnWidthEnough = currentLineNewSize >= this._minColumnWidth;
+    const $lineElements = getLineElements(frame.$table, index);
+    const $nextLineElements = getLineElements(frame.$table, index + 1);
+    const realWidthDiff = getOuterWidth($lineElements.eq(0)) - currentLineNewSize;
+
+    if (isCurrentColumnWidthEnough) {
+      if (this._isNextColumnWidthEnough(nextColumnNewSize, $determinantElements.eq(index + 1), eventOffset)) {
         setLineElementsFormat(this, {
-            elements: $lineElements,
-            property: directionInfo.positionStyleProperty,
-            value: newHeight
+          elements: $lineElements,
+          property: directionInfo.positionStyleProperty,
+          value: currentLineNewSize,
         });
 
-        const rowHeightDiff = getOuterHeight($determinantElements.eq(index)) - currentLineNewSize;
-
-        this._$highlightedElement.css(directionInfo.positionCoordinate, (this._startLineSeparatorPosition + eventOffset + rowHeightDiff) + 'px');
-    }
-
-    _dragMoveHandler(event, { $determinantElements, index, frame, direction }) {
-        const directionInfo = this._getDirectionInfo(direction);
-        let eventOffset = event.offset[directionInfo.positionCoordinateName];
-
-        this.editorInstance._saveValueChangeEvent(event);
-
-        if(this._shouldRevertOffset(direction)) {
-            eventOffset = -eventOffset;
-        }
-        const currentLineNewSize = this._startLineSize + eventOffset;
-
-        if(direction === 'horizontal') {
-            this._horizontalDragHandler({ currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame });
-        } else {
-            this._verticalDragHandler({ currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame });
-        }
-
-        this._updateFramePosition(frame.$table, frame.$frame);
-    }
-
-    _dragEndHandler(options) {
-        this._$highlightedElement?.remove();
-        this._isDragging = undefined;
-        this._nextColumnOffsetLimit = undefined;
-        this._tableLastWidth(options.frame, getOuterWidth(options.frame.$table));
-        this._updateFramesPositions();
-        this._updateFramesSeparators();
-    }
-
-    _isLastColumnResizing({ $determinantElements, index }) {
-        return !isDefined($determinantElements[index + 1]);
-    }
-
-    _getBoundaryConfig(options) {
-        const result = {};
-
-        if(options.direction === 'vertical') {
-            result.boundary = options.frame.$table;
-            result.boundOffset = {
-                bottom: hasWindow() ? -getHeight(getWindow()) : -getOuterHeight(this._quillContainer),
-                top: 0,
-                left: 0,
-                right: 0
-            };
-        } else {
-            if(!this._isLastColumnResizing(options)) {
-                result.boundary = options.frame.$table;
-            } else {
-                const $content = this.editorInstance._getContent();
-                result.boundary = $content;
-
-                result.boundOffset = {
-                    bottom: 0,
-                    top: 0,
-                    left: $content.css('paddingLeft'),
-                    right: $content.css('paddingRight')
-                };
-            }
+        if (this._shouldSetNextColumnWidth(nextColumnNewSize)) {
+          setLineElementsFormat(this, {
+            elements: $nextLineElements,
+            property: directionInfo.positionStyleProperty,
+            value: nextColumnNewSize,
+          });
         }
 
-        return result;
-    }
-
-    _createDraggableElement(options) {
-        const boundaryConfig = this._getBoundaryConfig(options);
-
-        const directionClass = options.direction === 'vertical' ? 'dx-htmleditor-highlighted-row' : 'dx-htmleditor-highlighted-column';
-
-        this._$highlightedElement?.remove();
-        this._$highlightedElement = $('<div>').addClass(`${directionClass}`).insertAfter($(options.lineSeparator));
+        const isTableWidthChanged = Math.abs(this._startTableWidth - getOuterWidth(frame.$table)) < ROUGH_OFFSET;
+        const shouldRevertNewValue = Math.abs(realWidthDiff) > ROUGH_OFFSET || (!this._nextLineSize && isTableWidthChanged);
 
-        const config = {
-            contentTemplate: null,
-            allowMoveByClick: false,
-            dragDirection: options.direction,
-            onDragMove: ({ component, event }) => {
-                this._dragMoveHandler(event, options);
-            },
-            onDragStart: () => {
-                this._dragStartHandler(options);
-            },
-            onDragEnd: () => {
-                this._dragEndHandler(options);
-            }
-        };
-
-        extend(config, boundaryConfig);
-
-        this._currentDraggableElement = this.editorInstance._createComponent(options.lineSeparator, Draggable, config);
-    }
-
-    _fixColumnsWidth($table) {
-        const determinantElements = this._getTableDeterminantElements($table);
-
-        each(determinantElements, (index, element) => {
-            const columnWidth = getOuterWidth(element);
-            const $lineElements = getLineElements($table, index);
-            setLineElementsFormat(this, {
-                elements: $lineElements,
-                property: 'width',
-                value: Math.max(columnWidth, this._minColumnWidth)
-            });
-        });
-    }
-
-    _getColumnElementsSum(columnElements) {
-        const columnsWidths = [];
-        let columnsSum = 0;
-
-        each(columnElements, (index, element) => {
-            const $element = $(element);
-            const columnWidth = this._getWidthStyleValue($element) || getOuterWidth($element);
-
-            columnsWidths[index] = Math.max(columnWidth, this._minColumnWidth);
-            columnsSum += columnsWidths[index];
-        });
-
-        return {
-            columnsWidths,
-            columnsSum
-        };
-    }
+        if (shouldRevertNewValue) {
+          setLineElementsFormat(this, {
+            elements: $lineElements,
+            property: directionInfo.positionStyleProperty,
+            value: getOuterWidth($lineElements.eq(0)),
+          });
 
-    _setColumnsRatioWidth(columnElements, ratio, columnsWidths, $table) {
-        each(columnElements, (index) => {
-            const $lineElements = getLineElements($table, index);
-            let resultWidth;
-            if(ratio > 0) {
-                resultWidth = (this._minColumnWidth + Math.round((columnsWidths[index] - this._minColumnWidth) * ratio));
-            } else {
-                resultWidth = this._minColumnWidth;
-            }
+          nextColumnNewSize += currentLineNewSize - getOuterWidth($lineElements.eq(0));
 
+          if (this._shouldSetNextColumnWidth(nextColumnNewSize)) {
             setLineElementsFormat(this, {
-                elements: $lineElements,
-                property: 'width',
-                value: resultWidth
+              elements: $nextLineElements,
+              property: directionInfo.positionStyleProperty,
+              value: nextColumnNewSize,
             });
-        });
-    }
-
-    _updateColumnsWidth($table, frameIndex) {
-        const determinantElements = this._getTableDeterminantElements($table);
-        let frame = this._tableResizeFrames[frameIndex];
-
-        if(!frame) {
-            this._tableResizeFrames[frameIndex] = {};
+          }
         }
-
-        frame = this._tableResizeFrames[frameIndex];
-        const tableWidth = this._tableLastWidth(frame) || getOuterWidth($table);
-        let ratio;
-
-        const { columnsWidths, columnsSum } = this._getColumnElementsSum(determinantElements);
-
-        const minWidthForColumns = determinantElements.length * this._minColumnWidth;
-
-        if(columnsSum > minWidthForColumns) {
-            ratio = (tableWidth - minWidthForColumns) / (columnsSum - minWidthForColumns);
-        } else {
-            ratio = -1;
-        }
-
-        this._tableLastWidth(frame, ratio > 0 ? tableWidth : minWidthForColumns);
-
-        this._setColumnsRatioWidth(determinantElements, ratio, columnsWidths, $table);
-    }
-
-    _updateTablesColumnsWidth($tables) {
-        each($tables, (index, table) => {
-            this._updateColumnsWidth($(table), index);
-        });
-    }
-
-    option(option, value) {
-        if(option === 'tableResizing') {
-            this.handleOptionChangeValue(value);
-            return;
-        }
-
-        if(option === 'enabled') {
-            this.enabled = value;
-            value ? this._applyResizing(true) : this.clean();
-        } else if(['minColumnWidth', 'minRowHeight'].includes(option)) {
-            this[`_${option}`] = this._minSizeLimit(option, value);
-        }
-    }
-
-    clean() {
-        this._removeResizeFrames(true);
-        this._detachEvents();
-
-        _windowResizeCallbacks.remove(this._resizeHandlerWithContext);
-        clearTimeout(this._windowResizeTimeout);
-        this._resizeHandlerWithContext = undefined;
-        this._isDragging = undefined;
-        this._startTableWidth = undefined;
-
-        clearTimeout(this._attachResizerTimeout);
-    }
+      } else {
+        this._nextColumnOffsetLimit = this._nextColumnOffsetLimit || eventOffset;
+      }
+    }
+
+    this._$highlightedElement.css(directionInfo.positionCoordinate, `${this._startLineSeparatorPosition + eventOffset + realWidthDiff}px`);
+  }
+
+  _verticalDragHandler({
+    currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame,
+  }) {
+    const newHeight = Math.max(currentLineNewSize, this._minRowHeight);
+    const $lineElements = getLineElements(frame.$table, index, 'vertical');
+
+    setLineElementsFormat(this, {
+      elements: $lineElements,
+      property: directionInfo.positionStyleProperty,
+      value: newHeight,
+    });
+
+    const rowHeightDiff = getOuterHeight($determinantElements.eq(index)) - currentLineNewSize;
+
+    this._$highlightedElement.css(directionInfo.positionCoordinate, `${this._startLineSeparatorPosition + eventOffset + rowHeightDiff}px`);
+  }
+
+  _dragMoveHandler(event, {
+    $determinantElements, index, frame, direction,
+  }) {
+    const directionInfo = this._getDirectionInfo(direction);
+    let eventOffset = event.offset[directionInfo.positionCoordinateName];
+
+    this.editorInstance._saveValueChangeEvent(event);
+
+    if (this._shouldRevertOffset(direction)) {
+      eventOffset = -eventOffset;
+    }
+    const currentLineNewSize = this._startLineSize + eventOffset;
+
+    if (direction === 'horizontal') {
+      this._horizontalDragHandler({
+        currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame,
+      });
+    } else {
+      this._verticalDragHandler({
+        currentLineNewSize, directionInfo, eventOffset, $determinantElements, index, frame,
+      });
+    }
+
+    this._updateFramePosition(frame.$table, frame.$frame);
+  }
+
+  _dragEndHandler(options) {
+    this._$highlightedElement?.remove();
+    this._isDragging = undefined;
+    this._nextColumnOffsetLimit = undefined;
+    this._tableLastWidth(options.frame, getOuterWidth(options.frame.$table));
+    this._updateFramesPositions();
+    this._updateFramesSeparators();
+  }
+
+  _isLastColumnResizing({ $determinantElements, index }) {
+    return !isDefined($determinantElements[index + 1]);
+  }
+
+  _getBoundaryConfig(options) {
+    const result: Properties = {};
+
+    if (options.direction === 'vertical') {
+      result.boundary = options.frame.$table;
+      // @ts-expect-error
+      result.boundOffset = {
+        bottom: hasWindow() ? -getHeight(getWindow()) : -getOuterHeight(this._quillContainer),
+        top: 0,
+        left: 0,
+        right: 0,
+      };
+    } else if (!this._isLastColumnResizing(options)) {
+      result.boundary = options.frame.$table;
+    } else {
+      const $content = this.editorInstance._getContent();
+      result.boundary = $content;
+      // @ts-expect-error
+      result.boundOffset = {
+        bottom: 0,
+        top: 0,
+        left: $content.css('paddingLeft'),
+        right: $content.css('paddingRight'),
+      };
+    }
+
+    return result;
+  }
+
+  _createDraggableElement(options) {
+    const boundaryConfig = this._getBoundaryConfig(options);
+
+    const directionClass = options.direction === 'vertical' ? 'dx-htmleditor-highlighted-row' : 'dx-htmleditor-highlighted-column';
+
+    this._$highlightedElement?.remove();
+    this._$highlightedElement = $('<div>').addClass(`${directionClass}`).insertAfter($(options.lineSeparator));
+
+    const config = {
+      contentTemplate: null,
+      allowMoveByClick: false,
+      dragDirection: options.direction,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onDragMove: ({ component, event }) => {
+        this._dragMoveHandler(event, options);
+      },
+      onDragStart: () => {
+        this._dragStartHandler(options);
+      },
+      onDragEnd: () => {
+        this._dragEndHandler(options);
+      },
+    };
+
+    extend(config, boundaryConfig);
+
+    this._currentDraggableElement = this.editorInstance._createComponent(options.lineSeparator, Draggable, config);
+  }
+
+  _fixColumnsWidth($table) {
+    const determinantElements = this._getTableDeterminantElements($table);
+
+    each(determinantElements, (index, element) => {
+      const columnWidth = getOuterWidth(element);
+      const $lineElements = getLineElements($table, index);
+      setLineElementsFormat(this, {
+        elements: $lineElements,
+        property: 'width',
+        value: Math.max(columnWidth, this._minColumnWidth),
+      });
+    });
+  }
+
+  _getColumnElementsSum(columnElements) {
+    const columnsWidths = [];
+    let columnsSum = 0;
+
+    each(columnElements, (index, element) => {
+      const $element = $(element);
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      const columnWidth = this._getWidthStyleValue($element) || getOuterWidth($element);
+
+      columnsWidths[index] = Math.max(columnWidth, this._minColumnWidth);
+      columnsSum += columnsWidths[index];
+    });
+
+    return {
+      columnsWidths,
+      columnsSum,
+    };
+  }
+
+  _setColumnsRatioWidth(columnElements, ratio, columnsWidths, $table) {
+    each(columnElements, (index) => {
+      const $lineElements = getLineElements($table, index);
+      let resultWidth;
+      if (ratio > 0) {
+        resultWidth = this._minColumnWidth + Math.round((columnsWidths[index] - this._minColumnWidth) * ratio);
+      } else {
+        resultWidth = this._minColumnWidth;
+      }
+
+      setLineElementsFormat(this, {
+        elements: $lineElements,
+        property: 'width',
+        value: resultWidth,
+      });
+    });
+  }
+
+  _updateColumnsWidth($table, frameIndex) {
+    const determinantElements = this._getTableDeterminantElements($table);
+    let frame = this._tableResizeFrames[frameIndex];
+
+    if (!frame) {
+      this._tableResizeFrames[frameIndex] = {};
+    }
+
+    frame = this._tableResizeFrames[frameIndex];
+    const tableWidth = this._tableLastWidth(frame) || getOuterWidth($table);
+    let ratio;
+
+    const { columnsWidths, columnsSum } = this._getColumnElementsSum(determinantElements);
+
+    const minWidthForColumns = determinantElements.length * this._minColumnWidth;
+
+    if (columnsSum > minWidthForColumns) {
+      ratio = (tableWidth - minWidthForColumns) / (columnsSum - minWidthForColumns);
+    } else {
+      ratio = -1;
+    }
+
+    this._tableLastWidth(frame, ratio > 0 ? tableWidth : minWidthForColumns);
+
+    this._setColumnsRatioWidth(determinantElements, ratio, columnsWidths, $table);
+  }
+
+  _updateTablesColumnsWidth($tables) {
+    each($tables, (index, table) => {
+      this._updateColumnsWidth($(table), index);
+    });
+  }
+
+  option(option, value) {
+    if (option === 'tableResizing') {
+      // @ts-expect-error
+      this.handleOptionChangeValue(value);
+      return;
+    }
+
+    if (option === 'enabled') {
+      this.enabled = value;
+      value ? this._applyResizing(true) : this.clean();
+    } else if (['minColumnWidth', 'minRowHeight'].includes(option)) {
+      this[`_${option}`] = this._minSizeLimit(option, value);
+    }
+  }
+
+  clean() {
+    this._removeResizeFrames(true);
+    this._detachEvents();
+
+    _windowResizeCallbacks.remove(this._resizeHandlerWithContext);
+    clearTimeout(this._windowResizeTimeout);
+    this._resizeHandlerWithContext = undefined;
+    this._isDragging = undefined;
+    this._startTableWidth = undefined;
+
+    clearTimeout(this._attachResizerTimeout);
+  }
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
index 6d7ccd654d6b..c9886e82c697 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
@@ -1,612 +1,640 @@
+import '@js/ui/select_box';
+import '@ts/ui/color_box/m_color_view';
+import '@js/ui/number_box';
+
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { camelize, titleize } from '@js/core/utils/inflector';
+import { each } from '@js/core/utils/iterator';
+import {
+  isDefined, isEmptyObject, isObject, isString,
+} from '@js/core/utils/type';
+import eventsEngine from '@js/events/core/events_engine';
+import { addNamespace } from '@js/events/utils/index';
+import localizationMessage from '@js/localization/message';
+import type { Item } from '@js/ui/toolbar';
+import Toolbar from '@js/ui/toolbar';
+import errors from '@js/ui/widget/ui.errors';
 import Quill from 'devextreme-quill';
 
-import $ from '../../../core/renderer';
-
-import BaseModule from './base';
-
-import Toolbar from '../../toolbar';
-import '../../select_box';
-import '../../../__internal/ui/color_box/m_color_view';
-import '../../number_box';
-import errors from '../../widget/ui.errors';
-
-import WidgetCollector from './widget_collector';
-import { each } from '../../../core/utils/iterator';
-import { isString, isObject, isDefined, isEmptyObject } from '../../../core/utils/type';
-import { extend } from '../../../core/utils/extend';
-import localizationMessage from '../../../localization/message';
-import { titleize, camelize } from '../../../core/utils/inflector';
-
-import eventsEngine from '../../../events/core/events_engine';
-import { addNamespace } from '../../../events/utils/index';
-
-import { getTableFormats, TABLE_OPERATIONS } from '../utils/table_helper';
-import { getFormatHandlers, getDefaultClickHandler, ICON_MAP, applyFormat } from '../utils/toolbar_helper';
-
+import { getTableFormats, TABLE_OPERATIONS } from '../utils/m_table_helper';
+import {
+  applyFormat, getDefaultClickHandler, getFormatHandlers, ICON_MAP,
+} from '../utils/m_toolbar_helper';
+import BaseModule from './m_base';
+import WidgetCollector from './m_widget_collector';
+// eslint-disable-next-line import/no-mutable-exports
 let ToolbarModule = BaseModule;
 
-if(Quill) {
-    const TOOLBAR_WRAPPER_CLASS = 'dx-htmleditor-toolbar-wrapper';
-    const TOOLBAR_CLASS = 'dx-htmleditor-toolbar';
-    const TOOLBAR_FORMAT_WIDGET_CLASS = 'dx-htmleditor-toolbar-format';
-    const TOOLBAR_SEPARATOR_CLASS = 'dx-htmleditor-toolbar-separator';
-    const TOOLBAR_MENU_SEPARATOR_CLASS = 'dx-htmleditor-toolbar-menu-separator';
-    const ACTIVE_FORMAT_CLASS = 'dx-format-active';
-    const SELECTED_STATE_CLASS = 'dx-state-selected';
-
-    const ICON_CLASS = 'dx-icon';
-
-    const SELECTION_CHANGE_EVENT = 'selection-change';
-
-    const USER_ACTION = 'user';
-    const SILENT_ACTION = 'silent';
-
-    const FORMAT_HOTKEYS = {
-        66: 'bold',
-        73: 'italic',
-        85: 'underline'
-    };
-
-    const KEY_CODES = {
-        b: 66,
-        i: 73,
-        u: 85
-    };
-
-    const localize = (name) => {
-        return localizationMessage.format(`dxHtmlEditor-${camelize(name)}`);
-    };
-
-    const localizeValue = (value, name) => {
-        if(name === 'header') {
-            const isHeaderValue = isDefined(value) && value !== false;
-            return isHeaderValue ? `${localize('heading')} ${value}` : localize('normalText');
-        }
-
-        return localize(value) || value;
-    };
-
-    ToolbarModule = class ToolbarModule extends BaseModule {
-        constructor(quill, options) {
-            super(quill, options);
-
-            this._toolbarWidgets = new WidgetCollector();
-            this._formatHandlers = getFormatHandlers(this);
-            this._tableFormats = getTableFormats(quill);
-
-            if(isDefined(options.items)) {
-                this._addCallbacks();
-                this._renderToolbar();
-
-                // NOTE: Fixes the synchronization of the states of items placed in a menu that is rendered postponed.
-                // See bug t1117604: menu items' state could be updated after selection change before the menu is rendered.
-                // We cannot just modify items' state using a toolbar api because of:
-                // - runtime adding in-line styles for color formats' icon;
-                // - "dx-format-active" class toggling (using elementAttr will trigger toolbar item rerendering);
-                // - changing the value of non-button items.
-                // Possible better solutions:
-                // - rework or extend a toolbar menu api or life cycle;
-                // - support a separate cache for toolbar items' state and apply it on each item's initialization.
-                const toolbarMenu = this.toolbarInstance._layoutStrategy._menu;
-                if(toolbarMenu) {
-                    const _renderPopup = toolbarMenu._renderPopup;
-                    toolbarMenu._renderPopup = (...args) => {
-                        _renderPopup.apply(toolbarMenu, ...args);
-                        toolbarMenu._popup.on('showing', () => { this._updateToolbar(true); });
-                    };
-                }
-
-                this.quill.on('editor-change', (eventName, newValue, oldValue, eventSource) => {
-                    const isSilentMode = eventSource === SILENT_ACTION && isEmptyObject(this.quill.getFormat());
-
-                    if(!isSilentMode) {
-                        const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
-
-                        this._updateToolbar(isSelectionChanged);
-                    }
-                });
-            }
-        }
-
-        _addCallbacks() {
-            this.addCleanCallback(this.clean.bind(this));
-            this.editorInstance.addContentInitializedCallback(this.updateHistoryWidgets.bind(this));
-        }
-
-        _updateToolbar(isSelectionChanged) {
-            this.updateFormatWidgets(isSelectionChanged);
-            this.updateHistoryWidgets();
-            this.updateTableWidgets();
-        }
-
-        _updateFormatWidget(name, isApplied, formats) {
-            const widget = this._toolbarWidgets.getByName(name);
-
-            if(!widget) {
-                return;
-            }
-
-            if(isApplied) {
-                this._markActiveFormatWidget(name, widget, formats);
-            } else {
-                this._resetFormatWidget(name, widget);
-                if(Object.prototype.hasOwnProperty.call(name)) {
-                    delete formats[name];
-                }
-            }
-
-            this._toggleClearFormatting(isApplied || !isEmptyObject(formats));
-        }
-
-        _renderToolbar() {
-            const container = this.options.container || this._getContainer();
-
-            this._$toolbar = $('<div>')
-                .addClass(TOOLBAR_CLASS)
-                .appendTo(container);
-            this._$toolbarContainer = $(container).addClass(TOOLBAR_WRAPPER_CLASS);
-
-            eventsEngine.on(this._$toolbarContainer, addNamespace('mousedown', this.editorInstance.NAME), (e) => {
-                e.target.focus();
-                e.preventDefault();
-            });
-
-            this._subscribeFormatHotKeys();
-
-            this.toolbarInstance = this.editorInstance._createComponent(this._$toolbar, Toolbar, this.toolbarConfig);
-
-            this.editorInstance.on('optionChanged', ({ name }) => {
-                if(name === 'readOnly' || name === 'disabled') {
-                    this.toolbarInstance.option('disabled', this.isInteractionDisabled);
-                }
-            });
-        }
-
-        get toolbarConfig() {
-            return {
-                dataSource: this._prepareToolbarItems(),
-                disabled: this.isInteractionDisabled,
-                menuContainer: this._$toolbarContainer,
-                multiline: this.isMultilineMode()
-            };
-        }
-
-        get isInteractionDisabled() {
-            return this.editorInstance.option('readOnly') || this.editorInstance.option('disabled');
-        }
-
-        isMultilineMode() {
-            return this.options.multiline ?? true;
-        }
-
-        clean() {
-            this._toolbarWidgets.clear();
-
-            if(this._$toolbarContainer) {
-                this._$toolbarContainer
-                    .empty()
-                    .removeClass(TOOLBAR_WRAPPER_CLASS);
-            }
-        }
-
-        repaint() {
-            this.toolbarInstance && this.toolbarInstance.repaint();
-        }
-
-        _getContainer() {
-            const $container = $('<div>');
-
-            this.editorInstance.$element().prepend($container);
-
-            return $container;
-        }
-
-        _detectRenamedOptions(item) {
-            const optionsInfo = [{
-                newName: 'name',
-                oldName: 'formatName'
-            }, {
-                newName: 'acceptedValues',
-                oldName: 'formatValues'
-            }];
-
-            if(isObject(item)) {
-                each(optionsInfo, (index, optionName) => {
-                    if(Object.prototype.hasOwnProperty.call(item, optionName.oldName)) {
-                        errors.log('W1016', optionName.oldName, optionName.newName);
-                    }
-                });
-            }
-        }
-
-        _subscribeFormatHotKeys() {
-            this.quill.keyboard.addBinding({
-                which: KEY_CODES.b,
-                shortKey: true,
-            }, this._handleFormatHotKey.bind(this));
-
-            this.quill.keyboard.addBinding({
-                which: KEY_CODES.i,
-                shortKey: true,
-            }, this._handleFormatHotKey.bind(this));
-
-            this.quill.keyboard.addBinding({
-                which: KEY_CODES.u,
-                shortKey: true,
-            }, this._handleFormatHotKey.bind(this));
-        }
-
-        _handleFormatHotKey(range, context, { which }) {
-            const formatName = FORMAT_HOTKEYS[which];
-
-            this._updateButtonState(formatName);
-        }
-
-        _updateButtonState(formatName) {
-            const formatWidget = this._toolbarWidgets.getByName(formatName);
-            const currentFormat = this.quill.getFormat();
-            const formatValue = currentFormat[formatName];
-
-            if(formatValue) {
-                this._markActiveFormatWidget(formatName, formatWidget, currentFormat);
-            } else {
-                this._resetFormatWidget(formatName, formatWidget);
-            }
-        }
-
-        _prepareToolbarItems() {
-            const resultItems = [];
-
-            each(this.options.items, (index, item) => {
-                let newItem;
-                this._detectRenamedOptions(item);
-                if(isObject(item)) {
-                    newItem = this._handleObjectItem(item);
-                } else if(isString(item)) {
-                    const buttonItemConfig = this._prepareButtonItemConfig(item);
-                    newItem = this._getToolbarItem(buttonItemConfig);
-                }
-                if(newItem) {
-                    resultItems.push(newItem);
-                }
-            });
-
-            return resultItems;
-        }
-
-        _handleObjectItem(item) {
-            if(item.name && item.acceptedValues && this._isAcceptableItem(item.widget, 'dxSelectBox')) {
-                const selectItemConfig = this._prepareSelectItemConfig(item);
+if (Quill) {
+  const TOOLBAR_WRAPPER_CLASS = 'dx-htmleditor-toolbar-wrapper';
+  const TOOLBAR_CLASS = 'dx-htmleditor-toolbar';
+  const TOOLBAR_FORMAT_WIDGET_CLASS = 'dx-htmleditor-toolbar-format';
+  const TOOLBAR_SEPARATOR_CLASS = 'dx-htmleditor-toolbar-separator';
+  const TOOLBAR_MENU_SEPARATOR_CLASS = 'dx-htmleditor-toolbar-menu-separator';
+  const ACTIVE_FORMAT_CLASS = 'dx-format-active';
+  const SELECTED_STATE_CLASS = 'dx-state-selected';
 
-                return this._getToolbarItem(selectItemConfig);
-            } else if(item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
-                const defaultButtonItemConfig = this._prepareButtonItemConfig(item.name);
-                const buttonItemConfig = extend(true, defaultButtonItemConfig, item);
+  const ICON_CLASS = 'dx-icon';
 
-                return this._getToolbarItem(buttonItemConfig);
-            } else {
-                return this._getToolbarItem(item);
-            }
-        }
-
-        _isAcceptableItem(widget, acceptableWidgetName) {
-            return !widget || widget === acceptableWidgetName;
-        }
-
-        _prepareButtonItemConfig(name) {
-            const iconName = ICON_MAP[name] ?? name;
-            const buttonText = titleize(name);
-
-            return {
-                widget: 'dxButton',
-                name,
-                options: {
-                    hint: localize(buttonText),
-                    text: localize(buttonText),
-                    icon: iconName.toLowerCase(),
-                    onClick: this._formatHandlers[name] || getDefaultClickHandler(this, name),
-                    stylingMode: 'text'
-                },
-                showText: 'inMenu'
-            };
-        }
-
-        _prepareSelectItemConfig(item) {
-            const { name, acceptedValues } = item;
-
-            return extend(true, {
-                widget: 'dxSelectBox',
-                name,
-                options: {
-                    stylingMode: 'filled',
-                    dataSource: acceptedValues,
-                    displayExpr: (value) => {
-                        return localizeValue(value, name);
-                    },
-                    placeholder: localize(name),
-                    onValueChanged: (e) => {
-                        if(!this._isReset) {
-                            this._hideAdaptiveMenu();
-                            applyFormat(this, [name, e.value, USER_ACTION], e.event);
-                            this._setValueSilent(e.component, e.value);
-                        }
-                    }
-                }
-            }, item);
-        }
-
-        _hideAdaptiveMenu() {
-            if(this.toolbarInstance.option('overflowMenuVisible')) {
-                this.toolbarInstance.option('overflowMenuVisible', false);
-            }
-        }
-
-        _getToolbarItem(item) {
-            const baseItem = {
-                options: {
-                    onInitialized: (e) => {
-                        if(item.name) {
-                            e.component.$element().addClass(TOOLBAR_FORMAT_WIDGET_CLASS);
-                            e.component.$element().toggleClass(`dx-${item.name.toLowerCase()}-format`, !!item.name);
-                            this._toolbarWidgets.add(item.name, e.component);
-                        }
-                    },
-                    onDisposing: () => {
-                        this._toolbarWidgets.remove(item.name);
-                    }
-                }
-            };
-
-            return extend(true, { location: 'before', locateInMenu: 'auto' }, this._getDefaultConfig(item.name), item, baseItem);
-        }
-
-        _getDefaultItemsConfig() {
-            return {
-                clear: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                undo: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                redo: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                // ToDo: move it to the table module
-                insertRowAbove: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                insertRowBelow: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                insertHeaderRow: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                insertColumnLeft: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                insertColumnRight: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                deleteRow: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                deleteColumn: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                deleteTable: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                cellProperties: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                tableProperties: {
-                    options: {
-                        disabled: true
-                    }
-                },
-                separator: {
-                    template: (data, index, element) => {
-                        $(element).addClass(TOOLBAR_SEPARATOR_CLASS);
-                    },
-                    menuItemTemplate: (data, index, element) => {
-                        $(element).addClass(TOOLBAR_MENU_SEPARATOR_CLASS);
-                    }
-                }
-            };
-        }
+  const SELECTION_CHANGE_EVENT = 'selection-change';
 
-        _getDefaultConfig(name) {
-            return this._getDefaultItemsConfig()[name];
-        }
+  const USER_ACTION = 'user';
+  const SILENT_ACTION = 'silent';
 
-        updateHistoryWidgets() {
-            const historyModule = this.quill.history;
+  const FORMAT_HOTKEYS = {
+    66: 'bold',
+    73: 'italic',
+    85: 'underline',
+  };
 
-            if(!historyModule) {
-                return;
-            }
+  const KEY_CODES = {
+    b: 66,
+    i: 73,
+    u: 85,
+  };
+
+  const localize = (name) => localizationMessage.format(`dxHtmlEditor-${camelize(name)}`);
+
+  const localizeValue = (value, name) => {
+    if (name === 'header') {
+      const isHeaderValue = isDefined(value) && value !== false;
+      return isHeaderValue ? `${localize('heading')} ${value}` : localize('normalText');
+    }
+
+    return localize(value) || value;
+  };
+  // @ts-expect-error
+  ToolbarModule = class ToolbarModule extends BaseModule {
+    quill: any;
 
-            const {
-                undo: undoOps,
-                redo: redoOps
-            } = historyModule.stack;
+    options: any;
+
+    editorInstance: any;
 
-            this._updateManipulationWidget(this._toolbarWidgets.getByName('undo'), Boolean(undoOps.length));
-            this._updateManipulationWidget(this._toolbarWidgets.getByName('redo'), Boolean(redoOps.length));
-        }
+    _toolbarWidgets: WidgetCollector;
+
+    toolbarInstance!: Toolbar;
 
-        updateTableWidgets() {
-            const table = this.quill.getModule('table');
-            if(!table) {
-                return;
-            }
+    _$toolbar?: dxElementWrapper;
 
-            const selection = this.quill.getSelection();
-            const formats = selection && this.quill.getFormat(selection) || {};
-            const isTableOperationsEnabled = this._tableFormats.some(format => Boolean(formats[format]));
-            TABLE_OPERATIONS.forEach((operationName) => {
-                const isInsertTable = operationName === 'insertTable';
-                const widget = this._toolbarWidgets.getByName(operationName);
+    _$toolbarContainer?: dxElementWrapper;
 
-                this._updateManipulationWidget(widget, isInsertTable ? !isTableOperationsEnabled : isTableOperationsEnabled);
-            });
-        }
+    _formatHandlers: any;
 
-        _updateManipulationWidget(widget, isOperationEnabled) {
-            if(!widget) {
-                return;
-            }
+    _tableFormats: any;
 
-            widget.option('disabled', !isOperationEnabled);
-        }
+    _isReset?: boolean;
 
-        updateFormatWidgets(isResetRequired) {
-            const selection = this.quill.getSelection();
-            if(!selection) {
-                return;
-            }
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
 
-            const formats = this.quill.getFormat(selection);
-            const hasFormats = !isEmptyObject(formats);
+      this._toolbarWidgets = new WidgetCollector();
+      this._formatHandlers = getFormatHandlers(this);
+      this._tableFormats = getTableFormats(quill);
+
+      if (isDefined(options.items)) {
+        this._addCallbacks();
+        this._renderToolbar();
+
+        // NOTE: Fixes the synchronization of the states of items placed in a menu that is rendered postponed.
+        // See bug t1117604: menu items' state could be updated after selection change before the menu is rendered.
+        // We cannot just modify items' state using a toolbar api because of:
+        // - runtime adding in-line styles for color formats' icon;
+        // - "dx-format-active" class toggling (using elementAttr will trigger toolbar item rerendering);
+        // - changing the value of non-button items.
+        // Possible better solutions:
+        // - rework or extend a toolbar menu api or life cycle;
+        // - support a separate cache for toolbar items' state and apply it on each item's initialization.
+        // @ts-expect-error
+        const toolbarMenu = this.toolbarInstance._layoutStrategy._menu;
+        if (toolbarMenu) {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          const { _renderPopup } = toolbarMenu;
+          toolbarMenu._renderPopup = (...args) => {
+            _renderPopup.apply(toolbarMenu, ...args);
+            toolbarMenu._popup.on('showing', () => { this._updateToolbar(true); });
+          };
+        }
+
+        this.quill.on('editor-change', (eventName, newValue, oldValue, eventSource) => {
+          const isSilentMode = eventSource === SILENT_ACTION && isEmptyObject(this.quill.getFormat());
+
+          if (!isSilentMode) {
+            const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
 
-            if(!hasFormats || isResetRequired) {
-                this._resetFormatWidgets();
+            this._updateToolbar(isSelectionChanged);
+          }
+        });
+      }
+    }
+
+    _addCallbacks() {
+      // @ts-expect-error
+      this.addCleanCallback(this.clean.bind(this));
+      this.editorInstance.addContentInitializedCallback(this.updateHistoryWidgets.bind(this));
+    }
+
+    _updateToolbar(isSelectionChanged) {
+      this.updateFormatWidgets(isSelectionChanged);
+      this.updateHistoryWidgets();
+      this.updateTableWidgets();
+    }
+
+    _updateFormatWidget(name, isApplied, formats) {
+      const widget = this._toolbarWidgets.getByName(name);
+
+      if (!widget) {
+        return;
+      }
+
+      if (isApplied) {
+        this._markActiveFormatWidget(name, widget, formats);
+      } else {
+        this._resetFormatWidget(name, widget);
+        // @ts-expect-error
+        if (Object.prototype.hasOwnProperty.call(name)) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete formats[name];
+        }
+      }
+
+      this._toggleClearFormatting(isApplied || !isEmptyObject(formats));
+    }
+
+    _renderToolbar() {
+      const container = this.options.container || this._getContainer();
+
+      this._$toolbar = $('<div>')
+        .addClass(TOOLBAR_CLASS)
+        .appendTo(container);
+      this._$toolbarContainer = $(container).addClass(TOOLBAR_WRAPPER_CLASS);
+
+      eventsEngine.on(this._$toolbarContainer, addNamespace('mousedown', this.editorInstance.NAME), (e) => {
+        e.target.focus();
+        e.preventDefault();
+      });
+
+      this._subscribeFormatHotKeys();
+
+      this.toolbarInstance = this.editorInstance._createComponent(this._$toolbar, Toolbar, this.toolbarConfig);
+
+      this.editorInstance.on('optionChanged', ({ name }) => {
+        if (name === 'readOnly' || name === 'disabled') {
+          this.toolbarInstance.option('disabled', this.isInteractionDisabled);
+        }
+      });
+    }
+
+    get toolbarConfig() {
+      return {
+        dataSource: this._prepareToolbarItems(),
+        disabled: this.isInteractionDisabled,
+        menuContainer: this._$toolbarContainer,
+        multiline: this.isMultilineMode(),
+      };
+    }
+
+    get isInteractionDisabled() {
+      return this.editorInstance.option('readOnly') || this.editorInstance.option('disabled');
+    }
+
+    isMultilineMode() {
+      return this.options.multiline ?? true;
+    }
+
+    clean() {
+      this._toolbarWidgets.clear();
+
+      if (this._$toolbarContainer) {
+        this._$toolbarContainer
+          .empty()
+          .removeClass(TOOLBAR_WRAPPER_CLASS);
+      }
+    }
+
+    repaint() {
+      this.toolbarInstance && this.toolbarInstance.repaint();
+    }
+
+    _getContainer() {
+      const $container = $('<div>');
+
+      this.editorInstance.$element().prepend($container);
+
+      return $container;
+    }
+
+    _detectRenamedOptions(item) {
+      const optionsInfo = [{
+        newName: 'name',
+        oldName: 'formatName',
+      }, {
+        newName: 'acceptedValues',
+        oldName: 'formatValues',
+      }];
+
+      if (isObject(item)) {
+        each(optionsInfo, (index, optionName) => {
+          if (Object.prototype.hasOwnProperty.call(item, optionName.oldName)) {
+            errors.log('W1016', optionName.oldName, optionName.newName);
+          }
+        });
+      }
+    }
+
+    _subscribeFormatHotKeys() {
+      this.quill.keyboard.addBinding({
+        which: KEY_CODES.b,
+        shortKey: true,
+      }, this._handleFormatHotKey.bind(this));
+
+      this.quill.keyboard.addBinding({
+        which: KEY_CODES.i,
+        shortKey: true,
+      }, this._handleFormatHotKey.bind(this));
+
+      this.quill.keyboard.addBinding({
+        which: KEY_CODES.u,
+        shortKey: true,
+      }, this._handleFormatHotKey.bind(this));
+    }
+
+    _handleFormatHotKey(range, context, { which }) {
+      const formatName = FORMAT_HOTKEYS[which];
+
+      this._updateButtonState(formatName);
+    }
+
+    _updateButtonState(formatName) {
+      const formatWidget = this._toolbarWidgets.getByName(formatName);
+      const currentFormat = this.quill.getFormat();
+      const formatValue = currentFormat[formatName];
+
+      if (formatValue) {
+        this._markActiveFormatWidget(formatName, formatWidget, currentFormat);
+      } else {
+        this._resetFormatWidget(formatName, formatWidget);
+      }
+    }
+
+    _prepareToolbarItems() {
+      const resultItems: Item[] = [];
+
+      each(this.options.items, (index, item) => {
+        let newItem;
+        this._detectRenamedOptions(item);
+        if (isObject(item)) {
+          newItem = this._handleObjectItem(item);
+        } else if (isString(item)) {
+          const buttonItemConfig = this._prepareButtonItemConfig(item);
+          newItem = this._getToolbarItem(buttonItemConfig);
+        }
+        if (newItem) {
+          resultItems.push(newItem);
+        }
+      });
+
+      return resultItems;
+    }
+
+    _handleObjectItem(item) {
+      if (item.name && item.acceptedValues && this._isAcceptableItem(item.widget, 'dxSelectBox')) {
+        const selectItemConfig = this._prepareSelectItemConfig(item);
+
+        return this._getToolbarItem(selectItemConfig);
+      } if (item.name && this._isAcceptableItem(item.widget, 'dxButton')) {
+        const defaultButtonItemConfig = this._prepareButtonItemConfig(item.name);
+        const buttonItemConfig = extend(true, defaultButtonItemConfig, item);
+
+        return this._getToolbarItem(buttonItemConfig);
+      }
+      return this._getToolbarItem(item);
+    }
+
+    _isAcceptableItem(widget, acceptableWidgetName) {
+      return !widget || widget === acceptableWidgetName;
+    }
+
+    _prepareButtonItemConfig(name) {
+      const iconName = ICON_MAP[name] ?? name;
+      const buttonText = titleize(name);
+
+      return {
+        widget: 'dxButton',
+        name,
+        options: {
+          hint: localize(buttonText),
+          text: localize(buttonText),
+          icon: iconName.toLowerCase(),
+          onClick: this._formatHandlers[name] || getDefaultClickHandler(this, name),
+          stylingMode: 'text',
+        },
+        showText: 'inMenu',
+      };
+    }
+
+    _prepareSelectItemConfig(item) {
+      const { name, acceptedValues } = item;
+
+      return extend(true, {
+        widget: 'dxSelectBox',
+        name,
+        options: {
+          stylingMode: 'filled',
+          dataSource: acceptedValues,
+          displayExpr: (value) => localizeValue(value, name),
+          placeholder: localize(name),
+          onValueChanged: (e) => {
+            if (!this._isReset) {
+              this._hideAdaptiveMenu();
+              applyFormat(this, [name, e.value, USER_ACTION], e.event);
+              this._setValueSilent(e.component, e.value);
             }
-
-            for(const formatName in formats) {
-                const widgetName = this._getFormatWidgetName(formatName, formats);
-                const formatWidget = this._toolbarWidgets.getByName(widgetName) || this._toolbarWidgets.getByName(formatName);
-
-                if(!formatWidget) {
-                    continue;
-                }
-
-                this._markActiveFormatWidget(formatName, formatWidget, formats);
-            }
-
-            this._toggleClearFormatting(hasFormats || selection.length > 1);
-        }
-
-        _markActiveFormatWidget(name, widget, formats) {
-            if(this._isColorFormat(name)) {
-                this._updateColorWidget(name, formats[name]);
+          },
+        },
+      }, item);
+    }
+
+    _hideAdaptiveMenu() {
+      if (this.toolbarInstance.option('overflowMenuVisible')) {
+        this.toolbarInstance.option('overflowMenuVisible', false);
+      }
+    }
+
+    _getToolbarItem(item) {
+      const baseItem = {
+        options: {
+          onInitialized: (e) => {
+            if (item.name) {
+              e.component.$element().addClass(TOOLBAR_FORMAT_WIDGET_CLASS);
+              e.component.$element().toggleClass(`dx-${item.name.toLowerCase()}-format`, !!item.name);
+              this._toolbarWidgets.add(item.name, e.component);
             }
-
-            if('value' in widget.option()) {
-                this._setValueSilent(widget, formats[name]);
-            } else {
-                widget.$element().addClass(ACTIVE_FORMAT_CLASS);
-                widget.$element().addClass(SELECTED_STATE_CLASS);
-            }
-        }
-
-        _toggleClearFormatting(hasFormats) {
-            const clearWidget = this._toolbarWidgets.getByName('clear');
-            if(clearWidget) {
-                clearWidget.option('disabled', !hasFormats);
-            }
-        }
-
-        _isColorFormat(name) {
-            return name === 'color' || name === 'background';
-        }
-
-        _updateColorWidget(name, color) {
-            const formatWidget = this._toolbarWidgets.getByName(name);
-            if(!formatWidget) {
-                return;
-            }
-
-            formatWidget
-                .$element()
-                .find(`.${ICON_CLASS}`)
-                .css('borderBottomColor', color || 'transparent');
-        }
-
-        _getFormatWidgetName(name, formats) {
-            let widgetName;
-            switch(name) {
-                case 'align':
-                    widgetName = name + titleize(formats[name]);
-                    break;
-                case 'list':
-                    widgetName = formats[name] + titleize(name);
-                    break;
-                case 'code-block':
-                    widgetName = 'codeBlock';
-                    break;
-                case 'script':
-                    widgetName = formats[name] + name;
-                    break;
-                case 'imageSrc':
-                    widgetName = 'image';
-                    break;
-                default:
-                    widgetName = name;
-            }
-
-            return widgetName;
-        }
-
-        _setValueSilent(widget, value) {
-            this._isReset = true;
-            widget.option('value', value);
-            this._isReset = false;
-        }
-
-        _resetFormatWidgets() {
-            this._toolbarWidgets.each((name, widget) => {
-                this._resetFormatWidget(name, widget);
-            });
-        }
-
-        _resetFormatWidget(name, widget) {
-            widget.$element().removeClass(ACTIVE_FORMAT_CLASS);
-            widget.$element().removeClass(SELECTED_STATE_CLASS);
-
-            if(this._isColorFormat(name)) {
-                this._updateColorWidget(name);
-            }
-            if(name === 'clear') {
-                widget.option('disabled', true);
-            }
-            if(widget.NAME === 'dxSelectBox') {
-                this._setValueSilent(widget, null);
-            }
-        }
-
-        addClickHandler(name, handler) {
-            this._formatHandlers[name] = handler;
-            const formatWidget = this._toolbarWidgets.getByName(name);
-            if(formatWidget && formatWidget.NAME === 'dxButton') {
-                formatWidget.option('onClick', handler);
-            }
-        }
-    };
+          },
+          onDisposing: () => {
+            this._toolbarWidgets.remove(item.name);
+          },
+        },
+      };
+
+      return extend(true, { location: 'before', locateInMenu: 'auto' }, this._getDefaultConfig(item.name), item, baseItem);
+    }
+
+    _getDefaultItemsConfig() {
+      return {
+        clear: {
+          options: {
+            disabled: true,
+          },
+        },
+        undo: {
+          options: {
+            disabled: true,
+          },
+        },
+        redo: {
+          options: {
+            disabled: true,
+          },
+        },
+        // ToDo: move it to the table module
+        insertRowAbove: {
+          options: {
+            disabled: true,
+          },
+        },
+        insertRowBelow: {
+          options: {
+            disabled: true,
+          },
+        },
+        insertHeaderRow: {
+          options: {
+            disabled: true,
+          },
+        },
+        insertColumnLeft: {
+          options: {
+            disabled: true,
+          },
+        },
+        insertColumnRight: {
+          options: {
+            disabled: true,
+          },
+        },
+        deleteRow: {
+          options: {
+            disabled: true,
+          },
+        },
+        deleteColumn: {
+          options: {
+            disabled: true,
+          },
+        },
+        deleteTable: {
+          options: {
+            disabled: true,
+          },
+        },
+        cellProperties: {
+          options: {
+            disabled: true,
+          },
+        },
+        tableProperties: {
+          options: {
+            disabled: true,
+          },
+        },
+        separator: {
+          template: (data, index, element) => {
+            $(element).addClass(TOOLBAR_SEPARATOR_CLASS);
+          },
+          menuItemTemplate: (data, index, element) => {
+            $(element).addClass(TOOLBAR_MENU_SEPARATOR_CLASS);
+          },
+        },
+      };
+    }
+
+    _getDefaultConfig(name) {
+      return this._getDefaultItemsConfig()[name];
+    }
+
+    updateHistoryWidgets() {
+      const historyModule = this.quill.history;
+
+      if (!historyModule) {
+        return;
+      }
+
+      const {
+        undo: undoOps,
+        redo: redoOps,
+      } = historyModule.stack;
+
+      this._updateManipulationWidget(this._toolbarWidgets.getByName('undo'), Boolean(undoOps.length));
+      this._updateManipulationWidget(this._toolbarWidgets.getByName('redo'), Boolean(redoOps.length));
+    }
+
+    updateTableWidgets() {
+      const table = this.quill.getModule('table');
+      if (!table) {
+        return;
+      }
+
+      const selection = this.quill.getSelection();
+      const formats = selection && this.quill.getFormat(selection) || {};
+      const isTableOperationsEnabled = this._tableFormats.some((format) => Boolean(formats[format]));
+      TABLE_OPERATIONS.forEach((operationName) => {
+        const isInsertTable = operationName === 'insertTable';
+        const widget = this._toolbarWidgets.getByName(operationName);
+
+        this._updateManipulationWidget(widget, isInsertTable ? !isTableOperationsEnabled : isTableOperationsEnabled);
+      });
+    }
+
+    _updateManipulationWidget(widget, isOperationEnabled) {
+      if (!widget) {
+        return;
+      }
+
+      widget.option('disabled', !isOperationEnabled);
+    }
+
+    updateFormatWidgets(isResetRequired) {
+      const selection = this.quill.getSelection();
+      if (!selection) {
+        return;
+      }
+
+      const formats = this.quill.getFormat(selection);
+      const hasFormats = !isEmptyObject(formats);
+
+      if (!hasFormats || isResetRequired) {
+        this._resetFormatWidgets();
+      }
+
+      // eslint-disable-next-line no-restricted-syntax, guard-for-in
+      for (const formatName in formats) {
+        const widgetName = this._getFormatWidgetName(formatName, formats);
+        const formatWidget = this._toolbarWidgets.getByName(widgetName) ?? this._toolbarWidgets.getByName(formatName);
+
+        if (!formatWidget) {
+          continue;
+        }
+
+        this._markActiveFormatWidget(formatName, formatWidget, formats);
+      }
+
+      this._toggleClearFormatting(hasFormats || selection.length > 1);
+    }
+
+    _markActiveFormatWidget(name, widget, formats) {
+      if (this._isColorFormat(name)) {
+        this._updateColorWidget(name, formats[name]);
+      }
+
+      if ('value' in widget.option()) {
+        this._setValueSilent(widget, formats[name]);
+      } else {
+        widget.$element().addClass(ACTIVE_FORMAT_CLASS);
+        widget.$element().addClass(SELECTED_STATE_CLASS);
+      }
+    }
+
+    _toggleClearFormatting(hasFormats) {
+      const clearWidget = this._toolbarWidgets.getByName('clear');
+      if (clearWidget) {
+        // @ts-expect-error
+        clearWidget.option('disabled', !hasFormats);
+      }
+    }
+
+    _isColorFormat(name) {
+      return name === 'color' || name === 'background';
+    }
+
+    _updateColorWidget(name?: any, color?: any) {
+      const formatWidget = this._toolbarWidgets.getByName(name);
+      if (!formatWidget) {
+        return;
+      }
+
+      formatWidget
+        // @ts-expect-error
+        .$element()
+        .find(`.${ICON_CLASS}`)
+        .css('borderBottomColor', color || 'transparent');
+    }
+
+    _getFormatWidgetName(name, formats) {
+      let widgetName;
+      switch (name) {
+        case 'align':
+          widgetName = name + titleize(formats[name]);
+          break;
+        case 'list':
+          widgetName = formats[name] + titleize(name);
+          break;
+        case 'code-block':
+          widgetName = 'codeBlock';
+          break;
+        case 'script':
+          widgetName = formats[name] + name;
+          break;
+        case 'imageSrc':
+          widgetName = 'image';
+          break;
+        default:
+          widgetName = name;
+      }
+
+      return widgetName;
+    }
+
+    _setValueSilent(widget, value) {
+      this._isReset = true;
+      widget.option('value', value);
+      this._isReset = false;
+    }
+
+    _resetFormatWidgets() {
+      this._toolbarWidgets.each((name, widget) => {
+        this._resetFormatWidget(name, widget);
+      });
+    }
+
+    _resetFormatWidget(name, widget) {
+      widget.$element().removeClass(ACTIVE_FORMAT_CLASS);
+      widget.$element().removeClass(SELECTED_STATE_CLASS);
+
+      if (this._isColorFormat(name)) {
+        this._updateColorWidget(name);
+      }
+      if (name === 'clear') {
+        widget.option('disabled', true);
+      }
+      if (widget.NAME === 'dxSelectBox') {
+        this._setValueSilent(widget, null);
+      }
+    }
+
+    addClickHandler(name, handler) {
+      this._formatHandlers[name] = handler;
+      const formatWidget = this._toolbarWidgets.getByName(name);
+      // @ts-expect-error
+      if (formatWidget && formatWidget.NAME === 'dxButton') {
+        // @ts-expect-error
+        formatWidget.option('onClick', handler);
+      }
+    }
+  };
 }
 
 export default ToolbarModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_variables.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_variables.ts
index ddca4e4fadaa..92c03896ee6f 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_variables.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_variables.ts
@@ -1,107 +1,115 @@
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { getBoundingRect } from '@js/core/utils/position';
 import Quill from 'devextreme-quill';
 
-import $ from '../../../core/renderer';
-import { getBoundingRect } from '../../../core/utils/position';
-import PopupModule from './popup';
-import BaseModule from './base';
-import Variable from '../formats/variable';
-
-import { extend } from '../../../core/utils/extend';
-
+import Variable from '../formats/m_variable';
+import BaseModule from './m_base';
+import PopupModule from './m_popup';
+// eslint-disable-next-line import/no-mutable-exports
 let VariableModule = BaseModule;
 
-if(Quill) {
-    const VARIABLE_FORMAT_CLASS = 'dx-variable-format';
-    const ACTIVE_FORMAT_CLASS = 'dx-format-active';
-    const SELECTED_STATE_CLASS = 'dx-state-selected';
-
-    Quill.register({ 'formats/variable': Variable }, true);
-
-    VariableModule = class VariableModule extends PopupModule {
-        _getDefaultOptions() {
-            const baseConfig = super._getDefaultOptions();
-
-            return extend(baseConfig, {
-                escapeChar: ''
-            });
-        }
+if (Quill) {
+  const VARIABLE_FORMAT_CLASS = 'dx-variable-format';
+  const ACTIVE_FORMAT_CLASS = 'dx-format-active';
+  const SELECTED_STATE_CLASS = 'dx-state-selected';
 
-        constructor(quill, options) {
-            super(quill, options);
-
-            const toolbar = quill.getModule('toolbar');
-            if(toolbar) {
-                toolbar.addClickHandler('variable', this.showPopup.bind(this));
-            }
-
-            quill.keyboard.addBinding({
-                key: 'P',
-                altKey: true
-            }, this.showPopup.bind(this));
-
-            this._popup.on('shown', (e) => {
-                const $ofElement = $(e.component.option('position').of);
-                if($ofElement.hasClass(VARIABLE_FORMAT_CLASS)) {
-                    $ofElement.addClass(ACTIVE_FORMAT_CLASS);
-                    $ofElement.addClass(SELECTED_STATE_CLASS);
-                }
-            });
-        }
+  Quill.register({ 'formats/variable': Variable }, true);
+  // @ts-expect-error
+  VariableModule = class VariableModule extends PopupModule {
+    quill: any;
 
-        showPopup(event) {
-            const selection = this.quill.getSelection(true);
-            const position = selection ? selection.index : this.quill.getLength();
+    _popup: any;
 
-            this.savePosition(position);
+    options: any;
 
-            this._resetPopupPosition(event, position);
-            super.showPopup();
-        }
-
-        _resetPopupPosition(event, position) {
-            if(event && event.element) {
-                this._popup.option('position', {
-                    of: event.element,
-                    offset: {
-                        h: 0,
-                        v: 0
-                    },
-                    my: 'top center',
-                    at: 'bottom center',
-                    collision: 'fit'
-                });
-            } else {
-                const mentionBounds = this.quill.getBounds(position);
-                const rootRect = getBoundingRect(this.quill.root);
-
-                this._popup.option('position', {
-                    of: this.quill.root,
-                    offset: {
-                        h: mentionBounds.left,
-                        v: mentionBounds.bottom - rootRect.height
-                    },
-                    my: 'top center',
-                    at: 'bottom left',
-                    collision: 'fit flip'
-                });
-            }
-        }
+    constructor(quill, options) {
+      // @ts-expect-error
+      super(quill, options);
 
+      const toolbar = quill.getModule('toolbar');
+      if (toolbar) {
+        toolbar.addClickHandler('variable', this.showPopup.bind(this));
+      }
 
-        insertEmbedContent(selectionChangedEvent) {
-            const caretPosition = this.getPosition();
-            const selectedItem = selectionChangedEvent.component.option('selectedItem');
-            const variableData = extend({}, {
-                value: selectedItem,
-                escapeChar: this.options.escapeChar
-            });
+      quill.keyboard.addBinding({
+        key: 'P',
+        altKey: true,
+      }, this.showPopup.bind(this));
 
-            setTimeout(function() {
-                this.quill.insertEmbed(caretPosition, 'variable', variableData);
-                this.quill.setSelection(caretPosition + 1);
-            }.bind(this));
+      this._popup.on('shown', (e) => {
+        const $ofElement = $(e.component.option('position').of);
+        if ($ofElement.hasClass(VARIABLE_FORMAT_CLASS)) {
+          $ofElement.addClass(ACTIVE_FORMAT_CLASS);
+          $ofElement.addClass(SELECTED_STATE_CLASS);
         }
-    };
+      });
+    }
+
+    _getDefaultOptions() {
+      // @ts-expect-error
+      const baseConfig = super._getDefaultOptions();
+
+      return extend(baseConfig, {
+        escapeChar: '',
+      });
+    }
+
+    showPopup(event) {
+      const selection = this.quill.getSelection(true);
+      const position = selection ? selection.index : this.quill.getLength();
+      // @ts-expect-error
+      this.savePosition(position);
+
+      this._resetPopupPosition(event, position);
+      // @ts-expect-error
+      super.showPopup();
+    }
+
+    _resetPopupPosition(event, position) {
+      if (event && event.element) {
+        this._popup.option('position', {
+          of: event.element,
+          offset: {
+            h: 0,
+            v: 0,
+          },
+          my: 'top center',
+          at: 'bottom center',
+          collision: 'fit',
+        });
+      } else {
+        const mentionBounds = this.quill.getBounds(position);
+        const rootRect = getBoundingRect(this.quill.root);
+
+        this._popup.option('position', {
+          of: this.quill.root,
+          offset: {
+            h: mentionBounds.left,
+            v: mentionBounds.bottom - rootRect.height,
+          },
+          my: 'top center',
+          at: 'bottom left',
+          collision: 'fit flip',
+        });
+      }
+    }
+
+    insertEmbedContent(selectionChangedEvent) {
+      // @ts-expect-error
+      const caretPosition = this.getPosition();
+      const selectedItem = selectionChangedEvent.component.option('selectedItem');
+      const variableData = extend({}, {
+        value: selectedItem,
+        escapeChar: this.options.escapeChar,
+      });
+
+      setTimeout(() => {
+        this.quill.insertEmbed(caretPosition, 'variable', variableData);
+        this.quill.setSelection(caretPosition + 1);
+      });
+    }
+  };
 }
 
 export default VariableModule;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_widget_collector.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_widget_collector.ts
index 06674c9902c9..aaa5607d1ff4 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_widget_collector.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_widget_collector.ts
@@ -1,36 +1,38 @@
-import { each } from '../../../core/utils/iterator';
+import { each } from '@js/core/utils/iterator';
 
 export default class WidgetCollector {
-    constructor() {
-        this._collection = [];
-    }
-
-    clear() {
-        this._collection = [];
-    }
-
-    add(name, instance) {
-        this._collection.push({ name, instance });
-    }
-
-    remove(name) {
-        this._collection = this._collection.filter(item => item.name !== name);
-    }
-
-    getByName(widgetName) {
-        let widget = null;
-
-        each(this._collection, (index, { name, instance }) => {
-            if(name === widgetName) {
-                widget = instance;
-                return false;
-            }
-        });
-
-        return widget;
-    }
-
-    each(handler) {
-        this._collection.forEach(({ name, instance }) => instance && handler(name, instance));
-    }
+  _collection: any[];
+
+  constructor() {
+    this._collection = [];
+  }
+
+  clear() {
+    this._collection = [];
+  }
+
+  add(name, instance) {
+    this._collection.push({ name, instance });
+  }
+
+  remove(name) {
+    this._collection = this._collection.filter((item) => item.name !== name);
+  }
+
+  getByName(widgetName) {
+    let widget = null;
+    // @ts-expect-error
+    each(this._collection, (index, { name, instance }) => {
+      if (name === widgetName) {
+        widget = instance;
+        return false;
+      }
+    });
+
+    return widget;
+  }
+
+  each(handler) {
+    this._collection.forEach(({ name, instance }) => instance && handler(name, instance));
+  }
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts b/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
index 379eb1536c2b..14847b24d48d 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
@@ -1,21 +1,21 @@
 import Quill from 'devextreme-quill';
 
+// eslint-disable-next-line import/no-mutable-exports
 let BaseTheme;
 
-if(Quill) {
-    const Theme = Quill.import('core/theme');
+if (Quill) {
+  const Theme = Quill.import('core/theme');
 
-    BaseTheme = class BaseTheme extends Theme {
-        constructor(quill, options) {
-
-            super(quill, options);
-            this.quill.root.classList.add('dx-htmleditor-content');
-            this.quill.root.setAttribute('role', 'textbox');
-            this.quill.root.setAttribute('aria-label', 'Editor content');
-        }
-    };
+  BaseTheme = class BaseTheme extends Theme {
+    constructor(quill, options) {
+      super(quill, options);
+      this.quill.root.classList.add('dx-htmleditor-content');
+      this.quill.root.setAttribute('role', 'textbox');
+      this.quill.root.setAttribute('aria-label', 'Editor content');
+    }
+  };
 } else {
-    BaseTheme = {};
+  BaseTheme = {};
 }
 
 export default BaseTheme;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts b/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts
index a4551f342a0d..432b67b44bf6 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts
@@ -1,201 +1,230 @@
-import $ from '../../../core/renderer';
-import { extend } from '../../../core/utils/extend';
-import Popup from '../../popup';
-import Form from '../../form';
-import { Deferred } from '../../../core/utils/deferred';
-import localizationMessage from '../../../localization/message';
-import { getCurrentScreenFactor, hasWindow } from '../../../core/utils/window';
-import devices from '../../../core/devices';
-import { isFluent, isMaterialBased } from '../../themes';
+import devices from '@js/core/devices';
+import $ from '@js/core/renderer';
+import type { DeferredObj } from '@js/core/utils/deferred';
+import { Deferred } from '@js/core/utils/deferred';
+import { extend } from '@js/core/utils/extend';
+import {
+  // @ts-expect-error
+  getCurrentScreenFactor,
+  hasWindow,
+} from '@js/core/utils/window';
+import localizationMessage from '@js/localization/message';
+import Form from '@js/ui/form';
+import Popup from '@js/ui/popup';
+import { isFluent, isMaterialBased } from '@js/ui/themes';
 
 const DIALOG_CLASS = 'dx-formdialog';
 const FORM_CLASS = 'dx-formdialog-form';
 const DROPDOWN_EDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay';
 
 const getApplyButtonConfig = () => {
-    if(isFluent()) {
-        return {
-            stylingMode: 'contained',
-            type: 'default',
-        };
-    }
-
-    return {};
+  // @ts-expect-error
+  if (isFluent()) {
+    return {
+      stylingMode: 'contained',
+      type: 'default',
+    };
+  }
+
+  return {};
 };
 
 const getCancelButtonConfig = () => {
-    if(isFluent()) {
-        return {
-            stylingMode: 'outlined',
-            type: 'normal',
-        };
-    }
-
-    return {};
+  // @ts-expect-error
+  if (isFluent()) {
+    return {
+      stylingMode: 'outlined',
+      type: 'normal',
+    };
+  }
+
+  return {};
 };
 
 class FormDialog {
-    constructor(editorInstance, popupConfig) {
-        this._editorInstance = editorInstance;
-        this._popupUserConfig = popupConfig;
-
-        this._renderPopup();
-        this._attachOptionChangedHandler();
-    }
-
-    _renderPopup() {
-        const editorInstance = this._editorInstance;
-        const $container = $('<div>')
-            .addClass(DIALOG_CLASS)
-            .appendTo(editorInstance.$element());
-        const popupConfig = this._getPopupConfig();
-
-        return editorInstance._createComponent($container, Popup, popupConfig);
-    }
-
-    _attachOptionChangedHandler() {
-        this._popup
-            ?.on(
-                'optionChanged',
-                ({ name, value }) => {
-                    if(name === 'title') {
-                        this._updateFormLabel(value);
-                    }
-                }
-            );
-    }
-
-    _escKeyHandler() {
-        this._popup.hide();
-    }
-
-    _addEscapeHandler(e) {
-        e.component.registerKeyHandler('escape', this._escKeyHandler.bind(this));
-    }
-
-    _isSmallScreen() {
-        const screenFactor = hasWindow() ? getCurrentScreenFactor() : null;
-        return devices.real().deviceType === 'phone' || screenFactor === 'xs';
-    }
-
-    _getPopupConfig() {
-        return extend({
-            onInitialized: (e) => {
-                this._popup = e.component;
-                this._popup.on('hiding', () => this.onHiding());
-                this._popup.on('shown', () => { this._form.focus(); });
-            },
-            deferRendering: false,
-            focusStateEnabled: false,
-            showCloseButton: false,
-            fullScreen: this._isSmallScreen(),
-            contentTemplate: (contentElem) => {
-                const $formContainer = $('<div>').appendTo(contentElem);
-
-                this._renderForm($formContainer, {
-                    onEditorEnterKey: (e) => this.callAddButtonAction(e.event),
-                    customizeItem: (item) => {
-                        if(item.itemType === 'simple') {
-                            item.editorOptions = extend(
-                                true,
-                                {},
-                                item.editorOptions,
-                                { onInitialized: this._addEscapeHandler.bind(this) }
-                            );
-                        }
-                    }
-                });
+  _editorInstance?: any;
+
+  _popupUserConfig?: any;
+
+  _popup!: Popup;
+
+  beforeAddButtonAction?: any;
+
+  deferred?: DeferredObj<unknown>;
+
+  _form!: Form;
+
+  constructor(editorInstance, popupConfig) {
+    this._editorInstance = editorInstance;
+    this._popupUserConfig = popupConfig;
+
+    this._renderPopup();
+    this._attachOptionChangedHandler();
+  }
+
+  _renderPopup() {
+    const editorInstance = this._editorInstance;
+    const $container = $('<div>')
+      .addClass(DIALOG_CLASS)
+      .appendTo(editorInstance.$element());
+    const popupConfig = this._getPopupConfig();
+
+    return editorInstance._createComponent($container, Popup, popupConfig);
+  }
+
+  _attachOptionChangedHandler() {
+    this._popup
+      ?.on(
+        'optionChanged',
+        ({ name, value }) => {
+          if (name === 'title') {
+            this._updateFormLabel(value);
+          }
+        },
+      );
+  }
+
+  _escKeyHandler() {
+    this._popup.hide();
+  }
+
+  _addEscapeHandler(e) {
+    e.component.registerKeyHandler('escape', this._escKeyHandler.bind(this));
+  }
+
+  _isSmallScreen() {
+    const screenFactor = hasWindow() ? getCurrentScreenFactor() : null;
+    return devices.real().deviceType === 'phone' || screenFactor === 'xs';
+  }
+
+  _getPopupConfig() {
+    return extend({
+      onInitialized: (e) => {
+        this._popup = e.component;
+        this._popup.on('hiding', () => this.onHiding());
+        this._popup.on('shown', () => { this._form.focus(); });
+      },
+      deferRendering: false,
+      focusStateEnabled: false,
+      showCloseButton: false,
+      fullScreen: this._isSmallScreen(),
+      contentTemplate: (contentElem) => {
+        const $formContainer = $('<div>').appendTo(contentElem);
+
+        this._renderForm($formContainer, {
+          onEditorEnterKey: (e) => this.callAddButtonAction(e.event),
+          customizeItem: (item) => {
+            if (item.itemType === 'simple') {
+              item.editorOptions = extend(
+                true,
+                {},
+                item.editorOptions,
+                { onInitialized: this._addEscapeHandler.bind(this) },
+              );
+            }
+          },
+        });
+      },
+      toolbarItems: [
+        {
+          toolbar: 'bottom',
+          location: 'after',
+          widget: 'dxButton',
+          options: {
+            onInitialized: this._addEscapeHandler.bind(this),
+            text: localizationMessage.format('OK'),
+            onClick: (e) => this.callAddButtonAction(e.event),
+            ...getApplyButtonConfig(),
+          },
+        }, {
+          toolbar: 'bottom',
+          location: 'after',
+          widget: 'dxButton',
+          options: {
+            onInitialized: this._addEscapeHandler.bind(this),
+            text: localizationMessage.format('Cancel'),
+            onClick: () => {
+              this._popup.hide();
             },
-            toolbarItems: [
-                {
-                    toolbar: 'bottom',
-                    location: 'after',
-                    widget: 'dxButton',
-                    options: {
-                        onInitialized: this._addEscapeHandler.bind(this),
-                        text: localizationMessage.format('OK'),
-                        onClick: (e) => this.callAddButtonAction(e.event),
-                        ...getApplyButtonConfig(),
-                    }
-                }, {
-                    toolbar: 'bottom',
-                    location: 'after',
-                    widget: 'dxButton',
-                    options: {
-                        onInitialized: this._addEscapeHandler.bind(this),
-                        text: localizationMessage.format('Cancel'),
-                        onClick: () => {
-                            this._popup.hide();
-                        },
-                        ...getCancelButtonConfig(),
-                    }
-                }
-            ],
-            _wrapperClassExternal: `${DIALOG_CLASS} ${DROPDOWN_EDITOR_OVERLAY_CLASS}`,
-        }, this._popupUserConfig);
-    }
-
-    onHiding() {
-        this.beforeAddButtonAction = undefined;
-        this.deferred.reject();
-    }
-
-    callAddButtonAction(event) {
-        if(this.beforeAddButtonAction && !this.beforeAddButtonAction()) {
-            return;
-        }
-
-        this.hide(this._form.option('formData'), event);
-    }
-
-    _renderForm($container, options) {
-        $container.addClass(FORM_CLASS);
-        this._form = this._editorInstance._createComponent($container, Form, options);
-        this._updateFormLabel();
-    }
-
-    _updateFormLabel(text) {
-        const label = text ?? this.popupOption('title');
-        this._form
-            ?.$element()
-            .attr('aria-label', label);
-    }
-
-    _getDefaultFormOptions() {
-        return {
-            colCount: 1,
-            width: 'auto',
-            labelLocation: isMaterialBased() ? 'top' : 'left'
-        };
-    }
-
-    formOption(optionName, optionValue) {
-        return this._form.option.apply(this._form, arguments);
-    }
-
-    show(formUserConfig) {
-        if(this._popup.option('visible')) {
-            return;
-        }
-
-        this.deferred = new Deferred();
-        const formConfig = extend(this._getDefaultFormOptions(), formUserConfig);
-
-        this._form.option(formConfig);
-
-        this._popup.show();
-
-        return this.deferred.promise();
-    }
-
-    hide(formData, event) {
-        this.deferred.resolve(formData, event);
-        this._popup.hide();
-    }
-
-    popupOption(optionName, optionValue) {
-        return this._popup.option.apply(this._popup, arguments);
-    }
+            ...getCancelButtonConfig(),
+          },
+        },
+      ],
+      _wrapperClassExternal: `${DIALOG_CLASS} ${DROPDOWN_EDITOR_OVERLAY_CLASS}`,
+    }, this._popupUserConfig);
+  }
+
+  onHiding() {
+    this.beforeAddButtonAction = undefined;
+    // @ts-expect-error
+    this.deferred.reject();
+  }
+
+  callAddButtonAction(event) {
+    if (this.beforeAddButtonAction && !this.beforeAddButtonAction()) {
+      return;
+    }
+
+    this.hide(this._form.option('formData'), event);
+  }
+
+  _renderForm($container, options) {
+    $container.addClass(FORM_CLASS);
+    this._form = this._editorInstance._createComponent($container, Form, options);
+    // @ts-expect-error
+    this._updateFormLabel();
+  }
+
+  _updateFormLabel(text) {
+    // @ts-expect-error
+    const label = text ?? this.popupOption('title');
+    this._form
+      ?.$element()
+      // @ts-expect-error
+      .attr('aria-label', label);
+  }
+
+  _getDefaultFormOptions() {
+    return {
+      colCount: 1,
+      width: 'auto',
+      // @ts-expect-error
+      labelLocation: isMaterialBased() ? 'top' : 'left',
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  formOption(optionName, optionValue) {
+    // @ts-expect-error
+    return this._form.option.apply(this._form, arguments);
+  }
+
+  show(formUserConfig) {
+    if (this._popup.option('visible')) {
+      return;
+    }
+
+    this.deferred = Deferred();
+    const formConfig = extend(this._getDefaultFormOptions(), formUserConfig);
+
+    this._form.option(formConfig);
+
+    this._popup.show();
+
+    return this.deferred.promise();
+  }
+
+  hide(formData, event) {
+    // @ts-expect-error
+    this.deferred.resolve(formData, event);
+    this._popup.hide();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  popupOption(optionName, optionValue) {
+    // @ts-expect-error
+    return this._popup.option.apply(this._popup, arguments);
+  }
 }
 
 export default FormDialog;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/utils/m_image_uploader_helper.ts b/packages/devextreme/js/__internal/ui/html_editor/utils/m_image_uploader_helper.ts
index 462b9aab24c7..5020b1e2365c 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/utils/m_image_uploader_helper.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/utils/m_image_uploader_helper.ts
@@ -1,11 +1,16 @@
-import $ from '../../../core/renderer';
-import localizationMessage from '../../../localization/message';
-import { map } from '../../../core/utils/iterator';
-import { extend } from '../../../core/utils/extend';
-import { getHeight, getWidth } from '../../../core/utils/size';
-import devices from '../../../core/devices';
-import { isDefined } from '../../../core/utils/type';
-import { isFluent } from '../../themes';
+/* eslint-disable max-classes-per-file */
+import devices from '@js/core/devices';
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+import { map } from '@js/core/utils/iterator';
+import { getHeight, getWidth } from '@js/core/utils/size';
+import { isDefined } from '@js/core/utils/type';
+import localizationMessage from '@js/localization/message';
+import ButtonGroup from '@js/ui/button_group';
+import FileUploader from '@js/ui/file_uploader';
+import TextBox from '@js/ui/text_box';
+import { isFluent } from '@js/ui/themes';
+
 const isMobile = devices.current().deviceType === 'phone';
 
 const DIALOG_IMAGE_CAPTION = 'dxHtmlEditor-dialogImageCaption';
@@ -31,506 +36,578 @@ const SILENT_ACTION = 'silent';
 
 const FILE_UPLOADER_NAME = 'dx-htmleditor-image';
 
-import ButtonGroup from '../../button_group';
-import FileUploader from '../../file_uploader';
-import TextBox from '../../text_box';
-
 export class ImageUploader {
-    constructor(module, config) {
-        this.module = module;
-        this.config = config ?? {};
-        this.quill = this.module.quill;
-        this.editorInstance = this.module.editorInstance;
-    }
+  module: any;
 
-    render() {
-        if(this.editorInstance._formDialog) {
-            this.editorInstance._formDialog.beforeAddButtonAction = () => this.getCurrentTab().upload();
-        }
+  config: any;
 
-        this.tabPanelIndex = 0;
-        this.formData = this.getFormData();
-        this.isUpdating = this.isImageUpdating();
+  quill: any;
 
-        this.tabsModel = this.createTabsModel(this.config.tabs);
-        this.tabs = this.createTabs(this.formData);
+  editorInstance: any;
 
-        const formConfig = this.getFormConfig();
+  tabPanelIndex!: number;
 
-        this.updatePopupConfig();
-        this.updateAddButtonState();
+  formData?: any;
 
-        this.editorInstance.showFormDialog(formConfig)
-            .done((formData, event) => {
-                this.tabs[this.getActiveTabIndex()].strategy.pasteImage(formData, event);
-            })
-            .always(() => {
-                this.resetDialogPopupOptions();
-                this.quill.focus();
-            });
-    }
+  tabsModel?: any;
 
-    getCurrentTab() {
-        return this.tabs[this.tabPanelIndex];
-    }
+  tabs?: any;
 
-    updateAddButtonState() {
-        const isDisabled = this.getCurrentTab().isDisableButton();
-        this.setAddButtonDisabled(isDisabled);
-    }
+  isUpdating?: boolean;
 
-    setAddButtonDisabled(value) {
-        this.editorInstance.formDialogOption({
-            'toolbarItems[0].options.disabled': value
-        });
-    }
+  constructor(module, config) {
+    this.module = module;
+    this.config = config ?? {};
+    this.quill = this.module.quill;
+    this.editorInstance = this.module.editorInstance;
+  }
 
-    getActiveTabIndex() {
-        return this.isUpdating ? 0 : this.tabPanelIndex;
+  render() {
+    if (this.editorInstance._formDialog) {
+      this.editorInstance._formDialog.beforeAddButtonAction = () => this.getCurrentTab().upload();
     }
 
-    getFormData() {
-        return this.getUpdateDialogFormData(this.quill.getFormat());
-    }
+    this.tabPanelIndex = 0;
+    this.formData = this.getFormData();
+    this.isUpdating = this.isImageUpdating();
 
-    getUpdateDialogFormData(formData) {
-        const { imageSrc, src, ...props } = formData;
-        return {
-            src: imageSrc ?? src,
-            ...props
-        };
-    }
+    this.tabsModel = this.createTabsModel(this.config.tabs);
+    this.tabs = this.createTabs(this.formData);
 
-    createUrlTab(formData) {
-        return new UrlTab(this.module, {
-            config: this.config,
-            formData,
-            isUpdating: this.isUpdating
-        }, () => this.updateAddButtonState());
-    }
+    const formConfig = this.getFormConfig();
 
-    createFileTab() {
-        return new FileTab(this.module, {
-            config: this.config
-        }, () => this.updateAddButtonState());
-    }
+    this.updatePopupConfig();
+    this.updateAddButtonState();
 
-    createTabsModel(model = []) {
-        if(model.length === 0 || this.isUpdating) {
-            return ['url'];
-        }
+    this.editorInstance.showFormDialog(formConfig)
+      .done((formData, event) => {
+        this.tabs[this.getActiveTabIndex()].strategy.pasteImage(formData, event);
+      })
+      .always(() => {
+        this.resetDialogPopupOptions();
+        this.quill.focus();
+      });
+  }
 
-        return model.map(tab => typeof tab === 'object' ? tab.name : tab);
-    }
+  getCurrentTab() {
+    return this.tabs[this.tabPanelIndex];
+  }
 
-    createTabs(formData) {
-        return this.tabsModel.map((tabName) => {
-            const isUrlTab = tabName === 'url';
-            return isUrlTab ? this.createUrlTab(formData) : this.createFileTab();
-        });
-    }
+  updateAddButtonState() {
+    const isDisabled = this.getCurrentTab().isDisableButton();
+    this.setAddButtonDisabled(isDisabled);
+  }
 
-    isImageUpdating() {
-        return Object.prototype.hasOwnProperty.call(this.module.quill.getFormat() ?? {}, 'imageSrc');
-    }
+  setAddButtonDisabled(value) {
+    this.editorInstance.formDialogOption({
+      'toolbarItems[0].options.disabled': value,
+    });
+  }
 
-    updatePopupConfig() {
-        let wrapperClasses = `${DIALOG_IMAGE_POPUP_CLASS} ${FORM_DIALOG_CLASS}`;
-        if(this.useTabbedItems()) {
-            wrapperClasses += ` ${DIALOG_IMAGE_POPUP_WITH_TABS_CLASS}`;
-        }
+  getActiveTabIndex() {
+    return this.isUpdating ? 0 : this.tabPanelIndex;
+  }
 
-        const titleKey = this.isUpdating ? DIALOG_UPDATE_IMAGE_CAPTION : DIALOG_IMAGE_CAPTION;
-        const addButtonTextKey = this.isUpdating ? DIALOG_IMAGE_UPDATE_BUTTON : DIALOG_IMAGE_ADD_BUTTON;
+  getFormData() {
+    return this.getUpdateDialogFormData(this.quill.getFormat());
+  }
 
-        this.editorInstance.formDialogOption({
-            title: localizationMessage.format(titleKey),
-            'toolbarItems[0].options.text': localizationMessage.format(addButtonTextKey),
-            'wrapperAttr': { class: wrapperClasses }
-        });
-    }
+  getUpdateDialogFormData(formData) {
+    const { imageSrc, src, ...props } = formData;
+    return {
+      src: imageSrc ?? src,
+      ...props,
+    };
+  }
+
+  createUrlTab(formData) {
+    return new UrlTab(this.module, {
+      config: this.config,
+      formData,
+      isUpdating: this.isUpdating,
+    }, () => this.updateAddButtonState());
+  }
+
+  createFileTab() {
+    // @ts-expect-error
+    return new FileTab(this.module, {
+      config: this.config,
+    }, () => this.updateAddButtonState());
+  }
+
+  createTabsModel(model = []) {
+    if (model.length === 0 || this.isUpdating) {
+      return ['url'];
+    }
+    // @ts-expect-error
+    return model.map((tab) => (typeof tab === 'object' ? tab.name : tab));
+  }
+
+  createTabs(formData) {
+    return this.tabsModel.map((tabName) => {
+      const isUrlTab = tabName === 'url';
+      return isUrlTab ? this.createUrlTab(formData) : this.createFileTab();
+    });
+  }
+
+  isImageUpdating() {
+    return Object.prototype.hasOwnProperty.call(this.module.quill.getFormat() ?? {}, 'imageSrc');
+  }
+
+  updatePopupConfig() {
+    let wrapperClasses = `${DIALOG_IMAGE_POPUP_CLASS} ${FORM_DIALOG_CLASS}`;
+    if (this.useTabbedItems()) {
+      wrapperClasses += ` ${DIALOG_IMAGE_POPUP_WITH_TABS_CLASS}`;
+    }
+
+    const titleKey = this.isUpdating ? DIALOG_UPDATE_IMAGE_CAPTION : DIALOG_IMAGE_CAPTION;
+    const addButtonTextKey = this.isUpdating ? DIALOG_IMAGE_UPDATE_BUTTON : DIALOG_IMAGE_ADD_BUTTON;
+
+    this.editorInstance.formDialogOption({
+      title: localizationMessage.format(titleKey),
+      'toolbarItems[0].options.text': localizationMessage.format(addButtonTextKey),
+      wrapperAttr: { class: wrapperClasses },
+    });
+  }
+
+  resetDialogPopupOptions() {
+    this.editorInstance.formDialogOption({
+      'toolbarItems[0].options.text': localizationMessage.format('OK'),
+      'toolbarItems[0].options.visible': true,
+      'toolbarItems[0].options.disabled': false,
+      wrapperAttr: { class: FORM_DIALOG_CLASS },
+    });
+  }
+
+  useTabbedItems() {
+    return this.tabsModel.length > 1;
+  }
+
+  getFormWidth() {
+    return isMobile ? '100%' : 493;
+  }
+
+  getFormConfig() {
+    return {
+      formData: this.formData,
+      width: this.getFormWidth(),
+      labelLocation: 'top',
+      colCount: this.useTabbedItems() ? 1 : 11,
+      items: this.getItemsConfig(),
+    };
+  }
+
+  getItemsConfig() {
+    if (this.useTabbedItems()) {
+      const tabsConfig = map(this.tabs, (tabController) => ({
+        title: tabController.getTabName(),
+        colCount: 11,
+        items: tabController.getItemsConfig(),
+      }));
+
+      return [{
+        itemType: 'tabbed',
+        tabPanelOptions: {
+          onSelectionChanged: (e) => {
+            this.tabPanelIndex = e.component.option('selectedIndex');
+            this.updateAddButtonState();
+          },
+        },
+        tabs: tabsConfig,
+      }];
+    }
+
+    return this.tabs[0].getItemsConfig();
+  }
+}
 
-    resetDialogPopupOptions() {
-        this.editorInstance.formDialogOption({
-            'toolbarItems[0].options.text': localizationMessage.format('OK'),
-            'toolbarItems[0].options.visible': true,
-            'toolbarItems[0].options.disabled': false,
-            wrapperAttr: { class: FORM_DIALOG_CLASS }
-        });
-    }
+class BaseTab {
+  strategy: UpdateUrlStrategy | AddUrlStrategy | FileStrategy;
 
-    useTabbedItems() {
-        return this.tabsModel.length > 1;
-    }
+  isUpdating: boolean;
 
-    getFormWidth() {
-        return isMobile ? '100%' : 493;
-    }
+  formData: any;
 
-    getFormConfig() {
-        return {
-            formData: this.formData,
-            width: this.getFormWidth(),
-            labelLocation: 'top',
-            colCount: this.useTabbedItems() ? 1 : 11,
-            items: this.getItemsConfig()
-        };
-    }
+  config: any;
 
-    getItemsConfig() {
-        if(this.useTabbedItems()) {
-            const tabsConfig = map(this.tabs, (tabController) => {
-                return {
-                    title: tabController.getTabName(),
-                    colCount: 11,
-                    items: tabController.getItemsConfig()
-                };
-            });
-
-            return [{
-                itemType: 'tabbed',
-                tabPanelOptions: {
-                    onSelectionChanged: (e) => {
-                        this.tabPanelIndex = e.component.option('selectedIndex');
-                        this.updateAddButtonState();
-                    }
-                },
-                tabs: tabsConfig
-            }];
-        }
-
-        return this.tabs[0].getItemsConfig();
-    }
-}
+  onFileSelected: any;
 
-class BaseTab {
-    constructor(module, { config, formData, isUpdating }, onFileSelected) {
-        this.module = module;
-        this.config = config;
-        this.formData = formData;
-        this.isUpdating = isUpdating;
-        this.onFileSelected = onFileSelected;
-
-        this.strategy = this.createStrategy();
-    }
+  module: any;
 
-    getItemsConfig() {
-        return this.strategy.getItemsConfig();
-    }
+  constructor(module, { config, formData, isUpdating }, onFileSelected) {
+    this.module = module;
+    this.config = config;
+    this.formData = formData;
+    this.isUpdating = isUpdating;
+    this.onFileSelected = onFileSelected;
 
-    createStrategy() {
-        return this.isUpdating
-            ? new UpdateUrlStrategy(this.module, this.config, this.formData)
-            : new AddUrlStrategy(this.module, this.config, this.onFileSelected);
-    }
+    this.strategy = this.createStrategy();
+  }
 
-    isDisableButton() {
-        return false;
-    }
+  getItemsConfig() {
+    return this.strategy.getItemsConfig();
+  }
 
-    upload() {
-        return this.strategy.upload();
-    }
+  createStrategy(): UpdateUrlStrategy | AddUrlStrategy | FileStrategy {
+    return this.isUpdating
+      ? new UpdateUrlStrategy(this.module, this.config, this.formData)
+      : new AddUrlStrategy(this.module, this.config, this.onFileSelected);
+  }
+
+  isDisableButton() {
+    return false;
+  }
+
+  upload() {
+    return this.strategy.upload();
+  }
 }
 
 class UrlTab extends BaseTab {
-    getTabName() {
-        return localizationMessage.format(DIALOG_IMAGE_SPECIFY_URL);
-    }
+  getTabName() {
+    return localizationMessage.format(DIALOG_IMAGE_SPECIFY_URL);
+  }
 }
 
 class FileTab extends BaseTab {
-    getTabName() {
-        return localizationMessage.format(DIALOG_IMAGE_SELECT_FILE);
-    }
+  getTabName() {
+    return localizationMessage.format(DIALOG_IMAGE_SELECT_FILE);
+  }
 
-    createStrategy() {
-        return new FileStrategy(this.module, this.config, this.onFileSelected);
-    }
+  createStrategy() {
+    return new FileStrategy(this.module, this.config, this.onFileSelected);
+  }
 
-    isDisableButton() {
-        return !this.strategy.isValid();
-    }
+  isDisableButton() {
+    return !this.strategy.isValid();
+  }
 }
 
 class BaseStrategy {
-    constructor(module, config) {
-        this.module = module;
-        this.config = config;
-        this.editorInstance = module.editorInstance;
-        this.quill = module.quill;
-        this.selection = this.getQuillSelection();
-    }
+  quill: any;
 
-    getQuillSelection() {
-        const selection = this.quill.getSelection();
+  module: any;
 
-        return selection ?? { index: this.quill.getLength(), length: 0 };
-    }
+  config: any;
 
-    pasteImage() {}
+  editorInstance: any;
 
-    isValid() {
-        return true;
-    }
+  selection: { index: number; length: number };
 
-    upload() {}
-}
-class AddUrlStrategy extends BaseStrategy {
-    constructor(module, config, onFileSelected) {
-        super(module, config, onFileSelected);
-
-        this.shouldKeepAspectRatio = true;
-    }
+  constructor(module, config) {
+    this.module = module;
+    this.config = config;
+    this.editorInstance = module.editorInstance;
+    this.quill = module.quill;
+    this.selection = this.getQuillSelection();
+  }
 
-    pasteImage(formData, event) {
-        this.module.saveValueChangeEvent(event);
-        urlUpload(this.quill, this.selection.index, formData);
-    }
+  getQuillSelection() {
+    const selection = this.quill.getSelection();
 
-    keepAspectRatio(data, { dependentEditor, e }) {
-        const newValue = parseInt(e.value);
-        const previousValue = parseInt(e.previousValue);
-        const previousDependentEditorValue = parseInt(dependentEditor.option('value'));
+    return selection ?? { index: this.quill.getLength(), length: 0 };
+  }
 
-        data.component.updateData(data.dataField, newValue);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  pasteImage(formData, event) {}
 
-        if(this.shouldKeepAspectRatio && previousDependentEditorValue && previousValue && !this.preventRecalculating) {
-            this.preventRecalculating = true;
-            dependentEditor.option('value', Math.round(newValue * previousDependentEditorValue / parseInt(previousValue)).toString());
-        }
+  isValid() {
+    return true;
+  }
 
-        this.preventRecalculating = false;
-    }
-
-    createKeepAspectRatioEditor($container, data, dependentEditorDataField) {
-        return this.editorInstance._createComponent($container, TextBox, extend(true, data.editorOptions, {
-            value: data.component.option('formData')[data.dataField],
-            onEnterKey: data.component.option('onEditorEnterKey').bind(this.editorInstance._formDialog, data),
-            onValueChanged: (e) => {
-                this.keepAspectRatio(data, { dependentEditor: this[dependentEditorDataField + 'Editor'], e });
-            }
-        }));
-    }
-
-    upload() {
-        const result = this.editorInstance._formDialog._form.validate();
-        return result.isValid;
-    }
-
-    getItemsConfig() {
-        const stylingMode = isFluent() ? 'text' : 'outlined';
-
-        return [
-            { dataField: 'src', colSpan: 11, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_URL) },
-                validationRules: [{ type: 'required' }, { type: 'stringLength', min: 1 }],
+  upload() {}
+}
+class AddUrlStrategy extends BaseStrategy {
+  formData: any;
+
+  preventRecalculating?: boolean;
+
+  shouldKeepAspectRatio: boolean;
+
+  widthEditor: any;
+
+  heightEditor: any;
+
+  constructor(module, config, onFileSelected) {
+    // @ts-expect-error
+    super(module, config, onFileSelected);
+
+    this.shouldKeepAspectRatio = true;
+  }
+
+  pasteImage(formData, event) {
+    this.module.saveValueChangeEvent(event);
+    urlUpload(this.quill, this.selection.index, formData);
+  }
+
+  keepAspectRatio(data, { dependentEditor, e }) {
+    // eslint-disable-next-line radix
+    const newValue = parseInt(e.value);
+    // eslint-disable-next-line radix
+    const previousValue = parseInt(e.previousValue);
+    // eslint-disable-next-line radix
+    const previousDependentEditorValue = parseInt(dependentEditor.option('value'));
+
+    data.component.updateData(data.dataField, newValue);
+
+    if (this.shouldKeepAspectRatio && previousDependentEditorValue && previousValue && !this.preventRecalculating) {
+      this.preventRecalculating = true;
+      // @ts-expect-error
+      // eslint-disable-next-line radix
+      dependentEditor.option('value', Math.round(newValue * previousDependentEditorValue / parseInt(previousValue)).toString());
+    }
+
+    this.preventRecalculating = false;
+  }
+
+  createKeepAspectRatioEditor($container, data, dependentEditorDataField) {
+    return this.editorInstance._createComponent($container, TextBox, extend(true, data.editorOptions, {
+      value: data.component.option('formData')[data.dataField],
+      onEnterKey: data.component.option('onEditorEnterKey').bind(this.editorInstance._formDialog, data),
+      onValueChanged: (e) => {
+        this.keepAspectRatio(data, { dependentEditor: this[`${dependentEditorDataField}Editor`], e });
+      },
+    }));
+  }
+
+  upload() {
+    const result = this.editorInstance._formDialog._form.validate();
+    return result.isValid;
+  }
+
+  getItemsConfig() {
+    // @ts-expect-error
+    const stylingMode = isFluent() ? 'text' : 'outlined';
+
+    return [
+      {
+        dataField: 'src',
+        colSpan: 11,
+        label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_URL) },
+        validationRules: [{ type: 'required' }, { type: 'stringLength', min: 1 }],
+      },
+      {
+        dataField: 'width',
+        colSpan: 6,
+        label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_WIDTH) },
+        template: (data) => {
+          const $content = $('<div>').addClass(DIALOG_IMAGE_FIX_RATIO_CONTAINER);
+          const $widthEditor = $('<div>').appendTo($content);
+
+          this.widthEditor = this.createKeepAspectRatioEditor($widthEditor, data, 'height');
+
+          const $ratioEditor = $('<div>').appendTo($content);
+
+          this.editorInstance._createComponent($ratioEditor, ButtonGroup, {
+            items: [{
+              icon: 'imgarlock',
+              value: 'keepRatio',
+            }],
+            hint: localizationMessage.format(DIALOG_IMAGE_KEEP_ASPECT_RATIO),
+            focusStateEnabled: false,
+            keyExpr: 'value',
+            stylingMode,
+            selectionMode: 'multiple',
+            selectedItemKeys: ['keepRatio'],
+            onSelectionChanged: (e) => {
+              this.shouldKeepAspectRatio = !!e.component.option('selectedItems').length;
             },
-            { dataField: 'width', colSpan: 6, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_WIDTH) }, template: (data) => {
-                const $content = $('<div>').addClass(DIALOG_IMAGE_FIX_RATIO_CONTAINER);
-                const $widthEditor = $('<div>').appendTo($content);
-
-                this.widthEditor = this.createKeepAspectRatioEditor($widthEditor, data, 'height');
-
-                const $ratioEditor = $('<div>').appendTo($content);
-
-                this.editorInstance._createComponent($ratioEditor, ButtonGroup, {
-                    items: [{
-                        icon: 'imgarlock',
-                        value: 'keepRatio',
-                    }],
-                    hint: localizationMessage.format(DIALOG_IMAGE_KEEP_ASPECT_RATIO),
-                    focusStateEnabled: false,
-                    keyExpr: 'value',
-                    stylingMode,
-                    selectionMode: 'multiple',
-                    selectedItemKeys: ['keepRatio'],
-                    onSelectionChanged: (e) => {
-                        this.shouldKeepAspectRatio = !!e.component.option('selectedItems').length;
-                    }
-                });
-
-                return $content;
-            } },
-            { dataField: 'height', colSpan: 5, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_HEIGHT) }, template: (data) => {
-                const $content = $('<div>');
-
-                this.heightEditor = this.createKeepAspectRatioEditor($content, data, 'width');
-
-                return $content;
-            } },
-            { dataField: 'alt', colSpan: 11, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_ALT) } }
-        ];
-    }
-
+          });
+
+          return $content;
+        },
+      },
+      {
+        dataField: 'height',
+        colSpan: 5,
+        label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_HEIGHT) },
+        template: (data) => {
+          const $content = $('<div>');
+
+          this.heightEditor = this.createKeepAspectRatioEditor($content, data, 'width');
+
+          return $content;
+        },
+      },
+      { dataField: 'alt', colSpan: 11, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_ALT) } },
+    ];
+  }
 }
 
 class UpdateUrlStrategy extends AddUrlStrategy {
-    constructor(module, config, formData, onFileSelected) {
-        super(module, config, onFileSelected);
-        this.formData = formData;
-        this.modifyFormData();
-    }
-
-    modifyFormData() {
-        const { imageSrc } = this.quill.getFormat(this.selection.index - 1, 1);
-
-        if(!imageSrc || this.selection.index === 0) {
-            this.selection = {
-                index: this.selection.index + 1,
-                length: 0
-            };
-            this.quill.setSelection(this.selection.index, this.selection.length, SILENT_ACTION);
-        }
-
-        const imgElement = this.quill.getLeaf(this.selection.index)[0].domNode;
-        if(imgElement) {
-            this.formData.width = this.formData.width ?? getWidth($(imgElement));
-            this.formData.height = this.formData.height ?? getHeight($(imgElement));
-        }
-    }
-
-    pasteImage(formData, event) {
-        this.quill.deleteText(this.embedFormatIndex(), 1, SILENT_ACTION);
-        this.selection.index -= 1;
-        super.pasteImage(formData, event);
-    }
-
-    embedFormatIndex() {
-        const selection = this.selection ?? this.quill.getSelection();
-
-        if(selection) {
-            if(selection.length) {
-                return selection.index;
-            } else {
-                return selection.index - 1;
-            }
-        } else {
-            return this.quill.getLength();
-        }
-    }
+  constructor(module, config, formData, onFileSelected?: any) {
+    super(module, config, onFileSelected);
+    this.formData = formData;
+    this.modifyFormData();
+  }
+
+  modifyFormData() {
+    const { imageSrc } = this.quill.getFormat(this.selection.index - 1, 1);
+
+    if (!imageSrc || this.selection.index === 0) {
+      this.selection = {
+        index: this.selection.index + 1,
+        length: 0,
+      };
+      this.quill.setSelection(this.selection.index, this.selection.length, SILENT_ACTION);
+    }
+
+    const imgElement = this.quill.getLeaf(this.selection.index)[0].domNode;
+    if (imgElement) {
+      this.formData.width = this.formData.width ?? getWidth($(imgElement));
+      this.formData.height = this.formData.height ?? getHeight($(imgElement));
+    }
+  }
+
+  pasteImage(formData, event) {
+    this.quill.deleteText(this.embedFormatIndex(), 1, SILENT_ACTION);
+    this.selection.index -= 1;
+    super.pasteImage(formData, event);
+  }
+
+  embedFormatIndex() {
+    const selection = this.selection ?? this.quill.getSelection();
+
+    if (selection) {
+      if (selection.length) {
+        return selection.index;
+      }
+      return selection.index - 1;
+    }
+    return this.quill.getLength();
+  }
 }
 
 class FileStrategy extends BaseStrategy {
-    constructor(module, config, onFileSelected) {
-        super(module, config, onFileSelected);
-        this.useBase64 = !isDefined(this.config.fileUploadMode) || this.config.fileUploadMode === 'base64';
+  useBase64: boolean;
 
-        this.isValidInternal = false;
-        this.onFileSelected = onFileSelected;
-        this.data = null;
-    }
+  isValidInternal: boolean;
 
-    upload() {
-        if(this.useBase64) {
-            this.base64Upload(this.data);
-        } else if(this.data.value.length) {
-            this.data.component.upload();
-        }
+  onFileSelected: any;
 
-        return true;
-    }
+  data: any;
 
-    isValid() {
-        return this.isValidInternal;
-    }
+  constructor(module, config, onFileSelected) {
+    // @ts-expect-error
+    super(module, config, onFileSelected);
+    this.useBase64 = !isDefined(this.config.fileUploadMode) || this.config.fileUploadMode === 'base64';
 
-    onUploaded(data) {
-        serverUpload(this.config.uploadDirectory, data.file.name, this.quill, this.selection.index);
-    }
+    this.isValidInternal = false;
+    this.onFileSelected = onFileSelected;
+    this.data = null;
+  }
 
-    base64Upload(data) {
-        this.quill.getModule('uploader').upload(this.selection, data.value, true);
+  upload() {
+    if (this.useBase64) {
+      this.base64Upload(this.data);
+    } else if (this.data.value.length) {
+      this.data.component.upload();
     }
 
-    pasteImage(formData, event) {
-        if(this.useBase64) {
-            super.pasteImage(formData, event);
-        }
-    }
+    return true;
+  }
 
-    isBase64Editable() {
-        return this.config.fileUploadMode === 'both';
-    }
+  isValid() {
+    return this.isValidInternal;
+  }
+
+  onUploaded(data) {
+    serverUpload(this.config.uploadDirectory, data.file.name, this.quill, this.selection.index);
+  }
 
-    validate(e) {
-        const fileUploader = e.component;
+  base64Upload(data) {
+    this.quill.getModule('uploader').upload(this.selection, data.value, true);
+  }
 
-        this.isValidInternal = !fileUploader._files.some(file => !file.isValid());
-        if(fileUploader._files.length === 0) {
-            this.isValidInternal = false;
-        }
+  pasteImage(formData, event) {
+    if (this.useBase64) {
+      super.pasteImage(formData, event);
     }
+  }
 
-    getFileUploaderOptions() {
-        const fileUploaderOptions = {
-            uploadUrl: this.config.uploadUrl,
-            onValueChanged: (data) => {
-                this.validate(data);
+  isBase64Editable() {
+    return this.config.fileUploadMode === 'both';
+  }
 
-                this.data = data;
-                this.onFileSelected();
-            },
-            onUploaded: e => this.onUploaded(e)
-        };
+  validate(e) {
+    const fileUploader = e.component;
 
-        return extend({}, getFileUploaderBaseOptions(), fileUploaderOptions, this.config.fileUploaderOptions);
+    this.isValidInternal = !fileUploader._files.some((file) => !file.isValid());
+    if (fileUploader._files.length === 0) {
+      this.isValidInternal = false;
     }
+  }
+
+  getFileUploaderOptions() {
+    const fileUploaderOptions = {
+      uploadUrl: this.config.uploadUrl,
+      onValueChanged: (data) => {
+        this.validate(data);
+
+        this.data = data;
+        this.onFileSelected();
+      },
+      onUploaded: (e) => this.onUploaded(e),
+    };
 
-    getItemsConfig() {
-        return [
-            {
-                itemType: 'simple',
-                dataField: 'files',
-                colSpan: 11,
-                label: { visible: false },
-                template: () => {
-                    const $content = $('<div>');
-                    this.module.editorInstance._createComponent($content, FileUploader, this.getFileUploaderOptions());
-
-                    return $content;
-                }
-            }, {
-                itemType: 'simple',
-                colSpan: 11,
-                label: { visible: false },
-                editorType: 'dxCheckBox',
-                editorOptions: {
-                    value: this.useBase64,
-                    visible: this.isBase64Editable(),
-                    text: localizationMessage.format(DIALOG_IMAGE_ENCODE_TO_BASE64),
-                    onValueChanged: (e) => {
-                        if(this.isBase64Editable()) {
-                            this.useBase64 = e.value;
-                        }
-                    }
-                }
+    return extend({}, getFileUploaderBaseOptions(), fileUploaderOptions, this.config.fileUploaderOptions);
+  }
+
+  getItemsConfig() {
+    return [
+      {
+        itemType: 'simple',
+        dataField: 'files',
+        colSpan: 11,
+        label: { visible: false },
+        template: () => {
+          const $content = $('<div>');
+          this.module.editorInstance._createComponent($content, FileUploader, this.getFileUploaderOptions());
+
+          return $content;
+        },
+      }, {
+        itemType: 'simple',
+        colSpan: 11,
+        label: { visible: false },
+        editorType: 'dxCheckBox',
+        editorOptions: {
+          value: this.useBase64,
+          visible: this.isBase64Editable(),
+          text: localizationMessage.format(DIALOG_IMAGE_ENCODE_TO_BASE64),
+          onValueChanged: (e) => {
+            if (this.isBase64Editable()) {
+              this.useBase64 = e.value;
             }
-        ];
-    }
+          },
+        },
+      },
+    ];
+  }
 }
 
 export function correctSlashesInUrl(url) {
-    return url[url.length - 1] !== '/' ? (url + '/') : url;
+  return url[url.length - 1] !== '/' ? `${url}/` : url;
 }
 
 export function getFileUploaderBaseOptions() {
-    return {
-        value: [],
-        name: FILE_UPLOADER_NAME,
-        accept: 'image/*',
-        uploadMode: 'useButtons'
-    };
+  return {
+    value: [],
+    name: FILE_UPLOADER_NAME,
+    accept: 'image/*',
+    uploadMode: 'useButtons',
+  };
 }
 
 export function urlUpload(quill, index, attributes) {
-    quill.insertEmbed(index, 'extendedImage', attributes, USER_ACTION);
-    quill.setSelection(index + 1, 0, USER_ACTION);
+  quill.insertEmbed(index, 'extendedImage', attributes, USER_ACTION);
+  quill.setSelection(index + 1, 0, USER_ACTION);
 }
 
 export function serverUpload(url, fileName, quill, pasteIndex) {
-    if(url) {
-        const imageUrl = correctSlashesInUrl(url) + fileName;
+  if (url) {
+    const imageUrl = correctSlashesInUrl(url) + fileName;
 
-        urlUpload(quill, pasteIndex, { src: imageUrl });
-    }
+    urlUpload(quill, pasteIndex, { src: imageUrl });
+  }
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/utils/m_table_helper.ts b/packages/devextreme/js/__internal/ui/html_editor/utils/m_table_helper.ts
index 080afab9d345..3a4f19f49f1a 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/utils/m_table_helper.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/utils/m_table_helper.ts
@@ -1,104 +1,104 @@
-import $ from '../../../core/renderer';
-import { each } from '../../../core/utils/iterator';
-import { camelize } from '../../../core/utils/inflector';
-
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { camelize } from '@js/core/utils/inflector';
+import { each } from '@js/core/utils/iterator';
 
 const TABLE_FORMATS = ['table', 'tableHeaderCell'];
 const TABLE_OPERATIONS = [
-    'insertTable',
-    'insertHeaderRow',
-    'insertRowAbove',
-    'insertRowBelow',
-    'insertColumnLeft',
-    'insertColumnRight',
-    'deleteColumn',
-    'deleteRow',
-    'deleteTable',
-    'cellProperties',
-    'tableProperties'
+  'insertTable',
+  'insertHeaderRow',
+  'insertRowAbove',
+  'insertRowBelow',
+  'insertColumnLeft',
+  'insertColumnRight',
+  'deleteColumn',
+  'deleteRow',
+  'deleteTable',
+  'cellProperties',
+  'tableProperties',
 ];
 
-
 function getTableFormats(quill) {
-    const tableModule = quill.getModule('table');
+  const tableModule = quill.getModule('table');
 
-    // backward compatibility with an old devextreme-quill packages
-    return tableModule?.tableFormats ? tableModule.tableFormats() : TABLE_FORMATS;
+  // backward compatibility with an old devextreme-quill packages
+  return tableModule?.tableFormats ? tableModule.tableFormats() : TABLE_FORMATS;
 }
 
 function hasEmbedContent(module, selection) {
-    return !!selection && module.quill.getText(selection).length < selection.length;
+  return !!selection && module.quill.getText(selection).length < selection.length;
 }
 
-function unfixTableWidth($table, { tableBlot, quill }) {
-    const unfixValue = 'initial';
+function unfixTableWidth($table, { tableBlot, quill }: { tableBlot?: any; quill: any }) {
+  const unfixValue = 'initial';
 
-    const formatBlot = tableBlot ?? quill.scroll.find($table.get(0));
+  const formatBlot = tableBlot ?? quill.scroll.find($table.get(0));
 
-    formatBlot.format('tableWidth', unfixValue);
+  formatBlot.format('tableWidth', unfixValue);
 }
 
 function getColumnElements($table, index = 0) {
-    return $table.find('tr').eq(index).find('th, td');
+  return $table.find('tr').eq(index).find('th, td');
 }
 
 function getAutoSizedElements($table, direction = 'horizontal') {
-    const result = [];
-    const isHorizontal = direction === 'horizontal';
-    const $lineElements = isHorizontal ? getColumnElements($table) : getRowElements($table);
-
-    $lineElements.each((index, element) => {
-        const $element = $(element);
-        if($element.get(0).style[isHorizontal ? 'width' : 'height'] === '') {
-            result.push($element);
-        }
-    });
-
-    return result;
+  const result: dxElementWrapper[] = [];
+  const isHorizontal = direction === 'horizontal';
+  const $lineElements = isHorizontal ? getColumnElements($table) : getRowElements($table);
+
+  $lineElements.each((index, element) => {
+    const $element = $(element);
+    // @ts-expect-error
+    if ($element.get(0).style[isHorizontal ? 'width' : 'height'] === '') {
+      result.push($element);
+    }
+  });
+
+  return result;
 }
 
 function setLineElementsFormat(module, { elements, property, value }) {
-    const tableBlotNames = module.quill.getModule('table').tableBlots;
-    const fullPropertyName = `cell${camelize(property, true)}`;
-    each(elements, (i, element) => {
-        let formatBlot = module.quill.scroll.find(element);
-        if(!tableBlotNames.includes(formatBlot.statics.blotName)) {
-            const descendBlot = formatBlot.descendant((blot) => tableBlotNames.includes(blot.statics.blotName));
-            formatBlot = descendBlot ? descendBlot[0] : null;
-        }
-        formatBlot?.format(fullPropertyName, value + 'px');
-    });
+  const tableBlotNames = module.quill.getModule('table').tableBlots;
+  const fullPropertyName = `cell${camelize(property, true)}`;
+  each(elements, (i, element) => {
+    let formatBlot = module.quill.scroll.find(element);
+    if (!tableBlotNames.includes(formatBlot.statics.blotName)) {
+      const descendBlot = formatBlot.descendant((blot) => tableBlotNames.includes(blot.statics.blotName));
+      formatBlot = descendBlot ? descendBlot[0] : null;
+    }
+    formatBlot?.format(fullPropertyName, `${value}px`);
+  });
 }
 
 function getLineElements($table, index, direction = 'horizontal') {
-    return direction === 'horizontal' ? getRowElements($table, index) : getColumnElements($table, index);
+  return direction === 'horizontal' ? getRowElements($table, index) : getColumnElements($table, index);
 }
 
 function getRowElements($table, index = 0) {
-    return $table.find(`th:nth-child(${(1 + index)}), td:nth-child(${(1 + index)})`);
+  return $table.find(`th:nth-child(${1 + index}), td:nth-child(${1 + index})`);
 }
 
 function getTableOperationHandler(quill, operationName, ...rest) {
-    return () => {
-        const table = quill.getModule('table');
-
-        if(!table) {
-            return;
-        }
-        quill.focus();
-        return table[operationName](...rest);
-    };
+  return () => {
+    const table = quill.getModule('table');
+
+    if (!table) {
+      return;
+    }
+    quill.focus();
+    return table[operationName](...rest);
+  };
 }
 
 export {
-    TABLE_OPERATIONS,
-    getTableFormats,
-    getTableOperationHandler,
-    unfixTableWidth,
-    getColumnElements,
-    getAutoSizedElements,
-    setLineElementsFormat,
-    getLineElements,
-    getRowElements,
-    hasEmbedContent
+  getAutoSizedElements,
+  getColumnElements,
+  getLineElements,
+  getRowElements,
+  getTableFormats,
+  getTableOperationHandler,
+  hasEmbedContent,
+  setLineElementsFormat,
+  TABLE_OPERATIONS,
+  unfixTableWidth,
 };
diff --git a/packages/devextreme/js/__internal/ui/html_editor/utils/m_templates_storage.ts b/packages/devextreme/js/__internal/ui/html_editor/utils/m_templates_storage.ts
index 5f739696c3cf..41f929778ad5 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/utils/m_templates_storage.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/utils/m_templates_storage.ts
@@ -1,36 +1,40 @@
-import { isDefined, isEmptyObject } from '../../../core/utils/type';
+import { isDefined, isEmptyObject } from '@js/core/utils/type';
 
 export default class TemplatesStorage {
-    constructor() {
-        this._storage = {};
-    }
+  _storage: any;
 
-    set({ editorKey, marker }, value) {
-        this._storage[editorKey] ??= {};
-        this._storage[editorKey][marker] = value;
-    }
+  constructor() {
+    this._storage = {};
+  }
 
-    get({ editorKey, marker }) {
-        const isQuillFormatCall = !isDefined(editorKey);
+  set({ editorKey, marker }, value) {
+    this._storage[editorKey] ??= {};
+    this._storage[editorKey][marker] = value;
+  }
 
-        // NOTE: If anonymous templates are used, mentions are parsed from the markup.
-        // The Quill format does not have information about a related HtmlEditor instance.
-        // In this case, we need to use the latest template in the storage
-        // because the appropriate instance was already created and added to the storage.
+  get({ editorKey, marker }) {
+    const isQuillFormatCall = !isDefined(editorKey);
 
-        return isQuillFormatCall
-            ? Object.values(this._storage).at(-1)?.[marker]
-            : this._storage[editorKey]?.[marker];
-    }
+    // NOTE: If anonymous templates are used, mentions are parsed from the markup.
+    // The Quill format does not have information about a related HtmlEditor instance.
+    // In this case, we need to use the latest template in the storage
+    // because the appropriate instance was already created and added to the storage.
 
-    delete({ editorKey, marker }) {
-        if(!this._storage[editorKey]) {
-            return;
-        }
+    return isQuillFormatCall
+      ? Object.values(this._storage).at(-1)?.[marker]
+      : this._storage[editorKey]?.[marker];
+  }
+
+  delete({ editorKey, marker }) {
+    if (!this._storage[editorKey]) {
+      return;
+    }
 
-        delete this._storage[editorKey][marker];
-        if(isEmptyObject(this._storage[editorKey])) {
-            delete this._storage[editorKey];
-        }
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete this._storage[editorKey][marker];
+    if (isEmptyObject(this._storage[editorKey])) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete this._storage[editorKey];
     }
+  }
 }
diff --git a/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts b/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts
index 8265d9f0aa41..f107910b39a8 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts
@@ -1,36 +1,33 @@
-import $ from '../../../core/renderer';
-import localizationMessage from '../../../localization/message';
+import $ from '@js/core/renderer';
+import { camelize } from '@js/core/utils/inflector';
+import { each } from '@js/core/utils/iterator';
+import { getOuterHeight, getOuterWidth, getWidth } from '@js/core/utils/size';
+import { isBoolean, isDefined } from '@js/core/utils/type';
+import { getWindow } from '@js/core/utils/window';
+import localizationMessage from '@js/localization/message';
+import ButtonGroup from '@js/ui/button_group';
+import ColorBox from '@js/ui/color_box';
+import Form from '@js/ui/form';
+import ScrollView from '@js/ui/scroll_view';
+
+import { getQuill } from '../m_quill_importer';
+import { ImageUploader } from './m_image_uploader_helper';
 import {
-    getTableOperationHandler,
-    hasEmbedContent,
-    unfixTableWidth,
-    getColumnElements,
-    getAutoSizedElements,
-    setLineElementsFormat,
-    getLineElements,
-    getRowElements
-} from './table_helper';
-import { isDefined, isBoolean } from '../../../core/utils/type';
-import { each } from '../../../core/utils/iterator';
-
-import Form from '../../form';
-import ButtonGroup from '../../button_group';
-import ColorBox from '../../color_box';
-import ScrollView from '../../scroll_view';
-
-import { getOuterHeight, getWidth, getOuterWidth } from '../../../core/utils/size';
-
-import { ImageUploader } from './image_uploader_helper';
-
-import { camelize } from '../../../core/utils/inflector';
-import { getWindow } from '../../../core/utils/window';
-import { getQuill } from '../quill_importer';
+  getAutoSizedElements,
+  getColumnElements,
+  getLineElements,
+  getRowElements,
+  getTableOperationHandler,
+  hasEmbedContent,
+  setLineElementsFormat,
+  unfixTableWidth,
+} from './m_table_helper';
 
 const MIN_HEIGHT = 400;
 const BORDER_STYLES = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];
-const BORDER_STYLES_TRANSLATED = BORDER_STYLES.map(style => ({
-    id: style,
-    value: localizationMessage.format(`dxHtmlEditor-borderStyle${camelize(style, true)}`),
+const BORDER_STYLES_TRANSLATED = BORDER_STYLES.map((style) => ({
+  id: style,
+  value: localizationMessage.format(`dxHtmlEditor-borderStyle${camelize(style, true)}`),
 }));
 
 const USER_ACTION = 'user';
@@ -50,827 +47,855 @@ const DIALOG_TABLE_FIELD_COLUMNS = 'dxHtmlEditor-dialogInsertTableRowsField';
 const DIALOG_TABLE_FIELD_ROWS = 'dxHtmlEditor-dialogInsertTableColumnsField';
 
 const ICON_MAP = {
-    insertHeaderRow: 'header',
-    clear: 'clearformat'
+  insertHeaderRow: 'header',
+  clear: 'clearformat',
 };
 
 function getFormatHandlers(module) {
-    return {
-        clear: ({ event }) => {
-            const range = module.quill.getSelection();
-            if(range) {
-                module.saveValueChangeEvent(event);
-                module.quill.removeFormat(range);
-                getToolbarModule(module)?.updateFormatWidgets();
-            }
-        },
-        link: prepareLinkHandler(module),
-        image: prepareImageHandler(module, module.editorInstance.option('imageUpload')),
-        color: prepareColorClickHandler(module, 'color'),
-        background: prepareColorClickHandler(module, 'background'),
-        orderedList: prepareShortcutHandler(module, 'list', 'ordered'),
-        bulletList: prepareShortcutHandler(module, 'list', 'bullet'),
-        alignLeft: prepareShortcutHandler(module, 'align', 'left'),
-        alignCenter: prepareShortcutHandler(module, 'align', 'center'),
-        alignRight: prepareShortcutHandler(module, 'align', 'right'),
-        alignJustify: prepareShortcutHandler(module, 'align', 'justify'),
-        codeBlock: getDefaultClickHandler(module, 'code-block'),
-        undo: ({ event }) => {
-            module.saveValueChangeEvent(event);
-            module.quill.history.undo();
-        },
-        redo: ({ event }) => {
-            module.saveValueChangeEvent(event);
-            module.quill.history.redo();
-        },
-        increaseIndent: ({ event }) => {
-            applyFormat(module, ['indent', '+1', USER_ACTION], event);
-        },
-        decreaseIndent: ({ event }) => {
-            applyFormat(module, ['indent', '-1', USER_ACTION], event);
-        },
-        superscript: prepareShortcutHandler(module, 'script', 'super'),
-        subscript: prepareShortcutHandler(module, 'script', 'sub'),
-        insertTable: prepareInsertTableHandler(module),
-        insertHeaderRow: getTableOperationHandler(module.quill, 'insertHeaderRow'),
-        insertRowAbove: getTableOperationHandler(module.quill, 'insertRowAbove'),
-        insertRowBelow: getTableOperationHandler(module.quill, 'insertRowBelow'),
-        insertColumnLeft: getTableOperationHandler(module.quill, 'insertColumnLeft'),
-        insertColumnRight: getTableOperationHandler(module.quill, 'insertColumnRight'),
-        deleteColumn: getTableOperationHandler(module.quill, 'deleteColumn'),
-        deleteRow: getTableOperationHandler(module.quill, 'deleteRow'),
-        deleteTable: getTableOperationHandler(module.quill, 'deleteTable'),
-        cellProperties: prepareShowFormProperties(module, 'cell'),
-        tableProperties: prepareShowFormProperties(module, 'table')
-    };
+  return {
+    clear: ({ event }) => {
+      const range = module.quill.getSelection();
+      if (range) {
+        module.saveValueChangeEvent(event);
+        module.quill.removeFormat(range);
+        getToolbarModule(module)?.updateFormatWidgets();
+      }
+    },
+    link: prepareLinkHandler(module),
+    image: prepareImageHandler(module, module.editorInstance.option('imageUpload')),
+    color: prepareColorClickHandler(module, 'color'),
+    background: prepareColorClickHandler(module, 'background'),
+    orderedList: prepareShortcutHandler(module, 'list', 'ordered'),
+    bulletList: prepareShortcutHandler(module, 'list', 'bullet'),
+    alignLeft: prepareShortcutHandler(module, 'align', 'left'),
+    alignCenter: prepareShortcutHandler(module, 'align', 'center'),
+    alignRight: prepareShortcutHandler(module, 'align', 'right'),
+    alignJustify: prepareShortcutHandler(module, 'align', 'justify'),
+    codeBlock: getDefaultClickHandler(module, 'code-block'),
+    undo: ({ event }) => {
+      module.saveValueChangeEvent(event);
+      module.quill.history.undo();
+    },
+    redo: ({ event }) => {
+      module.saveValueChangeEvent(event);
+      module.quill.history.redo();
+    },
+    increaseIndent: ({ event }) => {
+      applyFormat(module, ['indent', '+1', USER_ACTION], event);
+    },
+    decreaseIndent: ({ event }) => {
+      applyFormat(module, ['indent', '-1', USER_ACTION], event);
+    },
+    superscript: prepareShortcutHandler(module, 'script', 'super'),
+    subscript: prepareShortcutHandler(module, 'script', 'sub'),
+    insertTable: prepareInsertTableHandler(module),
+    insertHeaderRow: getTableOperationHandler(module.quill, 'insertHeaderRow'),
+    insertRowAbove: getTableOperationHandler(module.quill, 'insertRowAbove'),
+    insertRowBelow: getTableOperationHandler(module.quill, 'insertRowBelow'),
+    insertColumnLeft: getTableOperationHandler(module.quill, 'insertColumnLeft'),
+    insertColumnRight: getTableOperationHandler(module.quill, 'insertColumnRight'),
+    deleteColumn: getTableOperationHandler(module.quill, 'deleteColumn'),
+    deleteRow: getTableOperationHandler(module.quill, 'deleteRow'),
+    deleteTable: getTableOperationHandler(module.quill, 'deleteTable'),
+    cellProperties: prepareShowFormProperties(module, 'cell'),
+    tableProperties: prepareShowFormProperties(module, 'table'),
+  };
 }
 
-function resetFormDialogOptions(editorInstance, { contentTemplate, title, minHeight, minWidth, maxWidth }) {
-    editorInstance.formDialogOption({
-        contentTemplate,
-        title,
-        minHeight: minHeight ?? 0,
-        minWidth: minWidth ?? 0,
-        maxWidth: maxWidth ?? 'none'
-    });
+function resetFormDialogOptions(editorInstance, {
+  contentTemplate, title, minHeight, minWidth, maxWidth,
+}) {
+  editorInstance.formDialogOption({
+    contentTemplate,
+    title,
+    minHeight: minHeight ?? 0,
+    minWidth: minWidth ?? 0,
+    maxWidth: maxWidth ?? 'none',
+  });
 }
 
 function prepareShowFormProperties(module, type) {
-    return ($element) => {
-        if(!$element?.length) {
-            $element = $(getTargetTableNode(module, type));
-        }
-        const [tableBlot, rowBlot] = module.quill.getModule('table').getTable() ?? [];
-
-        const formats = module.quill.getFormat(module.editorInstance.getSelection(true));
-
-        const tablePropertiesFormConfig = getFormConfigConstructor(type)(module, { $element, formats, tableBlot, rowBlot });
+  return ($element) => {
+    if (!$element?.length) {
+      $element = $(getTargetTableNode(module, type));
+    }
+    const [tableBlot, rowBlot] = module.quill.getModule('table').getTable() ?? [];
 
-        const { contentTemplate, title, minHeight, minWidth, maxWidth } = module.editorInstance._formDialog._popup.option();
-        const savedOptions = { contentTemplate, title, minHeight, minWidth, maxWidth };
+    const formats = module.quill.getFormat(module.editorInstance.getSelection(true));
 
-        let formInstance;
+    const tablePropertiesFormConfig = getFormConfigConstructor(type)(module, {
+      $element, formats, tableBlot, rowBlot,
+    });
 
-        module.editorInstance.formDialogOption({
-            'contentTemplate': (container) => {
-                const $content = $('<div>').appendTo(container);
-                const $form = $('<div>').appendTo($content);
-                module.editorInstance._createComponent($form, Form, tablePropertiesFormConfig.formOptions);
-                module.editorInstance._createComponent($content, ScrollView, {});
-                formInstance = $form.dxForm('instance');
+    const {
+      contentTemplate, title, minHeight, minWidth, maxWidth,
+    } = module.editorInstance._formDialog._popup.option();
+    const savedOptions = {
+      contentTemplate, title, minHeight, minWidth, maxWidth,
+    };
 
-                return $content;
-            },
-            title: localizationMessage.format(`dxHtmlEditor-${type}Properties`),
-            minHeight: MIN_HEIGHT,
-            minWidth: Math.min(800, getWidth(getWindow()) * 0.9 - 1),
-            maxWidth: getWidth(getWindow()) * 0.9
-        });
+    let formInstance;
+
+    module.editorInstance.formDialogOption({
+      contentTemplate: (container) => {
+        const $content = $('<div>').appendTo(container);
+        const $form = $('<div>').appendTo($content);
+        module.editorInstance._createComponent($form, Form, tablePropertiesFormConfig.formOptions);
+        module.editorInstance._createComponent($content, ScrollView, {});
+        // @ts-expect-error
+        formInstance = $form.dxForm('instance');
+
+        return $content;
+      },
+      title: localizationMessage.format(`dxHtmlEditor-${type}Properties`),
+      minHeight: MIN_HEIGHT,
+      minWidth: Math.min(800, getWidth(getWindow()) * 0.9 - 1),
+      maxWidth: getWidth(getWindow()) * 0.9,
+    });
 
-        const promise = module.editorInstance.showFormDialog();
+    const promise = module.editorInstance.showFormDialog();
 
-        promise.done((formData, event) => {
-            module.saveValueChangeEvent(event);
-            tablePropertiesFormConfig.applyHandler(formInstance);
-            resetFormDialogOptions(module.editorInstance, savedOptions);
-        });
+    promise.done((formData, event) => {
+      module.saveValueChangeEvent(event);
+      tablePropertiesFormConfig.applyHandler(formInstance);
+      resetFormDialogOptions(module.editorInstance, savedOptions);
+    });
 
-        promise.fail(() => {
-            module.quill.focus();
-            resetFormDialogOptions(module.editorInstance, savedOptions);
-        });
-    };
+    promise.fail(() => {
+      module.quill.focus();
+      resetFormDialogOptions(module.editorInstance, savedOptions);
+    });
+  };
 }
 
 function applyFormat(module, formatArgs, event) {
-    module.saveValueChangeEvent(event);
-    module.quill.format(...formatArgs);
+  module.saveValueChangeEvent(event);
+  module.quill.format(...formatArgs);
 }
 
 function getTargetTableNode(module, partName) {
-    const currentSelectionParts = module.quill.getModule('table').getTable();
-    return partName === 'table' ? currentSelectionParts[0].domNode : currentSelectionParts[2].domNode;
+  const currentSelectionParts = module.quill.getModule('table').getTable();
+  return partName === 'table' ? currentSelectionParts[0].domNode : currentSelectionParts[2].domNode;
 }
 
 function getLinkRange(module, range) {
-    const Quill = getQuill();
-    const LinkBlot = Quill.import('formats/link');
-    let link;
-    let linkOffset;
-
+  const Quill = getQuill();
+  const LinkBlot = Quill.import('formats/link');
+  let link;
+  let linkOffset;
+
+  [link, linkOffset] = module.quill.scroll.descendant(
+    LinkBlot,
+    range.index,
+  );
+
+  if (!link && range.length === 0) {
+    // NOTE:
+    // See T1157840
+    // When a mouse pointer is placed on the link's right border, the quill.scroll.descendant method does not return information about the link.
+    // In this case, we receive a necessary information from the previous index.
     [link, linkOffset] = module.quill.scroll.descendant(
-        LinkBlot,
-        range.index
+      LinkBlot,
+      range.index - 1,
     );
-
-    if(!link && range.length === 0) {
-        // NOTE:
-        // See T1157840
-        // When a mouse pointer is placed on the link's right border, the quill.scroll.descendant method does not return information about the link.
-        // In this case, we receive a necessary information from the previous index.
-        [link, linkOffset] = module.quill.scroll.descendant(
-            LinkBlot,
-            range.index - 1
-        );
-        if(link) {
-            linkOffset += 1;
-        }
+    if (link) {
+      linkOffset += 1;
     }
+  }
 
-    const result = !link ? null : {
-        index: range.index - linkOffset,
-        length: link.length()
-    };
+  const result = !link ? null : {
+    index: range.index - linkOffset,
+    length: link.length(),
+  };
 
-    return result;
+  return result;
 }
 
 function getColorFromFormat(value) {
-    return Array.isArray(value) ? value[0] : value;
+  return Array.isArray(value) ? value[0] : value;
 }
 
 function prepareLinkHandler(module) {
-    return () => {
-        module.quill.focus();
+  return () => {
+    module.quill.focus();
+
+    let selection = module.quill.getSelection();
+    const formats = selection ? module.quill.getFormat() : {};
+    const isCursorAtLink = formats.link !== undefined && selection?.length === 0;
+    let href = formats.link || '';
+
+    if (isCursorAtLink) {
+      const linkRange = getLinkRange(module, selection);
+      if (linkRange) {
+        selection = linkRange;
+      } else {
+        href = '';
+      }
+    }
 
-        let selection = module.quill.getSelection();
-        const formats = selection ? module.quill.getFormat() : {};
-        const isCursorAtLink = formats.link !== undefined && selection?.length === 0;
-        let href = formats.link || '';
-
-        if(isCursorAtLink) {
-            const linkRange = getLinkRange(module, selection);
-            if(linkRange) {
-                selection = linkRange;
-            } else {
-                href = '';
-            }
-        }
+    const selectionHasEmbedContent = hasEmbedContent(module, selection);
+    const formData = {
+      href,
+      text: selection && !selectionHasEmbedContent ? module.quill.getText(selection) : '',
+      target: Object.prototype.hasOwnProperty.call(formats, 'target') ? !!formats.target : true,
+    };
+    module.editorInstance.formDialogOption('title', localizationMessage.format(DIALOG_LINK_CAPTION));
 
-        const selectionHasEmbedContent = hasEmbedContent(module, selection);
-        const formData = {
-            href,
-            text: selection && !selectionHasEmbedContent ? module.quill.getText(selection) : '',
-            target: Object.prototype.hasOwnProperty.call(formats, 'target') ? !!formats.target : true
-        };
-        module.editorInstance.formDialogOption('title', localizationMessage.format(DIALOG_LINK_CAPTION));
-
-        const promise = module.editorInstance.showFormDialog({
-            formData: formData,
-            items: getLinkFormItems(selectionHasEmbedContent)
-        });
+    const promise = module.editorInstance.showFormDialog({
+      formData,
+      items: getLinkFormItems(selectionHasEmbedContent),
+    });
 
-        promise.done((formData, event) => {
-            if(selection && !selectionHasEmbedContent) {
-                const text = formData.text || formData.href;
-                const { index, length } = selection;
-
-                formData.text = undefined;
-                module.saveValueChangeEvent(event);
-
-                length && module.quill.deleteText(index, length, SILENT_ACTION);
-                module.quill.insertText(index, text, 'link', formData, USER_ACTION);
-                module.quill.setSelection(index + text.length, 0, USER_ACTION);
-            } else {
-                formData.text = !selection && !formData.text ? formData.href : formData.text;
-                applyFormat(module, ['link', formData, USER_ACTION], event);
-            }
-        });
+    promise.done((formData, event) => {
+      if (selection && !selectionHasEmbedContent) {
+        const text = formData.text || formData.href;
+        const { index, length } = selection;
+
+        formData.text = undefined;
+        module.saveValueChangeEvent(event);
+
+        length && module.quill.deleteText(index, length, SILENT_ACTION);
+        module.quill.insertText(index, text, 'link', formData, USER_ACTION);
+        module.quill.setSelection(index + text.length, 0, USER_ACTION);
+      } else {
+        formData.text = !selection && !formData.text ? formData.href : formData.text;
+        applyFormat(module, ['link', formData, USER_ACTION], event);
+      }
+    });
 
-        promise.fail(() => {
-            module.quill.focus();
-        });
-    };
+    promise.fail(() => {
+      module.quill.focus();
+    });
+  };
 }
 
 function prepareImageHandler(module, imageUploadOption) {
-    const imageUploader = new ImageUploader(module, imageUploadOption);
-    return () => {
-        imageUploader.render();
-    };
+  const imageUploader = new ImageUploader(module, imageUploadOption);
+  return () => {
+    imageUploader.render();
+  };
 }
 
 function getLinkFormItems(selectionHasEmbedContent) {
-    return [
-        { dataField: 'href', label: { text: localizationMessage.format(DIALOG_LINK_FIELD_URL) } },
-        {
-            dataField: 'text',
-            label: { text: localizationMessage.format(DIALOG_LINK_FIELD_TEXT) },
-            visible: !selectionHasEmbedContent
-        },
-        {
-            dataField: 'target',
-            editorType: 'dxCheckBox',
-            editorOptions: {
-                text: localizationMessage.format(DIALOG_LINK_FIELD_TARGET)
-            },
-            cssClass: DIALOG_LINK_FIELD_TARGET_CLASS,
-            label: { visible: false }
-        }
-    ];
+  return [
+    { dataField: 'href', label: { text: localizationMessage.format(DIALOG_LINK_FIELD_URL) } },
+    {
+      dataField: 'text',
+      label: { text: localizationMessage.format(DIALOG_LINK_FIELD_TEXT) },
+      visible: !selectionHasEmbedContent,
+    },
+    {
+      dataField: 'target',
+      editorType: 'dxCheckBox',
+      editorOptions: {
+        text: localizationMessage.format(DIALOG_LINK_FIELD_TARGET),
+      },
+      cssClass: DIALOG_LINK_FIELD_TARGET_CLASS,
+      label: { visible: false },
+    },
+  ];
 }
 
 function prepareColorClickHandler(module, name) {
-    return () => {
-        const formData = module.quill.getFormat();
-        const caption = name === 'color' ? DIALOG_COLOR_CAPTION : DIALOG_BACKGROUND_CAPTION;
-        module.editorInstance.formDialogOption('title', localizationMessage.format(caption));
-        const promise = module.editorInstance.showFormDialog({
-            formData: formData,
-            items: [{
-                dataField: name,
-                editorType: 'dxColorView',
-                editorOptions: {
-                    focusStateEnabled: false
-                },
-                label: { visible: false }
-            }]
-        });
+  return () => {
+    const formData = module.quill.getFormat();
+    const caption = name === 'color' ? DIALOG_COLOR_CAPTION : DIALOG_BACKGROUND_CAPTION;
+    module.editorInstance.formDialogOption('title', localizationMessage.format(caption));
+    const promise = module.editorInstance.showFormDialog({
+      formData,
+      items: [{
+        dataField: name,
+        editorType: 'dxColorView',
+        editorOptions: {
+          focusStateEnabled: false,
+        },
+        label: { visible: false },
+      }],
+    });
 
-        promise.done((formData, event) => {
-            applyFormat(module, [name, formData[name], USER_ACTION], event);
-        });
-        promise.fail(() => {
-            module.quill.focus();
-        });
-    };
+    promise.done((formData, event) => {
+      applyFormat(module, [name, formData[name], USER_ACTION], event);
+    });
+    promise.fail(() => {
+      module.quill.focus();
+    });
+  };
 }
 
 function prepareShortcutHandler(module, name, shortcutValue) {
-    return ({ event }) => {
-        const formats = module.quill.getFormat();
-        const value = formats[name] === shortcutValue ? false : shortcutValue;
+  return ({ event }) => {
+    const formats = module.quill.getFormat();
+    const value = formats[name] === shortcutValue ? false : shortcutValue;
 
-        applyFormat(module, [name, value, USER_ACTION], event);
+    applyFormat(module, [name, value, USER_ACTION], event);
 
-        getToolbarModule(module)?.updateFormatWidgets(true);
-    };
+    getToolbarModule(module)?.updateFormatWidgets(true);
+  };
 }
 
 function getToolbarModule(module) {
-    return module._updateFormatWidget ? module : module.quill.getModule('toolbar');
+  return module._updateFormatWidget ? module : module.quill.getModule('toolbar');
 }
 
 function getDefaultClickHandler(module, name) {
-    return ({ event }) => {
-        const formats = module.quill.getFormat();
-        const value = formats[name];
-        const newValue = !(isBoolean(value) ? value : isDefined(value));
+  return ({ event }) => {
+    const formats = module.quill.getFormat();
+    const value = formats[name];
+    const newValue = !(isBoolean(value) ? value : isDefined(value));
 
-        applyFormat(module, [name, newValue, USER_ACTION], event);
+    applyFormat(module, [name, newValue, USER_ACTION], event);
 
-        getToolbarModule(module)?._updateFormatWidget(name, newValue, formats);
-    };
+    getToolbarModule(module)?._updateFormatWidget(name, newValue, formats);
+  };
 }
 
 function insertTableFormItems() {
-    return [
-        {
-            dataField: 'columns',
-            editorType: 'dxNumberBox',
-            editorOptions: {
-                min: 1
-            },
-            label: { text: localizationMessage.format(DIALOG_TABLE_FIELD_COLUMNS) }
-        },
-        {
-            dataField: 'rows',
-            editorType: 'dxNumberBox',
-            editorOptions: {
-                min: 1
-            },
-            label: { text: localizationMessage.format(DIALOG_TABLE_FIELD_ROWS) }
-        }
-    ];
+  return [
+    {
+      dataField: 'columns',
+      editorType: 'dxNumberBox',
+      editorOptions: {
+        min: 1,
+      },
+      label: { text: localizationMessage.format(DIALOG_TABLE_FIELD_COLUMNS) },
+    },
+    {
+      dataField: 'rows',
+      editorType: 'dxNumberBox',
+      editorOptions: {
+        min: 1,
+      },
+      label: { text: localizationMessage.format(DIALOG_TABLE_FIELD_ROWS) },
+    },
+  ];
 }
 
 function prepareInsertTableHandler(module) {
-    return () => {
-        const formats = module.quill.getFormat();
-        const isTableFocused = module._tableFormats.some(
-            format => Object.prototype.hasOwnProperty.call(formats, format)
-        );
-        const formData = { rows: 1, columns: 1 };
-
-        if(isTableFocused) {
-            module.quill.focus();
-            return;
-        }
+  return () => {
+    const formats = module.quill.getFormat();
+    const isTableFocused = module._tableFormats.some(
+      (format) => Object.prototype.hasOwnProperty.call(formats, format),
+    );
+    const formData = { rows: 1, columns: 1 };
+
+    if (isTableFocused) {
+      module.quill.focus();
+      return;
+    }
 
-        module.editorInstance.formDialogOption('title', localizationMessage.format(DIALOG_TABLE_CAPTION));
+    module.editorInstance.formDialogOption('title', localizationMessage.format(DIALOG_TABLE_CAPTION));
 
-        const promise = module.editorInstance.showFormDialog({
-            formData,
-            items: insertTableFormItems()
-        });
+    const promise = module.editorInstance.showFormDialog({
+      formData,
+      items: insertTableFormItems(),
+    });
 
-        promise
-            .done((formData, event) => {
-                module.quill.focus();
+    promise
+      .done((formData, event) => {
+        module.quill.focus();
 
-                const table = module.quill.getModule('table');
-                if(table) {
-                    module.saveValueChangeEvent(event);
+        const table = module.quill.getModule('table');
+        if (table) {
+          module.saveValueChangeEvent(event);
 
-                    const { columns, rows } = formData;
-                    table.insertTable(columns, rows);
-                }
-            })
-            .always(() => {
-                module.quill.focus();
-            });
-    };
+          const { columns, rows } = formData;
+          table.insertTable(columns, rows);
+        }
+      })
+      .always(() => {
+        module.quill.focus();
+      });
+  };
 }
 
 function getTablePropertiesFormConfig(module, { $element, formats, tableBlot }) {
-    const window = getWindow();
-    let alignmentEditorInstance;
-    let borderColorEditorInstance;
-    let backgroundColorEditorInstance;
-    const $table = $element;
-    const editorInstance = module.editorInstance;
-    const startTableWidth = parseInt(formats.tableWidth) || getOuterWidth($table);
-    const tableStyles = window.getComputedStyle($table.get(0));
-    const startTextAlign = tableStyles.textAlign === 'start' ? 'left' : tableStyles.textAlign;
-
-    const formOptions = {
-        colCount: 2,
-        formData: {
-            width: startTableWidth,
-            height: isDefined(formats.tableHeight) ? parseInt(formats.tableHeight) : getOuterHeight($table),
-            backgroundColor: formats.tableBackgroundColor || tableStyles.backgroundColor,
-            borderStyle: formats.tableBorderStyle || tableStyles.borderTopStyle,
-            borderColor: formats.tableBorderColor || tableStyles.borderTopColor,
-            borderWidth: parseInt(isDefined(formats.tableBorderWidth) ? formats.tableBorderWidth : tableStyles.borderTopWidth),
-            alignment: formats.tableAlign || startTextAlign
+  const window = getWindow();
+  let alignmentEditorInstance;
+  let borderColorEditorInstance;
+  let backgroundColorEditorInstance;
+  const $table = $element;
+  const { editorInstance } = module;
+  // eslint-disable-next-line radix
+  const startTableWidth = parseInt(formats.tableWidth) || getOuterWidth($table);
+  const tableStyles = window.getComputedStyle($table.get(0));
+  const startTextAlign = tableStyles.textAlign === 'start' ? 'left' : tableStyles.textAlign;
+
+  const formOptions = {
+    colCount: 2,
+    formData: {
+      width: startTableWidth,
+      // eslint-disable-next-line radix
+      height: isDefined(formats.tableHeight) ? parseInt(formats.tableHeight) : getOuterHeight($table),
+      backgroundColor: formats.tableBackgroundColor || tableStyles.backgroundColor,
+      borderStyle: formats.tableBorderStyle || tableStyles.borderTopStyle,
+      borderColor: formats.tableBorderColor || tableStyles.borderTopColor,
+      // eslint-disable-next-line radix
+      borderWidth: parseInt(isDefined(formats.tableBorderWidth) ? formats.tableBorderWidth : tableStyles.borderTopWidth),
+      alignment: formats.tableAlign || startTextAlign,
+    },
+    items: [{
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-border'),
+      colCountByScreen: {
+        xs: 2,
+      },
+      colCount: 2,
+      items: [
+        {
+          dataField: 'borderStyle',
+          label: { text: localizationMessage.format('dxHtmlEditor-style') },
+          editorType: 'dxSelectBox',
+          editorOptions: {
+            items: BORDER_STYLES_TRANSLATED,
+            valueExpr: 'id',
+            displayExpr: 'value',
+            placeholder: 'Select style',
+          },
         },
-        items: [{
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-border'),
-            colCountByScreen: {
-                xs: 2
-            },
-            colCount: 2,
-            items: [
-                {
-                    dataField: 'borderStyle',
-                    label: { text: localizationMessage.format('dxHtmlEditor-style') },
-                    editorType: 'dxSelectBox',
-                    editorOptions: {
-                        items: BORDER_STYLES_TRANSLATED,
-                        valueExpr: 'id',
-                        displayExpr: 'value',
-                        placeholder: 'Select style'
-                    }
-                },
-                {
-                    dataField: 'borderWidth',
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderWidth') },
-                    editorOptions: {
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    itemType: 'simple',
-                    dataField: 'borderColor',
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
-                    colSpan: 2,
-                    template: (e) => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ColorBox, {
-                            editAlphaChannel: true,
-                            value: e.component.option('formData').borderColor,
-                            onInitialized: (e) => {
-                                borderColorEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }
-            ]
-        }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-dimensions'),
-            colCountByScreen: {
-                xs: 2
+        {
+          dataField: 'borderWidth',
+          label: { text: localizationMessage.format('dxHtmlEditor-borderWidth') },
+          editorOptions: {
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          itemType: 'simple',
+          dataField: 'borderColor',
+          label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
+          colSpan: 2,
+          template: (e) => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ColorBox, {
+              editAlphaChannel: true,
+              value: e.component.option('formData').borderColor,
+              onInitialized: (e) => {
+                borderColorEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-dimensions'),
+      colCountByScreen: {
+        xs: 2,
+      },
+      colCount: 2,
+      items: [
+        {
+          dataField: 'width',
+          label: { text: localizationMessage.format('dxHtmlEditor-width') },
+          editorOptions: {
+            min: 0,
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          dataField: 'height',
+          label: { text: localizationMessage.format('dxHtmlEditor-height') },
+          editorOptions: {
+            min: 0,
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-tableBackground'),
+      items: [
+        {
+          itemType: 'simple',
+          dataField: 'backgroundColor',
+          label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
+          template: (e) => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ColorBox, {
+              editAlphaChannel: true,
+              value: e.component.option('formData').backgroundColor,
+              onInitialized: (e) => {
+                backgroundColorEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-alignment'),
+      items: [{
+        itemType: 'simple',
+        label: { text: localizationMessage.format('dxHtmlEditor-horizontal') },
+        template: () => {
+          const $content = $('<div>');
+          editorInstance._createComponent($content, ButtonGroup, {
+            items: [{ value: 'left', icon: 'alignleft' }, { value: 'center', icon: 'aligncenter' }, { value: 'right', icon: 'alignright' }, { value: 'justify', icon: 'alignjustify' }],
+            keyExpr: 'value',
+            selectedItemKeys: [startTextAlign],
+            onInitialized: (e) => {
+              alignmentEditorInstance = e.component;
             },
-            colCount: 2,
-            items: [
-                {
-                    dataField: 'width',
-                    label: { text: localizationMessage.format('dxHtmlEditor-width') },
-                    editorOptions: {
-                        min: 0,
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    dataField: 'height',
-                    label: { text: localizationMessage.format('dxHtmlEditor-height') },
-                    editorOptions: {
-                        min: 0,
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                }
-            ]
-        }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-tableBackground'),
-            items: [
-                {
-                    itemType: 'simple',
-                    dataField: 'backgroundColor',
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
-                    template: (e) => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ColorBox, {
-                            editAlphaChannel: true,
-                            value: e.component.option('formData').backgroundColor,
-                            onInitialized: (e) => {
-                                backgroundColorEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }
-            ]
-        }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-alignment'),
-            items: [{
-                itemType: 'simple',
-                label: { text: localizationMessage.format('dxHtmlEditor-horizontal') },
-                template: () => {
-                    const $content = $('<div>');
-                    editorInstance._createComponent($content, ButtonGroup, {
-                        items: [{ value: 'left', icon: 'alignleft' }, { value: 'center', icon: 'aligncenter' }, { value: 'right', icon: 'alignright' }, { value: 'justify', icon: 'alignjustify' }],
-                        keyExpr: 'value',
-                        selectedItemKeys: [startTextAlign],
-                        onInitialized: (e) => {
-                            alignmentEditorInstance = e.component;
-                        }
-                    });
-                    return $content;
-                }
-            }]
-        }],
-        showColonAfterLabel: true,
-        labelLocation: 'top',
-        minColWidth: 400
-    };
-
-    const applyHandler = (formInstance) => {
-        const formData = formInstance.option('formData');
-        const newWidth = formData.width === startTableWidth ? undefined : formData.width;
-        const newHeight = formData.height;
-        applyTableDimensionChanges(module, { $table, newHeight, newWidth, tableBlot });
-
-        module.editorInstance.format('tableBorderStyle', formData.borderStyle);
-        module.editorInstance.format('tableBorderWidth', formData.borderWidth + 'px');
-        module.editorInstance.format('tableBorderColor', borderColorEditorInstance.option('value'));
-        module.editorInstance.format('tableBackgroundColor', backgroundColorEditorInstance.option('value'));
-        module.editorInstance.format('tableTextAlign', alignmentEditorInstance.option('selectedItemKeys')[0]);
-    };
+          });
+          return $content;
+        },
+      }],
+    }],
+    showColonAfterLabel: true,
+    labelLocation: 'top',
+    minColWidth: 400,
+  };
+
+  const applyHandler = (formInstance) => {
+    const formData = formInstance.option('formData');
+    const newWidth = formData.width === startTableWidth ? undefined : formData.width;
+    const newHeight = formData.height;
+    applyTableDimensionChanges(module, {
+      $table, newHeight, newWidth, tableBlot,
+    });
 
-    return {
-        formOptions,
-        applyHandler
-    };
+    module.editorInstance.format('tableBorderStyle', formData.borderStyle);
+    module.editorInstance.format('tableBorderWidth', `${formData.borderWidth}px`);
+    module.editorInstance.format('tableBorderColor', borderColorEditorInstance.option('value'));
+    module.editorInstance.format('tableBackgroundColor', backgroundColorEditorInstance.option('value'));
+    module.editorInstance.format('tableTextAlign', alignmentEditorInstance.option('selectedItemKeys')[0]);
+  };
+
+  return {
+    formOptions,
+    applyHandler,
+  };
 }
 
-function getCellPropertiesFormConfig(module, { $element, formats, tableBlot, rowBlot }) {
-    const window = getWindow();
-    let alignmentEditorInstance;
-    let verticalAlignmentEditorInstance;
-    let borderColorEditorInstance;
-    let backgroundColorEditorInstance;
-
-    const $cell = $element;
-    const startCellWidth = isDefined(formats.cellWidth) ? parseInt(formats.cellWidth) : getOuterWidth($cell);
-    const editorInstance = module.editorInstance;
-    const cellStyles = window.getComputedStyle($cell.get(0));
-    const startTextAlign = cellStyles.textAlign === 'start' ? 'left' : cellStyles.textAlign;
-
-    const formOptions = {
-        colCount: 2,
-        formData: {
-            width: startCellWidth,
-            height: isDefined(formats.cellHeight) ? parseInt(formats.cellHeight) : getOuterHeight($cell),
-            backgroundColor: getColorFromFormat(formats.cellBackgroundColor) || cellStyles.backgroundColor,
-            borderStyle: formats.cellBorderStyle || cellStyles.borderTopStyle,
-            borderColor: getColorFromFormat(formats.cellBorderColor) || cellStyles.borderTopColor,
-            borderWidth: parseInt(isDefined(formats.cellBorderWidth) ? formats.cellBorderWidth : cellStyles.borderTopWidth),
-            alignment: formats.cellTextAlign || startTextAlign,
-            verticalAlignment: formats.cellVerticalAlign || cellStyles.verticalAlign,
-            verticalPadding: parseInt(isDefined(formats.cellPaddingTop) ? formats.cellPaddingTop : cellStyles.paddingTop),
-            horizontalPadding: parseInt(isDefined(formats.cellPaddingLeft) ? formats.cellPaddingLeft : cellStyles.paddingLeft),
+function getCellPropertiesFormConfig(module, {
+  $element, formats, tableBlot, rowBlot,
+}) {
+  const window = getWindow();
+  let alignmentEditorInstance;
+  let verticalAlignmentEditorInstance;
+  let borderColorEditorInstance;
+  let backgroundColorEditorInstance;
+
+  const $cell = $element;
+  // eslint-disable-next-line radix
+  const startCellWidth = isDefined(formats.cellWidth) ? parseInt(formats.cellWidth) : getOuterWidth($cell);
+  const { editorInstance } = module;
+  const cellStyles = window.getComputedStyle($cell.get(0));
+  const startTextAlign = cellStyles.textAlign === 'start' ? 'left' : cellStyles.textAlign;
+
+  const formOptions = {
+    colCount: 2,
+    formData: {
+      width: startCellWidth,
+      // eslint-disable-next-line radix
+      height: isDefined(formats.cellHeight) ? parseInt(formats.cellHeight) : getOuterHeight($cell),
+      backgroundColor: getColorFromFormat(formats.cellBackgroundColor) || cellStyles.backgroundColor,
+      borderStyle: formats.cellBorderStyle || cellStyles.borderTopStyle,
+      borderColor: getColorFromFormat(formats.cellBorderColor) || cellStyles.borderTopColor,
+      // eslint-disable-next-line radix
+      borderWidth: parseInt(isDefined(formats.cellBorderWidth) ? formats.cellBorderWidth : cellStyles.borderTopWidth),
+      alignment: formats.cellTextAlign || startTextAlign,
+      verticalAlignment: formats.cellVerticalAlign || cellStyles.verticalAlign,
+      // eslint-disable-next-line radix
+      verticalPadding: parseInt(isDefined(formats.cellPaddingTop) ? formats.cellPaddingTop : cellStyles.paddingTop),
+      // eslint-disable-next-line radix
+      horizontalPadding: parseInt(isDefined(formats.cellPaddingLeft) ? formats.cellPaddingLeft : cellStyles.paddingLeft),
+    },
+    items: [{
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-border'),
+      colCountByScreen: {
+        xs: 2,
+      },
+      colCount: 2,
+      items: [
+        {
+          dataField: 'borderStyle',
+          label: { text: localizationMessage.format('dxHtmlEditor-style') },
+          editorType: 'dxSelectBox',
+          editorOptions: {
+            items: BORDER_STYLES_TRANSLATED,
+            valueExpr: 'id',
+            displayExpr: 'value',
+          },
         },
-        items: [{
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-border'),
-            colCountByScreen: {
-                xs: 2
-            },
-            colCount: 2,
-            items: [
-                {
-                    dataField: 'borderStyle',
-                    label: { text: localizationMessage.format('dxHtmlEditor-style') },
-                    editorType: 'dxSelectBox',
-                    editorOptions: {
-                        items: BORDER_STYLES_TRANSLATED,
-                        valueExpr: 'id',
-                        displayExpr: 'value'
-                    }
-                },
-                {
-                    dataField: 'borderWidth',
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderWidth') },
-                    editorOptions: {
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    itemType: 'simple',
-                    dataField: 'borderColor',
-                    colSpan: 2,
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
-                    template: (e) => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ColorBox, {
-                            editAlphaChannel: true,
-                            value: e.component.option('formData').borderColor,
-                            onInitialized: (e) => {
-                                borderColorEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }
-            ]
-        }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-dimensions'),
-            colCount: 2,
-            colCountByScreen: {
-                xs: 2
-            },
-            items: [
-                {
-                    dataField: 'width',
-                    label: { text: localizationMessage.format('dxHtmlEditor-width') },
-                    editorOptions: {
-                        min: 0,
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    dataField: 'height',
-                    label: { text: localizationMessage.format('dxHtmlEditor-height') },
-                    editorOptions: {
-                        min: 0,
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    dataField: 'verticalPadding',
-                    label: { text: localizationMessage.format('dxHtmlEditor-paddingVertical') },
-                    editorOptions: {
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                },
-                {
-                    label: { text: localizationMessage.format('dxHtmlEditor-paddingHorizontal') },
-                    dataField: 'horizontalPadding',
-                    editorOptions: {
-                        placeholder: localizationMessage.format('dxHtmlEditor-pixels')
-                    }
-                }
-            ]
-        }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-tableBackground'),
-            items: [
-                {
-                    itemType: 'simple',
-                    dataField: 'backgroundColor',
-                    label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
-                    template: (e) => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ColorBox, {
-                            editAlphaChannel: true,
-                            value: e.component.option('formData').backgroundColor,
-                            onInitialized: (e) => {
-                                backgroundColorEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }
-            ]
+        {
+          dataField: 'borderWidth',
+          label: { text: localizationMessage.format('dxHtmlEditor-borderWidth') },
+          editorOptions: {
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          itemType: 'simple',
+          dataField: 'borderColor',
+          colSpan: 2,
+          label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
+          template: (e) => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ColorBox, {
+              editAlphaChannel: true,
+              value: e.component.option('formData').borderColor,
+              onInitialized: (e) => {
+                borderColorEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-dimensions'),
+      colCount: 2,
+      colCountByScreen: {
+        xs: 2,
+      },
+      items: [
+        {
+          dataField: 'width',
+          label: { text: localizationMessage.format('dxHtmlEditor-width') },
+          editorOptions: {
+            min: 0,
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          dataField: 'height',
+          label: { text: localizationMessage.format('dxHtmlEditor-height') },
+          editorOptions: {
+            min: 0,
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          dataField: 'verticalPadding',
+          label: { text: localizationMessage.format('dxHtmlEditor-paddingVertical') },
+          editorOptions: {
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+        {
+          label: { text: localizationMessage.format('dxHtmlEditor-paddingHorizontal') },
+          dataField: 'horizontalPadding',
+          editorOptions: {
+            placeholder: localizationMessage.format('dxHtmlEditor-pixels'),
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-tableBackground'),
+      items: [
+        {
+          itemType: 'simple',
+          dataField: 'backgroundColor',
+          label: { text: localizationMessage.format('dxHtmlEditor-borderColor') },
+          template: (e) => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ColorBox, {
+              editAlphaChannel: true,
+              value: e.component.option('formData').backgroundColor,
+              onInitialized: (e) => {
+                backgroundColorEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
+        },
+      ],
+    }, {
+      itemType: 'group',
+      caption: localizationMessage.format('dxHtmlEditor-alignment'),
+      colCount: 2,
+      items: [
+        {
+          itemType: 'simple',
+          label: { text: localizationMessage.format('dxHtmlEditor-horizontal') },
+          template: () => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ButtonGroup, {
+              items: [{ value: 'left', icon: 'alignleft' }, { value: 'center', icon: 'aligncenter' }, { value: 'right', icon: 'alignright' }, { value: 'justify', icon: 'alignjustify' }],
+              keyExpr: 'value',
+              selectedItemKeys: [startTextAlign],
+              onInitialized: (e) => {
+                alignmentEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
         }, {
-            itemType: 'group',
-            caption: localizationMessage.format('dxHtmlEditor-alignment'),
-            colCount: 2,
-            items: [
-                {
-                    itemType: 'simple',
-                    label: { text: localizationMessage.format('dxHtmlEditor-horizontal') },
-                    template: () => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ButtonGroup, {
-                            items: [{ value: 'left', icon: 'alignleft' }, { value: 'center', icon: 'aligncenter' }, { value: 'right', icon: 'alignright' }, { value: 'justify', icon: 'alignjustify' }],
-                            keyExpr: 'value',
-                            selectedItemKeys: [startTextAlign],
-                            onInitialized: (e) => {
-                                alignmentEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }, {
-                    itemType: 'simple',
-                    label: { text: localizationMessage.format('dxHtmlEditor-vertical') },
-                    template: () => {
-                        const $content = $('<div>');
-                        editorInstance._createComponent($content, ButtonGroup, {
-                            items: [{ value: 'top', icon: 'verticalaligntop' }, { value: 'middle', icon: 'verticalaligncenter' }, { value: 'bottom', icon: 'verticalalignbottom' }],
-                            keyExpr: 'value',
-                            selectedItemKeys: [cellStyles.verticalAlign],
-                            onInitialized: (e) => {
-                                verticalAlignmentEditorInstance = e.component;
-                            }
-                        });
-                        return $content;
-                    }
-                }
-            ]
-        }],
-        showColonAfterLabel: true,
-        labelLocation: 'top',
-        minColWidth: 400
-    };
-
-    const applyHandler = (formInstance) => {
-        const formData = formInstance.option('formData');
-        const newWidth = formData.width === parseInt(startCellWidth) ? undefined : formData.width;
-        const newHeight = formData.height;
-        applyCellDimensionChanges(module, { $cell, newHeight, newWidth, tableBlot, rowBlot });
-
-        module.editorInstance.format('cellBorderWidth', formData.borderWidth + 'px');
-        module.editorInstance.format('cellBorderColor', borderColorEditorInstance.option('value'));
-        module.editorInstance.format('cellBorderStyle', formData.borderStyle);
-        module.editorInstance.format('cellBackgroundColor', backgroundColorEditorInstance.option('value'));
-        module.editorInstance.format('cellTextAlign', alignmentEditorInstance.option('selectedItemKeys')[0]);
-
-        module.editorInstance.format('cellVerticalAlign', verticalAlignmentEditorInstance.option('selectedItemKeys')[0]);
-        module.editorInstance.format('cellPaddingLeft', formData.horizontalPadding + 'px');
-        module.editorInstance.format('cellPaddingRight', formData.horizontalPadding + 'px');
-        module.editorInstance.format('cellPaddingTop', formData.verticalPadding + 'px');
-        module.editorInstance.format('cellPaddingBottom', formData.verticalPadding + 'px');
-    };
+          itemType: 'simple',
+          label: { text: localizationMessage.format('dxHtmlEditor-vertical') },
+          template: () => {
+            const $content = $('<div>');
+            editorInstance._createComponent($content, ButtonGroup, {
+              items: [{ value: 'top', icon: 'verticalaligntop' }, { value: 'middle', icon: 'verticalaligncenter' }, { value: 'bottom', icon: 'verticalalignbottom' }],
+              keyExpr: 'value',
+              selectedItemKeys: [cellStyles.verticalAlign],
+              onInitialized: (e) => {
+                verticalAlignmentEditorInstance = e.component;
+              },
+            });
+            return $content;
+          },
+        },
+      ],
+    }],
+    showColonAfterLabel: true,
+    labelLocation: 'top',
+    minColWidth: 400,
+  };
+
+  const applyHandler = (formInstance) => {
+    const formData = formInstance.option('formData');
+    // eslint-disable-next-line radix
+    const newWidth = formData.width === parseInt(startCellWidth) ? undefined : formData.width;
+    const newHeight = formData.height;
+    applyCellDimensionChanges(module, {
+      $cell, newHeight, newWidth, tableBlot, rowBlot,
+    });
 
-    return {
-        formOptions,
-        applyHandler
-    };
+    module.editorInstance.format('cellBorderWidth', `${formData.borderWidth}px`);
+    module.editorInstance.format('cellBorderColor', borderColorEditorInstance.option('value'));
+    module.editorInstance.format('cellBorderStyle', formData.borderStyle);
+    module.editorInstance.format('cellBackgroundColor', backgroundColorEditorInstance.option('value'));
+    module.editorInstance.format('cellTextAlign', alignmentEditorInstance.option('selectedItemKeys')[0]);
+
+    module.editorInstance.format('cellVerticalAlign', verticalAlignmentEditorInstance.option('selectedItemKeys')[0]);
+    module.editorInstance.format('cellPaddingLeft', `${formData.horizontalPadding}px`);
+    module.editorInstance.format('cellPaddingRight', `${formData.horizontalPadding}px`);
+    module.editorInstance.format('cellPaddingTop', `${formData.verticalPadding}px`);
+    module.editorInstance.format('cellPaddingBottom', `${formData.verticalPadding}px`);
+  };
+
+  return {
+    formOptions,
+    applyHandler,
+  };
 }
 
 function getFormConfigConstructor(type) {
-    return type === 'cell' ? getCellPropertiesFormConfig : getTablePropertiesFormConfig;
+  return type === 'cell' ? getCellPropertiesFormConfig : getTablePropertiesFormConfig;
 }
 
-function applyTableDimensionChanges(module, { $table, newHeight, newWidth, tableBlot }) {
-    if(isDefined(newWidth)) {
-        const autoWidthColumns = getAutoSizedElements($table);
+function applyTableDimensionChanges(module, {
+  $table, newHeight, newWidth, tableBlot,
+}) {
+  if (isDefined(newWidth)) {
+    const autoWidthColumns = getAutoSizedElements($table);
 
-        if(autoWidthColumns.length > 0) {
-            module.editorInstance.format('tableWidth', newWidth + 'px');
-        } else {
-            const $columns = getColumnElements($table);
-            const oldTableWidth = getOuterWidth($table);
-
-            unfixTableWidth($table, { tableBlot });
+    if (autoWidthColumns.length > 0) {
+      module.editorInstance.format('tableWidth', `${newWidth}px`);
+    } else {
+      const $columns = getColumnElements($table);
+      const oldTableWidth = getOuterWidth($table);
+      // @ts-expect-error
+      unfixTableWidth($table, { tableBlot });
 
-            each($columns, (i, element) => {
-                const $element = $(element);
-                const newElementWidth = newWidth / oldTableWidth * getOuterWidth($element);
+      each($columns, (i, element) => {
+        const $element = $(element);
+        const newElementWidth = newWidth / oldTableWidth * getOuterWidth($element);
 
-                const $lineElements = getLineElements($table, $element.index(), 'horizontal');
+        const $lineElements = getLineElements($table, $element.index(), 'horizontal');
 
-                setLineElementsFormat(module, {
-                    elements: $lineElements,
-                    property: 'width',
-                    value: newElementWidth
-                });
-            });
-        }
-    }
-
-    const autoHeightRows = getAutoSizedElements($table, 'vertical');
-
-    if(autoHeightRows?.length > 0) {
-        tableBlot.format('tableHeight', newHeight + 'px');
-    } else {
-        const $rows = getRowElements($table);
-        const oldTableHeight = getOuterHeight($table);
-
-        each($rows, (i, element) => {
-            const $element = $(element);
-            const newElementHeight = newHeight / oldTableHeight * getOuterHeight($element);
-            const $lineElements = getLineElements($table, i, 'vertical');
-            setLineElementsFormat(module, {
-                elements: $lineElements,
-                property: 'height',
-                value: newElementHeight
-            });
+        setLineElementsFormat(module, {
+          elements: $lineElements,
+          property: 'width',
+          value: newElementWidth,
         });
+      });
     }
+  }
+
+  const autoHeightRows = getAutoSizedElements($table, 'vertical');
+
+  if (autoHeightRows?.length > 0) {
+    tableBlot.format('tableHeight', `${newHeight}px`);
+  } else {
+    const $rows = getRowElements($table);
+    const oldTableHeight = getOuterHeight($table);
+
+    each($rows, (i, element) => {
+      const $element = $(element);
+      const newElementHeight = newHeight / oldTableHeight * getOuterHeight($element);
+      const $lineElements = getLineElements($table, i, 'vertical');
+      setLineElementsFormat(module, {
+        elements: $lineElements,
+        property: 'height',
+        value: newElementHeight,
+      });
+    });
+  }
 }
 
-function applyCellDimensionChanges(module, { $cell, newHeight, newWidth, tableBlot, rowBlot }) {
-    const $table = $($cell.closest('table'));
-    if(isDefined(newWidth)) {
-        const index = $($cell).index();
-        let $verticalCells = getLineElements($table, index);
+function applyCellDimensionChanges(module, {
+  $cell, newHeight, newWidth, tableBlot, rowBlot,
+}) {
+  const $table = $($cell.closest('table'));
+  if (isDefined(newWidth)) {
+    const index = $($cell).index();
+    let $verticalCells = getLineElements($table, index);
 
+    const widthDiff = newWidth - getOuterWidth($cell);
+    const tableWidth = getOuterWidth($table);
 
-        const widthDiff = newWidth - getOuterWidth($cell);
-        const tableWidth = getOuterWidth($table);
+    if (newWidth > tableWidth) {
+      // @ts-expect-error
+      unfixTableWidth($table, { tableBlot });
+    }
 
-        if(newWidth > tableWidth) {
-            unfixTableWidth($table, { tableBlot });
-        }
+    setLineElementsFormat(module, {
+      elements: $verticalCells,
+      property: 'width',
+      value: newWidth,
+    });
+
+    const $nextColumnCell = $cell.next();
+    const shouldUpdateNearestColumnWidth = getAutoSizedElements($table).length === 0;
 
+    if (shouldUpdateNearestColumnWidth) {
+      // @ts-expect-error
+      unfixTableWidth($table, { tableBlot });
+      if ($nextColumnCell.length === 1) {
+        $verticalCells = getLineElements($table, index + 1);
+        const nextColumnWidth = getOuterWidth($verticalCells.eq(0)) - widthDiff;
         setLineElementsFormat(module, {
+          elements: $verticalCells,
+          property: 'width',
+          value: Math.max(nextColumnWidth, 0),
+        });
+      } else {
+        const $prevColumnCell = $cell.prev();
+        if ($prevColumnCell.length === 1) {
+          $verticalCells = getLineElements($table, index - 1);
+          const prevColumnWidth = getOuterWidth($verticalCells.eq(0)) - widthDiff;
+          setLineElementsFormat(module, {
             elements: $verticalCells,
             property: 'width',
-            value: newWidth
-        });
-
-        const $nextColumnCell = $cell.next();
-        const shouldUpdateNearestColumnWidth = getAutoSizedElements($table).length === 0;
-
-        if(shouldUpdateNearestColumnWidth) {
-            unfixTableWidth($table, { tableBlot });
-            if($nextColumnCell.length === 1) {
-                $verticalCells = getLineElements($table, index + 1);
-                const nextColumnWidth = getOuterWidth($verticalCells.eq(0)) - widthDiff;
-                setLineElementsFormat(module, {
-                    elements: $verticalCells,
-                    property: 'width',
-                    value: Math.max(nextColumnWidth, 0)
-                });
-            } else {
-                const $prevColumnCell = $cell.prev();
-                if($prevColumnCell.length === 1) {
-                    $verticalCells = getLineElements($table, index - 1);
-                    const prevColumnWidth = getOuterWidth($verticalCells.eq(0)) - widthDiff;
-                    setLineElementsFormat(module, {
-                        elements: $verticalCells,
-                        property: 'width',
-                        value: Math.max(prevColumnWidth, 0)
-                    });
-                }
-            }
+            value: Math.max(prevColumnWidth, 0),
+          });
         }
+      }
     }
+  }
 
-    rowBlot.children.forEach((rowCell) => {
-        rowCell.format('cellHeight', newHeight + 'px');
-    });
+  rowBlot.children.forEach((rowCell) => {
+    rowCell.format('cellHeight', `${newHeight}px`);
+  });
 
-    const autoHeightRows = getAutoSizedElements($table, 'vertical');
+  const autoHeightRows = getAutoSizedElements($table, 'vertical');
 
-    if(autoHeightRows.length === 0) {
-        $table.css('height', 'auto');
-    }
+  if (autoHeightRows.length === 0) {
+    $table.css('height', 'auto');
+  }
 }
 
-
 export {
-    getFormatHandlers,
-    getDefaultClickHandler,
-    ICON_MAP,
-    applyFormat
+  applyFormat,
+  getDefaultClickHandler,
+  getFormatHandlers,
+  ICON_MAP,
 };
diff --git a/packages/devextreme/js/__internal/ui/text_box/m_utils.scroll.ts b/packages/devextreme/js/__internal/ui/text_box/m_utils.scroll.ts
index a764ecf48c09..5ee6e307f364 100644
--- a/packages/devextreme/js/__internal/ui/text_box/m_utils.scroll.ts
+++ b/packages/devextreme/js/__internal/ui/text_box/m_utils.scroll.ts
@@ -29,7 +29,7 @@ const allowScroll = function (container, delta, shiftKey?: boolean) {
   }
 };
 
-const prepareScrollData = function (container, validateTarget) {
+const prepareScrollData = function (container, validateTarget?: any) {
   const $container = $(container);
   const isCorrectTarget = function (eventTarget) {
     return validateTarget ? $(eventTarget).is(container) : true;
diff --git a/packages/devextreme/js/ui/html_editor/converters/markdown.js b/packages/devextreme/js/ui/html_editor/converters/markdown.js
new file mode 100644
index 000000000000..4633e811513b
--- /dev/null
+++ b/packages/devextreme/js/ui/html_editor/converters/markdown.js
@@ -0,0 +1,3 @@
+import MarkdownConverter from '../../../__internal/ui/html_editor/converters/m_markdown';
+
+export default MarkdownConverter;
diff --git a/packages/devextreme/js/ui/html_editor/quill_importer.js b/packages/devextreme/js/ui/html_editor/quill_importer.js
new file mode 100644
index 000000000000..b9b12051d495
--- /dev/null
+++ b/packages/devextreme/js/ui/html_editor/quill_importer.js
@@ -0,0 +1,3 @@
+import { getQuill } from '../../__internal/ui/html_editor/m_quill_importer';
+
+export default { getQuill };
diff --git a/packages/devextreme/js/ui/html_editor/quill_registrator.js b/packages/devextreme/js/ui/html_editor/quill_registrator.js
new file mode 100644
index 000000000000..60a8d473d4e9
--- /dev/null
+++ b/packages/devextreme/js/ui/html_editor/quill_registrator.js
@@ -0,0 +1,3 @@
+import QuillRegistrator from '../../__internal/ui/html_editor/m_quill_registrator';
+
+export default QuillRegistrator;
diff --git a/packages/devextreme/js/ui/html_editor/ui.html_editor.js b/packages/devextreme/js/ui/html_editor/ui.html_editor.js
new file mode 100644
index 000000000000..e6ea1b3b877e
--- /dev/null
+++ b/packages/devextreme/js/ui/html_editor/ui.html_editor.js
@@ -0,0 +1,5 @@
+import HtmlEditor from '../../__internal/ui/html_editor/m_html_editor';
+
+export default HtmlEditor;
+
+// STYLE htmlEditor
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converterController.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converterController.tests.js
index c9c61b236126..88b4146f970a 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converterController.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converterController.tests.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import 'ui/html_editor';
 
-import ConverterController from 'ui/html_editor/converterController';
+import ConverterController from '__internal/ui/html_editor/m_converterController';
 
 const { test } = QUnit;
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converters.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converters.tests.js
index 3ee82a6826a1..7f6c345e690e 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converters.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/converters.tests.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-import DeltaConverter from 'ui/html_editor/converters/delta';
+import DeltaConverter from '__internal/ui/html_editor/converters/m_delta';
 import MarkdownConverter from 'ui/html_editor/converters/markdown';
 import { getQuill } from 'ui/html_editor/quill_importer';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/dropImageModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/dropImageModule.tests.js
index 722f52379c68..a9b345d1f952 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/dropImageModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/dropImageModule.tests.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-import DropImage from 'ui/html_editor/modules/dropImage';
+import DropImage from '__internal/ui/html_editor/modules/m_dropImage';
 import { createBlobFile } from '../../../helpers/fileHelper.js';
 import browser from 'core/utils/browser';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/formDialog.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/formDialog.tests.js
index a154c9fdcf83..53353a6694c8 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/formDialog.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/formDialog.tests.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-import FormDialog from 'ui/html_editor/ui/formDialog';
+import FormDialog from '__internal/ui/html_editor/ui/m_formDialog';
 import { isPromise } from 'core/utils/type';
 import devices from 'core/devices';
 import { getCurrentScreenFactor, hasWindow } from 'core/utils/window';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageCursorModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageCursorModule.tests.js
index 5dfabe222416..423781adbbc5 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageCursorModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageCursorModule.tests.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import ImageCursor from 'ui/html_editor/modules/imageCursor';
+import ImageCursor from '__internal/ui/html_editor/modules/m_imageCursor';
 import { name as clickEvent } from 'events/click';
 
 const moduleConfig = {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadModule.tests.js
index 6f79b575d88a..c4d2dbb806b5 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadModule.tests.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import ImageUpload from 'ui/html_editor/modules/imageUpload';
+import ImageUpload from '__internal/ui/html_editor/modules/m_imageUpload';
 
 const moduleConfig = {
     beforeEach: function() {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionModule.tests.js
index a38808b9dfa4..f0157608ff15 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/mentionModule.tests.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 
-import MentionFormat from 'ui/html_editor/formats/mention';
-import Mentions from 'ui/html_editor/modules/mentions';
+import MentionFormat from '__internal/ui/html_editor/formats/m_mention';
+import Mentions from '__internal/ui/html_editor/modules/m_mentions';
 
 import { noop } from 'core/utils/common';
 import devices from 'core/devices';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/popupModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/popupModule.tests.js
index 4ff5d944e7fd..bf7a95256c07 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/popupModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/popupModule.tests.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-import PopupModule from 'ui/html_editor/modules/popup';
+import PopupModule from '__internal/ui/html_editor/modules/m_popup';
 import windowUtils from 'core/utils/window';
 
 const POPUP_CLASS = 'dx-popup';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/quillRegistrator.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/quillRegistrator.tests.js
index 46ee2c9f9aad..8ff646ffd372 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/quillRegistrator.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/quillRegistrator.tests.js
@@ -1,9 +1,9 @@
 import $ from 'jquery';
 
 import QuillRegistrator from 'ui/html_editor/quill_registrator';
-import Image from 'ui/html_editor/formats/image';
-import Font from 'ui/html_editor/formats/font';
-import Size from 'ui/html_editor/formats/size';
+import Image from '__internal/ui/html_editor/formats/m_image';
+import Font from '__internal/ui/html_editor/formats/m_font';
+import Size from '__internal/ui/html_editor/formats/m_size';
 
 const { test } = QUnit;
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingModule.tests.js
index 7ae637bdeaa3..6a541c7a1c0f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingModule.tests.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import Quill from 'devextreme-quill';
 
-import Resizing from 'ui/html_editor/modules/resizing';
+import Resizing from '__internal/ui/html_editor/modules/m_resizing';
 import devices from 'core/devices';
 import { name as clickEvent } from 'events/click';
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableContextMenuModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableContextMenuModule.tests.js
index a5be0032a0ed..9457ea4e07d1 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableContextMenuModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableContextMenuModule.tests.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import TableUI from 'ui/html_editor/modules/tableContextMenu';
+import TableUI from '__internal/ui/html_editor/modules/m_tableContextMenu';
 
 
 const moduleConfig = {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingModule.tests.js
index 79102858d690..939672ded248 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingModule.tests.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import TableResizing from 'ui/html_editor/modules/tableResizing';
+import TableResizing from '__internal/ui/html_editor/modules/m_tableResizing';
 import resizeCallbacks from 'core/utils/resize_callbacks';
 
 const DX_COLUMN_RESIZE_FRAME_CLASS = 'dx-table-resize-frame';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js
index f5c9822d317c..dd71847d5de9 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js
@@ -5,8 +5,8 @@ import 'generic_light.css!';
 import 'ui/select_box';
 import '__internal/ui/color_box/m_color_view';
 
-import Toolbar from 'ui/html_editor/modules/toolbar';
-import FormDialog from 'ui/html_editor/ui/formDialog';
+import Toolbar from '__internal/ui/html_editor/modules/m_toolbar';
+import FormDialog from '__internal/ui/html_editor/ui/m_formDialog';
 import { noop } from 'core/utils/common';
 import keyboardMock from '../../../helpers/keyboardMock.js';
 import fx from 'animation/fx';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/variablesModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/variablesModule.tests.js
index 9cc58985cdcc..8096b2888ee3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/variablesModule.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/variablesModule.tests.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 
-import VariableFormat from 'ui/html_editor/formats/variable';
-import Variables from 'ui/html_editor/modules/variables';
+import VariableFormat from '__internal/ui/html_editor/formats/m_variable';
+import Variables from '__internal/ui/html_editor/modules/m_variables';
 import { noop } from 'core/utils/common';
 
 const SUGGESTION_LIST_CLASS = 'dx-suggestion-list';