chuijs 4.0.2 → 4.0.4

package/framework/components/chui_text_editor/styles.css

@@ -6,7 +6,7 @@ chui_text_editor_test {
     flex-direction: column;
     width: -webkit-fill-available;
     height: max-content;
-    margin: var(--margin)
+    margin: var(--block_margin);
 }
 
 chui_text_editor {
@@ -26,7 +26,7 @@ chui_editor_controls {
     padding: 4px;
     border: 1px solid var(--border_color);
     border-bottom: none;
-    border-radius: var(--border_radius) var(--border_radius) 0 0;
+    border-radius: var(--radius_sm) var(--radius_sm) 0 0;
     background: var(--element_background_2);
 }
 
@@ -36,7 +36,7 @@ chui_editor_text_input {
     width: -webkit-fill-available;
     padding: 8px 10px;
     border: 1px solid var(--border_color);
-    border-radius: 0 0 var(--border_radius) var(--border_radius);
+    border-radius: 0 0 var(--radius_sm) var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-size: var(--font_default_size);
@@ -54,20 +54,20 @@ chui_editor_text_input:focus {
 }
 
 chui_editor_text_input div {
-    margin-bottom: 10px
+    margin-bottom: 10px;
 }
 
 .text_editor_label {
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 chui_editor_text_input p {
-    margin: 5px 0
+    margin: 5px 0;
 }
 
 p img {
@@ -75,8 +75,8 @@ p img {
     padding: 0;
     width: auto;
     height: auto;
-    border:  2px solid transparent;
-    border-radius: var(--border_radius)
+    border: 2px solid transparent;
+    border-radius: var(--radius_sm);
 }
 
 /* Кнопки панели — как действия панели разметки у MarkdownEditor: сторона из токена
@@ -118,7 +118,7 @@ chui_text_editor_select_box {
     flex-direction: column;
     align-items: baseline;
     height: max-content;
-    width: auto
+    width: auto;
 }
 
 text_editor_select_box {
@@ -141,11 +141,12 @@ text_editor_select_box:hover {
 }
 
 .text_editor_selectbox_input {
-    width:100%;
+    width: 100%;
     display: block;
     outline: none;
     margin: 0;
-    padding-block: 6px 6px; padding-inline: 6px 0;
+    padding-block: 6px 6px;
+    padding-inline: 6px 0;
     background: transparent;
     color: var(--text_color);
     text-align: start;
@@ -179,11 +180,11 @@ text_editor_selectbox_dropdown {
     -webkit-backdrop-filter: var(--global_blur);
     color: var(--text_color);
     outline: none;
-    position:absolute;
-    display:none;
+    position: absolute;
+    display: none;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     margin-top: 0;
     padding: 6px;
     font-size: var(--font_default_size);
@@ -208,7 +209,7 @@ text_editor_select_button_open {
 text_editor_selectbox_option {
     text-align: start;
     padding: 6px 12px;
-    border-radius: var(--border_radius)
+    border-radius: var(--radius_sm);
 }
 
 /* Заголовок пункта — абзац или заголовок (тег задаёт вызывающий): отступы снимает CSS.
@@ -219,7 +220,7 @@ text_editor_selectbox_option {
 }
 
 text_editor_selectbox_option:hover {
-    background: var(--element_background_hover)
+    background: var(--element_background_hover);
 }
 
 text_editor_selectbox_option:hover font {
@@ -254,24 +255,24 @@ text_editor_block {
 
 .text_editor_table_body {
     border: 1px solid var(--blue_prime_background);
-    width: auto
+    width: auto;
 }
 
 .text_editor_table_row {
     width: auto;
-    display: table-row
+    display: table-row;
 }
 
 .text_editor_table_cell {
     height: max-content;
     width: auto;
     display: table-cell;
-    border: 1px solid var(--blue_prime_background)
+    border: 1px solid var(--blue_prime_background);
 }
 
 pre {
-    font-family: 'chui_mono';
-    font-weight: 400
+    font-family: "chui_mono";
+    font-weight: 400;
 }
 
 /* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */

package/framework/components/chui_text_editor/text_editor.js

@@ -1,131 +1,155 @@
-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');
+    #chuiTextEditorTest = document.createElement("chui_text_editor_test");
+    #chuiTextEditor = document.createElement("chui_text_editor");
+    #editorControls = document.createElement("chui_editor_controls");
+    #textInput = 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.#chuiTextEditorTest.appendChild(this.#label);
         }
         // Панель управления — панель инструментов с именем
-        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-controls", this.#id);
+        this.#editorControls.appendChild(new TextEditorPanel(this.#textInput, options.controls).set());
+        this.#editorControls.setAttribute("role", "toolbar");
+        this.#editorControls.setAttribute(
+            "aria-label",
+            options.controlsLabel === undefined ? I18n.t("editor.formatting") : options.controlsLabel
+        );
+        this.#editorControls.setAttribute("aria-controls", this.#id);
         //
-        this.#text_input.contentEditable = 'true';
-        this.#text_input.id = this.#id
+        this.#textInput.contentEditable = "true";
+        this.#textInput.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);
-        this.#text_input.style.height = height;
-        this.#chui_text_editor.appendChild(this.#editor_controls);
-        this.#chui_text_editor.appendChild(this.#text_input);
+        this.#textInput.setAttribute("role", "textbox");
+        this.#textInput.setAttribute("aria-multiline", "true");
+        if (options.title !== undefined) this.#textInput.setAttribute("aria-labelledby", this.#label.id);
+        else
+            this.#textInput.setAttribute(
+                "aria-label",
+                options.label === undefined ? I18n.t("editor.textEditor") : options.label
+            );
+        this.#textInput.style.height = height;
+        this.#chuiTextEditor.appendChild(this.#editorControls);
+        this.#chuiTextEditor.appendChild(this.#textInput);
         //
-        document.execCommand('defaultParagraphSeparator', false, 'p');
-        this.#text_input.appendChild(initFirstLine())
+        document.execCommand("defaultParagraphSeparator", false, "p");
+        this.#textInput.appendChild(initFirstLine());
         //
-        this.#text_input.addEventListener("keyup", (e) => {
-            if (e.keyCode === 8 && this.#text_input.children.length === 0) {
-                this.#text_input.appendChild(initFirstLine())
+        this.#textInput.addEventListener("keyup", (e) => {
+            if (e.keyCode === 8 && this.#textInput.children.length === 0) {
+                this.#textInput.appendChild(initFirstLine());
             }
-        })
-        let editImage = new DialogEdit(I18n.t("editor.editImage"))
-        this.#text_input.addEventListener("dblclick", (e) => {
+        });
+        const editImage = new DialogEdit(I18n.t("editor.editImage"));
+        this.#textInput.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.#editorControls.appendChild(editImage.set());
         // Фокус отмечает контур области текста (styles.css): рамки у самого редактора больше нет —
         // её рисуют панель сверху и поле снизу, как у MarkdownEditor
-        this.#chui_text_editor_test.appendChild(this.#chui_text_editor)
+        this.#chuiTextEditorTest.appendChild(this.#chuiTextEditor);
     }
     addInputListener(listener = () => {}) {
-        this.#text_input.addEventListener("input", listener)
+        this.#textInput.addEventListener("input", listener);
+    }
+    setValueAsHTML(value) {
+        this.#textInput.innerHTML = value;
+    }
+    getValueAsHTML() {
+        return this.#textInput.innerHTML;
+    }
+    setValueAsText(value) {
+        this.#textInput.innerText = value;
+    }
+    getValueAsText() {
+        return this.#textInput.innerText;
+    }
+    set() {
+        return this.#chuiTextEditorTest;
     }
-    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" })
+    #dialogLink = new Dialog({ width: "max-content", height: "max-content", closeOutSideClick: true });
+    #imgWidth = new TextInput({ title: I18n.t("editor.width"), width: "150px" });
+    #imgHeight = 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")
-        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)
-        content_header.add(
+        const contentBody = new ContentBlock({
+            direction: "row",
+            wrap: "wrap",
+            align: "center",
+            justify: "center",
+        });
+        contentBody.setWidth("-webkit-fill-available");
+        const contentHeader = new ContentBlock({
+            direction: "row",
+            wrap: "wrap",
+            align: "center",
+            justify: "space-between",
+            disableMarginChild: true,
+        });
+        contentHeader.setWidth("-webkit-fill-available");
+        contentBody.add(this.#imgWidth, this.#imgHeight);
+        this.#dialogLink.addToBody(contentBody);
+        contentHeader.add(
             new Button({
                 title: I18n.t("common.close"),
-                clickEvent: () => this.#dialog_link.close()
+                clickEvent: () => this.#dialogLink.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.#imgWidth.getValue()}`;
+                    this.#target.style.height = `${this.#imgHeight.getValue()}`;
+                    this.#dialogLink.close();
+                },
             })
-        )
-        this.#dialog_link.addToHeader(content_header)
+        );
+        this.#dialogLink.addToHeader(contentHeader);
     }
     setTarget(target) {
         this.#target = target;
-        let style = getComputedStyle(this.#target);
-        this.#img_width.setValue(style.width)
-        this.#img_height.setValue(style.height)
+        const style = getComputedStyle(this.#target);
+        this.#imgWidth.setValue(style.width);
+        this.#imgHeight.setValue(style.height);
     }
     openDialog() {
-        this.#dialog_link.open()
+        this.#dialogLink.open();
     }
     set() {
-        return this.#dialog_link.set();
+        return this.#dialogLink.set();
     }
 }
 
 function initFirstLine() {
-    let first_line = document.createElement("p")
-    let br = document.createElement("br")
-    first_line.appendChild(br)
-    return first_line
-}
+    const firstLine = document.createElement("p");
+    const br = document.createElement("br");
+    firstLine.appendChild(br);
+    return firstLine;
+}