npm - sunny-html-editor - Versions diffs - 1.0.3 → 1.2.0 - Mend

sunny-html-editor 1.0.3 → 1.2.0

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 (3) hide show

package/README.md CHANGED Viewed

@@ -1,94 +1,85 @@
 # Sunny HTML Editor
-軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。
+軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。Markdown変換にも対応。
 ## 特徴
-- **自己完結型** - 基本機能は外部依存なし
+- **自己完結型** - ツールバー・コンテキストメニューを自動生成
+- **Markdown変換** - `data-markdown`属性でMDテキストを自動変換
+- **遅延読み込み** - Excel/PDF出力用ライブラリは使用時に自動読み込み
 - **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
 - **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
 - **多彩なエクスポート** - Markdown、HTML、Excel、PDF
 - **サイドバーナビ** - 目次自動生成
-## 外部ライブラリ依存
-### 必須
-なし（基本機能のみ使用する場合）
-### オプション（Excel/PDF出力に必要）
-| ライブラリ | バージョン | 用途 | CDN |
-|-----------|----------|------|-----|
-| ExcelJS | 4.3.0+ | Excel出力 | https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js |
-| jsPDF | 2.5.1+ | PDF出力 | https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js |
-| html2canvas | 1.4.1+ | PDF出力（HTML→Canvas変換） | https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js |
+## インストール
-Excel/PDF出力を使う場合は、html-editor.jsより**前に**読み込んでください：
+### CDN（推奨）
 ```html
-<!-- 外部ライブラリ（Excel/PDF出力に必要） -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-<!-- HTML Editor -->
-<link rel="stylesheet" href="html-editor.css">
-<script src="html-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
+<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
 ```
-## インストール
 ### npm
 ```bash
 npm install sunny-html-editor
 ```
-### CDN
-```html
-<link rel="stylesheet" href="https://unpkg.com/sunny-html-editor/html-editor.css">
-<script src="https://unpkg.com/sunny-html-editor/html-editor.js"></script>
-```
-### ダウンロード
-`html-editor.css` と `html-editor.js` をダウンロードして読み込み。
 ## 使い方
-### 基本
+### 基本（HTMLコンテンツ）
+`id="editorContainer"` を持つコンテナを用意するだけ。ツールバーとコンテキストメニューは自動生成されます。
 ```html
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
-    <link rel="stylesheet" href="html-editor.css">
+<meta charset="UTF-8">
+<title>ドキュメントタイトル</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
 </head>
 <body>
-    <div id="content">
-        <h1>タイトル</h1>
-        <p>既存のHTMLコンテンツ</p>
-    </div>
-    <script src="html-editor.js"></script>
-    <script>
-        HtmlEditor.init('#content');
-    </script>
+<div class="layout">
+    <main class="main">
+        <div class="container" id="editorContainer">
+            <h1>タイトル</h1>
+            <h2 id="section1">見出し</h2>
+            <p>本文...</p>
+        </div>
+    </main>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
 </body>
 </html>
 ```
-### オプション
+### Markdown変換モード
+`data-markdown`属性にURLエンコードしたMarkdownテキストを設定すると、自動でHTMLに変換されます。
-```javascript
-HtmlEditor.init('#content', {
-    sidebar: true,   // サイドバー表示（デフォルト: true）
-    toolbar: true    // ツールバー表示（デフォルト: true）
-});
+```html
+<div class="container" id="editorContainer" data-markdown="URLエンコードされたMDテキスト"></div>
 ```
+JavaScript側で自動的に：
+1. `data-markdown`属性をデコード
+2. Markdown → HTML変換
+3. コンテナ内にHTMLを生成
+4. `data-markdown`属性を削除（HTML保存時に残らないように）
+## 外部ライブラリ
+Excel/PDF出力に必要なライブラリは**使用時に自動で読み込まれます**。事前の読み込みは不要です。
+| ライブラリ | 用途 |
+|-----------|------|
+| ExcelJS | Excel出力 |
+| jsPDF | PDF出力 |
+| html2canvas | PDF出力（HTML→Canvas変換） |
 ## キーボードショートカット
 | キー | 動作 |
@@ -113,64 +104,34 @@ HtmlEditor.init('#content', {
 テーブル上では行/列の追加・削除も可能。
-## エクスポート
-### Markdown
-```javascript
-// ツールバーのⓂ️ボタン、または Ctrl+M
-// クリップボードにコピーされます
-```
-### HTML
-```javascript
-// ツールバーの🌐ボタン
-// クリップボードにコピーされます
-```
-### HTML保存
-```javascript
-// ツールバーの💾ボタン
-// HTMLファイルとしてダウンロード
-```
+## ツールバーボタン
-### Excel / PDF
+| ボタン | 機能 |
+|--------|------|
+| ↔️ | サイドバー表示/非表示 |
+| 📝 | 編集モード切替 |
+| Ⓜ️ | Markdownコピー |
+| 🌐 | HTMLコピー |
+| 💾 | HTML保存（ダウンロード） |
+| 📊 | Excel出力 |
+| 📕 | PDF出力 |
-上記の外部ライブラリが読み込まれている必要があります。
-読み込まれていない場合、ボタンを押すとアラートが表示されます。
+## バージョン履歴
-## API
-### HtmlEditor.init(selector, options)
-エディタを初期化します。
-- `selector` - コンテナ要素のセレクタまたはDOM要素
-- `options` - オプションオブジェクト
-### 返り値
-HtmlEditorインスタンスを返します。
-```javascript
-var editor = HtmlEditor.init('#content');
-// 編集モード切替
-editor._action_editMode();
-// サイドバー更新
-editor._updateSidebar();
-```
+- **1.2.0** - Markdown変換機能追加（`data-markdown`属性対応）
+- **1.1.0** - ツールバー・コンテキストメニュー自動生成、外部ライブラリ遅延読み込み
+- **1.0.3** - nullチェック強化
+- **1.0.2** - DOMContentLoaded自動初期化
+- **1.0.1** - メディアクエリ削除
+- **1.0.0** - 初回リリース
 ## ブラウザ対応
-- Chrome (推奨)
+- Chrome（推奨）
 - Firefox
 - Safari
 - Edge
 ## ライセンス
-MIT
+MIT License - OnMax Group

package/html-editor.js CHANGED Viewed

@@ -1,11 +1,471 @@
 /**
  * Sunny HTML Editor - 軽量WYSIWYGエディタ
- * @version 1.0.3
+ * @version 1.1.0
  */
+// ========== HTML生成関数 ==========
+function getToolbarHtml() {
+    return '<div class="toolbar">' +
+        '<button id="toggleSidebar" title="サイドメニュー表示/非表示 (Ctrl+B)">↔️</button>' +
+        '<button id="editMode" title="編集モード (Ctrl+E)">📝</button>' +
+        '<button id="exportMd" title="Markdownコピー (Ctrl+M)">Ⓜ️</button>' +
+        '<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>';
+}
+function getContextMenusHtml() {
+    // テーブル用
+    var tableMenu = '<div class="context-menu" id="contextMenu">' +
+        '<div class="context-menu-item" data-action="addRowBelow">＋ 行を追加</div>' +
+        '<div class="context-menu-item" data-action="addColRight">＋ 列を追加</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteRow">🗑 行を削除</div>' +
+        '<div class="context-menu-item delete" data-action="deleteCol">🗑 列を削除</div>' +
+        '<div class="context-menu-item delete" data-action="deleteTable">🗑 テーブルを削除</div>' +
+        '<div class="context-menu-divider thick"></div>' +
+        '<div class="context-menu-item" data-action="addH2">＋ 大見出し</div>' +
+        '<div class="context-menu-item" data-action="addH3">＋ 中見出し</div>' +
+        '<div class="context-menu-item" data-action="addH4">＋ 小見出し</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addTableBelow">＋ テーブル</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addParagraph">＋ 本文</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addUl">＋ 箇条書き</div>' +
+        '<div class="context-menu-item" data-action="addOl">＋ 番号リスト</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addPre">＋ コードブロック</div>' +
+        '<div class="context-menu-item" data-action="addBlockquote">＋ 引用</div>' +
+    '</div>';
+    // 共通メニュー項目
+    var commonItems =
+        '<div class="context-menu-item" data-action="addH2">＋ 大見出し</div>' +
+        '<div class="context-menu-item" data-action="addH3">＋ 中見出し</div>' +
+        '<div class="context-menu-item" data-action="addH4">＋ 小見出し</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addTable">＋ テーブル</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addParagraph">＋ 本文</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addUl">＋ 箇条書き</div>' +
+        '<div class="context-menu-item" data-action="addOl">＋ 番号リスト</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addPre">＋ コードブロック</div>' +
+        '<div class="context-menu-item" data-action="addBlockquote">＋ 引用</div>';
+    // h1用
+    var h1Menu = '<div class="context-menu" id="h1ContextMenu">' + commonItems + '</div>';
+    // 見出し用
+    var headingMenu = '<div class="context-menu" id="headingContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteSection">🗑 セクションを削除</div>' +
+    '</div>';
+    // 段落用
+    var paragraphMenu = '<div class="context-menu" id="paragraphContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteParagraph">🗑 本文を削除</div>' +
+    '</div>';
+    // リスト用
+    var listMenu = '<div class="context-menu" id="listContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteList">🗑 リストを削除</div>' +
+    '</div>';
+    // コードブロック用
+    var preMenu = '<div class="context-menu" id="preContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deletePre">🗑 コードブロックを削除</div>' +
+    '</div>';
+    // 引用用
+    var blockquoteMenu = '<div class="context-menu" id="blockquoteContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteBlockquote">🗑 引用を削除</div>' +
+    '</div>';
+    return tableMenu + h1Menu + headingMenu + paragraphMenu + listMenu + preMenu + blockquoteMenu;
+}
+// ========== 外部ライブラリ遅延読み込み ==========
+var libraryPromises = {};
+function loadScript(src) {
+    if (libraryPromises[src]) return libraryPromises[src];
+    libraryPromises[src] = new Promise(function(resolve, reject) {
+        var script = document.createElement('script');
+        script.src = src;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+    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');
+    }
+    if (!window.html2canvas) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js');
+    }
+}
+async function ensureExcelLibrary() {
+    if (!window.ExcelJS) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js');
+    }
+}
+// ========== Markdown → HTML 変換 ==========
+function convertMarkdownToHtml(md) {
+    var html = md;
+    var h2Counter = 0;
+    var h3Counter = 0;
+    var docTitle = '';
+    // コードブロックを一時退避
+    var codeBlocks = [];
+    html = html.replace(/```(\w*)[\r\n]+([\s\S]*?)```/g, function(match, lang, code) {
+        codeBlocks.push({lang: lang, code: mdTrim(code)});
+        return "\n\x00CODEBLOCK" + (codeBlocks.length - 1) + "\x00\n";
+    });
+    // インラインコードを一時退避
+    var inlineCodes = [];
+    html = html.replace(/`([^`\r\n]+)`/g, function(match, code) {
+        inlineCodes.push(code);
+        return "\x00INLINE" + (inlineCodes.length - 1) + "\x00";
+    });
+    // テーブルを一時退避
+    var tables = [];
+    html = html.replace(/(^\|.+\|$[\r\n]*)+/gm, function(tableMatch) {
+        var rows = mdTrim(tableMatch).split(/\r?\n/);
+        var validRows = [];
+        for (var i = 0; i < rows.length; i++) {
+            var r = mdTrim(rows[i]);
+            if (r) validRows.push(r);
+        }
+        if (validRows.length < 2) return tableMatch;
+        var separatorRow = validRows[1];
+        if (!/^\|[\s\-:|]+\|$/.test(separatorRow)) return tableMatch;
+        var headers = parseTableRow(validRows[0]);
+        var dataRows = [];
+        for (var i = 2; i < validRows.length; i++) {
+            dataRows.push(parseTableRow(validRows[i]));
+        }
+        tables.push({headers: headers, rows: dataRows});
+        return "\n\x00TABLE" + (tables.length - 1) + "\x00\n";
+    });
+    // 引用ブロックを一時退避
+    var blockquotes = [];
+    html = html.replace(/(^>.*(\r?\n|$))+/gm, function(match) {
+        var lines = match.split(/\r?\n/);
+        var content = [];
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i].replace(/^>\s?/, '');
+            if (line) content.push(line);
+        }
+        blockquotes.push(content.join('\n'));
+        return "\n\x00QUOTE" + (blockquotes.length - 1) + "\x00\n";
+    });
+    // 水平線
+    html = html.replace(/^(-{3,}|\*{3,}|_{3,})$/gm, '<hr>');
+    // 見出し変換
+    var lines = html.split(/\r?\n/);
+    for (var i = 0; i < lines.length; i++) {
+        var line = lines[i];
+        if (/^#\s+/.test(line) && !/^##/.test(line)) {
+            line = line.replace(/^#\s+(.+)$/, function(match, title) {
+                docTitle = title;
+                var displayTitle = title.replace(/\s*-\s*/g, '<br>');
+                return '<h1>' + displayTitle + '</h1>';
+            });
+        }
+        else if (/^##\s+/.test(line) && !/^###/.test(line)) {
+            line = line.replace(/^##\s+(.+)$/, function(match, title) {
+                h2Counter++;
+                h3Counter = 0;
+                var sectionId = 'section' + h2Counter;
+                return '<h2 id="' + sectionId + '">' + title + '</h2>';
+            });
+        }
+        else if (/^###\s+/.test(line) && !/^####/.test(line)) {
+            line = line.replace(/^###\s+(.+)$/, function(match, title) {
+                h3Counter++;
+                var sectionId = 'section' + h2Counter + '-' + h3Counter;
+                return '<h3 id="' + sectionId + '">' + title + '</h3>';
+            });
+        }
+        else if (/^####\s+/.test(line) && !/^#####/.test(line)) {
+            line = line.replace(/^####\s+(.+)$/, '<h4>$1</h4>');
+        }
+        else if (/^#####\s+/.test(line)) {
+            line = line.replace(/^#####\s+(.+)$/, '<h5>$1</h5>');
+        }
+        lines[i] = line;
+    }
+    html = lines.join('\n');
+    // リスト変換
+    html = convertMdLists(html);
+    // インライン要素変換
+    html = convertMdInline(html);
+    // 段落変換
+    html = convertMdParagraphs(html);
+    // インラインコード復元
+    for (var i = 0; i < inlineCodes.length; i++) {
+        html = html.split("\x00INLINE" + i + "\x00").join('<code>' + escapeHtmlForMd(inlineCodes[i]) + '</code>');
+    }
+    // コードブロック復元
+    for (var i = 0; i < codeBlocks.length; i++) {
+        var lang = codeBlocks[i].lang ? ' class="language-' + codeBlocks[i].lang + '"' : '';
+        var codeHtml = '<pre><code' + lang + '>' + escapeHtmlForMd(codeBlocks[i].code) + '</code></pre>';
+        html = html.split("<p>\x00CODEBLOCK" + i + "\x00</p>").join(codeHtml);
+        html = html.split("\x00CODEBLOCK" + i + "\x00").join(codeHtml);
+    }
+    // テーブル復元
+    for (var i = 0; i < tables.length; i++) {
+        var t = tables[i];
+        var colCount = t.headers.length;
+        var tableClass = '';
+        if (colCount === 2) tableClass = ' class="table-2col"';
+        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';
+        }
+        tableHtml += '</tr>\n';
+        for (var j = 0; j < t.rows.length; j++) {
+            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>');
+                tableHtml += '<td>' + cellContent + '</td>\n';
+            }
+            tableHtml += '</tr>\n';
+        }
+        tableHtml += '</table>';
+        html = html.split("<p>\x00TABLE" + i + "\x00</p>").join(tableHtml);
+        html = html.split("\x00TABLE" + i + "\x00").join(tableHtml);
+    }
+    // 引用ブロック復元
+    for (var i = 0; i < blockquotes.length; i++) {
+        var quoteContent = convertMdInline(escapeHtmlForMd(blockquotes[i])).split('\n').join('<br>');
+        var quoteHtml = '<blockquote>' + quoteContent + '</blockquote>';
+        html = html.split("<p>\x00QUOTE" + i + "\x00</p>").join(quoteHtml);
+        html = html.split("\x00QUOTE" + i + "\x00").join(quoteHtml);
+    }
+    // インラインコードの再復元
+    for (var i = 0; i < inlineCodes.length; i++) {
+        html = html.split("\x00INLINE" + i + "\x00").join('<code>' + escapeHtmlForMd(inlineCodes[i]) + '</code>');
+    }
+    return { html: html, title: docTitle };
+}
+function convertMdLists(html) {
+    var lines = html.split(/\r?\n/);
+    var result = [];
+    var i = 0;
+    while (i < lines.length) {
+        var line = lines[i];
+        if (/^(\s*)\d+\.\s+/.test(line)) {
+            var listResult = parseMdNestedList(lines, i, 'ol');
+            result.push(listResult.html);
+            i = listResult.nextIndex;
+            continue;
+        }
+        if (/^(\s*)[\-\*]\s+/.test(line)) {
+            var listResult = parseMdNestedList(lines, i, 'ul');
+            result.push(listResult.html);
+            i = listResult.nextIndex;
+            continue;
+        }
+        result.push(line);
+        i++;
+    }
+    return result.join('\n');
+}
+function parseMdNestedList(lines, startIndex, listType) {
+    var result = [];
+    var i = startIndex;
+    var baseIndent = getMdIndent(lines[startIndex]);
+    result.push('<' + listType + '>');
+    while (i < lines.length) {
+        var line = lines[i];
+        var currentIndent = getMdIndent(line);
+        var trimmedLine = mdTrim(line);
+        if (trimmedLine === '') break;
+        if (currentIndent < baseIndent && trimmedLine !== '') break;
+        if (currentIndent === baseIndent) {
+            var itemMatch = trimmedLine.match(/^[\-\*]\s+(.+)$/) || trimmedLine.match(/^\d+\.\s+(.+)$/);
+            if (itemMatch) {
+                var hasNested = false;
+                if (i + 1 < lines.length) {
+                    var nextIndent = getMdIndent(lines[i + 1]);
+                    var nextTrimmed = mdTrim(lines[i + 1]);
+                    if (nextIndent > currentIndent && (nextTrimmed.match(/^[\-\*]\s+/) || nextTrimmed.match(/^\d+\.\s+/))) {
+                        hasNested = true;
+                    }
+                }
+                if (hasNested) {
+                    result.push('<li>' + itemMatch[1]);
+                    var nestedType = mdTrim(lines[i + 1]).match(/^\d+\.\s+/) ? 'ol' : 'ul';
+                    var nestedResult = parseMdNestedList(lines, i + 1, nestedType);
+                    result.push(nestedResult.html);
+                    result.push('</li>');
+                    i = nestedResult.nextIndex;
+                    continue;
+                } else {
+                    result.push('<li>' + itemMatch[1] + '</li>');
+                }
+            } else { break; }
+        }
+        else if (currentIndent > baseIndent) {
+            var nestedType = trimmedLine.match(/^\d+\.\s+/) ? 'ol' : 'ul';
+            var nestedResult = parseMdNestedList(lines, i, nestedType);
+            result.push(nestedResult.html);
+            i = nestedResult.nextIndex;
+            continue;
+        }
+        i++;
+    }
+    result.push('</' + listType + '>');
+    return { html: result.join('\n'), nextIndex: i };
+}
+function convertMdInline(text) {
+    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    text = text.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    return text;
+}
+function convertMdParagraphs(html) {
+    var lines = html.split(/\r?\n/);
+    var result = [];
+    var para = [];
+    for (var i = 0; i < lines.length; i++) {
+        var line = mdTrim(lines[i]);
+        if (line === '') {
+            if (para.length > 0) {
+                result.push(wrapMdParagraph(para.join(' ')));
+                para = [];
+            }
+        } else if (isMdBlockElement(line)) {
+            if (para.length > 0) {
+                result.push(wrapMdParagraph(para.join(' ')));
+                para = [];
+            }
+            result.push(line);
+        } else {
+            para.push(line);
+        }
+    }
+    if (para.length > 0) {
+        result.push(wrapMdParagraph(para.join(' ')));
+    }
+    return result.join('\n');
+}
+function isMdBlockElement(line) {
+    return /^<(h[1-5]|ul|ol|li|\/ul|\/ol|hr|table|blockquote|pre)/.test(line) ||
+           /^\x00(CODEBLOCK|TABLE|QUOTE)\d+\x00$/.test(line);
+}
+function wrapMdParagraph(content) {
+    if (/^<(h[1-5]|ul|ol|li|hr|table|blockquote|pre)/.test(content)) return content;
+    if (/^\x00(CODEBLOCK|TABLE|QUOTE)\d+\x00$/.test(content)) return content;
+    return '<p>' + content + '</p>';
+}
+function parseTableRow(row) {
+    var cells = row.split('|');
+    var result = [];
+    for (var i = 1; i < cells.length - 1; i++) {
+        result.push(mdTrim(cells[i]));
+    }
+    return result;
+}
+function getMdIndent(line) {
+    var match = line.match(/^(\s*)/);
+    return match ? match[1].length : 0;
+}
+function mdTrim(str) {
+    return str.replace(/^\s+|\s+$/g, '');
+}
+function escapeHtmlForMd(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+// ========== 初期化 ==========
 document.addEventListener('DOMContentLoaded', function() {
     var container = document.getElementById('editorContainer');
-    if (!container) return; // editorContainerがなければ何もしない
+    if (!container) return;
+    // data-markdown属性があればMD→HTML変換
+    var markdownData = container.dataset.markdown;
+    if (markdownData) {
+        var decoded = decodeURIComponent(markdownData);
+        var result = convertMarkdownToHtml(decoded);
+        container.innerHTML = result.html;
+        // タイトル更新
+        if (result.title) {
+            document.title = result.title;
+        }
+        // 変換後は属性を削除（HTML保存時に巨大な属性が残らないように）
+        container.removeAttribute('data-markdown');
+    }
+    // ツールバー挿入
+    container.insertAdjacentHTML('afterbegin', getToolbarHtml());
+    // コンテキストメニュー挿入（bodyの末尾に配置）
+    document.body.insertAdjacentHTML('beforeend', getContextMenusHtml());
+    // ボタン参照取得
     var editModeBtn = document.getElementById('editMode');
     var toggleSidebarBtn = document.getElementById('toggleSidebar');
     var saveHtmlBtn = document.getElementById('saveHtml');
@@ -47,7 +507,25 @@ document.addEventListener('DOMContentLoaded', function() {
         var wasEditMode = isEditMode;
         if (isEditMode && editModeBtn) editModeBtn.click();
-        var html = '<!DOCTYPE html>\n' + document.documentElement.outerHTML;
+        // ツールバーとコンテキストメニューを一時的に非表示
+        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');
+        if (cloneToolbar) cloneToolbar.remove();
+        cloneMenus.forEach(function(menu) { menu.remove(); });
+        var html = '<!DOCTYPE html>\n' + docClone.outerHTML;
+        // 表示を復元
+        if (toolbar) toolbar.style.display = '';
+        contextMenus.forEach(function(menu) { menu.style.display = ''; });
         if (wasEditMode && editModeBtn) editModeBtn.click();
@@ -104,7 +582,7 @@ document.addEventListener('DOMContentLoaded', function() {
         var toolbar = content.querySelector('.toolbar');
         if (toolbar) toolbar.remove();
-        // 右クリックメニューを除去
+        // 右クリックメニューを除去（念のため）
         content.querySelectorAll('.context-menu').forEach(function(menu) {
             menu.remove();
         });
@@ -130,41 +608,23 @@ document.addEventListener('DOMContentLoaded', function() {
         var h1 = container.querySelector('h1');
         var title = h1 ? h1.textContent.trim() : 'Document';
-        // CSSを取得（サイドバー、リサイザー、ツールバー、右クリックメニュー関連を除外）
-        var styleEl = document.querySelector('style');
-        var css = '';
-        if (styleEl) {
-            css = styleEl.textContent
-                .replace(/\.sidebar[\s\S]*?\}\n/g, '')
-                .replace(/\.sidebar [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.resizer[\s\S]*?\}\n/g, '')
-                .replace(/\.toolbar[\s\S]*?\}\n/g, '')
-                .replace(/\.toolbar [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.context-menu[\s\S]*?\}\n/g, '')
-                .replace(/\.context-menu[^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.edit-mode[\s\S]*?\}\n/g, '')
-                .replace(/\.edit-mode [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/@media[^{]*\{[\s\S]*?\}\s*\}/g, '')
-                .replace(/\n\s*\n/g, '\n')
-                .trim();
-        }
-        // 完全なHTML構造（CSS含む、ラッパー構造含む）
+        // 完全なHTML構造（外部CSS/JS参照付き）
         var html = '<!DOCTYPE html>\n' +
             '<html lang="ja">\n' +
             '<head>\n' +
-            '    <meta charset="UTF-8">\n' +
-            '    <title>' + title + '</title>\n' +
-            '<style>\n' + css + '\n</style>\n' +
+            '<meta charset="UTF-8">\n' +
+            '<title>' + title + '</title>\n' +
+            '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">\n' +
             '</head>\n' +
             '<body>\n' +
             '<div class="layout">\n' +
-            '    <main class="main">\n' +
-            '        <div class="container">\n' +
+            '<main class="main">\n' +
+            '<div class="container" id="editorContainer">\n' +
             innerHtml + '\n' +
-            '        </div>\n' +
-            '    </main>\n' +
             '</div>\n' +
+            '</main>\n' +
+            '</div>\n' +
+            '<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"><\/script>\n' +
             '</body>\n' +
             '</html>';
@@ -1371,6 +1831,9 @@ document.addEventListener('DOMContentLoaded', function() {
         exportPdfBtn.textContent = '...';
         try {
+            // ライブラリ遅延読み込み
+            await ensurePdfLibraries();
             // jsPDFインスタンス作成
             var { jsPDF } = window.jspdf;
             var pdf = new jsPDF({
@@ -1573,6 +2036,9 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     async function convertToExcel() {
+        // ライブラリ遅延読み込み
+        await ensureExcelLibrary();
         var content = container.querySelector('.content');
         if (!content) content = container;

package/package.json CHANGED Viewed

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