|
1 | 1 | export const markup = ` |
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'; |
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 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} |
125 | | -
|
126 | | -{% cut "Headings" %} |
127 | | -
|
128 | | -# Heading 1 |
129 | | -
|
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 | | -{% endcut %} |
149 | | -
|
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 | 4 | #| |
168 | 5 | || |
169 | 6 |
|
@@ -247,34 +84,6 @@ New approaches to learning in the digital age |
247 | 84 | || |
248 | 85 | |# |
249 | 86 |
|
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 | | ---- |
277 | | -
|
278 | 87 | `.trim(); |
279 | 88 |
|
280 | 89 | export const loremIpsum = ` |
|
0 commit comments