@sequent-org/moodboard 1.4.57 → 1.4.59

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

@@ -11,7 +11,7 @@ import {
     createTextEditorFinalize,
 } from './TextEditorInteractionController.js';
 import {
-    hideGlobalTextEditorHandlesLayer,
+    updateGlobalTextEditorHandlesLayer,
     hideNotePixiText,
     hideStaticTextDuringEditing,
 } from './TextEditorLifecycleRegistry.js';
@@ -25,6 +25,8 @@ import {
 } from './TextEditorDomFactory.js';
 import { setupNoteInlineEditor } from './NoteInlineEditorController.js';
 import { createRegularTextAutoSize } from './TextEditorSyncService.js';
+import { TEXT_BOX_BOTTOM_PAD_PX } from '../../../services/text/TextBoxMetrics.js';
+import { buildHtmlWithRanges } from '../../../ui/HtmlTextLayer.js';
 
 export function openTextEditor(object, create = false) {
 
@@ -100,8 +102,6 @@ export function openTextEditor(object, create = false) {
     } else {
         this.eventBus.emit(Events.UI.TextEditStart, { objectId: objectId || null });
     }
-    // Прячем глобальные HTML-ручки на время редактирования, чтобы не было второй рамки
-    hideGlobalTextEditorHandlesLayer();
     // Подавляем пересоздание ручек при паразитных ResizeUpdate (тач double-tap):
     // host.update() внутри HandlesEventBridge вызывается при каждом ResizeUpdate,
     // _handlesSuppressed=true гарантирует что showBounds не создаст ручки поверх textarea.
@@ -110,6 +110,8 @@ export function openTextEditor(object, create = false) {
             window.moodboardHtmlHandlesLayer._handlesSuppressed = true;
         }
     } catch (_) {}
+    // Обновляем глобальные HTML-ручки на время редактирования, чтобы осталась только рамка без точек
+    updateGlobalTextEditorHandlesLayer();
 
     const app = this.app;
     const world = app?.stage?.getChildByName && app.stage.getChildByName('worldLayer');
@@ -147,19 +149,19 @@ export function openTextEditor(object, create = false) {
     }
     // Используем только HTML-ручки во время редактирования текста
     // Обертка для рамки + textarea + ручек
-    const wrapper = createTextEditorWrapper();
+    const { wrapper, caret } = createTextEditorWrapper();
 
     // Базовые стили вынесены в CSS (.moodboard-text-editor)
 
     const textarea = createTextEditorTextarea(content || '');
-    // Без доступного статичного HTML-элемента (часто при create) не оставляем Caveat как fallback.
-    textarea.style.fontFamily = 'Caveat, Arial, cursive';
+    const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
 
-    // Вычисляем межстрочный интервал; подгоняем к реальным значениям HTML-отображения
+    // Собираем текстовые параметры из статического .mb-text (для существующих объектов)
+    // или из properties. Единый источник гарантирует идентичный рендер в обоих режимах.
+    let resolvedFontFamily = properties.fontFamily || 'Caveat, Arial, cursive';
+    let resolvedColor = properties.color || '#111';
     let lhInitial = computeTextEditorLineHeightPx(effectiveFontPx);
-    if (typeof properties.lineHeight === 'number') {
-        lhInitial = Math.round(effectiveFontPx * properties.lineHeight);
-    }
+
     try {
         if (objectId) {
             if (objectType === 'note') {
@@ -171,54 +173,54 @@ export function openTextEditor(object, create = false) {
                     const scaleY = Math.max(0.0001, Math.hypot(wt.c || 0, wt.d || 0));
                     const baseLH = parseFloat(inst.textField.style?.lineHeight || (fontSize * 1.2)) || (fontSize * 1.2);
                     lhInitial = Math.max(1, Math.round(baseLH * (scaleY / viewResEarly)));
+                    const ff = (inst.textField.style && inst.textField.style.fontFamily)
+                        || (pixiReq.pixiObject._mb.properties && pixiReq.pixiObject._mb.properties.fontFamily)
+                        || null;
+                    if (ff) resolvedFontFamily = ff;
                 }
             } else if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
                 const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
-                if (el) {
+                if (el && typeof window.getComputedStyle === 'function') {
                     const cs = window.getComputedStyle(el);
+                    const f = parseFloat(cs.fontSize);
+                    if (isFinite(f) && f > 0) effectiveFontPx = Math.round(f);
                     const lh = parseFloat(cs.lineHeight);
                     if (isFinite(lh) && lh > 0) lhInitial = Math.round(lh);
+                    if (cs.fontFamily) resolvedFontFamily = cs.fontFamily;
+                    if (cs.color) resolvedColor = cs.color;
                 }
             }
         }
     } catch (_) {}
 
-    // Базовые стили вынесены в CSS (.moodboard-text-input); здесь — только динамика
-    // Подбираем актуальный font-family из объекта
-    try {
-        if (objectId) {
-            if (objectType === 'note') {
-                // Для записки читаем из PIXI-инстанса NoteObject
-                const pixiReq = { objectId, pixiObject: null };
-                this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
-                const inst = pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.instance;
-                const ff = (inst && inst.textField && inst.textField.style && inst.textField.style.fontFamily)
-                    || (pixiReq.pixiObject && pixiReq.pixiObject._mb && pixiReq.pixiObject._mb.properties && pixiReq.pixiObject._mb.properties.fontFamily)
-                    || null;
-                if (ff) textarea.style.fontFamily = ff;
-            } else if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
-                // Для обычного текста читаем из HTML-элемента
-                const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
-                if (el) {
-                    const cs = window.getComputedStyle(el);
-                    const ff = cs && cs.fontFamily ? cs.fontFamily : null;
-                    if (ff) textarea.style.fontFamily = ff;
-                }
-            }
-        }
-    } catch (_) {}
+    // Применяем все текстовые параметры через единый applyTextStyles.
+    // textarea рендерит текст прозрачным (backdrop отвечает за видимые глифы),
+    // поэтому после applyTextStyles явно переопределяем color.
     applyInitialTextEditorTextareaStyles(textarea, {
         effectiveFontPx,
+        baseFontSizePx: fontSize,
+        fontFamily: resolvedFontFamily,
+        properties,
         lineHeightPx: lhInitial,
     });
-    if (properties.textAlign) {
-        textarea.style.textAlign = properties.textAlign;
+    textarea.style.color = 'transparent';
+
+    if (backdrop) {
+        applyInitialTextEditorTextareaStyles(backdrop, {
+            effectiveFontPx,
+            baseFontSizePx: fontSize,
+            fontFamily: resolvedFontFamily,
+            properties,
+            lineHeightPx: lhInitial,
+        });
+        backdrop.style.color = resolvedColor;
     }
 
-    // Shape: текст по центру, textarea покрывает весь bounds фигуры
+    // Shape: текст по центру — переопределяем textAlign после applyTextStyles
     if (isShape) {
         textarea.style.textAlign = 'center';
         textarea.placeholder = '';
+        if (backdrop) backdrop.style.textAlign = 'center';
     }
 
     wrapper.appendChild(textarea);
@@ -310,6 +312,7 @@ export function openTextEditor(object, create = false) {
 
     // Для записок позиционируем редактор внутри записки
     let updateNoteEditor = null;
+    let regularEditorVisualBox = null;
     if (objectType === 'note') {
         const noteSetup = setupNoteInlineEditor(this, {
             objectId,
@@ -356,6 +359,16 @@ export function openTextEditor(object, create = false) {
         textarea.style.width = `${shapeCssW}px`;
         textarea.style.height = `${shapeCssH}px`;
         textarea.style.boxSizing = 'border-box';
+        
+        if (backdrop) {
+            backdrop.style.width = `${shapeCssW}px`;
+            backdrop.style.height = `${shapeCssH}px`;
+            backdrop.style.boxSizing = 'border-box';
+            backdrop.style.display = 'block';
+            backdrop.style.paddingTop = `${paddingTopShape}px`;
+            backdrop.style.paddingBottom = '0px';
+        }
+        
         // display:block убирает baseline-смещение inline-block textarea внутри wrapper'а
         // (wrapper наследует line-height ~24px от body, из-за чего на сильном отдалении
         // textarea съезжает вниз от фигуры на фиксированные ~11px независимо от зума).
@@ -376,6 +389,8 @@ export function openTextEditor(object, create = false) {
             lineHeightPx,
             baseLeftPx,
             baseTopPx,
+            baseWidthPx,
+            baseHeightPx,
         } = positionRegularTextEditor({
             create,
             objectId,
@@ -383,6 +398,12 @@ export function openTextEditor(object, create = false) {
             textarea,
             wrapper,
         });
+        if (!create && baseWidthPx && baseHeightPx) {
+            regularEditorVisualBox = {
+                width: Math.max(1, Math.round(baseWidthPx)),
+                height: Math.max(1, Math.round(baseHeightPx)),
+            };
+        }
         // Сохраняем CSS-позицию редактора для точной синхронизации при закрытии
         this.textEditor._cssLeftPx = leftPx;
         this.textEditor._cssTopPx = topPx;
@@ -420,14 +441,16 @@ export function openTextEditor(object, create = false) {
     // Синхронизируем стартовый размер шрифта textarea с текущим зумом (как HtmlTextLayer)
     // Используем ранее вычисленный effectiveFontPx (до вставки в DOM), если он есть в замыкании
     textarea.style.fontSize = `${effectiveFontPx}px`;
-    const initialWpx = initialSize ? Math.max(1, (initialSize.width || 0) * s / viewRes) : null;
-    const initialHpx = initialSize ? Math.max(1, (initialSize.height || 0) * s / viewRes) : null;
+    const initialWpx = regularEditorVisualBox?.width
+        || (initialSize ? Math.max(1, (initialSize.width || 0) * s / viewRes) : null);
+    const initialHpx = regularEditorVisualBox?.height
+        || (initialSize ? Math.max(1, (initialSize.height || 0) * s / viewRes) : null);
 
     // Определяем минимальные границы для всех типов объектов
     let minWBound = initialWpx || 120; // базово близко к призраку
     let minHBound = effectiveFontPx; // базовая высота
     // Уменьшаем визуальный нижний запас, который браузеры добавляют к textarea
-    const BASELINE_FIX = 2; // px
+    const BASELINE_FIX = TEXT_BOX_BOTTOM_PAD_PX; // px
     if (!isNote) {
         minHBound = Math.max(1, effectiveFontPx - BASELINE_FIX);
     }
@@ -484,8 +507,9 @@ export function openTextEditor(object, create = false) {
         onSizeChange: syncRegularTextSizeToObject,
     });
 
-    // autoSize только для обычного текста; shape имеет фиксированные bounds фигуры
-    if (!isNote && !isShape) {
+    // Для существующего текста стартовый размер уже взят из видимого DOM-бокса:
+    // пересчёт нужен только после фактического ввода, иначе рамка прыгает при входе в редактор.
+    if (!isNote && !isShape && create) {
         autoSize();
     }
     textarea.focus();
@@ -500,6 +524,7 @@ export function openTextEditor(object, create = false) {
         objectId,
         textarea,
         wrapper,
+        caret,
         world: this.textEditor.world,
         position,
         properties: { fontSize, highlightColor: properties.highlightColor },

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

@@ -2,6 +2,11 @@ import { Events } from '../../../core/events/Events.js';
 import { tryStartAltCloneDuringDrag, resetCloneStateAfterDragEnd } from './CloneFlowController.js';
 
 export function handleObjectSelect(objectId, event) {
+    // Запоминаем ДО clearSelection: объект был единственным выделенным?
+    const wasAlreadySingleSelected = !this.isMultiSelect &&
+        this.selection.size() === 1 &&
+        this.selection.has(objectId);
+
     if (!this.isMultiSelect) {
         this.clearSelection();
     }
@@ -19,7 +24,8 @@ export function handleObjectSelect(objectId, event) {
         if (this.selection.size() > 1) {
             this._pendingDrag = { isGroup: true, objectId: null, downX: event.x, downY: event.y, event };
         } else {
-            this._pendingDrag = { isGroup: false, objectId, downX: event.x, downY: event.y, event };
+            // editCandidate=true если это повторный клик по уже единственному выделенному объекту
+            this._pendingDrag = { isGroup: false, objectId, downX: event.x, downY: event.y, event, editCandidate: wasAlreadySingleSelected };
         }
     }
 }

package/src/ui/HtmlTextLayer.js

@@ -4,6 +4,13 @@ import { Events } from '../core/events/Events.js';
 import * as PIXI from 'pixi.js';
 import { renderRichText, hasMath } from '../utils/richText.js';
 import { renderTextList } from './text-properties/TextListRenderer.js';
+import {
+    applyTextStyles,
+    resolveLineHeightRatio,
+    computeTextRightPadPx,
+    resolveStaticTextPadding,
+    TEXT_BOX_BOTTOM_PAD_PX,
+} from '../services/text/TextBoxMetrics.js';
 
 gsap.registerPlugin(CustomEase);
 const TEXT_HOVER_EASE = 'hoverLiftSpring';
@@ -45,28 +52,6 @@ function resolveMarkdown(properties, content) {
     return looksLikeMarkdown(content) || hasMath(content);
 }
 
-/**
- * Возвращает коэффициент межстрочного интервала по базовому (немасштабированному) размеру шрифта.
- * Коэффициент зависит от базового размера, а не от отрисованного, — это гарантирует,
- * что соотношение line-height/font-size остаётся постоянным при любом зуме.
- * @param {number} baseFontSizePx — базовый размер шрифта без учёта зума
- * @param {object|undefined} properties
- * @returns {number} коэффициент (не пиксели)
- */
-function resolveLineHeightRatio(baseFontSizePx, properties) {
-    if (typeof properties?.lineHeight === 'number') {
-        return properties.lineHeight;
-    }
-    const fs = baseFontSizePx;
-    if (fs <= 12) return 1.40;
-    if (fs <= 18) return 1.34;
-    if (fs <= 36) return 1.26;
-    if (fs <= 48) return 1.24;
-    if (fs <= 72) return 1.22;
-    if (fs <= 96) return 1.20;
-    return 1.18;
-}
-
 /**
  * Строит безопасный HTML-фрагмент с кликабельными ссылками по массиву диапазонов.
  * Символы вне ссылок экранируются через textContent. Диапазоны не должны пересекаться.
@@ -97,6 +82,58 @@ function _buildHtmlWithLinks(content, links) {
     return result;
 }
 
+/**
+ * Строит HTML-фрагмент с диапазонами подсветки и/или ссылок.
+ * Пересечение highlight + link обрабатывается через набор граничных точек:
+ * внутри перекрытия порядок вложения — <a><mark>текст</mark></a>.
+ * @param {string} content
+ * @param {Array<{start:number, end:number, url:string}>|null} links
+ * @param {Array<{start:number, end:number, color:string}>|null} highlights
+ * @returns {string} готовый innerHTML
+ */
+export function buildHtmlWithRanges(content, links, highlights) {
+    const validLinks = (links || [])
+        .filter(l => typeof l.start === 'number' && typeof l.end === 'number' && l.end > l.start && l.url);
+    const validHighlights = (highlights || [])
+        .filter(h => typeof h.start === 'number' && typeof h.end === 'number' && h.end > h.start && h.color);
+
+    if (validLinks.length === 0 && validHighlights.length === 0) return _escapeHtml(content);
+    if (validHighlights.length === 0) return _buildHtmlWithLinks(content, validLinks);
+
+    // Строим набор граничных точек всех диапазонов, делим текст на сегменты
+    const boundaries = new Set([0, content.length]);
+    for (const l of validLinks) {
+        boundaries.add(Math.max(0, l.start));
+        boundaries.add(Math.min(content.length, l.end));
+    }
+    for (const h of validHighlights) {
+        boundaries.add(Math.max(0, h.start));
+        boundaries.add(Math.min(content.length, h.end));
+    }
+
+    const points = [...boundaries].sort((a, b) => a - b);
+
+    let result = '';
+    for (let i = 0; i < points.length - 1; i++) {
+        const s = points[i];
+        const e = points[i + 1];
+        let text = _escapeHtml(content.slice(s, e));
+
+        const hi = validHighlights.find(h => h.start <= s && h.end >= e);
+        const link = validLinks.find(l => l.start <= s && l.end >= e);
+
+        if (hi) {
+            text = `<mark style="background-color: ${_escapeAttr(hi.color)}">${text}</mark>`;
+        }
+        if (link) {
+            text = `<a href="${_escapeAttr(link.url)}" target="_blank" rel="noopener noreferrer" class="mb-text-link">${text}</a>`;
+        }
+        result += text;
+    }
+
+    return result;
+}
+
 function _escapeHtml(str) {
     return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
@@ -454,33 +491,28 @@ export class HtmlTextLayer {
         const color = objectData.color || props.color || props.textColor || '#000000';
         const backgroundColor = objectData.backgroundColor || props.backgroundColor || 'transparent';
 
-        // Безразмерный множитель line-height: браузер сам считает интервал относительно
-        // font-size, поэтому соотношение строк не зависит от зума и не страдает от округления.
         const baseFs = objectData.fontSize || props.fontSize || 32;
-        const baseLineHeight = resolveLineHeightRatio(baseFs, props);
 
         const content = objectData.content || objectData.properties?.content || '';
         const isMarkdown = resolveMarkdown(objectData.properties, content);
         if (isMarkdown) el.classList.add('mb-text--md');
+        // Единый набор текстовых параметров (шрифт, line-height, начертание, выравнивание).
+        // Тот же вызов используется в редакторе — гарантирует идентичный рендер в обоих режимах.
+        applyTextStyles(el, {
+            fontSizePx: baseFs,
+            baseFontSizePx: baseFs,
+            fontFamily,
+            properties: props,
+        });
         el.style.color = color;
-        el.style.fontFamily = fontFamily;
         el.style.backgroundColor = backgroundColor === 'transparent' ? '' : backgroundColor;
-        el.style.lineHeight = `${baseLineHeight}`;
         el.style.whiteSpace = isMarkdown ? 'normal' : 'pre';
         el.style.overflow = 'visible';
         if (isMarkdown) el.style.overflowWrap = 'break-word';
-        el.style.letterSpacing = '0px';
-        el.style.fontKerning = 'normal';
-        el.style.textRendering = 'optimizeLegibility';
-        if (!isMarkdown) el.style.padding = '0';
-        // Начертания и выравнивание из properties
-        el.style.fontWeight = props.bold ? 'bold' : '';
-        el.style.fontStyle = props.italic ? 'italic' : '';
-        const initDec = [props.underline && 'underline', props.strikethrough && 'line-through'].filter(Boolean).join(' ');
-        el.style.textDecoration = initDec || '';
-        el.style.textAlign = props.textAlign || '';
+        el.style.padding = resolveStaticTextPadding({ isMarkdown, useList: false });
         const initLinks = !isMarkdown ? (props.links || null) : null;
-        this._syncElementContent(el, content, isMarkdown, initLinks);
+        const initHighlights = !isMarkdown ? (props.highlights || null) : null;
+        this._syncElementContent(el, content, isMarkdown, initLinks, initHighlights);
         // Базовые размеры сохраняем в dataset
         const fs = objectData.fontSize || objectData.properties?.fontSize || 32;
         const bw = Math.max(1, objectData.width || objectData.properties?.baseW || 160);
@@ -556,12 +588,17 @@ export class HtmlTextLayer {
             : Math.min(scaleX, scaleY);
         const sCss = s / res;
         const fontSizePx = Math.max(1, baseFS * sObj * sCss);
-        el.style.fontSize = `${fontSizePx}px`;
-        // Безразмерный множитель: интервал между строками масштабируется браузером
-        // пропорционально font-size, поэтому не зависит от зума и не страдает от округления.
-        const newLH = `${resolveLineHeightRatio(baseFS, obj.properties)}`;
-        if (el.style.lineHeight !== newLH) {
-            el.style.lineHeight = newLH;
+        // Единый набор текстовых параметров через общий модуль — тот же вызов, что в редакторе.
+        // Это гарантирует идентичный рендер глифов в статическом режиме и в режиме редактирования.
+        if (obj.type !== 'shape') {
+            const props = obj.properties || {};
+            const fontFamily = props.fontFamily || obj.fontFamily || 'Caveat, Arial, cursive';
+            applyTextStyles(el, {
+                fontSizePx,
+                baseFontSizePx: baseFS,
+                fontFamily,
+                properties: props,
+            });
         }
 
         // Позиция и габариты в CSS координатах - используем тот же подход что в HtmlHandlesLayer
@@ -588,10 +625,14 @@ export class HtmlTextLayer {
             // при вычислении CSS-позиции и размеров не нужно. Деление приводило к тому,
             // что при res < 1 (масштаб браузера ≠ 100%) HTML-текст уезжал относительно
             // собственных рамок и PIXI-объекта.
-            const left = offsetLeft + tl.x;
-            const top = offsetTop + tl.y;
-            const width = Math.max(1, (br.x - tl.x));
-            const height = Math.max(1, (br.y - tl.y));
+            // Округляем до целых px: inline-редактор позиционирует обёртку через Math.round
+            // (TextEditorPositioningService), а статический слой раньше писал дробный top —
+            // из-за этого глиф съезжал по вертикали на доли пикселя при выходе из редактора.
+            // Целочисленный screen-space обязателен по pixel-perfect integer contract.
+            const left = Math.round(offsetLeft + tl.x);
+            const top = Math.round(offsetTop + tl.y);
+            const width = Math.max(1, Math.round(br.x - tl.x));
+            const height = Math.max(1, Math.round(br.y - tl.y));
 
             // Применяем к элементу
             el.style.left = `${left}px`;
@@ -608,13 +649,13 @@ export class HtmlTextLayer {
             logHeight = height;
         } else {
             // Fallback к старому методу
-            const left = (tx + s * x) / res;
-            const top = (ty + s * y) / res;
+            const left = Math.round((tx + s * x) / res);
+            const top = Math.round((ty + s * y) / res);
             el.style.left = `${left}px`;
             el.style.top = `${top}px`;
             if (w && h) {
-                const cssW = Math.max(1, (w * s) / res);
-                const cssH = Math.max(1, (h * s) / res);
+                const cssW = Math.max(1, Math.round((w * s) / res));
+                const cssH = Math.max(1, Math.round((h * s) / res));
                 el.style.width = `${cssW}px`;
                 el.style.height = `${cssH}px`;
                 logWidth = cssW;
@@ -649,15 +690,9 @@ export class HtmlTextLayer {
             return;
         }
 
-        // Начертания и выравнивание из properties
-        const props = obj.properties || {};
-        el.style.fontWeight = props.bold ? 'bold' : '';
-        el.style.fontStyle = props.italic ? 'italic' : '';
-        const textDec = [props.underline && 'underline', props.strikethrough && 'line-through'].filter(Boolean).join(' ');
-        el.style.textDecoration = textDec || '';
-        el.style.textAlign = props.textAlign || '';
-
         // Текст: список или plain/markdown
+        // (fontWeight/fontStyle/textDecoration/textAlign/lineHeight уже выставлены applyTextStyles выше)
+        const props = obj.properties || {};
         const content = obj.content || obj.properties?.content;
         const listType = props.listType;
         const useList = listType && listType !== 'none';
@@ -684,11 +719,12 @@ export class HtmlTextLayer {
                 el.classList.remove('mb-text--md');
                 el.style.whiteSpace = 'normal';
                 el.style.overflowWrap = 'break-word';
-                el.style.padding = '';
+                el.style.padding = resolveStaticTextPadding({ isMarkdown: false, useList: true });
             } else {
                 el.dataset.renderedList = '';
                 const plainLinks = !isMarkdown ? (props.links || null) : null;
-                const contentChanged = this._syncElementContent(el, content, isMarkdown, plainLinks);
+                const plainHighlights = !isMarkdown ? (props.highlights || null) : null;
+                const contentChanged = this._syncElementContent(el, content, isMarkdown, plainLinks, plainHighlights);
                 if (contentChanged) {
                     console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
                 }
@@ -697,8 +733,12 @@ export class HtmlTextLayer {
                     el.classList.toggle('mb-text--md', isMarkdown);
                     el.style.whiteSpace = isMarkdown ? 'normal' : 'pre';
                     el.style.overflowWrap = isMarkdown ? 'break-word' : '';
-                    if (!isMarkdown) el.style.padding = '0';
                 }
+                // Паддинг задаём при каждом проходе, а не только при смене режима:
+                // после режима списка inline padding сброшен на CSS 0.3em, и без
+                // безусловного восстановления обычный текст сохраняет лишний отступ
+                // сверху — статическая рамка уезжает выше глифов относительно поля ввода.
+                el.style.padding = resolveStaticTextPadding({ isMarkdown, useList: false });
             }
         }
 
@@ -710,7 +750,7 @@ export class HtmlTextLayer {
         try {
             const hasContent = !!(el.textContent && el.textContent.trim());
             if (hasContent && !angle && !isMarkdown && !useList && !(props.textAlign && props.textAlign !== 'left')) {
-                const rightMargin = Math.ceil(fontSizePx * 0.7) + 6;
+                const rightMargin = computeTextRightPadPx(fontSizePx);
                 const prevWidth = el.style.width;
                 el.style.width = 'auto';
                 const contentW = Math.ceil(el.scrollWidth);
@@ -725,7 +765,7 @@ export class HtmlTextLayer {
         try {
             el.style.height = 'auto';
             // Добавим небольшой нижний отступ для хвостов букв, чтобы не отсекались (например, у «з»)
-            const hCss = Math.max(1, Math.round(el.scrollHeight + 2));
+            const hCss = Math.max(1, Math.round(el.scrollHeight + TEXT_BOX_BOTTOM_PAD_PX));
             el.style.height = `${hCss}px`;
             // Обновим высоту для лога, если её ещё не устанавливали
             if (!logHeight) {
@@ -745,26 +785,29 @@ export class HtmlTextLayer {
         });
     }
 
-    /** Обновляет innerHTML/textContent только при реальной смене content, флага markdown или ссылок */
-    _syncElementContent(el, content, isMarkdown, links) {
+    /** Обновляет innerHTML/textContent только при реальной смене content, флага markdown, ссылок или подсветки */
+    _syncElementContent(el, content, isMarkdown, links, highlights) {
         if (typeof content !== 'string') return false;
         const mdFlag = isMarkdown ? '1' : '0';
         const linksKey = (Array.isArray(links) && links.length > 0) ? JSON.stringify(links) : '';
+        const highlightsKey = (Array.isArray(highlights) && highlights.length > 0) ? JSON.stringify(highlights) : '';
         if (
             el.dataset.renderedContent === content &&
             el.dataset.renderedMd === mdFlag &&
-            (el.dataset.renderedLinks || '') === linksKey
+            (el.dataset.renderedLinks || '') === linksKey &&
+            (el.dataset.renderedHighlights || '') === highlightsKey
         ) return false;
         if (isMarkdown) {
             el.innerHTML = renderRichText(content);
-        } else if (linksKey) {
-            el.innerHTML = _buildHtmlWithLinks(content, links);
+        } else if (linksKey || highlightsKey) {
+            el.innerHTML = buildHtmlWithRanges(content, links, highlights);
         } else {
             el.textContent = content;
         }
         el.dataset.renderedContent = content;
         el.dataset.renderedMd = mdFlag;
         el.dataset.renderedLinks = linksKey;
+        el.dataset.renderedHighlights = highlightsKey;
         return true;
     }