@uiw/react-md-editor 4.0.8 → 4.0.10
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.
- package/README.md +96 -28
- package/dist/mdeditor.css +1 -1
- package/dist/mdeditor.js +178 -222
- package/dist/mdeditor.min.js +1 -1
- package/esm/Editor.d.ts +1 -1
- package/esm/Editor.nohighlight.d.ts +1 -1
- package/esm/components/DragBar/index.d.ts +1 -1
- package/esm/components/TextArea/Markdown.d.ts +1 -1
- package/esm/components/TextArea/Textarea.d.ts +1 -1
- package/esm/components/TextArea/index.d.ts +4 -4
- package/esm/components/TextArea/index.nohighlight.d.ts +3 -3
- package/esm/components/Toolbar/Child.d.ts +1 -1
- package/esm/components/Toolbar/index.d.ts +1 -1
- package/esm/index.css +1 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/index.nohighlight.d.ts +3 -0
- package/esm/index.nohighlight.js +3 -0
- package/lib/Editor.d.ts +1 -1
- package/lib/Editor.nohighlight.d.ts +1 -1
- package/lib/components/DragBar/index.d.ts +1 -1
- package/lib/components/TextArea/Markdown.d.ts +1 -1
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/index.d.ts +4 -4
- package/lib/components/TextArea/index.nohighlight.d.ts +3 -3
- package/lib/components/Toolbar/Child.d.ts +1 -1
- package/lib/components/Toolbar/index.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +18 -1
- package/lib/index.nohighlight.d.ts +3 -0
- package/lib/index.nohighlight.js +26 -1
- package/markdown-editor.css +1 -0
- package/package.json +1 -1
- package/src/Editor.nohighlight.tsx +2 -2
- package/src/Editor.tsx +3 -3
- package/src/components/DragBar/index.tsx +1 -1
- package/src/components/TextArea/Markdown.tsx +1 -1
- package/src/components/TextArea/Textarea.tsx +2 -2
- package/src/components/TextArea/index.nohighlight.tsx +5 -4
- package/src/components/TextArea/index.tsx +6 -5
- package/src/components/Toolbar/Child.tsx +1 -1
- package/src/components/Toolbar/index.tsx +2 -2
- package/src/index.nohighlight.tsx +3 -0
- package/src/index.tsx +2 -0
package/README.md
CHANGED
|
@@ -1,33 +1,36 @@
|
|
|
1
1
|
<div markdown="1">
|
|
2
2
|
<sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
|
|
3
3
|
<br>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<
|
|
4
|
+
<a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
|
|
5
|
+
<a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
|
|
6
|
+
<a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
|
|
7
|
+
<a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
|
|
8
|
+
<a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
|
|
9
|
+
<a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
|
|
10
|
+
<a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
|
|
11
|
+
<a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
|
|
12
|
+
<a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
|
|
13
|
+
<a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
|
|
14
|
+
<a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
|
|
15
|
+
<a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
|
|
16
|
+
<a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
|
|
17
|
+
<a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
|
|
18
|
+
<a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
|
|
19
|
+
<a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
|
|
20
|
+
<a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
|
|
21
|
+
<a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
|
|
22
|
+
<a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
|
|
23
|
+
<a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
|
|
24
|
+
<a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
|
|
25
|
+
<a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
|
|
26
|
+
<a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
|
|
27
|
+
<a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
|
|
28
|
+
<a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
|
|
29
|
+
<a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
|
|
30
|
+
<a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
|
|
31
|
+
<a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
|
|
32
|
+
<a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
|
|
33
|
+
<a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
|
|
31
34
|
</div>
|
|
32
35
|
<hr>
|
|
33
36
|
|
|
@@ -118,6 +121,49 @@ export default function App() {
|
|
|
118
121
|
}
|
|
119
122
|
```
|
|
120
123
|
|
|
124
|
+
### Headless Mode
|
|
125
|
+
|
|
126
|
+
The package exposes the necessary utilities to build a headless markdown editor with your own UI. This example creates a simple textarea that supports markdown keyboard shortcuts and correct handling of newlines.
|
|
127
|
+
|
|
128
|
+
```jsx mdx:preview
|
|
129
|
+
import React from "react";
|
|
130
|
+
import {
|
|
131
|
+
handleKeyDown,
|
|
132
|
+
shortcuts,
|
|
133
|
+
TextAreaCommandOrchestrator,
|
|
134
|
+
getCommands,
|
|
135
|
+
} from '@uiw/react-md-editor';
|
|
136
|
+
|
|
137
|
+
export default function App() {
|
|
138
|
+
const [value, setValue] = React.useState("**Hello world!!!**");
|
|
139
|
+
const textareaRef = React.useRef(null);
|
|
140
|
+
const orchestratorRef = React.useRef(null);
|
|
141
|
+
|
|
142
|
+
React.useEffect(() => {
|
|
143
|
+
if (textareaRef.current) {
|
|
144
|
+
orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);
|
|
145
|
+
}
|
|
146
|
+
}, []);
|
|
147
|
+
|
|
148
|
+
const onKeyDown = (e) => {
|
|
149
|
+
handleKeyDown(e, 2, false);
|
|
150
|
+
if (orchestratorRef.current) {
|
|
151
|
+
shortcuts(e, getCommands(), orchestratorRef.current);
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
return (
|
|
156
|
+
<textarea
|
|
157
|
+
ref={textareaRef}
|
|
158
|
+
value={value}
|
|
159
|
+
onChange={(e) => setValue(e.target.value)}
|
|
160
|
+
onKeyDown={onKeyDown}
|
|
161
|
+
style={{ width: '100%', height: 200, padding: 10 }}
|
|
162
|
+
/>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
121
167
|
### Special Markdown syntax
|
|
122
168
|
|
|
123
169
|
**Supports for CSS Style**
|
|
@@ -586,6 +632,27 @@ export default function App() {
|
|
|
586
632
|
}
|
|
587
633
|
```
|
|
588
634
|
|
|
635
|
+
Set to support editor only
|
|
636
|
+
|
|
637
|
+
```jsx mdx:preview
|
|
638
|
+
import React, { useContext } from "react";
|
|
639
|
+
import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
|
|
640
|
+
|
|
641
|
+
export default function App() {
|
|
642
|
+
const [value, setValue] = React.useState("**Hello world!!!**");
|
|
643
|
+
return (
|
|
644
|
+
<div className="container">
|
|
645
|
+
<MDEditor
|
|
646
|
+
value={value}
|
|
647
|
+
preview="edit"
|
|
648
|
+
extraCommands={[commands.fullscreen]}
|
|
649
|
+
onChange={(val) => setValue(val)}
|
|
650
|
+
/>
|
|
651
|
+
</div>
|
|
652
|
+
);
|
|
653
|
+
}
|
|
654
|
+
```
|
|
655
|
+
|
|
589
656
|
### Editor Font Size
|
|
590
657
|
|
|
591
658
|
[](https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark)
|
|
@@ -780,7 +847,7 @@ export default function App() {
|
|
|
780
847
|
|
|
781
848
|
```tsx mdx:preview
|
|
782
849
|
import React, { useState } from "react";
|
|
783
|
-
import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
|
|
850
|
+
import MDEditor, { commands, type ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
|
|
784
851
|
import domToImage from "dom-to-image";
|
|
785
852
|
|
|
786
853
|
const textToImage: ICommand = {
|
|
@@ -1082,6 +1149,7 @@ As always, thanks to our amazing contributors!
|
|
|
1082
1149
|
<a href="https://github.com/peterj" title="Peter Jausovec"><img src="https://avatars.githubusercontent.com/u/11080940?v=4" width="42;" alt="Peter Jausovec"/></a>
|
|
1083
1150
|
<a href="https://github.com/phillipb" title="Phillip Burch"><img src="https://avatars.githubusercontent.com/u/1482089?v=4" width="42;" alt="Phillip Burch"/></a>
|
|
1084
1151
|
<a href="https://github.com/psycho-baller" title="Rami Maalouf"><img src="https://avatars.githubusercontent.com/u/81759594?v=4" width="42;" alt="Rami Maalouf"/></a>
|
|
1152
|
+
<a href="https://github.com/Stopa" title="Stepan Bolotnikov"><img src="https://avatars.githubusercontent.com/u/408256?v=4" width="42;" alt="Stepan Bolotnikov"/></a>
|
|
1085
1153
|
<a href="https://github.com/toresbe" title="Tore Sinding Bekkedal"><img src="https://avatars.githubusercontent.com/u/1761606?v=4" width="42;" alt="Tore Sinding Bekkedal"/></a>
|
|
1086
1154
|
<a href="https://github.com/valenfv" title="Valentin"><img src="https://avatars.githubusercontent.com/u/34139820?v=4" width="42;" alt="Valentin"/></a>
|
|
1087
1155
|
<a href="https://github.com/jmtes" title="juno tesoro"><img src="https://avatars.githubusercontent.com/u/38450133?v=4" width="42;" alt="juno tesoro"/></a>
|
package/dist/mdeditor.css
CHANGED