@sequent-org/moodboard 1.4.56 → 1.4.58

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

@@ -6,10 +6,11 @@ import {
 } from './TextPropertiesPanelMapper.js';
 
 // Статичные SVG-строки (lucide-style). innerHTML допустим — это доверенные константы, не пользовательский ввод.
-const SVG_BOLD = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>';
-const SVG_ITALIC = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>';
-const SVG_UNDERLINE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>';
-const SVG_STRIKE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/></svg>';
+const SVG_TEXT_FORMAT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" type="text-format" size="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.54459 15.3341C7.52012 15.4823 7.52819 15.634 7.56823 15.7787C7.60828 15.9234 7.67935 16.0576 7.77651 16.1721C7.87366 16.2866 7.99458 16.3786 8.13085 16.4416C8.26712 16.5047 8.41548 16.5373 8.56563 16.5372H11.9587C12.8918 16.5372 13.6811 16.3966 14.3277 16.1141C14.9742 15.8286 15.4822 15.4417 15.8505 14.9566C16.2229 14.4662 16.4608 13.9138 16.5674 13.2993C16.6656 12.6755 16.6242 12.1469 16.4432 11.7124C16.2632 11.2779 16.0005 10.9417 15.657 10.7069C15.3354 10.4746 14.9536 10.3399 14.5574 10.319L14.5801 10.201C14.9567 10.1079 15.3146 9.9569 15.656 9.74897C15.9974 9.54207 16.287 9.2669 16.526 8.92552C16.7691 8.58414 16.9315 8.16414 17.0142 7.66241C17.1156 7.06655 17.0691 6.53172 16.8725 6.05793C16.676 5.58 16.3201 5.20138 15.8029 4.9231C15.2898 4.64069 14.607 4.5 13.7515 4.5H10.2208C9.97593 4.50011 9.73904 4.58708 9.55227 4.74544C9.3655 4.9038 9.24096 5.12328 9.2008 5.36483L7.54563 15.3341H7.54459ZM12.0415 14.9803H9.42011L10.0667 11.1238H12.7522C13.2384 11.1238 13.6418 11.2179 13.9625 11.4062C14.2884 11.5945 14.5201 11.8469 14.6567 12.1645C14.7974 12.4821 14.8387 12.8307 14.7808 13.2114C14.6898 13.7162 14.428 14.1372 13.9925 14.4745C13.5622 14.8117 12.9115 14.9803 12.0415 14.9803ZM12.7346 9.70759H10.3077L10.9077 6.04552H13.3874C14.1042 6.04552 14.608 6.21414 14.8977 6.55138C15.1915 6.88448 15.296 7.30138 15.2091 7.8031C15.1511 8.1869 15.0022 8.52207 14.7632 8.80862C14.5274 9.09414 14.2315 9.31552 13.8756 9.47276C13.5229 9.62897 13.1422 9.70759 12.7346 9.70759ZM6.56908 17.9483C6.3633 17.9483 6.16596 18.03 6.02046 18.1755C5.87496 18.321 5.79321 18.5184 5.79321 18.7241C5.79321 18.9299 5.87496 19.1273 6.02046 19.2728C6.16596 19.4183 6.3633 19.5 6.56908 19.5H17.4311C17.6369 19.5 17.8343 19.4183 17.9798 19.2728C18.1253 19.1273 18.207 18.9299 18.207 18.7241C18.207 18.5184 18.1253 18.321 17.9798 18.1755C17.8343 18.03 17.6369 17.9483 17.4311 17.9483H6.56908Z"></path></svg>';
+const SVG_BOLD = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.92188 12H13.1719C14.8978 12 16.2969 10.6009 16.2969 8.875C16.2969 7.14911 14.8978 5.75 13.1719 5.75H6.92188V12ZM6.92188 12H13.9531C15.679 12 17.0781 13.3991 17.0781 15.125C17.0781 16.8509 15.679 18.25 13.9531 18.25H6.92188V12Z"></path></svg>';
+const SVG_ITALIC = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M17.4688 5.75H10.4375M13.5625 18.25H6.53125M14.3438 5.75L9.65625 18.25"></path></svg>';
+const SVG_UNDERLINE = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>';
+const SVG_STRIKE = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7.3125 15.125C7.3125 16.8509 8.71161 18.25 10.4375 18.25H13.5625C15.2884 18.25 16.6875 16.8509 16.6875 15.125C16.6875 13.3991 15.2884 12 13.5625 12M16.6875 8.875C16.6875 7.14911 15.2884 5.75 13.5625 5.75H10.4375C8.71161 5.75 7.3125 7.14911 7.3125 8.875M4.96875 12H19.0312"></path></svg>';
 
 const SVG_ALIGN_LEFT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M4.75 18.2637H13.25"/><path d="M4.75 14.0879H19.25"/><path d="M4.75 9.91211L13.25 9.91211"/></svg>';
 const SVG_ALIGN_CENTER = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M7.75 18.2637H16.25"/><path d="M4.75 14.0879H19.25"/><path d="M7.75 9.91211L16.25 9.91211"/></svg>';
@@ -19,6 +20,7 @@ const SVG_ALIGN_JUSTIFY = '<svg width="24" height="24" viewBox="0 0 24 24" fill=
 const SVG_LIST_BULLET = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M4.21484 17.25C4.62906 17.25 4.96484 16.9142 4.96484 16.5C4.96484 16.0858 4.62906 15.75 4.21484 15.75C3.80063 15.75 3.46484 16.0858 3.46484 16.5C3.46484 16.9142 3.80063 17.25 4.21484 17.25ZM4.21484 11.75C4.62906 11.75 4.96484 11.4142 4.96484 11C4.96484 10.5858 4.62906 10.25 4.21484 10.25C3.80063 10.25 3.46484 10.5858 3.46484 11C3.46484 11.4142 3.80063 11.75 4.21484 11.75ZM4.21484 6.24609C4.62906 6.24609 4.96484 5.91031 4.96484 5.49609C4.96484 5.08188 4.62906 4.74609 4.21484 4.74609C3.80063 4.74609 3.46484 5.08188 3.46484 5.49609C3.46484 5.91031 3.80063 6.24609 4.21484 6.24609Z"/></svg>';
 const SVG_LIST_NUMBERED = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49505H19.2852M8.28516 10.999H19.2852M8.28516 16.4951H19.2852M3.30078 5.32812L4.67578 4.64062V9.45312M3.39531 13.2839C3.45867 13.1269 3.55438 12.9853 3.67622 12.8678C3.79808 12.7505 3.9433 12.6602 4.10242 12.6027C4.26156 12.5453 4.43101 12.5221 4.59972 12.5345C4.76844 12.547 4.93262 12.595 5.08156 12.6752C5.23049 12.7555 5.36082 12.8662 5.46407 13.0002C5.56729 13.1343 5.6411 13.2885 5.68067 13.453C5.72022 13.6175 5.72466 13.7885 5.69366 13.9549C5.66266 14.1211 5.59693 14.279 5.50078 14.4182L3.30078 17.3573H5.70703"/></svg>';
 const SVG_LIST_CHECK = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M2.9 5.2L3.9 6.2L5.7 4.2M2.9 10.7L3.9 11.7L5.7 9.7M2.9 16.2L3.9 17.2L5.7 15.2"/></svg>';
+const SVG_LINE_HEIGHT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" type="line-height-2" size="24"><path d="M6.02009 5.35419V18.6459M6.02009 5.35419L8.77156 8.10419M6.02009 5.35419L3.27156 8.10419M6.02009 18.6459L3.26862 15.8959M6.02009 18.6459L8.76862 15.8959" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.6112 13.2205H18.9513M11.8311 17.481L15.633 7.47121C15.839 6.92904 15.9419 6.65795 16.0846 6.57385C16.2086 6.50077 16.3539 6.50077 16.4779 6.57385C16.6206 6.65795 16.7235 6.92904 16.9295 7.47121L20.7314 17.481" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
 function makeSep() {
     const d = document.createElement('div');
@@ -57,6 +59,7 @@ function makeListButtons() {
     triggerBtn.innerHTML = SVG_LIST_BULLET;
 
     const modal = document.createElement('div');
+    modal.id = `tpp-list-modal-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     modal.className = 'tpp-list-modal';
     modal.style.display = 'none';
 
@@ -161,6 +164,7 @@ function makeAlignButtons() {
 
     // Модальный попап
     const modal = document.createElement('div');
+    modal.id = `tpp-align-modal-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     modal.className = 'tpp-align-modal';
     modal.style.display = 'none';
 
@@ -248,33 +252,86 @@ function makeAlignButtons() {
     return proxy;
 }
 
-export function createTextFormatControls(panelInstance, panel) {
-    panel.appendChild(makeSep());
+function makeFormatButtons(panelInstance) {
+    const container = document.createElement('div');
+    container.className = 'tpp-format-btns-wrapper';
+    container.style.position = 'relative';
+    container.style.display = 'flex';
+
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.title = 'Форматирование текста';
+    triggerBtn.className = 'tpp-format-btn tpp-format-trigger';
+    triggerBtn.innerHTML = SVG_TEXT_FORMAT;
+
+    const modal = document.createElement('div');
+    modal.id = `tpp-format-modal-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+    modal.className = 'tpp-format-modal';
+    modal.style.display = 'none';
 
     panelInstance.boldBtn = makeToggleBtn(SVG_BOLD, 'Жирный', 'bold');
     panelInstance.italicBtn = makeToggleBtn(SVG_ITALIC, 'Курсив', 'italic');
     panelInstance.underlineBtn = makeToggleBtn(SVG_UNDERLINE, 'Подчёркнутый', 'underline');
     panelInstance.strikethroughBtn = makeToggleBtn(SVG_STRIKE, 'Зачёркнутый', 'strikethrough');
 
-    [panelInstance.boldBtn, panelInstance.italicBtn, panelInstance.underlineBtn, panelInstance.strikethroughBtn].forEach(
-        (btn) => panel.appendChild(btn),
-    );
+    const btns = [
+        panelInstance.boldBtn,
+        panelInstance.italicBtn,
+        panelInstance.underlineBtn,
+        panelInstance.strikethroughBtn
+    ];
 
-    panel.appendChild(makeSep());
+    btns.forEach((btn) => {
+        btn.classList.add('tpp-format-modal-option');
+        modal.appendChild(btn);
+    });
 
-    panelInstance.alignControl = makeAlignButtons();
-    panel.appendChild(panelInstance.alignControl._container);
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
 
-    panelInstance.listControl = makeListButtons();
-    panel.appendChild(panelInstance.listControl._container);
+    function openModal() {
+        modal.style.display = 'flex';
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
 
-    panel.appendChild(makeSep());
+    function closeModal() {
+        modal.style.display = 'none';
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
+    });
+
+    return container;
+}
+
+function makeLineHeightControl(panelInstance) {
+    const container = document.createElement('div');
+    container.className = 'tpp-lh-control';
+
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.title = 'Межстрочный интервал';
+    triggerBtn.className = 'tpp-format-btn';
+    triggerBtn.innerHTML = SVG_LINE_HEIGHT;
 
-    const lhLabel = document.createElement('span');
-    lhLabel.className = 'tpp-label';
-    lhLabel.title = 'Межстрочный интервал';
-    lhLabel.textContent = '↕';
-    panel.appendChild(lhLabel);
+    const modal = document.createElement('div');
+    modal.className = 'tpp-lh-modal';
+    modal.style.display = 'none';
 
     panelInstance.lineHeightSlider = document.createElement('input');
     panelInstance.lineHeightSlider.type = 'range';
@@ -283,5 +340,59 @@ export function createTextFormatControls(panelInstance, panel) {
     panelInstance.lineHeightSlider.max = String(LINE_HEIGHT_MAX);
     panelInstance.lineHeightSlider.step = String(LINE_HEIGHT_STEP);
     panelInstance.lineHeightSlider.value = String(LINE_HEIGHT_DEFAULT);
-    panel.appendChild(panelInstance.lineHeightSlider);
+
+    modal.appendChild(panelInstance.lineHeightSlider);
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
+
+    function openModal() {
+        modal.style.display = 'flex';
+        triggerBtn.classList.add('is-active');
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        triggerBtn.classList.remove('is-active');
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
+    });
+
+    return container;
+}
+
+export function createTextFormatControls(panelInstance, panel) {
+    panel.appendChild(makeSep());
+
+    const formatButtonsWrapper = makeFormatButtons(panelInstance);
+    panel.appendChild(formatButtonsWrapper);
+
+    panelInstance.alignControl = makeAlignButtons();
+    panel.appendChild(panelInstance.alignControl._container);
+
+    panelInstance.listControl = makeListButtons();
+    panel.appendChild(panelInstance.listControl._container);
+
+    panel.appendChild(makeSep());
+
+    const lhControl = makeLineHeightControl(panelInstance);
+    panel.appendChild(lhControl);
+
+    panel.appendChild(makeSep());
 }

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