@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/toolbar/ToolbarStateController.js

@@ -14,9 +14,12 @@ export class ToolbarStateController {
 
         const map = {
             select: 'select',
+            lasso: 'lasso',
             pan: 'pan',
             draw: 'pencil',
-            text: 'text-add'
+            laser: 'laser',
+            text: 'text-add',
+            connector: 'connector'
         };
 
         let btnId = map[toolName];

package/src/utils/iconLoader.js

@@ -22,6 +22,7 @@ export class IconLoader {
                 import('../assets/icons/image.svg?raw'),
                 import('../assets/icons/shapes.svg?raw'),
                 import('../assets/icons/pencil.svg?raw'),
+                import('../assets/icons/connector.svg?raw'),
                 import('../assets/icons/comments.svg?raw'),
                 import('../assets/icons/attachments.svg?raw'),
                 import('../assets/icons/emoji.svg?raw'),
@@ -29,14 +30,17 @@ export class IconLoader {
                 import('../assets/icons/clear.svg?raw'),
                 import('../assets/icons/undo.svg?raw'),
                 import('../assets/icons/redo.svg?raw'),
-                import('../assets/icons/mindmap.svg?raw')
+                import('../assets/icons/mindmap.svg?raw'),
+                import('../assets/icons/lasso.svg?raw'),
+                import('../assets/icons/laser.svg?raw'),
+                import('../assets/icons/reactions.svg?raw')
             ]);
 
             // Сохраняем иконки в кэш
             const iconNames = [
                 'select', 'pan', 'text-add', 'note', 'image', 'shapes',
-                'pencil', 'comments', 'attachments', 'emoji', 'frame',
-                'clear', 'undo', 'redo', 'mindmap'
+                'pencil', 'connector', 'comments', 'attachments', 'emoji', 'frame',
+                'clear', 'undo', 'redo', 'mindmap', 'lasso', 'laser', 'reactions'
             ];
 
             iconNames.forEach((name, index) => {
@@ -74,11 +78,7 @@ export class IconLoader {
   <path d="M8 5L8 19M16 5L16 19M5 8L19 8M5 16L19 16" 
         stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </svg>`,
-            'text-add': `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path d="M4 6H20M4 12H20M4 18H12M16 18V22M16 18H20" 
-        stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-</svg>`,
+            'text-add': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16"/><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"/><path d="M9 20h6"/></svg>`,
             'note': `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
   <rect x="3" y="3" width="18" height="18" rx="2" fill="#fbbf24" stroke="currentColor" stroke-width="2"/>
@@ -117,9 +117,9 @@ export class IconLoader {
   <circle cx="16" cy="10" r="1" fill="currentColor"/>
   <path d="M8 16C8 16 10 18 12 18C14 18 16 16 16 16" stroke="currentColor" stroke-width="2" fill="none"/>
 </svg>`,
-            'frame': `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"/>
+            'frame': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="2.5" stroke="currentColor" stroke-width="2"/>
+  <rect x="1.5" y="1.5" width="7.5" height="5.5" rx="2.5" stroke="currentColor" stroke-width="2"/>
 </svg>`,
             'clear': `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@@ -191,8 +191,8 @@ export class IconLoader {
     loadFallbackIcons() {
         const iconNames = [
             'select', 'pan', 'text-add', 'note', 'image', 'shapes',
-            'pencil', 'comments', 'attachments', 'emoji', 'frame',
-            'clear', 'undo', 'redo', 'mindmap'
+            'pencil', 'connector', 'comments', 'attachments', 'emoji', 'frame',
+            'clear', 'undo', 'redo', 'mindmap', 'reactions'
         ];
 
         iconNames.forEach(name => {
@@ -213,7 +213,7 @@ export class IconLoader {
         const fallbacks = {
             'select': '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
             'pan': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="4" y="4" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
-            'text-add': '<svg width="20" height="20" viewBox="0 0 20 20"><text x="10" y="15" text-anchor="middle" font-size="16" fill="currentColor">T+</text></svg>',
+            'text-add': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16"/><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"/><path d="M9 20h6"/></svg>',
             'note': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="2" y="2" width="16" height="16" rx="2" fill="#fbbf24"/></svg>',
             'image': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
             'shapes': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="2" y="2" width="6" height="6"/><circle cx="14" cy="5" r="3"/><polygon points="10,14 13,18 7,18"/></svg>',
@@ -221,11 +221,12 @@ export class IconLoader {
             'comments': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M2 4C2 2.89543 2.89543 2 4 2H16C17.1046 2 18 2.89543 18 4V12C18 13.1046 17.1046 14 16 14H8L4 18V4Z" fill="currentColor"/></svg>',
             'attachments': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M8 2C6.89543 2 6 2.89543 6 4V12C6 14.2091 7.79086 16 10 16C12.2091 16 14 14.2091 14 12V6C14 5.44772 13.5523 5 13 5C12.4477 5 12 5.44772 12 6V12C12 13.1046 11.1046 14 10 14C8.89543 14 8 13.1046 8 12V4C8 3.44772 8.44772 3 9 3C9.55228 3 10 3.44772 10 4V12C10 12.5523 9.55228 13 9 13C8.44772 13 8 12.5523 8 12V4Z" fill="currentColor"/></svg>',
             'emoji': '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="7" cy="8" r="1"/><circle cx="13" cy="8" r="1"/><path d="M7 13C7 13 8.5 15 10 15C11.5 15 13 13 13 13" stroke="currentColor" stroke-width="1" fill="none"/></svg>',
-            'frame': '<svg width="20" height="20" viewBox="0 0 20 20"><rect x="2" y="2" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"/></svg>',
+            'frame': '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="1.5" y="1.5" width="17" height="17" rx="2.5" stroke="currentColor" stroke-width="2"/><rect x="1.5" y="1.5" width="7.5" height="5.5" rx="2.5" stroke="currentColor" stroke-width="2"/></svg>',
             'clear': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 6H17L16 18H4L3 6Z" fill="currentColor"/></svg>',
             'undo': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M8 4L3 9L8 14" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
             'redo': '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M12 4L17 9L12 14" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
-            'mindmap': '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="4" cy="4" r="2" fill="currentColor"/><circle cx="16" cy="4" r="2" fill="currentColor"/><circle cx="4" cy="16" r="2" fill="currentColor"/><circle cx="16" cy="16" r="2" fill="currentColor"/><rect x="7" y="8" width="6" height="4" rx="2" fill="currentColor"/><path d="M6 5L8 8M14 8L16 5M8 12L6 15M12 12L14 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>'
+            'mindmap': '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="4" cy="4" r="2" fill="currentColor"/><circle cx="16" cy="4" r="2" fill="currentColor"/><circle cx="4" cy="16" r="2" fill="currentColor"/><circle cx="16" cy="16" r="2" fill="currentColor"/><rect x="7" y="8" width="6" height="4" rx="2" fill="currentColor"/><path d="M6 5L8 8M14 8L16 5M8 12L6 15M12 12L14 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+            'reactions': '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>'
         };
 
         return fallbacks[iconName] || fallbacks['select'];

package/src/utils/markdown.js

@@ -0,0 +1,14 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+// gfm: паритет с league/commonmark в Futurello; breaks: переносы строк как в ответах ИИ
+marked.use({ gfm: true, breaks: true });
+
+/**
+ * Рендерит markdown в безопасный HTML.
+ * DOMPurify обязателен: результат вставляется через innerHTML.
+ */
+export function renderMarkdown(src) {
+    if (typeof src !== 'string' || !src) return '';
+    return DOMPurify.sanitize(marked.parse(src));
+}

package/src/utils/richText.js

@@ -0,0 +1,125 @@
+import 'katex/dist/katex.min.css';
+import katex from 'katex';
+import { renderMarkdown } from './markdown.js';
+
+// Рендер «богатого» текста = markdown + LaTeX-формулы KaTeX.
+//
+// Почему отдельный слой над renderMarkdown: marked/DOMPurify портят TeX
+// (`_` → <em>, `\` срезается, `*` → курсив). Поэтому формулы извлекаются ДО
+// markdown-парсинга, заменяются плейсхолдерами, markdown прогоняется как
+// обычно, затем формулы восстанавливаются через katex.renderToString.
+//
+// KaTeX-вывод НЕ пропускается через DOMPurify: это доверенный вывод самой
+// библиотеки (см. docs/security.md — injection-safe), а sanitize вырезал бы
+// нужные KaTeX span/inline-style. Тот же контракт, что в Futurello.
+
+// Плейсхолдеры — только заглавные буквы и цифры: marked/DOMPurify не трогают
+// такие токены и не интерпретируют их как разметку.
+const BLOCK_KEY = (i) => `XKATEXBLOCK${i}X`;
+const INLINE_KEY = (i) => `XKATEXINLINE${i}X`;
+
+// Делимитеры формул. Порядок важен: $$ и \[…\] извлекаются до инлайнового $…$,
+// иначе инлайновый разбор «съест» первый $ блочной формулы.
+const RE_BLOCK_DOLLARS = /\$\$([\s\S]+?)\$\$/g;     // $$ ... $$
+const RE_BLOCK_BRACKETS = /\\\[([\s\S]+?)\\\]/g;    // \[ ... \]
+const RE_INLINE_PARENS = /\\\(([\s\S]+?)\\\)/g;     // \( ... \)
+// Инлайн $...$: открывающий $ не перед пробелом/цифрой/$ (отсекает $5, $10);
+// закрывающий $ не перед цифрой. (?<!\$) — не часть $$.
+const RE_INLINE_DOLLARS = /(?<!\$)\$(?=[^\s\d$])([\s\S]+?[^\s$])\$(?!\d)/g;
+
+// Блоки и инлайн-код. Их содержимое НЕ должно трактоваться как математика:
+// например PowerShell `$dst`, `$env:APPDATA` — это переменные, а не формулы.
+const RE_FENCED_CODE = /```[\s\S]*?```|~~~[\s\S]*?~~~/g; // ``` ... ``` и ~~~ ... ~~~
+const RE_INLINE_CODE = /`[^`\n]+`/g;                     // `...`
+
+// Убирает код из текста (для детекта) — заменяет на пробел, чтобы делимитеры
+// внутри кода не считались формулами.
+function stripCode(src) {
+    return src.replace(RE_FENCED_CODE, ' ').replace(RE_INLINE_CODE, ' ');
+}
+
+/**
+ * Быстрая проверка: есть ли в тексте хоть один делимитер формулы вне кода.
+ * Нужна, чтобы текст с одной формулой (без markdown-разметки) тоже
+ * рендерился богато, но код с `$`-переменными не считался формулой.
+ */
+export function hasMath(src) {
+    if (typeof src !== 'string' || !src) return false;
+    const t = stripCode(src);
+    return (
+        /\$\$[\s\S]+?\$\$/.test(t) ||
+        /\\\[[\s\S]+?\\\]/.test(t) ||
+        /\\\([\s\S]+?\\\)/.test(t) ||
+        /(?<!\$)\$(?=[^\s\d$])[\s\S]+?[^\s$]\$(?!\d)/.test(t)
+    );
+}
+
+function extractMath(src) {
+    const placeholders = [];
+    // Сначала защищаем код плейсхолдерами: внутри него $ и \ — не математика.
+    // Код возвращается в текст до markdown-парсинга, поэтому marked отрисует
+    // его как <pre><code> с экранированным содержимым.
+    const codeStore = [];
+    const maskCode = (re, prefix) => {
+        text = text.replace(re, (m) => {
+            const key = `XCODE${prefix}${codeStore.length}X`;
+            codeStore.push({ key, code: m });
+            return key;
+        });
+    };
+
+    let text = src;
+    maskCode(RE_FENCED_CODE, 'BLOCK');
+    maskCode(RE_INLINE_CODE, 'INLINE');
+
+    const replaceAll = (re, display, keyFn) => {
+        text = text.replace(re, (_m, tex) => {
+            const key = keyFn(placeholders.length);
+            placeholders.push({ key, tex: tex.trim(), display });
+            return key;
+        });
+    };
+
+    replaceAll(RE_BLOCK_DOLLARS, true, BLOCK_KEY);
+    replaceAll(RE_BLOCK_BRACKETS, true, BLOCK_KEY);
+    replaceAll(RE_INLINE_PARENS, false, INLINE_KEY);
+    replaceAll(RE_INLINE_DOLLARS, false, INLINE_KEY);
+
+    // Возвращаем код обратно — теперь его обработает marked.
+    for (const { key, code } of codeStore) {
+        text = text.split(key).join(code);
+    }
+
+    return { text, placeholders };
+}
+
+function restoreMath(html, placeholders) {
+    let out = html;
+    for (const { key, tex, display } of placeholders) {
+        let rendered;
+        try {
+            rendered = katex.renderToString(tex, {
+                throwOnError: false,
+                output: 'html', // без MathML: дублирующее поддерево не нужно и тяжелее
+                displayMode: display,
+            });
+        } catch {
+            // На неожиданной ошибке оставляем сырой TeX видимым
+            rendered = display ? `$$${tex}$$` : `$${tex}$`;
+        }
+        out = out.split(key).join(rendered);
+    }
+    return out;
+}
+
+/**
+ * Рендерит markdown с LaTeX-формулами в безопасный HTML.
+ * Результат вставляется через innerHTML.
+ */
+export function renderRichText(src) {
+    if (typeof src !== 'string' || !src) return '';
+    const { text, placeholders } = extractMath(src);
+    const html = renderMarkdown(text);
+    if (placeholders.length === 0) return html;
+    return restoreMath(html, placeholders);
+}