@idealyst/markdown 1.2.38 → 1.2.39
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/package.json +74 -5
- package/src/Editor/EditorToolbar.web.tsx +90 -0
- package/src/Editor/MarkdownEditor.native.tsx +262 -0
- package/src/Editor/MarkdownEditor.styles.ts +227 -0
- package/src/Editor/MarkdownEditor.web.tsx +331 -0
- package/src/Editor/examples/MarkdownEditorExamples.tsx +205 -0
- package/src/Editor/examples/index.ts +1 -0
- package/src/Editor/index.native.ts +23 -0
- package/src/Editor/index.ts +43 -0
- package/src/Editor/types.ts +193 -0
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
import type { Size, Intent } from '@idealyst/theme';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Toolbar item types available in the editor
|
|
6
|
+
*/
|
|
7
|
+
export type ToolbarItem =
|
|
8
|
+
| 'bold'
|
|
9
|
+
| 'italic'
|
|
10
|
+
| 'underline'
|
|
11
|
+
| 'strikethrough'
|
|
12
|
+
| 'code'
|
|
13
|
+
| 'heading1'
|
|
14
|
+
| 'heading2'
|
|
15
|
+
| 'heading3'
|
|
16
|
+
| 'bulletList'
|
|
17
|
+
| 'orderedList'
|
|
18
|
+
| 'taskList'
|
|
19
|
+
| 'blockquote'
|
|
20
|
+
| 'codeBlock'
|
|
21
|
+
| 'horizontalRule'
|
|
22
|
+
| 'link'
|
|
23
|
+
| 'image'
|
|
24
|
+
| 'undo'
|
|
25
|
+
| 'redo';
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Toolbar configuration
|
|
29
|
+
*/
|
|
30
|
+
export interface ToolbarConfig {
|
|
31
|
+
/**
|
|
32
|
+
* Items to show in the toolbar
|
|
33
|
+
* @default ['bold', 'italic', 'underline', 'strikethrough', 'code', 'heading1', 'heading2', 'bulletList', 'orderedList', 'blockquote', 'codeBlock', 'link']
|
|
34
|
+
*/
|
|
35
|
+
items?: ToolbarItem[];
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Whether to show the toolbar
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
visible?: boolean;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Toolbar position
|
|
45
|
+
* @default 'top'
|
|
46
|
+
*/
|
|
47
|
+
position?: 'top' | 'bottom';
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Editor ref methods available to parent components
|
|
52
|
+
*/
|
|
53
|
+
export interface MarkdownEditorRef {
|
|
54
|
+
/**
|
|
55
|
+
* Get the current markdown content
|
|
56
|
+
*/
|
|
57
|
+
getMarkdown: () => Promise<string>;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Set the markdown content
|
|
61
|
+
*/
|
|
62
|
+
setMarkdown: (markdown: string) => void;
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Focus the editor
|
|
66
|
+
*/
|
|
67
|
+
focus: () => void;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Blur the editor
|
|
71
|
+
*/
|
|
72
|
+
blur: () => void;
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Check if editor has content
|
|
76
|
+
*/
|
|
77
|
+
isEmpty: () => Promise<boolean>;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Clear all content
|
|
81
|
+
*/
|
|
82
|
+
clear: () => void;
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Undo last action
|
|
86
|
+
*/
|
|
87
|
+
undo: () => void;
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Redo last undone action
|
|
91
|
+
*/
|
|
92
|
+
redo: () => void;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* MarkdownEditor component props
|
|
97
|
+
*/
|
|
98
|
+
export interface MarkdownEditorProps {
|
|
99
|
+
/**
|
|
100
|
+
* Initial markdown content
|
|
101
|
+
*/
|
|
102
|
+
initialValue?: string;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Controlled value (makes the component controlled)
|
|
106
|
+
*/
|
|
107
|
+
value?: string;
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Called when content changes with the markdown string
|
|
111
|
+
*/
|
|
112
|
+
onChange?: (markdown: string) => void;
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Called when the editor gains focus
|
|
116
|
+
*/
|
|
117
|
+
onFocus?: () => void;
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Called when the editor loses focus
|
|
121
|
+
*/
|
|
122
|
+
onBlur?: () => void;
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Whether the editor is editable
|
|
126
|
+
* @default true
|
|
127
|
+
*/
|
|
128
|
+
editable?: boolean;
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Whether to autofocus on mount
|
|
132
|
+
* @default false
|
|
133
|
+
*/
|
|
134
|
+
autoFocus?: boolean;
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Placeholder text when editor is empty
|
|
138
|
+
*/
|
|
139
|
+
placeholder?: string;
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Toolbar configuration
|
|
143
|
+
*/
|
|
144
|
+
toolbar?: ToolbarConfig;
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Text size variant
|
|
148
|
+
* @default 'md'
|
|
149
|
+
*/
|
|
150
|
+
size?: Size;
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Link color intent
|
|
154
|
+
* @default 'primary'
|
|
155
|
+
*/
|
|
156
|
+
linkIntent?: Intent;
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Minimum height of the editor
|
|
160
|
+
*/
|
|
161
|
+
minHeight?: number;
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* Maximum height of the editor (enables scrolling)
|
|
165
|
+
*/
|
|
166
|
+
maxHeight?: number;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Container style
|
|
170
|
+
*/
|
|
171
|
+
style?: StyleProp<ViewStyle>;
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Test identifier
|
|
175
|
+
*/
|
|
176
|
+
testID?: string;
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Unique identifier
|
|
180
|
+
*/
|
|
181
|
+
id?: string;
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Accessibility label
|
|
185
|
+
*/
|
|
186
|
+
accessibilityLabel?: string;
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Native only: Avoid iOS keyboard by adding padding
|
|
190
|
+
* @default true
|
|
191
|
+
*/
|
|
192
|
+
avoidIosKeyboard?: boolean;
|
|
193
|
+
}
|