@overlap/rte 0.1.1 → 0.1.2

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.
Files changed (33) hide show
  1. package/README.md +62 -68
  2. package/dist/components/Editor.d.ts.map +1 -1
  3. package/dist/components/Icons.d.ts +3 -1
  4. package/dist/components/Icons.d.ts.map +1 -1
  5. package/dist/index.d.ts +59 -45
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.esm.js +470 -197
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +472 -196
  10. package/dist/index.js.map +1 -1
  11. package/dist/plugins/blockFormat.d.ts +7 -0
  12. package/dist/plugins/blockFormat.d.ts.map +1 -0
  13. package/dist/plugins/headings.d.ts +1 -1
  14. package/dist/plugins/headings.d.ts.map +1 -1
  15. package/dist/plugins/index.d.ts +8 -2
  16. package/dist/plugins/index.d.ts.map +1 -1
  17. package/dist/plugins/listIndent.d.ts +10 -0
  18. package/dist/plugins/listIndent.d.ts.map +1 -0
  19. package/dist/plugins/optional.d.ts +1 -1
  20. package/dist/plugins/optional.d.ts.map +1 -1
  21. package/dist/types.d.ts +2 -0
  22. package/dist/types.d.ts.map +1 -1
  23. package/package.json +17 -5
  24. package/src/components/Editor.tsx +92 -49
  25. package/src/components/Icons.tsx +306 -77
  26. package/src/index.ts +18 -18
  27. package/src/plugins/blockFormat.tsx +194 -0
  28. package/src/plugins/headings.tsx +39 -28
  29. package/src/plugins/index.tsx +161 -0
  30. package/src/plugins/listIndent.tsx +90 -0
  31. package/src/plugins/optional.tsx +216 -194
  32. package/src/types.ts +3 -0
  33. package/src/plugins/index.ts +0 -54
package/src/components/Icons.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
 
3
3
  interface IconProps {
4
4
  width?: number;
@@ -6,140 +6,369 @@ interface IconProps {
6
6
  className?: string;
7
7
  }
8
8
 
9
- export const BoldIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
10
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
11
- <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
9
+ export const BoldIcon: React.FC<IconProps> = ({
10
+ width = 18,
11
+ height = 18,
12
+ className,
13
+ }) => (
14
+ <svg
15
+ width={width}
16
+ height={height}
17
+ viewBox="0 0 24 24"
18
+ fill="currentColor"
19
+ className={className}
20
+ >
21
+ <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
12
22
  </svg>
13
23
  );
14
24
 
15
- export const ItalicIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
16
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
17
- <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
25
+ export const ItalicIcon: React.FC<IconProps> = ({
26
+ width = 18,
27
+ height = 18,
28
+ className,
29
+ }) => (
30
+ <svg
31
+ width={width}
32
+ height={height}
33
+ viewBox="0 0 24 24"
34
+ fill="currentColor"
35
+ className={className}
36
+ >
37
+ <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
18
38
  </svg>
19
39
  );
20
40
 
21
- export const UnderlineIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
22
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
23
- <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
41
+ export const UnderlineIcon: React.FC<IconProps> = ({
42
+ width = 18,
43
+ height = 18,
44
+ className,
45
+ }) => (
46
+ <svg
47
+ width={width}
48
+ height={height}
49
+ viewBox="0 0 24 24"
50
+ fill="currentColor"
51
+ className={className}
52
+ >
53
+ <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
24
54
  </svg>
25
55
  );
26
56
 
27
- export const UndoIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
28
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
29
- <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
57
+ export const UndoIcon: React.FC<IconProps> = ({
58
+ width = 18,
59
+ height = 18,
60
+ className,
61
+ }) => (
62
+ <svg
63
+ width={width}
64
+ height={height}
65
+ viewBox="0 0 24 24"
66
+ fill="currentColor"
67
+ className={className}
68
+ >
69
+ <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" />
30
70
  </svg>
31
71
  );
32
72
 
33
- export const RedoIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
34
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
35
- <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
73
+ export const RedoIcon: React.FC<IconProps> = ({
74
+ width = 18,
75
+ height = 18,
76
+ className,
77
+ }) => (
78
+ <svg
79
+ width={width}
80
+ height={height}
81
+ viewBox="0 0 24 24"
82
+ fill="currentColor"
83
+ className={className}
84
+ >
85
+ <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
36
86
  </svg>
37
87
  );
38
88
 
39
- export const ClearFormattingIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
40
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
41
- <path d="M6 5v.18L8.82 8h2.4L7.73 4.36C7.26 3.85 6.61 3.5 6 3.5c-1.11 0-2 .89-2 2 0 .61.35 1.26.86 1.73L6 5zm14.27 2.5L18.73 9H21v1h-4.27L15 8.27l1.23-1.23c.5-.5 1.15-.73 1.77-.73 1.11 0 2 .89 2 2 0 .62-.23 1.27-.73 1.77L18.27 13H21v1h-5.27l-2-2H9.73l-2 2H3v-1h4.27l2-2H7v-1h2.73l2-2H12v-1h-2.27l2-2h4.54zM5 15h14v2H5v-2z"/>
89
+ export const ClearFormattingIcon: React.FC<IconProps> = ({
90
+ width = 18,
91
+ height = 18,
92
+ className,
93
+ }) => (
94
+ <svg
95
+ width={width}
96
+ height={height}
97
+ viewBox="0 0 24 24"
98
+ fill="currentColor"
99
+ className={className}
100
+ >
101
+ <path d="M6 5v3h5v11h2V8h5V5H6z" />
102
+ <path d="M20.5 3.5L3.5 20.5l1.06 1.06L21.56 4.56z" />
42
103
  </svg>
43
104
  );
44
105
 
45
- export const LinkIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
46
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
47
- <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
106
+ export const LinkIcon: React.FC<IconProps> = ({
107
+ width = 18,
108
+ height = 18,
109
+ className,
110
+ }) => (
111
+ <svg
112
+ width={width}
113
+ height={height}
114
+ viewBox="0 0 24 24"
115
+ fill="currentColor"
116
+ className={className}
117
+ >
118
+ <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
48
119
  </svg>
49
120
  );
50
121
 
51
- export const QuoteIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
52
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
53
- <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
122
+ export const QuoteIcon: React.FC<IconProps> = ({
123
+ width = 18,
124
+ height = 18,
125
+ className,
126
+ }) => (
127
+ <svg
128
+ width={width}
129
+ height={height}
130
+ viewBox="0 0 24 24"
131
+ fill="currentColor"
132
+ className={className}
133
+ >
134
+ <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
54
135
  </svg>
55
136
  );
56
137
 
57
- export const BulletListIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
58
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
59
- <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
138
+ export const BulletListIcon: React.FC<IconProps> = ({
139
+ width = 18,
140
+ height = 18,
141
+ className,
142
+ }) => (
143
+ <svg
144
+ width={width}
145
+ height={height}
146
+ viewBox="0 0 24 24"
147
+ fill="currentColor"
148
+ className={className}
149
+ >
150
+ <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
60
151
  </svg>
61
152
  );
62
153
 
63
- export const NumberedListIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
64
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
65
- <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z"/>
154
+ export const NumberedListIcon: React.FC<IconProps> = ({
155
+ width = 18,
156
+ height = 18,
157
+ className,
158
+ }) => (
159
+ <svg
160
+ width={width}
161
+ height={height}
162
+ viewBox="0 0 24 24"
163
+ fill="currentColor"
164
+ className={className}
165
+ >
166
+ <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z" />
66
167
  </svg>
67
168
  );
68
169
 
69
- export const TextColorIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
70
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
71
- <path d="M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z"/>
170
+ export const TextColorIcon: React.FC<IconProps> = ({
171
+ width = 18,
172
+ height = 18,
173
+ className,
174
+ }) => (
175
+ <svg
176
+ width={width}
177
+ height={height}
178
+ viewBox="0 0 24 24"
179
+ fill="currentColor"
180
+ className={className}
181
+ >
182
+ <path d="M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z" />
72
183
  </svg>
73
184
  );
74
185
 
75
- export const BackgroundColorIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
76
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
77
- <path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
186
+ export const BackgroundColorIcon: React.FC<IconProps> = ({
187
+ width = 18,
188
+ height = 18,
189
+ className,
190
+ }) => (
191
+ <svg
192
+ width={width}
193
+ height={height}
194
+ viewBox="0 0 24 24"
195
+ fill="currentColor"
196
+ className={className}
197
+ >
198
+ <path d="M17.5 4.5c-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5-1.45 0-2.99.22-4.28.79C1.49 5.62 1 6.33 1 7.14v11.28c0 1.3 1.22 2.26 2.48 1.94.98-.25 2.02-.36 3.02-.36 1.56 0 3.22.26 4.56.92.6.3 1.28.3 1.88 0 1.34-.67 3-.92 4.56-.92 1 0 2.04.11 3.02.36C22.78 20.68 24 19.72 24 18.42V7.14c0-.81-.49-1.52-1.22-1.85-1.29-.57-2.83-.79-4.28-.79zM21 17.23c0 .63-.58 1.09-1.2.98-.75-.14-1.53-.2-2.3-.2-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5.77 0 1.55.06 2.3.2.62.11 1.2.58 1.2 1.18v9.35z" />
199
+ <rect
200
+ x="4"
201
+ y="13"
202
+ width="16"
203
+ height="6"
204
+ fill="currentColor"
205
+ opacity="0.5"
206
+ />
78
207
  </svg>
79
208
  );
80
209
 
81
- export const HeadingIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
82
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
83
- <path d="M5 4v3h5.5v12h3V7H19V4H5z"/>
210
+ export const HeadingIcon: React.FC<IconProps> = ({
211
+ width = 18,
212
+ height = 18,
213
+ className,
214
+ }) => (
215
+ <svg
216
+ width={width}
217
+ height={height}
218
+ viewBox="0 0 24 24"
219
+ fill="currentColor"
220
+ className={className}
221
+ >
222
+ <path d="M5 4v3h5.5v12h3V7H19V4H5z" />
84
223
  </svg>
85
224
  );
86
225
 
87
- export const FontSizeIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
88
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
89
- <path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z"/>
226
+ export const FontSizeIcon: React.FC<IconProps> = ({
227
+ width = 18,
228
+ height = 18,
229
+ className,
230
+ }) => (
231
+ <svg
232
+ width={width}
233
+ height={height}
234
+ viewBox="0 0 24 24"
235
+ fill="currentColor"
236
+ className={className}
237
+ >
238
+ <path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z" />
90
239
  </svg>
91
240
  );
92
241
 
93
- export const ImageIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
94
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
95
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
242
+ export const ImageIcon: React.FC<IconProps> = ({
243
+ width = 18,
244
+ height = 18,
245
+ className,
246
+ }) => (
247
+ <svg
248
+ width={width}
249
+ height={height}
250
+ viewBox="0 0 24 24"
251
+ fill="currentColor"
252
+ className={className}
253
+ >
254
+ <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
96
255
  </svg>
97
256
  );
98
257
 
99
- export const CloseIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
100
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
101
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
258
+ export const CloseIcon: React.FC<IconProps> = ({
259
+ width = 18,
260
+ height = 18,
261
+ className,
262
+ }) => (
263
+ <svg
264
+ width={width}
265
+ height={height}
266
+ viewBox="0 0 24 24"
267
+ fill="currentColor"
268
+ className={className}
269
+ >
270
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
102
271
  </svg>
103
272
  );
104
273
 
105
- export const LoadingIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
106
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
107
- <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
274
+ export const LoadingIcon: React.FC<IconProps> = ({
275
+ width = 18,
276
+ height = 18,
277
+ className,
278
+ }) => (
279
+ <svg
280
+ width={width}
281
+ height={height}
282
+ viewBox="0 0 24 24"
283
+ fill="currentColor"
284
+ className={className}
285
+ >
286
+ <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
108
287
  </svg>
109
288
  );
110
289
 
111
- export const UploadIcon: React.FC<IconProps> = ({ width = 18, height = 18, className }) => (
112
- <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" className={className}>
113
- <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
290
+ export const UploadIcon: React.FC<IconProps> = ({
291
+ width = 18,
292
+ height = 18,
293
+ className,
294
+ }) => (
295
+ <svg
296
+ width={width}
297
+ height={height}
298
+ viewBox="0 0 24 24"
299
+ fill="currentColor"
300
+ className={className}
301
+ >
302
+ <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
303
+ </svg>
304
+ );
305
+
306
+ export const IndentIcon: React.FC<IconProps> = ({
307
+ width = 18,
308
+ height = 18,
309
+ className,
310
+ }) => (
311
+ <svg
312
+ width={width}
313
+ height={height}
314
+ viewBox="0 0 24 24"
315
+ fill="currentColor"
316
+ className={className}
317
+ >
318
+ <path d="M3 21h18v-2H3v2zM3 8l4 4-4 4V8zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" />
319
+ </svg>
320
+ );
321
+
322
+ export const OutdentIcon: React.FC<IconProps> = ({
323
+ width = 18,
324
+ height = 18,
325
+ className,
326
+ }) => (
327
+ <svg
328
+ width={width}
329
+ height={height}
330
+ viewBox="0 0 24 24"
331
+ fill="currentColor"
332
+ className={className}
333
+ >
334
+ <path d="M3 21h18v-2H3v2zM11 8l4 4-4 4V8zM3 3v2h18V3H3zm0 4h10v2H3V7zm0 4h10v2H3v-2zm0 4h18v2H3v-2z" />
114
335
  </svg>
115
336
  );
116
337
 
117
338
  const iconMap: Record<string, React.FC<IconProps>> = {
118
- 'mdi:format-bold': BoldIcon,
119
- 'mdi:format-italic': ItalicIcon,
120
- 'mdi:format-underline': UnderlineIcon,
121
- 'mdi:undo': UndoIcon,
122
- 'mdi:redo': RedoIcon,
123
- 'mdi:format-clear': ClearFormattingIcon,
124
- 'mdi:link': LinkIcon,
125
- 'mdi:format-quote-close': QuoteIcon,
126
- 'mdi:format-list-bulleted': BulletListIcon,
127
- 'mdi:format-list-numbered': NumberedListIcon,
128
- 'mdi:format-color-text': TextColorIcon,
129
- 'mdi:format-color-fill': BackgroundColorIcon,
130
- 'mdi:format-header-1': HeadingIcon,
131
- 'mdi:format-size': FontSizeIcon,
132
- 'mdi:image': ImageIcon,
133
- 'mdi:close': CloseIcon,
134
- 'mdi:loading': LoadingIcon,
135
- 'mdi:upload': UploadIcon,
339
+ "mdi:format-bold": BoldIcon,
340
+ "mdi:format-italic": ItalicIcon,
341
+ "mdi:format-underline": UnderlineIcon,
342
+ "mdi:undo": UndoIcon,
343
+ "mdi:redo": RedoIcon,
344
+ "mdi:format-clear": ClearFormattingIcon,
345
+ "mdi:link": LinkIcon,
346
+ "mdi:format-quote-close": QuoteIcon,
347
+ "mdi:format-list-bulleted": BulletListIcon,
348
+ "mdi:format-list-numbered": NumberedListIcon,
349
+ "mdi:format-color-text": TextColorIcon,
350
+ "mdi:format-color-fill": BackgroundColorIcon,
351
+ "mdi:format-header-1": HeadingIcon,
352
+ "mdi:format-size": FontSizeIcon,
353
+ "mdi:image": ImageIcon,
354
+ "mdi:close": CloseIcon,
355
+ "mdi:loading": LoadingIcon,
356
+ "mdi:upload": UploadIcon,
357
+ "mdi:format-indent-increase": IndentIcon,
358
+ "mdi:format-indent-decrease": OutdentIcon,
136
359
  };
137
360
 
138
- export const Icon: React.FC<{ icon: string; width?: number; height?: number; className?: string }> = ({ icon, width = 18, height = 18, className }) => {
361
+ export const Icon: React.FC<{
362
+ icon: string;
363
+ width?: number;
364
+ height?: number;
365
+ className?: string;
366
+ }> = ({ icon, width = 18, height = 18, className }) => {
139
367
  const IconComponent = iconMap[icon];
140
368
  if (!IconComponent) {
141
- return <span style={{ width, height, display: 'inline-block' }} />;
369
+ return <span style={{ width, height, display: "inline-block" }} />;
142
370
  }
143
- return <IconComponent width={width} height={height} className={className} />;
371
+ return (
372
+ <IconComponent width={width} height={height} className={className} />
373
+ );
144
374
  };
145
-
package/src/index.ts CHANGED
@@ -1,19 +1,19 @@
1
- export { Editor } from './components/Editor';
2
- export { Toolbar } from './components/Toolbar';
3
- export { Dropdown } from './components/Dropdown';
4
- export * from './types';
5
- export * from './plugins';
6
- export * from './plugins/optional';
7
- export * from './plugins/fontSize';
8
- export * from './plugins/colors';
9
- export * from './plugins/headings';
10
- export * from './plugins/clearFormatting';
11
- export * from './plugins/image';
12
- export * from './utils/content';
13
- export { htmlToContent, contentToHTML } from './utils/content';
14
- export { HistoryManager } from './utils/history';
15
- export * from './utils/stateReflection';
16
- export { indentListItem, outdentListItem } from './utils/listIndent';
17
-
18
- export { Editor as default } from './components/Editor';
1
+ export { Dropdown } from "./components/Dropdown";
2
+ export { Editor } from "./components/Editor";
3
+ export { Toolbar } from "./components/Toolbar";
4
+ export * from "./plugins";
5
+ export * from "./plugins/blockFormat";
6
+ export * from "./plugins/clearFormatting";
7
+ export * from "./plugins/colors";
8
+ export * from "./plugins/fontSize";
9
+ export * from "./plugins/headings";
10
+ export * from "./plugins/image";
11
+ export * from "./plugins/optional";
12
+ export * from "./types";
13
+ export * from "./utils/content";
14
+ export { contentToHTML, htmlToContent } from "./utils/content";
15
+ export { HistoryManager } from "./utils/history";
16
+ export { indentListItem, outdentListItem } from "./utils/listIndent";
17
+ export * from "./utils/stateReflection";
19
18
 
19
+ export { Editor as default } from "./components/Editor";