npm - sunny-html-editor - Versions diffs - 1.3.0 → 1.3.1 - Mend

sunny-html-editor 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/html-editor.js +149 -32
package/package.json +1 -1

package/html-editor.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Sunny HTML Editor - 軽量WYSIWYGエディタ
- * @version 1.3.0
+ * @version 1.3.1
  */
 // ========== HTML生成関数 ==========
@@ -539,43 +539,27 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     // ========== 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;
-        // Mermaidコンテナをpre/codeに復元（再読み込み時に再描画可能にする）
-        restoreMermaidToPre(docClone);
-        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, '-')
@@ -583,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出力 ==========
@@ -1921,19 +1932,98 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
+    // 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: [] };
+            for (var e = 0; e < section.elements.length; e++) {
+                var elData = await serializeElement(section.elements[e]);
+                if (elData) sectionData.elements.push(elData);
+            }
+            data.sections.push(sectionData);
+        }
+        return data;
+    }
+    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;
@@ -1944,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();

package/package.json CHANGED Viewed

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