@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/README.md CHANGED
@@ -5,12 +5,22 @@
5
5
  </p>
6
6
 
7
7
  <p align="center">
8
- <a href="https://github.com/uiwjs/react-md-editor/actions" target="__blank">
9
- <img alt="Build & Deploy" src="https://github.com/uiwjs/react-md-editor/actions/workflows/ci.yml/badge.svg">
10
- </a>
11
8
  <a href="https://www.npmjs.com/package/@uiw/react-md-editor" target="__blank">
12
9
  <img alt="Downloads" src="https://img.shields.io/npm/dm/@uiw/react-md-editor.svg?style=flat">
13
10
  </a>
11
+ <a href="https://www.jsdelivr.com/package/npm/@uiw/react-md-editor" target="__blank">
12
+ <img alt="jsDelivr CDN" src="https://data.jsdelivr.com/v1/package/npm/@uiw/react-md-editor/badge?style=rounded" />
13
+ </a>
14
+ <a href="https://bundlephobia.com/package/@uiw/react-md-editor" target="__blank">
15
+ <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@uiw/react-md-editor">
16
+ </a>
17
+ <a href="https://uiwjs.github.io/react-md-editor/coverage/lcov-report" target="__blank">
18
+ <img alt="Coverage Status" src="https://uiwjs.github.io/react-md-editor/coverage/badges.svg" />
19
+ </a>
20
+ <br />
21
+ <a href="https://github.com/uiwjs/react-md-editor/actions" target="__blank">
22
+ <img alt="Build & Deploy" src="https://github.com/uiwjs/react-md-editor/actions/workflows/ci.yml/badge.svg" />
23
+ </a>
14
24
  <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/README.md" target="__blank">
15
25
  <img src="https://img.shields.io/badge/Open%20in-unpkg-blue" alt="Open in unpkg">
16
26
  </a>
@@ -20,12 +30,6 @@
20
30
  <a href="https://www.npmjs.com/package/@uiw/react-md-editor" target="__blank">
21
31
  <img alt="npm version" src="https://img.shields.io/npm/v/@uiw/react-md-editor.svg">
22
32
  </a>
23
- <a href="https://bundlephobia.com/package/@uiw/react-md-editor" target="__blank">
24
- <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@uiw/react-md-editor">
25
- </a>
26
- <a href="https://uiwjs.github.io/react-md-editor/coverage/lcov-report" target="__blank">
27
- <img alt="Coverage Status" src="https://uiwjs.github.io/react-md-editor/coverage/badges.svg" />
28
- </a>
29
33
  </p>
30
34
 
31
35
  <!--dividing-->
@@ -39,6 +43,7 @@ A simple markdown editor with preview, implemented with React.js and TypeScript.
39
43
  - 🚧 Does not depend on the [`uiw`](https://github.com/uiwjs/uiw) component library.
40
44
  - 🚘 Automatic list on new lines.
41
45
  - 😻 GitHub flavored markdown support.
46
+ - 🌒 Support dark-mode/night-mode **@v3.11.0+**.
42
47
  - 💡 Support [next.js](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341), [Use examples](#support-nextjs) in [next.js](https://nextjs.org/).
43
48
 
44
49
  ### Quick Start
@@ -448,6 +453,28 @@ function HomePage() {
448
453
  export default HomePage;
449
454
  ```
450
455
 
456
+ ### Support dark-mode/night-mode
457
+
458
+ By default, the [`dark-mode`](https://github.com/jaywcjlove/dark-mode/) is automatically switched according to the system. If you need to switch manually, just set the `data-color-mode="dark"` parameter for body.
459
+
460
+ ```html
461
+ <html data-color-mode="dark">
462
+ ```
463
+
464
+ ```js
465
+ document.documentElement.setAttribute('data-color-mode', 'dark')
466
+ document.documentElement.setAttribute('data-color-mode', 'light')
467
+ ```
468
+
469
+ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.com/uiwjs/react-markdown-preview/blob/a53be1e93fb1c2327649c4a6b084adb80679affa/src/styles/markdown.less#L1-L193) selector. Setting theme styles with `data-color-mode="light"`.
470
+
471
+ ```html
472
+ <div data-color-mode="light">
473
+ <div className="wmde-markdown-var"> </div>
474
+ <MDEditor source="Hello World!" />
475
+ </div>
476
+ ```
477
+
451
478
  ### Props
452
479
 
453
480
  - `value: string`: The Markdown value.