@uiw/react-md-editor 3.10.2 → 3.11.2

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 (39) hide show
  1. package/README.md +36 -9
  2. package/dist/mdeditor.css +962 -321
  3. package/dist/mdeditor.js +43730 -57798
  4. package/dist/mdeditor.min.css +1 -1
  5. package/dist/mdeditor.min.js +1 -1
  6. package/esm/Editor.js +1 -1
  7. package/esm/Editor.js.map +2 -2
  8. package/esm/commands/code.js +4 -0
  9. package/esm/commands/code.js.map +2 -2
  10. package/esm/components/TextArea/Markdown.js +2 -3
  11. package/esm/components/TextArea/Markdown.js.map +2 -2
  12. package/esm/components/TextArea/index.css +17 -25
  13. package/esm/components/TextArea/index.less +17 -27
  14. package/esm/components/Toolbar/Child.css +2 -2
  15. package/esm/components/Toolbar/Child.less +3 -2
  16. package/esm/components/Toolbar/index.css +12 -12
  17. package/esm/components/Toolbar/index.less +12 -12
  18. package/esm/index.css +8 -5
  19. package/esm/index.less +9 -5
  20. package/lib/Editor.js +1 -1
  21. package/lib/Editor.js.map +2 -2
  22. package/lib/commands/code.js +4 -0
  23. package/lib/commands/code.js.map +2 -2
  24. package/lib/components/TextArea/Markdown.js +2 -3
  25. package/lib/components/TextArea/Markdown.js.map +2 -2
  26. package/lib/components/TextArea/index.less +17 -27
  27. package/lib/components/Toolbar/Child.less +3 -2
  28. package/lib/components/Toolbar/index.less +12 -12
  29. package/lib/index.less +9 -5
  30. package/markdown-editor.css +39 -44
  31. package/package.json +4 -3
  32. package/src/Editor.tsx +1 -0
  33. package/src/__test__/editor.test.tsx +1 -1
  34. package/src/commands/code.tsx +2 -0
  35. package/src/components/TextArea/Markdown.tsx +1 -2
  36. package/src/components/TextArea/index.less +17 -27
  37. package/src/components/Toolbar/Child.less +3 -2
  38. package/src/components/Toolbar/index.less +12 -12
  39. package/src/index.less +9 -5
package/src/components/TextArea/index.less CHANGED
@@ -95,42 +95,32 @@
95
95
  }
96
96
 
97
97
  .@{md-editor}-text-pre {
98
- color: #333;
99
- .table {
100
- .punctuation {
101
- color: #c3c3c3;
102
- }
103
- .table-header {
104
- color: #000;
105
- }
98
+ .punctuation {
99
+ color: var(--color-prettylights-syntax-comment) !important;
106
100
  }
107
-
108
- .url {
109
- color: #032f62 !important;
110
- .content {
111
- color: #0366d6;
112
- }
101
+ .token.url,
102
+ .token.content {
103
+ color: var(--color-prettylights-syntax-constant) !important;
113
104
  }
114
-
115
- .hr {
116
- color: #999;
105
+ .token.title.important {
106
+ color: var(--color-prettylights-syntax-markup-bold);
117
107
  }
118
- .blockquote {
119
- color: #a6a6a6;
108
+ .token.code-block .function {
109
+ color: var(--color-prettylights-syntax-entity);
120
110
  }
121
- .title,
122
- .bold {
123
- color: #000 !important;
111
+ .token.bold {
112
+ font-weight: unset !important;
124
113
  }
125
- .title {
114
+ .token.title {
126
115
  line-height: unset !important;
127
116
  font-size: unset !important;
128
117
  font-weight: unset !important;
129
118
  }
130
- .code.keyword {
131
- color: #596394 !important;
119
+ .token.code.keyword {
120
+ color: var(--color-prettylights-syntax-constant) !important;
132
121
  }
133
- .strike {
134
- color: #bf4ca0;
122
+ .token.strike,
123
+ .token.strike .content {
124
+ color: var(--color-prettylights-syntax-markup-deleted-text) !important;
135
125
  }
136
126
  }
package/src/components/Toolbar/Child.less CHANGED
@@ -4,8 +4,9 @@
4
4
  &-toolbar-child {
5
5
  position: absolute;
6
6
  border-radius: 3px;
7
- 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);
8
- background-color: #fff;
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);
9
10
  z-index: 1;
10
11
  display: none;
11
12
  &.active {
package/src/components/Toolbar/index.less CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  .@{md-editor} {
4
4
  &-toolbar {
5
- border-bottom: 1px solid #dfdfe0;
6
- background-color: #fbfbfb;
5
+ border-bottom: 1px solid var(--color-border-default);
6
+ background-color: var(--color-canvas-default);
7
7
  padding: 0 5px 0 5px;
8
8
  display: flex;
9
9
  justify-content: space-between;
@@ -24,7 +24,6 @@
24
24
  height: 20px;
25
25
  line-height: 14px;
26
26
  background: none;
27
- color: #586069;
28
27
  padding: 4px;
29
28
  margin: 0 1px;
30
29
  border-radius: 2px;
@@ -35,27 +34,28 @@
35
34
  cursor: pointer;
36
35
  transition: all 0.3s;
37
36
  white-space: nowrap;
37
+ color: var(--color-fg-default);
38
38
  &:hover,
39
39
  &:focus {
40
- color: #06c;
41
- background-color: #dcdcdc;
40
+ background-color: var(--color-neutral-muted);
41
+ color: var(--color-accent-fg);
42
42
  }
43
43
  &:active {
44
- color: #6a57ff;
45
- background-color: #dcdcdc;
44
+ background-color: var(--color-neutral-muted);
45
+ color: var(--color-danger-fg);
46
46
  }
47
47
  &:disabled {
48
- color: #ccc;
48
+ color: var(--color-border-default);
49
49
  cursor: not-allowed;
50
50
  &:hover {
51
51
  background-color: transparent;
52
- color: #ccc;
52
+ color: var(--color-border-default);
53
53
  }
54
54
  }
55
55
  }
56
56
  &.active > button {
57
- color: #06c;
58
- background-color: #e8e8e8;
57
+ color: var(--color-accent-fg);
58
+ background-color: var(--color-neutral-muted);
59
59
  }
60
60
  }
61
61
  &-divider {
@@ -63,7 +63,7 @@
63
63
  width: 1px;
64
64
  margin: -3px 3px 0 3px !important;
65
65
  vertical-align: middle;
66
- background-color: #ccc;
66
+ background-color: var(--color-border-default);
67
67
  }
68
68
  }
69
69
  }
package/src/index.less CHANGED
@@ -1,14 +1,18 @@
1
1
  @md-editor:~ "w-md-editor";
2
2
 
3
3
  .@{md-editor} {
4
- color: #24292e;
5
4
  text-align: left;
6
- 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);
7
5
  border-radius: 3px;
8
6
  padding-bottom: 1px;
9
7
  position: relative;
10
- background-color: #fff;
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);
11
12
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13
+ .copied {
14
+ display: none !important;
15
+ }
12
16
  &-content {
13
17
  position: relative;
14
18
  border-radius: 0 0 3px 0;
@@ -21,7 +25,7 @@
21
25
  &-preview {
22
26
  width: 50%;
23
27
  box-sizing: border-box;
24
- box-shadow: inset 1px 0 0 0 #dfdfe0;
28
+ box-shadow: inset 1px 0 0 0 var(--color-border-default);
25
29
  position: absolute;
26
30
  padding: 10px 20px;
27
31
  overflow: auto;
@@ -38,7 +42,7 @@
38
42
  &-show-preview &-input {
39
43
  width: 0%;
40
44
  overflow: hidden;
41
- background-color: #fdfdfd;
45
+ background-color: var(--color-canvas-default);
42
46
  }
43
47
  &-show-preview &-preview {
44
48
  width: 100%;