@sequent-org/moodboard 1.4.56 → 1.4.58

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

@@ -1,3 +1,5 @@
+import { updateLinkButtonState } from './TextLinkControl.js';
+
 function hidePresetTicks(buttons) {
     buttons.forEach((button) => {
         const tick = button.querySelector('i');
@@ -108,6 +110,43 @@ 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();
+        });
+
+        panel._highlightPresetButtons.forEach((button) => {
+            button.addEventListener('click', () => {
+                hidePresetTicks(panel._highlightPresetButtons);
+                const tick = button.querySelector('i');
+                if (tick) {
+                    tick.style.display = 'block';
+                }
+                panel._selectHighlightColor(button.dataset.colorValue);
+            });
+        });
+
+        panel.highlightInput.addEventListener('change', (event) => {
+            panel._selectHighlightColor(event.target.value);
+        });
+
+        panel._onHighlightDocumentClick = (event) => {
+            if (!panel._highlightSelectorContainer || !event.target || !panel._highlightSelectorContainer.contains(event.target)) {
+                panel._hideHighlightDropdown();
+            }
+        };
+        document.addEventListener('click', panel._onHighlightDocumentClick);
+    }
+
     panel.currentBgColorButton.addEventListener('click', (event) => {
         event.stopPropagation();
         panel._toggleBgColorDropdown();
@@ -138,6 +177,7 @@ export function bindTextPropertiesPanelControls(panel) {
     if (panel.markdownToggle) {
         panel.markdownToggle.addEventListener('change', (event) => {
             panel._changeMarkdown(event.target.checked);
+            updateLinkButtonState(panel, event.target.checked);
         });
     }
 
@@ -171,6 +211,11 @@ export function unbindTextPropertiesPanelControls(panel) {
         panel._onColorDocumentClick = null;
     }
 
+    if (panel._onHighlightDocumentClick) {
+        document.removeEventListener('click', panel._onHighlightDocumentClick);
+        panel._onHighlightDocumentClick = null;
+    }
+
     if (panel._onBgDocumentClick) {
         document.removeEventListener('click', panel._onBgDocumentClick);
         panel._onBgDocumentClick = null;

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

@@ -97,6 +97,7 @@ export function getControlValuesFromProperties(properties) {
         fontFamily: properties.fontFamily || 'Roboto, Arial, sans-serif',
         fontSize: String(properties.fontSize || 18),
         color: properties.color || '#000000',
+        highlightColor: properties.highlightColor !== undefined ? properties.highlightColor : 'transparent',
         backgroundColor: properties.backgroundColor !== undefined ? properties.backgroundColor : 'transparent',
         markdown: properties.markdown === true,
         bold: properties.bold === true,
@@ -114,6 +115,7 @@ export function getFallbackControlValues() {
         fontFamily: 'Arial, sans-serif',
         fontSize: '18',
         color: '#000000',
+        highlightColor: 'transparent',
         backgroundColor: 'transparent',
         markdown: false,
         bold: false,
@@ -150,6 +152,12 @@ export function buildBackgroundColorUpdate(backgroundColor) {
     };
 }
 
+export function buildHighlightColorUpdate(highlightColor) {
+    return {
+        properties: { highlightColor },
+    };
+}
+
 export function buildMarkdownUpdate(markdown) {
     return {
         properties: { markdown },
@@ -162,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;
     }
@@ -182,6 +219,21 @@ export function applyTextAppearanceToDom(objectId, properties) {
             htmlElement.style.backgroundColor = properties.backgroundColor;
         }
     }
+    if (properties.highlightColor !== undefined) {
+        // Устанавливаем CSS-переменную --highlight-color на элементе текста,
+        // чтобы она могла использоваться для подкраски выделенного фрагмента
+        if (properties.highlightColor === 'transparent') {
+            htmlElement.style.removeProperty('--highlight-color');
+            // Не сбрасываем backgroundColor, так как он может быть установлен отдельно
+        } else {
+            htmlElement.style.setProperty('--highlight-color', properties.highlightColor);
+            // Для обычного текста без Quill мы можем просто установить backgroundColor
+            // если нет выделения
+            if (!htmlElement.querySelector('span[style*="background-color"]')) {
+                htmlElement.style.backgroundColor = properties.highlightColor;
+            }
+        }
+    }
     if (properties.bold !== undefined) {
         htmlElement.style.fontWeight = properties.bold ? 'bold' : '';
     }

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

@@ -5,6 +5,7 @@ import {
     TEXT_COLOR_PRESETS,
 } from './TextPropertiesPanelMapper.js';
 import { createTextFormatControls } from './TextFormatControls.js';
+import { createTextLockMoreControls } from './TextLockMoreControls.js';
 
 export function createTextPropertiesPanelRenderer(panelInstance) {
     const panel = document.createElement('div');
@@ -36,7 +37,9 @@ export function hideColorDropdown(panelInstance) {
 
 export function updateCurrentColorButton(panelInstance, color) {
     if (panelInstance.currentColorButton) {
-        panelInstance.currentColorButton.style.backgroundColor = color;
+        if (panelInstance.colorIndicator) {
+            panelInstance.colorIndicator.style.backgroundColor = color;
+        }
         panelInstance.currentColorButton.title = `Текущий цвет: ${color}`;
     }
     if (panelInstance.colorInput) {
@@ -44,6 +47,36 @@ export function updateCurrentColorButton(panelInstance, color) {
     }
 }
 
+export function toggleHighlightDropdown(panelInstance) {
+    if (!panelInstance.highlightDropdown) {
+        return;
+    }
+
+    if (panelInstance.highlightDropdown.style.display === 'none') {
+        panelInstance.highlightDropdown.style.display = 'block';
+    } else {
+        panelInstance.highlightDropdown.style.display = 'none';
+    }
+}
+
+export function hideHighlightDropdown(panelInstance) {
+    if (panelInstance.highlightDropdown) {
+        panelInstance.highlightDropdown.style.display = 'none';
+    }
+}
+
+export function updateCurrentHighlightButton(panelInstance, color) {
+    if (panelInstance.currentHighlightButton) {
+        if (panelInstance.highlightIndicator) {
+            panelInstance.highlightIndicator.style.backgroundColor = color === 'transparent' ? 'transparent' : color;
+        }
+        panelInstance.currentHighlightButton.title = color === 'transparent' ? 'Без фона текста' : `Цвет фона текста: ${color}`;
+    }
+    if (panelInstance.highlightInput) {
+        panelInstance.highlightInput.value = color === 'transparent' ? '#ffff99' : color;
+    }
+}
+
 export function toggleBgColorDropdown(panelInstance) {
     if (!panelInstance.bgColorDropdown) {
         return;
@@ -68,24 +101,27 @@ export function updateCurrentBgColorButton(panelInstance, color) {
             panelInstance.currentBgColorButton.style.backgroundColor = 'white';
             panelInstance.currentBgColorButton.title = 'Без выделения';
 
-            if (!panelInstance.currentBgColorButton.querySelector('div')) {
-                const line = document.createElement('div');
-                line.style.cssText = `
-                    width: 20px;
-                    height: 1px;
-                    background: #ff0000;
-                    transform: rotate(45deg);
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform-origin: center;
-                    transform: translate(-50%, -50%) rotate(45deg);
-                `;
-                panelInstance.currentBgColorButton.appendChild(line);
+            const line = panelInstance.currentBgColorButton.querySelector('div');
+            if (line) {
+                line.remove();
+            }
+
+            if (!panelInstance.currentBgColorButton.querySelector('img.no-color-icon')) {
+                const img = document.createElement('img');
+                img.src = '/icons/no-color.svg';
+                img.className = 'no-color-icon';
+                img.style.cssText = 'width: 20px; height: 20px; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);';
+                panelInstance.currentBgColorButton.appendChild(img);
             }
         } else {
             panelInstance.currentBgColorButton.style.backgroundColor = color;
             panelInstance.currentBgColorButton.title = `Цвет выделения: ${color}`;
+            
+            const img = panelInstance.currentBgColorButton.querySelector('img.no-color-icon');
+            if (img) {
+                img.remove();
+            }
+            
             const line = panelInstance.currentBgColorButton.querySelector('div');
             if (line) {
                 line.remove();
@@ -114,6 +150,7 @@ function createFontControls(panelInstance, panel) {
     trigger.appendChild(triggerLabel);
 
     const dropdown = document.createElement('div');
+    dropdown.id = `tpp-font-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     dropdown.className = 'font-dropdown';
     dropdown.setAttribute('role', 'listbox');
 
@@ -167,6 +204,10 @@ function createFontControls(panelInstance, panel) {
     panelInstance.fontDropdown = dropdown;
     panelInstance._fontSelectWrapper = fontWrapper;
 
+    const fontSeparator = document.createElement('div');
+    fontSeparator.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
+    panel.appendChild(fontSeparator);
+
     const fontSizeWrapper = document.createElement('div');
     fontSizeWrapper.className = 'font-size-wrapper';
 
@@ -201,8 +242,14 @@ function createFontControls(panelInstance, panel) {
 
     panel.appendChild(fontSizeWrapper);
 
+    const colorSeparator = document.createElement('div');
+    colorSeparator.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
+    panel.appendChild(colorSeparator);
+
     createCompactColorSelector(panelInstance, panel);
 
+    createCompactHighlightSelector(panelInstance, panel);
+
     createCompactBackgroundSelector(panelInstance, panel);
 
     const mdSeparator = document.createElement('div');
@@ -227,6 +274,8 @@ function createFontControls(panelInstance, panel) {
     panel.appendChild(mdLabel);
 
     createTextFormatControls(panelInstance, panel);
+
+    createTextLockMoreControls(panelInstance, panel);
 }
 
 function createCompactColorSelector(panelInstance, panel) {
@@ -234,7 +283,6 @@ function createCompactColorSelector(panelInstance, panel) {
     colorSelectorContainer.style.cssText = `
         position: relative;
         display: inline-block;
-        margin-left: 4px;
     `;
     panelInstance._colorSelectorContainer = colorSelectorContainer;
 
@@ -243,7 +291,26 @@ function createCompactColorSelector(panelInstance, panel) {
     panelInstance.currentColorButton.title = 'Выбрать цвет';
     panelInstance.currentColorButton.className = 'current-color-button';
 
+    const colorIcon = document.createElement('span');
+    colorIcon.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5636 13.9875L12 5L15.4364 13.9875"></path><path d="M9.88525 10.8155H14.1147"></path></svg>';
+    colorIcon.style.cssText = 'width: 24px; height: 24px; pointer-events: none; display: flex; align-items: center; justify-content: center;';
+
+    panelInstance.colorIndicator = document.createElement('div');
+    panelInstance.colorIndicator.style.cssText = `
+        width: 18px;
+        height: 5px;
+        position: absolute;
+        bottom: 2px;
+        background: rgb(255, 235, 164);
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
+        border-radius: 2px;
+    `;
+
+    panelInstance.currentColorButton.appendChild(colorIcon);
+    panelInstance.currentColorButton.appendChild(panelInstance.colorIndicator);
+
     panelInstance.colorDropdown = document.createElement('div');
+    panelInstance.colorDropdown.id = `tpp-color-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     panelInstance.colorDropdown.style.cssText = `
         position: absolute;
         top: 100%;
@@ -255,7 +322,7 @@ function createCompactColorSelector(panelInstance, panel) {
         padding: 8px;
         display: none;
         z-index: 10000;
-        min-width: 200px;
+        width: max-content;
     `;
 
     createColorGrid(panelInstance, panelInstance.colorDropdown);
@@ -356,6 +423,178 @@ function createColorGrid(panelInstance, container) {
     container.appendChild(customContainer);
 }
 
+function createCompactHighlightSelector(panelInstance, panel) {
+    const highlightSelectorContainer = document.createElement('div');
+    highlightSelectorContainer.style.cssText = `
+        position: relative;
+        display: inline-block;
+        margin-left: 4px;
+    `;
+    panelInstance._highlightSelectorContainer = highlightSelectorContainer;
+
+    panelInstance.currentHighlightButton = document.createElement('button');
+    panelInstance.currentHighlightButton.type = 'button';
+    panelInstance.currentHighlightButton.title = 'Выбрать цвет фона текста';
+    panelInstance.currentHighlightButton.className = 'current-highlight-button';
+
+    const highlightIcon = document.createElement('span');
+    highlightIcon.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.431 13.4828L17.5 6.27586L15.2241 4L8.01724 10.069M11.431 13.4828L6.5 15L8.01724 10.069M11.431 13.4828L8.01724 10.069" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+    highlightIcon.style.cssText = 'width: 24px; height: 24px; pointer-events: none; display: flex; align-items: center; justify-content: center;';
+
+    panelInstance.highlightIndicator = document.createElement('div');
+    panelInstance.highlightIndicator.style.cssText = `
+        width: 18px;
+        height: 5px;
+        position: absolute;
+        bottom: 2px;
+        background: transparent;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
+        border-radius: 2px;
+    `;
+
+    panelInstance.currentHighlightButton.appendChild(highlightIcon);
+    panelInstance.currentHighlightButton.appendChild(panelInstance.highlightIndicator);
+
+    panelInstance.highlightDropdown = document.createElement('div');
+    panelInstance.highlightDropdown.id = `tpp-highlight-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+    panelInstance.highlightDropdown.style.cssText = `
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        padding: 8px;
+        display: none;
+        z-index: 10000;
+        width: max-content;
+    `;
+
+    createHighlightColorGrid(panelInstance, panelInstance.highlightDropdown);
+
+    highlightSelectorContainer.appendChild(panelInstance.currentHighlightButton);
+    highlightSelectorContainer.appendChild(panelInstance.highlightDropdown);
+    panel.appendChild(highlightSelectorContainer);
+}
+
+function createHighlightColorGrid(panelInstance, container) {
+    const presetsGrid = document.createElement('div');
+    presetsGrid.style.cssText = `
+        display: grid;
+        grid-template-columns: repeat(6, 28px);
+        gap: 6px;
+        margin-bottom: 8px;
+        align-items: center;
+        justify-items: center;
+    `;
+
+    panelInstance._highlightPresetButtons = [];
+
+    BACKGROUND_COLOR_PRESETS.forEach((preset) => {
+        const colorButton = document.createElement('button');
+        colorButton.type = 'button';
+        colorButton.title = preset.name;
+        colorButton.dataset.colorValue = preset.color;
+
+        if (preset.color === 'transparent') {
+            colorButton.style.cssText = `
+                width: 28px;
+                height: 28px;
+                border: 1px solid #ddd;
+                border-radius: 50%;
+                background: white;
+                cursor: pointer;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                position: relative;
+            `;
+
+            const img = document.createElement('img');
+            img.src = '/icons/no-color.svg';
+            img.className = 'no-color-icon';
+            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
+            colorButton.appendChild(img);
+        } else {
+            colorButton.style.cssText = `
+                width: 28px;
+                height: 28px;
+                border: 1px solid #ddd;
+                border-radius: 50%;
+                background-color: ${preset.color};
+                cursor: pointer;
+                margin: 0;
+                padding: 0;
+                display: block;
+                box-sizing: border-box;
+                ${preset.color === '#ffffff' ? 'border-color: #ccc;' : ''}
+                position: relative;
+            `;
+
+            const tick = document.createElement('i');
+            tick.style.cssText = `
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 8px;
+                height: 5px;
+                transform: translate(-50%, -50%) rotate(315deg) scaleX(-1);
+                border-right: 2px solid #111;
+                border-bottom: 2px solid #111;
+                display: none;
+                pointer-events: none;
+            `;
+            colorButton.appendChild(tick);
+        }
+
+        presetsGrid.appendChild(colorButton);
+        panelInstance._highlightPresetButtons.push(colorButton);
+    });
+
+    container.appendChild(presetsGrid);
+
+    const separator = document.createElement('div');
+    separator.style.cssText = `
+        height: 1px;
+        background: #eee;
+        margin: 8px 0;
+    `;
+    container.appendChild(separator);
+
+    const customContainer = document.createElement('div');
+    customContainer.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    `;
+
+    const customLabel = document.createElement('span');
+    customLabel.textContent = 'Свой цвет:';
+    customLabel.style.cssText = `
+        font-size: 12px;
+        color: #666;
+    `;
+
+    panelInstance.highlightInput = document.createElement('input');
+    panelInstance.highlightInput.type = 'color';
+    panelInstance.highlightInput.style.cssText = `
+        width: 32px;
+        height: 24px;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        cursor: pointer;
+        padding: 0;
+    `;
+
+    customContainer.appendChild(customLabel);
+    customContainer.appendChild(panelInstance.highlightInput);
+    container.appendChild(customContainer);
+}
+
 function createCompactBackgroundSelector(panelInstance, panel) {
     const bgSelectorContainer = document.createElement('div');
     bgSelectorContainer.style.cssText = `
@@ -371,6 +610,7 @@ function createCompactBackgroundSelector(panelInstance, panel) {
     panelInstance.currentBgColorButton.className = 'current-bgcolor-button';
 
     panelInstance.bgColorDropdown = document.createElement('div');
+    panelInstance.bgColorDropdown.id = `tpp-bgcolor-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     panelInstance.bgColorDropdown.style.cssText = `
         position: absolute;
         top: 100%;
@@ -382,7 +622,7 @@ function createCompactBackgroundSelector(panelInstance, panel) {
         padding: 8px;
         display: none;
         z-index: 10000;
-        min-width: 200px;
+        width: max-content;
     `;
 
     createBackgroundColorGrid(panelInstance, panelInstance.bgColorDropdown);
@@ -428,14 +668,11 @@ function createBackgroundColorGrid(panelInstance, container) {
                 position: relative;
             `;
 
-            const line = document.createElement('div');
-            line.style.cssText = `
-                width: 20px;
-                height: 1px;
-                background: #ff0000;
-                transform: rotate(45deg);
-            `;
-            colorButton.appendChild(line);
+            const img = document.createElement('img');
+            img.src = '/icons/no-color.svg';
+            img.className = 'no-color-icon';
+            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
+            colorButton.appendChild(img);
         } else {
             colorButton.style.cssText = `
                 width: 28px;

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

@@ -9,6 +9,9 @@ export function createTextPropertiesPanelState() {
         currentColorButton: null,
         colorDropdown: null,
         colorInput: null,
+        currentHighlightButton: null,
+        highlightDropdown: null,
+        highlightInput: null,
         currentBgColorButton: null,
         bgColorDropdown: null,
         bgColorInput: null,
@@ -24,10 +27,13 @@ export function createTextPropertiesPanelState() {
         _eventBridgeAttached: false,
         _eventBridgeHandlers: null,
         _colorSelectorContainer: null,
+        _highlightSelectorContainer: null,
         _bgSelectorContainer: null,
         _colorPresetButtons: [],
+        _highlightPresetButtons: [],
         _bgPresetButtons: [],
         _onColorDocumentClick: null,
+        _onHighlightDocumentClick: null,
         _onBgDocumentClick: null,
         _docMouseDownAttached: false,
     };