chuijs 4.0.2 → 4.0.3

package/framework/components/chui_text_editor/text_editor.js

@@ -1,122 +1,146 @@
-const {Label} = require("../chui_label/label");
-const {TextEditorPanel} = require("./text_editor_panel");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {Dialog} = require("../chui_modal/modal");
-const {ContentBlock} = require("../chui_content_block/content_block");
-const {Button} = require("../chui_button/button");
-const {TextInput} = require("../chui_inputs/chui_text/text");
+const { Label } = require("../chui_label/label");
+const { TextEditorPanel } = require("./text_editor_panel");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Dialog } = require("../chui_modal/modal");
+const { ContentBlock } = require("../chui_content_block/content_block");
+const { Button } = require("../chui_button/button");
+const { TextInput } = require("../chui_inputs/chui_text/text");
 
 class TextEditor {
     #chui_text_editor_test = document.createElement("chui_text_editor_test");
-    #chui_text_editor = document.createElement('chui_text_editor');
-    #editor_controls = document.createElement('chui_editor_controls');
-    #text_input = document.createElement('chui_editor_text_input');
+    #chui_text_editor = document.createElement("chui_text_editor");
+    #editor_controls = document.createElement("chui_editor_controls");
+    #text_input = document.createElement("chui_editor_text_input");
     #id = require("randomstring").generate();
     #label = document.createElement("label");
     constructor(height = String(), options = {}) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TextEditor');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TextEditor");
         // Моноширинный шрифт (2.2 МБ из 3.67 МБ всех шрифтов) нужен только редактору:
         // подключаем его по требованию, а не на старте приложения
-        require('../../modules/chui_fonts').installMono();
+        require("../../modules/chui_fonts").installMono();
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.className = 'text_editor_label';
-            this.#label.setAttribute('for', this.#id);
+            this.#label.className = "text_editor_label";
+            this.#label.setAttribute("for", this.#id);
             // `for` у div не работает: имя связываем через aria-labelledby
             this.#label.id = `${this.#id}_label`;
             this.#chui_text_editor_test.appendChild(this.#label);
         }
         // Панель управления — панель инструментов с именем
-        this.#editor_controls.appendChild(new TextEditorPanel(this.#text_input, options.controls).set())
+        this.#editor_controls.appendChild(new TextEditorPanel(this.#text_input, options.controls).set());
         this.#editor_controls.setAttribute("role", "toolbar");
-        this.#editor_controls.setAttribute("aria-label", options.controlsLabel === undefined ? I18n.t("editor.formatting") : options.controlsLabel);
+        this.#editor_controls.setAttribute(
+            "aria-label",
+            options.controlsLabel === undefined ? I18n.t("editor.formatting") : options.controlsLabel
+        );
         this.#editor_controls.setAttribute("aria-controls", this.#id);
         //
-        this.#text_input.contentEditable = 'true';
-        this.#text_input.id = this.#id
+        this.#text_input.contentEditable = "true";
+        this.#text_input.id = this.#id;
         // contenteditable — это textbox: без роли и имени поле читается как пустой текст
         this.#text_input.setAttribute("role", "textbox");
         this.#text_input.setAttribute("aria-multiline", "true");
         if (options.title !== undefined) this.#text_input.setAttribute("aria-labelledby", this.#label.id);
-        else this.#text_input.setAttribute("aria-label", options.label === undefined ? I18n.t("editor.textEditor") : options.label);
+        else
+            this.#text_input.setAttribute(
+                "aria-label",
+                options.label === undefined ? I18n.t("editor.textEditor") : options.label
+            );
         this.#text_input.style.height = height;
         this.#chui_text_editor.appendChild(this.#editor_controls);
         this.#chui_text_editor.appendChild(this.#text_input);
         //
-        document.execCommand('defaultParagraphSeparator', false, 'p');
-        this.#text_input.appendChild(initFirstLine())
+        document.execCommand("defaultParagraphSeparator", false, "p");
+        this.#text_input.appendChild(initFirstLine());
         //
         this.#text_input.addEventListener("keyup", (e) => {
             if (e.keyCode === 8 && this.#text_input.children.length === 0) {
-                this.#text_input.appendChild(initFirstLine())
+                this.#text_input.appendChild(initFirstLine());
             }
-        })
-        let editImage = new DialogEdit(I18n.t("editor.editImage"))
+        });
+        let editImage = new DialogEdit(I18n.t("editor.editImage"));
         this.#text_input.addEventListener("dblclick", (e) => {
             if (e.target.tagName === "IMG") {
-                editImage.setTarget(e.target)
-                editImage.openDialog()
+                editImage.setTarget(e.target);
+                editImage.openDialog();
             }
-        })
-        this.#editor_controls.appendChild(editImage.set())
+        });
+        this.#editor_controls.appendChild(editImage.set());
         // Фокус отмечает контур области текста (styles.css): рамки у самого редактора больше нет —
         // её рисуют панель сверху и поле снизу, как у MarkdownEditor
-        this.#chui_text_editor_test.appendChild(this.#chui_text_editor)
+        this.#chui_text_editor_test.appendChild(this.#chui_text_editor);
     }
     addInputListener(listener = () => {}) {
-        this.#text_input.addEventListener("input", listener)
+        this.#text_input.addEventListener("input", listener);
+    }
+    setValueAsHTML(value) {
+        this.#text_input.innerHTML = value;
+    }
+    getValueAsHTML() {
+        return this.#text_input.innerHTML;
+    }
+    setValueAsText(value) {
+        this.#text_input.innerText = value;
+    }
+    getValueAsText() {
+        return this.#text_input.innerText;
+    }
+    set() {
+        return this.#chui_text_editor_test;
     }
-    setValueAsHTML(value) { this.#text_input.innerHTML = value; }
-    getValueAsHTML() { return this.#text_input.innerHTML; }
-    setValueAsText(value) { this.#text_input.innerText = value; }
-    getValueAsText() { return this.#text_input.innerText; }
-    set() { return this.#chui_text_editor_test; }
 }
 
 exports.TextEditor = TextEditor;
 
 class DialogEdit {
     #target = undefined;
-    #dialog_link = new Dialog({ width: "max-content", height: "max-content", closeOutSideClick: true })
-    #img_width = new TextInput({ title: I18n.t("editor.width"), width: "150px" })
-    #img_height = new TextInput({ title: I18n.t("editor.height"), width: "150px" })
+    #dialog_link = new Dialog({ width: "max-content", height: "max-content", closeOutSideClick: true });
+    #img_width = new TextInput({ title: I18n.t("editor.width"), width: "150px" });
+    #img_height = new TextInput({ title: I18n.t("editor.height"), width: "150px" });
     constructor(label) {
         //
         let content_body = new ContentBlock({
-            direction: "row", wrap: "wrap", align: "center", justify: "center"
-        })
-        content_body.setWidth("-webkit-fill-available")
+            direction: "row",
+            wrap: "wrap",
+            align: "center",
+            justify: "center",
+        });
+        content_body.setWidth("-webkit-fill-available");
         let content_header = new ContentBlock({
-            direction: "row", wrap: "wrap", align: "center", justify: "space-between", disableMarginChild: true
-        })
-        content_header.setWidth("-webkit-fill-available")
-        content_body.add(this.#img_width, this.#img_height)
-        this.#dialog_link.addToBody(content_body)
+            direction: "row",
+            wrap: "wrap",
+            align: "center",
+            justify: "space-between",
+            disableMarginChild: true,
+        });
+        content_header.setWidth("-webkit-fill-available");
+        content_body.add(this.#img_width, this.#img_height);
+        this.#dialog_link.addToBody(content_body);
         content_header.add(
             new Button({
                 title: I18n.t("common.close"),
-                clickEvent: () => this.#dialog_link.close()
+                clickEvent: () => this.#dialog_link.close(),
             }),
             new Label(label),
             new Button({
                 title: I18n.t("editor.save"),
                 clickEvent: () => {
-                    this.#target.style.width = `${this.#img_width.getValue()}`
-                    this.#target.style.height = `${this.#img_height.getValue()}`
-                    this.#dialog_link.close()
-                }
+                    this.#target.style.width = `${this.#img_width.getValue()}`;
+                    this.#target.style.height = `${this.#img_height.getValue()}`;
+                    this.#dialog_link.close();
+                },
             })
-        )
-        this.#dialog_link.addToHeader(content_header)
+        );
+        this.#dialog_link.addToHeader(content_header);
     }
     setTarget(target) {
         this.#target = target;
         let style = getComputedStyle(this.#target);
-        this.#img_width.setValue(style.width)
-        this.#img_height.setValue(style.height)
+        this.#img_width.setValue(style.width);
+        this.#img_height.setValue(style.height);
     }
     openDialog() {
-        this.#dialog_link.open()
+        this.#dialog_link.open();
     }
     set() {
         return this.#dialog_link.set();
@@ -124,8 +148,8 @@ class DialogEdit {
 }
 
 function initFirstLine() {
-    let first_line = document.createElement("p")
-    let br = document.createElement("br")
-    first_line.appendChild(br)
-    return first_line
-}
+    let first_line = document.createElement("p");
+    let br = document.createElement("br");
+    first_line.appendChild(br);
+    return first_line;
+}