sunny-html-editor 1.1.0 → 1.2.0

package/README.md

@@ -1,10 +1,11 @@
 # Sunny HTML Editor
 
-軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。
+軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。Markdown変換にも対応。
 
 ## 特徴
 
 - **自己完結型** - ツールバー・コンテキストメニューを自動生成
+- **Markdown変換** - `data-markdown`属性でMDテキストを自動変換
 - **遅延読み込み** - Excel/PDF出力用ライブラリは使用時に自動読み込み
 - **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
 - **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
@@ -28,6 +29,8 @@ npm install sunny-html-editor
 
 ## 使い方
 
+### 基本（HTMLコンテンツ）
+
 `id="editorContainer"` を持つコンテナを用意するだけ。ツールバーとコンテキストメニューは自動生成されます。
 
 ```html
@@ -53,6 +56,20 @@ npm install sunny-html-editor
 </html>
 ```
 
+### Markdown変換モード
+
+`data-markdown`属性にURLエンコードしたMarkdownテキストを設定すると、自動でHTMLに変換されます。
+
+```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出力に必要なライブラリは**使用時に自動で読み込まれます**。事前の読み込みは不要です。
@@ -101,6 +118,7 @@ Excel/PDF出力に必要なライブラリは**使用時に自動で読み込ま
 
 ## バージョン履歴
 
+- **1.2.0** - Markdown変換機能追加（`data-markdown`属性対応）
 - **1.1.0** - ツールバー・コンテキストメニュー自動生成、外部ライブラリ遅延読み込み
 - **1.0.3** - nullチェック強化
 - **1.0.2** - DOMContentLoaded自動初期化

package/html-editor.js

@@ -125,11 +125,340 @@ async function ensureExcelLibrary() {
     }
 }
 
+// ========== 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;
     
+    // 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());
     

package/package.json

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