|
1 | 1 | export const initialMdContent = ` |
2 | 2 | |
3 | 3 |
|
4 | | -Welcome to the editor! Start typing the character \`/\` |
5 | | -
|
6 | | - |
7 | | -
|
8 | | -## Markdown WYSIWYG and markup editor |
9 | | -
|
10 | | -MarkdownEditor is a powerful tool for working with Markdown, which combines WYSIWYG and Markup modes. This means that you can create and edit content in a convenient visual mode, as well as have full control over the markup. |
11 | | -
|
12 | | -The editor supports following formats: |
13 | | -
|
14 | | -* WYSIWYG |
15 | | -
|
16 | | -* markup |
17 | | -
|
18 | | -Click on the gear in the upper right corner to change the mode and see the \`md\` markup. |
19 | | -
|
20 | | -### Various blocks included |
21 | | -
|
22 | | -{% cut "Combine different blocks" %} |
23 | | -
|
24 | | -{% note info "Block for notes, tips, warnings, and alerts" %} |
25 | | -
|
26 | | -Depending on the content, notes with different titles and formats are used: |
27 | | -
|
28 | | -* Note: provides additional information. |
29 | | -* Tip: offers a recommendation. |
30 | | -* Warning: issues a warning. |
31 | | -* Alert: indicates a restriction. |
32 | | -
|
33 | | -{% endnote %} |
34 | | -
|
35 | | -> [Improve](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-preview.md) the editor interface |
36 | | -> |
37 | | -> *improved by you* |
38 | | -
|
39 | | -{% endcut %} |
40 | | -
|
41 | | -Or write your extension using a [convenient api](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-create-extension.md) |
42 | | -
|
43 | | -### A user-friendly API is provided |
44 | | -
|
45 | | -Easily connect to your React app with a hook: |
46 | | -
|
47 | | -\`\`\`plaintext |
48 | | -import React from 'react'; |
49 | | -import { useMarkdownEditor, MarkdownEditorView } from '@gravity-ui/markdown-editor'; |
50 | | -import { toaster } from '@gravity-ui/uikit/toaster-singleton-react-18'; |
51 | | -
|
52 | | -function Editor({ onSubmit }) { |
53 | | - const editor = useMarkdownEditor({ allowHTML: false }); |
54 | | -
|
55 | | - React.useEffect(() => { |
56 | | - function submitHandler() { |
57 | | - // Serialize current content to markdown markup |
58 | | - const value = editor.getValue(); |
59 | | - onSubmit(value); |
60 | | - } |
61 | | -
|
62 | | - editor.on('submit', submitHandler); |
63 | | - return () => { |
64 | | - editor.off('submit', submitHandler); |
65 | | - }; |
66 | | - }, [onSubmit]); |
67 | | -
|
68 | | - return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />; |
69 | | -} |
70 | | -\`\`\` |
71 | | -
|
72 | | -### Convenient UX control is equipped |
73 | | -
|
74 | | -#### Hot keys |
75 | | -
|
76 | | -{% list tabs %} |
77 | | -
|
78 | | -- WYSIWYG mode |
79 | | -
|
80 | | -
|
81 | | -
|
82 | | - |Formatting|Windows Shortcut|Mac OS Shortcut| |
83 | | - |:---|:---|:---| |
84 | | - |Bold text|Ctrl \\+ B|⌘ \\+ B| |
85 | | - |Italic|Ctrl \\+ I|⌘ \\+ I| |
86 | | - |Underlined text|Ctrl \\+ U|⌘ \\+ U| |
87 | | - |Strikethrough text|Ctrl \\+ Shift \\+ S|⌘ \\+ Shift \\+ S| |
88 | | -
|
89 | | -- Markup mode |
90 | | -
|
91 | | -
|
92 | | -
|
93 | | - |Formatting|Markup|Result| |
94 | | - |:---|:---|:---| |
95 | | - |Bold text|\`**Bold**\`|**Bold**| |
96 | | - |Italic|\`*Italic*\`|*Italic*| |
97 | | - |Underlined text|\`++Underlined++\`|++Underlined++| |
98 | | - |Strikethrough text|\`~~Strikethrough~~\`|~~Strikethrough~~| |
99 | | -
|
100 | | -{% endlist %} |
101 | | -
|
102 | | -#### Context menu |
103 | | -
|
104 | | -Select this text and you will see **a context menu**. |
105 | | -
|
106 | | -#### Auto-conversion |
107 | | -
|
108 | | -Quickly create blocks by entering characters that will be replaced by blocks. For example, the automatic conversion of \`-\` and space creates a list, \`>\` and space creates a quote. Try it out. |
109 | | -
|
110 | | ---- |
111 | | -
|
112 | | -### Current and future features |
113 | | -
|
114 | | -[X] Some already finished things |
115 | | -
|
116 | | -[ ] VS Code plugin |
117 | | -
|
118 | | -[ ] Mobile version |
119 | | -
|
120 | | -### And a multitude of other functionalities :sweat_smile: :fire: |
121 | | -
|
122 | | -See <https://github.com/gravity-ui/markdown-editor> |
123 | | -
|
124 | | -# More examples {#anchor} |
| 4 | +# Select me |
125 | 5 |
|
126 | 6 | {% cut "Headings" %} |
127 | 7 |
|
128 | 8 | # Heading 1 |
129 | 9 |
|
130 | | -## Heading 2 |
131 | | -
|
132 | | -### Heading 3 |
133 | | -
|
134 | | -#### Heading 4 |
135 | | -
|
136 | | -##### Heading 5 |
137 | | -
|
138 | | -###### Heading 6 |
139 | | -
|
140 | | -{% endcut %} |
141 | | -
|
142 | | -{% cut "This is a cut heading" %} |
143 | | -
|
144 | | -**A** *here* ~~it~~ ++is awesome++ ^c^~o~^n^~t~^e^~n~^t^ |
145 | | -
|
146 | | -> Done deal - deal done \`(quote)\` |
147 | | -
|
148 | 10 | {% endcut %} |
149 | 11 |
|
150 | | -{% cut "Formulas" %} |
151 | | -
|
152 | | -This is an inline formula: $\\sqrt{3x-1}+(1+x)^2$ |
153 | | -
|
154 | | -And here is a block formula: |
155 | | -
|
156 | | -$$f(\\relax{x}) = \\int_{-\\infty}^\\infty |
157 | | - \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} |
158 | | - \\,d\\xi |
159 | | -$$ |
160 | | -
|
161 | | -*Click on the formula to edit it* |
162 | | -
|
163 | | -{% endcut %} |
164 | | -
|
165 | | ---- |
166 | | -
|
167 | | -#| |
168 | | -|| |
169 | | -
|
170 | | -Category |
171 | | -
|
172 | | -| |
173 | | -
|
174 | | -Subcategory |
175 | | -
|
176 | | -| |
177 | | -
|
178 | | -Description |
179 | | -
|
180 | | -|| |
181 | | -|| |
182 | | -
|
183 | | -**Technology** |
184 | | -
|
185 | | -| |
186 | | -
|
187 | | -==Programming== |
188 | | -
|
189 | | -| |
190 | | -
|
191 | | -***Innovative coding techniques and tools*** |
192 | | -
|
193 | | -|| |
194 | | -|| |
195 | | -
|
196 | | -**Science** |
197 | | -
|
198 | | -| |
199 | | -
|
200 | | -==Physics== |
201 | | -
|
202 | | -| |
203 | | -
|
204 | | -Understanding the laws of the universe and fundamental forces |
205 | | -
|
206 | | -|| |
207 | | -|| |
208 | | -
|
209 | | -**Literature** |
210 | | -
|
211 | | -| |
212 | | -
|
213 | | -==Fiction== |
214 | | -
|
215 | | -| |
216 | | -
|
217 | | -Exploring imaginary worlds and character-driven stories |
218 | | -
|
219 | | -|| |
220 | | -|| |
221 | | -
|
222 | | -**Education** |
223 | | -
|
224 | | -| |
225 | | -
|
226 | | -==E-learning== |
227 | | -
|
228 | | -| |
229 | | -
|
230 | | -!!!!!!!!!!!!!!!!!!!!!!!! |
231 | | -
|
232 | | -New approaches to learning in the digital age |
233 | | -
|
234 | | -|| |
235 | | -|| |
236 | | -
|
237 | | -**Health** |
238 | | -
|
239 | | -| |
240 | | -
|
241 | | -==Nutrition== |
242 | | -
|
243 | | -| |
244 | | -
|
245 | | -~~++Balanced diets++~~ for a healthy lifestyle |
246 | | -
|
247 | | -|| |
248 | | -|# |
249 | | -
|
250 | | ---- |
251 | | -
|
252 | | -{% note info "Attention, please!" %} |
253 | | -
|
254 | | -* Thank |
255 | | -
|
256 | | - 1. you |
257 | | -
|
258 | | - 2. for |
259 | | -
|
260 | | - 1. your |
261 | | -
|
262 | | - 3. attention |
263 | | -
|
264 | | -* (nested lists) |
265 | | -
|
266 | | -> > > Quotes |
267 | | -> > |
268 | | -> > Nested |
269 | | -> |
270 | | -> As well |
271 | | -
|
272 | | -And ##monospace## can be **##com##**##bined\\*## |
273 | | -
|
274 | | -{% endnote %} |
275 | | -
|
276 | 12 | --- |
277 | 13 |
|
278 | 14 | `.trim(); |
0 commit comments