@sequent-org/moodboard 1.4.57 → 1.4.59

package/src/ui/TextPropertiesPanel.js

@@ -11,7 +11,6 @@ import {
 import {
     applyTextAppearanceToDom,
     buildBackgroundColorUpdate,
-    buildHighlightColorUpdate,
     buildFontFamilyUpdate,
     buildFontSizeUpdate,
     buildMarkdownUpdate,
@@ -62,7 +61,7 @@ export class TextPropertiesPanel {
             position: 'absolute',
             inset: '0',
             pointerEvents: 'none',
-            zIndex: 10000,
+            zIndex: 10050,
         });
         this.container.appendChild(this.layer);
 
@@ -122,6 +121,8 @@ export class TextPropertiesPanel {
 
         if (this.panel) {
             this.panel.style.display = 'none';
+            this.panel.querySelectorAll('.tpp-more-dropdown.is-open').forEach((el) => el.classList.remove('is-open'));
+            this.panel.querySelectorAll('.ipp-btn.is-active').forEach((el) => el.classList.remove('is-active'));
         }
 
         this._hideColorDropdown();
@@ -213,11 +214,78 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { fontSize });
     }
 
+    _applyFormatToSelection(formatType, value) {
+        const activeEditor = document.querySelector('.moodboard-text-input');
+        if (!activeEditor || activeEditor.selectionStart === activeEditor.selectionEnd) {
+            return false;
+        }
+
+        const start = activeEditor.selectionStart;
+        const end = activeEditor.selectionEnd;
+        const text = activeEditor.value;
+        const selected = text.substring(start, end);
+        const before = text.substring(0, start);
+        const after = text.substring(end);
+        
+        let newSelected = selected;
+        
+        const toggleWrap = (str, prefix, suffix = prefix) => {
+            if (str.startsWith(prefix) && str.endsWith(suffix)) {
+                return str.substring(prefix.length, str.length - suffix.length);
+            }
+            return `${prefix}${str}${suffix}`;
+        };
+        
+        switch (formatType) {
+            case 'color': {
+                const cleanSelected = selected.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, '');
+                newSelected = `<span style="color: ${value}">${cleanSelected}</span>`;
+                break;
+            }
+            case 'bold':
+                newSelected = toggleWrap(selected, '**');
+                break;
+            case 'italic':
+                newSelected = toggleWrap(selected, '*');
+                break;
+            case 'underline':
+                newSelected = toggleWrap(selected, '<u>', '</u>');
+                break;
+            case 'strikethrough':
+                newSelected = toggleWrap(selected, '~~');
+                break;
+        }
+        
+        activeEditor.value = before + newSelected + after;
+        
+        // Restore selection
+        activeEditor.selectionStart = start;
+        activeEditor.selectionEnd = start + newSelected.length;
+        
+        // Force markdown mode so HTML/MD tags are rendered
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: buildMarkdownUpdate(true),
+        });
+        
+        // Update the object's content
+        this.eventBus.emit(Events.Tool.UpdateObjectContent, {
+            objectId: this.currentId,
+            content: activeEditor.value
+        });
+        
+        return true;
+    }
+
     _changeTextColor(color) {
         if (!this.currentId) {
             return;
         }
 
+        if (this._applyFormatToSelection('color', color)) {
+            return;
+        }
+
         this.eventBus.emit(Events.Object.StateChanged, {
             objectId: this.currentId,
             updates: buildTextColorUpdate(color),
@@ -244,12 +312,39 @@ export class TextPropertiesPanel {
             return;
         }
 
-        this.eventBus.emit(Events.Object.StateChanged, {
-            objectId: this.currentId,
-            updates: buildHighlightColorUpdate(highlightColor),
-        });
+        const props = getObjectProperties(this.eventBus, this.currentId);
+        
+        // Получаем актуальный контент (из живого редактора, если он есть)
+        let contentLength = 0;
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor) {
+            contentLength = editor.value.length;
+        } else {
+            contentLength = (props?.content ?? '').length;
+        }
+
+        const sel = this._savedTextSelection;
+        // С выделением — диапазон выделения; без выделения — весь текст (как у ссылок),
+        // box-фон всего поля не используется.
+        const start = (sel && sel.end > sel.start) ? sel.start : 0;
+        const end = (sel && sel.end > sel.start) ? sel.end : contentLength;
 
-        this._updateTextAppearance(this.currentId, { highlightColor });
+        this._addHighlight(highlightColor, start, end, this.currentId);
+        this._savedTextSelection = null;
+    }
+
+    /**
+     * Снимок выделения активного текстового редактора. Вызывается на mousedown по
+     * UI подсветки ДО того, как фокус уйдёт из textarea (особенно перед нативным
+     * color-input, который гарантированно сбрасывает выделение).
+     */
+    _snapshotTextSelection() {
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor && typeof editor.selectionStart === 'number' && typeof editor.selectionEnd === 'number') {
+            this._savedTextSelection = { start: editor.selectionStart, end: editor.selectionEnd };
+        } else {
+            this._savedTextSelection = null;
+        }
     }
 
     _toggleFormat(prop) {
@@ -257,6 +352,10 @@ export class TextPropertiesPanel {
             return;
         }
 
+        if (this._applyFormatToSelection(prop, null)) {
+            return;
+        }
+
         const properties = getObjectProperties(this.eventBus, this.currentId);
         const newValue = !(properties ? Boolean(properties[prop]) : false);
 
@@ -360,6 +459,54 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(targetId, { links: newLinks });
     }
 
+    /**
+     * Добавляет/убирает цветовой диапазон подсветки в properties.highlights.
+     * Не вставляет теги в текст — textarea остаётся чистой.
+     * @param {string} color — CSS-цвет или 'transparent' (удалить подсветку в диапазоне)
+     * @param {number} start — начало диапазона (selectionStart)
+     * @param {number} end — конец диапазона (selectionEnd)
+     * @param {string} [objectId] — если не задан, используется this.currentId
+     */
+    _addHighlight(color, start, end, objectId) {
+        const targetId = objectId || this.currentId;
+        if (!targetId) return;
+        const props = getObjectProperties(this.eventBus, targetId);
+
+        let contentLength = 0;
+        const editor = document.querySelector('.moodboard-text-input');
+        if (editor) {
+            contentLength = editor.value.length;
+        } else {
+            contentLength = (props?.content ?? '').length;
+        }
+
+        const safeEnd = Math.min(end, contentLength);
+        const safeStart = Math.min(start, safeEnd);
+        if (safeStart >= safeEnd) return;
+
+        const oldHighlights = Array.isArray(props?.highlights) ? props.highlights : [];
+        const filtered = oldHighlights.filter(h => h.end <= safeStart || h.start >= safeEnd);
+        const newHighlights = color === 'transparent'
+            ? filtered
+            : [...filtered, { start: safeStart, end: safeEnd, color }]
+                .sort((a, b) => a.start - b.start);
+
+        // Если редактор открыт, синхронизируем его текущее значение в state вместе с
+        // подсветкой. Иначе при коммите UpdateContentCommand._applyContent вычисляет
+        // _adjustHighlights(oldText = stale initialContent, newText = editor.value) и
+        // сдвигает/удаляет только что добавленные диапазоны.
+        const propertiesUpdate = { highlights: newHighlights };
+        if (editor) {
+            propertiesUpdate.content = editor.value;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: targetId,
+            updates: { properties: propertiesUpdate },
+        });
+        this._updateTextAppearance(targetId, { highlights: newHighlights });
+    }
+
     _updateTextAppearance(objectId, properties) {
         applyTextAppearanceToDom(objectId, properties);
         syncPixiTextProperties(this.eventBus, objectId, properties);

package/src/ui/chat/ChatWindow.js

@@ -972,6 +972,43 @@ export class ChatWindow {
         });
     }
 
+    _placeGeneratedVideoOnBoard(result, skeletonWorld = null) {
+        if (!this._boardCore?.eventBus) return;
+        const src = result?.videoUrl;
+        if (!src) {
+            if (this._refs?.errorBlock) {
+                this._refs.errorBlock.textContent = 'Видео сгенерировано, но ссылка отсутствует.';
+                this._refs.errorBlock.classList.add('is-visible');
+            }
+            return;
+        }
+
+        const world = this._boardCore.pixi?.worldLayer || this._boardCore.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+
+        // Приоритет — мировая точка скелетона: видео приземляется туда, где была заглушка,
+        // даже если пользователь панорамировал/зумил во время генерации.
+        let x;
+        let y;
+        if (skeletonWorld) {
+            x = Math.round(skeletonWorld.x * s + (world?.x || 0));
+            y = Math.round(skeletonWorld.y * s + (world?.y || 0));
+        } else {
+            const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+            x = composerRect ? Math.round(composerRect.left + composerRect.width / 2) : 400;
+            y = composerRect ? Math.round(composerRect.top - 200) : 200;
+        }
+
+        this._boardCore.eventBus.emit(Events.UI.PasteVideoAt, {
+            x,
+            y,
+            src,
+            mimeType: result?.mimeType || 'video/mp4',
+            poster: null,
+            skipUpload: true
+        });
+    }
+
     _clearBoardSelection() {
         if (typeof this._boardCore?.selectTool?.clearSelection === 'function') {
             this._boardCore.selectTool.clearSelection();
@@ -1227,15 +1264,9 @@ export class ChatWindow {
         }
         if (state.status === 'done') {
             this._composer?.setStreaming(false);
+            const skeletonWorld = this._videoSkeletonWorld;
             this._clearVideoSkeleton();
-            // Тип объекта «видео» на доске не существует. Событие Events.UI.PasteImageAt
-            // ожидает data URL картинки — видео-URL несовместим. Размещение на доске
-            // выходит за рамки текущей фазы (нет объекта типа video).
-            console.info('[ChatWindow] Видео готово. Размещение на доске не поддерживается: нет объекта типа video.', state.result?.videoUrl);
-            if (this._refs?.errorBlock) {
-                this._refs.errorBlock.textContent = 'Видео сгенерировано. Размещение на доске появится в следующей фазе.';
-                this._refs.errorBlock.classList.add('is-visible');
-            }
+            this._placeGeneratedVideoOnBoard(state.result, skeletonWorld);
         }
         if (state.status === 'error') {
             this._composer?.setStreaming(false);

package/src/ui/comments/CommentThreadPopover.js

@@ -136,7 +136,9 @@ export class CommentThreadPopover {
             position: 'absolute',
             inset: '0',
             pointerEvents: 'none',
-            zIndex: 26,
+            // Выше панелей свойств (text-properties-layer = 10050, *PropertiesPanel = 10000),
+            // иначе открытый поверх объекта попап комментария оказывается под тулбаром свойств.
+            zIndex: 10060,
         });
         this.container.appendChild(this.layer);
 

package/src/ui/handles/HandlesDomRenderer.js

@@ -1218,6 +1218,8 @@ export class HandlesDomRenderer {
         this.host.layer.innerHTML = '';
         const box = document.createElement('div');
         box.className = 'mb-handles-box';
+        box.id = `mb-handles-box-${id}`;
+        box.dataset.objectId = id;
 
         let rotation = options.rotation ?? 0;
         if (id !== '__group__') {

package/src/ui/handles/HandlesInteractionController.js

@@ -500,7 +500,17 @@ export class HandlesInteractionController {
             isNoteTarget = (mbType === 'note');
         }
 
+        let _edgeHasMoved = false;
+        const EDGE_DRAG_THRESHOLD = 4;
+
         const onMove = (ev) => {
+            if (!_edgeHasMoved) {
+                const dx = ev.clientX - startMouse.x;
+                const dy = ev.clientY - startMouse.y;
+                if (Math.hypot(dx, dy) > EDGE_DRAG_THRESHOLD) {
+                    _edgeHasMoved = true;
+                }
+            }
             const maintainAspectRatio = !!ev.shiftKey;
             if (isGroup && maintainAspectRatio !== previousMaintainAspectRatio) {
                 startCSS = this._readBoxCss(box);
@@ -657,6 +667,36 @@ export class HandlesInteractionController {
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
             document.removeEventListener('pointerup', onUp);
+
+            // Клик по рамке без перетаскивания на текстовом объекте → редактирование
+            if (!_edgeHasMoved && isTextTarget && !isGroup) {
+                const posData = { objectId: id, position: null };
+                this.host.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+                const _pixiReq = { objectId: id, pixiObject: null };
+                this.host.eventBus.emit(Events.Tool.GetObjectPixi, _pixiReq);
+                const _textProps = _pixiReq.pixiObject?._mb?.properties || {};
+                this.host.eventBus.emit(Events.Tool.ObjectEdit, {
+                    id,
+                    type: 'text',
+                    position: posData.position,
+                    properties: {
+                        ..._textProps,
+                        content: _textProps.content || '',
+                    },
+                    caretClick: { clientX: e.clientX, clientY: e.clientY },
+                    create: false,
+                });
+                // Сбрасываем состояние resize без создания команды в истории
+                this.host.eventBus.emit(Events.Tool.ResizeEnd, {
+                    object: id,
+                    oldSize: { width: startWorld.width, height: startWorld.height },
+                    newSize: { width: startWorld.width, height: startWorld.height },
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: { x: startWorld.x, y: startWorld.y },
+                });
+                return;
+            }
+
             const endCSS = {
                 left: parseFloat(box.style.left),
                 top: parseFloat(box.style.top),

package/src/ui/styles/workspace.css

@@ -665,14 +665,45 @@
     z-index: 10000;
 }
 
+.mb-custom-caret {
+    position: absolute;
+    background-color: #111;
+    width: 2px;
+    pointer-events: none;
+    z-index: 10001;
+    animation: mb-caret-blink 1s step-end infinite;
+    display: none;
+    border-radius: 1px;
+}
+
+@keyframes mb-caret-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+/* Панель свойств текста и её дропдауны — выше inline-редактора */
+.text-properties-layer {
+    z-index: 10050;
+}
+
+.moodboard-text-input::selection {
+    background: rgba(33, 150, 243, 0.28);
+}
+
+.moodboard-text-input::-moz-selection {
+    background: rgba(33, 150, 243, 0.28);
+}
+
 .moodboard-text-input {
+    caret-color: transparent;
     position: relative;
+    z-index: 2;
     left: 0;
     top: 0;
     border: none;
     padding: 0;
     font-family: Caveat, Arial, cursive;
-    color: #111;
+    color: transparent;
     background: transparent;
     outline: none;
     resize: none;
@@ -685,7 +716,34 @@
     padding-bottom: 0; /* без нижнего отступа */
     letter-spacing: 0px;
     font-kerning: normal;
+    text-rendering: optimizeLegibility;
+    margin: 0;
+}
+
+.moodboard-text-backdrop {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    padding: 0;
+    font-family: Caveat, Arial, cursive;
+    color: #111;
+    background: transparent;
+    box-sizing: content-box;
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding-bottom: 0;
+    letter-spacing: 0px;
+    font-kerning: normal;
+    text-rendering: optimizeLegibility;
     margin: 0;
+    pointer-events: none;
 }
 
 .text-properties-panel .font-select,
@@ -1576,6 +1634,11 @@
     padding-bottom: 1px;
 }
 
+.moodboard-text-backdrop {
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+
 .moodboard-text-input:focus {
     outline: none;
 }

package/src/ui/text-properties/TextPropertiesPanelBindings.js

@@ -111,6 +111,14 @@ export function bindTextPropertiesPanelControls(panel) {
     document.addEventListener('click', panel._onColorDocumentClick);
 
     if (panel.currentHighlightButton) {
+        // Снимок выделения textarea до ухода фокуса (capture-фаза, до click/blur).
+        // Покрывает и кнопку, и пресеты, и нативный color-input внутри контейнера.
+        if (panel._highlightSelectorContainer) {
+            panel._highlightSelectorContainer.addEventListener('mousedown', () => {
+                panel._snapshotTextSelection();
+            }, true);
+        }
+
         panel.currentHighlightButton.addEventListener('click', (event) => {
             event.stopPropagation();
             panel._toggleHighlightDropdown();

package/src/ui/text-properties/TextPropertiesPanelMapper.js

@@ -170,6 +170,35 @@ export function buildPropertyUpdate(key, value) {
 
 export function applyTextAppearanceToDom(objectId, properties) {
     const htmlElement = document.querySelector(`[data-id="${objectId}"]`);
+    
+    // Также обновляем активный редактор, если он открыт
+    const activeEditor = document.querySelector('.moodboard-text-editor');
+    if (activeEditor) {
+        const textarea = activeEditor.querySelector('.moodboard-text-input');
+        const backdrop = activeEditor.querySelector('.moodboard-text-backdrop');
+        
+        if (textarea) {
+            if (properties.fontFamily) {
+                textarea.style.fontFamily = properties.fontFamily;
+                if (backdrop) backdrop.style.fontFamily = properties.fontFamily;
+            }
+            if (properties.fontSize) {
+                textarea.style.fontSize = `${properties.fontSize}px`;
+                if (backdrop) backdrop.style.fontSize = `${properties.fontSize}px`;
+            }
+            if (properties.textAlign !== undefined) {
+                textarea.style.textAlign = properties.textAlign;
+                if (backdrop) backdrop.style.textAlign = properties.textAlign;
+            }
+            if (properties.color && backdrop) {
+                backdrop.style.color = properties.color;
+            }
+            
+            // Эмулируем событие input для перерисовки backdrop
+            textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+
     if (!htmlElement) {
         return;
     }