@sequent-org/moodboard 1.4.57 → 1.4.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.57",
+  "version": "1.4.58",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/commands/UpdateContentCommand.js

@@ -47,11 +47,19 @@ export class UpdateContentCommand extends BaseCommand {
             if (!object.properties) {
                 object.properties = {};
             }
-            // Пересчитываем диапазоны ссылок при изменении контента
+            // Пересчитываем диапазоны ссылок и подсветки при изменении контента
+            const oldContent = object.properties.content ?? '';
             if (Array.isArray(object.properties.links) && object.properties.links.length > 0) {
                 object.properties.links = _adjustLinks(
                     object.properties.links,
-                    object.properties.content ?? '',
+                    oldContent,
+                    content
+                );
+            }
+            if (Array.isArray(object.properties.highlights) && object.properties.highlights.length > 0) {
+                object.properties.highlights = _adjustHighlights(
+                    object.properties.highlights,
+                    oldContent,
                     content
                 );
             }
@@ -142,3 +150,41 @@ function _adjustLinks(links, oldText, newText) {
         return acc;
     }, []);
 }
+
+/**
+ * Пересчитывает диапазоны подсветки после изменения контента.
+ * Алгоритм идентичен _adjustLinks: общий префикс/суффикс, сдвиг или удаление.
+ * @param {Array<{start:number,end:number,color:string}>} highlights
+ * @param {string} oldText
+ * @param {string} newText
+ * @returns {Array<{start:number,end:number,color:string}>}
+ */
+function _adjustHighlights(highlights, oldText, newText) {
+    if (!highlights || highlights.length === 0) return highlights;
+
+    let prefixLen = 0;
+    const minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText[prefixLen] === newText[prefixLen]) prefixLen++;
+
+    let oldSuffix = 0;
+    while (
+        oldSuffix < oldText.length - prefixLen &&
+        oldSuffix < newText.length - prefixLen &&
+        oldText[oldText.length - 1 - oldSuffix] === newText[newText.length - 1 - oldSuffix]
+    ) oldSuffix++;
+
+    const oldChangeEnd = oldText.length - oldSuffix;
+    const newChangeEnd = newText.length - oldSuffix;
+    const delta = newChangeEnd - oldChangeEnd;
+
+    return highlights.reduce((acc, hi) => {
+        const { start, end, color } = hi;
+        if (end <= prefixLen) {
+            acc.push({ start, end, color });
+        } else if (start >= oldChangeEnd) {
+            acc.push({ start: start + delta, end: end + delta, color });
+        }
+        // Подсветка перекрывает изменённый диапазон — удаляем
+        return acc;
+    }, []);
+}

package/src/services/text/TextBoxMetrics.js

@@ -0,0 +1,133 @@
+/**
+ * Единый источник истины для геометрии текстового бокса.
+ *
+ * Один и тот же объект рисуется двумя независимыми механизмами: статический слой
+ * `HtmlTextLayer` (.mb-text) и inline-редактор (textarea + backdrop). Чтобы рамка
+ * выделения, межстрочный интервал и паддинги не расходились между режимами и не
+ * разъезжались после очередной правки, все метрики бокса считаются здесь.
+ */
+
+// Соотношение line-height по базовому (немасштабированному) размеру шрифта.
+// Берётся от базового размера, а не от отрисованного, поэтому пропорция строк
+// не зависит от зума и не страдает от округления.
+const LINE_HEIGHT_BREAKPOINTS = [
+    [12, 1.40],
+    [18, 1.34],
+    [36, 1.26],
+    [48, 1.24],
+    [72, 1.22],
+    [96, 1.20],
+];
+const LINE_HEIGHT_FALLBACK_RATIO = 1.18;
+
+// Нижний запас под хвосты глифов (например, «з», «у»), общий для обоих режимов.
+export const TEXT_BOX_BOTTOM_PAD_PX = 2;
+
+// Вертикальный паддинг inline-редактора (textarea/backdrop). Дублируется в CSS
+// (.moodboard-text-input / .moodboard-text-backdrop) и учитывается при сведении
+// высоты поля к мировой высоте объекта.
+export const TEXT_EDITOR_VERTICAL_PAD_PX = 1;
+
+/**
+ * @param {number} baseFontSizePx — базовый размер шрифта без учёта зума
+ * @param {object|undefined} properties — допускается явный properties.lineHeight
+ * @returns {number} коэффициент (не пиксели)
+ */
+export function resolveLineHeightRatio(baseFontSizePx, properties) {
+    if (properties && typeof properties.lineHeight === 'number') {
+        return properties.lineHeight;
+    }
+    const fs = baseFontSizePx;
+    for (const [maxFs, ratio] of LINE_HEIGHT_BREAKPOINTS) {
+        if (fs <= maxFs) {
+            return ratio;
+        }
+    }
+    return LINE_HEIGHT_FALLBACK_RATIO;
+}
+
+/**
+ * Межстрочный интервал в пикселях (для inline-редактора, где line-height задаётся в px).
+ * @param {number} fontSizePx
+ * @param {object|undefined} properties
+ * @returns {number}
+ */
+export function computeLineHeightPx(fontSizePx, properties) {
+    return Math.round(fontSizePx * resolveLineHeightRatio(fontSizePx, properties));
+}
+
+/**
+ * Правый запас, чтобы рамка не прилипала к тексту справа. Одинаков для статического
+ * слоя и для авторазмера редактора — иначе ширина рамки в режимах различается.
+ * @param {number} fontSizePx
+ * @returns {number}
+ */
+export function computeTextRightPadPx(fontSizePx) {
+    return Math.ceil(fontSizePx * 0.7) + 6;
+}
+
+/**
+ * Применяет ВСЕ текстовые параметры на DOM-элемент в одинаковом формате.
+ *
+ * Используется как для статического .mb-text, так и для textarea/backdrop
+ * в inline-редакторе, гарантируя идентичный рендеринг глифов в обоих режимах.
+ *
+ * Ключевое: `line-height` всегда задаётся как **безразмерный коэффициент** (e.g. `"1.34"`),
+ * а не в пикселях. Безразмерный коэффициент масштабируется браузером вместе с font-size
+ * и не страдает от округления — строки в редакторе и статике совпадают точно.
+ *
+ * Цвет (`color`) умышленно вынесен за пределы функции: textarea рендерит текст
+ * прозрачным (видимый текст рисует backdrop), backdrop и .mb-text — реальным цветом.
+ *
+ * @param {HTMLElement} el
+ * @param {{ fontSizePx: number, baseFontSizePx: number, fontFamily: string, properties?: object }} params
+ */
+export function applyTextStyles(el, { fontSizePx, baseFontSizePx, fontFamily, properties = {} }) {
+    const ratio = resolveLineHeightRatio(baseFontSizePx, properties);
+    el.style.fontSize = `${fontSizePx}px`;
+    el.style.lineHeight = `${ratio}`;
+    el.style.fontFamily = fontFamily || '';
+    el.style.fontWeight = properties.bold ? 'bold' : '';
+    el.style.fontStyle = properties.italic ? 'italic' : '';
+    const dec = [properties.underline && 'underline', properties.strikethrough && 'line-through']
+        .filter(Boolean).join(' ');
+    el.style.textDecoration = dec || '';
+    el.style.textAlign = properties.textAlign || '';
+    el.style.letterSpacing = '0px';
+    el.style.fontKerning = 'normal';
+    el.style.textRendering = 'optimizeLegibility';
+}
+
+/**
+ * Применяет параметры размера поля для inline-редактора (textarea/backdrop).
+ * Отдельно от applyTextStyles, чтобы не дублировать логику в статическом слое.
+ *
+ * @param {HTMLElement} el
+ * @param {number} lineHeightPx — вычисленный lineHeight в px (для initialHeight)
+ */
+export function applyEditorSizing(el, lineHeightPx) {
+    const initialHeightPx = Math.max(1, lineHeightPx);
+    el.style.minHeight = `${initialHeightPx}px`;
+    el.style.height = `${initialHeightPx}px`;
+    el.setAttribute('rows', '1');
+    el.style.overflowY = 'hidden';
+    el.style.whiteSpace = 'pre';
+}
+
+/**
+ * Inline-значение `padding` статического .mb-text по текущему режиму.
+ * Обычный текст → '0' (рамка плотно по глифам, как в редакторе);
+ * список/markdown → '' (берётся CSS `.mb-text { padding: 0.3em }`).
+ *
+ * Применяется детерминированно при каждом проходе: если возвращать паддинг только
+ * при смене режима, обычный текст после режима списка сохраняет CSS-отступ 0.3em
+ * сверху, и статическая рамка оказывается выше глифов, чем поле ввода.
+ * @param {{ isMarkdown?: boolean, useList?: boolean }} mode
+ * @returns {string}
+ */
+export function resolveStaticTextPadding({ isMarkdown = false, useList = false } = {}) {
+    if (useList || isMarkdown) {
+        return '';
+    }
+    return '0';
+}

package/src/tools/object-tools/selection/MindmapInlineEditorController.js

@@ -1,5 +1,7 @@
 import * as PIXI from 'pixi.js';
 import { Events } from '../../../core/events/Events.js';
+import { updateCustomCaret } from './TextEditorCaretService.js';
+import { buildHtmlWithRanges } from '../../../ui/HtmlTextLayer.js';
 import {
     createTextEditorTextarea,
     createTextEditorWrapper,
@@ -196,10 +198,14 @@ export function openMindmapEditor(object, create = false) {
         }
     }
 
-    const wrapper = createTextEditorWrapper();
+    const { wrapper, caret, backdrop } = createTextEditorWrapper();
     const textarea = createTextEditorTextarea(properties.content || '');
     wrapper.classList.add('moodboard-text-editor--mindmap-debug');
     textarea.classList.add('moodboard-text-input--mindmap-debug');
+    
+    if (backdrop) {
+        backdrop.classList.add('moodboard-text-backdrop--mindmap-debug');
+    }
     textarea.placeholder = 'Напишите что-нибудь';
     textarea.style.fontFamily = properties.fontFamily || 'Roboto, Arial, sans-serif';
     textarea.style.fontWeight = '400';
@@ -261,15 +267,33 @@ export function openMindmapEditor(object, create = false) {
 
         if (typeof window.getComputedStyle === 'function') {
             const staticStyle = window.getComputedStyle(staticTextEl);
-            if (staticStyle?.fontFamily) textarea.style.fontFamily = staticStyle.fontFamily;
-            if (staticStyle?.fontSize) textarea.style.fontSize = staticStyle.fontSize;
-            if (staticStyle?.lineHeight) textarea.style.lineHeight = staticStyle.lineHeight;
-            if (staticStyle?.color) textarea.style.color = staticStyle.color;
-            if (staticStyle?.paddingLeft) textarea.style.paddingLeft = staticStyle.paddingLeft;
-            if (staticStyle?.paddingRight) textarea.style.paddingRight = staticStyle.paddingRight;
+            if (staticStyle?.fontFamily) {
+                textarea.style.fontFamily = staticStyle.fontFamily;
+                if (backdrop) backdrop.style.fontFamily = staticStyle.fontFamily;
+            }
+            if (staticStyle?.fontSize) {
+                textarea.style.fontSize = staticStyle.fontSize;
+                if (backdrop) backdrop.style.fontSize = staticStyle.fontSize;
+            }
+            if (staticStyle?.lineHeight) {
+                textarea.style.lineHeight = staticStyle.lineHeight;
+                if (backdrop) backdrop.style.lineHeight = staticStyle.lineHeight;
+            }
+            if (staticStyle?.color) {
+                if (backdrop) backdrop.style.color = staticStyle.color;
+            }
+            if (staticStyle?.paddingLeft) {
+                textarea.style.paddingLeft = staticStyle.paddingLeft;
+                if (backdrop) backdrop.style.paddingLeft = staticStyle.paddingLeft;
+            }
+            if (staticStyle?.paddingRight) {
+                textarea.style.paddingRight = staticStyle.paddingRight;
+                if (backdrop) backdrop.style.paddingRight = staticStyle.paddingRight;
+            }
         }
     } else if (properties.fontSize) {
         textarea.style.fontSize = `${properties.fontSize}px`;
+        if (backdrop) backdrop.style.fontSize = `${properties.fontSize}px`;
     }
 
     wrapper.style.left = `${targetLeft}px`;
@@ -285,6 +309,14 @@ export function openMindmapEditor(object, create = false) {
     textarea.style.width = '100%';
     textarea.style.height = 'auto';
     textarea.style.minHeight = '0';
+    
+    if (backdrop) {
+        backdrop.style.width = '100%';
+        backdrop.style.height = '100%';
+        backdrop.style.display = 'flex';
+        backdrop.style.alignItems = 'center';
+        backdrop.style.justifyContent = 'center';
+    }
 
     const initialCssWidth = targetWidth;
     const initialCssHeight = targetHeight;
@@ -734,14 +766,67 @@ export function openMindmapEditor(object, create = false) {
         }
     };
 
+    const caretUpdateHandler = () => {
+        if (this.textEditor && this.textEditor.caret) {
+            updateCustomCaret(textarea, this.textEditor.caret);
+        }
+    };
+
+    const syncBackdrop = () => {
+        if (!backdrop) return;
+        let currentHighlights = properties.highlights || null;
+        let currentLinks = properties.links || null;
+        if (objectId) {
+            try {
+                const pixiReq = { objectId, pixiObject: null };
+                this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+                const props = pixiReq.pixiObject && pixiReq.pixiObject._mb
+                    ? pixiReq.pixiObject._mb.properties
+                    : null;
+                if (props) {
+                    if (Array.isArray(props.highlights)) currentHighlights = props.highlights;
+                    if (Array.isArray(props.links)) currentLinks = props.links;
+                }
+            } catch (_) {}
+        }
+        const content = textarea.value;
+        backdrop.innerHTML = buildHtmlWithRanges(content, currentLinks, currentHighlights);
+    };
+
     textarea.addEventListener('blur', onBlur);
     textarea.addEventListener('keydown', onKeyDown);
+    
+    textarea.addEventListener('input', (e) => {
+        caretUpdateHandler(e);
+        syncBackdrop();
+    });
+    textarea.addEventListener('keydown', () => setTimeout(caretUpdateHandler, 0));
+    textarea.addEventListener('keyup', caretUpdateHandler);
+    textarea.addEventListener('click', caretUpdateHandler);
+    textarea.addEventListener('focus', caretUpdateHandler);
+    document.addEventListener('selectionchange', caretUpdateHandler);
+
+    setTimeout(() => {
+        caretUpdateHandler();
+        syncBackdrop();
+    }, 0);
+
+    const removeDomListeners = () => {
+        textarea.removeEventListener('blur', onBlur);
+        textarea.removeEventListener('keydown', onKeyDown);
+        textarea.removeEventListener('input', caretUpdateHandler);
+        textarea.removeEventListener('keyup', caretUpdateHandler);
+        textarea.removeEventListener('click', caretUpdateHandler);
+        textarea.removeEventListener('focus', caretUpdateHandler);
+        document.removeEventListener('selectionchange', caretUpdateHandler);
+    };
 
     this.textEditor = {
         active: true,
         objectId,
         textarea,
         wrapper,
+        caret,
         world,
         position,
         properties: { ...properties },
@@ -749,6 +834,7 @@ export function openMindmapEditor(object, create = false) {
         isResizing: false,
         _finalize: finalize,
         _listeners: editorListeners,
+        _removeDomListeners: removeDomListeners,
     };
 
     textarea.focus();
@@ -762,6 +848,11 @@ export function openMindmapEditor(object, create = false) {
 
 export function closeMindmapEditor(commit) {
     if (!this.textEditor?.active || this.textEditor.objectType !== 'mindmap') return;
+    
+    if (typeof this.textEditor._removeDomListeners === 'function') {
+        try { this.textEditor._removeDomListeners(); } catch (_) {}
+    }
+    
     const finalize = this.textEditor._finalize;
     if (typeof finalize === 'function') {
         finalize(commit);

package/src/tools/object-tools/selection/SelectInputRouter.js

@@ -130,8 +130,8 @@ export function onMouseDown(event) {
                         }
                     }
                 }
-                // Откладываем drag до превышения порога смещения
-                this._pendingDrag = { isGroup: false, objectId: selId, downX: event.x, downY: event.y, event };
+                // Откладываем drag до превышения порога смещения; editCandidate — уже выделен
+                this._pendingDrag = { isGroup: false, objectId: selId, downX: event.x, downY: event.y, event, editCandidate: true };
                 return;
             }
         }
@@ -194,7 +194,37 @@ export function onMouseMove(event) {
 
 export function onMouseUp(event) {
     if (this._pendingDrag) {
+        const pending = this._pendingDrag;
         this._pendingDrag = null;
+
+        // Повторный клик по уже выделенному тексту (без перехода в drag) —
+        // вход в режим редактирования, как при двойном клике.
+        if (pending.editCandidate && !pending.isGroup && pending.objectId) {
+            const req = { objectId: pending.objectId, pixiObject: null };
+            this.emit(Events.Tool.GetObjectPixi, req);
+            const pix = req.pixiObject;
+            const isText = !!(pix && pix._mb && pix._mb.type === 'text');
+            if (isText) {
+                const posData = { objectId: pending.objectId, position: null };
+                this.emit(Events.Tool.GetObjectPosition, posData);
+                const textProperties = pix._mb?.properties || {};
+                const textContent = textProperties.content || '';
+                this.emit(Events.Tool.ObjectEdit, {
+                    id: pending.objectId,
+                    type: 'text',
+                    position: posData.position,
+                    properties: {
+                        ...pickTextEditorProperties(textProperties),
+                        content: textContent,
+                    },
+                    caretClick: {
+                        clientX: event?.originalEvent?.clientX,
+                        clientY: event?.originalEvent?.clientY,
+                    },
+                    create: false,
+                });
+            }
+        }
         return;
     }
     if (this.isResizing || this.isGroupResizing) {
@@ -332,6 +362,29 @@ export function onContextMenu(event) {
     } else if (this.selection.size() > 1) {
         context = 'group';
     }
+
+    // Для одиночного текстового объекта — открываем tpp-more-dropdown вместо moodboard-contextmenu
+    if (context === 'object' && targetId) {
+        const req = { objectId: targetId, pixiObject: null };
+        this.emit(Events.Tool.GetObjectPixi, req);
+        const pix = req.pixiObject;
+        if (pix && pix._mb && pix._mb.type === 'text') {
+            // Если объект ещё не выделен — выделяем его, чтобы панель свойств текста появилась в DOM
+            if (!this.selection.has(targetId)) {
+                this.setSelection([targetId]);
+            }
+            // Открываем дропдаун «Ещё» из TextPropertiesPanel в следующем кадре
+            // (панель рендерится асинхронно после выделения)
+            requestAnimationFrame(() => {
+                const moreBtn = document.getElementById('tpp-btn-more');
+                if (moreBtn) {
+                    moreBtn.click();
+                }
+            });
+            return;
+        }
+    }
+
     // Сообщаем ядру/UI, что нужно показать контекстное меню (пока без пунктов)
     this.emit(Events.Tool.ContextMenuShow, { x: event.x, y: event.y, context, targetId });
 }

package/src/tools/object-tools/selection/TextEditorCaretService.js

@@ -0,0 +1,113 @@
+const propertiesToCopy = [
+    'direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle',
+    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily',
+    'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing',
+    'tabSize', 'MozTabSize', 'whiteSpace', 'wordBreak', 'wordWrap'
+];
+
+let mirrorDiv = null;
+
+export function getCaretCoordinates(element, position) {
+    if (!mirrorDiv) {
+        mirrorDiv = document.createElement('div');
+        document.body.appendChild(mirrorDiv);
+    }
+    
+    const style = mirrorDiv.style;
+    const computed = window.getComputedStyle(element);
+    
+    style.whiteSpace = 'pre-wrap';
+    if (element.nodeName !== 'INPUT') {
+        style.wordWrap = 'break-word';
+    }
+
+    style.position = 'absolute';
+    style.top = '-9999px';
+    style.left = '-9999px';
+    style.visibility = 'hidden';
+
+    propertiesToCopy.forEach(prop => {
+        style[prop] = computed[prop];
+    });
+
+    if (window.mozInnerScreenX != null) {
+        if (element.scrollHeight > parseInt(computed.height)) {
+            style.overflowY = 'scroll';
+        }
+    } else {
+        style.overflow = 'hidden';
+    }
+
+    mirrorDiv.textContent = element.value.substring(0, position);
+    
+    if (element.nodeName === 'INPUT') {
+        mirrorDiv.textContent = mirrorDiv.textContent.replace(/\s/g, '\u00a0');
+    }
+
+    const span = document.createElement('span');
+    span.textContent = element.value.substring(position) || '.';
+    mirrorDiv.appendChild(span);
+
+    const coordinates = {
+        top: span.offsetTop + parseInt(computed['borderTopWidth'] || 0),
+        left: span.offsetLeft + parseInt(computed['borderLeftWidth'] || 0),
+        height: parseInt(computed['lineHeight']) || span.offsetHeight
+    };
+
+    return coordinates;
+}
+
+export function updateCustomCaret(textarea, caretEl) {
+    if (!textarea || !caretEl) return;
+    
+    if (document.activeElement !== textarea) {
+        caretEl.style.display = 'none';
+        return;
+    }
+
+    if (textarea.selectionStart !== textarea.selectionEnd) {
+        caretEl.style.display = 'none';
+        return;
+    }
+    
+    caretEl.style.display = 'block';
+    
+    const pos = textarea.selectionStart;
+    const coords = getCaretCoordinates(textarea, pos);
+    
+    // Adjust for scroll
+    const top = coords.top - textarea.scrollTop;
+    const left = coords.left - textarea.scrollLeft;
+    
+    // Calculate width based on font size to match stroke thickness
+    const computed = window.getComputedStyle(textarea);
+    const fontSize = parseFloat(computed.fontSize) || 16;
+    // Caveat has thicker strokes, Arial is standard. A good heuristic is ~0.06 to 0.08 of font size, min 2px.
+    const caretWidth = Math.max(2, Math.round(fontSize * 0.07));
+
+    // Цвет текста в textarea теперь прозрачный (видимый текст рисует backdrop-слой),
+    // поэтому цвет каретки берём из backdrop, иначе она станет невидимой.
+    let caretColor = computed.color;
+    if (!caretColor || caretColor === 'transparent' || caretColor === 'rgba(0, 0, 0, 0)') {
+        const backdrop = caretEl.parentElement
+            ? caretEl.parentElement.querySelector('.moodboard-text-backdrop')
+            : null;
+        const backdropColor = backdrop ? window.getComputedStyle(backdrop).color : '';
+        caretColor = (backdropColor && backdropColor !== 'transparent' && backdropColor !== 'rgba(0, 0, 0, 0)')
+            ? backdropColor
+            : '#111';
+    }
+
+    caretEl.style.top = `${top - 2}px`;
+    caretEl.style.left = `${left - Math.floor(caretWidth / 2)}px`;
+    caretEl.style.height = `${coords.height}px`;
+    caretEl.style.width = `${caretWidth}px`;
+    caretEl.style.backgroundColor = caretColor;
+    
+    // Reset animation to keep it visible while typing
+    caretEl.style.animation = 'none';
+    void caretEl.offsetWidth; // trigger reflow
+    caretEl.style.animation = 'mb-caret-blink 1s step-end infinite';
+}

package/src/tools/object-tools/selection/TextEditorDomFactory.js

@@ -1,7 +1,18 @@
+import { applyEditorSizing, applyTextStyles, computeLineHeightPx } from '../../../services/text/TextBoxMetrics.js';
+
 export function createTextEditorWrapper() {
     const wrapper = document.createElement('div');
     wrapper.className = 'moodboard-text-editor';
-    return wrapper;
+    
+    const backdrop = document.createElement('div');
+    backdrop.className = 'moodboard-text-backdrop';
+    wrapper.appendChild(backdrop);
+    
+    const caret = document.createElement('div');
+    caret.className = 'mb-custom-caret';
+    wrapper.appendChild(caret);
+    
+    return { wrapper, caret, backdrop };
 }
 
 export function createTextEditorTextarea(content) {
@@ -13,27 +24,32 @@ export function createTextEditorTextarea(content) {
 }
 
 export function computeTextEditorLineHeightPx(fontSizePx) {
-    if (fontSizePx <= 12) return Math.round(fontSizePx * 1.40);
-    if (fontSizePx <= 18) return Math.round(fontSizePx * 1.34);
-    if (fontSizePx <= 36) return Math.round(fontSizePx * 1.26);
-    if (fontSizePx <= 48) return Math.round(fontSizePx * 1.24);
-    if (fontSizePx <= 72) return Math.round(fontSizePx * 1.22);
-    if (fontSizePx <= 96) return Math.round(fontSizePx * 1.20);
-    return Math.round(fontSizePx * 1.18);
+    return computeLineHeightPx(fontSizePx);
 }
 
-export function applyInitialTextEditorTextareaStyles(textarea, { effectiveFontPx, lineHeightPx }) {
-    textarea.style.fontSize = `${effectiveFontPx}px`;
-    textarea.style.lineHeight = `${lineHeightPx}px`;
-
-    const initialHeightPx = Math.max(1, lineHeightPx);
-    textarea.style.minHeight = `${initialHeightPx}px`;
-    textarea.style.height = `${initialHeightPx}px`;
-    textarea.setAttribute('rows', '1');
-    textarea.style.overflowY = 'hidden';
-    textarea.style.whiteSpace = 'pre';
-    textarea.style.letterSpacing = '0px';
-    textarea.style.fontKerning = 'normal';
+/**
+ * Применяет все текстовые параметры на textarea/backdrop через общий applyTextStyles,
+ * и дополнительно выставляет sizing-параметры поля ввода (height, rows, overflow, white-space).
+ *
+ * fontSizePx — отображаемый размер в px (с учётом зума);
+ * baseFontSizePx — базовый без зума (для выбора line-height ratio).
+ * Эти два значения разделены, чтобы line-height ratio вычислялся по тому же baseFontSizePx,
+ * что и в HtmlTextLayer — строки совпадают при любом уровне зума.
+ */
+export function applyInitialTextEditorTextareaStyles(textarea, {
+    effectiveFontPx,
+    baseFontSizePx,
+    fontFamily,
+    properties,
+    lineHeightPx,
+}) {
+    applyTextStyles(textarea, {
+        fontSizePx: effectiveFontPx,
+        baseFontSizePx: baseFontSizePx || effectiveFontPx,
+        fontFamily: fontFamily || textarea.style.fontFamily || '',
+        properties: properties || {},
+    });
+    applyEditorSizing(textarea, lineHeightPx);
 }
 
 export function measureTextEditorPlaceholderWidth(textarea, placeholder = 'Напишите что-нибудь') {
@@ -57,7 +73,7 @@ export function attachTextEditorPlaceholderStyle(textarea, { effectiveFontPx, is
 
     const styleEl = document.createElement('style');
     const placeholderOpacity = isNote ? '0.4' : '0.6';
-    styleEl.textContent = `.${uid}::placeholder{font-size:${effectiveFontPx}px;opacity:${placeholderOpacity};line-height:${computeTextEditorLineHeightPx(effectiveFontPx)}px;white-space:nowrap;}`;
+    styleEl.textContent = `.${uid}::placeholder{font-size:${effectiveFontPx}px;opacity:${placeholderOpacity};line-height:${computeTextEditorLineHeightPx(effectiveFontPx)}px;white-space:nowrap;color:#111;-webkit-text-fill-color:#111;}`;
     document.head.appendChild(styleEl);
 
     return styleEl;