ponkotsu-md-editor 0.2.7 → 0.2.9

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 (12) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +92 -18
  3. data/app/assets/javascripts/markdown_editor.js +17 -0
  4. data/app/assets/stylesheets/markdown_editor.css +242 -2
  5. data/app/views/ponkotsu_md_editor/_editor.html.erb +3 -3
  6. data/app/views/ponkotsu_md_editor/_input_area.html.erb +1 -1
  7. data/app/views/ponkotsu_md_editor/_markdown_help_modal.html.erb +506 -0
  8. data/app/views/ponkotsu_md_editor/_preview_area.html.erb +1 -1
  9. data/app/views/ponkotsu_md_editor/_toolbar.html.erb +193 -46
  10. data/lib/ponkotsu/md/editor/helpers.rb +2 -1
  11. data/lib/ponkotsu/md/editor/version.rb +1 -1
  12. metadata +2 -1
data/app/views/ponkotsu_md_editor/_toolbar.html.erb CHANGED
@@ -1,4 +1,5 @@
1
1
  <%
2
+ lang = locals[:options][:lang] || :en
2
3
  enable_bold = locals[:options][:tools].include?('bold')
3
4
  enable_italic = locals[:options][:tools].include?('italic')
4
5
  enable_strikethrough = locals[:options][:tools].include?('strikethrough')
@@ -21,130 +22,276 @@
21
22
  enable_preview = locals[:options][:preview]
22
23
  %>
23
24
 
24
- <div class="editor-toolbar mb-2">
25
- <div class="btn-group btn-group-sm" role="group">
25
+ <div class="ponkotsu-md-editor-toolbar ponkotsu-md-editor-mb-2">
26
+ <div class="ponkotsu-md-editor-btn-group ponkotsu-md-editor-btn-group-sm" role="group">
26
27
  <% if enable_bold %>
27
- <button type="button" class="btn btn-outline-secondary" id="toolbar-bold-btn" onclick="insertMarkdown('**', '**')" title="太字 (Ctrl+B)">
28
- <i class="bi bi-type-bold"></i>
28
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-bold-btn" onclick="insertMarkdown('**', '**')"
29
+ title="<%= case lang
30
+ when :en then "Bold (Ctrl+B)"
31
+ when :ja then "太字 (Ctrl+B)"
32
+ else "N/A"
33
+ end %>">
34
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
35
+ <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
36
+ </svg>
29
37
  </button>
30
38
  <% end %>
31
39
 
32
40
  <% if enable_italic %>
33
- <button type="button" class="btn btn-outline-secondary" id="toolbar-italic-btn" onclick="insertMarkdown('*', '*')" title="斜体 (Ctrl+I)">
34
- <i class="bi bi-type-italic"></i>
41
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-italic-btn" onclick="insertMarkdown('*', '*')"
42
+ title="<%= case lang
43
+ when :en then "Italic (Ctrl+I)"
44
+ when :ja then "斜体 (Ctrl+I)"
45
+ else "N/A"
46
+ end %>">
47
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
48
+ <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
49
+ </svg>
35
50
  </button>
36
51
  <% end %>
37
52
 
38
53
  <% if enable_strikethrough %>
39
- <button type="button" class="btn btn-outline-secondary" id="toolbar-strikethrough-btn" onclick="insertMarkdown('~~', '~~')" title="打ち消し線">
40
- <i class="bi bi-type-strikethrough"></i>
54
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-strikethrough-btn" onclick="insertMarkdown('~~', '~~')"
55
+ title="<%= case lang
56
+ when :en then "Strikethrough"
57
+ when :ja then "打ち消し線"
58
+ else "N/A"
59
+ end %>">
60
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
61
+ <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.8 2.8 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967"/>
62
+ </svg>
41
63
  </button>
42
64
  <% end %>
43
65
 
44
66
  <% if enable_code %>
45
- <button type="button" class="btn btn-outline-secondary" id="toolbar-code-btn" onclick="insertMarkdown('`', '`')" title="インラインコード">
46
- <i class="bi bi-code"></i>
67
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-code-btn" onclick="insertMarkdown('`', '`')"
68
+ title="<%= case lang
69
+ when :en then "Inline Code"
70
+ when :ja then "インラインコード"
71
+ else "N/A"
72
+ end %>">
73
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
74
+ <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
75
+ </svg>
47
76
  </button>
48
77
  <% end %>
49
78
  </div>
50
- <div class="btn-group btn-group-sm ms-2" role="group">
79
+ <div class="ponkotsu-md-editor-btn-group ponkotsu-md-editor-btn-group-sm ponkotsu-md-editor-ms-2" role="group">
51
80
  <% if enable_heading1 %>
52
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading1-btn" onclick="insertMarkdown('# ', '')" title="見出し1">
53
- <i class="bi bi-type-h1"></i>
81
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading1-btn" onclick="insertMarkdown('# ', '')"
82
+ title="<%= case lang
83
+ when :en then "Heading 1"
84
+ when :ja then "見出し1"
85
+ else "N/A"
86
+ end %>">
87
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
88
+ <path d="M7.648 13V3H6.3v4.234H1.348V3H0v10h1.348V8.421H6.3V13zM14 13V3h-1.333l-2.381 1.766V6.12L12.6 4.443h.066V13z"/>
89
+ </svg>
54
90
  </button>
55
91
  <% end %>
56
92
 
57
93
  <% if enable_heading2 %>
58
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading2-btn" onclick="insertMarkdown('## ', '')" title="見出し2">
59
- <i class="bi bi-type-h2"></i>
94
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading2-btn" onclick="insertMarkdown('## ', '')"
95
+ title="<%= case lang
96
+ when :en then "Heading 2"
97
+ when :ja then "見出し2"
98
+ else "N/A"
99
+ end %>">
100
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
101
+ <path d="M7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13zm3.174-7.071v-.05c0-.934.66-1.752 1.801-1.752 1.005 0 1.76.639 1.76 1.651 0 .898-.582 1.58-1.12 2.19l-3.69 4.2V13h6.331v-1.149h-4.458v-.079L13.9 8.786c.919-1.048 1.666-1.874 1.666-3.101C15.565 4.149 14.35 3 12.499 3 10.46 3 9.384 4.393 9.384 5.879v.05z"/>
102
+ </svg>
60
103
  </button>
61
104
  <% end %>
62
105
 
63
106
  <% if enable_heading3 %>
64
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading3-btn" onclick="insertMarkdown('### ', '')" title="見出し3">
65
- <i class="bi bi-type-h3"></i>
107
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading3-btn" onclick="insertMarkdown('### ', '')"
108
+ title="<%= case lang
109
+ when :en then "Heading 3"
110
+ when :ja then "見出し3"
111
+ else "N/A"
112
+ end %>">
113
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3" viewBox="0 0 16 16">
114
+ <path d="M11.07 8.4h1.049c1.174 0 1.99.69 2.004 1.724s-.802 1.786-2.068 1.779c-1.11-.007-1.905-.605-1.99-1.357h-1.21C8.926 11.91 10.116 13 12.028 13c1.99 0 3.439-1.188 3.404-2.87-.028-1.553-1.287-2.221-2.096-2.313v-.07c.724-.127 1.814-.935 1.772-2.293-.035-1.392-1.21-2.468-3.038-2.454-1.927.007-2.94 1.196-2.981 2.426h1.23c.064-.71.732-1.336 1.744-1.336 1.027 0 1.744.64 1.744 1.568.007.95-.738 1.639-1.744 1.639h-.991V8.4ZM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>
115
+ </svg>
66
116
  </button>
67
117
  <% end %>
68
118
 
69
119
  <% if enable_heading4 %>
70
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading4-btn" onclick="insertMarkdown('#### ', '')" title="見出し4">
71
- <i class="bi bi-type-h4"></i>
120
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading4-btn" onclick="insertMarkdown('#### ', '')"
121
+ title="<%= case lang
122
+ when :en then "Heading 4"
123
+ when :ja then "見出し4"
124
+ else "N/A"
125
+ end %>">
126
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h4" viewBox="0 0 16 16">
127
+ <path d="M13.007 3H15v10h-1.29v-2.051H8.854v-1.18C10.1 7.513 11.586 5.256 13.007 3m-2.82 6.777h3.524v-5.62h-.074a95 95 0 0 0-3.45 5.554zM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>
128
+ </svg>
72
129
  </button>
73
130
  <% end %>
74
131
 
75
132
  <% if enable_heading5 %>
76
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading5-btn" onclick="insertMarkdown('##### ', '')" title="見出し5">
77
- <i class="bi bi-type-h5"></i>
133
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading5-btn" onclick="insertMarkdown('##### ', '')"
134
+ title="<%= case lang
135
+ when :en then "Heading 5"
136
+ when :ja then "見出し5"
137
+ else "N/A"
138
+ end %>">
139
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h5" viewBox="0 0 16 16">
140
+ <path d="M9 10.516h1.264c.193.976 1.112 1.364 2.01 1.364 1.005 0 2.067-.782 2.067-2.247 0-1.292-.983-2.082-2.089-2.082-1.012 0-1.658.596-1.924 1.077h-1.12L9.646 3h5.535v1.141h-4.415L10.5 7.28h.072c.201-.316.883-.84 1.967-.84 1.709 0 3.13 1.177 3.13 3.158 0 2.025-1.407 3.403-3.475 3.403-1.809 0-3.1-1.048-3.194-2.484ZM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.512h4.854V13z"/>
141
+ </svg>
78
142
  </button>
79
143
  <% end %>
80
144
 
81
145
  <% if enable_heading6 %>
82
- <button type="button" class="btn btn-outline-secondary" id="toolbar-heading6-btn" onclick="insertMarkdown('###### ', '')" title="見出し6">
83
- <i class="bi bi-type-h6"></i>
146
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-heading6-btn" onclick="insertMarkdown('###### ', '')"
147
+ title="<%= case lang
148
+ when :en then "Heading 6"
149
+ when :ja then "見出し6"
150
+ else "N/A"
151
+ end %>">
152
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h6" viewBox="0 0 16 16">
153
+ <path d="M15.596 5.178H14.3c-.106-.444-.62-1.072-1.706-1.072-1.332 0-2.325 1.269-2.325 3.947h.07c.268-.67 1.043-1.445 2.445-1.445 1.494 0 3.017 1.064 3.017 3.073C15.8 11.795 14.37 13 12.48 13c-1.036 0-2.093-.36-2.77-1.452C9.276 10.836 9 9.808 9 8.37 9 4.656 10.494 3 12.636 3c1.812 0 2.883 1.113 2.96 2.178m-5.151 4.566c0 1.367.944 2.15 2.043 2.15 1.128 0 2.037-.684 2.037-2.136 0-1.41-1-2.065-2.03-2.065-1.19 0-2.05.853-2.05 2.051M7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>
154
+ </svg>
84
155
  </button>
85
156
  <% end %>
86
157
  </div>
87
- <div class="btn-group btn-group-sm ms-2" role="group">
158
+ <div class="ponkotsu-md-editor-btn-group ponkotsu-md-editor-btn-group-sm ponkotsu-md-editor-ms-2" role="group">
88
159
  <% if enable_link %>
89
- <button type="button" class="btn btn-outline-secondary" id="toolbar-link-btn" onclick="insertMarkdown('[', '](URL)')" title="リンク">
90
- <i class="bi bi-link-45deg"></i>
160
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-link-btn" onclick="insertMarkdown('[', '](URL)')"
161
+ title="<%= case lang
162
+ when :en then "Link"
163
+ when :ja then "リンク"
164
+ else "N/A"
165
+ end %>">
166
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
167
+ <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
168
+ <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
169
+ </svg>
91
170
  </button>
92
171
  <% end %>
93
172
 
94
173
  <% if enable_unordered_list %>
95
- <button type="button" class="btn btn-outline-secondary" id="toolbar-unordered-list-btn" onclick="insertMarkdown('- ', '')" title="箇条書きリスト">
96
- <i class="bi bi-list-ul"></i>
174
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-unordered-list-btn" onclick="insertMarkdown('- ', '')"
175
+ title="<%= case lang
176
+ when :en then "Unordered List"
177
+ when :ja then "箇条書きリスト"
178
+ else "N/A"
179
+ end %>">
180
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
181
+ <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
182
+ </svg>
97
183
  </button>
98
184
  <% end %>
99
185
 
100
186
  <% if enable_ordered_list %>
101
- <button type="button" class="btn btn-outline-secondary" id="toolbar-ordered-list-btn" onclick="insertMarkdown('1. ', '')" title="番号付きリスト">
102
- <i class="bi bi-list-ol"></i>
187
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-ordered-list-btn" onclick="insertMarkdown('1. ', '')"
188
+ title="<%= case lang
189
+ when :en then "Ordered List"
190
+ when :ja then "番号付きリスト"
191
+ else "N/A"
192
+ end %>">
193
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
194
+ <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
195
+ <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/>
196
+ </svg>
103
197
  </button>
104
198
  <% end %>
105
199
 
106
200
  <% if enable_code_block %>
107
- <button type="button" class="btn btn-outline-secondary" id="toolbar-code-block-btn" onclick="insertCode()" title="コードスパンまたはコードブロック">
108
- <i class="bi bi-code-square"></i>
201
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-code-block-btn" onclick="insertCode()"
202
+ title="<%= case lang
203
+ when :en then "Code Block"
204
+ when :ja then "コードブロック"
205
+ else "N/A"
206
+ end %>">
207
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code-square" viewBox="0 0 16 16">
208
+ <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
209
+ <path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0m2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0"/>
210
+ </svg>
109
211
  </button>
110
212
  <% end %>
111
213
 
112
214
  <% if enable_blockquote %>
113
- <button type="button" class="btn btn-outline-secondary" id="toolbar-blockquote-btn" onclick="insertMarkdown('> ', '')" title="引用">
114
- <i class="bi bi-quote"></i>
215
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-blockquote-btn" onclick="insertMarkdown('> ', '')"
216
+ title="<%= case lang
217
+ when :en then "Blockquote"
218
+ when :ja then "引用"
219
+ else "N/A"
220
+ end %>">
221
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-quote" viewBox="0 0 16 16">
222
+ <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z"/>
223
+ </svg>
115
224
  </button>
116
225
  <% end %>
117
226
 
118
227
  <% if enable_image %>
119
- <button type="button" class="btn btn-outline-secondary" id="toolbar-image-btn" onclick="insertMarkdown('![', '](画像URL)')" title="画像">
120
- <i class="bi bi-image"></i>
228
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-image-btn" onclick="insertMarkdown('![', '](画像URL)')"
229
+ title="<%= case lang
230
+ when :en then "Image"
231
+ when :ja then "画像"
232
+ else "N/A"
233
+ end %>">
234
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
235
+ <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
236
+ <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"/>
237
+ </svg>
121
238
  </button>
122
239
  <% end %>
123
240
 
124
241
  <% if enable_table %>
125
- <button type="button" class="btn btn-outline-secondary" id="toolbar-table-btn" onclick="insertTable()" title="テーブル">
126
- <i class="bi bi-table"></i>
242
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-table-btn" onclick="insertTable()"
243
+ title="<%= case lang
244
+ when :en then "Table"
245
+ when :ja then "表"
246
+ else "N/A"
247
+ end %>">
248
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
249
+ <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z"/>
250
+ </svg>
127
251
  </button>
128
252
  <% end %>
129
253
 
130
254
  <% if enable_horizontal_rule %>
131
- <button type="button" class="btn btn-outline-secondary" id="toolbar-horizontal-rule-btn" onclick="insertMarkdown('\n---\n', '')" title="水平線">
132
- <i class="bi bi-dash-lg"></i>
255
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-horizontal-rule-btn" onclick="insertMarkdown('\n---\n', '')"
256
+ title="<%= case lang
257
+ when :en then "Horizontal Rule"
258
+ when :ja then "水平線"
259
+ else "N/A"
260
+ end %>">
261
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hr" viewBox="0 0 16 16">
262
+ <path d="M12 3H4a1 1 0 0 0-1 1v2.5H2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2.5h-1V4a1 1 0 0 0-1-1M2 9.5h1V12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5h1V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm-1.5-2a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z"/>
263
+ </svg>
133
264
  </button>
134
265
  <% end %>
135
266
 
136
267
  <% if enable_check_list %>
137
- <button type="button" class="btn btn-outline-secondary" id="toolbar-check-list-btn" onclick="insertMarkdown('- [ ] ', '')" title="チェックボックス">
138
- <i class="bi bi-check-square"></i>
268
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-check-list-btn" onclick="insertMarkdown('- [ ] ', '')"
269
+ title="<%= case lang
270
+ when :en then "Check List"
271
+ when :ja then "チェックリスト"
272
+ else "N/A"
273
+ end %>">
274
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square" viewBox="0 0 16 16">
275
+ <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
276
+ <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
277
+ </svg>
139
278
  </button>
140
279
  <% end %>
141
280
  </div>
142
281
 
143
282
  <% if enable_preview %>
144
- <div class="btn-group btn-group-sm ms-2" role="group">
145
- <button type="button" class="btn btn-outline-primary" id="toolbar-preview-btn" onclick="togglePreview()">
146
- <i class="bi bi-eye"></i> プレビュー
283
+ <div class="ponkotsu-md-editor-btn-group ponkotsu-md-editor-btn-group-sm ponkotsu-md-editor-ms-2" role="group">
284
+ <button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline-primary" id="toolbar-preview-btn" onclick="togglePreview()">
285
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
286
+ <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
287
+ <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
288
+ </svg>
289
+ <span><%= case lang
290
+ when :en then "Preview"
291
+ when :ja then "プレビュー"
292
+ else "N/A"
293
+ end %></span>
147
294
  </button>
148
295
  </div>
149
296
  <% end %>
150
- </div>
297
+ </div>
data/lib/ponkotsu/md/editor/helpers.rb CHANGED
@@ -13,7 +13,7 @@ module PonkotsuMdEditor
13
13
  # @param form [ActionView::Helpers::FormBuilder] The form builder object.
14
14
  # @param attribute [Symbol, String] The attribute name to bind the editor to (e.g., :content).
15
15
  # @param content [String] The initial content to display in the editor.
16
- # @param options [Hash] Editor configuration options (e.g., :lang, :preview, :tools, :placeholder).
16
+ # @param options [Hash] Editor configuration options (:bold :italic :strikethrough :heading1 :heading2 :heading3 :heading4 :heading5 :heading6 :unordered_list :ordered_list :check_list :blockquote :link :image :code :code_block :table :horizontal_rule).
17
17
  # @return [String] The rendered HTML for the Markdown editor.
18
18
  #
19
19
  # Example usage in a Rails view:
@@ -27,6 +27,7 @@ module PonkotsuMdEditor
27
27
  form = form[:form] if form.is_a?(Hash)
28
28
  attribute = attribute[:attribute] if attribute.is_a?(Hash)
29
29
  content = content[:attribute] if content.is_a?(Hash)
30
+ options = options[:options] if options.is_a?(Hash)
30
31
  render "ponkotsu_md_editor/editor", locals: { attribute: attribute, content: content, form: form, options: options }
31
32
  end
32
33
  end
data/lib/ponkotsu/md/editor/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module PonkotsuMdEditor
4
- VERSION = "0.2.7"
4
+ VERSION = "0.2.9"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ponkotsu-md-editor
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.7
4
+ version: 0.2.9
5
5
  platform: ruby
6
6
  authors:
7
7
  - dhq_boiler
@@ -40,6 +40,7 @@ files:
40
40
  - app/assets/stylesheets/markdown_editor.css
41
41
  - app/views/ponkotsu_md_editor/_editor.html.erb
42
42
  - app/views/ponkotsu_md_editor/_input_area.html.erb
43
+ - app/views/ponkotsu_md_editor/_markdown_help_modal.html.erb
43
44
  - app/views/ponkotsu_md_editor/_preview_area.html.erb
44
45
  - app/views/ponkotsu_md_editor/_toolbar.html.erb
45
46
  - lib/ponkotsu/md/editor.rb