ponkotsu-md-editor 0.2.8 → 0.2.10
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/markdown_editor.css +316 -14
- data/app/views/ponkotsu_md_editor/_editor.html.erb +3 -3
- data/app/views/ponkotsu_md_editor/_input_area.html.erb +1 -1
- data/app/views/ponkotsu_md_editor/_markdown_help_modal.html.erb +506 -0
- data/app/views/ponkotsu_md_editor/_preview_area.html.erb +1 -1
- data/app/views/ponkotsu_md_editor/_toolbar.html.erb +193 -46
- data/lib/ponkotsu/md/editor/version.rb +1 -1
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: dcc561002630017f4aa81811a9abb0952bd29c5953c7d766decc9e8aa7a7406a
|
|
4
|
+
data.tar.gz: 5fcab26a3e147ba729417227b7a1e5de2714c576c77a45fa65d8bd46541d91ff
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 320b913faceebf0ec4c80ab1b41f4dcce9a91d0a8e6a3b907387f228c70047d6b143c6500fc802c71a2816d2fc628b68a3b2c553e4f6af00258ea99af371d620
|
|
7
|
+
data.tar.gz: 9d24b6d557bcfd6565be811f70673f86888db7a2095949e37feb8acb42f7bda736d5b1341ece9a2b2ff118f1ac984c17cd1e43ebb6c5e20b2a9022df32abef61
|
|
@@ -1,9 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--accent-color: #
|
|
4
|
-
--accent-
|
|
5
|
-
--
|
|
6
|
-
--
|
|
1
|
+
:root {
|
|
2
|
+
--accent-color: #007bff;
|
|
3
|
+
--accent-color-hover: #0056b3;
|
|
4
|
+
--accent-pink: #e83e8c;
|
|
5
|
+
--background: #fff;
|
|
6
|
+
--background-dark: #222;
|
|
7
|
+
--background-alt: #f8f9fa;
|
|
8
|
+
--background-code: #f5f5f5;
|
|
9
|
+
--preview-bg: #f8f9fa;
|
|
10
|
+
--border: #ced4da;
|
|
11
|
+
--border-light: #ced4da;
|
|
12
|
+
--border-info: #b6e2f7;
|
|
13
|
+
--border-table: #dee2e6;
|
|
14
|
+
--text-primary: #212529;
|
|
15
|
+
--text-invert: #fff;
|
|
16
|
+
--text-secondary: #495057;
|
|
17
|
+
--text-muted: #6c757d;
|
|
18
|
+
--text-placeholder: #999;
|
|
19
|
+
--text-info: #222;
|
|
20
|
+
--text-blockquote: #495057;
|
|
21
|
+
--info-bg: #e9f7fd;
|
|
22
|
+
--table-row-alt: #f2f2f2;
|
|
23
|
+
--code-bg: #e9ecef;
|
|
24
|
+
--code-text: #d63384;
|
|
25
|
+
}
|
|
26
|
+
[data-theme="dark"] {
|
|
27
|
+
--accent-color: #66b3ff;
|
|
28
|
+
--accent-color-hover: #3399ff;
|
|
29
|
+
--accent-pink: #ff7eb9;
|
|
30
|
+
--background: #181a1b;
|
|
31
|
+
--background-dark: #222;
|
|
32
|
+
--background-alt: #2a2a2a;
|
|
33
|
+
--background-code: #2d3748;
|
|
34
|
+
--preview-bg: #363636;
|
|
35
|
+
--border: #444;
|
|
36
|
+
--border-light: #444;
|
|
37
|
+
--border-info: #3a4a5a;
|
|
38
|
+
--border-table: #666;
|
|
39
|
+
--text-primary: #f1f3f4;
|
|
40
|
+
--text-invert: #181a1b;
|
|
41
|
+
--text-secondary: #adb5bd;
|
|
42
|
+
--text-muted: #6c757d;
|
|
43
|
+
--text-placeholder: #888;
|
|
44
|
+
--text-info: #f1f3f4;
|
|
45
|
+
--text-blockquote: #adb5bd;
|
|
46
|
+
--info-bg: #223344;
|
|
47
|
+
--table-row-alt: #23272b;
|
|
48
|
+
--code-bg: #495057;
|
|
49
|
+
--code-text: #ffb3d1;
|
|
7
50
|
}
|
|
8
51
|
|
|
9
52
|
.editor-container {
|
|
@@ -12,20 +55,18 @@
|
|
|
12
55
|
|
|
13
56
|
#editor_content {
|
|
14
57
|
position: relative;
|
|
15
|
-
|
|
16
|
-
overflow: hidden; /* はみ出し防止 */
|
|
58
|
+
overflow: hidden;
|
|
17
59
|
height: calc(24 * 20px);
|
|
18
60
|
}
|
|
19
61
|
|
|
20
62
|
#editor_content_placeholder {
|
|
21
63
|
position: absolute;
|
|
22
|
-
top: -17px;
|
|
23
|
-
left: 13px;
|
|
24
|
-
color:
|
|
64
|
+
top: -17px;
|
|
65
|
+
left: 13px;
|
|
66
|
+
color: var(--text-placeholder);
|
|
25
67
|
pointer-events: none;
|
|
26
68
|
z-index: 1;
|
|
27
|
-
white-space: pre-line;
|
|
28
|
-
/* デフォルトで表示 */
|
|
69
|
+
white-space: pre-line;
|
|
29
70
|
display: block;
|
|
30
71
|
max-height: calc(24 * 20px);
|
|
31
72
|
overflow: hidden;
|
|
@@ -39,4 +80,265 @@
|
|
|
39
80
|
/*!* フォーカス時も隠す *!*/
|
|
40
81
|
/*#editor_content:focus ~ #editor_content_placeholder {*/
|
|
41
82
|
/* display: none;*/
|
|
42
|
-
/*}*/
|
|
83
|
+
/*}*/
|
|
84
|
+
|
|
85
|
+
.ponkotsu-md-editor-form-text {
|
|
86
|
+
font-size: 0.875em;
|
|
87
|
+
color: var(--text-muted);
|
|
88
|
+
margin-top: 0.25rem;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ponkotsu-md-editor-medium-contrast-text {
|
|
92
|
+
color: var(--text-secondary);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ponkotsu-md-editor-text-decoration-none {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ponkotsu-md-editor-form-control {
|
|
100
|
+
display: block;
|
|
101
|
+
width: 100%;
|
|
102
|
+
min-height: 120px;
|
|
103
|
+
padding: 0.5em 0.75em;
|
|
104
|
+
font-size: 1em;
|
|
105
|
+
line-height: 1.5;
|
|
106
|
+
color: var(--text-primary);
|
|
107
|
+
background-color: var(--background);
|
|
108
|
+
background-clip: padding-box;
|
|
109
|
+
border: 1px solid var(--border-light);
|
|
110
|
+
border-radius: 0.375rem;
|
|
111
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
112
|
+
box-sizing: border-box;
|
|
113
|
+
}
|
|
114
|
+
.ponkotsu-md-editor-form-control:focus {
|
|
115
|
+
outline: none;
|
|
116
|
+
border-color: var(--accent-color);
|
|
117
|
+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.ponkotsu-md-editor-markdown-textarea {
|
|
121
|
+
min-height: 240px;
|
|
122
|
+
resize: vertical;
|
|
123
|
+
font-family: inherit;
|
|
124
|
+
background: none;
|
|
125
|
+
box-shadow: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.ponkotsu-md-editor-popover-modal {
|
|
129
|
+
background: var(--background-dark);
|
|
130
|
+
color: var(--text-invert);
|
|
131
|
+
border-radius: 8px;
|
|
132
|
+
box-shadow: 0 0 20px #000a;
|
|
133
|
+
max-width: 900px;
|
|
134
|
+
width: 80vw;
|
|
135
|
+
}
|
|
136
|
+
.ponkotsu-md-editor-popover-header {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: space-between;
|
|
140
|
+
padding: 1rem;
|
|
141
|
+
border-bottom: 1px solid var(--border);
|
|
142
|
+
}
|
|
143
|
+
.ponkotsu-md-editor-popover-title {
|
|
144
|
+
font-size: 1.25rem;
|
|
145
|
+
font-weight: bold;
|
|
146
|
+
}
|
|
147
|
+
.ponkotsu-md-editor-btn-close {
|
|
148
|
+
background: none;
|
|
149
|
+
border: none;
|
|
150
|
+
font-size: 1.5rem;
|
|
151
|
+
color: var(--text-invert);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
}
|
|
154
|
+
.ponkotsu-md-editor-popover-body {
|
|
155
|
+
padding: 1.5rem;
|
|
156
|
+
max-height: 70vh;
|
|
157
|
+
overflow-y: auto;
|
|
158
|
+
}
|
|
159
|
+
.ponkotsu-md-editor-nav {
|
|
160
|
+
display: flex;
|
|
161
|
+
border-bottom: 1px solid var(--border);
|
|
162
|
+
margin-bottom: 1rem;
|
|
163
|
+
list-style: none;
|
|
164
|
+
padding-left: 0;
|
|
165
|
+
}
|
|
166
|
+
.ponkotsu-md-editor-nav-tabs .ponkotsu-md-editor-nav-link {
|
|
167
|
+
border: none;
|
|
168
|
+
background: none;
|
|
169
|
+
color: var(--text-invert);
|
|
170
|
+
padding: 0.5rem 1rem;
|
|
171
|
+
cursor: pointer;
|
|
172
|
+
border-radius: 0.375rem 0.375rem 0 0;
|
|
173
|
+
margin-right: 0.25rem;
|
|
174
|
+
}
|
|
175
|
+
.ponkotsu-md-editor-nav-link.active {
|
|
176
|
+
background: #333;
|
|
177
|
+
color: var(--accent-color);
|
|
178
|
+
font-weight: bold;
|
|
179
|
+
}
|
|
180
|
+
.ponkotsu-md-editor-nav-fill {
|
|
181
|
+
flex: 1 1 auto;
|
|
182
|
+
}
|
|
183
|
+
.ponkotsu-md-editor-nav-item {
|
|
184
|
+
flex: 1 1 0;
|
|
185
|
+
text-align: center;
|
|
186
|
+
}
|
|
187
|
+
.ponkotsu-md-editor-tab-content {
|
|
188
|
+
margin-top: 1rem;
|
|
189
|
+
}
|
|
190
|
+
.ponkotsu-md-editor-tab-pane {
|
|
191
|
+
display: none;
|
|
192
|
+
}
|
|
193
|
+
.ponkotsu-md-editor-tab-pane.active,
|
|
194
|
+
.ponkotsu-md-editor-tab-pane.show {
|
|
195
|
+
display: block;
|
|
196
|
+
}
|
|
197
|
+
.ponkotsu-md-editor-table-responsive {
|
|
198
|
+
overflow-x: auto;
|
|
199
|
+
}
|
|
200
|
+
.ponkotsu-md-editor-table {
|
|
201
|
+
width: 100%;
|
|
202
|
+
border-collapse: collapse;
|
|
203
|
+
margin-bottom: 1rem;
|
|
204
|
+
color: var(--text-invert);
|
|
205
|
+
background: var(--background-dark);
|
|
206
|
+
}
|
|
207
|
+
.ponkotsu-md-editor-table th,
|
|
208
|
+
.ponkotsu-md-editor-table td {
|
|
209
|
+
border: 1px solid var(--border);
|
|
210
|
+
padding: 0.5rem;
|
|
211
|
+
}
|
|
212
|
+
.ponkotsu-md-editor-table-dark {
|
|
213
|
+
background: var(--background-dark);
|
|
214
|
+
}
|
|
215
|
+
.ponkotsu-md-editor-table-striped tbody tr:nth-child(odd) {
|
|
216
|
+
background: var(--table-row-alt);
|
|
217
|
+
}
|
|
218
|
+
.ponkotsu-md-editor-table-sm th,
|
|
219
|
+
.ponkotsu-md-editor-table-sm td {
|
|
220
|
+
padding: 0.25rem 0.5rem;
|
|
221
|
+
font-size: 0.9em;
|
|
222
|
+
}
|
|
223
|
+
.ponkotsu-md-editor-table-bordered th,
|
|
224
|
+
.ponkotsu-md-editor-table-bordered td {
|
|
225
|
+
border: 1px solid var(--border-table);
|
|
226
|
+
}
|
|
227
|
+
.ponkotsu-md-editor-alert {
|
|
228
|
+
padding: 1rem;
|
|
229
|
+
border-radius: 0.375rem;
|
|
230
|
+
margin-top: 1.5rem;
|
|
231
|
+
margin-bottom: 1rem;
|
|
232
|
+
background: var(--info-bg);
|
|
233
|
+
color: var(--text-info);
|
|
234
|
+
border: 1px solid var(--border-info);
|
|
235
|
+
}
|
|
236
|
+
.ponkotsu-md-editor-alert-info {
|
|
237
|
+
background: var(--info-bg);
|
|
238
|
+
color: var(--text-info);
|
|
239
|
+
border-color: var(--border-info);
|
|
240
|
+
}
|
|
241
|
+
.ponkotsu-md-editor-mt-4 {
|
|
242
|
+
margin-top: 1.5rem;
|
|
243
|
+
}
|
|
244
|
+
.ponkotsu-md-editor-high-contrast-text {
|
|
245
|
+
color: var(--text-invert);
|
|
246
|
+
font-weight: bold;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.markdown-preview,
|
|
250
|
+
.ponkotsu-md-editor-markdown-preview {
|
|
251
|
+
min-height: 500px;
|
|
252
|
+
padding: 1rem;
|
|
253
|
+
background-color: var(--preview-bg);
|
|
254
|
+
border: 1px solid var(--border);
|
|
255
|
+
border-radius: 0.375rem;
|
|
256
|
+
color: var(--text-invert);
|
|
257
|
+
word-break: break-word;
|
|
258
|
+
overflow-x: auto;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.ponkotsu-md-editor-toolbar {
|
|
262
|
+
display: flex;
|
|
263
|
+
flex-wrap: wrap;
|
|
264
|
+
align-items: center;
|
|
265
|
+
margin-bottom: 0.5rem;
|
|
266
|
+
}
|
|
267
|
+
.ponkotsu-md-editor-btn-group {
|
|
268
|
+
display: inline-flex;
|
|
269
|
+
align-items: center;
|
|
270
|
+
margin-right: 0.5rem;
|
|
271
|
+
}
|
|
272
|
+
.ponkotsu-md-editor-btn-group-sm > .ponkotsu-md-editor-btn {
|
|
273
|
+
font-size: 0.9em;
|
|
274
|
+
padding: 0.25em 0.5em;
|
|
275
|
+
}
|
|
276
|
+
.ponkotsu-md-editor-btn {
|
|
277
|
+
display: inline-block;
|
|
278
|
+
font-weight: 400;
|
|
279
|
+
color: var(--text-primary);
|
|
280
|
+
text-align: center;
|
|
281
|
+
vertical-align: middle;
|
|
282
|
+
user-select: none;
|
|
283
|
+
background-color: var(--background);
|
|
284
|
+
border: 1px solid var(--border-light);
|
|
285
|
+
padding: 0.375rem 0.75rem;
|
|
286
|
+
font-size: 1em;
|
|
287
|
+
line-height: 1.5;
|
|
288
|
+
border-radius: 0.375rem;
|
|
289
|
+
transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
|
|
290
|
+
margin-right: 0.2em;
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
}
|
|
293
|
+
.ponkotsu-md-editor-btn:last-child {
|
|
294
|
+
margin-right: 0;
|
|
295
|
+
}
|
|
296
|
+
.ponkotsu-md-editor-btn-outline {
|
|
297
|
+
background-color: var(--background);
|
|
298
|
+
color: var(--text-primary);
|
|
299
|
+
border: 1px solid var(--border-light);
|
|
300
|
+
}
|
|
301
|
+
.ponkotsu-md-editor-btn-outline:hover,
|
|
302
|
+
.ponkotsu-md-editor-btn-outline:focus {
|
|
303
|
+
background-color: #f0f0f0;
|
|
304
|
+
border-color: var(--accent-color);
|
|
305
|
+
color: var(--accent-color);
|
|
306
|
+
}
|
|
307
|
+
.ponkotsu-md-editor-btn-outline-primary {
|
|
308
|
+
background-color: var(--background);
|
|
309
|
+
color: var(--accent-color);
|
|
310
|
+
border: 1px solid var(--accent-color);
|
|
311
|
+
}
|
|
312
|
+
.ponkotsu-md-editor-btn-outline-primary:hover,
|
|
313
|
+
.ponkotsu-md-editor-btn-outline-primary:focus {
|
|
314
|
+
background-color: var(--accent-color);
|
|
315
|
+
color: var(--text-invert);
|
|
316
|
+
}
|
|
317
|
+
.ponkotsu-md-editor-mb-2 {
|
|
318
|
+
margin-bottom: 0.5rem;
|
|
319
|
+
}
|
|
320
|
+
.ponkotsu-md-editor-ms-2 {
|
|
321
|
+
margin-left: 0.5rem;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* インラインコード・ブロック・引用などの色も変数化 */
|
|
325
|
+
code {
|
|
326
|
+
background: var(--code-bg);
|
|
327
|
+
color: var(--code-text);
|
|
328
|
+
padding: 2px 6px;
|
|
329
|
+
border-radius: 4px;
|
|
330
|
+
}
|
|
331
|
+
pre {
|
|
332
|
+
background: var(--background-code);
|
|
333
|
+
color: var(--text-invert);
|
|
334
|
+
padding: 0.75rem;
|
|
335
|
+
border-radius: 4px;
|
|
336
|
+
margin: 0;
|
|
337
|
+
font-size: 0.95em;
|
|
338
|
+
}
|
|
339
|
+
blockquote {
|
|
340
|
+
border-left: 4px solid var(--accent-color);
|
|
341
|
+
padding-left: 1rem;
|
|
342
|
+
margin: 0;
|
|
343
|
+
color: var(--text-blockquote);
|
|
344
|
+
}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
<%= render "ponkotsu_md_editor/toolbar", locals: { options: _options } %>
|
|
62
62
|
<%= render "ponkotsu_md_editor/input_area", locals: { form: _form, attribute: locals[:attribute], content: locals[:content], options: _options } %>
|
|
63
63
|
</div>
|
|
64
|
-
<div class="form-text medium-contrast-text">
|
|
64
|
+
<div class="ponkotsu-md-editor-form-text ponkotsu-md-editor-medium-contrast-text">
|
|
65
65
|
<strong><%= case _options[:lang]
|
|
66
66
|
when :en
|
|
67
67
|
"You can write in Markdown."
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
else
|
|
71
71
|
"N/A"
|
|
72
72
|
end %></strong>
|
|
73
|
-
<a href="#"
|
|
73
|
+
<a href="#" id="markdownHelpGuideLink" popovertarget="markdownHelpPopover" class="ponkotsu-md-editor-text-decoration-none" style="color: var(--accent-color);">
|
|
74
74
|
<%= case _options[:lang]
|
|
75
75
|
when :en
|
|
76
76
|
"Writing Guide"
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"N/A"
|
|
98
98
|
end %>
|
|
99
99
|
</div>
|
|
100
|
-
|
|
100
|
+
<%= render "ponkotsu_md_editor/markdown_help_modal", locals: { options: _options } %>
|
|
101
101
|
<%= javascript_include_tag 'markdown_editor' %>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div id="editor_content"
|
|
8
8
|
contenteditable="true"
|
|
9
9
|
data-field="content"
|
|
10
|
-
class="form-control markdown-textarea">
|
|
10
|
+
class="ponkotsu-md-editor-form-control ponkotsu-md-editor-markdown-textarea">
|
|
11
11
|
<%
|
|
12
12
|
def crlf_to_br(text)
|
|
13
13
|
text.gsub(/\r\n|\r|\n/, "<br>").html_safe
|
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
<%
|
|
2
|
+
lang = locals[:options][:lang] || :en
|
|
3
|
+
%>
|
|
4
|
+
<!-- MarkdownヘルプPopover -->
|
|
5
|
+
<div id="markdownHelpPopover" popover class="ponkotsu-md-editor-popover-modal" style="display:none; position:fixed; z-index:1050; left:50%; top:10vh; transform:translateX(-50%); width:80vw; max-width:900px; background:#222; color:#fff; border-radius:8px; box-shadow:0 0 20px #000a;">
|
|
6
|
+
<div class="ponkotsu-md-editor-popover-header" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid #444;">
|
|
7
|
+
<h5 class="ponkotsu-md-editor-popover-title ponkotsu-md-editor-high-contrast-text" style="margin:0;">
|
|
8
|
+
[book] <!-- アイコン -->
|
|
9
|
+
<% case lang
|
|
10
|
+
when :en then "Markdown Writing Guide"
|
|
11
|
+
when :ja then "Markdown書き方ガイド"
|
|
12
|
+
else "N/A"
|
|
13
|
+
end %>
|
|
14
|
+
</h5>
|
|
15
|
+
<button type="button" id="markdownHelpPopoverClose" class="ponkotsu-md-editor-btn-close" style="filter:invert(1); background:none; border:none; font-size:1.5rem;">×</button>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="ponkotsu-md-editor-popover-body" style="padding:1.5rem; max-height:70vh; overflow-y:auto;">
|
|
18
|
+
<!-- タブナビゲーション -->
|
|
19
|
+
<ul class="ponkotsu-md-editor-nav ponkotsu-md-editor-nav-tabs ponkotsu-md-editor-nav-fill ponkotsu-md-editor-mb-4" id="markdownTabs" role="tablist">
|
|
20
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
21
|
+
<button class="ponkotsu-md-editor-nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">
|
|
22
|
+
[type] <!-- アイコン -->
|
|
23
|
+
<% case lang
|
|
24
|
+
when :en then "Basic Syntax"
|
|
25
|
+
when :ja then "基本書式"
|
|
26
|
+
else "N/A"
|
|
27
|
+
end %>
|
|
28
|
+
</button>
|
|
29
|
+
</li>
|
|
30
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
31
|
+
<button class="ponkotsu-md-editor-nav-link" id="structure-tab" data-bs-toggle="tab" data-bs-target="#structure" type="button" role="tab">
|
|
32
|
+
[list-nested] <!-- アイコン -->
|
|
33
|
+
<% case lang
|
|
34
|
+
when :en then "Structural Elements"
|
|
35
|
+
when :ja then "構造要素"
|
|
36
|
+
else "N/A"
|
|
37
|
+
end %>
|
|
38
|
+
</button>
|
|
39
|
+
</li>
|
|
40
|
+
<li class="ponkotsu-md-editor-nav-item" role="presentation">
|
|
41
|
+
<button class="ponkotsu-md-editor-nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced" type="button" role="tab">
|
|
42
|
+
[gear] <!-- アイコン -->
|
|
43
|
+
<% case lang
|
|
44
|
+
when :en then "Advanced Features"
|
|
45
|
+
when :ja then "応用機能"
|
|
46
|
+
else "N/A"
|
|
47
|
+
end %>
|
|
48
|
+
</button>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
|
|
52
|
+
<!-- タブコンテンツ -->
|
|
53
|
+
<div class="ponkotsu-md-editor-tab-content" id="markdownTabContent">
|
|
54
|
+
|
|
55
|
+
<!-- 基本書式タブ -->
|
|
56
|
+
<div class="ponkotsu-md-editor-tab-pane fade show active" id="basic" role="tabpanel">
|
|
57
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
58
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
59
|
+
<thead>
|
|
60
|
+
<tr>
|
|
61
|
+
<th width="35%"><% case lang
|
|
62
|
+
when :en then "Writing"
|
|
63
|
+
when :ja then "書き方"
|
|
64
|
+
else "N/A"
|
|
65
|
+
end %></th>
|
|
66
|
+
<th width="35%"><% case lang
|
|
67
|
+
when :en then "Result"
|
|
68
|
+
when :ja then "結果"
|
|
69
|
+
else "N/A"
|
|
70
|
+
end %></th>
|
|
71
|
+
<th width="30%"><% case lang
|
|
72
|
+
when :en then "Description"
|
|
73
|
+
when :ja then "説明"
|
|
74
|
+
else "N/A"
|
|
75
|
+
end %></th>
|
|
76
|
+
</tr>
|
|
77
|
+
</thead>
|
|
78
|
+
<tbody>
|
|
79
|
+
<tr>
|
|
80
|
+
<td><code><% case lang
|
|
81
|
+
when :en then "# Heading 1"
|
|
82
|
+
when :ja then "# 見出し1"
|
|
83
|
+
else "N/A"
|
|
84
|
+
end %></code></td>
|
|
85
|
+
<td><h1 style="font-size: 1.4rem; margin: 0;"><% case lang
|
|
86
|
+
when :en then "Heading 1"
|
|
87
|
+
when :ja then "見出し1"
|
|
88
|
+
else "N/A"
|
|
89
|
+
end %></h1></td>
|
|
90
|
+
<td><% case lang
|
|
91
|
+
when :en then "Largest heading"
|
|
92
|
+
when :ja then "最大の見出し"
|
|
93
|
+
else "N/A"
|
|
94
|
+
end %></td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td><code><% case lang
|
|
98
|
+
when :en then "## Heading 2"
|
|
99
|
+
when :ja then "## 見出し2"
|
|
100
|
+
else "N/A"
|
|
101
|
+
end %></code></td>
|
|
102
|
+
<td><h2 style="font-size: 1.2rem; margin: 0;"><% case lang
|
|
103
|
+
when :en then "Heading 2"
|
|
104
|
+
when :ja then "見出し2"
|
|
105
|
+
else "N/A"
|
|
106
|
+
end %></h2></td>
|
|
107
|
+
<td><% case lang
|
|
108
|
+
when :en then "Second largest heading"
|
|
109
|
+
when :ja then "大見出し"
|
|
110
|
+
else "N/A"
|
|
111
|
+
end %></td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td><code><% case lang
|
|
115
|
+
when :en then "### Heading 3"
|
|
116
|
+
when :ja then "### 見出し3"
|
|
117
|
+
else "N/A"
|
|
118
|
+
end %></code></td>
|
|
119
|
+
<td><h3 style="font-size: 1.1rem; margin: 0;"><% case lang
|
|
120
|
+
when :en then "Heading 3"
|
|
121
|
+
when :ja then "見出し3"
|
|
122
|
+
else "N/A"
|
|
123
|
+
end %></h3></td>
|
|
124
|
+
<td><% case lang
|
|
125
|
+
when :en then "Third largest heading"
|
|
126
|
+
when :ja then "中見出し"
|
|
127
|
+
else "N/A"
|
|
128
|
+
end %></td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td><code><% case lang
|
|
132
|
+
when :en then "**Bold**"
|
|
133
|
+
when :ja then "**太字**"
|
|
134
|
+
else "N/A"
|
|
135
|
+
end %></code></td>
|
|
136
|
+
<td><strong><% case lang
|
|
137
|
+
when :en then "Bold"
|
|
138
|
+
when :ja then "太字"
|
|
139
|
+
else "N/A"
|
|
140
|
+
end %></strong></td>
|
|
141
|
+
<td><% case lang
|
|
142
|
+
when :en then "Emphasizes important text"
|
|
143
|
+
when :ja then "重要な箇所の強調"
|
|
144
|
+
else "N/A"
|
|
145
|
+
end %></td>
|
|
146
|
+
</tr>
|
|
147
|
+
<tr>
|
|
148
|
+
<td><code><% case lang
|
|
149
|
+
when :en then "*Italic*"
|
|
150
|
+
when :ja then "*斜体*"
|
|
151
|
+
else "N/A"
|
|
152
|
+
end %></code></td>
|
|
153
|
+
<td><em><% case lang
|
|
154
|
+
when :en then "Italic"
|
|
155
|
+
when :ja then "斜体"
|
|
156
|
+
else "N/A"
|
|
157
|
+
end %></em></td>
|
|
158
|
+
<td><% case lang
|
|
159
|
+
when :en then "Light emphasis"
|
|
160
|
+
when :ja then "軽い強調"
|
|
161
|
+
else "N/A"
|
|
162
|
+
end %></td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td><code><% case lang
|
|
166
|
+
when :en then "~~Strikethrough~~"
|
|
167
|
+
when :ja then "~~打ち消し~~"
|
|
168
|
+
else "N/A"
|
|
169
|
+
end %></code></td>
|
|
170
|
+
<td><s><% case lang
|
|
171
|
+
when :en then "Strikethrough"
|
|
172
|
+
when :ja then "打ち消し"
|
|
173
|
+
else "N/A"
|
|
174
|
+
end %></s></td>
|
|
175
|
+
<td><% case lang
|
|
176
|
+
when :en then "Strikethrough"
|
|
177
|
+
when :ja then "削除された内容"
|
|
178
|
+
else "N/A"
|
|
179
|
+
end %></td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code><% case lang
|
|
183
|
+
when :en then "`Inline Code`"
|
|
184
|
+
when :ja then "`インラインコード`"
|
|
185
|
+
else "N/A"
|
|
186
|
+
end %></code></td>
|
|
187
|
+
<td><code style="background: #6c757d; padding: 2px 6px; border-radius: 4px; color: white;"><% case lang
|
|
188
|
+
when :en then "Inline Code"
|
|
189
|
+
when :ja then "インラインコード"
|
|
190
|
+
else "N/A"
|
|
191
|
+
end %></code></td>
|
|
192
|
+
<td><% case lang
|
|
193
|
+
when :en then "Inline Code"
|
|
194
|
+
when :ja then "文中のコード"
|
|
195
|
+
else "N/A"
|
|
196
|
+
end %></td>
|
|
197
|
+
</tr>
|
|
198
|
+
</tbody>
|
|
199
|
+
</table>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<!-- 構造要素タブ -->
|
|
204
|
+
<div class="ponkotsu-md-editor-tab-pane fade" id="structure" role="tabpanel">
|
|
205
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
206
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
207
|
+
<thead>
|
|
208
|
+
<tr>
|
|
209
|
+
<th width="35%"><% case lang
|
|
210
|
+
when :en then "Writing"
|
|
211
|
+
when :ja then "書き方"
|
|
212
|
+
else "N/A"
|
|
213
|
+
end %></th>
|
|
214
|
+
<th width="35%"><% case lang
|
|
215
|
+
when :en then "Result"
|
|
216
|
+
when :ja then "結果"
|
|
217
|
+
else "N/A"
|
|
218
|
+
end %></th>
|
|
219
|
+
<th width="30%"><% case lang
|
|
220
|
+
when :en then "Description"
|
|
221
|
+
when :ja then "説明"
|
|
222
|
+
else "N/A"
|
|
223
|
+
end %></th>
|
|
224
|
+
</tr>
|
|
225
|
+
</thead>
|
|
226
|
+
<tbody>
|
|
227
|
+
<tr>
|
|
228
|
+
<td><code>- <% case lang
|
|
229
|
+
when :en then "List Item"
|
|
230
|
+
when :ja then "リスト項目"
|
|
231
|
+
else "N/A"
|
|
232
|
+
end %></code></td>
|
|
233
|
+
<td>
|
|
234
|
+
<ul style="margin: 0; padding-left: 1rem;">
|
|
235
|
+
<li><% case lang
|
|
236
|
+
when :en then "List Item"
|
|
237
|
+
when :ja then "リスト項目"
|
|
238
|
+
else "N/A"
|
|
239
|
+
end %></li>
|
|
240
|
+
</ul>
|
|
241
|
+
</td>
|
|
242
|
+
<td><% case lang
|
|
243
|
+
when :en then "Unordered List"
|
|
244
|
+
when :ja then "箇条書きリスト"
|
|
245
|
+
else "N/A"
|
|
246
|
+
end %></td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr>
|
|
249
|
+
<td><code>1. <% case lang
|
|
250
|
+
when :en then "Ordered Item"
|
|
251
|
+
when :ja then "番号付き項目"
|
|
252
|
+
else "N/A"
|
|
253
|
+
end %></code></td>
|
|
254
|
+
<td>
|
|
255
|
+
<ol style="margin: 0; padding-left: 1rem;">
|
|
256
|
+
<li><% case lang
|
|
257
|
+
when :en then "Ordered Item"
|
|
258
|
+
when :ja then "番号付き項目"
|
|
259
|
+
else "N/A"
|
|
260
|
+
end %></code></li>
|
|
261
|
+
</ol>
|
|
262
|
+
</td>
|
|
263
|
+
<td><% case lang
|
|
264
|
+
when :en then "Ordered List"
|
|
265
|
+
when :ja then "順序付きリスト"
|
|
266
|
+
else "N/A"
|
|
267
|
+
end %></code></td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td><code>- [ ] <% case lang
|
|
271
|
+
when :en then "Incomplete Task"
|
|
272
|
+
when :ja then "未完了タスク"
|
|
273
|
+
else "N/A"
|
|
274
|
+
end %></code></td>
|
|
275
|
+
<td>
|
|
276
|
+
<div style="margin: 0;">
|
|
277
|
+
<input type="checkbox" disabled> <% case lang
|
|
278
|
+
when :en then "Incomplete Task"
|
|
279
|
+
when :ja then "未完了タスク"
|
|
280
|
+
else "N/A"
|
|
281
|
+
end %>
|
|
282
|
+
</div>
|
|
283
|
+
</td>
|
|
284
|
+
<td><% case lang
|
|
285
|
+
when :en then "Checkbox"
|
|
286
|
+
when :ja then "チェックボックス"
|
|
287
|
+
else "N/A"
|
|
288
|
+
end %></td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr>
|
|
291
|
+
<td><code>- [x] <% case lang
|
|
292
|
+
when :en then "Completed Task"
|
|
293
|
+
when :ja then "完了済みタスク"
|
|
294
|
+
else "N/A"
|
|
295
|
+
end %></code></td>
|
|
296
|
+
<td>
|
|
297
|
+
<div style="margin: 0;">
|
|
298
|
+
<input type="checkbox" checked disabled> <span style="text-decoration: line-through; color: #6c757d;"><% case lang
|
|
299
|
+
when :en then "Completed Task"
|
|
300
|
+
when :ja then "完了済みタスク"
|
|
301
|
+
else "N/A"
|
|
302
|
+
end %></span>
|
|
303
|
+
</div>
|
|
304
|
+
</td>
|
|
305
|
+
<td><% case lang
|
|
306
|
+
when :en then "Completed Task"
|
|
307
|
+
when :ja then "完了タスク"
|
|
308
|
+
else "N/A"
|
|
309
|
+
end %></td>
|
|
310
|
+
</tr>
|
|
311
|
+
<tr>
|
|
312
|
+
<td><code>> <% case lang
|
|
313
|
+
when :en then "Quote"
|
|
314
|
+
when :ja then "引用文"
|
|
315
|
+
else "N/A"
|
|
316
|
+
end %></code></td>
|
|
317
|
+
<td>
|
|
318
|
+
<blockquote style="border-left: 4px solid #0dcaf0; padding-left: 1rem; margin: 0; color: #adb5bd;">
|
|
319
|
+
<% case lang
|
|
320
|
+
when :en then "Quote"
|
|
321
|
+
when :ja then "引用文"
|
|
322
|
+
else "N/A"
|
|
323
|
+
end %>
|
|
324
|
+
</blockquote>
|
|
325
|
+
</td>
|
|
326
|
+
<td><% case lang
|
|
327
|
+
when :en then "Blockquote"
|
|
328
|
+
when :ja then "引用ブロック"
|
|
329
|
+
else "N/A"
|
|
330
|
+
end %></td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td><code>---</code></td>
|
|
334
|
+
<td><hr style="border: 1px solid #6c757d; margin: 0.5rem 0;"></td>
|
|
335
|
+
<td><% case lang
|
|
336
|
+
when :en then "Horizontal Rule"
|
|
337
|
+
when :ja then "水平線"
|
|
338
|
+
else "N/A"
|
|
339
|
+
end %></td>
|
|
340
|
+
</tr>
|
|
341
|
+
</tbody>
|
|
342
|
+
</table>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<!-- 応用機能タブ -->
|
|
347
|
+
<div class="ponkotsu-md-editor-tab-pane fade" id="advanced" role="tabpanel">
|
|
348
|
+
<div class="ponkotsu-md-editor-table-responsive">
|
|
349
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-dark ponkotsu-md-editor-table-striped">
|
|
350
|
+
<thead>
|
|
351
|
+
<tr>
|
|
352
|
+
<th width="35%"><% case lang
|
|
353
|
+
when :en then "Writing"
|
|
354
|
+
when :ja then "書き方"
|
|
355
|
+
else "N/A"
|
|
356
|
+
end %></th>
|
|
357
|
+
<th width="35%"><% case lang
|
|
358
|
+
when :en then "Result"
|
|
359
|
+
when :ja then "結果"
|
|
360
|
+
else "N/A"
|
|
361
|
+
end %></th>
|
|
362
|
+
<th width="30%"><% case lang
|
|
363
|
+
when :en then "Description"
|
|
364
|
+
when :ja then "説明"
|
|
365
|
+
else "N/A"
|
|
366
|
+
end %></th>
|
|
367
|
+
</tr>
|
|
368
|
+
</thead>
|
|
369
|
+
<tbody>
|
|
370
|
+
<tr>
|
|
371
|
+
<td><code>[<% case lang
|
|
372
|
+
when :en then "Link"
|
|
373
|
+
when :ja then "リンク"
|
|
374
|
+
else "N/A"
|
|
375
|
+
end %>](https://example.com)</code></td>
|
|
376
|
+
<td><a href="#" style="color: var(--accent-pink); text-decoration: none;"><% case lang
|
|
377
|
+
when :en then "Link"
|
|
378
|
+
when :ja then "リンク"
|
|
379
|
+
else "N/A"
|
|
380
|
+
end %></a></td>
|
|
381
|
+
<td><% case lang
|
|
382
|
+
when :en then "External Link"
|
|
383
|
+
when :ja then "外部リンク"
|
|
384
|
+
else "N/A"
|
|
385
|
+
end %></td>
|
|
386
|
+
</tr>
|
|
387
|
+
<tr>
|
|
388
|
+
<td><code><% case lang
|
|
389
|
+
when :en then ""
|
|
390
|
+
when :ja then ""
|
|
391
|
+
else "N/A"
|
|
392
|
+
end %></code></td>
|
|
393
|
+
<td>
|
|
394
|
+
<div style="background: #6c757d; padding: 1rem; border-radius: 4px; text-align: center; color: white; font-size: 0.9rem;">
|
|
395
|
+
[image] <!-- アイコン --> <% case lang
|
|
396
|
+
when :en then "Image"
|
|
397
|
+
when :ja then "画像"
|
|
398
|
+
else "N/A"
|
|
399
|
+
end %>
|
|
400
|
+
</div>
|
|
401
|
+
</td>
|
|
402
|
+
<td><% case lang
|
|
403
|
+
when :en then "Image"
|
|
404
|
+
when :ja then "画像の挿入"
|
|
405
|
+
else "N/A"
|
|
406
|
+
end %></td>
|
|
407
|
+
</tr>
|
|
408
|
+
<tr>
|
|
409
|
+
<td style="font-size: 0.85rem;">
|
|
410
|
+
<code>```<br><% case lang
|
|
411
|
+
when :en then "Code Block"
|
|
412
|
+
when :ja then "コードブロック"
|
|
413
|
+
else "N/A"
|
|
414
|
+
end %><br>function hello() {<br> return 'Hello';<br>}<br>```</code>
|
|
415
|
+
</td>
|
|
416
|
+
<td>
|
|
417
|
+
<pre style="background: #2d3748; color: #e2e8f0; padding: 0.75rem; border-radius: 4px; margin: 0; font-size: 0.85rem;"><% case lang
|
|
418
|
+
when :en then "Code Block"
|
|
419
|
+
when :ja then "コードブロック"
|
|
420
|
+
else "N/A"
|
|
421
|
+
end %>
|
|
422
|
+
function hello() {
|
|
423
|
+
return 'Hello';
|
|
424
|
+
}</pre>
|
|
425
|
+
</td>
|
|
426
|
+
<td><% case lang
|
|
427
|
+
when :en then "Multiple Line Code"
|
|
428
|
+
when :ja then "複数行コード"
|
|
429
|
+
else "N/A"
|
|
430
|
+
end %></td>
|
|
431
|
+
</tr>
|
|
432
|
+
<tr>
|
|
433
|
+
<td style="font-size: 0.8rem;">
|
|
434
|
+
<code><% case lang
|
|
435
|
+
when :en then "| Col 1 | Col 2 | Col 3 |<br>|-----|-----|-----|<br>| A | B | C |"
|
|
436
|
+
when :ja then "| 列1 | 列2 | 列3 |<br>|-----|-----|-----|<br>| A | B | C |"
|
|
437
|
+
else "N/A"
|
|
438
|
+
end %></code>
|
|
439
|
+
</td>
|
|
440
|
+
<td>
|
|
441
|
+
<table class="ponkotsu-md-editor-table ponkotsu-md-editor-table-sm ponkotsu-md-editor-table-bordered" style="margin: 0; font-size: 0.85rem;">
|
|
442
|
+
<% case lang %>
|
|
443
|
+
<% when :en %>
|
|
444
|
+
<thead>
|
|
445
|
+
<tr style="background: #495057;">
|
|
446
|
+
<th>Row 1</th>
|
|
447
|
+
<th>Row 2</th>
|
|
448
|
+
<th>Row 3</th>
|
|
449
|
+
</tr>
|
|
450
|
+
</thead>
|
|
451
|
+
<tbody>
|
|
452
|
+
<tr>
|
|
453
|
+
<td>A</td>
|
|
454
|
+
<td>B</td>
|
|
455
|
+
<td>C</td>
|
|
456
|
+
</tr>
|
|
457
|
+
</tbody>
|
|
458
|
+
<% when :ja %>
|
|
459
|
+
<thead>
|
|
460
|
+
<tr style="background: #495057;">
|
|
461
|
+
<th>列1</th>
|
|
462
|
+
<th>列2</th>
|
|
463
|
+
<th>列3</th>
|
|
464
|
+
</tr>
|
|
465
|
+
</thead>
|
|
466
|
+
<tbody>
|
|
467
|
+
<tr>
|
|
468
|
+
<td>A</td>
|
|
469
|
+
<td>B</td>
|
|
470
|
+
<td>C</td>
|
|
471
|
+
</tr>
|
|
472
|
+
</tbody>
|
|
473
|
+
<% end %>
|
|
474
|
+
</table>
|
|
475
|
+
</td>
|
|
476
|
+
<td><% case lang
|
|
477
|
+
when :en then "Table"
|
|
478
|
+
when :ja then "テーブル（表）"
|
|
479
|
+
else "N/A"
|
|
480
|
+
end %></td>
|
|
481
|
+
</tr>
|
|
482
|
+
</tbody>
|
|
483
|
+
</table>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<!-- フッター：ツールバー案内 -->
|
|
489
|
+
<div class="ponkotsu-md-editor-alert ponkotsu-md-editor-alert-info ponkotsu-md-editor-mt-4" role="alert">
|
|
490
|
+
[lightbulb] <!-- アイコン -->
|
|
491
|
+
<strong><% case lang
|
|
492
|
+
when :en then "Useful Features:"
|
|
493
|
+
when :ja then "便利機能："
|
|
494
|
+
else "N/A"
|
|
495
|
+
end %></strong>
|
|
496
|
+
<% case lang %>
|
|
497
|
+
<% when :en %>
|
|
498
|
+
Clicking the toolbar buttons above allows you to easily insert these Markdown syntaxes.
|
|
499
|
+
The code button [code] <!-- アイコン --> automatically determines whether to insert inline code or a code block based on the selected text.
|
|
500
|
+
<% when :ja %>
|
|
501
|
+
上部のツールバーボタンをクリックすると、これらのMarkdown記法を簡単に挿入できます。
|
|
502
|
+
コードボタン [code] <!-- アイコン --> は選択範囲に応じてインラインコードまたはコードブロックを自動判定します。
|
|
503
|
+
<% end %>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<div class="markdown-preview" id="markdownPreview"
|
|
1
|
+
<div class="ponkotsu-md-editor-markdown-preview" id="markdownPreview"
|
|
2
2
|
style="display: none; min-height: 500px; padding: 1rem; background-color: var(--preview-bg); border: 1px solid var(--border-color); border-radius: 0.375rem; color: var(--text-primary);">
|
|
3
3
|
</div>
|
|
@@ -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
|
|
28
|
-
|
|
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
|
|
34
|
-
|
|
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
|
|
40
|
-
|
|
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
|
|
46
|
-
|
|
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
|
|
53
|
-
|
|
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
|
|
59
|
-
|
|
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
|
|
65
|
-
|
|
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
|
|
71
|
-
|
|
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
|
|
77
|
-
|
|
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
|
|
83
|
-
|
|
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
|
|
90
|
-
|
|
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
|
|
96
|
-
|
|
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
|
|
102
|
-
|
|
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
|
|
108
|
-
|
|
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
|
|
114
|
-
|
|
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
|
|
120
|
-
|
|
228
|
+
<button type="button" class="ponkotsu-md-editor-btn ponkotsu-md-editor-btn-outline" id="toolbar-image-btn" onclick="insertMarkdown('')"
|
|
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
|
|
126
|
-
|
|
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
|
|
132
|
-
|
|
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
|
|
138
|
-
|
|
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
|
-
<
|
|
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>
|
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.
|
|
4
|
+
version: 0.2.10
|
|
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
|