@uiw/react-md-editor 4.0.8 → 4.0.9
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 +95 -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/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/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.tsx +2 -0
package/README.md
CHANGED
|
@@ -1,33 +1,35 @@
|
|
|
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/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
|
|
5
|
+
<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>
|
|
6
|
+
<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>
|
|
7
|
+
<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>
|
|
8
|
+
<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>
|
|
9
|
+
<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>
|
|
10
|
+
<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>
|
|
11
|
+
<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>
|
|
12
|
+
<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>
|
|
13
|
+
<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>
|
|
14
|
+
<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>
|
|
15
|
+
<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>
|
|
16
|
+
<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>
|
|
17
|
+
<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>
|
|
18
|
+
<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>
|
|
19
|
+
<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>
|
|
20
|
+
<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>
|
|
21
|
+
<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>
|
|
22
|
+
<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>
|
|
23
|
+
<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>
|
|
24
|
+
<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>
|
|
25
|
+
<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>
|
|
26
|
+
<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>
|
|
27
|
+
<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>
|
|
28
|
+
<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>
|
|
29
|
+
<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>
|
|
30
|
+
<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>
|
|
31
|
+
<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>
|
|
32
|
+
<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
33
|
</div>
|
|
32
34
|
<hr>
|
|
33
35
|
|
|
@@ -118,6 +120,49 @@ export default function App() {
|
|
|
118
120
|
}
|
|
119
121
|
```
|
|
120
122
|
|
|
123
|
+
### Headless Mode
|
|
124
|
+
|
|
125
|
+
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.
|
|
126
|
+
|
|
127
|
+
```jsx mdx:preview
|
|
128
|
+
import React from "react";
|
|
129
|
+
import {
|
|
130
|
+
handleKeyDown,
|
|
131
|
+
shortcuts,
|
|
132
|
+
TextAreaCommandOrchestrator,
|
|
133
|
+
getCommands,
|
|
134
|
+
} from '@uiw/react-md-editor';
|
|
135
|
+
|
|
136
|
+
export default function App() {
|
|
137
|
+
const [value, setValue] = React.useState("**Hello world!!!**");
|
|
138
|
+
const textareaRef = React.useRef(null);
|
|
139
|
+
const orchestratorRef = React.useRef(null);
|
|
140
|
+
|
|
141
|
+
React.useEffect(() => {
|
|
142
|
+
if (textareaRef.current) {
|
|
143
|
+
orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);
|
|
144
|
+
}
|
|
145
|
+
}, []);
|
|
146
|
+
|
|
147
|
+
const onKeyDown = (e) => {
|
|
148
|
+
handleKeyDown(e, 2, false);
|
|
149
|
+
if (orchestratorRef.current) {
|
|
150
|
+
shortcuts(e, getCommands(), orchestratorRef.current);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
return (
|
|
155
|
+
<textarea
|
|
156
|
+
ref={textareaRef}
|
|
157
|
+
value={value}
|
|
158
|
+
onChange={(e) => setValue(e.target.value)}
|
|
159
|
+
onKeyDown={onKeyDown}
|
|
160
|
+
style={{ width: '100%', height: 200, padding: 10 }}
|
|
161
|
+
/>
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
121
166
|
### Special Markdown syntax
|
|
122
167
|
|
|
123
168
|
**Supports for CSS Style**
|
|
@@ -586,6 +631,27 @@ export default function App() {
|
|
|
586
631
|
}
|
|
587
632
|
```
|
|
588
633
|
|
|
634
|
+
Set to support editor only
|
|
635
|
+
|
|
636
|
+
```jsx mdx:preview
|
|
637
|
+
import React, { useContext } from "react";
|
|
638
|
+
import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
|
|
639
|
+
|
|
640
|
+
export default function App() {
|
|
641
|
+
const [value, setValue] = React.useState("**Hello world!!!**");
|
|
642
|
+
return (
|
|
643
|
+
<div className="container">
|
|
644
|
+
<MDEditor
|
|
645
|
+
value={value}
|
|
646
|
+
preview="edit"
|
|
647
|
+
extraCommands={[commands.fullscreen]}
|
|
648
|
+
onChange={(val) => setValue(val)}
|
|
649
|
+
/>
|
|
650
|
+
</div>
|
|
651
|
+
);
|
|
652
|
+
}
|
|
653
|
+
```
|
|
654
|
+
|
|
589
655
|
### Editor Font Size
|
|
590
656
|
|
|
591
657
|
[](https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark)
|
|
@@ -780,7 +846,7 @@ export default function App() {
|
|
|
780
846
|
|
|
781
847
|
```tsx mdx:preview
|
|
782
848
|
import React, { useState } from "react";
|
|
783
|
-
import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
|
|
849
|
+
import MDEditor, { commands, type ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
|
|
784
850
|
import domToImage from "dom-to-image";
|
|
785
851
|
|
|
786
852
|
const textToImage: ICommand = {
|
|
@@ -1082,6 +1148,7 @@ As always, thanks to our amazing contributors!
|
|
|
1082
1148
|
<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
1149
|
<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
1150
|
<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>
|
|
1151
|
+
<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
1152
|
<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
1153
|
<a href="https://github.com/valenfv" title="Valentin"><img src="https://avatars.githubusercontent.com/u/34139820?v=4" width="42;" alt="Valentin"/></a>
|
|
1087
1154
|
<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