@uiw/react-md-editor 3.10.2 → 3.11.0

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 (34) hide show
  1. package/README.md +35 -9
  2. package/dist/mdeditor.css +959 -321
  3. package/dist/mdeditor.js +43804 -57871
  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/components/TextArea/Markdown.js +2 -3
  9. package/esm/components/TextArea/Markdown.js.map +2 -2
  10. package/esm/components/TextArea/index.css +17 -25
  11. package/esm/components/TextArea/index.less +17 -27
  12. package/esm/components/Toolbar/Child.css +2 -2
  13. package/esm/components/Toolbar/Child.less +3 -2
  14. package/esm/components/Toolbar/index.css +12 -12
  15. package/esm/components/Toolbar/index.less +12 -12
  16. package/esm/index.css +5 -5
  17. package/esm/index.less +6 -5
  18. package/lib/Editor.js +1 -1
  19. package/lib/Editor.js.map +2 -2
  20. package/lib/components/TextArea/Markdown.js +2 -3
  21. package/lib/components/TextArea/Markdown.js.map +2 -2
  22. package/lib/components/TextArea/index.less +17 -27
  23. package/lib/components/Toolbar/Child.less +3 -2
  24. package/lib/components/Toolbar/index.less +12 -12
  25. package/lib/index.less +6 -5
  26. package/markdown-editor.css +36 -44
  27. package/package.json +4 -3
  28. package/src/Editor.tsx +1 -0
  29. package/src/__test__/editor.test.tsx +1 -1
  30. package/src/components/TextArea/Markdown.tsx +1 -2
  31. package/src/components/TextArea/index.less +17 -27
  32. package/src/components/Toolbar/Child.less +3 -2
  33. package/src/components/Toolbar/index.less +12 -12
  34. package/src/index.less +6 -5
package/lib/components/TextArea/Markdown.js.map CHANGED
@@ -32,8 +32,8 @@
32
32
  "__html",
33
33
  "value"
34
34
  ],
35
- "mappings": ";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAHA;AAOe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,oBAAoC,uBAAWC,sBAAX,CAApC;AAAA,yCAAQC,QAAR;AAAA,MAAQA,QAAR,qCAAmB,EAAnB;AAAA,MAAuBC,QAAvB,eAAuBA,QAAvB;;AACA,MAAMC,MAAM,gBAAGC,eAAMC,SAAN,EAAf;;AACA,wBAAU,YAAM;AACd,QAAIF,MAAM,CAACG,OAAP,IAAkBJ,QAAtB,EAAgC;AAC9BA,MAAAA,QAAQ,CAAC;AAAEK,QAAAA,WAAW,EAAEJ,MAAM,CAACG;AAAtB,OAAD,CAAR;AACD,KAHa,CAId;;AACD,GALD,EAKG,EALH;;AAMA,WAASE,WAAT,CAAqBC,KAArB,EAAoC;AAClC,WAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC2D,UAACC,GAAD,EAAiB;AAC/E,aAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEL,UAACE,CAAD;AAAA,eAAiB;AAAE,eAAK,MAAP;AAAe,eAAK,MAApB;AAA4B,eAAK,OAAjC;AAA0C,eAAK;AAA/C,SAAD,CAAsFA,CAAtF,CAAhB;AAAA,OAFK,CAAP;AAID,KANI,EAOJF,OAPI,CAQH,QARG,EASH,UAACE,CAAD;AAAA,aAAiB;AAAE,aAAK,MAAP;AAAe,aAAK,MAApB;AAA4B,aAAK,OAAjC;AAA0C,aAAK;AAA/C,OAAD,CAAsFA,CAAtF,CAAhB;AAAA,KATG,CAAP;AAWD;;AAED,SAAO,oBAAQ,YAAM;AACnB,QAAI,CAACX,QAAL,EAAe;AACb,0BAAO;AAAK,QAAA,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;AAA+B,QAAA,GAAG,EAAEE,MAApC;AAA4C,QAAA,SAAS,YAAKJ,SAAL;AAArD,QAAP;AACD;;AACD,QAAMY,GAAG,GAAG,sBACTE,IADS,CACJ,UADI,EACQ;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KADR,EAETC,GAFS,CAELC,oBAFK,EAEQ;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KAFR,EAGTC,WAHS,0CAIyBnB,SAJzB,+EAIoGS,WAAW,CACrHP,QADqH,CAJ/G,qBAAZ;AAQA,wBAAOG,eAAMe,aAAN,CAAoB,KAApB,EAA2B;AAChCC,MAAAA,SAAS,EAAE,qBADqB;AAEhCC,MAAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEX,GAAG,CAACY;AAAd;AAFO,KAA3B,CAAP;AAID,GAhBM,EAgBJ,CAACtB,QAAD,EAAWE,MAAX,EAAmBJ,SAAnB,CAhBI,CAAP;AAiBD",
35
+ "mappings": ";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAIe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;AACrD,MAAQC,SAAR,GAAsBD,KAAtB,CAAQC,SAAR;;AACA,oBAAoC,uBAAWC,sBAAX,CAApC;AAAA,yCAAQC,QAAR;AAAA,MAAQA,QAAR,qCAAmB,EAAnB;AAAA,MAAuBC,QAAvB,eAAuBA,QAAvB;;AACA,MAAMC,MAAM,gBAAGC,eAAMC,SAAN,EAAf;;AACA,wBAAU,YAAM;AACd,QAAIF,MAAM,CAACG,OAAP,IAAkBJ,QAAtB,EAAgC;AAC9BA,MAAAA,QAAQ,CAAC;AAAEK,QAAAA,WAAW,EAAEJ,MAAM,CAACG;AAAtB,OAAD,CAAR;AACD,KAHa,CAId;;AACD,GALD,EAKG,EALH;;AAMA,WAASE,WAAT,CAAqBC,KAArB,EAAoC;AAClC,WAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC2D,UAACC,GAAD,EAAiB;AAC/E,aAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEL,UAACE,CAAD;AAAA,eAAiB;AAAE,eAAK,MAAP;AAAe,eAAK,MAApB;AAA4B,eAAK,OAAjC;AAA0C,eAAK;AAA/C,SAAD,CAAsFA,CAAtF,CAAhB;AAAA,OAFK,CAAP;AAID,KANI,EAOJF,OAPI,CAQH,QARG,EASH,UAACE,CAAD;AAAA,aAAiB;AAAE,aAAK,MAAP;AAAe,aAAK,MAApB;AAA4B,aAAK,OAAjC;AAA0C,aAAK;AAA/C,OAAD,CAAsFA,CAAtF,CAAhB;AAAA,KATG,CAAP;AAWD;;AAED,SAAO,oBAAQ,YAAM;AACnB,QAAI,CAACX,QAAL,EAAe;AACb,0BAAO;AAAK,QAAA,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;AAA+B,QAAA,GAAG,EAAEE,MAApC;AAA4C,QAAA,SAAS,YAAKJ,SAAL;AAArD,QAAP;AACD;;AACD,QAAMY,GAAG,GAAG,sBACTE,IADS,CACJ,UADI,EACQ;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KADR,EAETC,GAFS,CAELC,wBAFK,EAEQ;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KAFR,EAGTC,WAHS,0CAIyBnB,SAJzB,+EAIoGS,WAAW,CACrHP,QADqH,CAJ/G,qBAAZ;AAQA,wBAAOG,eAAMe,aAAN,CAAoB,KAApB,EAA2B;AAChCC,MAAAA,SAAS,EAAE,qBADqB;AAEhCC,MAAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEX,GAAG,CAACY;AAAd;AAFO,KAA3B,CAAP;AAID,GAhBM,EAgBJ,CAACtB,QAAD,EAAWE,MAAX,EAAmBJ,SAAnB,CAhBI,CAAP;AAiBD",
36
36
  "sourcesContent": [
37
- "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\n// @ts-ignore\nimport rehypePrism from '@mapbox/rehype-prism';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', dispatch } = useContext(EditorContext);\n const preRef = React.createRef<HTMLPreElement>();\n useEffect(() => {\n if (preRef.current && dispatch) {\n dispatch({ textareaPre: preRef.current });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n function html2Escape(sHtml: string) {\n return sHtml\n .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n return str.replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n );\n })\n .replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n );\n }\n\n return useMemo(() => {\n if (!markdown) {\n return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n const str = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: true })\n .processSync(\n `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`,\n );\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: str.value as string },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
37
+ "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n const { prefixCls } = props;\n const { markdown = '', dispatch } = useContext(EditorContext);\n const preRef = React.createRef<HTMLPreElement>();\n useEffect(() => {\n if (preRef.current && dispatch) {\n dispatch({ textareaPre: preRef.current });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n function html2Escape(sHtml: string) {\n return sHtml\n .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n return str.replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n );\n })\n .replace(\n /[<&\"]/g,\n (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n );\n }\n\n return useMemo(() => {\n if (!markdown) {\n return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n }\n const str = rehype()\n .data('settings', { fragment: true })\n .use(rehypePrism, { ignoreMissing: true })\n .processSync(\n `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n markdown,\n )}\\n</code></pre>`,\n );\n return React.createElement('div', {\n className: 'wmde-markdown-color',\n dangerouslySetInnerHTML: { __html: str.value as string },\n });\n }, [markdown, preRef, prefixCls]);\n}\n"
38
38
  ]
39
39
  }
package/lib/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/lib/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/lib/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/lib/index.less CHANGED
@@ -1,13 +1,14 @@
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;
12
13
  &-content {
13
14
  position: relative;
@@ -21,7 +22,7 @@
21
22
  &-preview {
22
23
  width: 50%;
23
24
  box-sizing: border-box;
24
- box-shadow: inset 1px 0 0 0 #dfdfe0;
25
+ box-shadow: inset 1px 0 0 0 var(--color-border-default);
25
26
  position: absolute;
26
27
  padding: 10px 20px;
27
28
  overflow: auto;
@@ -38,7 +39,7 @@
38
39
  &-show-preview &-input {
39
40
  width: 0%;
40
41
  overflow: hidden;
41
- background-color: #fdfdfd;
42
+ background-color: var(--color-canvas-default);
42
43
  }
43
44
  &-show-preview &-preview {
44
45
  width: 100%;
package/markdown-editor.css CHANGED
@@ -110,47 +110,39 @@
110
110
  color: transparent !important;
111
111
  }
112
112
  }
113
- .w-md-editor-text-pre {
114
- color: #333;
115
- }
116
- .w-md-editor-text-pre .table .punctuation {
117
- color: #c3c3c3;
118
- }
119
- .w-md-editor-text-pre .table .table-header {
120
- color: #000;
113
+ .w-md-editor-text-pre .punctuation {
114
+ color: var(--color-prettylights-syntax-comment) !important;
121
115
  }
122
- .w-md-editor-text-pre .url {
123
- color: #032f62 !important;
116
+ .w-md-editor-text-pre .token.url,
117
+ .w-md-editor-text-pre .token.content {
118
+ color: var(--color-prettylights-syntax-constant) !important;
124
119
  }
125
- .w-md-editor-text-pre .url .content {
126
- color: #0366d6;
120
+ .w-md-editor-text-pre .token.title.important {
121
+ color: var(--color-prettylights-syntax-markup-bold);
127
122
  }
128
- .w-md-editor-text-pre .hr {
129
- color: #999;
123
+ .w-md-editor-text-pre .token.code-block .function {
124
+ color: var(--color-prettylights-syntax-entity);
130
125
  }
131
- .w-md-editor-text-pre .blockquote {
132
- color: #a6a6a6;
133
- }
134
- .w-md-editor-text-pre .title,
135
- .w-md-editor-text-pre .bold {
136
- color: #000 !important;
126
+ .w-md-editor-text-pre .token.bold {
127
+ font-weight: unset !important;
137
128
  }
138
- .w-md-editor-text-pre .title {
129
+ .w-md-editor-text-pre .token.title {
139
130
  line-height: unset !important;
140
131
  font-size: unset !important;
141
132
  font-weight: unset !important;
142
133
  }
143
- .w-md-editor-text-pre .code.keyword {
144
- color: #596394 !important;
134
+ .w-md-editor-text-pre .token.code.keyword {
135
+ color: var(--color-prettylights-syntax-constant) !important;
145
136
  }
146
- .w-md-editor-text-pre .strike {
147
- color: #bf4ca0;
137
+ .w-md-editor-text-pre .token.strike,
138
+ .w-md-editor-text-pre .token.strike .content {
139
+ color: var(--color-prettylights-syntax-markup-deleted-text) !important;
148
140
  }
149
141
  .w-md-editor-toolbar-child {
150
142
  position: absolute;
151
143
  border-radius: 3px;
152
- 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);
153
- background-color: #fff;
144
+ box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
145
+ background-color: var(--color-canvas-default);
154
146
  z-index: 1;
155
147
  display: none;
156
148
  }
@@ -173,8 +165,8 @@
173
165
  margin: 0;
174
166
  }
175
167
  .w-md-editor-toolbar {
176
- border-bottom: 1px solid #dfdfe0;
177
- background-color: #fbfbfb;
168
+ border-bottom: 1px solid var(--color-border-default);
169
+ background-color: var(--color-canvas-default);
178
170
  padding: 0 5px 0 5px;
179
171
  display: flex;
180
172
  justify-content: space-between;
@@ -198,7 +190,6 @@
198
190
  height: 20px;
199
191
  line-height: 14px;
200
192
  background: none;
201
- color: #586069;
202
193
  padding: 4px;
203
194
  margin: 0 1px;
204
195
  border-radius: 2px;
@@ -209,43 +200,44 @@
209
200
  cursor: pointer;
210
201
  transition: all 0.3s;
211
202
  white-space: nowrap;
203
+ color: var(--color-fg-default);
212
204
  }
213
205
  .w-md-editor-toolbar li > button:hover,
214
206
  .w-md-editor-toolbar li > button:focus {
215
- color: #06c;
216
- background-color: #dcdcdc;
207
+ background-color: var(--color-neutral-muted);
208
+ color: var(--color-accent-fg);
217
209
  }
218
210
  .w-md-editor-toolbar li > button:active {
219
- color: #6a57ff;
220
- background-color: #dcdcdc;
211
+ background-color: var(--color-neutral-muted);
212
+ color: var(--color-danger-fg);
221
213
  }
222
214
  .w-md-editor-toolbar li > button:disabled {
223
- color: #ccc;
215
+ color: var(--color-border-default);
224
216
  cursor: not-allowed;
225
217
  }
226
218
  .w-md-editor-toolbar li > button:disabled:hover {
227
219
  background-color: transparent;
228
- color: #ccc;
220
+ color: var(--color-border-default);
229
221
  }
230
222
  .w-md-editor-toolbar li.active > button {
231
- color: #06c;
232
- background-color: #e8e8e8;
223
+ color: var(--color-accent-fg);
224
+ background-color: var(--color-neutral-muted);
233
225
  }
234
226
  .w-md-editor-toolbar-divider {
235
227
  height: 14px;
236
228
  width: 1px;
237
229
  margin: -3px 3px 0 3px !important;
238
230
  vertical-align: middle;
239
- background-color: #ccc;
231
+ background-color: var(--color-border-default);
240
232
  }
241
233
  .w-md-editor {
242
- color: #24292e;
243
234
  text-align: left;
244
- 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);
245
235
  border-radius: 3px;
246
236
  padding-bottom: 1px;
247
237
  position: relative;
248
- background-color: #fff;
238
+ color: var(--color-fg-default);
239
+ box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
240
+ background-color: var(--color-canvas-default);
249
241
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
250
242
  }
251
243
  .w-md-editor-content {
@@ -260,7 +252,7 @@
260
252
  .w-md-editor-preview {
261
253
  width: 50%;
262
254
  box-sizing: border-box;
263
- box-shadow: inset 1px 0 0 0 #dfdfe0;
255
+ box-shadow: inset 1px 0 0 0 var(--color-border-default);
264
256
  position: absolute;
265
257
  padding: 10px 20px;
266
258
  overflow: auto;
@@ -277,7 +269,7 @@
277
269
  .w-md-editor-show-preview .w-md-editor-input {
278
270
  width: 0%;
279
271
  overflow: hidden;
280
- background-color: #fdfdfd;
272
+ background-color: var(--color-canvas-default);
281
273
  }
282
274
  .w-md-editor-show-preview .w-md-editor-preview {
283
275
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-md-editor",
3
- "version": "3.10.2",
3
+ "version": "3.11.0",
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>",
@@ -51,13 +51,14 @@
51
51
  "@types/react-test-renderer": "~17.0.1",
52
52
  "@uiw/react-github-corners": "~1.5.3",
53
53
  "@uiw/react-shields": "~1.1.2",
54
+ "@wcj/dark-mode": "~1.0.9",
54
55
  "compile-less-cli": "~1.8.11",
55
56
  "katex": "~0.15.2",
56
57
  "husky": "~7.0.4",
57
58
  "kkt": "~7.1.5",
58
59
  "lint-staged": "~12.3.4",
59
60
  "mermaid": "~8.14.0",
60
- "prettier": "~2.5.1",
61
+ "prettier": "~2.6.0",
61
62
  "react": "~17.0.2",
62
63
  "react-dom": "~17.0.2",
63
64
  "react-test-renderer": "~17.0.2",
@@ -66,7 +67,7 @@
66
67
  },
67
68
  "dependencies": {
68
69
  "@babel/runtime": "^7.14.6",
69
- "@uiw/react-markdown-preview": "~3.5.0",
70
+ "@uiw/react-markdown-preview": "~4.0.5",
70
71
  "rehype-sanitize": "~5.0.1",
71
72
  "rehype": "~12.0.1"
72
73
  },
package/src/Editor.tsx CHANGED
@@ -184,6 +184,7 @@ const InternalMDEditor = (
184
184
 
185
185
  const cls = [
186
186
  className,
187
+ 'wmde-markdown-var',
187
188
  prefixCls,
188
189
  state.preview ? `${prefixCls}-show-${state.preview}` : null,
189
190
  state.fullscreen ? `${prefixCls}-fullscreen` : null,
package/src/__test__/editor.test.tsx CHANGED
@@ -14,7 +14,7 @@ it('MDEditor', () => {
14
14
  let tree = component.toJSON();
15
15
  if (tree && !Array.isArray(tree)) {
16
16
  expect(tree.type).toEqual('div');
17
- expect(tree.props.className).toEqual('w-md-editor w-md-editor-show-live');
17
+ expect(tree.props.className).toEqual('wmde-markdown-var w-md-editor w-md-editor-show-live');
18
18
  expect(tree.props.style).toMatchObject({
19
19
  height: 200,
20
20
  });
package/src/components/TextArea/Markdown.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { useContext, useEffect, useMemo } from 'react';
2
2
  import { rehype } from 'rehype';
3
- // @ts-ignore
4
- import rehypePrism from '@mapbox/rehype-prism';
3
+ import rehypePrism from 'rehype-prism-plus';
5
4
  import { IProps } from '../../Editor';
6
5
  import { EditorContext } from '../../Context';
7
6
 
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,13 +1,14 @@
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;
12
13
  &-content {
13
14
  position: relative;
@@ -21,7 +22,7 @@
21
22
  &-preview {
22
23
  width: 50%;
23
24
  box-sizing: border-box;
24
- box-shadow: inset 1px 0 0 0 #dfdfe0;
25
+ box-shadow: inset 1px 0 0 0 var(--color-border-default);
25
26
  position: absolute;
26
27
  padding: 10px 20px;
27
28
  overflow: auto;
@@ -38,7 +39,7 @@
38
39
  &-show-preview &-input {
39
40
  width: 0%;
40
41
  overflow: hidden;
41
- background-color: #fdfdfd;
42
+ background-color: var(--color-canvas-default);
42
43
  }
43
44
  &-show-preview &-preview {
44
45
  width: 100%;