@sequent-org/moodboard 1.4.32 → 1.4.34

package/src/ui/styles/workspace.css

@@ -1,4 +1,21 @@
 /* Fonts */
+@font-face {
+    font-family: 'Inter';
+    src: url('../../assets/fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
+         url('../../assets/fonts/inter/inter-cyrillic-400-normal.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Inter';
+    src: url('../../assets/fonts/inter/inter-latin-500-normal.woff2') format('woff2'),
+         url('../../assets/fonts/inter/inter-cyrillic-500-normal.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
 @font-face {
     font-family: 'GeistSans';
     src: url('../../assets/fonts/geist/geist-sans-latin-100-normal.ttf') format('truetype');
@@ -295,8 +312,8 @@
     word-break: break-word;
     pointer-events: none;
     user-select: none;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -304,6 +321,131 @@
     letter-spacing: normal;
 }
 
+/* Markdown-режим текстового объекта: блочный рендер, перенос по словам */
+.mb-text--md {
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+.mb-text--md h1,
+.mb-text--md h2,
+.mb-text--md h3,
+.mb-text--md h4,
+.mb-text--md h5,
+.mb-text--md h6 {
+    margin: 0.875em 0 0.375em;
+    line-height: 1.25;
+    font-weight: 600;
+}
+
+.mb-text--md h1 { font-size: 1.4em; }
+.mb-text--md h2 { font-size: 1.2em; }
+.mb-text--md h3 { font-size: 1.1em; }
+.mb-text--md h4,
+.mb-text--md h5,
+.mb-text--md h6 { font-size: 1em; }
+
+.mb-text--md p {
+    margin: 0 0 0.5em;
+}
+
+.mb-text--md p:last-child {
+    margin-bottom: 0;
+}
+
+.mb-text--md ul,
+.mb-text--md ol {
+    margin: 0 0 0.5em;
+    padding-left: 1.25em;
+}
+
+.mb-text--md li {
+    margin: 0.125em 0;
+}
+
+.mb-text--md strong,
+.mb-text--md b {
+    font-weight: 600;
+}
+
+.mb-text--md em,
+.mb-text--md i {
+    font-style: italic;
+}
+
+.mb-text--md code {
+    padding: 0.125em 0.3125em;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.08);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 0.9em;
+}
+
+.mb-text--md pre {
+    margin: 0.375em 0;
+    padding: 0.625em 0.75em;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.06);
+    overflow-x: auto;
+}
+
+.mb-text--md pre code {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    font-size: 0.88em;
+    line-height: 1.5;
+}
+
+.mb-text--md blockquote {
+    margin: 0.375em 0;
+    padding: 0.25em 0.625em;
+    border-left: 3px solid rgba(0, 0, 0, 0.18);
+    background: rgba(0, 0, 0, 0.04);
+    border-radius: 0 6px 6px 0;
+}
+
+.mb-text--md table {
+    border-collapse: collapse;
+    margin: 0.375em 0;
+    font-size: 0.92em;
+}
+
+.mb-text--md th,
+.mb-text--md td {
+    padding: 0.3125em 0.5em;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.mb-text--md th {
+    background: rgba(0, 0, 0, 0.05);
+    font-weight: 600;
+    text-align: left;
+}
+
+.mb-text--md hr {
+    border: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.625em 0;
+}
+
+.mb-text--md img {
+    max-width: 100%;
+}
+
+/* KaTeX-формулы внутри текстового объекта */
+.mb-text--md .katex-display {
+    margin: 0.5em 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.mb-text--md .katex {
+    /* Цвет формулы наследуется от цвета текстового объекта */
+    color: inherit;
+}
+
 .mb-text--mindmap {
     display: flex;
     align-items: center;
@@ -622,10 +764,10 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 10px;
+    padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
-    border-radius: 10px;
+    border-radius: 9999px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.12);
     z-index: 3000;
     pointer-events: auto;
@@ -692,10 +834,10 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 10px;
+    padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
-    border-radius: 10px;
+    border-radius: 9999px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.12);
     z-index: 3000;
 }
@@ -858,6 +1000,115 @@
 }
 .moodboard-draw__grid > .moodboard-draw__row { display: contents; }
 .moodboard-draw__placeholder { min-width: 30px; min-height: 30px; }
+
+/* ── Новая панель рисования ─────────────────────────────────────── */
+.moodboard-toolbar__popup--draw {
+    min-width: 188px;
+    padding: 8px;
+    box-sizing: border-box;
+}
+.moodboard-draw__panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.moodboard-draw__tool-row {
+    display: flex;
+    gap: 4px;
+    justify-content: flex-start;
+}
+.moodboard-draw__section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.moodboard-draw__section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.moodboard-draw__section-label {
+    font-size: 11px;
+    color: #6b7280;
+    font-weight: 500;
+}
+.moodboard-draw__thickness-value {
+    font-size: 11px;
+    color: #374151;
+    font-weight: 600;
+    min-width: 28px;
+    text-align: right;
+}
+.moodboard-draw__slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 4px;
+    border-radius: 2px;
+    background: #e5e7eb;
+    outline: none;
+    cursor: pointer;
+}
+.moodboard-draw__slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #374151;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.moodboard-draw__slider::-webkit-slider-thumb:hover { background: #111827; }
+.moodboard-draw__slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #374151;
+    cursor: pointer;
+    border: none;
+}
+.moodboard-draw__color-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 24px);
+    gap: 4px;
+}
+.moodboard-draw__color-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.12s, border-color 0.12s;
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+.moodboard-draw__color-btn:hover {
+    transform: scale(1.15);
+    border-color: #9ca3af;
+}
+.moodboard-draw__color-btn--active {
+    border-color: #374151 !important;
+    transform: scale(1.1);
+}
+.moodboard-draw__color-btn--custom {
+    background: conic-gradient(
+        #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6, #ec4899, #ef4444
+    );
+    overflow: hidden;
+}
+.moodboard-draw__color-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+}
 .moodboard-emoji__section { margin-bottom: 8px; }
 .moodboard-emoji__title {
     font-size: 12px;

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

@@ -0,0 +1,88 @@
+import {
+    LINE_HEIGHT_DEFAULT,
+    LINE_HEIGHT_MAX,
+    LINE_HEIGHT_MIN,
+    LINE_HEIGHT_STEP,
+} 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>';
+
+function makeSep() {
+    const d = document.createElement('div');
+    d.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
+    return d;
+}
+
+function makeToggleBtn(svgStr, title, prop) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.title = title;
+    btn.className = 'tpp-format-btn';
+    btn.dataset.formatProp = prop;
+    btn.innerHTML = svgStr;
+    return btn;
+}
+
+function makeSelect(className, options) {
+    const sel = document.createElement('select');
+    sel.className = className;
+    options.forEach(({ value, label }) => {
+        const opt = document.createElement('option');
+        opt.value = value;
+        opt.textContent = label;
+        sel.appendChild(opt);
+    });
+    return sel;
+}
+
+export function createTextFormatControls(panelInstance, panel) {
+    panel.appendChild(makeSep());
+
+    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),
+    );
+
+    panel.appendChild(makeSep());
+
+    panelInstance.alignControl = makeSelect('tpp-align-select', [
+        { value: 'left', label: '≡ Лево' },
+        { value: 'center', label: '≡ Центр' },
+        { value: 'right', label: '≡ Право' },
+        { value: 'justify', label: '≡ По ширине' },
+    ]);
+    panel.appendChild(panelInstance.alignControl);
+
+    panelInstance.listControl = makeSelect('tpp-list-select', [
+        { value: 'none', label: 'Список: нет' },
+        { value: 'bullet', label: '• Маркер' },
+        { value: 'numbered', label: '1. Нумерация' },
+        { value: 'checkbox', label: '☐ Флажки' },
+    ]);
+    panel.appendChild(panelInstance.listControl);
+
+    panel.appendChild(makeSep());
+
+    const lhLabel = document.createElement('span');
+    lhLabel.className = 'tpp-label';
+    lhLabel.title = 'Межстрочный интервал';
+    lhLabel.textContent = '↕';
+    panel.appendChild(lhLabel);
+
+    panelInstance.lineHeightSlider = document.createElement('input');
+    panelInstance.lineHeightSlider.type = 'range';
+    panelInstance.lineHeightSlider.className = 'tpp-lh-slider';
+    panelInstance.lineHeightSlider.min = String(LINE_HEIGHT_MIN);
+    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);
+}

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

@@ -0,0 +1,137 @@
+/**
+ * TextListRenderer — рендер контента текстового объекта как DOM-списка.
+ * Вызывается из HtmlTextLayer вместо plain/markdown-пути,
+ * когда listType !== 'none'.
+ *
+ * Безопасность: пользовательский текст добавляется только через textContent,
+ * innerHTML не используется.
+ */
+
+/**
+ * Строит DOM-список внутри переданного элемента.
+ * @param {HTMLElement} el         - контейнер (очищается перед рендером)
+ * @param {string}      content    - строки, разделённые \n
+ * @param {'bullet'|'numbered'|'checkbox'} listType
+ * @param {boolean[]}   listChecked - состояния чекбоксов по индексу строки
+ * @param {function(number):void}  onToggle - вызывается при клике на чекбокс
+ */
+export function renderTextList(el, content, listType, listChecked, onToggle) {
+    while (el.firstChild) el.removeChild(el.firstChild);
+
+    const lines = typeof content === 'string' ? content.split('\n') : [''];
+
+    if (listType === 'bullet') {
+        _renderBullet(el, lines);
+    } else if (listType === 'numbered') {
+        _renderNumbered(el, lines);
+    } else if (listType === 'checkbox') {
+        _renderCheckbox(el, lines, listChecked, onToggle);
+    }
+}
+
+// ─── bullet ──────────────────────────────────────────────────────────────────
+
+function _renderBullet(el, lines) {
+    const list = document.createElement('ul');
+    list.style.cssText = 'list-style:none;margin:0;padding:0;';
+
+    lines.forEach((lineText) => {
+        const item = document.createElement('li');
+        item.style.cssText = 'display:flex;align-items:baseline;gap:0.4em;';
+
+        const marker = document.createElement('span');
+        marker.textContent = '•';
+        marker.style.cssText = 'flex-shrink:0;user-select:none;';
+
+        const text = document.createElement('span');
+        text.textContent = lineText;
+
+        item.appendChild(marker);
+        item.appendChild(text);
+        list.appendChild(item);
+    });
+
+    el.appendChild(list);
+}
+
+// ─── numbered ─────────────────────────────────────────────────────────────────
+
+function _renderNumbered(el, lines) {
+    const list = document.createElement('ol');
+    list.style.cssText = 'list-style:none;margin:0;padding:0;';
+
+    lines.forEach((lineText, idx) => {
+        const item = document.createElement('li');
+        item.style.cssText = 'display:flex;align-items:baseline;gap:0.4em;';
+
+        const marker = document.createElement('span');
+        marker.textContent = `${idx + 1}.`;
+        marker.style.cssText = 'flex-shrink:0;user-select:none;min-width:1.8em;text-align:right;';
+
+        const text = document.createElement('span');
+        text.textContent = lineText;
+
+        item.appendChild(marker);
+        item.appendChild(text);
+        list.appendChild(item);
+    });
+
+    el.appendChild(list);
+}
+
+// ─── checkbox ─────────────────────────────────────────────────────────────────
+
+function _renderCheckbox(el, lines, listChecked, onToggle) {
+    const list = document.createElement('ul');
+    list.style.cssText = 'list-style:none;margin:0;padding:0;';
+
+    lines.forEach((lineText, idx) => {
+        const checked = Array.isArray(listChecked) ? !!listChecked[idx] : false;
+
+        const item = document.createElement('li');
+        item.style.cssText = 'display:flex;align-items:center;gap:0.5em;';
+
+        // pointer-events: auto — точечно только на чекбоксе.
+        // Родительский .moodboard-html-layer имеет pointer-events: none.
+        const box = document.createElement('span');
+        box.style.cssText = [
+            'display:inline-flex',
+            'align-items:center',
+            'justify-content:center',
+            'width:1em',
+            'height:1em',
+            'min-width:1em',
+            'border:1.5px solid currentColor',
+            'border-radius:2px',
+            'flex-shrink:0',
+            'cursor:pointer',
+            'user-select:none',
+            'pointer-events:auto',  // ключевое включение
+        ].join(';') + ';';
+
+        if (checked) {
+            const tick = document.createElement('span');
+            tick.textContent = '✓';
+            tick.style.cssText = 'font-size:0.75em;line-height:1;pointer-events:none;';
+            box.appendChild(tick);
+        }
+
+        box.addEventListener('click', (e) => {
+            // stopPropagation: клик не должен уходить в canvas (выделение/драг)
+            e.stopPropagation();
+            if (typeof onToggle === 'function') onToggle(idx);
+        });
+
+        const text = document.createElement('span');
+        text.textContent = lineText;
+        if (checked) {
+            text.style.cssText = 'text-decoration:line-through;opacity:0.6;';
+        }
+
+        item.appendChild(box);
+        item.appendChild(text);
+        list.appendChild(item);
+    });
+
+    el.appendChild(list);
+}

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

@@ -74,6 +74,33 @@ export function bindTextPropertiesPanelControls(panel) {
     };
     document.addEventListener('click', panel._onBgDocumentClick);
 
+    if (panel.markdownToggle) {
+        panel.markdownToggle.addEventListener('change', (event) => {
+            panel._changeMarkdown(event.target.checked);
+        });
+    }
+
+    [
+        [panel.boldBtn, 'bold'],
+        [panel.italicBtn, 'italic'],
+        [panel.underlineBtn, 'underline'],
+        [panel.strikethroughBtn, 'strikethrough'],
+    ].forEach(([btn, prop]) => {
+        if (btn) btn.addEventListener('click', () => panel._toggleFormat(prop));
+    });
+
+    if (panel.alignControl) {
+        panel.alignControl.addEventListener('change', (e) => panel._changeTextAlign(e.target.value));
+    }
+
+    if (panel.listControl) {
+        panel.listControl.addEventListener('change', (e) => panel._changeListType(e.target.value));
+    }
+
+    if (panel.lineHeightSlider) {
+        panel.lineHeightSlider.addEventListener('input', (e) => panel._changeLineHeight(parseFloat(e.target.value)));
+    }
+
     panel._bindingsAttached = true;
 }
 

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

@@ -15,6 +15,7 @@ export function attachTextPropertiesPanelEventBridge(panel) {
         onRotateUpdate: () => panel.reposition(),
         onZoomPercent: () => panel.reposition(),
         onPanUpdate: () => panel.reposition(),
+        onViewportChanged: () => panel.reposition(),
         onDeleted: ({ objectId }) => {
             if (panel.currentId && objectId === panel.currentId) {
                 panel.hide();
@@ -22,7 +23,6 @@ export function attachTextPropertiesPanelEventBridge(panel) {
         },
         onTextEditStart: () => {
             panel.isTextEditing = true;
-            panel.hide();
         },
         onTextEditEnd: () => {
             panel.isTextEditing = false;
@@ -44,6 +44,7 @@ export function attachTextPropertiesPanelEventBridge(panel) {
     panel.eventBus.on(Events.Tool.RotateUpdate, panel._eventBridgeHandlers.onRotateUpdate);
     panel.eventBus.on(Events.UI.ZoomPercent, panel._eventBridgeHandlers.onZoomPercent);
     panel.eventBus.on(Events.Tool.PanUpdate, panel._eventBridgeHandlers.onPanUpdate);
+    panel.eventBus.on(Events.Viewport.Changed, panel._eventBridgeHandlers.onViewportChanged);
     panel.eventBus.on(Events.Object.Deleted, panel._eventBridgeHandlers.onDeleted);
     panel.eventBus.on(Events.UI.TextEditStart, panel._eventBridgeHandlers.onTextEditStart);
     panel.eventBus.on(Events.UI.TextEditEnd, panel._eventBridgeHandlers.onTextEditEnd);
@@ -67,6 +68,7 @@ export function detachTextPropertiesPanelEventBridge(panel) {
     panel.eventBus.off(Events.Tool.RotateUpdate, panel._eventBridgeHandlers.onRotateUpdate);
     panel.eventBus.off(Events.UI.ZoomPercent, panel._eventBridgeHandlers.onZoomPercent);
     panel.eventBus.off(Events.Tool.PanUpdate, panel._eventBridgeHandlers.onPanUpdate);
+    panel.eventBus.off(Events.Viewport.Changed, panel._eventBridgeHandlers.onViewportChanged);
     panel.eventBus.off(Events.Object.Deleted, panel._eventBridgeHandlers.onDeleted);
     panel.eventBus.off(Events.UI.TextEditStart, panel._eventBridgeHandlers.onTextEditStart);
     panel.eventBus.off(Events.UI.TextEditEnd, panel._eventBridgeHandlers.onTextEditEnd);

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

@@ -17,6 +17,18 @@ export const FONT_OPTIONS = [
 
 export const FONT_SIZE_OPTIONS = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
 
+// Допустимые значения выравнивания и типов списка (контракт хранения в properties)
+export const TEXT_ALIGN_VALUES = ['left', 'center', 'right', 'justify'];
+export const LIST_TYPE_VALUES = ['none', 'bullet', 'numbered', 'checkbox'];
+
+// Границы слайдера межстрочного интервала (множитель). DEFAULT — стартовое
+// положение слайдера, когда у объекта ещё нет явного lineHeight (рендер при этом
+// продолжает использовать адаптивный расчёт до первого изменения пользователем).
+export const LINE_HEIGHT_MIN = 1.0;
+export const LINE_HEIGHT_MAX = 2.5;
+export const LINE_HEIGHT_STEP = 0.1;
+export const LINE_HEIGHT_DEFAULT = 1.3;
+
 export const TEXT_COLOR_PRESETS = [
     { color: '#000000', name: '#000000' },
     { color: '#404040', name: '#404040' },
@@ -86,6 +98,14 @@ export function getControlValuesFromProperties(properties) {
         fontSize: String(properties.fontSize || 18),
         color: properties.color || '#000000',
         backgroundColor: properties.backgroundColor !== undefined ? properties.backgroundColor : 'transparent',
+        markdown: properties.markdown === true,
+        bold: properties.bold === true,
+        italic: properties.italic === true,
+        underline: properties.underline === true,
+        strikethrough: properties.strikethrough === true,
+        textAlign: properties.textAlign || 'left',
+        lineHeight: typeof properties.lineHeight === 'number' ? properties.lineHeight : null,
+        listType: properties.listType || 'none',
     };
 }
 
@@ -95,6 +115,14 @@ export function getFallbackControlValues() {
         fontSize: '18',
         color: '#000000',
         backgroundColor: 'transparent',
+        markdown: false,
+        bold: false,
+        italic: false,
+        underline: false,
+        strikethrough: false,
+        textAlign: 'left',
+        lineHeight: null,
+        listType: 'none',
     };
 }
 
@@ -122,6 +150,16 @@ export function buildBackgroundColorUpdate(backgroundColor) {
     };
 }
 
+export function buildMarkdownUpdate(markdown) {
+    return {
+        properties: { markdown },
+    };
+}
+
+export function buildPropertyUpdate(key, value) {
+    return { properties: { [key]: value } };
+}
+
 export function applyTextAppearanceToDom(objectId, properties) {
     const htmlElement = document.querySelector(`[data-id="${objectId}"]`);
     if (!htmlElement) {
@@ -144,6 +182,24 @@ export function applyTextAppearanceToDom(objectId, properties) {
             htmlElement.style.backgroundColor = properties.backgroundColor;
         }
     }
+    if (properties.bold !== undefined) {
+        htmlElement.style.fontWeight = properties.bold ? 'bold' : '';
+    }
+    if (properties.italic !== undefined) {
+        htmlElement.style.fontStyle = properties.italic ? 'italic' : '';
+    }
+    if (properties.underline !== undefined || properties.strikethrough !== undefined) {
+        const parts = [];
+        if (properties.underline === true) parts.push('underline');
+        if (properties.strikethrough === true) parts.push('line-through');
+        htmlElement.style.textDecoration = parts.join(' ');
+    }
+    if (properties.textAlign !== undefined) {
+        htmlElement.style.textAlign = properties.textAlign;
+    }
+    if (typeof properties.lineHeight === 'number') {
+        htmlElement.style.lineHeight = String(properties.lineHeight);
+    }
 }
 
 export function syncPixiTextProperties(eventBus, objectId, properties) {