chuijs 4.0.2 → 4.0.4

package/framework/components/chui_text_editor/text_editor_panel.js

@@ -1,54 +1,52 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {makeKeyboardButton, RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {optionOr} = require("../../modules/chui_functions");
-const {Animation} = require("../../modules/chui_animations/animations");
-const {Dialog} = require("../chui_modal/modal");
-const {Button} = require("../chui_button/button");
-const {TextInput} = require("../chui_inputs/chui_text/text");
-const {Label} = require("../chui_label/label");
-const {ContentBlock} = require("../chui_content_block/content_block");
-const {Notification} = require("../chui_notification/notification");
-const {NumberInput} = require("../chui_inputs/chui_number/number");
-const {CheckBox} = require("../chui_inputs/chui_check_box/check_box");
-const {FileInput, AcceptTypes} = require("../chui_inputs/chui_file/file");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-
-
+const { Icon, Icons } = require("../chui_icons/icons");
+const { makeKeyboardButton, RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { Dialog } = require("../chui_modal/modal");
+const { Button } = require("../chui_button/button");
+const { TextInput } = require("../chui_inputs/chui_text/text");
+const { Label } = require("../chui_label/label");
+const { ContentBlock } = require("../chui_content_block/content_block");
+const { Notification } = require("../chui_notification/notification");
+const { NumberInput } = require("../chui_inputs/chui_number/number");
+const { CheckBox } = require("../chui_inputs/chui_check_box/check_box");
+const { FileInput, AcceptTypes } = require("../chui_inputs/chui_file/file");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Commands {
-    static COPY = "copy"
-    static CUT = "cut"
-    static PASTE = "paste"
-    static DELETE = "delete"
-    static UNDO = "undo"
-    static REDO = "redo"
+    static COPY = "copy";
+    static CUT = "cut";
+    static PASTE = "paste";
+    static DELETE = "delete";
+    static UNDO = "undo";
+    static REDO = "redo";
     //
-    static BOLD = "bold"
-    static ITALIC = "italic"
-    static STRIKE_THROUGH = "strikeThrough"
-    static UNDERLINE = "underline"
+    static BOLD = "bold";
+    static ITALIC = "italic";
+    static STRIKE_THROUGH = "strikeThrough";
+    static UNDERLINE = "underline";
     //
-    static REMOVE_FORMAT = "removeFormat"
+    static REMOVE_FORMAT = "removeFormat";
     //
-    static SUPER_SCRIPT = "superscript"
-    static SUB_SCRIPT = "subscript"
+    static SUPER_SCRIPT = "superscript";
+    static SUB_SCRIPT = "subscript";
     //
-    static JUSTIFY_LEFT = "justifyLeft"
-    static JUSTIFY_RIGHT = "justifyRight"
-    static JUSTIFY_CENTER = "justifyCenter"
-    static JUSTIFY_FULL = "justifyFull"
+    static JUSTIFY_LEFT = "justifyLeft";
+    static JUSTIFY_RIGHT = "justifyRight";
+    static JUSTIFY_CENTER = "justifyCenter";
+    static JUSTIFY_FULL = "justifyFull";
     //
-    static FORMAT_BLOCK = "formatBlock"
-    static NONE = "none"
+    static FORMAT_BLOCK = "formatBlock";
+    static NONE = "none";
     // ITEMS
-    static CREATE_LINK = "createLink"
-    static UNLINK = "unlink"
-    static INSERT_IMAGE = "insertImage"
-    static INSERT_LINE_BREAK = "insertLineBreak"
-    static INSERT_HTML = "insertHTML"
+    static CREATE_LINK = "createLink";
+    static UNLINK = "unlink";
+    static INSERT_IMAGE = "insertImage";
+    static INSERT_LINE_BREAK = "insertLineBreak";
+    static INSERT_HTML = "insertHTML";
     // LIST
-    static INSERT_ORDERED_LIST = "insertOrderedList"
-    static INSERT_UNORDERED_LIST = "insertUnorderedList"
+    static INSERT_ORDERED_LIST = "insertOrderedList";
+    static INSERT_UNORDERED_LIST = "insertUnorderedList";
 }
 
 /**
@@ -77,18 +75,30 @@ const COMMAND_LABELS = {
     copy: "editor.copy",
     cut: "editor.cut",
     paste: "editor.paste",
-    delete: "editor.delete"
+    delete: "editor.delete",
 };
 
 class TextEditorButtons {
     #button = undefined;
-    constructor(options = { icon: undefined, command: undefined, value: undefined, disableFocus: false, listener: () => {}, label: undefined }) {
-        this.#button = document.createElement('chui_button_format');
+    constructor(
+        options = {
+            icon: undefined,
+            command: undefined,
+            value: undefined,
+            disableFocus: false,
+            listener: () => {},
+            label: undefined,
+        }
+    ) {
+        this.#button = document.createElement("chui_button_format");
         const glyph = new Icon(options.icon);
         // Иконка-лигатура — украшение: имя кнопки задаёт label или таблица команд
         glyph.set().setAttribute("aria-hidden", "true");
         this.#button.innerHTML = glyph.getHTML();
-        const label = optionOr(options.label, COMMAND_LABELS[options.command] === undefined ? undefined : I18n.t(COMMAND_LABELS[options.command]));
+        const label = optionOr(
+            options.label,
+            COMMAND_LABELS[options.command] === undefined ? undefined : I18n.t(COMMAND_LABELS[options.command])
+        );
         if (label !== undefined) {
             this.#button.setAttribute("aria-label", label);
             this.#button.setAttribute("title", label);
@@ -97,11 +107,11 @@ class TextEditorButtons {
         makeKeyboardButton(this.#button);
         if (options.disableFocus) {
             this.#button.addEventListener("mousedown", () => {
-                return false
-            })
+                return false;
+            });
         }
         if (options.listener !== undefined) {
-            this.#button.addEventListener("click", options.listener)
+            this.#button.addEventListener("click", options.listener);
         } else {
             this.#button.addEventListener("click", () => {
                 if (options.value !== undefined) {
@@ -109,7 +119,7 @@ class TextEditorButtons {
                 } else {
                     document.execCommand(options.command, false);
                 }
-            })
+            });
         }
     }
     set() {
@@ -119,107 +129,106 @@ class TextEditorButtons {
 
 class TextEditorSelects {
     #id = require("randomstring").generate();
-    #id_sb = require("randomstring").generate();
-    #Select_main = document.createElement('chui_text_editor_select_box');
-    #Select_second = document.createElement('text_editor_select_box');
-    #input = document.createElement('input');
-    #div_value = document.createElement("text_editor_div_value")
-    #button_open = document.createElement('text_editor_select_button_open');
-    #dropdown = document.createElement('text_editor_selectbox_dropdown');
+    #idSb = require("randomstring").generate();
+    #SelectMain = document.createElement("chui_text_editor_select_box");
+    #SelectSecond = document.createElement("text_editor_select_box");
+    #input = document.createElement("input");
+    #divValue = document.createElement("text_editor_div_value");
+    #buttonOpen = document.createElement("text_editor_select_button_open");
+    #dropdown = document.createElement("text_editor_selectbox_dropdown");
     constructor(options = { icon: String(), label: String() }) {
         if (options.icon !== undefined) {
-            this.#div_value.innerHTML = options.icon;
+            this.#divValue.innerHTML = options.icon;
             // Значок — украшение: имя даёт сам селект
-            this.#div_value.setAttribute("aria-hidden", "true");
+            this.#divValue.setAttribute("aria-hidden", "true");
         }
-        if (options.label !== undefined) this.#Select_main.setAttribute("aria-label", options.label);
-        this.#input.setAttribute('id', this.#id_sb);
-        this.#input.classList.add('text_editor_selectbox_input');
-        this.#input.type = 'text';
-        this.#input.disabled = true
-        this.#input.style.display = 'none'
-        const glyph_open = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN);
+        if (options.label !== undefined) this.#SelectMain.setAttribute("aria-label", options.label);
+        this.#input.setAttribute("id", this.#idSb);
+        this.#input.classList.add("text_editor_selectbox_input");
+        this.#input.type = "text";
+        this.#input.disabled = true;
+        this.#input.style.display = "none";
+        const glyphOpen = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN);
         // Глиф-лигатура — украшение: без этого именем кнопки было бы «keyboard_arrow_down»
-        glyph_open.set().setAttribute("aria-hidden", "true");
-        this.#button_open.innerHTML = glyph_open.getHTML();
+        glyphOpen.set().setAttribute("aria-hidden", "true");
+        this.#buttonOpen.innerHTML = glyphOpen.getHTML();
         // Раскрывающийся селект: кнопка с состоянием и списком опций
-        makeKeyboardButton(this.#button_open);
+        makeKeyboardButton(this.#buttonOpen);
         // Имя — самой кнопке: у контейнера селекта роли нет, и aria-label на нём не читается
-        if (options.label !== undefined) this.#button_open.setAttribute("aria-label", options.label);
-        this.#button_open.setAttribute("aria-haspopup", "listbox");
-        this.#button_open.setAttribute("aria-expanded", "false");
+        if (options.label !== undefined) this.#buttonOpen.setAttribute("aria-label", options.label);
+        this.#buttonOpen.setAttribute("aria-haspopup", "listbox");
+        this.#buttonOpen.setAttribute("aria-expanded", "false");
         this.#dropdown.setAttribute("role", "listbox");
         this.#dropdown.setAttribute("id", this.#id);
-        this.#button_open.setAttribute("aria-controls", this.#id);
-        this.#dropdown.setAttribute('id', this.#id);
-        this.#Select_second.appendChild(this.#input)
-        this.#Select_second.appendChild(this.#div_value)
-        this.#Select_second.appendChild(this.#button_open)
-        this.#Select_second.appendChild(this.#dropdown)
+        this.#buttonOpen.setAttribute("aria-controls", this.#id);
+        this.#SelectSecond.appendChild(this.#input);
+        this.#SelectSecond.appendChild(this.#divValue);
+        this.#SelectSecond.appendChild(this.#buttonOpen);
+        this.#SelectSecond.appendChild(this.#dropdown);
         //LISTENERS
-        this.#Select_second.addEventListener('click', (event) => {
-            if (event.target.parentNode === this.#Select_second) {
-                this.#input.focus()
-                this.#button_open.setAttribute("aria-expanded", "true");
-                new Animation(this.#dropdown).fadeIn();
+        this.#SelectSecond.addEventListener("click", (event) => {
+            if (event.target.parentNode === this.#SelectSecond) {
+                this.#input.focus();
+                this.#buttonOpen.setAttribute("aria-expanded", "true");
+                new Animation(this.#dropdown).panelIn();
                 TextEditorSelects.#setOptionDisplay(this.#dropdown);
-                window.addEventListener('click', this.#window_click_event);
+                window.addEventListener("click", this.#windowClickEvent);
             }
         });
-        this.#input.addEventListener('input', (event) => {
-            let dropdown = this.#dropdown;
-            for (let option of dropdown.childNodes) {
-                if (!option.getAttribute('option_value').includes(event.target.value)) {
-                    option.style.display = 'none'
+        this.#input.addEventListener("input", (event) => {
+            const dropdown = this.#dropdown;
+            for (const option of dropdown.childNodes) {
+                if (!option.getAttribute("option_value").includes(event.target.value)) {
+                    option.style.display = "none";
                 } else {
-                    option.style.display = 'block'
+                    option.style.display = "block";
                 }
             }
         });
-        this.#Select_main.appendChild(this.#Select_second)
+        this.#SelectMain.appendChild(this.#SelectSecond);
     }
-    #window_click_event = (event) => {
-        if (event.target.parentNode !== this.#Select_second) {
-            window.removeEventListener('click', this.#window_click_event);
-            this.#button_open.setAttribute("aria-expanded", "false");
+    #windowClickEvent = (event) => {
+        if (event.target.parentNode !== this.#SelectSecond) {
+            window.removeEventListener("click", this.#windowClickEvent);
+            this.#buttonOpen.setAttribute("aria-expanded", "false");
             new Animation(this.#dropdown).fadeOut();
         }
-    }
+    };
     addOptionsFontSize(...options) {
-        for (let opt of options) {
-            let option = document.createElement(`text_editor_selectbox_option`);
-            let fontSize = document.createElement("font");
-            fontSize.setAttribute("size", opt.value)
+        for (const opt of options) {
+            const option = document.createElement(`text_editor_selectbox_option`);
+            const fontSize = document.createElement("font");
+            fontSize.setAttribute("size", opt.value);
             fontSize.innerHTML = opt.name;
-            option.setAttribute('option_value', opt.value);
+            option.setAttribute("option_value", opt.value);
             option.setAttribute("role", "option");
-            option.addEventListener('click', () => {
-                this.#input.value = option.getAttribute('option_value');
-                this.#input.setAttribute('value', option.getAttribute('option_value'));
+            option.addEventListener("click", () => {
+                this.#input.value = option.getAttribute("option_value");
+                this.#input.setAttribute("value", option.getAttribute("option_value"));
             });
-            option.appendChild(fontSize)
+            option.appendChild(fontSize);
             this.#dropdown.appendChild(option);
         }
     }
     addOptionsHeader(...options) {
-        for (let opt of options) {
-            let option = document.createElement(`text_editor_selectbox_option`);
-            let header = document.createElement(`${opt.value.replace("<", "").replace(">", "")}`);
+        for (const opt of options) {
+            const option = document.createElement(`text_editor_selectbox_option`);
+            const header = document.createElement(`${opt.value.replace("<", "").replace(">", "")}`);
             header.innerHTML = opt.name;
             // Отступы снимает CSS по классу: прежде они ставились инлайном
             header.classList.add("text_editor_selectbox_option_header");
-            option.setAttribute('option_value', opt.value);
+            option.setAttribute("option_value", opt.value);
             option.setAttribute("role", "option");
-            option.addEventListener('click', () => {
-                this.#input.value = option.getAttribute('option_value');
-                this.#input.setAttribute('value', option.getAttribute('option_value'));
+            option.addEventListener("click", () => {
+                this.#input.value = option.getAttribute("option_value");
+                this.#input.setAttribute("value", option.getAttribute("option_value"));
             });
-            option.appendChild(header)
+            option.appendChild(header);
             this.#dropdown.appendChild(option);
         }
     }
     addValueChangeListener(listener = () => {}) {
-        let observer = new MutationObserver((mutations) => {
+        const observer = new MutationObserver((mutations) => {
             mutations.forEach(listener);
         });
         observer.observe(this.#input, {
@@ -227,14 +236,16 @@ class TextEditorSelects {
             childList: false,
             subtree: false,
             characterData: false,
-            attributeFilter: ['value']
+            attributeFilter: ["value"],
         });
     }
     set() {
-        return this.#Select_main;
+        return this.#SelectMain;
     }
     static #setOptionDisplay(element = new HTMLElement()) {
-        for (let option of element.childNodes) { option.style.display = 'block'; }
+        for (const option of element.childNodes) {
+            option.style.display = "block";
+        }
     }
 }
 
@@ -246,7 +257,7 @@ class TextEditorSelects {
 const PANEL_ITEM_SELECTOR = "chui_button_format, text_editor_select_button_open";
 
 class TextEditorPanel {
-    #panel = document.createElement("text_editor_panel")
+    #panel = document.createElement("text_editor_panel");
     // Редактор, к которому возвращается фокус: панель держит сам узел, а не его id
     #editor = undefined;
     // Заготовка `{ UNDO_REDO: Boolean() }` вызывала Boolean() и давала false: редактор
@@ -255,244 +266,285 @@ class TextEditorPanel {
         this.#editor = editor;
         // Управление
         if (controls.UNDO_REDO) {
-            let button_undo = new TextEditorButtons({
+            const buttonUndo = new TextEditorButtons({
                 icon: Icons.CONTENT.UNDO,
-                command: Commands.UNDO
-            })
-            let button_redo = new TextEditorButtons({
+                command: Commands.UNDO,
+            });
+            const buttonRedo = new TextEditorButtons({
                 icon: Icons.CONTENT.REDO,
-                command: Commands.REDO
-            })
-            this.#addBlock(button_undo, button_redo)
+                command: Commands.REDO,
+            });
+            this.#addBlock(buttonUndo, buttonRedo);
         }
         // formatBlock
         if (controls.BLOCK_FORMAT) {
-            let select_headers = new TextEditorSelects({ icon: new Icon(Icons.EDITOR.TITLE).getHTML(), label: I18n.t("editor.paragraphAndHeading") })
-            select_headers.addOptionsHeader(
-                { name: "H1",   value: "<h1>" },
-                { name: "H2",   value: "<h2>" },
-                { name: "H3",   value: "<h3>" },
-                { name: "H4",   value: "<h4>" },
-                { name: "H5",   value: "<h5>" },
-                { name: "H6",   value: "<h6>" },
-                { name: "Code",   value: "<pre>" },
-                { name: "Paragraph",   value: "<P>" }
-            )
-            select_headers.addValueChangeListener((e) => {
-                document.execCommand('formatBlock', false, e.target.value);
-            })
-            this.#addBlock(select_headers)
-            let button_format_quote = new TextEditorButtons({
+            const selectHeaders = new TextEditorSelects({
+                icon: new Icon(Icons.EDITOR.TITLE).getHTML(),
+                label: I18n.t("editor.paragraphAndHeading"),
+            });
+            selectHeaders.addOptionsHeader(
+                { name: "H1", value: "<h1>" },
+                { name: "H2", value: "<h2>" },
+                { name: "H3", value: "<h3>" },
+                { name: "H4", value: "<h4>" },
+                { name: "H5", value: "<h5>" },
+                { name: "H6", value: "<h6>" },
+                { name: "Code", value: "<pre>" },
+                { name: "Paragraph", value: "<P>" }
+            );
+            selectHeaders.addValueChangeListener((e) => {
+                document.execCommand("formatBlock", false, e.target.value);
+            });
+            this.#addBlock(selectHeaders);
+            const buttonFormatQuote = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_QUOTE,
                 command: Commands.FORMAT_BLOCK,
                 value: "<BLOCKQUOTE>",
-                label: I18n.t("editor.quote")
-            })
-            this.#addBlock(button_format_quote)
+                label: I18n.t("editor.quote"),
+            });
+            this.#addBlock(buttonFormatQuote);
         }
         if (controls.FONT_SIZE) {
-            let select_font_size = new TextEditorSelects({ icon: new Icon(Icons.EDITOR.FORMAT_SIZE).getHTML(), label: I18n.t("editor.fontSize") })
-            select_font_size.addOptionsFontSize(
-                { name: "xx_small",   value: "1" },
-                { name: "x_small",    value: "2" },
-                { name: "small",      value: "3" },
-                { name: "medium",     value: "4" },
-                { name: "large",      value: "5" },
-                { name: "x_large",    value: "6" },
-                { name: "xx_large",   value: "7" },
-            )
-            select_font_size.addValueChangeListener((e) => {
-                document.execCommand('fontSize', false, e.target.value);
-            })
-            this.#addBlock(select_font_size)
+            const selectFontSize = new TextEditorSelects({
+                icon: new Icon(Icons.EDITOR.FORMAT_SIZE).getHTML(),
+                label: I18n.t("editor.fontSize"),
+            });
+            selectFontSize.addOptionsFontSize(
+                { name: "xx_small", value: "1" },
+                { name: "x_small", value: "2" },
+                { name: "small", value: "3" },
+                { name: "medium", value: "4" },
+                { name: "large", value: "5" },
+                { name: "x_large", value: "6" },
+                { name: "xx_large", value: "7" }
+            );
+            selectFontSize.addValueChangeListener((e) => {
+                document.execCommand("fontSize", false, e.target.value);
+            });
+            this.#addBlock(selectFontSize);
         }
         if (controls.REMOVE_FORMAT) {
-            let button_removeFormat = new TextEditorButtons({
+            const buttonRemoveformat = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_CLEAR,
-                command: Commands.REMOVE_FORMAT
-            })
-            this.#addBlock(button_removeFormat)
+                command: Commands.REMOVE_FORMAT,
+            });
+            this.#addBlock(buttonRemoveformat);
         }
         // FORMAT
         if (controls.BOLD) {
-            let button_bold_text = new TextEditorButtons({
+            const buttonBoldText = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_BOLD,
-                command: Commands.BOLD
-            })
-            this.#addBlock(button_bold_text)
+                command: Commands.BOLD,
+            });
+            this.#addBlock(buttonBoldText);
         }
         if (controls.ITALIC) {
-            let button_italic_text = new TextEditorButtons({
+            const buttonItalicText = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_ITALIC,
-                command: Commands.ITALIC
-            })
-            this.#addBlock(button_italic_text)
+                command: Commands.ITALIC,
+            });
+            this.#addBlock(buttonItalicText);
         }
         if (controls.STRIKE_THROUGH) {
-            let button_strikeThrough = new TextEditorButtons({
+            const buttonStrikethrough = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_STRIKETHROUGH,
-                command: Commands.STRIKE_THROUGH
-            })
-            this.#addBlock(button_strikeThrough)
+                command: Commands.STRIKE_THROUGH,
+            });
+            this.#addBlock(buttonStrikethrough);
         }
         if (controls.UNDERLINE) {
-            let button_underline = new TextEditorButtons({
+            const buttonUnderline = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_UNDERLINED,
-                command: Commands.UNDERLINE
-            })
-            this.#addBlock(button_underline)
+                command: Commands.UNDERLINE,
+            });
+            this.#addBlock(buttonUnderline);
         }
         //
         if (controls.SUPERSCRIPT) {
-            let button_superscript = new TextEditorButtons({
+            const buttonSuperscript = new TextEditorButtons({
                 icon: Icons.EDITOR.SUPERSCRIPT,
-                command: Commands.SUPER_SCRIPT
-            })
-            this.#addBlock(button_superscript)
+                command: Commands.SUPER_SCRIPT,
+            });
+            this.#addBlock(buttonSuperscript);
         }
         if (controls.SUBSCRIPT) {
-            let button_subscript = new TextEditorButtons({
+            const buttonSubscript = new TextEditorButtons({
                 icon: Icons.EDITOR.SUBSCRIPT,
-                command: Commands.SUB_SCRIPT
-            })
-            this.#addBlock(button_subscript)
+                command: Commands.SUB_SCRIPT,
+            });
+            this.#addBlock(buttonSubscript);
         }
         //
         if (controls.JUSTIFY_LEFT) {
-            let button_justifyLeft = new TextEditorButtons({
+            const buttonJustifyleft = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_ALIGN_LEFT,
-                command: Commands.JUSTIFY_LEFT
-            })
-            this.#addBlock(button_justifyLeft)
+                command: Commands.JUSTIFY_LEFT,
+            });
+            this.#addBlock(buttonJustifyleft);
         }
         if (controls.JUSTIFY_CENTER) {
-            let button_justifyCenter = new TextEditorButtons({
+            const buttonJustifycenter = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_ALIGN_CENTER,
-                command: Commands.JUSTIFY_CENTER
-            })
-            this.#addBlock(button_justifyCenter)
+                command: Commands.JUSTIFY_CENTER,
+            });
+            this.#addBlock(buttonJustifycenter);
         }
         if (controls.JUSTIFY_RIGHT) {
-            let button_justifyRight = new TextEditorButtons({
+            const buttonJustifyright = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_ALIGN_RIGHT,
-                command: Commands.JUSTIFY_RIGHT
-            })
-            this.#addBlock(button_justifyRight)
+                command: Commands.JUSTIFY_RIGHT,
+            });
+            this.#addBlock(buttonJustifyright);
         }
         if (controls.JUSTIFY_FULL) {
-            let button_justifyFull = new TextEditorButtons({
+            const buttonJustifyfull = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_ALIGN_JUSTIFY,
-                command: Commands.JUSTIFY_FULL
-            })
-            this.#addBlock(button_justifyFull)
+                command: Commands.JUSTIFY_FULL,
+            });
+            this.#addBlock(buttonJustifyfull);
         }
         //
         if (controls.LISTS) {
-            let button_list_one = new TextEditorButtons({
+            const buttonListOne = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_LIST_NUMBERED,
-                command: Commands.INSERT_ORDERED_LIST
-            })
-            let button_list_two = new TextEditorButtons({
+                command: Commands.INSERT_ORDERED_LIST,
+            });
+            const buttonListTwo = new TextEditorButtons({
                 icon: Icons.EDITOR.FORMAT_LIST_BULLETED,
-                command: Commands.INSERT_UNORDERED_LIST
-            })
-            this.#addBlock(button_list_one, button_list_two)
-
+                command: Commands.INSERT_UNORDERED_LIST,
+            });
+            this.#addBlock(buttonListOne, buttonListTwo);
         }
         //
         // Создание ссылки
         if (controls.INSERT_LINK) {
-            let button_unlink = new TextEditorButtons({
+            const buttonUnlink = new TextEditorButtons({
                 icon: Icons.CONTENT.LINK_OFF,
-                command: Commands.UNLINK
-            })
-            let content_link = new ContentBlock({
-                direction: "column", wrap: "wrap", align: "center", justify: "flex-end"
-            })
-            content_link.setWidth("-webkit-fill-available")
-            let content_link_header = new ContentBlock({
-                direction: "row", wrap: "wrap", align: "center", justify: "space-between", disableMarginChild: true
-            })
-            content_link_header.setWidth("-webkit-fill-available")
-            let dialog_link = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true })
-            let input_link_text = new TextInput({ title: I18n.t("editor.name"), placeholder: I18n.t("editor.name"), width: "-webkit-fill-available", disableFocus: false })
-            let input_link = new TextInput({ title: I18n.t("editor.link"), placeholder: "https://", width: "-webkit-fill-available", value: "https://example.ru", disableFocus: false })
-            content_link.add(input_link_text, input_link)
-            dialog_link.addToBody(content_link)
-            content_link_header.add(
+                command: Commands.UNLINK,
+            });
+            const contentLink = new ContentBlock({
+                direction: "column",
+                wrap: "wrap",
+                align: "center",
+                justify: "flex-end",
+            });
+            contentLink.setWidth("-webkit-fill-available");
+            const contentLinkHeader = new ContentBlock({
+                direction: "row",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-between",
+                disableMarginChild: true,
+            });
+            contentLinkHeader.setWidth("-webkit-fill-available");
+            const dialogLink = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true });
+            const inputLinkText = new TextInput({
+                title: I18n.t("editor.name"),
+                placeholder: I18n.t("editor.name"),
+                width: "-webkit-fill-available",
+                disableFocus: false,
+            });
+            const inputLink = new TextInput({
+                title: I18n.t("editor.link"),
+                placeholder: "https://",
+                width: "-webkit-fill-available",
+                value: "https://example.ru",
+                disableFocus: false,
+            });
+            contentLink.add(inputLinkText, inputLink);
+            dialogLink.addToBody(contentLink);
+            contentLinkHeader.add(
                 new Button({
                     icon: Icons.NAVIGATION.CLOSE,
                     label: I18n.t("common.close"),
                     clickEvent: () => {
-                        this.#editor.focus()
-                        dialog_link.close()
-                    }
+                        this.#editor.focus();
+                        dialogLink.close();
+                    },
                 }),
                 new Label({ text: I18n.t("editor.addLink") }),
                 new Button({
                     icon: Icons.CONTENT.ADD,
                     label: I18n.t("editor.addLink"),
                     clickEvent: () => {
-                        this.#editor.focus()
+                        this.#editor.focus();
                         document.getSelection().removeAllRanges();
-                        document.getSelection().addRange(range_link);
-                        if (selection_link.toString() === "") document.execCommand('insertHTML', false, `<a href="${input_link.getValue()}">${input_link_text.getValue()}</a>`);
-                        else document.execCommand(Commands.CREATE_LINK, false, input_link.getValue())
-                        dialog_link.close()
-                    }
-                }),
-            )
-            dialog_link.addToHeader(content_link_header)
-            let selection_link = undefined;
-            let range_link = undefined;
-            let button_link = new TextEditorButtons({
+                        document.getSelection().addRange(rangeLink);
+                        if (selectionLink.toString() === "")
+                            document.execCommand(
+                                "insertHTML",
+                                false,
+                                `<a href="${inputLink.getValue()}">${inputLinkText.getValue()}</a>`
+                            );
+                        else document.execCommand(Commands.CREATE_LINK, false, inputLink.getValue());
+                        dialogLink.close();
+                    },
+                })
+            );
+            dialogLink.addToHeader(contentLinkHeader);
+            let selectionLink = undefined;
+            let rangeLink = undefined;
+            const buttonLink = new TextEditorButtons({
                 icon: Icons.CONTENT.LINK,
                 disableFocus: true,
                 label: I18n.t("editor.insertLink"),
                 listener: () => {
-                    this.#editor.focus()
-                    selection_link = document.getSelection();
-                    range_link = selection_link.getRangeAt(0)
-                    input_link_text.setValue(selection_link.toString())
-                    if (selection_link.toString() === "") input_link_text.setDisabled(false);
-                    else input_link_text.setDisabled(true);
-                    dialog_link.open()
-                }
-            })
-            this.#addBlock(button_unlink, button_link, dialog_link)
+                    this.#editor.focus();
+                    selectionLink = document.getSelection();
+                    rangeLink = selectionLink.getRangeAt(0);
+                    inputLinkText.setValue(selectionLink.toString());
+                    if (selectionLink.toString() === "") inputLinkText.setDisabled(false);
+                    else inputLinkText.setDisabled(true);
+                    dialogLink.open();
+                },
+            });
+            this.#addBlock(buttonUnlink, buttonLink, dialogLink);
         }
         // ================
         // Создание таблицы
         if (controls.INSERT_TABLE) {
-            let content_table_header = new ContentBlock({
-                direction: "row", wrap: "wrap", align: "center", justify: "space-between", disableMarginChild: true
-            })
-            content_table_header.setWidth("-webkit-fill-available")
-            let content_table_2 = new ContentBlock({
-                direction: "row", wrap: "wrap", align: "center", justify: "space-around"
-            })
-            content_table_2.setWidth("-webkit-fill-available")
-            let content_table = new ContentBlock({
-                direction: "row", wrap: "wrap", align: "center", justify: "space-around"
-            })
-            content_table.setWidth("-webkit-fill-available")
-            let content_table_main = new ContentBlock({
-                direction: "column", wrap: "wrap", align: "center", justify: "space-around"
-            })
-            content_table_main.setWidth("-webkit-fill-available")
-            let checkBox_header = new CheckBox({ title: I18n.t("editor.addThead") })
-            content_table_2.add(checkBox_header)
-            let table_rows = new NumberInput({ title: I18n.t("editor.rows") });
-            let table_cols = new NumberInput({ title: I18n.t("editor.columns") });
-            content_table.add(table_rows, new Label("X"), table_cols)
+            const contentTableHeader = new ContentBlock({
+                direction: "row",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-between",
+                disableMarginChild: true,
+            });
+            contentTableHeader.setWidth("-webkit-fill-available");
+            const contentTable2 = new ContentBlock({
+                direction: "row",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-around",
+            });
+            contentTable2.setWidth("-webkit-fill-available");
+            const contentTable = new ContentBlock({
+                direction: "row",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-around",
+            });
+            contentTable.setWidth("-webkit-fill-available");
+            const contentTableMain = new ContentBlock({
+                direction: "column",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-around",
+            });
+            contentTableMain.setWidth("-webkit-fill-available");
+            const checkboxHeader = new CheckBox({ title: I18n.t("editor.addThead") });
+            contentTable2.add(checkboxHeader);
+            const tableRows = new NumberInput({ title: I18n.t("editor.rows") });
+            const tableColumns = new NumberInput({ title: I18n.t("editor.columns") });
+            contentTable.add(tableRows, new Label("X"), tableColumns);
 
-            content_table_header.add(
+            contentTableHeader.add(
                 new Button({
                     icon: Icons.NAVIGATION.CLOSE,
                     label: I18n.t("common.close"),
                     clickEvent: () => {
-                        dialog_table.close()
-                    }
+                        dialogTable.close();
+                    },
                 }),
                 new Label({ text: I18n.t("editor.addTable") }),
                 new Button({
@@ -500,153 +552,162 @@ class TextEditorPanel {
                     label: I18n.t("editor.addTable"),
                     clickEvent: () => {
                         let error = false;
-                        if (Number(table_rows.getValue()) === 0 && Number(table_cols.getValue()) === 0) {
+                        if (Number(tableRows.getValue()) === 0 && Number(tableColumns.getValue()) === 0) {
                             new Notification(I18n.t("editor.setColumnsAndRows"), Notification.STYLE.ERROR).show();
                             error = true;
-                        } else if (Number(table_cols.getValue()) === 0) {
+                        } else if (Number(tableColumns.getValue()) === 0) {
                             new Notification(I18n.t("editor.setColumns"), Notification.STYLE.ERROR).show();
                             error = true;
-                        } else if (Number(table_rows.getValue()) === 0) {
+                        } else if (Number(tableRows.getValue()) === 0) {
                             new Notification(I18n.t("editor.setRows"), Notification.STYLE.ERROR).show();
                             error = true;
                         }
                         if (!error) {
-                            let table = document.createElement("table")
-                            table.classList.add("text_editor_table")
+                            const table = document.createElement("table");
+                            table.classList.add("text_editor_table");
                             // шапка
-                            if (checkBox_header.getValue()) {
-                                let head_table = table.createTHead()
-                                head_table.classList.add("text_editor_table_body")
-                                let head_row = head_table.insertRow(0)
-                                head_row.classList.add("text_editor_table_row")
-                                for (let j = 0; j < table_cols.getValue(); j++) {
-                                    let cell = head_row.insertCell(j)
-                                    cell.classList.add("text_editor_table_cell")
-                                    cell.innerText = `TH`
+                            if (checkboxHeader.getValue()) {
+                                const headTable = table.createTHead();
+                                headTable.classList.add("text_editor_table_body");
+                                const headRow = headTable.insertRow(0);
+                                headRow.classList.add("text_editor_table_row");
+                                for (let j = 0; j < tableColumns.getValue(); j++) {
+                                    const cell = headRow.insertCell(j);
+                                    cell.classList.add("text_editor_table_cell");
+                                    cell.innerText = `TH`;
                                 }
                             }
                             // тело таблицы
-                            let body_table = table.createTBody()
-                            body_table.classList.add("text_editor_table_body")
-                            for (let i = 0; i < table_rows.getValue(); i++) {
-                                let row = body_table.insertRow(i)
-                                row.classList.add("text_editor_table_row")
-                                for (let j = 0; j < table_cols.getValue(); j++) {
-                                    let cell = row.insertCell(j)
-                                    cell.classList.add("text_editor_table_cell")
-                                    cell.innerText = `TB`
+                            const bodyTable = table.createTBody();
+                            bodyTable.classList.add("text_editor_table_body");
+                            for (let i = 0; i < tableRows.getValue(); i++) {
+                                const row = bodyTable.insertRow(i);
+                                row.classList.add("text_editor_table_row");
+                                for (let j = 0; j < tableColumns.getValue(); j++) {
+                                    const cell = row.insertCell(j);
+                                    cell.classList.add("text_editor_table_cell");
+                                    cell.innerText = `TB`;
                                 }
                             }
-                            this.#editor.focus()
-                            document.execCommand(Commands.INSERT_HTML, false, table.outerHTML)
-                            dialog_table.close()
+                            this.#editor.focus();
+                            document.execCommand(Commands.INSERT_HTML, false, table.outerHTML);
+                            dialogTable.close();
                         }
-                    }
+                    },
                 })
-            )
+            );
 
-            let dialog_table = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true })
-            dialog_table.addToHeader(content_table_header)
-            content_table_main.add(content_table_2, content_table)
-            dialog_table.addToBody(content_table_main)
-            let button_table = new TextEditorButtons({
+            const dialogTable = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true });
+            dialogTable.addToHeader(contentTableHeader);
+            contentTableMain.add(contentTable2, contentTable);
+            dialogTable.addToBody(contentTableMain);
+            const buttonTable = new TextEditorButtons({
                 icon: Icons.EDITOR.TABLE_CHART,
                 label: I18n.t("editor.insertTable"),
                 listener: () => {
-                    this.#editor.focus()
-                    dialog_table.open()
-                }
-            })
-            this.#addBlock(button_table, dialog_table)
+                    this.#editor.focus();
+                    dialogTable.open();
+                },
+            });
+            this.#addBlock(buttonTable, dialogTable);
         }
         // ================
         // Добавление изображения
         if (controls.INSERT_IMAGE) {
-            let content_image_header = new ContentBlock({
-                direction: "row", wrap: "wrap", align: "center", justify: "space-between", disableMarginChild: true
-            })
-            content_image_header.setWidth("-webkit-fill-available")
-            let file = new FileInput({
+            const contentImageHeader = new ContentBlock({
+                direction: "row",
+                wrap: "wrap",
+                align: "center",
+                justify: "space-between",
+                disableMarginChild: true,
+            });
+            contentImageHeader.setWidth("-webkit-fill-available");
+            const file = new FileInput({
                 title: I18n.t("editor.selectImage"),
                 multiple: false,
-                accept: [
-                    AcceptTypes.ALL_IMAGE
-                ]
-            })
-            content_image_header.add(
+                accept: [AcceptTypes.ALL_IMAGE],
+            });
+            contentImageHeader.add(
                 new Button({
                     icon: Icons.NAVIGATION.CLOSE,
                     label: I18n.t("common.close"),
-                    clickEvent: () => dialog_image.close()
+                    clickEvent: () => dialogImage.close(),
                 }),
                 new Label({ text: I18n.t("editor.addImage") }),
                 new Button({
                     icon: Icons.CONTENT.ADD,
                     label: I18n.t("editor.addImage"),
                     clickEvent: () => {
-                        this.#editor.focus()
-                        let image = file.getFile(0)
-                        let reader  = new FileReader();
-                        reader.addEventListener("load", () => {
-                            document.execCommand('insertImage', false, reader.result);
-                        }, false);
+                        this.#editor.focus();
+                        const image = file.getFile(0);
+                        const reader = new FileReader();
+                        reader.addEventListener(
+                            "load",
+                            () => {
+                                document.execCommand("insertImage", false, reader.result);
+                            },
+                            false
+                        );
                         if (image) reader.readAsDataURL(image);
-                        dialog_image.close()
-                    }
+                        dialogImage.close();
+                    },
                 })
-            )
+            );
 
-            let content_image = new ContentBlock({
-                    direction: "column", wrap: "wrap", align: "center", justify: "flex-end"
-            })
-            content_image.setWidth("-webkit-fill-available")
-            content_image.add(file)
-            let dialog_image = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true })
-            dialog_image.addToHeader(content_image_header)
-            dialog_image.addToBody(content_image)
+            const contentImage = new ContentBlock({
+                direction: "column",
+                wrap: "wrap",
+                align: "center",
+                justify: "flex-end",
+            });
+            contentImage.setWidth("-webkit-fill-available");
+            contentImage.add(file);
+            const dialogImage = new Dialog({ width: "500px", height: "max-content", closeOutSideClick: true });
+            dialogImage.addToHeader(contentImageHeader);
+            dialogImage.addToBody(contentImage);
 
-            let button_image = new TextEditorButtons({
+            const buttonImage = new TextEditorButtons({
                 icon: Icons.EDITOR.INSERT_PHOTO,
                 label: I18n.t("editor.insertImage"),
                 listener: () => {
-                    this.#editor.focus()
-                    dialog_image.open()
-                }
-            })
-            this.#addBlock(button_image, dialog_image)
+                    this.#editor.focus();
+                    dialogImage.open();
+                },
+            });
+            this.#addBlock(buttonImage, dialogImage);
         }
         // ======================
         if (controls.LINE_BREAK) {
-            let button_line_break = new TextEditorButtons({
+            const buttonLineBreak = new TextEditorButtons({
                 icon: Icons.EDITOR.INSERT_PAGE_BREAK,
-                command: Commands.INSERT_LINE_BREAK
-            })
-            this.#addBlock(button_line_break)
+                command: Commands.INSERT_LINE_BREAK,
+            });
+            this.#addBlock(buttonLineBreak);
         }
         //
         if (controls.CONTENT_CONTROLS) {
-            let button_COPY = new TextEditorButtons({
+            const buttonCopy = new TextEditorButtons({
                 icon: Icons.CONTENT.CONTENT_COPY,
-                command: Commands.COPY
-            })
-            let button_CUT = new TextEditorButtons({
+                command: Commands.COPY,
+            });
+            const buttonCut = new TextEditorButtons({
                 icon: Icons.CONTENT.CONTENT_CUT,
-                command: Commands.CUT
-            })
-            let button_PASTE = new TextEditorButtons({
+                command: Commands.CUT,
+            });
+            const buttonPaste = new TextEditorButtons({
                 icon: Icons.CONTENT.CONTENT_PASTE,
-                command: Commands.PASTE
-            })
-            this.#addBlock(button_COPY, button_CUT, button_PASTE)
+                command: Commands.PASTE,
+            });
+            this.#addBlock(buttonCopy, buttonCut, buttonPaste);
         }
         // Панель — одна остановка Tab: стрелки и Home/End водят фокус по её пунктам,
         // иначе все кнопки и раскрывающиеся списки стояли бы в обходе Tab подряд
-        new RovingKeyboard(this.#panel, {itemSelector: PANEL_ITEM_SELECTOR});
+        new RovingKeyboard(this.#panel, { itemSelector: PANEL_ITEM_SELECTOR });
     }
     #addBlock(...childs) {
-        let elem = document.createElement("text_editor_block")
-        for (let child of childs) elem.appendChild(child.set())
-        this.#panel.appendChild(elem)
+        const elem = document.createElement("text_editor_block");
+        for (const child of childs) elem.appendChild(child.set());
+        this.#panel.appendChild(elem);
     }
     set() {
         return this.#panel;
@@ -654,4 +715,4 @@ class TextEditorPanel {
 }
 
 exports.TextEditorPanel = TextEditorPanel;
-exports.Commands = Commands;
+exports.Commands = Commands;