sunny-html-editor 1.2.2 → 1.2.4

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
  1. package/README.md +4 -128
  2. package/html-editor.js +4 -5
  3. package/package.json +2 -15
package/README.md CHANGED
@@ -1,138 +1,14 @@
1
1
  # Sunny HTML Editor
2
2
 
3
- 軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。Markdown変換にも対応。
4
-
5
- ## 特徴
6
-
7
- - **自己完結型** - ツールバー・コンテキストメニューを自動生成
8
- - **Markdown変換** - `data-markdown`属性でMDテキストを自動変換
9
- - **遅延読み込み** - Excel/PDF出力用ライブラリは使用時に自動読み込み
10
- - **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
11
- - **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
12
- - **多彩なエクスポート** - Markdown、HTML、Excel、PDF
13
- - **サイドバーナビ** - 目次自動生成
14
-
15
- ## インストール
16
-
17
- ### CDN（推奨）
18
-
19
- ```html
20
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
21
- <script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
22
- ```
23
-
24
- ### npm
25
-
26
- ```bash
27
- npm install sunny-html-editor
28
- ```
29
-
30
- ## 使い方
31
-
32
- ### 基本（HTMLコンテンツ）
33
-
34
- `id="editorContainer"` を持つコンテナを用意するだけ。ツールバーとコンテキストメニューは自動生成されます。
35
-
36
- ```html
37
- <!DOCTYPE html>
38
- <html lang="ja">
39
- <head>
40
- <meta charset="UTF-8">
41
- <title>ドキュメントタイトル</title>
42
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
43
- </head>
44
- <body>
45
- <div class="layout">
46
- <main class="main">
47
- <div class="container" id="editorContainer">
48
- <h1>タイトル</h1>
49
- <h2 id="section1">見出し</h2>
50
- <p>本文...</p>
51
- </div>
52
- </main>
53
- </div>
54
- <script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
55
- </body>
56
- </html>
57
- ```
58
-
59
- ### Markdown変換モード
60
-
61
- `data-markdown`属性にURLエンコードしたMarkdownテキストを設定すると、自動でHTMLに変換されます。
62
-
63
- ```html
64
- <div class="container" id="editorContainer" data-markdown="URLエンコードされたMDテキスト"></div>
65
- ```
66
-
67
- JavaScript側で自動的に：
68
- 1. `data-markdown`属性をデコード
69
- 2. Markdown → HTML変換
70
- 3. コンテナ内にHTMLを生成
71
- 4. `data-markdown`属性を削除（HTML保存時に残らないように）
72
-
73
- ## 外部ライブラリ
74
-
75
- Excel/PDF出力に必要なライブラリは**使用時に自動で読み込まれます**。事前の読み込みは不要です。
76
-
77
- | ライブラリ | 用途 |
78
- |-----------|------|
79
- | ExcelJS | Excel出力 |
80
- | jsPDF | PDF出力 |
81
- | html2canvas | PDF出力（HTML→Canvas変換） |
82
-
83
- ## キーボードショートカット
84
-
85
- | キー | 動作 |
86
- |------|------|
87
- | `Ctrl+E` | 編集モード切替 |
88
- | `Ctrl+B` | サイドバー表示/非表示 |
89
- | `Ctrl+M` | Markdownコピー |
90
- | `Enter` | 編集確定 |
91
- | `Shift+Enter` / `Ctrl+Enter` | li内: 新しい項目追加、その他: 改行 |
92
- | `↓` | 次の要素へ移動（最終行の場合） |
93
- | `↑` | 前の要素へ移動（先頭行の場合） |
94
- | `Backspace` | 空のliで押すと削除して前へ |
95
- | `Escape` | コンテキストメニューを閉じる |
96
-
97
- ## 右クリックメニュー
98
-
99
- 編集モード中に要素を右クリックすると、コンテキストメニューが表示されます。
100
-
101
- - **見出し追加** - 大見出し / 中見出し / 小見出し
102
- - **要素追加** - テーブル / 本文 / 箇条書き / 番号リスト / コードブロック / 引用
103
- - **削除** - 各要素の削除
104
-
105
- テーブル上では行/列の追加・削除も可能。
106
-
107
- ## ツールバーボタン
108
-
109
- | ボタン | 機能 |
110
- |--------|------|
111
- | ↔️ | サイドバー表示/非表示 |
112
- | 📝 | 編集モード切替 |
113
- | Ⓜ️ | Markdownコピー |
114
- | 🌐 | HTMLコピー |
115
- | 💾 | HTML保存（ダウンロード） |
116
- | 📊 | Excel出力 |
117
- | 📕 | PDF出力 |
3
+ 軽量WYSIWYGエディタ。Markdown変換対応。
118
4
 
119
5
  ## バージョン履歴
120
6
 
7
+ - **1.2.4** - h1改行を最初の「-」「_」のみに限定
8
+ - **1.2.3** - サイドバーh1の改行(br)維持を修正
121
9
  - **1.2.2** - パッケージ修正
122
10
  - **1.2.1** - h1の「_」区切り改行対応
123
- - **1.2.0** - Markdown変換機能追加（`data-markdown`属性対応）
124
- - **1.1.0** - ツールバー・コンテキストメニュー自動生成、外部ライブラリ遅延読み込み
125
- - **1.0.3** - nullチェック強化
126
- - **1.0.2** - DOMContentLoaded自動初期化
127
- - **1.0.1** - メディアクエリ削除
128
- - **1.0.0** - 初回リリース
129
-
130
- ## ブラウザ対応
131
-
132
- - Chrome（推奨）
133
- - Firefox
134
- - Safari
135
- - Edge
11
+ - **1.2.0** - Markdown変換機能追加
136
12
 
137
13
  ## ライセンス
138
14
 
package/html-editor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Sunny HTML Editor - 軽量WYSIWYGエディタ
3
- * @version 1.2.2
3
+ * @version 1.2.4
4
4
  */
5
5
 
6
6
  // ========== HTML生成関数 ==========
@@ -190,7 +190,7 @@ function convertMarkdownToHtml(md) {
190
190
  if (/^#\s+/.test(line) && !/^##/.test(line)) {
191
191
  line = line.replace(/^#\s+(.+)$/, function(match, title) {
192
192
  docTitle = title;
193
- var displayTitle = title.replace(/\s*[-_]\s*/g, '<br>');
193
+ var displayTitle = title.replace(/\s*[-_]\s*/, '<br>');
194
194
  return '<h1>' + displayTitle + '</h1>';
195
195
  });
196
196
  }
@@ -832,8 +832,7 @@ document.addEventListener('DOMContentLoaded', function() {
832
832
  // サイドバーHTMLを動的に生成
833
833
  function generateSidebarHtml() {
834
834
  var h1 = container.querySelector('h1');
835
- var h1Text = h1 ? h1.textContent : 'Document';
836
- var h1Html = h1Text.replace(/\s*[-_]\s*/g, '<br>');
835
+ var h1Html = h1 ? h1.innerHTML : 'Document';
837
836
 
838
837
  var navItems = '';
839
838
  var headings = container.querySelectorAll('h2[id], h3[id]');
@@ -959,7 +958,7 @@ document.addEventListener('DOMContentLoaded', function() {
959
958
  if (sidebarH1) {
960
959
  var h1Html = mainH1.innerHTML;
961
960
  if (!/<br[\s\/]*>/i.test(h1Html)) {
962
- h1Html = mainH1.textContent.replace(/\s*[-_]\s*/g, '<br>');
961
+ h1Html = mainH1.textContent.replace(/\s*[-_]\s*/, '<br>');
963
962
  }
964
963
  sidebarH1.innerHTML = h1Html;
965
964
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sunny-html-editor",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "description": "軽量WYSIWYGエディタ - 既存のHTMLに編集機能を後付けで追加、Markdown変換対応",
5
5
  "main": "html-editor.js",
6
6
  "files": [
@@ -16,18 +16,5 @@
16
16
  "markdown"
17
17
  ],
18
18
  "author": "",
19
- "license": "MIT",
20
- "optionalDependencies": {
21
- "exceljs": "^4.3.0",
22
- "jspdf": "^2.5.1",
23
- "html2canvas": "^1.4.1"
24
- },
25
- "repository": {
26
- "type": "git",
27
- "url": ""
28
- },
29
- "bugs": {
30
- "url": ""
31
- },
32
- "homepage": ""
19
+ "license": "MIT"
33
20
  }