@sequent-org/moodboard 1.4.56 → 1.4.58

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,
@@ -92,7 +94,9 @@ export function createTextEditorFinalize(controller, {
                 const scaleX = worldLayerRef?.scale?.x || 1;
                 const viewResLocal = (controller.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
                 const wPx = Math.max(1, wrapper.offsetWidth);
-                const hPx = Math.max(1, wrapper.offsetHeight);
+                const _taStyle = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+                const _taPaddingV = _taStyle ? (parseFloat(_taStyle.paddingTop) || 0) + (parseFloat(_taStyle.paddingBottom) || 0) : 0;
+                const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV);
                 const newW = Math.max(1, Math.round(wPx * viewResLocal / scaleX));
                 const newH = Math.max(1, Math.round(hPx * viewResLocal / scaleX));
                 const sizeReq = { objectId, size: null };
@@ -135,14 +139,22 @@ export function createTextEditorFinalize(controller, {
             const worldLayerRef = controller.textEditor.world || (controller.app?.stage);
             const scaleX = worldLayerRef?.scale?.x || 1;
             const wPx = Math.max(1, wrapper.offsetWidth);
-            const hPx = Math.max(1, wrapper.offsetHeight);
+            const _taStyle2 = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+            const _taPaddingV2 = _taStyle2 ? (parseFloat(_taStyle2.paddingTop) || 0) + (parseFloat(_taStyle2.paddingBottom) || 0) : 0;
+            const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV2);
             const wWorld = Math.max(1, Math.round(wPx * viewRes / scaleX));
             const hWorld = Math.max(1, Math.round(hPx * viewRes / scaleX));
             controller.eventBus.emit(Events.UI.ToolbarAction, {
                 type: objectType,
                 id: objectType,
                 position: { x: position.x, y: position.y },
-                properties: { content: value, fontSize, width: wWorld, height: hWorld },
+                properties: { 
+                    content: value, 
+                    fontSize, 
+                    width: wWorld, 
+                    height: hWorld,
+                    highlightColor: properties.highlightColor
+                },
             });
         } else {
             if (isNewCreation) {
@@ -180,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,
@@ -219,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;
 
@@ -292,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);
@@ -377,14 +472,18 @@ export function closeTextEditorFromState(controller, commit) {
         }
         return;
     }
-    if (objectId == null) {
-        controller.eventBus.emit(Events.UI.ToolbarAction, {
-            type: objectType,
-            id: objectType,
-            position: { x: position.x, y: position.y },
-            properties: { content: value, fontSize: properties.fontSize },
-        });
-    } else {
+        if (objectId == null) {
+            controller.eventBus.emit(Events.UI.ToolbarAction, {
+                type: objectType,
+                id: objectType,
+                position: { x: position.x, y: position.y },
+                properties: { 
+                    content: value, 
+                    fontSize: properties.fontSize,
+                    highlightColor: properties.highlightColor
+                },
+            });
+        } else {
         if (isNewCreation) {
             const oldContent = typeof initialContent === 'string' ? initialContent : '';
             controller.eventBus.emit(Events.Object.ContentChange, {

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