sunny-html-editor 1.2.5 → 1.3.1

package/README.md

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

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.5
+ * @version 1.3.1
  */
 
 // ========== 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,41 +523,43 @@ 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保存 ==========
+    var EDITOR_CDN_BASE = 'https://cdn.jsdelivr.net/npm/sunny-html-editor@1.3.1';
+    
     if (saveHtmlBtn) saveHtmlBtn.addEventListener('click', function() {
         var wasEditMode = isEditMode;
         if (isEditMode && editModeBtn) editModeBtn.click();
         
-        // ツールバーとコンテキストメニューを一時的に非表示
-        var toolbar = container.querySelector('.toolbar');
-        var contextMenus = document.querySelectorAll('.context-menu');
-        
-        if (toolbar) toolbar.style.display = 'none';
-        contextMenus.forEach(function(menu) { menu.style.display = 'none'; });
-        
-        // HTML取得（ツールバーとコンテキストメニューを除外したクリーンなHTML）
-        var docClone = document.documentElement.cloneNode(true);
-        var cloneToolbar = docClone.querySelector('.toolbar');
-        var cloneMenus = docClone.querySelectorAll('.context-menu');
+        // コンテンツHTML取得（クリーン版）
+        var contentClone = container.cloneNode(true);
+        var cloneToolbar = contentClone.querySelector('.toolbar');
+        var cloneMenus = contentClone.querySelectorAll('.context-menu');
         if (cloneToolbar) cloneToolbar.remove();
         cloneMenus.forEach(function(menu) { menu.remove(); });
+        restoreMermaidToPre(contentClone);
+        var contentHtml = contentClone.innerHTML;
         
-        var html = '<!DOCTYPE html>\n' + docClone.outerHTML;
-        
-        // 表示を復元
-        if (toolbar) toolbar.style.display = '';
-        contextMenus.forEach(function(menu) { menu.style.display = ''; });
-        
-        if (wasEditMode && editModeBtn) editModeBtn.click();
-        
-        var blob = new Blob([html], { type: 'text/html; charset=utf-8' });
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        
+        // タイトル・ファイル名取得
         var h1Element = container.querySelector('h1');
+        var title = 'Design Spec';
         var fileName = 'design_spec';
         if (h1Element) {
+            title = h1Element.textContent.trim();
             fileName = h1Element.innerHTML
                 .replace(/<br\s*\/?>/gi, '-')
                 .replace(/<\/p>\s*<p>/gi, '-')
@@ -544,9 +567,36 @@ document.addEventListener('DOMContentLoaded', function() {
                 .replace(/\s+/g, '')
                 .trim();
         }
+        
+        // CDN参照の単一HTMLファイル組み立て
+        var html = '<!DOCTYPE html>\n' +
+            '<html lang="ja">\n' +
+            '<head>\n' +
+            '<meta charset="UTF-8">\n' +
+            '<title>' + title.replace(/</g, '&lt;') + '</title>\n' +
+            '<link rel="stylesheet" href="' + EDITOR_CDN_BASE + '/html-editor.css">\n' +
+            '</head>\n' +
+            '<body>\n' +
+            '<div class="layout">\n' +
+            '  <main class="main">\n' +
+            '    <div class="container" id="editorContainer">\n' +
+            contentHtml + '\n' +
+            '    </div>\n' +
+            '  </main>\n' +
+            '</div>\n' +
+            '<script src="' + EDITOR_CDN_BASE + '/html-editor.js"><\/script>\n' +
+            '</body>\n' +
+            '</html>';
+        
+        var blob = new Blob([html], { type: 'text/html; charset=utf-8' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
         a.download = fileName + '.html';
         a.click();
         URL.revokeObjectURL(url);
+        
+        if (wasEditMode && editModeBtn) editModeBtn.click();
     });
     
     // ========== Markdown出力 ==========
@@ -595,6 +645,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 +779,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 +832,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(' | ') + ' |');
@@ -1829,222 +1874,156 @@ 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;
-                }
+    
+    // ========== Excel出力 ==========
+    var fontSizes = {
+        heading: 14,
+        tableHeader: 13,
+        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;
                 
-                // セクションのh2をしおりに追加（ページ確定後）
-                if (section.h2Text) {
-                    bookmarks.push({
-                        text: section.h2Text,
-                        page: currentPage,
-                        level: 1,
-                        children: []
-                    });
+                // 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');
                 }
                 
-                // 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
-                        });
-                    });
-                }
+                var svgData = new XMLSerializer().serializeToString(cloneSvg);
+                var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+                var url = URL.createObjectURL(svgBlob);
                 
-                // 画像が大きすぎる場合は分割
-                if (imgHeight > contentHeight) {
-                    var remainingHeight = imgHeight;
-                    var sourceY = 0;
+                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);
                     
-                    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;
-                }
+                    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);
             }
+        });
+    }
+    
+    // Excel用のデータシリアライズ（Chrome拡張sandbox用）
+    async function serializeContentForExcel(sections, fileName) {
+        var data = { fileName: fileName, sections: [] };
+        
+        for (var s = 0; s < sections.length; s++) {
+            var section = sections[s];
+            var sectionData = { title: section.title, elements: [] };
             
-            // 一時要素を削除
-            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');
+            for (var e = 0; e < section.elements.length; e++) {
+                var elData = await serializeElement(section.elements[e]);
+                if (elData) sectionData.elements.push(elData);
+            }
             
-        } catch (error) {
-            console.error('PDF生成エラー:', error);
-            alert('PDF生成中にエラーが発生しました: ' + error.message);
+            data.sections.push(sectionData);
         }
         
-        exportPdfBtn.textContent = '📕';
-        if (wasEditMode && editModeBtn) editModeBtn.click();
-    });
+        return data;
+    }
     
-    // ========== Excel出力 ==========
-    var fontSizes = {
-        heading: 14,
-        tableHeader: 13,
-        body: 12
-    };
+    async function serializeElement(element) {
+        if (element.classList && element.classList.contains('mermaid-container')) {
+            var svg = element.querySelector('svg');
+            if (svg) {
+                try {
+                    var pngBase64 = await svgToPngBase64(svg);
+                    var svgRect = svg.getBoundingClientRect();
+                    return {
+                        tag: 'MERMAID', pngBase64: pngBase64,
+                        width: svgRect.width || 800, height: svgRect.height || 400
+                    };
+                } catch (err) {
+                    return { tag: 'MERMAID_FALLBACK' };
+                }
+            }
+            return null;
+        }
+        
+        var tag = element.tagName;
+        switch (tag) {
+            case 'H1': return { tag: 'H1', text: element.textContent.trim() };
+            case 'H2': return { tag: 'H2', text: element.textContent.trim(), styles: getElementStyles(element) };
+            case 'H3': return { tag: 'H3', text: element.textContent.trim(), styles: getElementStyles(element) };
+            case 'H4': return { tag: 'H4', text: element.textContent.trim(), styles: getElementStyles(element) };
+            case 'P':
+                var pText = element.textContent.trim();
+                return pText ? { tag: 'P', text: pText } : null;
+            case 'TABLE':
+                return serializeTable(element);
+            case 'UL':
+            case 'OL':
+                return { tag: tag, lines: processListToExcelText(element, '') };
+            case 'PRE':
+                var codeEl = element.querySelector('code');
+                var codeText = codeEl ? codeEl.textContent : element.textContent;
+                return codeText ? { tag: 'PRE', text: codeText } : null;
+            case 'BLOCKQUOTE':
+                var bqText = element.textContent.trim();
+                return bqText ? { tag: 'BLOCKQUOTE', text: bqText } : null;
+            case 'HR': return { tag: 'HR' };
+            default: return null;
+        }
+    }
+    
+    function serializeTable(table) {
+        var rows = table.querySelectorAll('tr');
+        var tableData = { tag: 'TABLE', rows: [] };
+        rows.forEach(function(tr) {
+            var cells = tr.querySelectorAll('th, td');
+            var rowData = [];
+            cells.forEach(function(cell) {
+                rowData.push({
+                    text: cell.textContent.trim(),
+                    isHeader: cell.tagName === 'TH',
+                    colspan: parseInt(cell.getAttribute('colspan')) || 1
+                });
+            });
+            tableData.rows.push(rowData);
+        });
+        return tableData;
+    }
     
     if (exportExcelBtn) exportExcelBtn.addEventListener('click', async function() {
         try {
             await convertToExcel();
         } catch (error) {
             console.error('Excel変換エラー:', error);
-            alert('Excel変換中にエラーが発生しました: ' + error.message);
+            var errMsg = error ? (error.message || error.toString()) : 'unknown';
+            alert('Excel変換中にエラーが発生しました: ' + errMsg);
         }
     });
     
     async function convertToExcel() {
-        // ライブラリ遅延読み込み
-        await ensureExcelLibrary();
-        
         var content = container.querySelector('.content');
         if (!content) content = container;
         
@@ -2055,6 +2034,33 @@ document.addEventListener('DOMContentLoaded', function() {
             return;
         }
         
+        // ファイル名取得
+        var h1Element = container.querySelector('h1');
+        var fileName = 'design_spec';
+        if (h1Element) {
+            fileName = h1Element.innerHTML
+                .replace(/<br\s*\/?>/gi, '-')
+                .replace(/<\/p>\s*<p>/gi, '-')
+                .replace(/<[^>]*>/g, '')
+                .replace(/\s+/g, '')
+                .trim();
+        }
+        
+        // Chrome拡張のsandboxモード（window.__excelSandboxが設定されている場合）
+        if (window.__excelSandbox) {
+            var data = await serializeContentForExcel(sections, fileName);
+            await window.__excelSandbox(data);
+            return;
+        }
+        
+        // 通常モード（Web版 - CDNからExcelJS読み込み）
+        await ensureExcelLibrary();
+        
+        if (!window.ExcelJS) {
+            alert('ExcelJSライブラリが読み込めませんでした');
+            return;
+        }
+        
         var workbook = new ExcelJS.Workbook();
         workbook.creator = 'Design Editor';
         workbook.created = new Date();
@@ -2110,7 +2116,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),
@@ -2126,7 +2132,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;
@@ -2273,6 +2280,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.5",
+  "version": "1.3.1",
   "description": "軽量WYSIWYGエディタ - 既存のHTMLに編集機能を後付けで追加、Markdown変換対応",
   "main": "html-editor.js",
   "files": [
@@ -13,7 +13,8 @@
     "editor",
     "html",
     "contenteditable",
-    "markdown"
+    "markdown",
+    "mermaid"
   ],
   "author": "",
   "license": "MIT"