@manifest-editor/components 1.3.0 → 1.3.1

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/dist/index.cjs CHANGED
@@ -299,6 +299,7 @@ function PanelSideMenuItem(props) {
299
299
  "border-none aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
300
300
  props.selected ? "bg-me-primary-500 hover:bg-me-primary-600 hover:text-white text-white" : "text-me-gray-700"
301
301
  ),
302
+ "aria-label": props.label,
302
303
  onMouseDown: props.onClick,
303
304
  children: [
304
305
  props.icon,
@@ -1440,22 +1441,23 @@ function MDXEditor({
1440
1441
  plugins: (0, import_react7.useMemo)(
1441
1442
  () => [
1442
1443
  // Example Plugin Usage
1443
- (0, import_editor.headingsPlugin)(),
1444
+ (0, import_editor.headingsPlugin)({ allowedHeadingLevels: [2, 3] }),
1444
1445
  (0, import_editor.listsPlugin)(),
1445
1446
  (0, import_editor.linkPlugin)(),
1446
1447
  (0, import_editor.quotePlugin)(),
1447
1448
  (0, import_editor.thematicBreakPlugin)(),
1448
- (0, import_editor.headingsPlugin)(),
1449
- // linkDialogPlugin(),
1450
- (0, import_editor.markdownShortcutPlugin)(),
1449
+ (0, import_editor.linkDialogPlugin)(),
1451
1450
  (0, import_editor.imagePlugin)(),
1451
+ (0, import_editor.diffSourcePlugin)(),
1452
1452
  (0, import_editor.toolbarPlugin)({
1453
1453
  toolbarClassName: "mdx-toolbar",
1454
1454
  toolbarContents: () => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
1455
1455
  " ",
1456
1456
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.UndoRedo, {}),
1457
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.BoldItalicUnderlineToggles, {}),
1457
1458
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.BlockTypeSelect, {}),
1458
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.ListsToggle, {}),
1459
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.ListsToggle, { options: ["bullet", "number"] }),
1460
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.CreateLink, {}),
1459
1461
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editor.InsertImage, {})
1460
1462
  ] })
1461
1463
  })
@@ -1503,7 +1505,11 @@ function HTMLEditor({
1503
1505
  editorRef,
1504
1506
  onBlur: internalOnChange,
1505
1507
  readOnly: disabled,
1506
- className: "bg-white prose-sm text-sm border rounded-lg p-0.5 focus-within:outline-none focus-within:border-me-primary-500",
1508
+ className: [
1509
+ "bg-white prose-sm text-sm border rounded-lg prose-a:text-me-primary-500 prose-a:underline prose-ul:list-disc p-0.5",
1510
+ "prose-ol:list-decimal",
1511
+ "focus-within:outline-none focus-within:border-me-primary-500 z-50 relative"
1512
+ ].join(" "),
1507
1513
  markdown: memoState,
1508
1514
  suppressHtmlProcessing: true,
1509
1515
  onError: (err) => {
package/dist/index.css CHANGED
@@ -27,6 +27,620 @@
27
27
  max-width: 1536px;
28
28
  }
29
29
  }
30
+ .prose {
31
+ color: var(--tw-prose-body);
32
+ max-width: 65ch;
33
+ }
34
+ .prose :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
35
+ margin-top: 1.25em;
36
+ margin-bottom: 1.25em;
37
+ }
38
+ .prose :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
39
+ color: var(--tw-prose-lead);
40
+ font-size: 1.25em;
41
+ line-height: 1.6;
42
+ margin-top: 1.2em;
43
+ margin-bottom: 1.2em;
44
+ }
45
+ .prose :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
46
+ color: var(--tw-prose-links);
47
+ text-decoration: underline;
48
+ font-weight: 500;
49
+ }
50
+ .prose :where(strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
51
+ color: var(--tw-prose-bold);
52
+ font-weight: 600;
53
+ }
54
+ .prose :where(a strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
55
+ color: inherit;
56
+ }
57
+ .prose :where(blockquote strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
58
+ color: inherit;
59
+ }
60
+ .prose :where(thead th strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
61
+ color: inherit;
62
+ }
63
+ .prose :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
64
+ list-style-type: decimal;
65
+ margin-top: 1.25em;
66
+ margin-bottom: 1.25em;
67
+ padding-inline-start: 1.625em;
68
+ }
69
+ .prose :where(ol[type=A]):not(:where([class~=not-prose], [class~=not-prose] *)) {
70
+ list-style-type: upper-alpha;
71
+ }
72
+ .prose :where(ol[type=a]):not(:where([class~=not-prose], [class~=not-prose] *)) {
73
+ list-style-type: lower-alpha;
74
+ }
75
+ .prose :where(ol[type=A s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
76
+ list-style-type: upper-alpha;
77
+ }
78
+ .prose :where(ol[type=a s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
79
+ list-style-type: lower-alpha;
80
+ }
81
+ .prose :where(ol[type=I]):not(:where([class~=not-prose], [class~=not-prose] *)) {
82
+ list-style-type: upper-roman;
83
+ }
84
+ .prose :where(ol[type=i]):not(:where([class~=not-prose], [class~=not-prose] *)) {
85
+ list-style-type: lower-roman;
86
+ }
87
+ .prose :where(ol[type=I s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
88
+ list-style-type: upper-roman;
89
+ }
90
+ .prose :where(ol[type=i s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
91
+ list-style-type: lower-roman;
92
+ }
93
+ .prose :where(ol[type="1"]):not(:where([class~=not-prose], [class~=not-prose] *)) {
94
+ list-style-type: decimal;
95
+ }
96
+ .prose :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
97
+ list-style-type: disc;
98
+ margin-top: 1.25em;
99
+ margin-bottom: 1.25em;
100
+ padding-inline-start: 1.625em;
101
+ }
102
+ .prose :where(ol > li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
103
+ font-weight: 400;
104
+ color: var(--tw-prose-counters);
105
+ }
106
+ .prose :where(ul > li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
107
+ color: var(--tw-prose-bullets);
108
+ }
109
+ .prose :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
110
+ color: var(--tw-prose-headings);
111
+ font-weight: 600;
112
+ margin-top: 1.25em;
113
+ }
114
+ .prose :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
115
+ border-color: var(--tw-prose-hr);
116
+ border-top-width: 1px;
117
+ margin-top: 3em;
118
+ margin-bottom: 3em;
119
+ }
120
+ .prose :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
121
+ font-weight: 500;
122
+ font-style: italic;
123
+ color: var(--tw-prose-quotes);
124
+ border-inline-start-width: 0.25rem;
125
+ border-inline-start-color: var(--tw-prose-quote-borders);
126
+ quotes: "\201c""\201d""\2018""\2019";
127
+ margin-top: 1.6em;
128
+ margin-bottom: 1.6em;
129
+ padding-inline-start: 1em;
130
+ }
131
+ .prose :where(blockquote p:first-of-type):not(:where([class~=not-prose], [class~=not-prose] *))::before {
132
+ content: open-quote;
133
+ }
134
+ .prose :where(blockquote p:last-of-type):not(:where([class~=not-prose], [class~=not-prose] *))::after {
135
+ content: close-quote;
136
+ }
137
+ .prose :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
138
+ color: var(--tw-prose-headings);
139
+ font-weight: 800;
140
+ font-size: 2.25em;
141
+ margin-top: 0;
142
+ margin-bottom: 0.8888889em;
143
+ line-height: 1.1111111;
144
+ }
145
+ .prose :where(h1 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
146
+ font-weight: 900;
147
+ color: inherit;
148
+ }
149
+ .prose :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
150
+ color: var(--tw-prose-headings);
151
+ font-weight: 700;
152
+ font-size: 1.5em;
153
+ margin-top: 2em;
154
+ margin-bottom: 1em;
155
+ line-height: 1.3333333;
156
+ }
157
+ .prose :where(h2 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
158
+ font-weight: 800;
159
+ color: inherit;
160
+ }
161
+ .prose :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
162
+ color: var(--tw-prose-headings);
163
+ font-weight: 600;
164
+ font-size: 1.25em;
165
+ margin-top: 1.6em;
166
+ margin-bottom: 0.6em;
167
+ line-height: 1.6;
168
+ }
169
+ .prose :where(h3 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
170
+ font-weight: 700;
171
+ color: inherit;
172
+ }
173
+ .prose :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
174
+ color: var(--tw-prose-headings);
175
+ font-weight: 600;
176
+ margin-top: 1.5em;
177
+ margin-bottom: 0.5em;
178
+ line-height: 1.5;
179
+ }
180
+ .prose :where(h4 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
181
+ font-weight: 700;
182
+ color: inherit;
183
+ }
184
+ .prose :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
185
+ margin-top: 2em;
186
+ margin-bottom: 2em;
187
+ }
188
+ .prose :where(picture):not(:where([class~=not-prose], [class~=not-prose] *)) {
189
+ display: block;
190
+ margin-top: 2em;
191
+ margin-bottom: 2em;
192
+ }
193
+ .prose :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
194
+ margin-top: 2em;
195
+ margin-bottom: 2em;
196
+ }
197
+ .prose :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
198
+ font-weight: 500;
199
+ font-family: inherit;
200
+ color: var(--tw-prose-kbd);
201
+ box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
202
+ font-size: 0.875em;
203
+ border-radius: 0.3125rem;
204
+ padding-top: 0.1875em;
205
+ padding-inline-end: 0.375em;
206
+ padding-bottom: 0.1875em;
207
+ padding-inline-start: 0.375em;
208
+ }
209
+ .prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
210
+ color: var(--tw-prose-code);
211
+ font-weight: 600;
212
+ font-size: 0.875em;
213
+ }
214
+ .prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *))::before {
215
+ content: "`";
216
+ }
217
+ .prose :where(code):not(:where([class~=not-prose], [class~=not-prose] *))::after {
218
+ content: "`";
219
+ }
220
+ .prose :where(a code):not(:where([class~=not-prose], [class~=not-prose] *)) {
221
+ color: inherit;
222
+ }
223
+ .prose :where(h1 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
224
+ color: inherit;
225
+ }
226
+ .prose :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
227
+ color: inherit;
228
+ font-size: 0.875em;
229
+ }
230
+ .prose :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
231
+ color: inherit;
232
+ font-size: 0.9em;
233
+ }
234
+ .prose :where(h4 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
235
+ color: inherit;
236
+ }
237
+ .prose :where(blockquote code):not(:where([class~=not-prose], [class~=not-prose] *)) {
238
+ color: inherit;
239
+ }
240
+ .prose :where(thead th code):not(:where([class~=not-prose], [class~=not-prose] *)) {
241
+ color: inherit;
242
+ }
243
+ .prose :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
244
+ color: var(--tw-prose-pre-code);
245
+ background-color: var(--tw-prose-pre-bg);
246
+ overflow-x: auto;
247
+ font-weight: 400;
248
+ font-size: 0.875em;
249
+ line-height: 1.7142857;
250
+ margin-top: 1.7142857em;
251
+ margin-bottom: 1.7142857em;
252
+ border-radius: 0.375rem;
253
+ padding-top: 0.8571429em;
254
+ padding-inline-end: 1.1428571em;
255
+ padding-bottom: 0.8571429em;
256
+ padding-inline-start: 1.1428571em;
257
+ }
258
+ .prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)) {
259
+ background-color: transparent;
260
+ border-width: 0;
261
+ border-radius: 0;
262
+ padding: 0;
263
+ font-weight: inherit;
264
+ color: inherit;
265
+ font-size: inherit;
266
+ font-family: inherit;
267
+ line-height: inherit;
268
+ }
269
+ .prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *))::before {
270
+ content: none;
271
+ }
272
+ .prose :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *))::after {
273
+ content: none;
274
+ }
275
+ .prose :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
276
+ width: 100%;
277
+ table-layout: auto;
278
+ text-align: start;
279
+ margin-top: 2em;
280
+ margin-bottom: 2em;
281
+ font-size: 0.875em;
282
+ line-height: 1.7142857;
283
+ }
284
+ .prose :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
285
+ border-bottom-width: 1px;
286
+ border-bottom-color: var(--tw-prose-th-borders);
287
+ }
288
+ .prose :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
289
+ color: var(--tw-prose-headings);
290
+ font-weight: 600;
291
+ vertical-align: bottom;
292
+ padding-inline-end: 0.5714286em;
293
+ padding-bottom: 0.5714286em;
294
+ padding-inline-start: 0.5714286em;
295
+ }
296
+ .prose :where(tbody tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
297
+ border-bottom-width: 1px;
298
+ border-bottom-color: var(--tw-prose-td-borders);
299
+ }
300
+ .prose :where(tbody tr:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
301
+ border-bottom-width: 0;
302
+ }
303
+ .prose :where(tbody td):not(:where([class~=not-prose], [class~=not-prose] *)) {
304
+ vertical-align: baseline;
305
+ }
306
+ .prose :where(tfoot):not(:where([class~=not-prose], [class~=not-prose] *)) {
307
+ border-top-width: 1px;
308
+ border-top-color: var(--tw-prose-th-borders);
309
+ }
310
+ .prose :where(tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
311
+ vertical-align: top;
312
+ }
313
+ .prose :where(figure > *):not(:where([class~=not-prose], [class~=not-prose] *)) {
314
+ margin-top: 0;
315
+ margin-bottom: 0;
316
+ }
317
+ .prose :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
318
+ color: var(--tw-prose-captions);
319
+ font-size: 0.875em;
320
+ line-height: 1.4285714;
321
+ margin-top: 0.8571429em;
322
+ }
323
+ .prose {
324
+ --tw-prose-body: #374151;
325
+ --tw-prose-headings: #111827;
326
+ --tw-prose-lead: #4b5563;
327
+ --tw-prose-links: #111827;
328
+ --tw-prose-bold: #111827;
329
+ --tw-prose-counters: #6b7280;
330
+ --tw-prose-bullets: #d1d5db;
331
+ --tw-prose-hr: #e5e7eb;
332
+ --tw-prose-quotes: #111827;
333
+ --tw-prose-quote-borders: #e5e7eb;
334
+ --tw-prose-captions: #6b7280;
335
+ --tw-prose-kbd: #111827;
336
+ --tw-prose-kbd-shadows: 17 24 39;
337
+ --tw-prose-code: #111827;
338
+ --tw-prose-pre-code: #e5e7eb;
339
+ --tw-prose-pre-bg: #1f2937;
340
+ --tw-prose-th-borders: #d1d5db;
341
+ --tw-prose-td-borders: #e5e7eb;
342
+ --tw-prose-invert-body: #d1d5db;
343
+ --tw-prose-invert-headings: #fff;
344
+ --tw-prose-invert-lead: #9ca3af;
345
+ --tw-prose-invert-links: #fff;
346
+ --tw-prose-invert-bold: #fff;
347
+ --tw-prose-invert-counters: #9ca3af;
348
+ --tw-prose-invert-bullets: #4b5563;
349
+ --tw-prose-invert-hr: #374151;
350
+ --tw-prose-invert-quotes: #f3f4f6;
351
+ --tw-prose-invert-quote-borders: #374151;
352
+ --tw-prose-invert-captions: #9ca3af;
353
+ --tw-prose-invert-kbd: #fff;
354
+ --tw-prose-invert-kbd-shadows: 255 255 255;
355
+ --tw-prose-invert-code: #fff;
356
+ --tw-prose-invert-pre-code: #d1d5db;
357
+ --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
358
+ --tw-prose-invert-th-borders: #4b5563;
359
+ --tw-prose-invert-td-borders: #374151;
360
+ font-size: 1rem;
361
+ line-height: 1.75;
362
+ }
363
+ .prose :where(picture > img):not(:where([class~=not-prose], [class~=not-prose] *)) {
364
+ margin-top: 0;
365
+ margin-bottom: 0;
366
+ }
367
+ .prose :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
368
+ margin-top: 0.5em;
369
+ margin-bottom: 0.5em;
370
+ }
371
+ .prose :where(ol > li):not(:where([class~=not-prose], [class~=not-prose] *)) {
372
+ padding-inline-start: 0.375em;
373
+ }
374
+ .prose :where(ul > li):not(:where([class~=not-prose], [class~=not-prose] *)) {
375
+ padding-inline-start: 0.375em;
376
+ }
377
+ .prose :where(.prose > ul > li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
378
+ margin-top: 0.75em;
379
+ margin-bottom: 0.75em;
380
+ }
381
+ .prose :where(.prose > ul > li > p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
382
+ margin-top: 1.25em;
383
+ }
384
+ .prose :where(.prose > ul > li > p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
385
+ margin-bottom: 1.25em;
386
+ }
387
+ .prose :where(.prose > ol > li > p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
388
+ margin-top: 1.25em;
389
+ }
390
+ .prose :where(.prose > ol > li > p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
391
+ margin-bottom: 1.25em;
392
+ }
393
+ .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
394
+ margin-top: 0.75em;
395
+ margin-bottom: 0.75em;
396
+ }
397
+ .prose :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
398
+ margin-top: 1.25em;
399
+ margin-bottom: 1.25em;
400
+ }
401
+ .prose :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
402
+ margin-top: 0.5em;
403
+ padding-inline-start: 1.625em;
404
+ }
405
+ .prose :where(hr + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
406
+ margin-top: 0;
407
+ }
408
+ .prose :where(h2 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
409
+ margin-top: 0;
410
+ }
411
+ .prose :where(h3 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
412
+ margin-top: 0;
413
+ }
414
+ .prose :where(h4 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
415
+ margin-top: 0;
416
+ }
417
+ .prose :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
418
+ padding-inline-start: 0;
419
+ }
420
+ .prose :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
421
+ padding-inline-end: 0;
422
+ }
423
+ .prose :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
424
+ padding-top: 0.5714286em;
425
+ padding-inline-end: 0.5714286em;
426
+ padding-bottom: 0.5714286em;
427
+ padding-inline-start: 0.5714286em;
428
+ }
429
+ .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
430
+ padding-inline-start: 0;
431
+ }
432
+ .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
433
+ padding-inline-end: 0;
434
+ }
435
+ .prose :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
436
+ margin-top: 2em;
437
+ margin-bottom: 2em;
438
+ }
439
+ .prose :where(.prose > :first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
440
+ margin-top: 0;
441
+ }
442
+ .prose :where(.prose > :last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
443
+ margin-bottom: 0;
444
+ }
445
+ .prose-sm {
446
+ font-size: 0.875rem;
447
+ line-height: 1.7142857;
448
+ }
449
+ .prose-sm :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
450
+ margin-top: 1.1428571em;
451
+ margin-bottom: 1.1428571em;
452
+ }
453
+ .prose-sm :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
454
+ font-size: 1.2857143em;
455
+ line-height: 1.5555556;
456
+ margin-top: 0.8888889em;
457
+ margin-bottom: 0.8888889em;
458
+ }
459
+ .prose-sm :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
460
+ margin-top: 1.3333333em;
461
+ margin-bottom: 1.3333333em;
462
+ padding-inline-start: 1.1111111em;
463
+ }
464
+ .prose-sm :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
465
+ font-size: 2.1428571em;
466
+ margin-top: 0;
467
+ margin-bottom: 0.8em;
468
+ line-height: 1.2;
469
+ }
470
+ .prose-sm :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
471
+ font-size: 1.4285714em;
472
+ margin-top: 1.6em;
473
+ margin-bottom: 0.8em;
474
+ line-height: 1.4;
475
+ }
476
+ .prose-sm :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
477
+ font-size: 1.2857143em;
478
+ margin-top: 1.5555556em;
479
+ margin-bottom: 0.4444444em;
480
+ line-height: 1.5555556;
481
+ }
482
+ .prose-sm :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
483
+ margin-top: 1.4285714em;
484
+ margin-bottom: 0.5714286em;
485
+ line-height: 1.4285714;
486
+ }
487
+ .prose-sm :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
488
+ margin-top: 1.7142857em;
489
+ margin-bottom: 1.7142857em;
490
+ }
491
+ .prose-sm :where(picture):not(:where([class~=not-prose], [class~=not-prose] *)) {
492
+ margin-top: 1.7142857em;
493
+ margin-bottom: 1.7142857em;
494
+ }
495
+ .prose-sm :where(picture > img):not(:where([class~=not-prose], [class~=not-prose] *)) {
496
+ margin-top: 0;
497
+ margin-bottom: 0;
498
+ }
499
+ .prose-sm :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
500
+ margin-top: 1.7142857em;
501
+ margin-bottom: 1.7142857em;
502
+ }
503
+ .prose-sm :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
504
+ font-size: 0.8571429em;
505
+ border-radius: 0.3125rem;
506
+ padding-top: 0.1428571em;
507
+ padding-inline-end: 0.3571429em;
508
+ padding-bottom: 0.1428571em;
509
+ padding-inline-start: 0.3571429em;
510
+ }
511
+ .prose-sm :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
512
+ font-size: 0.8571429em;
513
+ }
514
+ .prose-sm :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
515
+ font-size: 0.9em;
516
+ }
517
+ .prose-sm :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
518
+ font-size: 0.8888889em;
519
+ }
520
+ .prose-sm :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
521
+ font-size: 0.8571429em;
522
+ line-height: 1.6666667;
523
+ margin-top: 1.6666667em;
524
+ margin-bottom: 1.6666667em;
525
+ border-radius: 0.25rem;
526
+ padding-top: 0.6666667em;
527
+ padding-inline-end: 1em;
528
+ padding-bottom: 0.6666667em;
529
+ padding-inline-start: 1em;
530
+ }
531
+ .prose-sm :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
532
+ margin-top: 1.1428571em;
533
+ margin-bottom: 1.1428571em;
534
+ padding-inline-start: 1.5714286em;
535
+ }
536
+ .prose-sm :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
537
+ margin-top: 1.1428571em;
538
+ margin-bottom: 1.1428571em;
539
+ padding-inline-start: 1.5714286em;
540
+ }
541
+ .prose-sm :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
542
+ margin-top: 0.2857143em;
543
+ margin-bottom: 0.2857143em;
544
+ }
545
+ .prose-sm :where(ol > li):not(:where([class~=not-prose], [class~=not-prose] *)) {
546
+ padding-inline-start: 0.4285714em;
547
+ }
548
+ .prose-sm :where(ul > li):not(:where([class~=not-prose], [class~=not-prose] *)) {
549
+ padding-inline-start: 0.4285714em;
550
+ }
551
+ .prose-sm :where(.prose-sm > ul > li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
552
+ margin-top: 0.5714286em;
553
+ margin-bottom: 0.5714286em;
554
+ }
555
+ .prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
556
+ margin-top: 1.1428571em;
557
+ }
558
+ .prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
559
+ margin-bottom: 1.1428571em;
560
+ }
561
+ .prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
562
+ margin-top: 1.1428571em;
563
+ }
564
+ .prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
565
+ margin-bottom: 1.1428571em;
566
+ }
567
+ .prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
568
+ margin-top: 0.5714286em;
569
+ margin-bottom: 0.5714286em;
570
+ }
571
+ .prose-sm :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
572
+ margin-top: 1.1428571em;
573
+ margin-bottom: 1.1428571em;
574
+ }
575
+ .prose-sm :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
576
+ margin-top: 1.1428571em;
577
+ }
578
+ .prose-sm :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
579
+ margin-top: 0.2857143em;
580
+ padding-inline-start: 1.5714286em;
581
+ }
582
+ .prose-sm :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
583
+ margin-top: 2.8571429em;
584
+ margin-bottom: 2.8571429em;
585
+ }
586
+ .prose-sm :where(hr + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
587
+ margin-top: 0;
588
+ }
589
+ .prose-sm :where(h2 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
590
+ margin-top: 0;
591
+ }
592
+ .prose-sm :where(h3 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
593
+ margin-top: 0;
594
+ }
595
+ .prose-sm :where(h4 + *):not(:where([class~=not-prose], [class~=not-prose] *)) {
596
+ margin-top: 0;
597
+ }
598
+ .prose-sm :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
599
+ font-size: 0.8571429em;
600
+ line-height: 1.5;
601
+ }
602
+ .prose-sm :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
603
+ padding-inline-end: 1em;
604
+ padding-bottom: 0.6666667em;
605
+ padding-inline-start: 1em;
606
+ }
607
+ .prose-sm :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
608
+ padding-inline-start: 0;
609
+ }
610
+ .prose-sm :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
611
+ padding-inline-end: 0;
612
+ }
613
+ .prose-sm :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
614
+ padding-top: 0.6666667em;
615
+ padding-inline-end: 1em;
616
+ padding-bottom: 0.6666667em;
617
+ padding-inline-start: 1em;
618
+ }
619
+ .prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
620
+ padding-inline-start: 0;
621
+ }
622
+ .prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
623
+ padding-inline-end: 0;
624
+ }
625
+ .prose-sm :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
626
+ margin-top: 1.7142857em;
627
+ margin-bottom: 1.7142857em;
628
+ }
629
+ .prose-sm :where(figure > *):not(:where([class~=not-prose], [class~=not-prose] *)) {
630
+ margin-top: 0;
631
+ margin-bottom: 0;
632
+ }
633
+ .prose-sm :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
634
+ font-size: 0.8571429em;
635
+ line-height: 1.3333333;
636
+ margin-top: 0.6666667em;
637
+ }
638
+ .prose-sm :where(.prose-sm > :first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
639
+ margin-top: 0;
640
+ }
641
+ .prose-sm :where(.prose-sm > :last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
642
+ margin-bottom: 0;
643
+ }
30
644
  .sr-only {
31
645
  position: absolute;
32
646
  width: 1px;
@@ -848,7 +1462,7 @@
848
1462
  .grid-md,
849
1463
  .grid-sm {
850
1464
  --gap-count: calc(var(--grid-column-count) - 1);
851
- --grid-item--max-width: calc( (100% - var(--total-gap-width)) / var(--grid-column-count) );
1465
+ --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
852
1466
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
853
1467
  }
854
1468
  .tab-shadow {
@@ -904,6 +1518,14 @@
904
1518
  #floating-ui {
905
1519
  z-index: 1000;
906
1520
  }
1521
+ div.mdxeditor-popup-container {
1522
+ position: relative;
1523
+ z-index: 1000;
1524
+ }
1525
+ div.mdxeditor-popup-container > *[role=dialog] {
1526
+ display: flex;
1527
+ flex-direction: column;
1528
+ }
907
1529
  .focus-within\:border-me-primary-500:focus-within {
908
1530
  --tw-border-opacity: 1;
909
1531
  border-color: rgb(184 76 116 / var(--tw-border-opacity));
@@ -1042,6 +1664,19 @@
1042
1664
  .data-\[visible\]\:opacity-100[data-visible] {
1043
1665
  opacity: 1;
1044
1666
  }
1667
+ .prose-a\:text-me-primary-500 :is(:where(a):not(:where([class~=not-prose], [class~=not-prose] *))) {
1668
+ --tw-text-opacity: 1;
1669
+ color: rgb(184 76 116 / var(--tw-text-opacity));
1670
+ }
1671
+ .prose-a\:underline :is(:where(a):not(:where([class~=not-prose], [class~=not-prose] *))) {
1672
+ text-decoration-line: underline;
1673
+ }
1674
+ .prose-ol\:list-decimal :is(:where(ol):not(:where([class~=not-prose], [class~=not-prose] *))) {
1675
+ list-style-type: decimal;
1676
+ }
1677
+ .prose-ul\:list-disc :is(:where(ul):not(:where([class~=not-prose], [class~=not-prose] *))) {
1678
+ list-style-type: disc;
1679
+ }
1045
1680
  @media (min-width: 768px) {
1046
1681
  .md\:p-5 {
1047
1682
  padding: 1.25rem;
package/dist/index.js CHANGED
@@ -223,6 +223,7 @@ function PanelSideMenuItem(props) {
223
223
  "border-none aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
224
224
  props.selected ? "bg-me-primary-500 hover:bg-me-primary-600 hover:text-white text-white" : "text-me-gray-700"
225
225
  ),
226
+ "aria-label": props.label,
226
227
  onMouseDown: props.onClick,
227
228
  children: [
228
229
  props.icon,
@@ -1387,18 +1388,21 @@ import TurndownService from "turndown";
1387
1388
  import "@mdxeditor/editor/style.css";
1388
1389
  import {
1389
1390
  MDXEditor as BaseMDXEditor,
1391
+ BlockTypeSelect,
1392
+ BoldItalicUnderlineToggles,
1393
+ CreateLink,
1390
1394
  InsertImage,
1391
1395
  ListsToggle,
1392
1396
  UndoRedo,
1397
+ diffSourcePlugin,
1393
1398
  headingsPlugin,
1394
1399
  imagePlugin,
1400
+ linkDialogPlugin,
1395
1401
  linkPlugin,
1396
1402
  listsPlugin,
1397
- markdownShortcutPlugin,
1398
1403
  quotePlugin,
1399
1404
  thematicBreakPlugin,
1400
- toolbarPlugin,
1401
- BlockTypeSelect
1405
+ toolbarPlugin
1402
1406
  } from "@mdxeditor/editor";
1403
1407
  import { useMemo as useMemo3 } from "react";
1404
1408
  import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -1412,22 +1416,23 @@ function MDXEditor({
1412
1416
  plugins: useMemo3(
1413
1417
  () => [
1414
1418
  // Example Plugin Usage
1415
- headingsPlugin(),
1419
+ headingsPlugin({ allowedHeadingLevels: [2, 3] }),
1416
1420
  listsPlugin(),
1417
1421
  linkPlugin(),
1418
1422
  quotePlugin(),
1419
1423
  thematicBreakPlugin(),
1420
- headingsPlugin(),
1421
- // linkDialogPlugin(),
1422
- markdownShortcutPlugin(),
1424
+ linkDialogPlugin(),
1423
1425
  imagePlugin(),
1426
+ diffSourcePlugin(),
1424
1427
  toolbarPlugin({
1425
1428
  toolbarClassName: "mdx-toolbar",
1426
1429
  toolbarContents: () => /* @__PURE__ */ jsxs26(Fragment4, { children: [
1427
1430
  " ",
1428
1431
  /* @__PURE__ */ jsx38(UndoRedo, {}),
1432
+ /* @__PURE__ */ jsx38(BoldItalicUnderlineToggles, {}),
1429
1433
  /* @__PURE__ */ jsx38(BlockTypeSelect, {}),
1430
- /* @__PURE__ */ jsx38(ListsToggle, {}),
1434
+ /* @__PURE__ */ jsx38(ListsToggle, { options: ["bullet", "number"] }),
1435
+ /* @__PURE__ */ jsx38(CreateLink, {}),
1431
1436
  /* @__PURE__ */ jsx38(InsertImage, {})
1432
1437
  ] })
1433
1438
  })
@@ -1475,7 +1480,11 @@ function HTMLEditor({
1475
1480
  editorRef,
1476
1481
  onBlur: internalOnChange,
1477
1482
  readOnly: disabled,
1478
- className: "bg-white prose-sm text-sm border rounded-lg p-0.5 focus-within:outline-none focus-within:border-me-primary-500",
1483
+ className: [
1484
+ "bg-white prose-sm text-sm border rounded-lg prose-a:text-me-primary-500 prose-a:underline prose-ul:list-disc p-0.5",
1485
+ "prose-ol:list-decimal",
1486
+ "focus-within:outline-none focus-within:border-me-primary-500 z-50 relative"
1487
+ ].join(" "),
1479
1488
  markdown: memoState,
1480
1489
  suppressHtmlProcessing: true,
1481
1490
  onError: (err) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manifest-editor/components",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "type": "module",
5
5
  "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
6
6
  "repository": {
@@ -49,12 +49,13 @@
49
49
  "@headlessui/react": "^2.0.3",
50
50
  "@iiif/helpers": "^1.2.12",
51
51
  "@iiif/presentation-3": "^2.2.3",
52
- "@mdxeditor/editor": "^3.21.2",
52
+ "@mdxeditor/editor": "^3.29.0",
53
53
  "@react-aria/collections": "3.0.0-alpha.4",
54
54
  "@types/turndown": "5.0.5",
55
55
  "@vidstack/react": "^1.11.29",
56
56
  "clsx": "^2.1.1",
57
- "iiif-browser": "^2.0.0",
57
+ "iiif-browser": "^2.0.1",
58
+ "lexical": "^0.28.0",
58
59
  "polygon-editor": "^0.0.6",
59
60
  "react": "^18.3.1",
60
61
  "react-aria": "^3.38.1",
@@ -87,5 +88,5 @@
87
88
  "access": "public"
88
89
  },
89
90
  "globalName": "ClientVault",
90
- "gitHead": "deba5190f58c11b91383eacd79715607ba5b8d24"
91
+ "gitHead": "920fe405869996394c204c6eae70f446aab78986"
91
92
  }