vditor 3.11.3 → 4.0.1

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 (53) hide show
  1. package/README.md +2 -0
  2. package/dist/css/content-theme/ant-design.css +7 -22
  3. package/dist/css/content-theme/dark.css +7 -16
  4. package/dist/css/content-theme/light.css +7 -15
  5. package/dist/css/content-theme/wechat.css +7 -19
  6. package/dist/index.css +132 -135
  7. package/dist/index.js +3791 -4022
  8. package/dist/index.min.js +1 -1
  9. package/dist/js/lute/lute.min.js +2 -2
  10. package/dist/js/mermaid/mermaid.min.js +516 -467
  11. package/dist/method.js +41 -33
  12. package/dist/method.min.js +1 -1
  13. package/dist/ts/constants.d.ts +1 -0
  14. package/dist/ts/sv/index.d.ts +1 -5
  15. package/dist/ts/sv/process.d.ts +1 -3
  16. package/dist/ts/upload/getElement.d.ts +1 -1
  17. package/dist/ts/upload/index.d.ts +2 -0
  18. package/dist/ts/util/editorCommonEvent.d.ts +1 -1
  19. package/dist/types/index.d.ts +10 -5
  20. package/package.json +1 -1
  21. package/src/assets/less/_reset.less +80 -28
  22. package/src/assets/less/_sv.less +2 -98
  23. package/src/assets/less/_wysiwyg.less +30 -0
  24. package/src/assets/less/index.less +14 -20
  25. package/src/index.ts +46 -14
  26. package/src/ts/constants.ts +1 -0
  27. package/src/ts/export/index.ts +1 -0
  28. package/src/ts/hint/index.ts +9 -4
  29. package/src/ts/ir/highlightToolbarIR.ts +4 -4
  30. package/src/ts/markdown/getMarkdown.ts +3 -3
  31. package/src/ts/markdown/mediaRender.ts +23 -38
  32. package/src/ts/markdown/mermaidRender.ts +1 -1
  33. package/src/ts/markdown/previewRender.ts +1 -0
  34. package/src/ts/markdown/setLute.ts +1 -0
  35. package/src/ts/sv/index.ts +37 -76
  36. package/src/ts/sv/process.ts +48 -164
  37. package/src/ts/sv/processKeydown.ts +19 -186
  38. package/src/ts/toolbar/EditMode.ts +3 -10
  39. package/src/ts/toolbar/Emoji.ts +8 -1
  40. package/src/ts/toolbar/Record.ts +10 -2
  41. package/src/ts/toolbar/index.ts +3 -0
  42. package/src/ts/ui/initUI.ts +7 -3
  43. package/src/ts/undo/index.ts +32 -17
  44. package/src/ts/upload/index.ts +42 -10
  45. package/src/ts/util/editorCommonEvent.ts +18 -9
  46. package/src/ts/util/fixBrowserBehavior.ts +106 -36
  47. package/src/ts/util/selection.ts +11 -3
  48. package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts +53 -1
  49. package/src/ts/wysiwyg/processKeydown.ts +47 -0
  50. package/dist/ts/sv/combineFootnote.d.ts +0 -6
  51. package/dist/ts/sv/inputEvent.d.ts +0 -1
  52. package/src/ts/sv/combineFootnote.ts +0 -27
  53. package/src/ts/sv/inputEvent.ts +0 -188
package/README.md CHANGED
@@ -225,6 +225,7 @@ Markdown 输出的 HTML 所展现的外观。内置 ant-design, light，dark，w
225
225
  | icon | 图标风格：ant, material | 'ant' |
226
226
  | customRenders: {language: string, render: (element: HTMLElement, vditor: IVditor) => void}[] | 自定义渲染器 | [] |
227
227
  | customWysiwygToolbar(type: TWYSISYGToolbar, element: HTMLElement): void | 对 wysiwyg 模式下的工具栏进行自定义 | - |
228
+ | customWysiwygMobileToolbar(type: TWYSISYGToolbar, element: HTMLElement): void | 对移动端 wysiwyg 模式下的工具栏进行自定义，未添加菜单项时不显示入口 | - |
228
229
 
229
230
  #### options.toolbar
230
231
 
@@ -324,6 +325,7 @@ new Vditor('vditor', {
324
325
  | - | - | - |
325
326
  | autoSpace | 自动空格 | false |
326
327
  | callout | Callout 块 | true |
328
+ | inlineMath | 是否解析行内数学公式 `$...$` | true |
327
329
  | gfmAutoLink | 自动链接 | true |
328
330
  | fixTermTypo | 自动矫正术语 | false |
329
331
  | toc | 插入目录 | false |
package/dist/css/content-theme/ant-design.css CHANGED
@@ -29,16 +29,13 @@
29
29
  color: rgba(0, 0, 0, .85);
30
30
  font-size: 14px;
31
31
  line-height: 2;
32
- --callout-note-color: #0969da;
33
- --callout-note-background-color: rgba(9, 105, 218, 0.08);
34
- --callout-tip-color: #1a7f37;
35
- --callout-tip-background-color: rgba(26, 127, 55, 0.08);
36
- --callout-important-color: #8250df;
37
- --callout-important-background-color: rgba(130, 80, 223, 0.08);
38
- --callout-warning-color: #9a6700;
39
- --callout-warning-background-color: rgba(154, 103, 0, 0.08);
40
- --callout-caution-color: #cf222e;
41
- --callout-caution-background-color: rgba(207, 34, 46, 0.08);
32
+ --blockquote-border-color: #e0e0e0;
33
+ --blockquote-text-color: #5f6368;
34
+ --callout-note-color: #3575f0;
35
+ --callout-tip-color: #65b84d;
36
+ --callout-important-color: #8957e5;
37
+ --callout-warning-color: #ff9632;
38
+ --callout-caution-color: #d23f31;
42
39
  }
43
40
 
44
41
  .vditor-reset img {
@@ -179,18 +176,6 @@
179
176
  border: 1px solid #f0f0f0
180
177
  }
181
178
 
182
- .vditor-reset blockquote {
183
- margin: 1em 0;
184
- padding-left: .8em;
185
- color: rgba(0, 0, 0, .45);
186
- font-size: 90%;
187
- border-left: 4px solid #f0f0f0
188
- }
189
-
190
- .vditor-reset blockquote p {
191
- margin: 0;
192
- }
193
-
194
179
  .vditor-reset .vditor-anchor {
195
180
  margin-left: 8px;
196
181
  opacity: 0;
package/dist/css/content-theme/dark.css CHANGED
@@ -26,16 +26,13 @@
26
26
  */
27
27
  .vditor-reset {
28
28
  color: #d1d5da;
29
- --callout-note-color: #58a6ff;
30
- --callout-note-background-color: rgba(56, 139, 253, 0.15);
31
- --callout-tip-color: #3fb950;
32
- --callout-tip-background-color: rgba(46, 160, 67, 0.15);
33
- --callout-important-color: #a371f7;
34
- --callout-important-background-color: rgba(163, 113, 247, 0.15);
35
- --callout-warning-color: #d29922;
36
- --callout-warning-background-color: rgba(187, 128, 9, 0.15);
37
- --callout-caution-color: #f85149;
38
- --callout-caution-background-color: rgba(248, 81, 73, 0.15);
29
+ --blockquote-border-color: rgba(230, 230, 230, 0.1);
30
+ --blockquote-text-color: #9aa0a6;
31
+ --callout-note-color: #3575f0;
32
+ --callout-tip-color: #65b84d;
33
+ --callout-important-color: #b388ff;
34
+ --callout-warning-color: #ff9632;
35
+ --callout-caution-color: #d23f31;
39
36
  }
40
37
 
41
38
  .vditor-reset a, .vditor-ir__link {
@@ -51,12 +48,6 @@
51
48
  background-color: #d1d5da
52
49
  }
53
50
 
54
- .vditor-reset blockquote {
55
- padding: 0 1em;
56
- color: #b9b9b9;
57
- border-left: .25em solid #d1d5da
58
- }
59
-
60
51
  .vditor-reset iframe {
61
52
  border: 1px solid #141414
62
53
  }
package/dist/css/content-theme/light.css CHANGED
@@ -25,16 +25,13 @@
25
25
  *
26
26
  */
27
27
  .vditor-reset {
28
- --callout-note-color: #0969da;
29
- --callout-note-background-color: rgba(9, 105, 218, 0.08);
30
- --callout-tip-color: #1a7f37;
31
- --callout-tip-background-color: rgba(26, 127, 55, 0.08);
32
- --callout-important-color: #8250df;
33
- --callout-important-background-color: rgba(130, 80, 223, 0.08);
34
- --callout-warning-color: #9a6700;
35
- --callout-warning-background-color: rgba(154, 103, 0, 0.08);
36
- --callout-caution-color: #cf222e;
37
- --callout-caution-background-color: rgba(207, 34, 46, 0.08);
28
+ --blockquote-border-color: #e0e0e0;
29
+ --blockquote-text-color: #5f6368;
30
+ --callout-note-color: #3575f0;
31
+ --callout-tip-color: #65b84d;
32
+ --callout-important-color: #8957e5;
33
+ --callout-warning-color: #ff9632;
34
+ --callout-caution-color: #d23f31;
38
35
  }
39
36
 
40
37
  .vditor-reset h1, .vditor-reset h2 {
@@ -46,11 +43,6 @@
46
43
  background-color: #eaecef;
47
44
  }
48
45
 
49
- .vditor-reset blockquote {
50
- color: #6a737d;
51
- border-left: .25em solid #eaecef
52
- }
53
-
54
46
  .vditor-reset iframe {
55
47
  border: 1px solid #d1d5da
56
48
  }
package/dist/css/content-theme/wechat.css CHANGED
@@ -27,16 +27,13 @@
27
27
  .vditor-reset {
28
28
  font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
29
29
  color: rgb(62, 62, 62);
30
- --callout-note-color: #0969da;
31
- --callout-note-background-color: rgba(9, 105, 218, 0.08);
32
- --callout-tip-color: #1a7f37;
33
- --callout-tip-background-color: rgba(26, 127, 55, 0.08);
34
- --callout-important-color: #8250df;
35
- --callout-important-background-color: rgba(130, 80, 223, 0.08);
36
- --callout-warning-color: #9a6700;
37
- --callout-warning-background-color: rgba(154, 103, 0, 0.08);
38
- --callout-caution-color: #cf222e;
39
- --callout-caution-background-color: rgba(207, 34, 46, 0.08);
30
+ --blockquote-border-color: #e0e0e0;
31
+ --blockquote-text-color: #5f6368;
32
+ --callout-note-color: #3575f0;
33
+ --callout-tip-color: #65b84d;
34
+ --callout-important-color: #8957e5;
35
+ --callout-warning-color: #ff9632;
36
+ --callout-caution-color: #d23f31;
40
37
  }
41
38
 
42
39
  .vditor-reset a, .vditor-ir__link {
@@ -73,15 +70,6 @@
73
70
  height: 0;
74
71
  }
75
72
 
76
- .vditor-reset blockquote {
77
- padding: 4px 0 0 10px;
78
- border-left: 3px solid #dbdbdb;
79
- color: #9a9a9a;
80
- line-height: 1.6;
81
- font-size: 15px;
82
- margin: 1em 0;
83
- }
84
-
85
73
  .vditor-reset code {
86
74
  font-size: 14px;
87
75
  border: 1px solid #f0f0f0;
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Vditor v3.11.3 - A markdown editor written in TypeScript.
2
+ * Vditor v4.0.1 - A markdown editor written in TypeScript.
3
3
  *
4
4
  * MIT License
5
5
  *
@@ -25,7 +25,7 @@
25
25
  *
26
26
  */
27
27
  /*!
28
- * Vditor v3.11.3 - A markdown editor written in TypeScript.
28
+ * Vditor v4.0.1 - A markdown editor written in TypeScript.
29
29
  *
30
30
  * MIT License
31
31
  *
@@ -69,16 +69,13 @@
69
69
  --count-background-color: rgba(27, 31, 35, 0.05);
70
70
  --heading-border-color: #eaecef;
71
71
  --blockquote-color: #6a737d;
72
- --callout-note-color: #0969da;
73
- --callout-note-background-color: rgba(9, 105, 218, 0.08);
74
- --callout-tip-color: #1a7f37;
75
- --callout-tip-background-color: rgba(26, 127, 55, 0.08);
76
- --callout-important-color: #8250df;
77
- --callout-important-background-color: rgba(130, 80, 223, 0.08);
78
- --callout-warning-color: #9a6700;
79
- --callout-warning-background-color: rgba(154, 103, 0, 0.08);
80
- --callout-caution-color: #cf222e;
81
- --callout-caution-background-color: rgba(207, 34, 46, 0.08);
72
+ --blockquote-border-color: #e0e0e0;
73
+ --blockquote-text-color: #5f6368;
74
+ --callout-note-color: #3575f0;
75
+ --callout-tip-color: #65b84d;
76
+ --callout-important-color: #8957e5;
77
+ --callout-warning-color: #ff9632;
78
+ --callout-caution-color: #d23f31;
82
79
  --ir-heading-color: #660e7a;
83
80
  --ir-title-color: #808080;
84
81
  --ir-bi-color: #0033b3;
@@ -103,16 +100,13 @@
103
100
  --count-background-color: rgba(66, 133, 244, 0.36);
104
101
  --heading-border-color: var(--textarea-text-color);
105
102
  --blockquote-color: var(--toolbar-icon-color);
106
- --callout-note-color: #58a6ff;
107
- --callout-note-background-color: rgba(56, 139, 253, 0.15);
108
- --callout-tip-color: #3fb950;
109
- --callout-tip-background-color: rgba(46, 160, 67, 0.15);
110
- --callout-important-color: #a371f7;
111
- --callout-important-background-color: rgba(163, 113, 247, 0.15);
112
- --callout-warning-color: #d29922;
113
- --callout-warning-background-color: rgba(187, 128, 9, 0.15);
114
- --callout-caution-color: #f85149;
115
- --callout-caution-background-color: rgba(248, 81, 73, 0.15);
103
+ --blockquote-border-color: rgba(230, 230, 230, 0.1);
104
+ --blockquote-text-color: #9aa0a6;
105
+ --callout-note-color: #3575f0;
106
+ --callout-tip-color: #65b84d;
107
+ --callout-important-color: #b388ff;
108
+ --callout-warning-color: #ff9632;
109
+ --callout-caution-color: #d23f31;
116
110
  --ir-heading-color: #9876aa;
117
111
  --ir-title-color: #808080;
118
112
  --ir-bi-color: #cc7832;
@@ -959,18 +953,38 @@
959
953
  margin-top: 0;
960
954
  margin-bottom: 16px;
961
955
  }
962
- .vditor-reset blockquote {
963
- padding: 0 1em;
964
- color: #6a737d;
965
- border-left: 0.25em solid #eaecef;
956
+ .vditor-reset blockquote:not(.callout) {
957
+ position: relative;
958
+ display: flex;
959
+ flex-direction: column;
960
+ padding: 0 0 0 calc(0.25em + 6px);
961
+ color: var(--blockquote-text-color, #5f6368);
962
+ background-color: transparent;
963
+ border: 0;
966
964
  margin: 0 0 16px 0;
967
965
  }
968
- .vditor-reset blockquote > :first-child {
966
+ .vditor-reset blockquote:not(.callout)::before {
967
+ position: absolute;
968
+ top: 6px;
969
+ bottom: 6px;
970
+ left: 2px;
971
+ width: 0.25em;
972
+ content: "";
973
+ background-color: var(--blockquote-border-color, #e0e0e0);
974
+ border-radius: 6px;
975
+ }
976
+ .vditor-reset blockquote:not(.callout) > :first-child {
969
977
  margin-top: 0;
970
978
  }
971
- .vditor-reset blockquote > :last-child {
979
+ .vditor-reset blockquote:not(.callout) > :last-child {
972
980
  margin-bottom: 0;
973
981
  }
982
+ .vditor-reset blockquote:not(.callout) > p {
983
+ padding: 4px;
984
+ margin: 2px 0;
985
+ line-height: 1.625;
986
+ border-radius: 6px;
987
+ }
974
988
  .vditor-reset ins > iframe {
975
989
  border: 0;
976
990
  }
@@ -1383,39 +1397,46 @@
1383
1397
  .vditor-reset .callout,
1384
1398
  .vditor-wysiwyg blockquote.callout,
1385
1399
  .vditor-ir blockquote.callout {
1386
- --callout-color: var(--callout-note-color, #0969da);
1387
- --callout-background-color: var(--callout-note-background-color, rgba(9, 105, 218, 0.08));
1400
+ --callout-color: var(--callout-note-color, #3575f0);
1388
1401
  position: relative;
1402
+ display: flex;
1403
+ flex-direction: column;
1389
1404
  margin: 0 0 16px;
1390
- padding: 0.75em 1em;
1391
- color: inherit;
1392
- background-color: var(--callout-background-color);
1405
+ padding: 0 0 0 calc(0.25em + 6px);
1406
+ color: var(--blockquote-text-color, #5f6368);
1393
1407
  border: 0;
1394
- border-left: 0.25em solid var(--callout-color);
1408
+ }
1409
+ .vditor-reset .callout::before,
1410
+ .vditor-wysiwyg blockquote.callout::before,
1411
+ .vditor-ir blockquote.callout::before {
1412
+ position: absolute;
1413
+ top: 6px;
1414
+ bottom: 6px;
1415
+ left: 2px;
1416
+ width: 0.25em;
1417
+ content: "";
1418
+ background-color: var(--callout-color);
1419
+ border-radius: 6px;
1395
1420
  }
1396
1421
  .vditor-reset .callout[data-subtype="TIP"],
1397
1422
  .vditor-wysiwyg blockquote.callout[data-subtype="TIP"],
1398
1423
  .vditor-ir blockquote.callout[data-subtype="TIP"] {
1399
- --callout-color: var(--callout-tip-color, #1a7f37);
1400
- --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
1424
+ --callout-color: var(--callout-tip-color, #65b84d);
1401
1425
  }
1402
1426
  .vditor-reset .callout[data-subtype="IMPORTANT"],
1403
1427
  .vditor-wysiwyg blockquote.callout[data-subtype="IMPORTANT"],
1404
1428
  .vditor-ir blockquote.callout[data-subtype="IMPORTANT"] {
1405
- --callout-color: var(--callout-important-color, #8250df);
1406
- --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
1429
+ --callout-color: var(--callout-important-color, #8957e5);
1407
1430
  }
1408
1431
  .vditor-reset .callout[data-subtype="WARNING"],
1409
1432
  .vditor-wysiwyg blockquote.callout[data-subtype="WARNING"],
1410
1433
  .vditor-ir blockquote.callout[data-subtype="WARNING"] {
1411
- --callout-color: var(--callout-warning-color, #9a6700);
1412
- --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
1434
+ --callout-color: var(--callout-warning-color, #ff9632);
1413
1435
  }
1414
1436
  .vditor-reset .callout[data-subtype="CAUTION"],
1415
1437
  .vditor-wysiwyg blockquote.callout[data-subtype="CAUTION"],
1416
1438
  .vditor-ir blockquote.callout[data-subtype="CAUTION"] {
1417
- --callout-color: var(--callout-caution-color, #cf222e);
1418
- --callout-background-color: var(--callout-caution-background-color, rgba(207, 34, 46, 0.08));
1439
+ --callout-color: var(--callout-caution-color, #d23f31);
1419
1440
  }
1420
1441
  .vditor-reset .callout > .callout-info,
1421
1442
  .vditor-wysiwyg blockquote.callout > .callout-info,
@@ -1423,21 +1444,38 @@
1423
1444
  display: flex;
1424
1445
  align-items: center;
1425
1446
  min-height: 1.5em;
1426
- margin: 0 0 0.5em;
1447
+ margin: 2px 0;
1448
+ padding: 4px;
1427
1449
  color: var(--callout-color);
1428
- font-weight: 600;
1429
1450
  }
1430
1451
  .vditor-reset .callout > .callout-info .callout-icon,
1431
1452
  .vditor-wysiwyg blockquote.callout > .callout-info .callout-icon,
1432
1453
  .vditor-ir blockquote.callout > .callout-info .callout-icon {
1433
- display: inline-flex;
1454
+ display: flex;
1434
1455
  align-items: center;
1435
- margin-right: 0.35em;
1456
+ justify-content: center;
1457
+ width: 1.2em;
1458
+ height: 1.2em;
1459
+ padding: 4px;
1460
+ line-height: 1.2em;
1461
+ text-align: center;
1462
+ font-variant-emoji: emoji;
1463
+ border-radius: 6px;
1464
+ }
1465
+ .vditor-reset .callout > .callout-info .callout-icon:empty,
1466
+ .vditor-wysiwyg blockquote.callout > .callout-info .callout-icon:empty,
1467
+ .vditor-ir blockquote.callout > .callout-info .callout-icon:empty {
1468
+ display: none;
1436
1469
  }
1437
1470
  .vditor-reset .callout > .callout-info .callout-title,
1438
1471
  .vditor-wysiwyg blockquote.callout > .callout-info .callout-title,
1439
1472
  .vditor-ir blockquote.callout > .callout-info .callout-title {
1473
+ flex: 1;
1440
1474
  min-width: 1px;
1475
+ margin-left: 4px;
1476
+ font-size: 114%;
1477
+ font-weight: 500;
1478
+ opacity: 0.86;
1441
1479
  }
1442
1480
  .vditor-reset .callout > .callout-info .callout-img,
1443
1481
  .vditor-wysiwyg blockquote.callout > .callout-info .callout-img,
@@ -1445,19 +1483,25 @@
1445
1483
  .vditor-reset .callout > .callout-info > .callout-img,
1446
1484
  .vditor-wysiwyg blockquote.callout > .callout-info > .callout-img,
1447
1485
  .vditor-ir blockquote.callout > .callout-info > .callout-img {
1448
- width: 1.2em;
1449
1486
  height: 1.2em;
1450
- margin-right: 0.35em;
1451
- -o-object-fit: contain;
1452
- object-fit: contain;
1453
- }
1454
- .vditor-reset .callout > .callout-content > :last-child,
1455
- .vditor-wysiwyg blockquote.callout > .callout-content > :last-child,
1456
- .vditor-ir blockquote.callout > .callout-content > :last-child,
1457
- .vditor-reset .callout > :last-child,
1458
- .vditor-wysiwyg blockquote.callout > :last-child,
1459
- .vditor-ir blockquote.callout > :last-child {
1460
- margin-bottom: 0;
1487
+ width: 100%;
1488
+ }
1489
+ .vditor-reset .callout > p:not(.callout-info),
1490
+ .vditor-wysiwyg blockquote.callout > p:not(.callout-info),
1491
+ .vditor-ir blockquote.callout > p:not(.callout-info),
1492
+ .vditor-reset .callout > .callout-content > p,
1493
+ .vditor-wysiwyg blockquote.callout > .callout-content > p,
1494
+ .vditor-ir blockquote.callout > .callout-content > p {
1495
+ padding: 4px;
1496
+ margin: 2px 0;
1497
+ line-height: 1.625;
1498
+ border-radius: 6px;
1499
+ }
1500
+ .vditor-wysiwyg blockquote.callout > .callout-info,
1501
+ .vditor-ir blockquote.callout > .callout-info {
1502
+ font-size: 114%;
1503
+ font-weight: 500;
1504
+ opacity: 0.86;
1461
1505
  }
1462
1506
  .vditor-wysiwyg__callout-marker {
1463
1507
  display: none;
@@ -1606,7 +1650,32 @@
1606
1650
  .vditor-wysiwyg div[data-type="link-ref-defs-block"] {
1607
1651
  color: var(--blockquote-color);
1608
1652
  }
1653
+ .vditor-wysiwyg__mobile-toolbar {
1654
+ display: none;
1655
+ }
1609
1656
  @media screen and (max-width: 520px) {
1657
+ .vditor-wysiwyg__mobile-toolbar {
1658
+ display: block;
1659
+ float: left;
1660
+ height: 21px;
1661
+ position: relative;
1662
+ width: 23px;
1663
+ }
1664
+ .vditor-wysiwyg__mobile-actions {
1665
+ box-sizing: border-box;
1666
+ flex-wrap: wrap;
1667
+ left: 0;
1668
+ padding: 5px;
1669
+ top: 26px;
1670
+ white-space: normal;
1671
+ }
1672
+ .vditor-wysiwyg__mobile-actions.vditor-panel--left {
1673
+ left: auto;
1674
+ right: 0;
1675
+ }
1676
+ .vditor-wysiwyg__mobile-actions--open {
1677
+ display: flex;
1678
+ }
1610
1679
  .vditor-wysiwyg h1:before,
1611
1680
  .vditor-wysiwyg h2:before,
1612
1681
  .vditor-wysiwyg h3:before,
@@ -1864,89 +1933,17 @@
1864
1933
  word-break: break-word;
1865
1934
  word-wrap: break-word;
1866
1935
  }
1867
- .vditor-sv[contenteditable="false"] {
1936
+ .vditor-sv:disabled {
1868
1937
  opacity: 0.3;
1869
1938
  cursor: not-allowed;
1870
1939
  }
1871
- .vditor-sv:empty::before {
1872
- content: attr(placeholder);
1940
+ .vditor-sv::-moz-placeholder {
1873
1941
  color: var(--second-color);
1874
1942
  }
1875
- .vditor-sv:focus {
1876
- background-color: var(--textarea-background-color);
1877
- }
1878
- .vditor-sv:after {
1879
- content: "";
1880
- height: var(--editor-bottom);
1881
- display: block;
1882
- }
1883
- .vditor-sv span[data-type="newline"] + span[data-type="text"]:empty {
1884
- display: inherit;
1885
- }
1886
- .vditor-sv .sup {
1887
- vertical-align: super;
1888
- font-size: smaller;
1889
- }
1890
- .vditor-sv .strong {
1891
- font-weight: bold;
1892
- }
1893
- .vditor-sv .em {
1894
- font-style: italic;
1895
- }
1896
- .vditor-sv .s {
1897
- text-decoration: line-through;
1898
- }
1899
- .vditor-sv .mark:not(.vditor-sv__marker) {
1900
- background-color: yellow;
1901
- color: black;
1902
- }
1903
- .vditor-sv .h1 {
1904
- font-size: 1.75em;
1905
- line-height: 44px;
1906
- }
1907
- .vditor-sv .h2 {
1908
- font-size: 1.55em;
1909
- line-height: 38px;
1910
- }
1911
- .vditor-sv .h3 {
1912
- font-size: 1.38em;
1913
- line-height: 27px;
1914
- }
1915
- .vditor-sv .h4 {
1916
- font-size: 1.25em;
1917
- line-height: 25px;
1918
- }
1919
- .vditor-sv .h5 {
1920
- font-size: 1.13em;
1921
- }
1922
- .vditor-sv .h6 {
1923
- font-size: 1em;
1924
- }
1925
- .vditor-sv__marker {
1943
+ .vditor-sv::placeholder {
1926
1944
  color: var(--second-color);
1927
1945
  }
1928
- .vditor-sv__marker--heading {
1929
- color: var(--ir-heading-color);
1930
- }
1931
- .vditor-sv__marker--bi {
1932
- color: var(--ir-bi-color);
1933
- }
1934
- .vditor-sv__marker--link {
1935
- color: var(--ir-link-color);
1936
- }
1937
- .vditor-sv__marker--title {
1938
- color: var(--ir-title-color);
1939
- }
1940
- .vditor-sv__marker--bracket {
1941
- color: var(--ir-bracket-color);
1942
- }
1943
- .vditor-sv__marker--paren {
1944
- color: var(--ir-paren-color);
1945
- }
1946
- .vditor-sv__marker--info {
1947
- color: var(--ir-heading-color);
1948
- }
1949
- .vditor-sv__marker--strong {
1950
- font-weight: bold;
1946
+ .vditor-sv:focus {
1947
+ background-color: var(--textarea-background-color);
1951
1948
  }
1952
1949