@sequent-org/moodboard 1.4.57 → 1.4.58

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`;

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 };
         }
     }
 }