@uiw/react-md-editor 3.9.0 → 3.9.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.
- package/README.md +36 -1
- package/dist/mdeditor.css +671 -0
- package/dist/mdeditor.js +73665 -0
- package/dist/mdeditor.min.css +1 -0
- package/dist/mdeditor.min.js +2 -0
- package/dist/mdeditor.min.js.LICENSE.txt +49 -0
- package/esm/components/TextArea/handleKeyDown.js +6 -0
- package/esm/components/TextArea/handleKeyDown.js.map +2 -2
- package/esm/components/TextArea/index.css +1 -2
- package/esm/components/Toolbar/index.js +15 -3
- package/esm/components/Toolbar/index.js.map +7 -2
- package/esm/index.css +1 -1
- package/esm/index.less +1 -1
- package/lib/components/TextArea/handleKeyDown.js +6 -0
- package/lib/components/TextArea/handleKeyDown.js.map +2 -2
- package/lib/components/Toolbar/index.js +15 -2
- package/lib/components/Toolbar/index.js.map +6 -2
- package/lib/index.less +1 -1
- package/markdown-editor.css +2 -3
- package/package.json +15 -19
- package/src/__test__/commands.test.tsx +512 -0
- package/src/__test__/editor.test.tsx +63 -0
- package/src/__test__/utils/getSurroundingWord.test.tsx +22 -0
- package/src/components/TextArea/handleKeyDown.tsx +8 -0
- package/src/components/Toolbar/index.tsx +15 -3
- package/src/index.less +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/README.md">
|
|
3
|
-
<img alt="react-md-editor logo" src="https://
|
|
3
|
+
<img alt="react-md-editor logo" src="https://user-images.githubusercontent.com/1680273/146292033-0e5e57fc-6f3e-4032-9fa6-0de05f239e36.png">
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
@@ -71,6 +71,35 @@ export default function App() {
|
|
|
71
71
|
}
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
### Security
|
|
75
|
+
Please note markdown needs to be sanitized if you do not **completely trust** your authors.
|
|
76
|
+
Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin.
|
|
77
|
+
|
|
78
|
+
```jsx
|
|
79
|
+
import React from "react";
|
|
80
|
+
import MDEditor from '@uiw/react-md-editor';
|
|
81
|
+
import rehypeSanitize from "rehype-sanitize";
|
|
82
|
+
|
|
83
|
+
export default function App() {
|
|
84
|
+
const [value, setValue] = React.useState("**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>");
|
|
85
|
+
return (
|
|
86
|
+
<div className="container">
|
|
87
|
+
<MDEditor
|
|
88
|
+
value={value}
|
|
89
|
+
onChange={setValue}
|
|
90
|
+
previewOptions={{
|
|
91
|
+
rehypePlugins: [[rehypeSanitize]],
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
<MDEditor.Markdown
|
|
95
|
+
source={value}
|
|
96
|
+
rehypePlugins={[[rehypeSanitize]]}
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
74
103
|
### Custom Toolbars
|
|
75
104
|
|
|
76
105
|
[](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
|
|
@@ -434,6 +463,12 @@ npm run start # Preview code example.
|
|
|
434
463
|
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
|
|
435
464
|
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
|
|
436
465
|
|
|
466
|
+
## Contributors
|
|
467
|
+
|
|
468
|
+
<a href="https://github.com/uiwjs/react-md-editor/graphs/contributors">
|
|
469
|
+
<img src="https://uiwjs.github.io/react-md-editor/CONTRIBUTORS.svg" />
|
|
470
|
+
</a>
|
|
471
|
+
|
|
437
472
|
### License
|
|
438
473
|
|
|
439
474
|
Licensed under the MIT License.
|
|
@@ -0,0 +1,671 @@
|
|
|
1
|
+
.wmde-markdown {
|
|
2
|
+
font-size: 16px;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
5
|
+
}
|
|
6
|
+
.wmde-markdown > :first-child {
|
|
7
|
+
margin-top: 0 !important;
|
|
8
|
+
}
|
|
9
|
+
.wmde-markdown > :last-child {
|
|
10
|
+
margin-bottom: 0 !important;
|
|
11
|
+
}
|
|
12
|
+
.wmde-markdown pre[class*='language-']:hover .copied,
|
|
13
|
+
.wmde-markdown pre:hover .copied {
|
|
14
|
+
visibility: visible;
|
|
15
|
+
}
|
|
16
|
+
.wmde-markdown pre[class*='language-'] .copied,
|
|
17
|
+
.wmde-markdown pre .copied {
|
|
18
|
+
visibility: hidden;
|
|
19
|
+
display: flex;
|
|
20
|
+
position: absolute;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
color: #a5afbb;
|
|
23
|
+
top: 6px;
|
|
24
|
+
right: 6px;
|
|
25
|
+
border-radius: 5px;
|
|
26
|
+
background: #e3e3e3;
|
|
27
|
+
padding: 6px;
|
|
28
|
+
font-size: 12px;
|
|
29
|
+
transition: all 0.3s;
|
|
30
|
+
}
|
|
31
|
+
.wmde-markdown pre[class*='language-'] .copied::before,
|
|
32
|
+
.wmde-markdown pre .copied::before {
|
|
33
|
+
content: ' ';
|
|
34
|
+
position: absolute;
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 100%;
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
}
|
|
40
|
+
.wmde-markdown pre[class*='language-'] .copied .octicon-copy,
|
|
41
|
+
.wmde-markdown pre .copied .octicon-copy {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
.wmde-markdown pre[class*='language-'] .copied .octicon-check,
|
|
45
|
+
.wmde-markdown pre .copied .octicon-check {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
.wmde-markdown pre[class*='language-'] .copied.active .octicon-copy,
|
|
49
|
+
.wmde-markdown pre .copied.active .octicon-copy {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
.wmde-markdown pre[class*='language-'] .copied.active .octicon-check,
|
|
53
|
+
.wmde-markdown pre .copied.active .octicon-check {
|
|
54
|
+
display: block;
|
|
55
|
+
}
|
|
56
|
+
.wmde-markdown pre[class*='language-'] .copied:hover,
|
|
57
|
+
.wmde-markdown pre .copied:hover,
|
|
58
|
+
.wmde-markdown pre[class*='language-'] .copied:active,
|
|
59
|
+
.wmde-markdown pre .copied:active,
|
|
60
|
+
.wmde-markdown pre[class*='language-'] .copied.active,
|
|
61
|
+
.wmde-markdown pre .copied.active {
|
|
62
|
+
background: #2e9b33;
|
|
63
|
+
color: #fff;
|
|
64
|
+
}
|
|
65
|
+
.wmde-markdown code[class*='language-'],
|
|
66
|
+
.wmde-markdown pre[class*='language-'] {
|
|
67
|
+
color: black;
|
|
68
|
+
text-align: left;
|
|
69
|
+
white-space: pre;
|
|
70
|
+
word-spacing: normal;
|
|
71
|
+
word-break: normal;
|
|
72
|
+
word-wrap: normal;
|
|
73
|
+
-webkit-hyphens: none;
|
|
74
|
+
-ms-hyphens: none;
|
|
75
|
+
hyphens: none;
|
|
76
|
+
}
|
|
77
|
+
.wmde-markdown pre code {
|
|
78
|
+
display: block;
|
|
79
|
+
padding: 16px;
|
|
80
|
+
overflow: auto;
|
|
81
|
+
font-size: 85%;
|
|
82
|
+
line-height: 1.45;
|
|
83
|
+
background-color: #f6f8fa;
|
|
84
|
+
border-radius: 6px;
|
|
85
|
+
}
|
|
86
|
+
.wmde-markdown pre {
|
|
87
|
+
margin-bottom: 18px;
|
|
88
|
+
line-height: 1.45;
|
|
89
|
+
position: relative;
|
|
90
|
+
overflow-x: auto;
|
|
91
|
+
background-color: #f6f8fa;
|
|
92
|
+
border-radius: 3px;
|
|
93
|
+
}
|
|
94
|
+
.wmde-markdown code,
|
|
95
|
+
.wmde-markdown tt {
|
|
96
|
+
background-color: rgba(27, 31, 35, 0.05);
|
|
97
|
+
border-radius: 3px;
|
|
98
|
+
font-size: 85%;
|
|
99
|
+
margin: 0;
|
|
100
|
+
padding: 0.2em 0.4em;
|
|
101
|
+
}
|
|
102
|
+
.wmde-markdown pre,
|
|
103
|
+
.wmde-markdown code,
|
|
104
|
+
.wmde-markdown tt {
|
|
105
|
+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
|
106
|
+
}
|
|
107
|
+
.wmde-markdown img {
|
|
108
|
+
max-width: 100%;
|
|
109
|
+
}
|
|
110
|
+
.wmde-markdown input {
|
|
111
|
+
vertical-align: middle;
|
|
112
|
+
margin: 0 0.2em 0.25em -1.6em;
|
|
113
|
+
}
|
|
114
|
+
.wmde-markdown input + p {
|
|
115
|
+
display: inline;
|
|
116
|
+
}
|
|
117
|
+
.wmde-markdown h1,
|
|
118
|
+
.wmde-markdown h2 {
|
|
119
|
+
border-bottom: 1px solid #eaecef;
|
|
120
|
+
padding-bottom: 0.3em;
|
|
121
|
+
}
|
|
122
|
+
.wmde-markdown h1,
|
|
123
|
+
.wmde-markdown h2,
|
|
124
|
+
.wmde-markdown h3,
|
|
125
|
+
.wmde-markdown h4,
|
|
126
|
+
.wmde-markdown h5,
|
|
127
|
+
.wmde-markdown h6 {
|
|
128
|
+
font-weight: 600;
|
|
129
|
+
line-height: 1.25;
|
|
130
|
+
margin-bottom: 16px;
|
|
131
|
+
margin-top: 24px;
|
|
132
|
+
}
|
|
133
|
+
.wmde-markdown h1 .anchor,
|
|
134
|
+
.wmde-markdown h2 .anchor,
|
|
135
|
+
.wmde-markdown h3 .anchor,
|
|
136
|
+
.wmde-markdown h4 .anchor,
|
|
137
|
+
.wmde-markdown h5 .anchor,
|
|
138
|
+
.wmde-markdown h6 .anchor {
|
|
139
|
+
float: left;
|
|
140
|
+
padding-right: 4px;
|
|
141
|
+
margin-left: -20px;
|
|
142
|
+
line-height: 1;
|
|
143
|
+
}
|
|
144
|
+
.wmde-markdown h1 .octicon-link,
|
|
145
|
+
.wmde-markdown h2 .octicon-link,
|
|
146
|
+
.wmde-markdown h3 .octicon-link,
|
|
147
|
+
.wmde-markdown h4 .octicon-link,
|
|
148
|
+
.wmde-markdown h5 .octicon-link,
|
|
149
|
+
.wmde-markdown h6 .octicon-link {
|
|
150
|
+
visibility: hidden;
|
|
151
|
+
vertical-align: middle;
|
|
152
|
+
}
|
|
153
|
+
.wmde-markdown h1:hover .octicon-link,
|
|
154
|
+
.wmde-markdown h2:hover .octicon-link,
|
|
155
|
+
.wmde-markdown h3:hover .octicon-link,
|
|
156
|
+
.wmde-markdown h4:hover .octicon-link,
|
|
157
|
+
.wmde-markdown h5:hover .octicon-link,
|
|
158
|
+
.wmde-markdown h6:hover .octicon-link {
|
|
159
|
+
visibility: visible;
|
|
160
|
+
}
|
|
161
|
+
.wmde-markdown h1 {
|
|
162
|
+
font-size: 2em;
|
|
163
|
+
}
|
|
164
|
+
.wmde-markdown h2 {
|
|
165
|
+
font-size: 1.5em;
|
|
166
|
+
}
|
|
167
|
+
.wmde-markdown h3 {
|
|
168
|
+
font-size: 1.25em;
|
|
169
|
+
}
|
|
170
|
+
.wmde-markdown h4 {
|
|
171
|
+
font-size: 1em;
|
|
172
|
+
}
|
|
173
|
+
.wmde-markdown h5 {
|
|
174
|
+
font-size: 0.875em;
|
|
175
|
+
}
|
|
176
|
+
.wmde-markdown h6 {
|
|
177
|
+
font-size: 0.85em;
|
|
178
|
+
}
|
|
179
|
+
.wmde-markdown ol,
|
|
180
|
+
.wmde-markdown ul {
|
|
181
|
+
padding-left: 2em;
|
|
182
|
+
}
|
|
183
|
+
.wmde-markdown ol > p,
|
|
184
|
+
.wmde-markdown ul > p {
|
|
185
|
+
margin-bottom: 0;
|
|
186
|
+
}
|
|
187
|
+
.wmde-markdown ul {
|
|
188
|
+
margin-bottom: 16px;
|
|
189
|
+
margin-top: 0;
|
|
190
|
+
list-style: disc outside none;
|
|
191
|
+
list-style: initial;
|
|
192
|
+
}
|
|
193
|
+
.wmde-markdown > blockquote,
|
|
194
|
+
.wmde-markdown > blockquote blockquote {
|
|
195
|
+
margin: 0;
|
|
196
|
+
border-left: 0.25em solid #dfe2e5;
|
|
197
|
+
color: #6a737d;
|
|
198
|
+
padding: 0 1em;
|
|
199
|
+
}
|
|
200
|
+
.wmde-markdown > blockquote > :last-child,
|
|
201
|
+
.wmde-markdown > blockquote blockquote > :last-child {
|
|
202
|
+
margin-bottom: 0;
|
|
203
|
+
}
|
|
204
|
+
.wmde-markdown > blockquote > :first-child,
|
|
205
|
+
.wmde-markdown > blockquote blockquote > :first-child {
|
|
206
|
+
margin-top: 0;
|
|
207
|
+
}
|
|
208
|
+
.wmde-markdown hr {
|
|
209
|
+
margin: 1.5em auto;
|
|
210
|
+
border: 0;
|
|
211
|
+
border-top: 2px dotted #eee;
|
|
212
|
+
height: 1px;
|
|
213
|
+
}
|
|
214
|
+
.wmde-markdown > table,
|
|
215
|
+
.wmde-markdown > blockquote table {
|
|
216
|
+
display: block;
|
|
217
|
+
overflow: auto;
|
|
218
|
+
width: 100%;
|
|
219
|
+
border-collapse: collapse;
|
|
220
|
+
border-spacing: 0;
|
|
221
|
+
font-size: 14px;
|
|
222
|
+
}
|
|
223
|
+
.wmde-markdown > table tr,
|
|
224
|
+
.wmde-markdown > blockquote table tr {
|
|
225
|
+
background-color: #fff;
|
|
226
|
+
border-top: 1px solid #c6cbd1;
|
|
227
|
+
}
|
|
228
|
+
.wmde-markdown > table td,
|
|
229
|
+
.wmde-markdown > blockquote table td,
|
|
230
|
+
.wmde-markdown > table th,
|
|
231
|
+
.wmde-markdown > blockquote table th {
|
|
232
|
+
border: 1px solid #dfe2e5;
|
|
233
|
+
padding: 6px 13px;
|
|
234
|
+
}
|
|
235
|
+
.wmde-markdown blockquote,
|
|
236
|
+
.wmde-markdown details,
|
|
237
|
+
.wmde-markdown dl,
|
|
238
|
+
.wmde-markdown ol,
|
|
239
|
+
.wmde-markdown p,
|
|
240
|
+
.wmde-markdown pre,
|
|
241
|
+
.wmde-markdown table,
|
|
242
|
+
.wmde-markdown ul {
|
|
243
|
+
margin-bottom: 16px;
|
|
244
|
+
margin-top: 0;
|
|
245
|
+
}
|
|
246
|
+
.wmde-markdown a {
|
|
247
|
+
color: #0366d6;
|
|
248
|
+
text-decoration: none;
|
|
249
|
+
}
|
|
250
|
+
.wmde-markdown a:hover {
|
|
251
|
+
text-decoration: underline;
|
|
252
|
+
}
|
|
253
|
+
.wmde-markdown .namespace {
|
|
254
|
+
opacity: 0.7;
|
|
255
|
+
}
|
|
256
|
+
.wmde-markdown .token.important {
|
|
257
|
+
font-weight: normal;
|
|
258
|
+
}
|
|
259
|
+
.wmde-markdown .token.bold {
|
|
260
|
+
font-weight: bold;
|
|
261
|
+
}
|
|
262
|
+
.wmde-markdown .token.italic {
|
|
263
|
+
font-style: italic;
|
|
264
|
+
}
|
|
265
|
+
.wmde-markdown .token.entity {
|
|
266
|
+
cursor: help;
|
|
267
|
+
}
|
|
268
|
+
.wmde-markdown kbd {
|
|
269
|
+
background-color: #fafbfc;
|
|
270
|
+
border-bottom-color: #d1d5da;
|
|
271
|
+
border: 1px solid #d1d5da;
|
|
272
|
+
border-radius: 3px;
|
|
273
|
+
box-shadow: inset 0 -1px 0 #d1d5da;
|
|
274
|
+
color: #56595d;
|
|
275
|
+
display: inline-block;
|
|
276
|
+
font-size: 10px;
|
|
277
|
+
font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace;
|
|
278
|
+
line-height: 10px;
|
|
279
|
+
padding: 2px 4px;
|
|
280
|
+
vertical-align: middle;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.wmde-markdown-color .token.tag .attr-value {
|
|
284
|
+
color: #032f62;
|
|
285
|
+
}
|
|
286
|
+
.wmde-markdown-color .token.property,
|
|
287
|
+
.wmde-markdown-color .token.tag,
|
|
288
|
+
.wmde-markdown-color .token.boolean,
|
|
289
|
+
.wmde-markdown-color .token.number,
|
|
290
|
+
.wmde-markdown-color .token.function-name,
|
|
291
|
+
.wmde-markdown-color .token.constant,
|
|
292
|
+
.wmde-markdown-color .token.symbol,
|
|
293
|
+
.wmde-markdown-color .token.deleted {
|
|
294
|
+
color: #0060c9;
|
|
295
|
+
}
|
|
296
|
+
.wmde-markdown-color .token.punctuation {
|
|
297
|
+
color: #a0a0a0;
|
|
298
|
+
}
|
|
299
|
+
.wmde-markdown-color code[class*='language-'] {
|
|
300
|
+
color: black;
|
|
301
|
+
}
|
|
302
|
+
.wmde-markdown-color code[class*='language-'] .token.selector,
|
|
303
|
+
.wmde-markdown-color code[class*='language-'] .token.attr-name,
|
|
304
|
+
.wmde-markdown-color code[class*='language-'] .token.string,
|
|
305
|
+
.wmde-markdown-color code[class*='language-'] .token.char,
|
|
306
|
+
.wmde-markdown-color code[class*='language-'] .token.function,
|
|
307
|
+
.wmde-markdown-color code[class*='language-'] .token.builtin {
|
|
308
|
+
color: #6f42c1;
|
|
309
|
+
}
|
|
310
|
+
.wmde-markdown-color code[class*='language-'] .token.inserted {
|
|
311
|
+
color: #22863a;
|
|
312
|
+
background-color: #f0fff4;
|
|
313
|
+
}
|
|
314
|
+
.wmde-markdown-color code[class*='language-'] .token.deleted {
|
|
315
|
+
color: #b31d28;
|
|
316
|
+
background-color: #ffeef0;
|
|
317
|
+
}
|
|
318
|
+
.wmde-markdown-color code[class*='language-'] .token.class-name {
|
|
319
|
+
color: #6f42c1;
|
|
320
|
+
}
|
|
321
|
+
.wmde-markdown-color code[class*='language-'] .code-block {
|
|
322
|
+
color: #032f62;
|
|
323
|
+
}
|
|
324
|
+
.wmde-markdown-color code[class*='language-'] .token.comment,
|
|
325
|
+
.wmde-markdown-color code[class*='language-'] .token.block-comment,
|
|
326
|
+
.wmde-markdown-color code[class*='language-'] .token.prolog,
|
|
327
|
+
.wmde-markdown-color code[class*='language-'] .token.doctype,
|
|
328
|
+
.wmde-markdown-color code[class*='language-'] .token.cdata {
|
|
329
|
+
color: #7d8b99;
|
|
330
|
+
}
|
|
331
|
+
.wmde-markdown-color code[class*='language-'] .token.punctuation {
|
|
332
|
+
color: #a0a0a0;
|
|
333
|
+
}
|
|
334
|
+
.wmde-markdown-color code[class*='language-'] .token.operator,
|
|
335
|
+
.wmde-markdown-color code[class*='language-'] .token.entity,
|
|
336
|
+
.wmde-markdown-color code[class*='language-'] .token.url,
|
|
337
|
+
.wmde-markdown-color code[class*='language-'] .token.variable {
|
|
338
|
+
color: #d73a49;
|
|
339
|
+
background: rgba(255, 255, 255, 0.5);
|
|
340
|
+
}
|
|
341
|
+
.wmde-markdown-color code[class*='language-'] .token.atrule,
|
|
342
|
+
.wmde-markdown-color code[class*='language-'] .token.attr-value {
|
|
343
|
+
color: #004698;
|
|
344
|
+
}
|
|
345
|
+
.wmde-markdown-color code[class*='language-'] .token.keyword {
|
|
346
|
+
color: #d63200;
|
|
347
|
+
}
|
|
348
|
+
.wmde-markdown-color code[class*='language-'] .token.regex,
|
|
349
|
+
.wmde-markdown-color code[class*='language-'] .token.important {
|
|
350
|
+
color: #e90;
|
|
351
|
+
}
|
|
352
|
+
.wmde-markdown-color code[class*='language-'] .token.string {
|
|
353
|
+
color: #0a53c1;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.w-md-editor-aree {
|
|
357
|
+
overflow: auto;
|
|
358
|
+
border-radius: 5px;
|
|
359
|
+
}
|
|
360
|
+
.w-md-editor-text {
|
|
361
|
+
min-height: 100%;
|
|
362
|
+
position: relative;
|
|
363
|
+
text-align: left;
|
|
364
|
+
white-space: pre-wrap;
|
|
365
|
+
word-break: keep-all;
|
|
366
|
+
overflow-wrap: break-word;
|
|
367
|
+
box-sizing: border-box;
|
|
368
|
+
padding: 10px;
|
|
369
|
+
margin: 0;
|
|
370
|
+
font-size: 14px;
|
|
371
|
+
line-height: 18px;
|
|
372
|
+
-webkit-font-variant-ligatures: common-ligatures;
|
|
373
|
+
-webkit-font-feature-settings: "liga", "clig";
|
|
374
|
+
font-feature-settings: "liga", "clig";
|
|
375
|
+
font-variant-ligatures: common-ligatures;
|
|
376
|
+
}
|
|
377
|
+
.w-md-editor-text-pre,
|
|
378
|
+
.w-md-editor-text-input,
|
|
379
|
+
.w-md-editor-text > .w-md-editor-text-pre {
|
|
380
|
+
margin: 0;
|
|
381
|
+
border: 0;
|
|
382
|
+
background: none;
|
|
383
|
+
box-sizing: inherit;
|
|
384
|
+
display: inherit;
|
|
385
|
+
font-family: inherit;
|
|
386
|
+
font-size: inherit;
|
|
387
|
+
font-style: inherit;
|
|
388
|
+
-webkit-font-variant-ligatures: inherit;
|
|
389
|
+
-webkit-font-feature-settings: inherit;
|
|
390
|
+
font-feature-settings: inherit;
|
|
391
|
+
font-variant-ligatures: inherit;
|
|
392
|
+
font-weight: inherit;
|
|
393
|
+
letter-spacing: inherit;
|
|
394
|
+
line-height: inherit;
|
|
395
|
+
tab-size: inherit;
|
|
396
|
+
text-indent: inherit;
|
|
397
|
+
text-rendering: inherit;
|
|
398
|
+
text-transform: inherit;
|
|
399
|
+
white-space: inherit;
|
|
400
|
+
overflow-wrap: inherit;
|
|
401
|
+
word-break: inherit;
|
|
402
|
+
word-break: normal;
|
|
403
|
+
padding: 0;
|
|
404
|
+
}
|
|
405
|
+
.w-md-editor-text-pre > code,
|
|
406
|
+
.w-md-editor-text-input > code,
|
|
407
|
+
.w-md-editor-text > .w-md-editor-text-pre > code {
|
|
408
|
+
font-family: inherit;
|
|
409
|
+
}
|
|
410
|
+
.w-md-editor-text-pre {
|
|
411
|
+
position: relative;
|
|
412
|
+
margin: 0px;
|
|
413
|
+
pointer-events: none;
|
|
414
|
+
}
|
|
415
|
+
.w-md-editor-text-input {
|
|
416
|
+
position: absolute;
|
|
417
|
+
top: 0px;
|
|
418
|
+
left: 0px;
|
|
419
|
+
height: 100%;
|
|
420
|
+
width: 100%;
|
|
421
|
+
resize: none;
|
|
422
|
+
color: inherit;
|
|
423
|
+
overflow: hidden;
|
|
424
|
+
outline: 0;
|
|
425
|
+
padding: inherit;
|
|
426
|
+
-webkit-font-smoothing: antialiased;
|
|
427
|
+
-webkit-text-fill-color: transparent;
|
|
428
|
+
}
|
|
429
|
+
.w-md-editor-text-input:empty {
|
|
430
|
+
-webkit-text-fill-color: inherit !important;
|
|
431
|
+
}
|
|
432
|
+
.w-md-editor-text-pre,
|
|
433
|
+
.w-md-editor-text-input {
|
|
434
|
+
word-wrap: pre;
|
|
435
|
+
word-break: break-word;
|
|
436
|
+
white-space: pre-wrap;
|
|
437
|
+
}
|
|
438
|
+
/**
|
|
439
|
+
* Hack to apply on some CSS on IE10 and IE11
|
|
440
|
+
*/
|
|
441
|
+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
442
|
+
/**
|
|
443
|
+
* IE doesn't support '-webkit-text-fill-color'
|
|
444
|
+
* So we use 'color: transparent' to make the text transparent on IE
|
|
445
|
+
* Unlike other browsers, it doesn't affect caret color in IE
|
|
446
|
+
*/
|
|
447
|
+
.w-md-editor-text-input {
|
|
448
|
+
color: transparent !important;
|
|
449
|
+
}
|
|
450
|
+
.w-md-editor-text-input::selection {
|
|
451
|
+
background-color: #accef7 !important;
|
|
452
|
+
color: transparent !important;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
.w-md-editor-text-pre {
|
|
456
|
+
color: #333;
|
|
457
|
+
}
|
|
458
|
+
.w-md-editor-text-pre .table .punctuation {
|
|
459
|
+
color: #c3c3c3;
|
|
460
|
+
}
|
|
461
|
+
.w-md-editor-text-pre .table .table-header {
|
|
462
|
+
color: #000;
|
|
463
|
+
}
|
|
464
|
+
.w-md-editor-text-pre .url {
|
|
465
|
+
color: #032f62 !important;
|
|
466
|
+
}
|
|
467
|
+
.w-md-editor-text-pre .url .content {
|
|
468
|
+
color: #0366d6;
|
|
469
|
+
}
|
|
470
|
+
.w-md-editor-text-pre .hr {
|
|
471
|
+
color: #999;
|
|
472
|
+
}
|
|
473
|
+
.w-md-editor-text-pre .blockquote {
|
|
474
|
+
color: #a6a6a6;
|
|
475
|
+
}
|
|
476
|
+
.w-md-editor-text-pre .title,
|
|
477
|
+
.w-md-editor-text-pre .bold {
|
|
478
|
+
color: #000 !important;
|
|
479
|
+
}
|
|
480
|
+
.w-md-editor-text-pre .title {
|
|
481
|
+
line-height: unset !important;
|
|
482
|
+
font-size: unset !important;
|
|
483
|
+
font-weight: unset !important;
|
|
484
|
+
}
|
|
485
|
+
.w-md-editor-text-pre .code.keyword {
|
|
486
|
+
color: #596394 !important;
|
|
487
|
+
}
|
|
488
|
+
.w-md-editor-text-pre .strike {
|
|
489
|
+
color: #bf4ca0;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.w-md-editor-toolbar-child {
|
|
493
|
+
position: absolute;
|
|
494
|
+
border-radius: 3px;
|
|
495
|
+
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
|
|
496
|
+
background-color: #fff;
|
|
497
|
+
z-index: 1;
|
|
498
|
+
display: none;
|
|
499
|
+
}
|
|
500
|
+
.w-md-editor-toolbar-child.active {
|
|
501
|
+
display: block;
|
|
502
|
+
}
|
|
503
|
+
.w-md-editor-toolbar-child .w-md-editor-toolbar {
|
|
504
|
+
border-bottom: 0;
|
|
505
|
+
padding: 3px;
|
|
506
|
+
border-radius: 3px;
|
|
507
|
+
}
|
|
508
|
+
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
|
|
509
|
+
display: block;
|
|
510
|
+
}
|
|
511
|
+
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button {
|
|
512
|
+
width: -webkit-fill-available;
|
|
513
|
+
height: auto;
|
|
514
|
+
height: initial;
|
|
515
|
+
box-sizing: border-box;
|
|
516
|
+
padding: 3px 4px 2px 4px;
|
|
517
|
+
margin: 0;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
.w-md-editor-toolbar {
|
|
521
|
+
border-bottom: 1px solid #dfdfe0;
|
|
522
|
+
background-color: #fbfbfb;
|
|
523
|
+
padding: 0 5px 0 5px;
|
|
524
|
+
display: flex;
|
|
525
|
+
justify-content: space-between;
|
|
526
|
+
align-items: center;
|
|
527
|
+
border-radius: 3px 3px 0 0;
|
|
528
|
+
-webkit-user-select: none;
|
|
529
|
+
-ms-user-select: none;
|
|
530
|
+
user-select: none;
|
|
531
|
+
}
|
|
532
|
+
.w-md-editor-toolbar ul,
|
|
533
|
+
.w-md-editor-toolbar li {
|
|
534
|
+
margin: 0;
|
|
535
|
+
padding: 0;
|
|
536
|
+
list-style: none;
|
|
537
|
+
}
|
|
538
|
+
.w-md-editor-toolbar li {
|
|
539
|
+
display: inline-block;
|
|
540
|
+
font-size: 14px;
|
|
541
|
+
}
|
|
542
|
+
.w-md-editor-toolbar li > button {
|
|
543
|
+
border: none;
|
|
544
|
+
height: 20px;
|
|
545
|
+
line-height: 14px;
|
|
546
|
+
background: none;
|
|
547
|
+
color: #586069;
|
|
548
|
+
padding: 4px;
|
|
549
|
+
margin: 0 1px;
|
|
550
|
+
border-radius: 2px;
|
|
551
|
+
text-transform: none;
|
|
552
|
+
font-weight: normal;
|
|
553
|
+
overflow: visible;
|
|
554
|
+
outline: none;
|
|
555
|
+
cursor: pointer;
|
|
556
|
+
transition: all 0.3s;
|
|
557
|
+
white-space: nowrap;
|
|
558
|
+
}
|
|
559
|
+
.w-md-editor-toolbar li > button:hover,
|
|
560
|
+
.w-md-editor-toolbar li > button:focus {
|
|
561
|
+
color: #06c;
|
|
562
|
+
background-color: #dcdcdc;
|
|
563
|
+
}
|
|
564
|
+
.w-md-editor-toolbar li > button:active {
|
|
565
|
+
color: #6a57ff;
|
|
566
|
+
background-color: #dcdcdc;
|
|
567
|
+
}
|
|
568
|
+
.w-md-editor-toolbar li > button:disabled {
|
|
569
|
+
color: #ccc;
|
|
570
|
+
cursor: not-allowed;
|
|
571
|
+
}
|
|
572
|
+
.w-md-editor-toolbar li > button:disabled:hover {
|
|
573
|
+
background-color: transparent;
|
|
574
|
+
color: #ccc;
|
|
575
|
+
}
|
|
576
|
+
.w-md-editor-toolbar li.active > button {
|
|
577
|
+
color: #06c;
|
|
578
|
+
background-color: #e8e8e8;
|
|
579
|
+
}
|
|
580
|
+
.w-md-editor-toolbar-divider {
|
|
581
|
+
height: 14px;
|
|
582
|
+
width: 1px;
|
|
583
|
+
margin: -3px 3px 0 3px !important;
|
|
584
|
+
vertical-align: middle;
|
|
585
|
+
background-color: #ccc;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.w-md-editor-bar {
|
|
589
|
+
position: absolute;
|
|
590
|
+
cursor: s-resize;
|
|
591
|
+
right: 0;
|
|
592
|
+
margin-top: -11px;
|
|
593
|
+
margin-right: 0;
|
|
594
|
+
width: 14px;
|
|
595
|
+
z-index: 3;
|
|
596
|
+
height: 10px;
|
|
597
|
+
border-radius: 0 0 3px 0;
|
|
598
|
+
-webkit-user-select: none;
|
|
599
|
+
-ms-user-select: none;
|
|
600
|
+
user-select: none;
|
|
601
|
+
}
|
|
602
|
+
.w-md-editor-bar svg {
|
|
603
|
+
display: block;
|
|
604
|
+
margin: 0 auto;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.w-md-editor {
|
|
608
|
+
color: #24292e;
|
|
609
|
+
text-align: left;
|
|
610
|
+
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
|
|
611
|
+
border-radius: 3px;
|
|
612
|
+
padding-bottom: 1px;
|
|
613
|
+
position: relative;
|
|
614
|
+
background-color: #fff;
|
|
615
|
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
616
|
+
}
|
|
617
|
+
.w-md-editor-content {
|
|
618
|
+
position: relative;
|
|
619
|
+
border-radius: 0 0 3px 0;
|
|
620
|
+
height: calc(100% - 39.1px);
|
|
621
|
+
}
|
|
622
|
+
.w-md-editor-input {
|
|
623
|
+
width: 50%;
|
|
624
|
+
height: 100%;
|
|
625
|
+
}
|
|
626
|
+
.w-md-editor-preview {
|
|
627
|
+
width: 50%;
|
|
628
|
+
box-sizing: border-box;
|
|
629
|
+
box-shadow: inset 1px 0 0 0 #dfdfe0;
|
|
630
|
+
position: absolute;
|
|
631
|
+
padding: 10px 20px;
|
|
632
|
+
overflow: auto;
|
|
633
|
+
top: 0;
|
|
634
|
+
right: 0;
|
|
635
|
+
bottom: 0;
|
|
636
|
+
}
|
|
637
|
+
.w-md-editor-preview .anchor {
|
|
638
|
+
display: none;
|
|
639
|
+
}
|
|
640
|
+
.w-md-editor-preview .contains-task-list {
|
|
641
|
+
list-style: none;
|
|
642
|
+
}
|
|
643
|
+
.w-md-editor-show-preview .w-md-editor-input {
|
|
644
|
+
width: 0%;
|
|
645
|
+
overflow: hidden;
|
|
646
|
+
background-color: #fdfdfd;
|
|
647
|
+
}
|
|
648
|
+
.w-md-editor-show-preview .w-md-editor-preview {
|
|
649
|
+
width: 100%;
|
|
650
|
+
box-shadow: inset 0 0 0 0;
|
|
651
|
+
}
|
|
652
|
+
.w-md-editor-show-edit .w-md-editor-input {
|
|
653
|
+
width: 100%;
|
|
654
|
+
}
|
|
655
|
+
.w-md-editor-show-edit .w-md-editor-preview {
|
|
656
|
+
width: 0%;
|
|
657
|
+
padding: 0;
|
|
658
|
+
}
|
|
659
|
+
.w-md-editor-fullscreen {
|
|
660
|
+
overflow: hidden;
|
|
661
|
+
position: fixed;
|
|
662
|
+
z-index: 99999;
|
|
663
|
+
top: 0;
|
|
664
|
+
left: 0;
|
|
665
|
+
right: 0;
|
|
666
|
+
bottom: 0;
|
|
667
|
+
}
|
|
668
|
+
.w-md-editor-fullscreen .w-md-editor-content {
|
|
669
|
+
height: 100%;
|
|
670
|
+
}
|
|
671
|
+
|