@sequent-org/moodboard 1.4.57 → 1.4.58

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