@uiw/react-md-editor 3.22.0 → 3.23.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 (25) hide show
  1. package/dist/mdeditor.css +30 -25
  2. package/dist/mdeditor.js +174 -174
  3. package/dist/mdeditor.min.css +1 -1
  4. package/dist/mdeditor.min.js +1 -1
  5. package/esm/commands/index.js +0 -1
  6. package/esm/components/TextArea/index.css +8 -12
  7. package/esm/components/TextArea/index.less +8 -10
  8. package/esm/components/Toolbar/Child.css +2 -2
  9. package/esm/components/Toolbar/Child.less +3 -3
  10. package/esm/components/Toolbar/index.css +6 -6
  11. package/esm/components/Toolbar/index.less +6 -6
  12. package/esm/index.css +8 -5
  13. package/esm/index.less +9 -6
  14. package/lib/commands/index.js +0 -1
  15. package/lib/components/TextArea/index.less +8 -10
  16. package/lib/components/Toolbar/Child.less +3 -3
  17. package/lib/components/Toolbar/index.less +6 -6
  18. package/lib/index.less +9 -6
  19. package/markdown-editor.css +24 -25
  20. package/package.json +1 -1
  21. package/src/commands/index.ts +0 -1
  22. package/src/components/TextArea/index.less +8 -10
  23. package/src/components/Toolbar/Child.less +3 -3
  24. package/src/components/Toolbar/index.less +6 -6
  25. package/src/index.less +9 -6
package/esm/commands/index.js CHANGED
@@ -80,7 +80,6 @@ class TextAreaCommandOrchestrator {
80
80
  return getStateFromTextArea(this.textArea);
81
81
  }
82
82
  executeCommand(command, dispatch, state, shortcuts) {
83
- console.log('state:', state);
84
83
  command.execute && command.execute(_extends({
85
84
  command
86
85
  }, getStateFromTextArea(this.textArea)), this.textApi, dispatch, state, shortcuts);
package/esm/components/TextArea/index.css CHANGED
@@ -26,6 +26,7 @@
26
26
  box-sizing: inherit;
27
27
  display: inherit;
28
28
  font-family: inherit;
29
+ font-family: var(--md-editor-font-family) !important;
29
30
  font-size: inherit;
30
31
  font-style: inherit;
31
32
  -webkit-font-variant-ligatures: inherit;
@@ -43,11 +44,6 @@
43
44
  word-break: normal;
44
45
  padding: 0;
45
46
  }
46
- .w-md-editor-text-pre > code,
47
- .w-md-editor-text-input > code,
48
- .w-md-editor-text > .w-md-editor-text-pre > code {
49
- font-family: inherit;
50
- }
51
47
  .w-md-editor-text-pre {
52
48
  position: relative;
53
49
  margin: 0px !important;
@@ -56,7 +52,7 @@
56
52
  }
57
53
  .w-md-editor-text-pre > code {
58
54
  padding: 0 !important;
59
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
55
+ font-family: var(--md-editor-font-family) !important;
60
56
  font-size: 14px !important;
61
57
  line-height: 18px !important;
62
58
  }
@@ -101,17 +97,17 @@
101
97
  }
102
98
  }
103
99
  .w-md-editor-text-pre .punctuation {
104
- color: var(--color-prettylights-syntax-comment) !important;
100
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
105
101
  }
106
102
  .w-md-editor-text-pre .token.url,
107
103
  .w-md-editor-text-pre .token.content {
108
- color: var(--color-prettylights-syntax-constant) !important;
104
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
109
105
  }
110
106
  .w-md-editor-text-pre .token.title.important {
111
- color: var(--color-prettylights-syntax-markup-bold);
107
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
112
108
  }
113
109
  .w-md-editor-text-pre .token.code-block .function {
114
- color: var(--color-prettylights-syntax-entity);
110
+ color: var(--color-prettylights-syntax-entity, #8250df);
115
111
  }
116
112
  .w-md-editor-text-pre .token.bold {
117
113
  font-weight: unset !important;
@@ -122,9 +118,9 @@
122
118
  font-weight: unset !important;
123
119
  }
124
120
  .w-md-editor-text-pre .token.code.keyword {
125
- color: var(--color-prettylights-syntax-constant) !important;
121
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
126
122
  }
127
123
  .w-md-editor-text-pre .token.strike,
128
124
  .w-md-editor-text-pre .token.strike .content {
129
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
125
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
130
126
  }
package/esm/components/TextArea/index.less CHANGED
@@ -27,6 +27,7 @@
27
27
  box-sizing: inherit;
28
28
  display: inherit;
29
29
  font-family: inherit;
30
+ font-family: var(--md-editor-font-family) !important;
30
31
  font-size: inherit;
31
32
  font-style: inherit;
32
33
  font-variant-ligatures: inherit;
@@ -42,9 +43,6 @@
42
43
  word-break: inherit;
43
44
  word-break: normal;
44
45
  padding: 0;
45
- > code {
46
- font-family: inherit;
47
- }
48
46
  }
49
47
  &-pre {
50
48
  position: relative;
@@ -53,7 +51,7 @@
53
51
  background-color: transparent !important;
54
52
  > code {
55
53
  padding: 0 !important;
56
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
54
+ font-family: var(--md-editor-font-family) !important;
57
55
  font-size: 14px !important;
58
56
  line-height: 18px !important;
59
57
  }
@@ -103,17 +101,17 @@
103
101
 
104
102
  .@{md-editor}-text-pre {
105
103
  .punctuation {
106
- color: var(--color-prettylights-syntax-comment) !important;
104
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
107
105
  }
108
106
  .token.url,
109
107
  .token.content {
110
- color: var(--color-prettylights-syntax-constant) !important;
108
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
111
109
  }
112
110
  .token.title.important {
113
- color: var(--color-prettylights-syntax-markup-bold);
111
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
114
112
  }
115
113
  .token.code-block .function {
116
- color: var(--color-prettylights-syntax-entity);
114
+ color: var(--color-prettylights-syntax-entity, #8250df);
117
115
  }
118
116
  .token.bold {
119
117
  font-weight: unset !important;
@@ -124,10 +122,10 @@
124
122
  font-weight: unset !important;
125
123
  }
126
124
  .token.code.keyword {
127
- color: var(--color-prettylights-syntax-constant) !important;
125
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
128
126
  }
129
127
  .token.strike,
130
128
  .token.strike .content {
131
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
129
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
132
130
  }
133
131
  }
package/esm/components/Toolbar/Child.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .w-md-editor-toolbar-child {
2
2
  position: absolute;
3
3
  border-radius: 3px;
4
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
5
- background-color: var(--color-canvas-default);
4
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
5
+ background-color: var(--md-editor-background-color);
6
6
  z-index: 1;
7
7
  display: none;
8
8
  }
package/esm/components/Toolbar/Child.less CHANGED
@@ -4,9 +4,9 @@
4
4
  &-toolbar-child {
5
5
  position: absolute;
6
6
  border-radius: 3px;
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
8
- 0 1px 1px var(--color-border-default);
9
- background-color: var(--color-canvas-default);
7
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
8
+ 0 1px 1px var(--md-editor-box-shadow-color);
9
+ background-color: var(--md-editor-background-color);
10
10
  z-index: 1;
11
11
  display: none;
12
12
  &.active {
package/esm/components/Toolbar/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .w-md-editor-toolbar {
2
- border-bottom: 1px solid var(--color-border-default);
3
- background-color: var(--color-canvas-default);
2
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
3
+ background-color: var(--md-editor-background-color);
4
4
  padding: 5px 5px;
5
5
  display: flex;
6
6
  justify-content: space-between;
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .w-md-editor-toolbar.bottom {
14
14
  border-bottom: 0px;
15
- border-top: 1px solid var(--color-border-default);
15
+ border-top: 1px solid var(--md-editor-box-shadow-color);
16
16
  border-radius: 0 0 3px 3px;
17
17
  }
18
18
  .w-md-editor-toolbar ul,
@@ -56,12 +56,12 @@
56
56
  color: var(--color-danger-fg);
57
57
  }
58
58
  .w-md-editor-toolbar li > button:disabled {
59
- color: var(--color-border-default);
59
+ color: var(--md-editor-box-shadow-color);
60
60
  cursor: not-allowed;
61
61
  }
62
62
  .w-md-editor-toolbar li > button:disabled:hover {
63
63
  background-color: transparent;
64
- color: var(--color-border-default);
64
+ color: var(--md-editor-box-shadow-color);
65
65
  }
66
66
  .w-md-editor-toolbar li.active > button {
67
67
  color: var(--color-accent-fg);
@@ -72,5 +72,5 @@
72
72
  width: 1px;
73
73
  margin: -3px 3px 0 3px !important;
74
74
  vertical-align: middle;
75
- background-color: var(--color-border-default);
75
+ background-color: var(--md-editor-box-shadow-color);
76
76
  }
package/esm/components/Toolbar/index.less CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  .@{md-editor} {
4
4
  &-toolbar {
5
- border-bottom: 1px solid var(--color-border-default);
6
- background-color: var(--color-canvas-default);
5
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
6
+ background-color: var(--md-editor-background-color);
7
7
  padding: 5px 5px;
8
8
  display: flex;
9
9
  justify-content: space-between;
@@ -13,7 +13,7 @@
13
13
  flex-wrap: wrap;
14
14
  &.bottom {
15
15
  border-bottom: 0px;
16
- border-top: 1px solid var(--color-border-default);
16
+ border-top: 1px solid var(--md-editor-box-shadow-color);
17
17
  border-radius: 0 0 3px 3px;
18
18
  }
19
19
  ul,
@@ -55,11 +55,11 @@
55
55
  color: var(--color-danger-fg);
56
56
  }
57
57
  &:disabled {
58
- color: var(--color-border-default);
58
+ color: var(--md-editor-box-shadow-color);
59
59
  cursor: not-allowed;
60
60
  &:hover {
61
61
  background-color: transparent;
62
- color: var(--color-border-default);
62
+ color: var(--md-editor-box-shadow-color);
63
63
  }
64
64
  }
65
65
  }
@@ -73,7 +73,7 @@
73
73
  width: 1px;
74
74
  margin: -3px 3px 0 3px !important;
75
75
  vertical-align: middle;
76
- background-color: var(--color-border-default);
76
+ background-color: var(--md-editor-box-shadow-color);
77
77
  }
78
78
  }
79
79
  }
package/esm/index.css CHANGED
@@ -4,8 +4,11 @@
4
4
  padding-bottom: 1px;
5
5
  position: relative;
6
6
  color: var(--color-fg-default);
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
8
- background-color: var(--color-canvas-default);
7
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
8
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
9
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
10
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
11
+ background-color: var(--md-editor-background-color);
9
12
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
13
  display: flex;
11
14
  flex-direction: column;
@@ -18,7 +21,7 @@
18
21
  right: unset !important;
19
22
  left: 0;
20
23
  text-align: right !important;
21
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
24
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
22
25
  }
23
26
  .w-md-editor.w-md-editor-rtl .w-md-editor-text {
24
27
  text-align: right !important;
@@ -47,7 +50,7 @@
47
50
  .w-md-editor-preview {
48
51
  width: 50%;
49
52
  box-sizing: border-box;
50
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
53
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
51
54
  position: absolute;
52
55
  padding: 10px 20px;
53
56
  overflow: auto;
@@ -67,7 +70,7 @@
67
70
  .w-md-editor-show-preview .w-md-editor-input {
68
71
  width: 0%;
69
72
  overflow: hidden;
70
- background-color: var(--color-canvas-default);
73
+ background-color: var(--md-editor-background-color);
71
74
  }
72
75
  .w-md-editor-show-preview .w-md-editor-preview {
73
76
  width: 100%;
package/esm/index.less CHANGED
@@ -6,9 +6,12 @@
6
6
  padding-bottom: 1px;
7
7
  position: relative;
8
8
  color: var(--color-fg-default);
9
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
10
- 0 1px 1px var(--color-border-default);
11
- background-color: var(--color-canvas-default);
9
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
11
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
12
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
13
+ 0 1px 1px var(--md-editor-box-shadow-color);
14
+ background-color: var(--md-editor-background-color);
12
15
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13
16
  display: flex;
14
17
  flex-direction: column;
@@ -20,7 +23,7 @@
20
23
  right: unset !important;
21
24
  left: 0;
22
25
  text-align: right !important;
23
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
26
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
24
27
  }
25
28
  &&-rtl &-text {
26
29
  text-align: right !important;
@@ -48,7 +51,7 @@
48
51
  &-preview {
49
52
  width: 50%;
50
53
  box-sizing: border-box;
51
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
54
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
52
55
  position: absolute;
53
56
  padding: 10px 20px;
54
57
  overflow: auto;
@@ -70,7 +73,7 @@
70
73
  &-show-preview &-input {
71
74
  width: 0%;
72
75
  overflow: hidden;
73
- background-color: var(--color-canvas-default);
76
+ background-color: var(--md-editor-background-color);
74
77
  }
75
78
  &-show-preview &-preview {
76
79
  width: 100%;
package/lib/commands/index.js CHANGED
@@ -267,7 +267,6 @@ var TextAreaCommandOrchestrator = /*#__PURE__*/function () {
267
267
  }, {
268
268
  key: "executeCommand",
269
269
  value: function executeCommand(command, dispatch, state, shortcuts) {
270
- console.log('state:', state);
271
270
  command.execute && command.execute((0, _objectSpread2["default"])({
272
271
  command: command
273
272
  }, getStateFromTextArea(this.textArea)), this.textApi, dispatch, state, shortcuts);
package/lib/components/TextArea/index.less CHANGED
@@ -27,6 +27,7 @@
27
27
  box-sizing: inherit;
28
28
  display: inherit;
29
29
  font-family: inherit;
30
+ font-family: var(--md-editor-font-family) !important;
30
31
  font-size: inherit;
31
32
  font-style: inherit;
32
33
  font-variant-ligatures: inherit;
@@ -42,9 +43,6 @@
42
43
  word-break: inherit;
43
44
  word-break: normal;
44
45
  padding: 0;
45
- > code {
46
- font-family: inherit;
47
- }
48
46
  }
49
47
  &-pre {
50
48
  position: relative;
@@ -53,7 +51,7 @@
53
51
  background-color: transparent !important;
54
52
  > code {
55
53
  padding: 0 !important;
56
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
54
+ font-family: var(--md-editor-font-family) !important;
57
55
  font-size: 14px !important;
58
56
  line-height: 18px !important;
59
57
  }
@@ -103,17 +101,17 @@
103
101
 
104
102
  .@{md-editor}-text-pre {
105
103
  .punctuation {
106
- color: var(--color-prettylights-syntax-comment) !important;
104
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
107
105
  }
108
106
  .token.url,
109
107
  .token.content {
110
- color: var(--color-prettylights-syntax-constant) !important;
108
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
111
109
  }
112
110
  .token.title.important {
113
- color: var(--color-prettylights-syntax-markup-bold);
111
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
114
112
  }
115
113
  .token.code-block .function {
116
- color: var(--color-prettylights-syntax-entity);
114
+ color: var(--color-prettylights-syntax-entity, #8250df);
117
115
  }
118
116
  .token.bold {
119
117
  font-weight: unset !important;
@@ -124,10 +122,10 @@
124
122
  font-weight: unset !important;
125
123
  }
126
124
  .token.code.keyword {
127
- color: var(--color-prettylights-syntax-constant) !important;
125
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
128
126
  }
129
127
  .token.strike,
130
128
  .token.strike .content {
131
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
129
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
132
130
  }
133
131
  }
package/lib/components/Toolbar/Child.less CHANGED
@@ -4,9 +4,9 @@
4
4
  &-toolbar-child {
5
5
  position: absolute;
6
6
  border-radius: 3px;
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
8
- 0 1px 1px var(--color-border-default);
9
- background-color: var(--color-canvas-default);
7
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
8
+ 0 1px 1px var(--md-editor-box-shadow-color);
9
+ background-color: var(--md-editor-background-color);
10
10
  z-index: 1;
11
11
  display: none;
12
12
  &.active {
package/lib/components/Toolbar/index.less CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  .@{md-editor} {
4
4
  &-toolbar {
5
- border-bottom: 1px solid var(--color-border-default);
6
- background-color: var(--color-canvas-default);
5
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
6
+ background-color: var(--md-editor-background-color);
7
7
  padding: 5px 5px;
8
8
  display: flex;
9
9
  justify-content: space-between;
@@ -13,7 +13,7 @@
13
13
  flex-wrap: wrap;
14
14
  &.bottom {
15
15
  border-bottom: 0px;
16
- border-top: 1px solid var(--color-border-default);
16
+ border-top: 1px solid var(--md-editor-box-shadow-color);
17
17
  border-radius: 0 0 3px 3px;
18
18
  }
19
19
  ul,
@@ -55,11 +55,11 @@
55
55
  color: var(--color-danger-fg);
56
56
  }
57
57
  &:disabled {
58
- color: var(--color-border-default);
58
+ color: var(--md-editor-box-shadow-color);
59
59
  cursor: not-allowed;
60
60
  &:hover {
61
61
  background-color: transparent;
62
- color: var(--color-border-default);
62
+ color: var(--md-editor-box-shadow-color);
63
63
  }
64
64
  }
65
65
  }
@@ -73,7 +73,7 @@
73
73
  width: 1px;
74
74
  margin: -3px 3px 0 3px !important;
75
75
  vertical-align: middle;
76
- background-color: var(--color-border-default);
76
+ background-color: var(--md-editor-box-shadow-color);
77
77
  }
78
78
  }
79
79
  }
package/lib/index.less CHANGED
@@ -6,9 +6,12 @@
6
6
  padding-bottom: 1px;
7
7
  position: relative;
8
8
  color: var(--color-fg-default);
9
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
10
- 0 1px 1px var(--color-border-default);
11
- background-color: var(--color-canvas-default);
9
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
11
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
12
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
13
+ 0 1px 1px var(--md-editor-box-shadow-color);
14
+ background-color: var(--md-editor-background-color);
12
15
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13
16
  display: flex;
14
17
  flex-direction: column;
@@ -20,7 +23,7 @@
20
23
  right: unset !important;
21
24
  left: 0;
22
25
  text-align: right !important;
23
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
26
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
24
27
  }
25
28
  &&-rtl &-text {
26
29
  text-align: right !important;
@@ -48,7 +51,7 @@
48
51
  &-preview {
49
52
  width: 50%;
50
53
  box-sizing: border-box;
51
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
54
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
52
55
  position: absolute;
53
56
  padding: 10px 20px;
54
57
  overflow: auto;
@@ -70,7 +73,7 @@
70
73
  &-show-preview &-input {
71
74
  width: 0%;
72
75
  overflow: hidden;
73
- background-color: var(--color-canvas-default);
76
+ background-color: var(--md-editor-background-color);
74
77
  }
75
78
  &-show-preview &-preview {
76
79
  width: 100%;
package/markdown-editor.css CHANGED
@@ -44,6 +44,7 @@
44
44
  box-sizing: inherit;
45
45
  display: inherit;
46
46
  font-family: inherit;
47
+ font-family: var(--md-editor-font-family) !important;
47
48
  font-size: inherit;
48
49
  font-style: inherit;
49
50
  -webkit-font-variant-ligatures: inherit;
@@ -61,11 +62,6 @@
61
62
  word-break: normal;
62
63
  padding: 0;
63
64
  }
64
- .w-md-editor-text-pre > code,
65
- .w-md-editor-text-input > code,
66
- .w-md-editor-text > .w-md-editor-text-pre > code {
67
- font-family: inherit;
68
- }
69
65
  .w-md-editor-text-pre {
70
66
  position: relative;
71
67
  margin: 0px !important;
@@ -74,7 +70,7 @@
74
70
  }
75
71
  .w-md-editor-text-pre > code {
76
72
  padding: 0 !important;
77
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
73
+ font-family: var(--md-editor-font-family) !important;
78
74
  font-size: 14px !important;
79
75
  line-height: 18px !important;
80
76
  }
@@ -119,17 +115,17 @@
119
115
  }
120
116
  }
121
117
  .w-md-editor-text-pre .punctuation {
122
- color: var(--color-prettylights-syntax-comment) !important;
118
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
123
119
  }
124
120
  .w-md-editor-text-pre .token.url,
125
121
  .w-md-editor-text-pre .token.content {
126
- color: var(--color-prettylights-syntax-constant) !important;
122
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
127
123
  }
128
124
  .w-md-editor-text-pre .token.title.important {
129
- color: var(--color-prettylights-syntax-markup-bold);
125
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
130
126
  }
131
127
  .w-md-editor-text-pre .token.code-block .function {
132
- color: var(--color-prettylights-syntax-entity);
128
+ color: var(--color-prettylights-syntax-entity, #8250df);
133
129
  }
134
130
  .w-md-editor-text-pre .token.bold {
135
131
  font-weight: unset !important;
@@ -140,17 +136,17 @@
140
136
  font-weight: unset !important;
141
137
  }
142
138
  .w-md-editor-text-pre .token.code.keyword {
143
- color: var(--color-prettylights-syntax-constant) !important;
139
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
144
140
  }
145
141
  .w-md-editor-text-pre .token.strike,
146
142
  .w-md-editor-text-pre .token.strike .content {
147
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
143
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
148
144
  }
149
145
  .w-md-editor-toolbar-child {
150
146
  position: absolute;
151
147
  border-radius: 3px;
152
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
153
- background-color: var(--color-canvas-default);
148
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
149
+ background-color: var(--md-editor-background-color);
154
150
  z-index: 1;
155
151
  display: none;
156
152
  }
@@ -173,8 +169,8 @@
173
169
  margin: 0;
174
170
  }
175
171
  .w-md-editor-toolbar {
176
- border-bottom: 1px solid var(--color-border-default);
177
- background-color: var(--color-canvas-default);
172
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
173
+ background-color: var(--md-editor-background-color);
178
174
  padding: 5px 5px;
179
175
  display: flex;
180
176
  justify-content: space-between;
@@ -186,7 +182,7 @@
186
182
  }
187
183
  .w-md-editor-toolbar.bottom {
188
184
  border-bottom: 0px;
189
- border-top: 1px solid var(--color-border-default);
185
+ border-top: 1px solid var(--md-editor-box-shadow-color);
190
186
  border-radius: 0 0 3px 3px;
191
187
  }
192
188
  .w-md-editor-toolbar ul,
@@ -230,12 +226,12 @@
230
226
  color: var(--color-danger-fg);
231
227
  }
232
228
  .w-md-editor-toolbar li > button:disabled {
233
- color: var(--color-border-default);
229
+ color: var(--md-editor-box-shadow-color);
234
230
  cursor: not-allowed;
235
231
  }
236
232
  .w-md-editor-toolbar li > button:disabled:hover {
237
233
  background-color: transparent;
238
- color: var(--color-border-default);
234
+ color: var(--md-editor-box-shadow-color);
239
235
  }
240
236
  .w-md-editor-toolbar li.active > button {
241
237
  color: var(--color-accent-fg);
@@ -246,7 +242,7 @@
246
242
  width: 1px;
247
243
  margin: -3px 3px 0 3px !important;
248
244
  vertical-align: middle;
249
- background-color: var(--color-border-default);
245
+ background-color: var(--md-editor-box-shadow-color);
250
246
  }
251
247
  .w-md-editor {
252
248
  text-align: left;
@@ -254,8 +250,11 @@
254
250
  padding-bottom: 1px;
255
251
  position: relative;
256
252
  color: var(--color-fg-default);
257
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
258
- background-color: var(--color-canvas-default);
253
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
254
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
255
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
256
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
257
+ background-color: var(--md-editor-background-color);
259
258
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
260
259
  display: flex;
261
260
  flex-direction: column;
@@ -268,7 +267,7 @@
268
267
  right: unset !important;
269
268
  left: 0;
270
269
  text-align: right !important;
271
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
270
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
272
271
  }
273
272
  .w-md-editor.w-md-editor-rtl .w-md-editor-text {
274
273
  text-align: right !important;
@@ -297,7 +296,7 @@
297
296
  .w-md-editor-preview {
298
297
  width: 50%;
299
298
  box-sizing: border-box;
300
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
299
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
301
300
  position: absolute;
302
301
  padding: 10px 20px;
303
302
  overflow: auto;
@@ -317,7 +316,7 @@
317
316
  .w-md-editor-show-preview .w-md-editor-input {
318
317
  width: 0%;
319
318
  overflow: hidden;
320
- background-color: var(--color-canvas-default);
319
+ background-color: var(--md-editor-background-color);
321
320
  }
322
321
  .w-md-editor-show-preview .w-md-editor-preview {
323
322
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-md-editor",
3
- "version": "3.22.0",
3
+ "version": "3.23.1",
4
4
  "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
5
5
  "homepage": "https://uiwjs.github.io/react-md-editor/",
6
6
  "author": "kenny wang <wowohoo@qq.com>",
package/src/commands/index.ts CHANGED
@@ -167,7 +167,6 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
167
167
  state?: ExecuteCommandState,
168
168
  shortcuts?: string[],
169
169
  ): void {
170
- console.log('state:', state);
171
170
  command.execute &&
172
171
  command.execute({ command, ...getStateFromTextArea(this.textArea) }, this.textApi, dispatch, state, shortcuts);
173
172
  }