chuijs 4.0.3 → 4.0.4

package/framework/components/chui_kanban/styles.css

@@ -3,7 +3,7 @@ chui_kanban {
     display: block;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -24,7 +24,7 @@ kanban_column {
     min-width: 0;
     background: var(--element_background);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     box-sizing: border-box;
 }
 
@@ -74,7 +74,7 @@ kanban_column.kanban_column_reject {
 }
 
 kanban_column.kanban_column_reject kanban_column_body {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
 }
 
 button.kanban_card {
@@ -84,7 +84,7 @@ button.kanban_card {
     padding: 8px 10px;
     border: 1px solid var(--border_color);
     border-inline-start: 3px solid var(--kanban_card_color, var(--blue_prime_background));
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     color: var(--text_color);
     font-family: inherit;
@@ -105,6 +105,10 @@ button.kanban_card:focus-visible {
 button.kanban_card.kanban_card_dragging {
     opacity: 0.5;
     cursor: grabbing;
+    /* Карточка чуть приподнята и наклонена: взятая в руку вещь, а не просто поблёкшая
+       строка. Тень — та же, что у поднятых слоёв */
+    transform: scale(1.02) rotate(1deg);
+    box-shadow: var(--box_shadow_drop);
 }
 
 kanban_card_title {

package/framework/components/chui_kbd/styles.css

@@ -5,7 +5,7 @@ chui_kbd {
     gap: 4px;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }

package/framework/components/chui_label/label.js

@@ -1,7 +1,7 @@
 const { setStyles, htmlToMarkdown, markdownToHtml, optionOr } = require("../../modules/chui_functions");
 
 class Label {
-    #chui_label = document.createElement(`chui_label`);
+    #chuiLabel = document.createElement(`chui_label`);
     constructor(
         options = {
             id: String(),
@@ -16,43 +16,43 @@ class Label {
         setStyles(__dirname + "/styles.css", "chUiJS_Label");
         // Стили текста лейбла: пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
-        if (text !== undefined && markdown_text !== undefined) {
+        const markdownText = optionOr(options.markdownText, undefined);
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         } else {
-            if (text !== undefined) this.#chui_label.innerText = text;
-            if (markdown_text !== undefined) this.#chui_label.innerHTML = markdownToHtml(markdown_text);
+            if (text !== undefined) this.#chuiLabel.innerText = text;
+            if (markdownText !== undefined) this.#chuiLabel.innerHTML = markdownToHtml(markdownText);
         }
         //
-        if (options.id !== undefined) this.#chui_label.id = options.id;
-        if (options.textAlign !== undefined) this.#chui_label.style.textAlign = options.textAlign;
-        if (options.wordBreak !== undefined) this.#chui_label.style.wordBreak = options.wordBreak;
-        if (options.width !== undefined) this.#chui_label.style.width = options.width;
-        if (options.fontSize !== undefined) this.#chui_label.style.fontSize = options.fontSize;
+        if (options.id !== undefined) this.#chuiLabel.id = options.id;
+        if (options.textAlign !== undefined) this.#chuiLabel.style.textAlign = options.textAlign;
+        if (options.wordBreak !== undefined) this.#chuiLabel.style.wordBreak = options.wordBreak;
+        if (options.width !== undefined) this.#chuiLabel.style.width = options.width;
+        if (options.fontSize !== undefined) this.#chuiLabel.style.fontSize = options.fontSize;
     }
     // GET
     getId() {
-        return this.#chui_label.id;
+        return this.#chuiLabel.id;
     }
     getText() {
-        return this.#chui_label.innerText;
+        return this.#chuiLabel.innerText;
     }
     getMarkdownText() {
-        return htmlToMarkdown(this.#chui_label.innerHTML);
+        return htmlToMarkdown(this.#chuiLabel.innerHTML);
     }
     // SET
     setId(id = String()) {
-        this.#chui_label.id = id;
+        this.#chuiLabel.id = id;
     }
     setText(text = String()) {
-        this.#chui_label.innerText = text;
+        this.#chuiLabel.innerText = text;
     }
     setMarkdownText(text = String()) {
-        this.#chui_label.innerHTML = markdownToHtml(text);
+        this.#chuiLabel.innerHTML = markdownToHtml(text);
     }
     // RENDER
     set() {
-        return this.#chui_label;
+        return this.#chuiLabel;
     }
 }
 

package/framework/components/chui_label/styles.css

@@ -1,7 +1,7 @@
 chui_label {
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     font-weight: 500;
     color: var(--text_color);

package/framework/components/chui_link/link.js

@@ -29,8 +29,8 @@ class Link {
     #icon = undefined;
     #id = undefined;
     #href = undefined;
-    #click_event = undefined;
-    #click_listeners = [];
+    #clickEvent = undefined;
+    #clickListeners = [];
     #disabled = false;
     #external = undefined;
 
@@ -54,14 +54,14 @@ class Link {
         this.#root.id = this.#id;
         this.#root.classList.add("chui_link");
         this.#external = options.external;
-        this.#click_event = options.clickEvent;
+        this.#clickEvent = options.clickEvent;
         this.#root.addEventListener("click", this.#onClick);
         this.#root.innerText = options.text === undefined ? "" : options.text;
         if (options.title !== undefined) this.#root.setAttribute("title", options.title);
         if (options.width !== undefined) this.setWidth(options.width);
         if (options.href !== undefined) this.setHref(options.href);
         if (options.icon !== undefined) this.setIcon(options.icon);
-        if (this.#href === undefined && this.#click_event !== undefined) this.#applyLinkRole();
+        if (this.#href === undefined && this.#clickEvent !== undefined) this.#applyLinkRole();
         if (options.disabled === true) this.setDisabled(true);
         if (options.clickListener !== undefined) this.addClickListener(options.clickListener);
     }
@@ -148,13 +148,13 @@ class Link {
 
     /** Свой обработчик клика; вызывается вместо открытия адреса */
     setClickEvent(listener = () => {}) {
-        this.#click_event = listener;
+        this.#clickEvent = listener;
         if (this.#href === undefined) this.#applyLinkRole();
         return this;
     }
 
     addClickListener(listener = () => {}) {
-        this.#click_listeners.push(listener);
+        this.#clickListeners.push(listener);
         return this;
     }
 
@@ -187,10 +187,10 @@ class Link {
             event.preventDefault();
             return;
         }
-        for (const listener of [...this.#click_listeners]) listener(event);
-        if (this.#click_event !== undefined) {
+        for (const listener of [...this.#clickListeners]) listener(event);
+        if (this.#clickEvent !== undefined) {
             event.preventDefault();
-            this.#click_event(event);
+            this.#clickEvent(event);
             return;
         }
         if (!this.isExternal()) return;

package/framework/components/chui_link/styles.css

@@ -3,17 +3,24 @@
     align-items: center;
     gap: 5px;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--link_color);
     font-size: var(--font_default_size);
-    text-decoration: none;
+    /* Подчёркивание есть всегда, а видно становится на наведении: так строка не дёргает вёрстку
+       и не меняет высоту. Свой список перехода заменяет общее правило `*` целиком, поэтому
+       в нём перечислены все свойства ссылки: подчёркивание, цвет и притухание на нажатии */
+    text-decoration: underline transparent;
+    transition:
+        color var(--motion_fast) var(--motion_ease),
+        opacity var(--motion_fast) var(--motion_ease),
+        text-decoration-color var(--motion_fast) var(--motion_ease);
     cursor: pointer;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     outline: none;
 }
 
 .chui_link:hover {
-    text-decoration: underline;
+    text-decoration-color: currentColor;
 }
 
 /* Нажатие: ссылка притухает на мгновение — заливка и белый текст ссылке неуместны */

package/framework/components/chui_list/list.js

@@ -33,7 +33,7 @@ class List {
     #rows = [];
     #selectable = false;
     #selected = -1;
-    #on_select = undefined;
+    #onSelect = undefined;
     #listeners = [];
     #roving = undefined;
 
@@ -54,7 +54,7 @@ class List {
         this.#selectable = options.selectable === true;
         this.#root.setAttribute("role", this.#selectable ? "listbox" : "list");
         this.#root.setAttribute("aria-label", optionOr(options.label, I18n.t("common.list")));
-        this.#on_select = options.onSelect;
+        this.#onSelect = options.onSelect;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         // Клавиатура списка выборов: одна остановка Tab на список
         if (this.#selectable) this.#roving = new RovingKeyboard(this.#root, { itemSelector: "chui_list_item" });
@@ -134,7 +134,7 @@ class List {
     #notify() {
         const item = this.#selected === -1 ? undefined : this.#items[this.#selected];
         for (const listener of [...this.#listeners]) listener(item, this.#selected, this);
-        if (this.#on_select !== undefined) this.#on_select(item, this.#selected, this);
+        if (this.#onSelect !== undefined) this.#onSelect(item, this.#selected, this);
     }
 
     #render() {
@@ -159,9 +159,9 @@ class List {
 
     #applySelection() {
         this.#rows.forEach((row, index) => {
-            const is_selected = this.#selectable && index === this.#selected;
-            row.classList.toggle("list_item_active", is_selected);
-            if (this.#selectable) row.setAttribute("aria-selected", is_selected ? "true" : "false");
+            const isSelected = this.#selectable && index === this.#selected;
+            row.classList.toggle("list_item_active", isSelected);
+            if (this.#selectable) row.setAttribute("aria-selected", isSelected ? "true" : "false");
         });
     }
 
@@ -185,7 +185,7 @@ class ListItem {
     #title = document.createElement("chui_list_item_title");
     #subtitle = document.createElement("chui_list_item_subtitle");
     #meta = document.createElement("chui_list_item_meta");
-    #click_event = undefined;
+    #clickEvent = undefined;
     #disabled = false;
 
     constructor(
@@ -201,7 +201,7 @@ class ListItem {
     ) {
         ListItem.#counter += 1;
         this.#root.id = options.id === undefined ? `chui_list_item_${ListItem.#counter}` : options.id;
-        this.#click_event = options.clickEvent;
+        this.#clickEvent = options.clickEvent;
         this.#content.appendChild(this.#title);
         this.#content.appendChild(this.#subtitle);
         this.#root.appendChild(this.#content);
@@ -282,7 +282,7 @@ class ListItem {
 
     /** Свой обработчик нажатия: строка получает настоящий `<button>` */
     setClickEvent(listener = undefined) {
-        this.#click_event = listener;
+        this.#clickEvent = listener;
         this.#applyClickable();
         return this;
     }
@@ -294,7 +294,7 @@ class ListItem {
 
     // === ВНУТРЕННЕЕ ===
     #applyClickable() {
-        if (this.#click_event === undefined) {
+        if (this.#clickEvent === undefined) {
             if (this.#button !== undefined) {
                 this.#button.remove();
                 this.#button = undefined;
@@ -314,7 +314,7 @@ class ListItem {
         this.#root.appendChild(this.#button);
         this.#button.addEventListener("click", () => {
             if (this.#disabled) return;
-            this.#click_event();
+            this.#clickEvent();
         });
         this.setDisabled(this.#disabled);
     }

package/framework/components/chui_list/styles.css

@@ -4,9 +4,9 @@ chui_list {
     flex-direction: column;
     box-sizing: border-box;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow: hidden;
     color: var(--text_color);

package/framework/components/chui_markdown_editor/markdown_editor.js

@@ -80,20 +80,20 @@ 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;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -117,10 +117,10 @@ class 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";
@@ -159,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);
@@ -182,12 +182,12 @@ class MarkdownEditor {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Текст Markdown как есть */
@@ -201,11 +201,11 @@ class MarkdownEditor {
     }
 
     isPreview() {
-        return this.#preview_on;
+        return this.#previewOn;
     }
 
     getMaxLength() {
-        return this.#max_length;
+        return this.#maxLength;
     }
 
     /** Ширина поля (по умолчанию — общая ширина контрола `--control_width`) */
@@ -214,7 +214,7 @@ class MarkdownEditor {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     getDisabled() {
@@ -235,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;
     }
@@ -257,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 === "") {
@@ -274,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));
         }
@@ -307,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;
@@ -322,23 +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(
+        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.#preview_on ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview")
+                this.#previewOn ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview")
             );
         }
         return this;
     }
 
     togglePreview() {
-        return this.setPreview(!this.#preview_on);
+        return this.setPreview(!this.#previewOn);
     }
 
     /** Убирает или возвращает панель разметки (поле остаётся полем) */
@@ -357,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;
     }
@@ -382,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;
     }
@@ -394,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");
     }
 
@@ -403,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;
     }
 
@@ -428,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;
     }
 
@@ -461,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;
     }
 
@@ -476,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);
@@ -496,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;
     }
 
@@ -534,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();
@@ -567,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;