chuijs 4.0.2 → 4.0.4

package/framework/components/chui_markdown_editor/markdown_editor.js

@@ -1,32 +1,32 @@
-const {setStyles, markdownToHtml} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, markdownToHtml } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Действия панели разметки: ключ подписи, значок, сочетание и правка */
 const ACTIONS = [
-    {id: "bold", labelKey: "editor.bold", icon: Icons.EDITOR.FORMAT_BOLD, shortcut: "Control+B"},
-    {id: "italic", labelKey: "editor.italic", icon: Icons.EDITOR.FORMAT_ITALIC, shortcut: "Control+I"},
-    {id: "strike", labelKey: "editor.strikethrough", icon: Icons.EDITOR.STRIKETHROUGH_S},
-    {id: "heading", labelKey: "editor.heading", icon: Icons.EDITOR.TITLE},
-    {id: "quote", labelKey: "editor.quote", icon: Icons.EDITOR.FORMAT_QUOTE},
-    {id: "bullets", labelKey: "editor.list", icon: Icons.EDITOR.FORMAT_LIST_BULLETED},
-    {id: "numbers", labelKey: "editor.orderedList", icon: Icons.EDITOR.FORMAT_LIST_NUMBERED},
-    {id: "checklist", labelKey: "editor.checklist", icon: Icons.EDITOR.CHECKLIST},
-    {id: "code", labelKey: "editor.code", icon: Icons.ACTIONS.CODE},
-    {id: "codeblock", labelKey: "editor.codeBlock", icon: Icons.ACTIONS.TERMINAL},
-    {id: "link", labelKey: "editor.link", icon: Icons.EDITOR.INSERT_LINK, shortcut: "Control+K"},
+    { id: "bold", labelKey: "editor.bold", icon: Icons.EDITOR.FORMAT_BOLD, shortcut: "Control+B" },
+    { id: "italic", labelKey: "editor.italic", icon: Icons.EDITOR.FORMAT_ITALIC, shortcut: "Control+I" },
+    { id: "strike", labelKey: "editor.strikethrough", icon: Icons.EDITOR.STRIKETHROUGH_S },
+    { id: "heading", labelKey: "editor.heading", icon: Icons.EDITOR.TITLE },
+    { id: "quote", labelKey: "editor.quote", icon: Icons.EDITOR.FORMAT_QUOTE },
+    { id: "bullets", labelKey: "editor.list", icon: Icons.EDITOR.FORMAT_LIST_BULLETED },
+    { id: "numbers", labelKey: "editor.orderedList", icon: Icons.EDITOR.FORMAT_LIST_NUMBERED },
+    { id: "checklist", labelKey: "editor.checklist", icon: Icons.EDITOR.CHECKLIST },
+    { id: "code", labelKey: "editor.code", icon: Icons.ACTIONS.CODE },
+    { id: "codeblock", labelKey: "editor.codeBlock", icon: Icons.ACTIONS.TERMINAL },
+    { id: "link", labelKey: "editor.link", icon: Icons.EDITOR.INSERT_LINK, shortcut: "Control+K" },
 ];
 
 /** Что делает каждое действие: обёртка вокруг выделения или приставка к строкам */
 const WRAPS = {
-    bold: {before: "**", after: "**", placeholderKey: "editor.placeholderText"},
-    italic: {before: "*", after: "*", placeholderKey: "editor.placeholderText"},
-    strike: {before: "~~", after: "~~", placeholderKey: "editor.placeholderText"},
-    code: {before: "`", after: "`", placeholderKey: "editor.placeholderCode"},
-    codeblock: {before: "```\n", after: "\n```", placeholderKey: "editor.placeholderCode"},
-    link: {before: "[", after: "](url)", placeholderKey: "editor.placeholderText"},
+    bold: { before: "**", after: "**", placeholderKey: "editor.placeholderText" },
+    italic: { before: "*", after: "*", placeholderKey: "editor.placeholderText" },
+    strike: { before: "~~", after: "~~", placeholderKey: "editor.placeholderText" },
+    code: { before: "`", after: "`", placeholderKey: "editor.placeholderCode" },
+    codeblock: { before: "```\n", after: "\n```", placeholderKey: "editor.placeholderCode" },
+    link: { before: "[", after: "](url)", placeholderKey: "editor.placeholderText" },
 };
 
 /**
@@ -80,45 +80,47 @@ class MarkdownEditor {
     #hint = document.createElement("markdown_editor_hint");
     #status = document.createElement("markdown_editor_status");
     #error = document.createElement("chui_error_message");
-    #preview_button = undefined;
+    #previewButton = undefined;
     #actions = new Map();
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
-    #preview_enabled = false;
-    #preview_on = false;
-    #max_length = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #previewEnabled = false;
+    #previewOn = false;
+    #maxLength = undefined;
     #width = undefined;
     #disabled = false;
-    #read_only = false;
+    #readOnly = false;
     #listeners = [];
-    #on_change = undefined;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        value: String(),
-        rows: Number(),
-        preview: Boolean(),
-        maxLength: Number(),
-        width: String(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            value: String(),
+            rows: Number(),
+            preview: Boolean(),
+            maxLength: Number(),
+            width: String(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_MarkdownEditor");
         MarkdownEditor.#counter += 1;
         this.#id = options.id === undefined ? `chui_markdown_editor_${MarkdownEditor.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
-        this.#preview_enabled = options.preview === true;
-        this.#max_length = options.maxLength === undefined ? undefined : Number(options.maxLength);
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
+        this.#previewEnabled = options.preview === true;
+        this.#maxLength = options.maxLength === undefined ? undefined : Number(options.maxLength);
         this.#root.id = this.#id;
         this.#label.className = "markdown_editor_label";
         this.#toolbar.className = "markdown_editor_toolbar";
@@ -145,7 +147,7 @@ class MarkdownEditor {
         this.#buildToolbar();
         // Панель — одна остановка обхода: по кнопкам ходят стрелки/Home/End (tabindex переходящий).
         // Слушатели слоя стоят на самой панели, поэтому destroy() за ним не нужен (как у TextEditorPanel)
-        new RovingKeyboard(this.#toolbar, {itemSelector: "button"});
+        new RovingKeyboard(this.#toolbar, { itemSelector: "button" });
         this.#panes.appendChild(this.#textarea);
         this.#panes.appendChild(this.#preview);
         this.#footer.appendChild(this.#count);
@@ -157,7 +159,7 @@ class MarkdownEditor {
         this.#root.appendChild(this.#status);
         if (options.width !== undefined) this.setWidth(options.width);
         this.setTitle(options.title);
-        this.setLabel(this.#label_text === undefined ? I18n.t("editor.markdownText") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("editor.markdownText") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         this.setRows(options.rows === undefined ? 8 : options.rows);
         this.setTextAreaValue(options.value === undefined ? "" : options.value);
@@ -180,12 +182,12 @@ class MarkdownEditor {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Текст Markdown как есть */
@@ -199,11 +201,11 @@ class MarkdownEditor {
     }
 
     isPreview() {
-        return this.#preview_on;
+        return this.#previewOn;
     }
 
     getMaxLength() {
-        return this.#max_length;
+        return this.#maxLength;
     }
 
     /** Ширина поля (по умолчанию — общая ширина контрола `--control_width`) */
@@ -212,7 +214,7 @@ class MarkdownEditor {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     getDisabled() {
@@ -233,7 +235,7 @@ class MarkdownEditor {
         this.#hint.id = `${id}_hint`;
         // Подпись — настоящий <label>: её связь с полем не должна отставать от идентификаторов
         this.#label.setAttribute("for", this.#textarea.id);
-        if (this.#preview_button !== undefined) this.#preview_button.setAttribute("aria-controls", this.#preview.id);
+        if (this.#previewButton !== undefined) this.#previewButton.setAttribute("aria-controls", this.#preview.id);
         this.#syncDescribedBy();
         return this;
     }
@@ -255,7 +257,7 @@ class MarkdownEditor {
 
     /** Подпись над полем; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         // `for` держим всегда: в разметке настоящий <label>, а подпись появляется и исчезает
         this.#label.setAttribute("for", this.#textarea.id);
         if (text === undefined || text === "") {
@@ -272,8 +274,8 @@ class MarkdownEditor {
 
     /** Имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#textarea.removeAttribute("aria-label");
             else this.#textarea.setAttribute("aria-label", String(text));
         }
@@ -305,7 +307,7 @@ class MarkdownEditor {
     setValue(value = String(), silent = false) {
         const text = value === undefined || value === null ? "" : String(value);
         // В тихом режиме (так зовёт Form.setValues) слишком длинный текст не подставляем
-        if (silent === true && this.#max_length !== undefined && text.length > this.#max_length) return this;
+        if (silent === true && this.#maxLength !== undefined && text.length > this.#maxLength) return this;
         this.setTextAreaValue(text);
         this.#syncCount();
         return this;
@@ -320,20 +322,23 @@ class MarkdownEditor {
 
     /** Предпросмотр: кнопка панели становится переключателем */
     setPreview(on = Boolean()) {
-        if (!this.#preview_enabled) return this;
-        this.#preview_on = on === true;
-        this.#textarea.hidden = this.#preview_on;
-        this.#preview.hidden = !this.#preview_on;
-        if (this.#preview_on) this.#preview.innerHTML = this.getPreviewHtml();
-        if (this.#preview_button !== undefined) {
-            this.#preview_button.setAttribute("aria-pressed", this.#preview_on ? "true" : "false");
-            this.#preview_button.setAttribute("aria-label", this.#preview_on ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview"));
+        if (!this.#previewEnabled) return this;
+        this.#previewOn = on === true;
+        this.#textarea.hidden = this.#previewOn;
+        this.#preview.hidden = !this.#previewOn;
+        if (this.#previewOn) this.#preview.innerHTML = this.getPreviewHtml();
+        if (this.#previewButton !== undefined) {
+            this.#previewButton.setAttribute("aria-pressed", this.#previewOn ? "true" : "false");
+            this.#previewButton.setAttribute(
+                "aria-label",
+                this.#previewOn ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview")
+            );
         }
         return this;
     }
 
     togglePreview() {
-        return this.setPreview(!this.#preview_on);
+        return this.setPreview(!this.#previewOn);
     }
 
     /** Убирает или возвращает панель разметки (поле остаётся полем) */
@@ -352,10 +357,10 @@ class MarkdownEditor {
         return this.#eachLine(marker);
     }
 
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("markdown_editor_readonly", this.#read_only);
-        this.#textarea.readOnly = this.#read_only;
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("markdown_editor_readonly", this.#readOnly);
+        this.#textarea.readOnly = this.#readOnly;
         this.#actionButtonState();
         return this;
     }
@@ -377,7 +382,7 @@ class MarkdownEditor {
     /** Фокус на текст; `Form` зовёт это при ошибке валидации */
     focus() {
         if (this.#disabled) return this;
-        if (this.#preview_on) this.setPreview(false);
+        if (this.#previewOn) this.setPreview(false);
         this.#textarea.focus();
         return this;
     }
@@ -389,8 +394,8 @@ class MarkdownEditor {
 
     // === ВНУТРЕННЕЕ ===
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("editor.markdownText");
     }
 
@@ -398,8 +403,8 @@ class MarkdownEditor {
     // предпросмотр — не правка: его гасит только запрет самого поля (раньше setDisabled
     // включал кнопки обратно и затирал режим только для чтения)
     #actionButtonState() {
-        for (const button of this.#actions.values()) button.disabled = this.#disabled || this.#read_only;
-        if (this.#preview_button !== undefined) this.#preview_button.disabled = this.#disabled;
+        for (const button of this.#actions.values()) button.disabled = this.#disabled || this.#readOnly;
+        if (this.#previewButton !== undefined) this.#previewButton.disabled = this.#disabled;
         return this;
     }
 
@@ -409,7 +414,12 @@ class MarkdownEditor {
             button.type = "button";
             button.className = "markdown_editor_action";
             button.dataset.action = action.id;
-            button.setAttribute("aria-label", action.shortcut === undefined ? I18n.t(action.labelKey) : `${I18n.t(action.labelKey)} (${action.shortcut.replace("Control", "Ctrl")})`);
+            button.setAttribute(
+                "aria-label",
+                action.shortcut === undefined
+                    ? I18n.t(action.labelKey)
+                    : `${I18n.t(action.labelKey)} (${action.shortcut.replace("Control", "Ctrl")})`
+            );
             if (action.shortcut !== undefined) button.setAttribute("aria-keyshortcuts", action.shortcut);
             const glyph = new Icon(action.icon, "18px").set();
             glyph.setAttribute("aria-hidden", "true");
@@ -418,27 +428,27 @@ class MarkdownEditor {
             this.#actions.set(action.id, button);
             this.#toolbar.appendChild(button);
         }
-        if (!this.#preview_enabled) return;
+        if (!this.#previewEnabled) return;
         const divider = document.createElement("markdown_editor_divider");
         divider.setAttribute("aria-hidden", "true");
         this.#toolbar.appendChild(divider);
-        this.#preview_button = document.createElement("button");
-        this.#preview_button.type = "button";
-        this.#preview_button.className = "markdown_editor_action markdown_editor_preview";
-        this.#preview_button.setAttribute("aria-pressed", "false");
-        this.#preview_button.setAttribute("aria-label", I18n.t("editor.showPreview"));
-        this.#preview_button.setAttribute("aria-controls", this.#preview.id);
+        this.#previewButton = document.createElement("button");
+        this.#previewButton.type = "button";
+        this.#previewButton.className = "markdown_editor_action markdown_editor_preview";
+        this.#previewButton.setAttribute("aria-pressed", "false");
+        this.#previewButton.setAttribute("aria-label", I18n.t("editor.showPreview"));
+        this.#previewButton.setAttribute("aria-controls", this.#preview.id);
         const glyph = new Icon(Icons.ACTIONS.VISIBILITY, "18px").set();
         glyph.setAttribute("aria-hidden", "true");
-        this.#preview_button.appendChild(glyph);
-        this.#preview_button.addEventListener("click", () => this.togglePreview());
-        this.#toolbar.appendChild(this.#preview_button);
+        this.#previewButton.appendChild(glyph);
+        this.#previewButton.addEventListener("click", () => this.togglePreview());
+        this.#toolbar.appendChild(this.#previewButton);
     }
 
     // Значение ставится программно: слушателей не дёргаем (как у других полей)
     setTextAreaValue(text = String()) {
         this.#textarea.value = text;
-        if (this.#preview_on) this.#preview.innerHTML = this.getPreviewHtml();
+        if (this.#previewOn) this.#preview.innerHTML = this.getPreviewHtml();
         return this;
     }
 
@@ -451,11 +461,11 @@ class MarkdownEditor {
     }
 
     #syncCount() {
-        const has_limit = this.#max_length !== undefined;
-        this.#footer.hidden = !has_limit;
-        if (!has_limit) return this;
-        this.#count.innerText = `${this.getValue().length} / ${this.#max_length}`;
-        this.#count.classList.toggle("markdown_editor_count_over", this.getValue().length > this.#max_length);
+        const hasLimit = this.#maxLength !== undefined;
+        this.#footer.hidden = !hasLimit;
+        if (!hasLimit) return this;
+        this.#count.innerText = `${this.getValue().length} / ${this.#maxLength}`;
+        this.#count.classList.toggle("markdown_editor_count_over", this.getValue().length > this.#maxLength);
         return this;
     }
 
@@ -466,11 +476,11 @@ class MarkdownEditor {
     #notify() {
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     // Правка диапазона: вставка идёт командой, поэтому Ctrl+Z в поле её отменяет
-    #replaceRange(start = Number(), end = Number(), text = String(), caret_start = Number(), caret_end = Number()) {
+    #replaceRange(start = Number(), end = Number(), text = String(), caretStart = Number(), caretEnd = Number()) {
         const textarea = this.#textarea;
         textarea.focus();
         textarea.setSelectionRange(start, end);
@@ -486,8 +496,8 @@ class MarkdownEditor {
             this.#syncCount();
             this.#notify();
         }
-        if (this.#preview_on) this.#preview.innerHTML = this.getPreviewHtml();
-        textarea.setSelectionRange(caret_start, caret_end);
+        if (this.#previewOn) this.#preview.innerHTML = this.getPreviewHtml();
+        textarea.setSelectionRange(caretStart, caretEnd);
         return this;
     }
 
@@ -501,7 +511,13 @@ class MarkdownEditor {
         const from = start + before.length;
         const to = from + inner.length;
         // С выделением остаётся выделен весь результат, без него каретка встаёт внутрь разметки
-        return this.#replaceRange(start, end, text, selected === "" && placeholder !== "" ? from : start, selected === "" && placeholder !== "" ? to : start + text.length);
+        return this.#replaceRange(
+            start,
+            end,
+            text,
+            selected === "" && placeholder !== "" ? from : start,
+            selected === "" && placeholder !== "" ? to : start + text.length
+        );
     }
 
     #eachLine(marker = undefined) {
@@ -518,7 +534,7 @@ class MarkdownEditor {
     }
 
     #apply(id = String()) {
-        if (this.#disabled || this.#read_only) return this;
+        if (this.#disabled || this.#readOnly) return this;
         const action = ACTIONS.find((item) => item.id === id);
         const wrap = WRAPS[id];
         if (id === "link") this.#linkWrap();
@@ -528,7 +544,7 @@ class MarkdownEditor {
         else if (id === "bullets") this.#eachLine("- ");
         else if (id === "checklist") this.#eachLine("- [ ] ");
         else if (id === "numbers") this.#eachLine((line, index) => `${index + 1}. ${line}`);
-        if (action !== undefined) this.#announce(I18n.t("editor.applied", {action: I18n.t(action.labelKey)}));
+        if (action !== undefined) this.#announce(I18n.t("editor.applied", { action: I18n.t(action.labelKey) }));
         return this;
     }
 
@@ -551,14 +567,14 @@ class MarkdownEditor {
     }
 
     #onInput = () => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         this.#syncCount();
-        if (this.#preview_on) this.#preview.innerHTML = this.getPreviewHtml();
+        if (this.#previewOn) this.#preview.innerHTML = this.getPreviewHtml();
         this.#notify();
     };
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         if (event.ctrlKey !== true && event.metaKey !== true) return;
         const key = String(event.key).toLowerCase();
         if (key !== "b" && key !== "i" && key !== "k") return;
@@ -567,4 +583,4 @@ class MarkdownEditor {
     };
 }
 
-exports.MarkdownEditor = MarkdownEditor
+exports.MarkdownEditor = MarkdownEditor;

package/framework/components/chui_markdown_editor/styles.css

@@ -8,13 +8,13 @@ chui_markdown_editor {
     width: var(--control_width);
     max-width: 100%;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .markdown_editor_label {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -33,7 +33,7 @@ chui_markdown_editor {
     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);
 }
 
@@ -98,7 +98,7 @@ markdown_editor_divider {
     box-sizing: border-box;
     overflow: hidden;
     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);
 }
 
@@ -123,7 +123,7 @@ markdown_editor_divider {
     border: none;
     background: transparent;
     color: var(--text_color);
-    font-family: var(--code_font, monospace);
+    font-family: var(--font_mono);
     font-size: var(--font_default_size);
     line-height: 1.5;
     resize: vertical;