@sequent-org/moodboard 1.4.55 → 1.4.57

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

@@ -0,0 +1,255 @@
+import { getObjectProperties } from './TextPropertiesPanelMapper.js';
+
+const ICON_LINK = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="display:block;"><path d="M10.5893 15.3024L9.4108 16.4809C7.78361 18.1081 5.14542 18.1081 3.51824 16.4809C1.89106 14.8537 1.89106 12.2155 3.51824 10.5883L4.69675 9.40982M15.3034 10.5883L16.4819 9.40982C18.109 7.78264 18.109 5.14445 16.4819 3.51726C14.8547 1.89008 12.2165 1.89008 10.5893 3.51726L9.4108 4.69577M7.08339 12.9157L12.9167 7.08239"></path></svg>`;
+
+/**
+ * Создаёт кнопку «Ссылка» с всплывающей формой ввода URL.
+ *
+ * Поведение:
+ * - Кнопка disabled пока у объекта выключен MD-режим.
+ * - Клик сохраняет selection в textarea, показывает форму рядом с textarea.
+ * - Сабмит: если было выделение — [selected](url), иначе [весь текст](url).
+ * - Автоматически добавляет https:// если схема не указана.
+ * - Enter = OK, Esc = отмена, клик вне = отмена.
+ *
+ * @param {object} panelInstance - экземпляр TextPropertiesPanel
+ * @returns {HTMLButtonElement} кнопка для вставки в панель
+ */
+export function createLinkButton(panelInstance) {
+    const btn = document.createElement('button');
+    btn.className = 'ipp-btn tpp-link-btn';
+    btn.title = 'Добавить ссылку';
+    btn.id = 'tpp-btn-link';
+    btn.dataset.id = 'tpp-btn-link';
+    btn.disabled = false;
+    btn.innerHTML = ICON_LINK;
+
+    btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        _openLinkForm(panelInstance, btn);
+    });
+
+    panelInstance._tppBtnLink = btn;
+    return btn;
+}
+
+/**
+ * Обновляет disabled-состояние кнопки в зависимости от MD-флага объекта.
+ * При включённом MD-режиме кнопка недоступна — ссылки добавляются markdown-синтаксисом вручную.
+ * Вызывается из TextPropertiesPanelBindings при смене markdownToggle.
+ */
+export function updateLinkButtonState(panelInstance, isMarkdown) {
+    if (!panelInstance._tppBtnLink) return;
+    const btn = panelInstance._tppBtnLink;
+    btn.disabled = isMarkdown;
+    btn.title = isMarkdown
+        ? 'Ссылки в MD-режиме добавляются через синтаксис [текст](url)'
+        : 'Добавить ссылку к тексту';
+    btn.classList.toggle('tpp-link-btn--disabled', isMarkdown);
+}
+
+function _getActiveTextarea(panelInstance) {
+    return panelInstance.core?.selectTool?.textEditor?.textarea ?? null;
+}
+
+function _normalizeUrl(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed) return '';
+    if (/^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed)) return trimmed;
+    return 'https://' + trimmed;
+}
+
+function _openLinkForm(panelInstance, triggerBtn) {
+    // Закрываем предыдущую форму, если она уже открыта
+    _closeExistingForm();
+
+    const textarea = _getActiveTextarea(panelInstance);
+
+    // Запоминаем id выделенного объекта ДО показа формы — фокус ухода в URL-input
+    // или клик мимо canvas может сбросить выделение и panelInstance.currentId станет null
+    const savedObjectId = panelInstance.currentId;
+
+    // Запоминаем выделение ДО показа формы (фокус уйдёт на input)
+    let savedStart = 0;
+    let savedEnd = 0;
+    let savedText = '';
+    if (textarea) {
+        savedStart = textarea.selectionStart ?? 0;
+        savedEnd = textarea.selectionEnd ?? 0;
+        savedText = textarea.value ?? '';
+    } else {
+        // Объект только выделен (без активного редактора) — применяем ссылку ко всему содержимому
+        const props = getObjectProperties(panelInstance.eventBus, savedObjectId);
+        savedText = props?.content ?? '';
+    }
+    const hasSelection = savedEnd > savedStart;
+
+    const form = _buildForm(panelInstance, textarea, {
+        savedStart,
+        savedEnd,
+        savedText,
+        hasSelection,
+        triggerBtn,
+        savedObjectId,
+    });
+
+    document.body.appendChild(form);
+
+    // Позиционируем форму рядом с textarea или рядом с кнопкой
+    _positionForm(form, textarea, triggerBtn);
+
+    const urlInput = form.querySelector('.tpp-link-input');
+    urlInput.focus();
+
+    // Закрытие по клику вне формы
+    const closeOnOutside = (ev) => {
+        if (!form.contains(ev.target) && ev.target !== triggerBtn) {
+            _closeForm(form, closeOnOutside);
+        }
+    };
+    setTimeout(() => document.addEventListener('mousedown', closeOnOutside), 0);
+    form._closeOnOutside = closeOnOutside;
+}
+
+function _buildForm(panelInstance, textarea, ctx) {
+    const { savedStart, savedEnd, savedText, hasSelection, triggerBtn, savedObjectId } = ctx;
+
+    const form = document.createElement('div');
+    form.className = 'tpp-link-form';
+    form.id = 'tpp-link-form-active';
+
+    const label = document.createElement('span');
+    label.className = 'tpp-link-form-label';
+    label.textContent = hasSelection ? `Ссылка для «${_truncate(savedText.slice(savedStart, savedEnd), 24)}»` : 'URL ссылки';
+    form.appendChild(label);
+
+    const row = document.createElement('div');
+    row.className = 'tpp-link-form-row';
+
+    const urlInput = document.createElement('input');
+    urlInput.type = 'url';
+    urlInput.placeholder = 'https://example.com';
+    urlInput.className = 'tpp-link-input';
+    urlInput.autocomplete = 'url';
+
+    const okBtn = document.createElement('button');
+    okBtn.type = 'button';
+    okBtn.className = 'tpp-link-form-ok';
+    okBtn.textContent = 'OK';
+
+    row.appendChild(urlInput);
+    row.appendChild(okBtn);
+    form.appendChild(row);
+
+    const submit = () => {
+        const url = _normalizeUrl(urlInput.value);
+        if (!url) {
+            urlInput.classList.add('tpp-link-input--error');
+            urlInput.focus();
+            return;
+        }
+        urlInput.classList.remove('tpp-link-input--error');
+
+        // Запись ссылки как диапазона в properties.links (не markdown-синтаксис).
+        // objectId передаём явно — currentId на панели мог сброситься, пока пользователь
+        // печатал URL и фокус был в input.
+        if (typeof panelInstance._addLink === 'function') {
+            const contentLen = (savedText || '').length;
+            const start = hasSelection ? savedStart : 0;
+            const end = hasSelection ? savedEnd : contentLen;
+            panelInstance._addLink(url, start, end, savedObjectId);
+        }
+
+        _closeForm(form, form._closeOnOutside);
+        // Возвращаем фокус в textarea
+        if (textarea) {
+            try { textarea.focus(); } catch (_) {}
+        }
+    };
+
+    urlInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); submit(); }
+        if (e.key === 'Escape') { e.preventDefault(); _closeForm(form, form._closeOnOutside); }
+        urlInput.classList.remove('tpp-link-input--error');
+    });
+
+    okBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        submit();
+    });
+
+    return form;
+}
+
+function _insertLink(textarea, { savedStart, savedEnd, savedText, hasSelection, url }) {
+    let newValue;
+    let newCursorPos;
+
+    if (hasSelection) {
+        const selected = savedText.slice(savedStart, savedEnd);
+        const mdLink = `[${selected}](${url})`;
+        newValue = savedText.slice(0, savedStart) + mdLink + savedText.slice(savedEnd);
+        newCursorPos = savedStart + mdLink.length;
+    } else {
+        const allText = savedText || url;
+        const mdLink = `[${allText}](${url})`;
+        newValue = mdLink;
+        newCursorPos = mdLink.length;
+    }
+
+    textarea.value = newValue;
+    textarea.setSelectionRange(newCursorPos, newCursorPos);
+
+    // Сигналим autoSize и commit-пайплайну
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function _positionForm(form, textarea, triggerBtn) {
+    // Временно делаем видимым для измерения
+    form.style.visibility = 'hidden';
+    form.style.display = 'flex';
+
+    const anchor = textarea ?? triggerBtn;
+    const rect = anchor.getBoundingClientRect();
+    const formH = form.offsetHeight || 80;
+    const winH = window.innerHeight;
+
+    let top;
+    if (rect.bottom + formH + 8 < winH) {
+        top = rect.bottom + 8;
+    } else {
+        top = rect.top - formH - 8;
+    }
+
+    const left = Math.max(8, Math.min(rect.left, window.innerWidth - 280));
+
+    form.style.top = `${Math.round(top)}px`;
+    form.style.left = `${Math.round(left)}px`;
+    form.style.visibility = '';
+}
+
+function _closeForm(form, outsideHandler) {
+    if (outsideHandler) {
+        document.removeEventListener('mousedown', outsideHandler);
+    }
+    if (form && form.parentNode) {
+        form.parentNode.removeChild(form);
+    }
+}
+
+function _closeExistingForm() {
+    const existing = document.getElementById('tpp-link-form-active');
+    if (existing) {
+        if (existing._closeOnOutside) {
+            document.removeEventListener('mousedown', existing._closeOnOutside);
+        }
+        existing.parentNode?.removeChild(existing);
+    }
+}
+
+function _truncate(str, max) {
+    if (str.length <= max) return str;
+    return str.slice(0, max) + '…';
+}

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

@@ -0,0 +1,173 @@
+import { Events } from '../../core/events/Events.js';
+import { createLinkButton } from './TextLinkControl.js';
+
+const ICON_LOCK = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path d="M7.75008 10.5V10.3427C7.75008 8.78147 7.65615 7.04125 8.74654 5.9239C9.36837 5.2867 10.3746 4.75 12.0001 4.75C13.6256 4.75 14.6318 5.2867 15.2536 5.9239C16.344 7.04125 16.2501 8.78147 16.2501 10.3427V10.5"></path><path d="M12 14.25L12 15.75"></path></svg>`;
+const ICON_UNLOCK = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path d="M7.74972 10.5V9.84343C7.74972 8.61493 7.70065 7.29883 8.42388 6.30578C8.99834 5.51699 10.0565 4.75 11.9997 4.75C13.9997 4.75 15.2497 6.25 15.2497 6.25"></path><path d="M12 14.25L12 15.75"></path></svg>`;
+const ICON_MORE = `<svg width="24" height="24" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M16.2246 12.375C16.984 12.375 17.5996 11.7594 17.5996 11C17.5996 10.2406 16.984 9.625 16.2246 9.625C15.4652 9.625 14.8496 10.2406 14.8496 11C14.8496 11.7594 15.4652 12.375 16.2246 12.375Z"></path><path d="M11 12.375C11.7594 12.375 12.375 11.7594 12.375 11C12.375 10.2406 11.7594 9.625 11 9.625C10.2406 9.625 9.625 10.2406 9.625 11C9.625 11.7594 10.2406 12.375 11 12.375Z"></path><path d="M5.77539 12.375C6.53478 12.375 7.15039 11.7594 7.15039 11C7.15039 10.2406 6.53478 9.625 5.77539 9.625C5.016 9.625 4.40039 10.2406 4.40039 11C4.40039 11.7594 5.016 12.375 5.77539 12.375Z"></path></svg>`;
+const ICON_COMMENT = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`;
+
+/**
+ * Добавляет к text-properties-panel кнопку lock + кнопку more с дропдауном.
+ * Поведение идентично lock / more в ImagePropertiesPanel; идентификаторы с префиксом tpp-.
+ */
+export function createTextLockMoreControls(panelInstance, panel) {
+    // Все уже добавленные дочерние элементы скрываются при locked
+    panelInstance._lockableEls = Array.from(panel.children);
+    panelInstance._tppLockIcon = ICON_LOCK;
+    panelInstance._tppUnlockIcon = ICON_UNLOCK;
+
+    const linkBtn = createLinkButton(panelInstance);
+    panel.appendChild(linkBtn);
+
+    const divider1 = document.createElement('div');
+    divider1.className = 'ipp-divider';
+    panel.appendChild(divider1);
+
+    const lockBtn = document.createElement('button');
+    lockBtn.className = 'ipp-btn';
+    lockBtn.title = 'Заблокировать';
+    lockBtn.id = 'tpp-btn-lock';
+    lockBtn.dataset.id = 'tpp-btn-lock';
+    lockBtn.innerHTML = ICON_LOCK;
+    lockBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        panelInstance._toggleLocked();
+    });
+    panel.appendChild(lockBtn);
+    panelInstance._tppBtnLock = lockBtn;
+
+    const divider = document.createElement('div');
+    divider.className = 'ipp-divider';
+    panel.appendChild(divider);
+
+    const moreWrapper = _makeMoreWrapper(panelInstance);
+    panel.appendChild(moreWrapper);
+    panelInstance._tppMoreGroup = moreWrapper;
+}
+
+function _makeMoreWrapper(panelInstance) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tpp-btn-wrapper';
+    wrapper.dataset.id = 'tpp-btn-wrapper';
+    wrapper.style.cssText = 'position:relative;display:inline-flex;';
+
+    const mainBtn = document.createElement('button');
+    mainBtn.className = 'ipp-btn';
+    mainBtn.title = 'Ещё';
+    mainBtn.id = 'tpp-btn-more';
+    mainBtn.dataset.id = 'tpp-btn-more';
+    mainBtn.innerHTML = ICON_MORE;
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'tpp-more-dropdown';
+
+    const items = [
+        { id: 'copy', label: 'Копировать', shortcut: 'Ctrl+C' },
+        { id: 'copy-link', label: 'Копировать ссылку на объект' },
+        { divider: true },
+        { id: 'bring-front', label: 'На передний план', shortcut: ']' },
+        { id: 'bring-forward', label: 'Переместить вперёд', shortcut: 'Ctrl+]' },
+        { id: 'send-backward', label: 'Переместить назад', shortcut: 'Ctrl+[' },
+        { id: 'send-back', label: 'На задний план', shortcut: '[' },
+        { divider: true },
+        { id: 'lock', label: 'Заблокировать', shortcut: 'Ctrl+Shift+L' },
+        { id: 'duplicate', label: 'Дублировать', shortcut: 'Ctrl+D' },
+        { divider: true },
+        { id: 'add-comment', label: 'Добавить комментарий', icon: ICON_COMMENT },
+        { divider: true },
+        { id: 'delete', label: 'Удалить', shortcut: 'Delete' },
+    ];
+
+    items.forEach((item) => {
+        if (item.divider) {
+            const div = document.createElement('div');
+            div.className = 'tpp-dropdown-divider';
+            dropdown.appendChild(div);
+            return;
+        }
+
+        const btn = document.createElement('button');
+        btn.className = 'tpp-dropdown-item';
+        if (item.id) btn.dataset.id = `tpp-more-${item.id}`;
+
+        if (item.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'tpp-dropdown-icon';
+            iconSpan.innerHTML = item.icon;
+            btn.appendChild(iconSpan);
+        }
+
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = item.label;
+        btn.appendChild(labelSpan);
+
+        if (item.shortcut) {
+            const shortcutSpan = document.createElement('span');
+            shortcutSpan.className = 'tpp-dropdown-item-shortcut';
+            shortcutSpan.textContent = item.shortcut;
+            btn.appendChild(shortcutSpan);
+        }
+
+        btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const { eventBus, currentId } = panelInstance;
+
+            if (item.id === 'copy') {
+                eventBus.emit(Events.Keyboard.Copy);
+            } else if (item.id === 'bring-front') {
+                if (currentId) eventBus.emit(Events.UI.LayerBringToFront, { objectId: currentId });
+            } else if (item.id === 'bring-forward') {
+                if (currentId) eventBus.emit(Events.UI.LayerBringForward, { objectId: currentId });
+            } else if (item.id === 'send-backward') {
+                if (currentId) eventBus.emit(Events.UI.LayerSendBackward, { objectId: currentId });
+            } else if (item.id === 'send-back') {
+                if (currentId) eventBus.emit(Events.UI.LayerSendToBack, { objectId: currentId });
+            } else if (item.id === 'lock') {
+                panelInstance._toggleLocked();
+            } else if (item.id === 'duplicate') {
+                panelInstance._duplicateText();
+            } else if (item.id === 'add-comment') {
+                if (currentId) eventBus.emit(Events.Comment.OpenImageDraft, { objectId: currentId });
+            } else if (item.id === 'delete') {
+                if (currentId) eventBus.emit(Events.Tool.ObjectsDelete, { objects: [currentId] });
+            }
+
+            dropdown.classList.remove('is-open');
+            mainBtn.classList.remove('is-active');
+        });
+
+        if (item.id === 'lock') {
+            panelInstance._moreLockLabel = labelSpan;
+        }
+
+        dropdown.appendChild(btn);
+    });
+
+    mainBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isOpen = dropdown.classList.contains('is-open');
+
+        document.querySelectorAll('.tpp-more-dropdown.is-open').forEach((el) => el.classList.remove('is-open'));
+        document.querySelectorAll('.ipp-btn.is-active').forEach((el) => el.classList.remove('is-active'));
+
+        if (!isOpen) {
+            const rect = mainBtn.getBoundingClientRect();
+            dropdown.style.top = (rect.bottom + 6) + 'px';
+            dropdown.style.left = (rect.right - 220) + 'px';
+            dropdown.classList.add('is-open');
+            requestAnimationFrame(() => {
+                const left = Math.max(4, rect.right - dropdown.offsetWidth);
+                dropdown.style.left = left + 'px';
+            });
+            mainBtn.classList.add('is-active');
+        }
+    });
+
+    wrapper.appendChild(mainBtn);
+    wrapper.appendChild(dropdown);
+    return wrapper;
+}

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');
@@ -7,19 +9,80 @@ function hidePresetTicks(buttons) {
     });
 }
 
+function setFontDropdownOpen(panel, isOpen) {
+    if (!panel.fontDropdown || !panel.fontSelect) {
+        return;
+    }
+    panel.fontDropdown.classList.toggle('is-open', isOpen);
+    panel.fontSelect.classList.toggle('is-active', isOpen);
+    panel.fontSelect.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+}
+
 export function bindTextPropertiesPanelControls(panel) {
     if (panel._bindingsAttached) {
         return;
     }
 
-    panel.fontSelect.addEventListener('change', (event) => {
-        panel._changeFontFamily(event.target.value);
+    panel.fontSelect.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const willOpen = !panel.fontDropdown.classList.contains('is-open');
+        setFontDropdownOpen(panel, willOpen);
     });
 
+    panel.fontSelect.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const willOpen = !panel.fontDropdown.classList.contains('is-open');
+            setFontDropdownOpen(panel, willOpen);
+        } else if (event.key === 'Escape') {
+            setFontDropdownOpen(panel, false);
+        }
+    });
+
+    panel.fontDropdown.querySelectorAll('.font-dropdown__item').forEach((item) => {
+        item.addEventListener('click', (event) => {
+            event.stopPropagation();
+            const value = item.dataset.value;
+            panel.fontSelect.value = value;
+            panel._changeFontFamily(value);
+            setFontDropdownOpen(panel, false);
+        });
+    });
+
+    panel._onFontDocumentClick = (event) => {
+        if (!panel._fontSelectWrapper || !event.target) {
+            return;
+        }
+        if (!panel._fontSelectWrapper.contains(event.target)) {
+            setFontDropdownOpen(panel, false);
+        }
+    };
+    document.addEventListener('click', panel._onFontDocumentClick);
+
     panel.fontSizeSelect.addEventListener('change', (event) => {
         panel._changeFontSize(parseInt(event.target.value, 10));
     });
 
+    if (panel.fontSizeUpBtn) {
+        panel.fontSizeUpBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex < select.options.length - 1) {
+                select.selectedIndex++;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
+    if (panel.fontSizeDownBtn) {
+        panel.fontSizeDownBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex > 0) {
+                select.selectedIndex--;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
     panel.currentColorButton.addEventListener('click', (event) => {
         event.stopPropagation();
         panel._toggleColorDropdown();
@@ -47,6 +110,35 @@ export function bindTextPropertiesPanelControls(panel) {
     };
     document.addEventListener('click', panel._onColorDocumentClick);
 
+    if (panel.currentHighlightButton) {
+        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();
@@ -77,6 +169,7 @@ export function bindTextPropertiesPanelControls(panel) {
     if (panel.markdownToggle) {
         panel.markdownToggle.addEventListener('change', (event) => {
             panel._changeMarkdown(event.target.checked);
+            updateLinkButtonState(panel, event.target.checked);
         });
     }
 
@@ -110,10 +203,20 @@ 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;
     }
 
+    if (panel._onFontDocumentClick) {
+        document.removeEventListener('click', panel._onFontDocumentClick);
+        panel._onFontDocumentClick = null;
+    }
+
     panel._bindingsAttached = false;
 }

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 },
@@ -182,6 +190,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' : '';
     }