@sequent-org/moodboard 1.4.57 → 1.4.59

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;

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

@@ -1,5 +1,7 @@
 import { Events } from '../../../core/events/Events.js';
 import { alignStaticTextToEditorCssPosition } from './TextEditorPositioningService.js';
+import { updateCustomCaret } from './TextEditorCaretService.js';
+import { buildHtmlWithRanges } from '../../../ui/HtmlTextLayer.js';
 import {
     cleanupActiveTextEditor,
     showNotePixiText,
@@ -190,6 +192,20 @@ function _isInsideToolbarUI(target) {
     return !!(target && typeof target.closest === 'function' && target.closest(UI_BLOCK_SELECTOR));
 }
 
+/**
+ * Возвращает true, если элемент находится внутри панели свойств текста (форматирование).
+ */
+function _isInsideTextPropertiesPanel(target) {
+    return !!(target && typeof target.closest === 'function' && target.closest('.text-properties-layer'));
+}
+
+/**
+ * Нативный color-input открывает системную палитру по mousedown; preventDefault его ломает.
+ */
+function _isNativeColorInput(target) {
+    return !!(target && target.tagName === 'INPUT' && target.type === 'color');
+}
+
 export function bindTextEditorInteractions(controller, {
     textarea,
     isNewCreation,
@@ -229,6 +245,15 @@ export function bindTextEditorInteractions(controller, {
         if (e.target === textarea) return;
         if (!_isInsideToolbarUI(e.target)) return;
 
+        // Клик по панели свойств текста (например, выбор цвета подсветки выделенного
+        // фрагмента): сохраняем фокус и выделение в textarea, но НЕ глушим сам click —
+        // он должен дойти до кнопки/дропдауна. Иначе blur закроет редактор, и выделение
+        // пропадёт ещё до выбора цвета.
+        if (_isInsideTextPropertiesPanel(e.target) && !_isNativeColorInput(e.target)) {
+            e.preventDefault();
+            return;
+        }
+
         const value = (textarea.value || '').trim();
         if (!isNewCreation || value.length > 0) return;
 
@@ -302,14 +327,74 @@ export function bindTextEditorInteractions(controller, {
         inputHandler = autoSize;
     }
 
+    const syncBackdrop = () => {
+        if (!controller.textEditor) return;
+        const wrapper = controller.textEditor.wrapper;
+        const objectId = controller.textEditor.objectId;
+        const editorProps = controller.textEditor.properties || {};
+        
+        const backdrop = wrapper ? wrapper.querySelector('.moodboard-text-backdrop') : null;
+        if (!backdrop) return;
+        
+        // Актуальные highlights/links берём из _mb.properties объекта (обновляются
+        // через Events.Object.StateChanged), с fallback на свойства редактора.
+        let currentHighlights = editorProps.highlights || null;
+        let currentLinks = editorProps.links || null;
+        if (objectId) {
+            try {
+                const pixiReq = { objectId, pixiObject: null };
+                controller.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);
+    };
+
+    const caretUpdateHandler = () => {
+        if (controller.textEditor && controller.textEditor.caret) {
+            updateCustomCaret(textarea, controller.textEditor.caret);
+        }
+    };
+
     textarea.addEventListener('blur', blurHandler);
     textarea.addEventListener('keydown', keydownHandler);
-    textarea.addEventListener('input', inputHandler);
+    textarea.addEventListener('input', (e) => {
+        inputHandler(e);
+        syncBackdrop();
+    });
+    
+    textarea.addEventListener('input', caretUpdateHandler);
+    textarea.addEventListener('keydown', () => setTimeout(caretUpdateHandler, 0));
+    textarea.addEventListener('keyup', caretUpdateHandler);
+    textarea.addEventListener('click', caretUpdateHandler);
+    textarea.addEventListener('focus', caretUpdateHandler);
+    document.addEventListener('selectionchange', caretUpdateHandler);
+
+    // Initial caret and backdrop update
+    setTimeout(() => {
+        caretUpdateHandler();
+        syncBackdrop();
+    }, 0);
 
     const removeDomListeners = () => {
         textarea.removeEventListener('blur', blurHandler);
         textarea.removeEventListener('keydown', keydownHandler);
         textarea.removeEventListener('input', inputHandler);
+        
+        textarea.removeEventListener('input', caretUpdateHandler);
+        textarea.removeEventListener('keyup', caretUpdateHandler);
+        textarea.removeEventListener('click', caretUpdateHandler);
+        textarea.removeEventListener('focus', caretUpdateHandler);
+        document.removeEventListener('selectionchange', caretUpdateHandler);
+        
         document.removeEventListener('mousedown', mousedownCaptureHandler, true);
         if (_pendingClickBlocker) {
             document.removeEventListener('click', _pendingClickBlocker, true);

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

@@ -42,6 +42,12 @@ export function positionRegularTextEditor({
 
     let baseLeftPx = screenPos.x;
     let baseTopPx = screenPos.y;
+    // Computed padding-top of the static .mb-text element (e.g. 0.3em for list/markdown types).
+    // The static element top edge ≠ text glyph top: glyphs start paddingTop pixels lower.
+    // The editor wrapper must be shifted down by the same amount so text doesn't jump.
+    let staticPadTop = 0;
+    let baseWidthPx = null;
+    let baseHeightPx = null;
     try {
         if (!create && objectId && typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {
             const el = window.moodboardHtmlTextLayer.idToEl.get(objectId);
@@ -50,6 +56,16 @@ export function positionRegularTextEditor({
                 const cssTop = parseFloat(el.style.top || 'NaN');
                 if (isFinite(cssLeft)) baseLeftPx = cssLeft;
                 if (isFinite(cssTop)) baseTopPx = cssTop;
+                const rect = el.getBoundingClientRect?.();
+                if (rect && isFinite(rect.width) && rect.width > 0) baseWidthPx = rect.width;
+                if (rect && isFinite(rect.height) && rect.height > 0) baseHeightPx = rect.height;
+                if (typeof window.getComputedStyle === 'function') {
+                    try {
+                        const cs = window.getComputedStyle(el);
+                        const pt = parseFloat(cs.paddingTop);
+                        if (isFinite(pt) && pt > 0) staticPadTop = pt;
+                    } catch (_) {}
+                }
             }
         }
     } catch (_) {}
@@ -57,7 +73,7 @@ export function positionRegularTextEditor({
     const leftPx = Math.round(baseLeftPx - padLeft);
     const topPx = create
         ? Math.round(baseTopPx - padTop - (lineHeightPx / 2))
-        : Math.round(baseTopPx - padTop);
+        : Math.round(baseTopPx + staticPadTop - padTop + 1);
 
     wrapper.style.left = `${leftPx}px`;
     wrapper.style.top = `${topPx}px`;
@@ -70,6 +86,8 @@ export function positionRegularTextEditor({
         lineHeightPx,
         baseLeftPx,
         baseTopPx,
+        baseWidthPx,
+        baseHeightPx,
     };
 }
 

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

@@ -1,5 +1,6 @@
 import { Events } from '../../../core/events/Events.js';
 import { registerEditorListeners } from './InlineEditorListenersRegistry.js';
+import { computeTextRightPadPx } from '../../../services/text/TextBoxMetrics.js';
 
 export function createRegularTextAutoSize({
     textarea,
@@ -13,7 +14,7 @@ export function createRegularTextAutoSize({
         textarea.style.height = 'auto';
 
         const fontPx = parseFloat(textarea.style.fontSize) || 16;
-        const rightPad = Math.ceil(fontPx * 0.7) + 6;
+        const rightPad = computeTextRightPadPx(fontPx);
         const naturalW = Math.max(1, Math.ceil(textarea.scrollWidth + rightPad));
         const targetW = Math.round(Math.max(minWBound, naturalW));
         textarea.style.width = `${targetW}px`;