@sequent-org/moodboard 1.4.56 → 1.4.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.56",
+  "version": "1.4.57",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/commands/PasteObjectCommand.js

@@ -87,7 +87,13 @@ export class PasteObjectCommand extends BaseCommand {
         
         // Создаем PIXI объект
         this.coreMoodboard.pixi.createObject(this.newObjectData);
-        
+
+        // Уведомляем слои (HtmlTextLayer и др.), которые ждут { objectId, objectData }
+        this.coreMoodboard.eventBus.emit(Events.Object.Created, {
+            objectId: this.newObjectId,
+            objectData: this.newObjectData,
+        });
+
         this.emit(Events.Object.Pasted, {
             originalId: originalData.id,
             newId: this.newObjectId,

package/src/core/commands/UpdateContentCommand.js

@@ -47,6 +47,14 @@ export class UpdateContentCommand extends BaseCommand {
             if (!object.properties) {
                 object.properties = {};
             }
+            // Пересчитываем диапазоны ссылок при изменении контента
+            if (Array.isArray(object.properties.links) && object.properties.links.length > 0) {
+                object.properties.links = _adjustLinks(
+                    object.properties.links,
+                    object.properties.content ?? '',
+                    content
+                );
+            }
             object.properties.content = content;
 
             const isMindmap = object.type === 'mindmap';
@@ -93,3 +101,44 @@ export class UpdateContentCommand extends BaseCommand {
         });
     }
 }
+
+/**
+ * Пересчитывает диапазоны ссылок после изменения контента.
+ * Алгоритм: находим наибольший общий префикс и суффикс, определяем
+ * изменённый диапазон; ссылки внутри него удаляем, за ним — сдвигаем.
+ * @param {Array<{start:number,end:number,url:string}>} links
+ * @param {string} oldText
+ * @param {string} newText
+ * @returns {Array<{start:number,end:number,url:string}>}
+ */
+function _adjustLinks(links, oldText, newText) {
+    if (!links || links.length === 0) return links;
+
+    let prefixLen = 0;
+    const minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText[prefixLen] === newText[prefixLen]) prefixLen++;
+
+    let oldSuffix = 0;
+    while (
+        oldSuffix < oldText.length - prefixLen &&
+        oldSuffix < newText.length - prefixLen &&
+        oldText[oldText.length - 1 - oldSuffix] === newText[newText.length - 1 - oldSuffix]
+    ) oldSuffix++;
+
+    const oldChangeEnd = oldText.length - oldSuffix; // конец изменённого диапазона в старом тексте
+    const newChangeEnd = newText.length - oldSuffix;  // конец изменённого диапазона в новом тексте
+    const delta = newChangeEnd - oldChangeEnd;         // сдвиг для символов после изменения
+
+    return links.reduce((acc, link) => {
+        const { start, end, url } = link;
+        if (end <= prefixLen) {
+            // Ссылка полностью в неизменённом префиксе — оставляем
+            acc.push({ start, end, url });
+        } else if (start >= oldChangeEnd) {
+            // Ссылка полностью после изменения — сдвигаем
+            acc.push({ start: start + delta, end: end + delta, url });
+        }
+        // Ссылка перекрывает изменённый диапазон — удаляем (стала некорректной)
+        return acc;
+    }, []);
+}

package/src/core/flows/ObjectLifecycleFlow.js

@@ -309,7 +309,16 @@ export function setupObjectLifecycleFlow(core) {
         const objects = core.state.getObjects();
         const object = objects.find(obj => obj.id === data.objectId);
         if (object) {
-            data.size = { width: object.width, height: object.height };
+            let w = object.width;
+            let h = object.height;
+            if (typeof w !== 'number' || typeof h !== 'number') {
+                const pixiObj = core.pixi.objects.get(data.objectId);
+                if (pixiObj) {
+                    if (typeof w !== 'number') w = pixiObj.width;
+                    if (typeof h !== 'number') h = pixiObj.height;
+                }
+            }
+            data.size = { width: w, height: h };
         }
     });
 

package/src/initNoBundler.js

@@ -203,9 +203,9 @@ export function injectCriticalStyles() {
             min-height: 20px;
         }
         
-        .current-color-button, .current-bgcolor-button, .fpp-color-button {
-            width: 28px !important;
-            height: 28px !important;
+        .current-color-button, .fpp-color-button {
+            width: 24px !important;
+            height: 24px !important;
             border: 1px solid #ddd;
             border-radius: 50%;
             cursor: pointer;
@@ -214,6 +214,18 @@ export function injectCriticalStyles() {
             display: block;
             box-sizing: border-box;
         }
+
+        .current-bgcolor-button {
+            width: 20px !important;
+            height: 20px !important;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            margin: 0;
+            padding: 0;
+            display: block;
+            box-sizing: border-box;
+        }
         
         /* Скрыть до полной загрузки стилей */
         .moodboard-toolbar__popup {
@@ -358,7 +370,7 @@ export function forceInjectPanelStyles() {
         .font-select { min-width: 110px !important; }
         .font-size-select { min-width: 32px !important; }
         
-        .current-color-button, .current-bgcolor-button, .fpp-color-button {
+        .current-color-button, .fpp-color-button {
             width: 28px !important;
             height: 28px !important;
             border: 1px solid #ddd !important;
@@ -369,6 +381,18 @@ export function forceInjectPanelStyles() {
             display: block !important;
             box-sizing: border-box !important;
         }
+
+        .current-bgcolor-button {
+            width: 20px !important;
+            height: 20px !important;
+            border: none !important;
+            border-radius: 50% !important;
+            cursor: pointer !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            display: block !important;
+            box-sizing: border-box !important;
+        }
     `;
 
     const style = document.createElement('style');

package/src/tools/object-tools/selection/SelectInputRouter.js

@@ -1,7 +1,7 @@
 import { Events } from '../../../core/events/Events.js';
 
 const DRAG_START_THRESHOLD_PX = 4;
-const TEXT_EDITOR_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'backgroundColor', 'markdown', 'bold', 'italic', 'underline', 'strikethrough', 'textAlign', 'lineHeight', 'listType', 'listChecked'];
+const TEXT_EDITOR_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'highlightColor', 'backgroundColor', 'markdown', 'bold', 'italic', 'underline', 'strikethrough', 'textAlign', 'lineHeight', 'listType', 'listChecked'];
 
 function pickTextEditorProperties(properties = {}) {
     const picked = {};

package/src/tools/object-tools/selection/TextEditorInteractionController.js

@@ -92,7 +92,9 @@ export function createTextEditorFinalize(controller, {
                 const scaleX = worldLayerRef?.scale?.x || 1;
                 const viewResLocal = (controller.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
                 const wPx = Math.max(1, wrapper.offsetWidth);
-                const hPx = Math.max(1, wrapper.offsetHeight);
+                const _taStyle = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+                const _taPaddingV = _taStyle ? (parseFloat(_taStyle.paddingTop) || 0) + (parseFloat(_taStyle.paddingBottom) || 0) : 0;
+                const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV);
                 const newW = Math.max(1, Math.round(wPx * viewResLocal / scaleX));
                 const newH = Math.max(1, Math.round(hPx * viewResLocal / scaleX));
                 const sizeReq = { objectId, size: null };
@@ -135,14 +137,22 @@ export function createTextEditorFinalize(controller, {
             const worldLayerRef = controller.textEditor.world || (controller.app?.stage);
             const scaleX = worldLayerRef?.scale?.x || 1;
             const wPx = Math.max(1, wrapper.offsetWidth);
-            const hPx = Math.max(1, wrapper.offsetHeight);
+            const _taStyle2 = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+            const _taPaddingV2 = _taStyle2 ? (parseFloat(_taStyle2.paddingTop) || 0) + (parseFloat(_taStyle2.paddingBottom) || 0) : 0;
+            const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV2);
             const wWorld = Math.max(1, Math.round(wPx * viewRes / scaleX));
             const hWorld = Math.max(1, Math.round(hPx * viewRes / scaleX));
             controller.eventBus.emit(Events.UI.ToolbarAction, {
                 type: objectType,
                 id: objectType,
                 position: { x: position.x, y: position.y },
-                properties: { content: value, fontSize, width: wWorld, height: hWorld },
+                properties: { 
+                    content: value, 
+                    fontSize, 
+                    width: wWorld, 
+                    height: hWorld,
+                    highlightColor: properties.highlightColor
+                },
             });
         } else {
             if (isNewCreation) {
@@ -377,14 +387,18 @@ export function closeTextEditorFromState(controller, commit) {
         }
         return;
     }
-    if (objectId == null) {
-        controller.eventBus.emit(Events.UI.ToolbarAction, {
-            type: objectType,
-            id: objectType,
-            position: { x: position.x, y: position.y },
-            properties: { content: value, fontSize: properties.fontSize },
-        });
-    } else {
+        if (objectId == null) {
+            controller.eventBus.emit(Events.UI.ToolbarAction, {
+                type: objectType,
+                id: objectType,
+                position: { x: position.x, y: position.y },
+                properties: { 
+                    content: value, 
+                    fontSize: properties.fontSize,
+                    highlightColor: properties.highlightColor
+                },
+            });
+        } else {
         if (isNewCreation) {
             const oldContent = typeof initialContent === 'string' ? initialContent : '';
             controller.eventBus.emit(Events.Object.ContentChange, {

package/src/tools/object-tools/selection/TextInlineEditorController.js

@@ -437,7 +437,7 @@ export function openTextEditor(object, create = false) {
         // +25% — запас на Caveat vs Arial: при незагруженном Caveat span рендерится в Arial,
         // а Caveat (рукописный шрифт) заметно шире для кириллицы.
         const startWidth = Math.max(1, Math.ceil(measureTextEditorPlaceholderWidth(textarea, 'Напишите что-нибудь') * 1.25));
-        const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 10); // +5px сверху и +5px снизу
+        const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 2); // +1px сверху и +1px снизу (паддинги textarea)
         textarea.style.width = `${startWidth}px`;
         textarea.style.height = `${startHeight}px`;
         wrapper.style.width = `${startWidth}px`;
@@ -502,7 +502,7 @@ export function openTextEditor(object, create = false) {
         wrapper,
         world: this.textEditor.world,
         position,
-        properties: { fontSize },
+        properties: { fontSize, highlightColor: properties.highlightColor },
         objectType,
         listType: properties.listType || 'none',
         _phStyle: styleEl,

package/src/ui/FramePropertiesPanel.js

@@ -1043,7 +1043,14 @@ export class FramePropertiesPanel {
             const isOpen = dropdown.classList.contains('is-open');
             this._closeMenus();
             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');
                 this._attachOutside();
             }

package/src/ui/HtmlTextLayer.js

@@ -67,6 +67,44 @@ function resolveLineHeightRatio(baseFontSizePx, properties) {
     return 1.18;
 }
 
+/**
+ * Строит безопасный HTML-фрагмент с кликабельными ссылками по массиву диапазонов.
+ * Символы вне ссылок экранируются через textContent. Диапазоны не должны пересекаться.
+ * @param {string} content
+ * @param {Array<{start:number, end:number, url:string}>} links
+ * @returns {string} готовый innerHTML
+ */
+function _buildHtmlWithLinks(content, links) {
+    if (!links || links.length === 0) return _escapeHtml(content);
+
+    const sorted = [...links]
+        .filter(l => typeof l.start === 'number' && typeof l.end === 'number' && l.end > l.start && l.url)
+        .sort((a, b) => a.start - b.start);
+
+    let result = '';
+    let pos = 0;
+    for (const link of sorted) {
+        const s = Math.max(0, link.start);
+        const e = Math.min(content.length, link.end);
+        if (s < pos) continue; // пропускаем пересечения
+        if (s > pos) result += _escapeHtml(content.slice(pos, s));
+        const linkText = _escapeHtml(content.slice(s, e));
+        const href = _escapeAttr(link.url);
+        result += `<a href="${href}" target="_blank" rel="noopener noreferrer" class="mb-text-link">${linkText}</a>`;
+        pos = e;
+    }
+    if (pos < content.length) result += _escapeHtml(content.slice(pos));
+    return result;
+}
+
+function _escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function _escapeAttr(str) {
+    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
 /**
  * HtmlTextLayer — рисует текст как HTML-элементы поверх PIXI для максимальной чёткости
  * Синхронизирует позицию/размер/масштаб с миром (worldLayer) и состоянием объектов
@@ -108,6 +146,10 @@ export class HtmlTextLayer {
             if (objectData.type === 'text' || objectData.type === 'simple-text' || objectData.type === 'shape') {
                 this._ensureTextEl(objectId, objectData);
                 this.updateOne(objectId);
+                // Нормализуем высоту по реальному scrollHeight .mb-text,
+                // чтобы начальная рамка совпадала с той, что получается после
+                // любого изменения свойства (там тоже вызывается _autoFitTextHeight).
+                this._autoFitTextHeight(objectId);
             }
         });
         this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
@@ -166,7 +208,8 @@ export class HtmlTextLayer {
             if (el && typeof content === 'string') {
                 const _obj = this.core?.state?.state?.objects?.find(o => o.id === objectId);
                 const isMarkdown = resolveMarkdown(_obj?.properties, content);
-                this._syncElementContent(el, content, isMarkdown);
+                const _links = !isMarkdown ? (_obj?.properties?.links || null) : null;
+                this._syncElementContent(el, content, isMarkdown, _links);
                 if (el.classList.contains('mb-text--md') !== isMarkdown) {
                     el.classList.toggle('mb-text--md', isMarkdown);
                     el.style.whiteSpace = isMarkdown ? 'normal' : 'pre';
@@ -211,6 +254,20 @@ export class HtmlTextLayer {
                     el.style.backgroundColor = updates.backgroundColor === 'transparent' ? '' : updates.backgroundColor;
                     console.log(`🔍 HtmlTextLayer: обновлен фон для ${objectId}:`, updates.backgroundColor);
                 }
+                if (updates.highlightColor !== undefined) {
+                    if (updates.highlightColor === 'transparent') {
+                        el.style.removeProperty('--highlight-color');
+                        // Не сбрасываем backgroundColor, так как он может быть установлен отдельно
+                    } else {
+                        el.style.setProperty('--highlight-color', updates.highlightColor);
+                        // Для обычного текста без Quill мы можем просто установить backgroundColor
+                        // если нет выделения
+                        if (!el.querySelector('span[style*="background-color"]')) {
+                            el.style.backgroundColor = updates.highlightColor;
+                        }
+                    }
+                    console.log(`🔍 HtmlTextLayer: обновлен цвет фона текста для ${objectId}:`, updates.highlightColor);
+                }
                 // После изменения свойств текста — автоподгон высоты рамки под контент и принудительное обновление
                 this._autoFitTextHeight(objectId);
                 this.updateOne(objectId);
@@ -422,7 +479,8 @@ export class HtmlTextLayer {
         const initDec = [props.underline && 'underline', props.strikethrough && 'line-through'].filter(Boolean).join(' ');
         el.style.textDecoration = initDec || '';
         el.style.textAlign = props.textAlign || '';
-        this._syncElementContent(el, content, isMarkdown);
+        const initLinks = !isMarkdown ? (props.links || null) : null;
+        this._syncElementContent(el, content, isMarkdown, initLinks);
         // Базовые размеры сохраняем в dataset
         const fs = objectData.fontSize || objectData.properties?.fontSize || 32;
         const bw = Math.max(1, objectData.width || objectData.properties?.baseW || 160);
@@ -629,7 +687,8 @@ export class HtmlTextLayer {
                 el.style.padding = '';
             } else {
                 el.dataset.renderedList = '';
-                const contentChanged = this._syncElementContent(el, content, isMarkdown);
+                const plainLinks = !isMarkdown ? (props.links || null) : null;
+                const contentChanged = this._syncElementContent(el, content, isMarkdown, plainLinks);
                 if (contentChanged) {
                     console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
                 }
@@ -686,18 +745,26 @@ export class HtmlTextLayer {
         });
     }
 
-    /** Обновляет innerHTML/textContent только при реальной смене content или флага markdown */
-    _syncElementContent(el, content, isMarkdown) {
+    /** Обновляет innerHTML/textContent только при реальной смене content, флага markdown или ссылок */
+    _syncElementContent(el, content, isMarkdown, links) {
         if (typeof content !== 'string') return false;
         const mdFlag = isMarkdown ? '1' : '0';
-        if (el.dataset.renderedContent === content && el.dataset.renderedMd === mdFlag) return false;
+        const linksKey = (Array.isArray(links) && links.length > 0) ? JSON.stringify(links) : '';
+        if (
+            el.dataset.renderedContent === content &&
+            el.dataset.renderedMd === mdFlag &&
+            (el.dataset.renderedLinks || '') === linksKey
+        ) return false;
         if (isMarkdown) {
             el.innerHTML = renderRichText(content);
+        } else if (linksKey) {
+            el.innerHTML = _buildHtmlWithLinks(content, links);
         } else {
             el.textContent = content;
         }
         el.dataset.renderedContent = content;
         el.dataset.renderedMd = mdFlag;
+        el.dataset.renderedLinks = linksKey;
         return true;
     }
 

package/src/ui/ImagePropertiesPanel.js

@@ -1105,7 +1105,14 @@ export class ImagePropertiesPanel {
             });
 
             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');
             } else {
                 infoPopover.classList.remove('is-open');

package/src/ui/TextPropertiesPanel.js

@@ -3,6 +3,7 @@ import {
     bindTextPropertiesPanelControls,
     unbindTextPropertiesPanelControls,
 } from './text-properties/TextPropertiesPanelBindings.js';
+import { updateLinkButtonState } from './text-properties/TextLinkControl.js';
 import {
     attachTextPropertiesPanelEventBridge,
     detachTextPropertiesPanelEventBridge,
@@ -10,6 +11,7 @@ import {
 import {
     applyTextAppearanceToDom,
     buildBackgroundColorUpdate,
+    buildHighlightColorUpdate,
     buildFontFamilyUpdate,
     buildFontSizeUpdate,
     buildMarkdownUpdate,
@@ -26,10 +28,13 @@ import {
     createTextPropertiesPanelRenderer,
     hideBgColorDropdown,
     hideColorDropdown,
+    hideHighlightDropdown,
     toggleBgColorDropdown,
     toggleColorDropdown,
+    toggleHighlightDropdown,
     updateCurrentBgColorButton,
     updateCurrentColorButton,
+    updateCurrentHighlightButton,
 } from './text-properties/TextPropertiesPanelRenderer.js';
 import {
     clearTextPropertiesPanelState,
@@ -57,7 +62,7 @@ export class TextPropertiesPanel {
             position: 'absolute',
             inset: '0',
             pointerEvents: 'none',
-            zIndex: 20,
+            zIndex: 10000,
         });
         this.container.appendChild(this.layer);
 
@@ -107,8 +112,9 @@ export class TextPropertiesPanel {
         }
 
         this.panel.style.display = 'flex';
-        this.reposition();
         this._updateControlsFromObject();
+        this._updateLockUI();
+        this.reposition();
     }
 
     hide() {
@@ -119,6 +125,7 @@ export class TextPropertiesPanel {
         }
 
         this._hideColorDropdown();
+        this._hideHighlightDropdown();
         this._hideBgColorDropdown();
         if (this._docMouseDownAttached) {
             document.removeEventListener('mousedown', this._onDocMouseDown, true);
@@ -144,6 +151,24 @@ export class TextPropertiesPanel {
         updateCurrentColorButton(this, color);
     }
 
+    _toggleHighlightDropdown() {
+        toggleHighlightDropdown(this);
+    }
+
+    _hideHighlightDropdown() {
+        hideHighlightDropdown(this);
+    }
+
+    _selectHighlightColor(color) {
+        this._changeHighlightColor(color);
+        this._updateCurrentHighlightButton(color);
+        this._hideHighlightDropdown();
+    }
+
+    _updateCurrentHighlightButton(color) {
+        updateCurrentHighlightButton(this, color);
+    }
+
     _toggleBgColorDropdown() {
         toggleBgColorDropdown(this);
     }
@@ -214,6 +239,19 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { backgroundColor });
     }
 
+    _changeHighlightColor(highlightColor) {
+        if (!this.currentId) {
+            return;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: buildHighlightColorUpdate(highlightColor),
+        });
+
+        this._updateTextAppearance(this.currentId, { highlightColor });
+    }
+
     _toggleFormat(prop) {
         if (!this.currentId) {
             return;
@@ -288,6 +326,40 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { markdown });
     }
 
+    /**
+     * Добавляет web-ссылку к диапазону текста (plain-режим).
+     * При включённом MD-режиме ничего не делает (кнопка должна быть disabled).
+     * @param {string} url — нормализованный URL
+     * @param {number} start — индекс начала диапазона (включительно)
+     * @param {number} end — индекс конца диапазона (не включительно)
+     * @param {string} [objectId] — id объекта; если не задан, используется this.currentId.
+     *   Нужен потому, что во время ввода URL фокус уходит в input и выделение объекта
+     *   может сброситься (this.currentId → null).
+     */
+    _addLink(url, start, end, objectId) {
+        const targetId = objectId || this.currentId;
+        if (!targetId || !url) return;
+        const props = getObjectProperties(this.eventBus, targetId);
+        if (props?.markdown === true) return;
+
+        const content = props?.content ?? '';
+        const safeEnd = Math.min(end, content.length);
+        const safeStart = Math.min(start, safeEnd);
+        if (safeStart >= safeEnd) return;
+
+        const oldLinks = Array.isArray(props?.links) ? props.links : [];
+        // Удаляем ссылки, пересекающиеся с новым диапазоном
+        const filtered = oldLinks.filter(l => l.end <= safeStart || l.start >= safeEnd);
+        const newLinks = [...filtered, { start: safeStart, end: safeEnd, url }]
+            .sort((a, b) => a.start - b.start);
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: targetId,
+            updates: { properties: { links: newLinks } },
+        });
+        this._updateTextAppearance(targetId, { links: newLinks });
+    }
+
     _updateTextAppearance(objectId, properties) {
         applyTextAppearanceToDom(objectId, properties);
         syncPixiTextProperties(this.eventBus, objectId, properties);
@@ -310,9 +382,11 @@ export class TextPropertiesPanel {
         this.fontSelect.value = values.fontFamily;
         this.fontSizeSelect.value = values.fontSize;
         this._updateCurrentColorButton(values.color);
+        this._updateCurrentHighlightButton(values.highlightColor);
         this._updateCurrentBgColorButton(values.backgroundColor);
         if (this.markdownToggle) {
             this.markdownToggle.checked = values.markdown;
+            updateLinkButtonState(this, values.markdown);
         }
 
         if (this.boldBtn) this.boldBtn.classList.toggle('is-active', values.bold);
@@ -383,4 +457,86 @@ export class TextPropertiesPanel {
         this.container.getBoundingClientRect();
         this.hide();
     }
+
+    _isLocked() {
+        if (!this.currentId) return false;
+        const objects = this.core?.state?.getObjects ? this.core.state.getObjects() : [];
+        const obj = objects.find((o) => o.id === this.currentId);
+        return !!(obj?.properties?.locked);
+    }
+
+    _toggleLocked() {
+        if (!this.currentId) return;
+        const newLocked = !this._isLocked();
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { locked: newLocked } },
+        });
+        this._updateLockUI();
+        this.reposition();
+    }
+
+    _updateLockUI() {
+        if (!this._tppBtnLock) return;
+        const locked = this._isLocked();
+
+        this._tppBtnLock.innerHTML = locked ? this._tppLockIcon : this._tppUnlockIcon;
+        this._tppBtnLock.title = locked ? 'Разблокировать' : 'Заблокировать';
+
+        if (Array.isArray(this._lockableEls)) {
+            this._lockableEls.forEach((el) => {
+                if (el) el.style.display = locked ? 'none' : '';
+            });
+        }
+
+        if (this._moreLockLabel) {
+            this._moreLockLabel.textContent = locked ? 'Разблокировать' : 'Заблокировать';
+        }
+
+        if (this.panel) {
+            this.panel.classList.toggle('is-locked', locked);
+        }
+    }
+
+    _duplicateText() {
+        if (!this.currentId) return;
+
+        const posData = { objectId: this.currentId, position: null };
+        const sizeData = { objectId: this.currentId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+
+        if (!posData.position || !sizeData.size) return;
+
+        let w = sizeData.size.width;
+        if (typeof w !== 'number' || isNaN(w)) {
+            const pixiObj = this.core?.pixi?.objects?.get(this.currentId);
+            w = pixiObj ? pixiObj.width : 160;
+        }
+
+        const originalId = this.currentId;
+        const newPos = {
+            x: posData.position.x + (w || 160) + 14,
+            y: posData.position.y,
+        };
+
+        const onReady = (data) => {
+            if (!data || data.originalId !== originalId) return;
+            this.eventBus.off(Events.Tool.DuplicateReady, onReady);
+            this._selectObject(data.newId);
+        };
+        this.eventBus.on(Events.Tool.DuplicateReady, onReady);
+
+        this.eventBus.emit(Events.Tool.DuplicateRequest, { originalId, position: newPos });
+    }
+
+    _selectObject(objectId) {
+        if (!objectId) return;
+        const selectTool = this.core?.selectTool;
+        if (!selectTool || typeof selectTool.setSelection !== 'function') return;
+        selectTool.setSelection([objectId]);
+        if (typeof selectTool.updateResizeHandles === 'function') {
+            selectTool.updateResizeHandles();
+        }
+    }
 }