sunny-html-editor 1.2.4 → 1.3.0

package/README.md

@@ -4,6 +4,8 @@
 
 ## バージョン履歴
 
+- **1.3.0** - Mermaid図表示対応、Excel出力にMermaid画像埋め込み、テーブル全セルで` / `改行対応、長文字列のword-break対応、PDF出力機能削除
+- **1.2.5** - サイドバー開閉時の横スクロールバー問題を修正
 - **1.2.4** - h1改行を最初の「-」「_」のみに限定
 - **1.2.3** - サイドバーh1の改行(br)維持を修正
 - **1.2.2** - パッケージ修正

package/html-editor.css

@@ -1,6 +1,6 @@
 /**
  * Sunny HTML Editor - スタイルシート
- * @version 1.0.0
+ * @version 1.3.0
  */
 
 * {
@@ -189,6 +189,7 @@ th, td {
     padding: 10px;
     text-align: left;
     vertical-align: top;
+    word-break: break-all;
 }
 th {
     background: linear-gradient(180deg, #f8f8f8 0%, #efefef 100%);
@@ -389,3 +390,18 @@ del {
 .sidebar {
     transition: transform 0.3s ease;
 }
+
+/* Mermaid図 */
+.mermaid-container {
+    margin: 15px 0 15px 20px;
+    padding: 15px;
+    background: #fafafa;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow-x: auto;
+    text-align: center;
+}
+.mermaid-container svg {
+    max-width: 100%;
+    height: auto;
+}

package/html-editor.js

@@ -1,6 +1,6 @@
 /**
  * Sunny HTML Editor - 軽量WYSIWYGエディタ
- * @version 1.2.4
+ * @version 1.3.0
  */
 
 // ========== HTML生成関数 ==========
@@ -12,7 +12,6 @@ function getToolbarHtml() {
         '<button id="exportHtml" title="HTMLコピー">🌐</button>' +
         '<button id="saveHtml" title="HTML保存">💾</button>' +
         '<button id="exportExcel" title="Excel出力">📊</button>' +
-        '<button id="exportPdf" title="PDF出力">📕</button>' +
     '</div>';
 }
 
@@ -110,18 +109,43 @@ function loadScript(src) {
     return libraryPromises[src];
 }
 
-async function ensurePdfLibraries() {
-    if (!window.jspdf) {
-        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
+async function ensureExcelLibrary() {
+    if (!window.ExcelJS) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js');
     }
-    if (!window.html2canvas) {
-        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js');
+}
+
+async function ensureMermaidLibrary() {
+    if (!window.mermaid) {
+        await loadScript('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js');
+        window.mermaid.initialize({ startOnLoad: false, theme: 'default' });
     }
 }
 
-async function ensureExcelLibrary() {
-    if (!window.ExcelJS) {
-        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js');
+async function renderMermaidBlocks(root) {
+    var codeBlocks = root.querySelectorAll('pre > code.language-mermaid');
+    if (codeBlocks.length === 0) return;
+    
+    await ensureMermaidLibrary();
+    
+    for (var i = 0; i < codeBlocks.length; i++) {
+        var code = codeBlocks[i];
+        var pre = code.parentElement;
+        var mermaidText = code.textContent;
+        
+        var wrapper = document.createElement('div');
+        wrapper.className = 'mermaid-container';
+        wrapper.dataset.mermaidSource = mermaidText;
+        
+        try {
+            var id = 'mermaid-' + Date.now() + '-' + i;
+            var result = await window.mermaid.render(id, mermaidText);
+            wrapper.innerHTML = result.svg;
+        } catch (err) {
+            wrapper.innerHTML = '<pre style="color:#c00;border:1px solid #c00;padding:10px;border-radius:4px;">Mermaid描画エラー: ' + err.message + '</pre>';
+        }
+        
+        pre.replaceWith(wrapper);
     }
 }
 
@@ -250,11 +274,6 @@ function convertMarkdownToHtml(md) {
         else if (colCount === 3) tableClass = ' class="table-3col"';
         else tableClass = ' class="table-multi"';
         
-        var choiceColIndex = -1;
-        for (var j = 0; j < t.headers.length; j++) {
-            if (t.headers[j] === '選択肢') { choiceColIndex = j; break; }
-        }
-        
         var tableHtml = '<table' + tableClass + '>\n<tr>\n';
         for (var j = 0; j < t.headers.length; j++) {
             tableHtml += '<th>' + convertMdInline(escapeHtmlForMd(t.headers[j])) + '</th>\n';
@@ -264,7 +283,7 @@ function convertMarkdownToHtml(md) {
             tableHtml += '<tr>\n';
             for (var k = 0; k < t.rows[j].length; k++) {
                 var cellContent = convertMdInline(escapeHtmlForMd(t.rows[j][k]));
-                if (k === choiceColIndex) cellContent = cellContent.replace(/ \/ /g, '<br>');
+                cellContent = cellContent.replace(/ \/ /g, '<br>');
                 tableHtml += '<td>' + cellContent + '</td>\n';
             }
             tableHtml += '</tr>\n';
@@ -462,6 +481,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // ツールバー挿入
     container.insertAdjacentHTML('afterbegin', getToolbarHtml());
     
+    // Mermaidブロックを描画
+    renderMermaidBlocks(container);
+    
     // コンテキストメニュー挿入（bodyの末尾に配置）
     document.body.insertAdjacentHTML('beforeend', getContextMenusHtml());
     
@@ -472,7 +494,6 @@ document.addEventListener('DOMContentLoaded', function() {
     var exportMdBtn = document.getElementById('exportMd');
     var exportHtmlBtn = document.getElementById('exportHtml');
     var exportExcelBtn = document.getElementById('exportExcel');
-    var exportPdfBtn = document.getElementById('exportPdf');
     var isEditMode = false;
     var sectionCounter = { h2: 100, h3: 100, h4: 100 };
     
@@ -502,6 +523,21 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 10);
     }
     
+    // ========== Mermaidコンテナ復元ヘルパー ==========
+    function restoreMermaidToPre(root) {
+        root.querySelectorAll('.mermaid-container').forEach(function(container) {
+            var source = container.dataset.mermaidSource;
+            if (source) {
+                var pre = document.createElement('pre');
+                var code = document.createElement('code');
+                code.className = 'language-mermaid';
+                code.textContent = source;
+                pre.appendChild(code);
+                container.replaceWith(pre);
+            }
+        });
+    }
+    
     // ========== HTML保存 ==========
     if (saveHtmlBtn) saveHtmlBtn.addEventListener('click', function() {
         var wasEditMode = isEditMode;
@@ -521,6 +557,9 @@ document.addEventListener('DOMContentLoaded', function() {
         if (cloneToolbar) cloneToolbar.remove();
         cloneMenus.forEach(function(menu) { menu.remove(); });
         
+        // Mermaidコンテナをpre/codeに復元（再読み込み時に再描画可能にする）
+        restoreMermaidToPre(docClone);
+        
         var html = '<!DOCTYPE html>\n' + docClone.outerHTML;
         
         // 表示を復元
@@ -595,6 +634,9 @@ document.addEventListener('DOMContentLoaded', function() {
         // edit-modeクラスを除去
         content.classList.remove('edit-mode');
         
+        // Mermaidコンテナをpre/codeに復元
+        restoreMermaidToPre(content);
+        
         // id属性を除去（containerのid）
         content.removeAttribute('id');
         
@@ -726,7 +768,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (!content) content = container;
         
         // 対象要素を拡張（ul, ol, pre, blockquote を追加）
-        var elements = content.querySelectorAll('h1, h2, h3, h4, p, table, hr, ul, ol, pre, blockquote');
+        var elements = content.querySelectorAll('h1, h2, h3, h4, p, table, hr, ul, ol, pre, blockquote, .mermaid-container');
         
         // 処理済みの要素を追跡（ネストされたリストの重複処理を防ぐ）
         var processed = new Set();
@@ -779,34 +821,26 @@ document.addEventListener('DOMContentLoaded', function() {
                 lines = lines.concat(bqLines);
                 lines.push('');
                 processed.add(el);
+            } else if (el.classList && el.classList.contains('mermaid-container')) {
+                var mermaidSource = el.dataset.mermaidSource;
+                if (mermaidSource) {
+                    lines.push('```mermaid');
+                    lines.push(mermaidSource);
+                    lines.push('```');
+                    lines.push('');
+                }
+                processed.add(el);
             } else if (tag === 'TABLE') {
                 var rows = el.querySelectorAll('tr');
                 
-                // ヘッダー行から「選択肢」列のインデックスを特定
-                var choiceColIndex = -1;
-                if (rows.length > 0) {
-                    var headerCells = rows[0].querySelectorAll('th, td');
-                    headerCells.forEach(function(cell, index) {
-                        if (cell.textContent.trim() === '選択肢') {
-                            choiceColIndex = index;
-                        }
-                    });
-                }
-                
                 rows.forEach(function(row, rowIndex) {
                     var cells = row.querySelectorAll('th, td');
                     var cellTexts = [];
                     cells.forEach(function(cell, cellIndex) {
-                        var text;
-                        // 「選択肢」列かつデータ行の場合は<br>を / に変換
-                        if (cellIndex === choiceColIndex && rowIndex > 0) {
-                            var tempDiv = document.createElement('div');
-                            tempDiv.innerHTML = cell.innerHTML;
-                            tempDiv.innerHTML = tempDiv.innerHTML.replace(/<br\s*\/?>/gi, ' / ');
-                            text = tempDiv.textContent.trim();
-                        } else {
-                            text = cell.textContent.trim();
-                        }
+                        var tempDiv = document.createElement('div');
+                        tempDiv.innerHTML = cell.innerHTML;
+                        tempDiv.innerHTML = tempDiv.innerHTML.replace(/<br\s*\/?>/gi, ' / ');
+                        var text = tempDiv.textContent.trim();
                         cellTexts.push(text);
                     });
                     lines.push('| ' + cellTexts.join(' | ') + ' |');
@@ -895,7 +929,10 @@ document.addEventListener('DOMContentLoaded', function() {
         if (newWidth < 200) newWidth = 200;
         if (newWidth > 400) newWidth = 400;
         s.style.width = newWidth + 'px';
-        if (main) main.style.marginLeft = newWidth + 'px';
+        if (main) {
+            main.style.marginLeft = newWidth + 'px';
+            main.style.width = 'calc(100% - ' + newWidth + 'px)';
+        }
         updateResizerPosition();
     });
     
@@ -917,7 +954,10 @@ document.addEventListener('DOMContentLoaded', function() {
             resizerHtml = r.outerHTML;
             s.remove();
             r.remove();
-            if (main) main.style.marginLeft = '0';
+            if (main) {
+                main.style.marginLeft = '0';
+                main.style.width = '100%';
+            }
             sidebarExists = false;
         } else if (!sidebarExists && main) {
             main.insertAdjacentHTML('beforebegin', sidebarHtml);
@@ -925,6 +965,7 @@ document.addEventListener('DOMContentLoaded', function() {
             var newSidebar = document.querySelector('.sidebar');
             if (newSidebar) newSidebar.style.width = savedWidth + 'px';
             main.style.marginLeft = savedWidth + 'px';
+            main.style.width = 'calc(100% - ' + savedWidth + 'px)';
             setupResizer();
             updateResizerPosition();
             updateActiveLink();
@@ -1822,201 +1863,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
-    // ========== PDF出力 ==========
-    if (exportPdfBtn) exportPdfBtn.addEventListener('click', async function() {
-        var wasEditMode = isEditMode;
-        if (isEditMode && editModeBtn) editModeBtn.click();
-        
-        exportPdfBtn.textContent = '...';
-        
-        try {
-            // ライブラリ遅延読み込み
-            await ensurePdfLibraries();
-            
-            // jsPDFインスタンス作成
-            var { jsPDF } = window.jspdf;
-            var pdf = new jsPDF({
-                unit: 'mm',
-                format: 'a4',
-                orientation: 'portrait'
-            });
-            
-            var pageWidth = 210;
-            var pageHeight = 297;
-            var margin = 15;
-            var contentWidth = pageWidth - margin * 2;
-            var contentHeight = pageHeight - margin * 2;
-            var currentY = margin;
-            var currentPage = 1;
-            
-            // しおり情報
-            var bookmarks = [];
-            
-            // コンテンツを複製してPDF用に整形
-            var content = container.cloneNode(true);
-            
-            // ツールバーと右クリックメニューを除去
-            var toolbar = content.querySelector('.toolbar');
-            if (toolbar) toolbar.remove();
-            content.querySelectorAll('.context-menu').forEach(function(menu) {
-                menu.remove();
-            });
-            content.querySelectorAll('[contenteditable]').forEach(function(el) {
-                el.removeAttribute('contenteditable');
-            });
-            
-            // 一時的にDOMに追加（html2canvas用）
-            content.style.position = 'absolute';
-            content.style.left = '-9999px';
-            content.style.width = contentWidth * 3.78 + 'px'; // mm to px
-            content.style.background = 'white';
-            content.style.padding = '0';
-            document.body.appendChild(content);
-            
-            // h2で分割してセクションごとに処理
-            var allElements = content.querySelectorAll('h1, h2, h3, h4, p, ul, ol, pre, blockquote, table, hr');
-            var sections = [];
-            var currentSection = { elements: [], h2Text: null, h3List: [] };
-            
-            allElements.forEach(function(el) {
-                // ネストされたリストはスキップ（親リストで処理される）
-                if ((el.tagName === 'UL' || el.tagName === 'OL') && el.parentElement.closest('ul, ol')) {
-                    return;
-                }
-                
-                if (el.tagName === 'H2') {
-                    if (currentSection.elements.length > 0 || currentSection.h2Text) {
-                        sections.push(currentSection);
-                    }
-                    currentSection = { elements: [el], h2Text: el.textContent.trim(), h3List: [] };
-                } else if (el.tagName === 'H3') {
-                    currentSection.elements.push(el);
-                    currentSection.h3List.push({ text: el.textContent.trim(), pageNum: null });
-                } else {
-                    currentSection.elements.push(el);
-                }
-            });
-            if (currentSection.elements.length > 0) {
-                sections.push(currentSection);
-            }
-            
-            // 各セクションを処理
-            for (var i = 0; i < sections.length; i++) {
-                var section = sections[i];
-                
-                // セクション内の要素を一つのdivにまとめる
-                var sectionDiv = document.createElement('div');
-                sectionDiv.style.background = 'white';
-                sectionDiv.style.padding = '10px';
-                section.elements.forEach(function(el) {
-                    sectionDiv.appendChild(el.cloneNode(true));
-                });
-                content.innerHTML = '';
-                content.appendChild(sectionDiv);
-                
-                // html2canvasでキャプチャ
-                var canvas = await html2canvas(sectionDiv, {
-                    scale: 2,
-                    useCORS: true,
-                    backgroundColor: '#ffffff'
-                });
-                
-                var imgData = canvas.toDataURL('image/jpeg', 0.95);
-                var imgWidth = contentWidth;
-                var imgHeight = (canvas.height * imgWidth) / canvas.width;
-                
-                // ページに収まるかチェック
-                if (currentY + imgHeight > pageHeight - margin) {
-                    // 新しいページを追加
-                    pdf.addPage();
-                    currentPage++;
-                    currentY = margin;
-                }
-                
-                // セクションのh2をしおりに追加（ページ確定後）
-                if (section.h2Text) {
-                    bookmarks.push({
-                        text: section.h2Text,
-                        page: currentPage,
-                        level: 1,
-                        children: []
-                    });
-                }
-                
-                // h3のページ番号を記録
-                if (section.h3List.length > 0 && bookmarks.length > 0) {
-                    var parentBookmark = bookmarks[bookmarks.length - 1];
-                    section.h3List.forEach(function(h3) {
-                        parentBookmark.children.push({
-                            text: h3.text,
-                            page: currentPage,
-                            level: 2
-                        });
-                    });
-                }
-                
-                // 画像が大きすぎる場合は分割
-                if (imgHeight > contentHeight) {
-                    var remainingHeight = imgHeight;
-                    var sourceY = 0;
-                    
-                    while (remainingHeight > 0) {
-                        var drawHeight = Math.min(contentHeight - (currentY - margin), remainingHeight);
-                        var drawHeightPx = (drawHeight / imgHeight) * canvas.height;
-                        
-                        // キャンバスの一部を切り出し
-                        var partCanvas = document.createElement('canvas');
-                        partCanvas.width = canvas.width;
-                        partCanvas.height = drawHeightPx;
-                        var ctx = partCanvas.getContext('2d');
-                        ctx.drawImage(canvas, 0, sourceY, canvas.width, drawHeightPx, 0, 0, canvas.width, drawHeightPx);
-                        
-                        var partImgData = partCanvas.toDataURL('image/jpeg', 0.95);
-                        pdf.addImage(partImgData, 'JPEG', margin, currentY, imgWidth, drawHeight);
-                        
-                        sourceY += drawHeightPx;
-                        remainingHeight -= drawHeight;
-                        
-                        if (remainingHeight > 0) {
-                            pdf.addPage();
-                            currentPage++;
-                            currentY = margin;
-                        } else {
-                            currentY += drawHeight + 5;
-                        }
-                    }
-                } else {
-                    pdf.addImage(imgData, 'JPEG', margin, currentY, imgWidth, imgHeight);
-                    currentY += imgHeight + 5;
-                }
-            }
-            
-            // 一時要素を削除
-            document.body.removeChild(content);
-            
-            // しおりを追加
-            bookmarks.forEach(function(bm) {
-                var parent = pdf.outline.add(null, bm.text, { pageNumber: bm.page });
-                bm.children.forEach(function(child) {
-                    pdf.outline.add(parent, child.text, { pageNumber: child.page });
-                });
-            });
-            
-            // タイトル取得
-            var h1 = container.querySelector('h1');
-            var fileName = h1 ? h1.textContent.trim().replace(/[\\/:*?"<>|]/g, '_') : 'document';
-            
-            // PDF保存
-            pdf.save(fileName + '.pdf');
-            
-        } catch (error) {
-            console.error('PDF生成エラー:', error);
-            alert('PDF生成中にエラーが発生しました: ' + error.message);
-        }
-        
-        exportPdfBtn.textContent = '📕';
-        if (wasEditMode && editModeBtn) editModeBtn.click();
-    });
     
     // ========== Excel出力 ==========
     var fontSizes = {
@@ -2025,6 +1871,56 @@ document.addEventListener('DOMContentLoaded', function() {
         body: 12
     };
     
+    function svgToPngBase64(svgElement) {
+        return new Promise(function(resolve, reject) {
+            try {
+                // SVGの実サイズを取得
+                var rect = svgElement.getBoundingClientRect();
+                var svgWidth = rect.width || parseInt(svgElement.getAttribute('width')) || 800;
+                var svgHeight = rect.height || parseInt(svgElement.getAttribute('height')) || 400;
+                
+                // SVGクローンにサイズを明示設定（Image読み込み時に必要）
+                var cloneSvg = svgElement.cloneNode(true);
+                cloneSvg.setAttribute('width', svgWidth);
+                cloneSvg.setAttribute('height', svgHeight);
+                if (!cloneSvg.getAttribute('xmlns')) {
+                    cloneSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+                }
+                
+                var svgData = new XMLSerializer().serializeToString(cloneSvg);
+                var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+                var url = URL.createObjectURL(svgBlob);
+                
+                var img = new Image();
+                img.onload = function() {
+                    var scale = 2;
+                    var w = img.naturalWidth || svgWidth;
+                    var h = img.naturalHeight || svgHeight;
+                    var canvas = document.createElement('canvas');
+                    canvas.width = w * scale;
+                    canvas.height = h * scale;
+                    var ctx = canvas.getContext('2d');
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                    
+                    URL.revokeObjectURL(url);
+                    
+                    var dataUrl = canvas.toDataURL('image/png');
+                    var base64 = dataUrl.replace(/^data:image\/png;base64,/, '');
+                    resolve(base64);
+                };
+                img.onerror = function() {
+                    URL.revokeObjectURL(url);
+                    reject(new Error('SVG→PNG変換に失敗'));
+                };
+                img.src = url;
+            } catch (err) {
+                reject(err);
+            }
+        });
+    }
+    
     if (exportExcelBtn) exportExcelBtn.addEventListener('click', async function() {
         try {
             await convertToExcel();
@@ -2103,7 +1999,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (h2Elements.length === 0) {
             var h1 = content.querySelector('h1');
             var title = h1 ? h1.textContent.trim() : 'Sheet1';
-            var elements = content.querySelectorAll('h1, h2, h3, h4, p, table, hr, ul, ol, pre, blockquote');
+            var elements = content.querySelectorAll('h1, h2, h3, h4, p, table, hr, ul, ol, pre, blockquote, .mermaid-container');
             sections.push({
                 title: title,
                 elements: Array.from(elements),
@@ -2119,7 +2015,8 @@ document.addEventListener('DOMContentLoaded', function() {
             var next = h2.nextElementSibling;
             
             while (next && next.tagName !== 'H2' && next.tagName !== 'HR') {
-                if (['H3', 'H4', 'P', 'TABLE', 'UL', 'OL', 'PRE', 'BLOCKQUOTE'].includes(next.tagName)) {
+                if (['H3', 'H4', 'P', 'TABLE', 'UL', 'OL', 'PRE', 'BLOCKQUOTE'].includes(next.tagName) ||
+                    (next.classList && next.classList.contains('mermaid-container'))) {
                     elements.push(next);
                 }
                 next = next.nextElementSibling;
@@ -2266,6 +2163,45 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     async function processElement(worksheet, element, currentRow, maxColumns) {
+        // Mermaidコンテナの場合はDIVなのでclassで判定
+        if (element.classList && element.classList.contains('mermaid-container')) {
+            var svg = element.querySelector('svg');
+            if (svg) {
+                try {
+                    var pngBase64 = await svgToPngBase64(svg);
+                    var imageId = worksheet.workbook.addImage({
+                        base64: pngBase64,
+                        extension: 'png'
+                    });
+                    
+                    // SVGの実サイズからExcel上のサイズを計算（縦横比保持）
+                    var svgRect = svg.getBoundingClientRect();
+                    var svgW = svgRect.width || 800;
+                    var svgH = svgRect.height || 400;
+                    
+                    // Excel上の表示幅を600pxに制限し、縦横比を保持
+                    var maxWidthPx = 600;
+                    var displayW = Math.min(svgW, maxWidthPx);
+                    var displayH = svgH * (displayW / svgW);
+                    var rowsNeeded = Math.ceil(displayH / 20);
+                    
+                    worksheet.addImage(imageId, {
+                        tl: { col: 0, row: currentRow - 1 },
+                        ext: { width: displayW, height: displayH }
+                    });
+                    
+                    currentRow += rowsNeeded + 1;
+                } catch (err) {
+                    // 画像変換失敗時はテキストで代替
+                    var fallbackCell = worksheet.getCell(currentRow, 1);
+                    fallbackCell.value = '[Mermaid図]';
+                    fallbackCell.font = { name: 'メイリオ', size: fontSizes.body, italic: true, color: { argb: 'FF999999' } };
+                    currentRow++;
+                }
+            }
+            return currentRow;
+        }
+        
         var tag = element.tagName;
         
         switch (tag) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunny-html-editor",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "軽量WYSIWYGエディタ - 既存のHTMLに編集機能を後付けで追加、Markdown変換対応",
   "main": "html-editor.js",
   "files": [
@@ -13,7 +13,8 @@
     "editor",
     "html",
     "contenteditable",
-    "markdown"
+    "markdown",
+    "mermaid"
   ],
   "author": "",
   "license": "MIT"