@mdxeditor/editor 0.19.0 → 0.21.0

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 (30) hide show
  1. package/dist/MDXEditor.d.ts +1 -1
  2. package/dist/plugins/codeblock/index.d.ts +10 -10
  3. package/dist/plugins/codemirror/index.d.ts +14 -14
  4. package/dist/plugins/core/index.d.ts +9 -9
  5. package/dist/plugins/core/index.js +3 -2
  6. package/dist/plugins/diff-source/index.d.ts +10 -10
  7. package/dist/plugins/directives/index.d.ts +10 -10
  8. package/dist/plugins/frontmatter/FrontmatterEditor.js +22 -24
  9. package/dist/plugins/frontmatter/index.d.ts +38 -14
  10. package/dist/plugins/frontmatter/index.js +25 -2
  11. package/dist/plugins/headings/index.d.ts +10 -10
  12. package/dist/plugins/image/index.d.ts +10 -10
  13. package/dist/plugins/jsx/index.d.ts +10 -10
  14. package/dist/plugins/link/index.d.ts +1 -1
  15. package/dist/plugins/link-dialog/LinkDialog.d.ts +3 -2
  16. package/dist/plugins/link-dialog/LinkDialog.js +14 -13
  17. package/dist/plugins/link-dialog/index.d.ts +17 -15
  18. package/dist/plugins/link-dialog/index.js +16 -4
  19. package/dist/plugins/lists/index.d.ts +10 -10
  20. package/dist/plugins/markdown-shortcut/index.d.ts +1 -1
  21. package/dist/plugins/quote/index.d.ts +7 -7
  22. package/dist/plugins/sandpack/index.d.ts +14 -14
  23. package/dist/plugins/table/index.d.ts +10 -10
  24. package/dist/plugins/thematic-break/index.d.ts +10 -10
  25. package/dist/plugins/toolbar/components/InsertFrontmatter.js +14 -1
  26. package/dist/plugins/toolbar/index.d.ts +8 -8
  27. package/dist/style.css +218 -175
  28. package/dist/styles/ui.module.css.js +101 -86
  29. package/package.json +1 -1
  30. package/dist/icons/arrow_right.svg.js +0 -8
package/dist/MDXEditor.d.ts CHANGED
@@ -37,7 +37,7 @@ export interface MDXEditorProps {
37
37
  /**
38
38
  * pass if you would like to have the editor automatically focused when mounted.
39
39
  */
40
- autoFocus?: boolean;
40
+ autoFocus?: boolean | 'rootStart' | 'rootEnd';
41
41
  /**
42
42
  * Triggered when focus leaves the editor
43
43
  */
package/dist/plugins/codeblock/index.d.ts CHANGED
@@ -95,7 +95,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
95
95
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
96
96
  contentEditableClassName: RealmNode<string>;
97
97
  placeholder: RealmNode<ReactNode>;
98
- autoFocus: RealmNode<boolean>;
98
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
99
99
  readOnly: RealmNode<boolean>;
100
100
  composerChildren: RealmNode<ComponentType<{}>[]>;
101
101
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -147,7 +147,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
147
147
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
148
148
  contentEditableClassName: RealmNode<string>;
149
149
  placeholder: RealmNode<ReactNode>;
150
- autoFocus: RealmNode<boolean>;
150
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
151
151
  readOnly: RealmNode<boolean>;
152
152
  composerChildren: RealmNode<ComponentType<{}>[]>;
153
153
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -222,7 +222,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
222
222
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
223
223
  contentEditableClassName: RealmNode<string>;
224
224
  placeholder: RealmNode<ReactNode>;
225
- autoFocus: RealmNode<boolean>;
225
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
226
226
  readOnly: RealmNode<boolean>;
227
227
  composerChildren: RealmNode<ComponentType<{}>[]>;
228
228
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -274,7 +274,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
274
274
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
275
275
  contentEditableClassName: RealmNode<string>;
276
276
  placeholder: RealmNode<ReactNode>;
277
- autoFocus: RealmNode<boolean>;
277
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
278
278
  readOnly: RealmNode<boolean>;
279
279
  composerChildren: RealmNode<ComponentType<{}>[]>;
280
280
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -341,7 +341,7 @@ codeBlockPluginHooks: {
341
341
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
342
342
  contentEditableClassName: RealmNode<string>;
343
343
  placeholder: RealmNode<ReactNode>;
344
- autoFocus: RealmNode<boolean>;
344
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
345
345
  readOnly: RealmNode<boolean>;
346
346
  composerChildren: RealmNode<ComponentType<{}>[]>;
347
347
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -399,7 +399,7 @@ codeBlockPluginHooks: {
399
399
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
400
400
  contentEditableClassName: RealmNode<string>;
401
401
  placeholder: RealmNode<ReactNode>;
402
- autoFocus: RealmNode<boolean>;
402
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
403
403
  readOnly: RealmNode<boolean>;
404
404
  composerChildren: RealmNode<ComponentType<{}>[]>;
405
405
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -457,7 +457,7 @@ codeBlockPluginHooks: {
457
457
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
458
458
  contentEditableClassName: RealmNode<string>;
459
459
  placeholder: RealmNode<ReactNode>;
460
- autoFocus: RealmNode<boolean>;
460
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
461
461
  readOnly: RealmNode<boolean>;
462
462
  composerChildren: RealmNode<ComponentType<{}>[]>;
463
463
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -514,7 +514,7 @@ codeBlockPluginHooks: {
514
514
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
515
515
  contentEditableClassName: RealmNode<string>;
516
516
  placeholder: RealmNode<ReactNode>;
517
- autoFocus: RealmNode<boolean>;
517
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
518
518
  readOnly: RealmNode<boolean>;
519
519
  composerChildren: RealmNode<ComponentType<{}>[]>;
520
520
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -572,7 +572,7 @@ codeBlockPluginHooks: {
572
572
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
573
573
  contentEditableClassName: RealmNode<string>;
574
574
  placeholder: RealmNode<ReactNode>;
575
- autoFocus: RealmNode<boolean>;
575
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
576
576
  readOnly: RealmNode<boolean>;
577
577
  composerChildren: RealmNode<ComponentType<{}>[]>;
578
578
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -630,7 +630,7 @@ codeBlockPluginHooks: {
630
630
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
631
631
  contentEditableClassName: RealmNode<string>;
632
632
  placeholder: RealmNode<ReactNode>;
633
- autoFocus: RealmNode<boolean>;
633
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
634
634
  readOnly: RealmNode<boolean>;
635
635
  composerChildren: RealmNode<ComponentType<{}>[]>;
636
636
  addComposerChild: RealmNode<ComponentType<{}>>;
package/dist/plugins/codemirror/index.d.ts CHANGED
@@ -43,7 +43,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
43
43
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
44
44
  contentEditableClassName: RealmNode<string>;
45
45
  placeholder: RealmNode<ReactNode>;
46
- autoFocus: RealmNode<boolean>;
46
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
47
47
  readOnly: RealmNode<boolean>;
48
48
  composerChildren: RealmNode<ComponentType<{}>[]>;
49
49
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -95,7 +95,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
95
95
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
96
96
  contentEditableClassName: RealmNode<string>;
97
97
  placeholder: RealmNode<ReactNode>;
98
- autoFocus: RealmNode<boolean>;
98
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
99
99
  readOnly: RealmNode<boolean>;
100
100
  composerChildren: RealmNode<ComponentType<{}>[]>;
101
101
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -147,7 +147,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
147
147
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
148
148
  contentEditableClassName: RealmNode<string>;
149
149
  placeholder: RealmNode<ReactNode>;
150
- autoFocus: RealmNode<boolean>;
150
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
151
151
  readOnly: RealmNode<boolean>;
152
152
  composerChildren: RealmNode<ComponentType<{}>[]>;
153
153
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -204,7 +204,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
204
204
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
205
205
  contentEditableClassName: RealmNode<string>;
206
206
  placeholder: RealmNode<ReactNode>;
207
- autoFocus: RealmNode<boolean>;
207
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
208
208
  readOnly: RealmNode<boolean>;
209
209
  composerChildren: RealmNode<ComponentType<{}>[]>;
210
210
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -270,7 +270,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
270
270
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
271
271
  contentEditableClassName: RealmNode<string>;
272
272
  placeholder: RealmNode<ReactNode>;
273
- autoFocus: RealmNode<boolean>;
273
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
274
274
  readOnly: RealmNode<boolean>;
275
275
  composerChildren: RealmNode<ComponentType<{}>[]>;
276
276
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -322,7 +322,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
322
322
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
323
323
  contentEditableClassName: RealmNode<string>;
324
324
  placeholder: RealmNode<ReactNode>;
325
- autoFocus: RealmNode<boolean>;
325
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
326
326
  readOnly: RealmNode<boolean>;
327
327
  composerChildren: RealmNode<ComponentType<{}>[]>;
328
328
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -374,7 +374,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
374
374
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
375
375
  contentEditableClassName: RealmNode<string>;
376
376
  placeholder: RealmNode<ReactNode>;
377
- autoFocus: RealmNode<boolean>;
377
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
378
378
  readOnly: RealmNode<boolean>;
379
379
  composerChildren: RealmNode<ComponentType<{}>[]>;
380
380
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -431,7 +431,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
431
431
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
432
432
  contentEditableClassName: RealmNode<string>;
433
433
  placeholder: RealmNode<ReactNode>;
434
- autoFocus: RealmNode<boolean>;
434
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
435
435
  readOnly: RealmNode<boolean>;
436
436
  composerChildren: RealmNode<ComponentType<{}>[]>;
437
437
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -505,7 +505,7 @@ codeMirrorHooks: {
505
505
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
506
506
  contentEditableClassName: RealmNode<string>;
507
507
  placeholder: RealmNode<ReactNode>;
508
- autoFocus: RealmNode<boolean>;
508
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
509
509
  readOnly: RealmNode<boolean>;
510
510
  composerChildren: RealmNode<ComponentType<{}>[]>;
511
511
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -569,7 +569,7 @@ codeMirrorHooks: {
569
569
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
570
570
  contentEditableClassName: RealmNode<string>;
571
571
  placeholder: RealmNode<ReactNode>;
572
- autoFocus: RealmNode<boolean>;
572
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
573
573
  readOnly: RealmNode<boolean>;
574
574
  composerChildren: RealmNode<ComponentType<{}>[]>;
575
575
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -633,7 +633,7 @@ codeMirrorHooks: {
633
633
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
634
634
  contentEditableClassName: RealmNode<string>;
635
635
  placeholder: RealmNode<ReactNode>;
636
- autoFocus: RealmNode<boolean>;
636
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
637
637
  readOnly: RealmNode<boolean>;
638
638
  composerChildren: RealmNode<ComponentType<{}>[]>;
639
639
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -696,7 +696,7 @@ codeMirrorHooks: {
696
696
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
697
697
  contentEditableClassName: RealmNode<string>;
698
698
  placeholder: RealmNode<ReactNode>;
699
- autoFocus: RealmNode<boolean>;
699
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
700
700
  readOnly: RealmNode<boolean>;
701
701
  composerChildren: RealmNode<ComponentType<{}>[]>;
702
702
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -760,7 +760,7 @@ codeMirrorHooks: {
760
760
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
761
761
  contentEditableClassName: RealmNode<string>;
762
762
  placeholder: RealmNode<ReactNode>;
763
- autoFocus: RealmNode<boolean>;
763
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
764
764
  readOnly: RealmNode<boolean>;
765
765
  composerChildren: RealmNode<ComponentType<{}>[]>;
766
766
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -824,7 +824,7 @@ codeMirrorHooks: {
824
824
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
825
825
  contentEditableClassName: RealmNode<string>;
826
826
  placeholder: RealmNode<ReactNode>;
827
- autoFocus: RealmNode<boolean>;
827
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
828
828
  readOnly: RealmNode<boolean>;
829
829
  composerChildren: RealmNode<ComponentType<{}>[]>;
830
830
  addComposerChild: RealmNode<ComponentType<{}>>;
package/dist/plugins/core/index.d.ts CHANGED
@@ -58,7 +58,7 @@ export declare const coreSystem: SystemSpec<[], (r: Realm) => {
58
58
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
59
59
  contentEditableClassName: RealmNode<string>;
60
60
  placeholder: RealmNode<React.ReactNode>;
61
- autoFocus: RealmNode<boolean>;
61
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
62
62
  readOnly: RealmNode<boolean>;
63
63
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
64
64
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -85,7 +85,7 @@ interface CorePluginParams {
85
85
  initialMarkdown: string;
86
86
  contentEditableClassName: string;
87
87
  placeholder?: React.ReactNode;
88
- autoFocus: boolean;
88
+ autoFocus: boolean | 'rootStart' | 'rootEnd';
89
89
  onChange: (markdown: string) => void;
90
90
  onBlur?: (e: FocusEvent) => void;
91
91
  toMarkdownOptions: NonNullable<LexicalConvertOptions['toMarkdownOptions']>;
@@ -123,7 +123,7 @@ corePlugin: PluginConstructor<SystemSpec<[], (r: Realm) => {
123
123
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
124
124
  contentEditableClassName: RealmNode<string>;
125
125
  placeholder: RealmNode<React.ReactNode>;
126
- autoFocus: RealmNode<boolean>;
126
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
127
127
  readOnly: RealmNode<boolean>;
128
128
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
129
129
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -178,7 +178,7 @@ corePluginHooks: {
178
178
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
179
179
  contentEditableClassName: RealmNode<string>;
180
180
  placeholder: RealmNode<React.ReactNode>;
181
- autoFocus: RealmNode<boolean>;
181
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
182
182
  readOnly: RealmNode<boolean>;
183
183
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
184
184
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -231,7 +231,7 @@ corePluginHooks: {
231
231
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
232
232
  contentEditableClassName: RealmNode<string>;
233
233
  placeholder: RealmNode<React.ReactNode>;
234
- autoFocus: RealmNode<boolean>;
234
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
235
235
  readOnly: RealmNode<boolean>;
236
236
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
237
237
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -284,7 +284,7 @@ corePluginHooks: {
284
284
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
285
285
  contentEditableClassName: RealmNode<string>;
286
286
  placeholder: RealmNode<React.ReactNode>;
287
- autoFocus: RealmNode<boolean>;
287
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
288
288
  readOnly: RealmNode<boolean>;
289
289
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
290
290
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -336,7 +336,7 @@ corePluginHooks: {
336
336
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
337
337
  contentEditableClassName: RealmNode<string>;
338
338
  placeholder: RealmNode<React.ReactNode>;
339
- autoFocus: RealmNode<boolean>;
339
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
340
340
  readOnly: RealmNode<boolean>;
341
341
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
342
342
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -389,7 +389,7 @@ corePluginHooks: {
389
389
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
390
390
  contentEditableClassName: RealmNode<string>;
391
391
  placeholder: RealmNode<React.ReactNode>;
392
- autoFocus: RealmNode<boolean>;
392
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
393
393
  readOnly: RealmNode<boolean>;
394
394
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
395
395
  addComposerChild: RealmNode<React.ComponentType<{}>>;
@@ -442,7 +442,7 @@ corePluginHooks: {
442
442
  editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
443
443
  contentEditableClassName: RealmNode<string>;
444
444
  placeholder: RealmNode<React.ReactNode>;
445
- autoFocus: RealmNode<boolean>;
445
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
446
446
  readOnly: RealmNode<boolean>;
447
447
  composerChildren: RealmNode<React.ComponentType<{}>[]>;
448
448
  addComposerChild: RealmNode<React.ComponentType<{}>>;
package/dist/plugins/core/index.js CHANGED
@@ -160,8 +160,9 @@ const coreSystem = system((r) => {
160
160
  markdown: r.getValue(initialMarkdown),
161
161
  syntaxExtensions: r.getValue(syntaxExtensions)
162
162
  });
163
- if (r.getValue(autoFocus)) {
164
- setTimeout(() => theRootEditor.focus(noop, { defaultSelection: "rootStart" }));
163
+ const autoFocusValue = r.getValue(autoFocus);
164
+ if (autoFocusValue) {
165
+ setTimeout(() => theRootEditor.focus(noop, { defaultSelection: autoFocusValue === true ? "rootStart" : autoFocusValue }));
165
166
  }
166
167
  });
167
168
  r.pub(createActiveEditorSubscription, (editor) => {
package/dist/plugins/diff-source/index.d.ts CHANGED
@@ -44,7 +44,7 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
44
44
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
45
45
  contentEditableClassName: RealmNode<string>;
46
46
  placeholder: RealmNode<ReactNode>;
47
- autoFocus: RealmNode<boolean>;
47
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
48
48
  readOnly: RealmNode<boolean>;
49
49
  composerChildren: RealmNode<ComponentType<{}>[]>;
50
50
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -96,7 +96,7 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
96
96
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
97
97
  contentEditableClassName: RealmNode<string>;
98
98
  placeholder: RealmNode<ReactNode>;
99
- autoFocus: RealmNode<boolean>;
99
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
100
100
  readOnly: RealmNode<boolean>;
101
101
  composerChildren: RealmNode<ComponentType<{}>[]>;
102
102
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -155,7 +155,7 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
155
155
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
156
156
  contentEditableClassName: RealmNode<string>;
157
157
  placeholder: RealmNode<ReactNode>;
158
- autoFocus: RealmNode<boolean>;
158
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
159
159
  readOnly: RealmNode<boolean>;
160
160
  composerChildren: RealmNode<ComponentType<{}>[]>;
161
161
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -207,7 +207,7 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
207
207
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
208
208
  contentEditableClassName: RealmNode<string>;
209
209
  placeholder: RealmNode<ReactNode>;
210
- autoFocus: RealmNode<boolean>;
210
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
211
211
  readOnly: RealmNode<boolean>;
212
212
  composerChildren: RealmNode<ComponentType<{}>[]>;
213
213
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -273,7 +273,7 @@ diffSourcePluginHooks: {
273
273
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
274
274
  contentEditableClassName: RealmNode<string>;
275
275
  placeholder: RealmNode<ReactNode>;
276
- autoFocus: RealmNode<boolean>;
276
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
277
277
  readOnly: RealmNode<boolean>;
278
278
  composerChildren: RealmNode<ComponentType<{}>[]>;
279
279
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -330,7 +330,7 @@ diffSourcePluginHooks: {
330
330
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
331
331
  contentEditableClassName: RealmNode<string>;
332
332
  placeholder: RealmNode<ReactNode>;
333
- autoFocus: RealmNode<boolean>;
333
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
334
334
  readOnly: RealmNode<boolean>;
335
335
  composerChildren: RealmNode<ComponentType<{}>[]>;
336
336
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -387,7 +387,7 @@ diffSourcePluginHooks: {
387
387
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
388
388
  contentEditableClassName: RealmNode<string>;
389
389
  placeholder: RealmNode<ReactNode>;
390
- autoFocus: RealmNode<boolean>;
390
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
391
391
  readOnly: RealmNode<boolean>;
392
392
  composerChildren: RealmNode<ComponentType<{}>[]>;
393
393
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -443,7 +443,7 @@ diffSourcePluginHooks: {
443
443
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
444
444
  contentEditableClassName: RealmNode<string>;
445
445
  placeholder: RealmNode<ReactNode>;
446
- autoFocus: RealmNode<boolean>;
446
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
447
447
  readOnly: RealmNode<boolean>;
448
448
  composerChildren: RealmNode<ComponentType<{}>[]>;
449
449
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -500,7 +500,7 @@ diffSourcePluginHooks: {
500
500
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
501
501
  contentEditableClassName: RealmNode<string>;
502
502
  placeholder: RealmNode<ReactNode>;
503
- autoFocus: RealmNode<boolean>;
503
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
504
504
  readOnly: RealmNode<boolean>;
505
505
  composerChildren: RealmNode<ComponentType<{}>[]>;
506
506
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -557,7 +557,7 @@ diffSourcePluginHooks: {
557
557
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
558
558
  contentEditableClassName: RealmNode<string>;
559
559
  placeholder: RealmNode<ReactNode>;
560
- autoFocus: RealmNode<boolean>;
560
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
561
561
  readOnly: RealmNode<boolean>;
562
562
  composerChildren: RealmNode<ComponentType<{}>[]>;
563
563
  addComposerChild: RealmNode<ComponentType<{}>>;
package/dist/plugins/directives/index.d.ts CHANGED
@@ -101,7 +101,7 @@ export declare const directivesSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
101
101
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
102
102
  contentEditableClassName: RealmNode<string>;
103
103
  placeholder: RealmNode<ReactNode>;
104
- autoFocus: RealmNode<boolean>;
104
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
105
105
  readOnly: RealmNode<boolean>;
106
106
  composerChildren: RealmNode<ComponentType<{}>[]>;
107
107
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -153,7 +153,7 @@ export declare const directivesSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
153
153
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
154
154
  contentEditableClassName: RealmNode<string>;
155
155
  placeholder: RealmNode<ReactNode>;
156
- autoFocus: RealmNode<boolean>;
156
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
157
157
  readOnly: RealmNode<boolean>;
158
158
  composerChildren: RealmNode<ComponentType<{}>[]>;
159
159
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -223,7 +223,7 @@ directivesPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
223
223
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
224
224
  contentEditableClassName: RealmNode<string>;
225
225
  placeholder: RealmNode<ReactNode>;
226
- autoFocus: RealmNode<boolean>;
226
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
227
227
  readOnly: RealmNode<boolean>;
228
228
  composerChildren: RealmNode<ComponentType<{}>[]>;
229
229
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -275,7 +275,7 @@ directivesPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
275
275
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
276
276
  contentEditableClassName: RealmNode<string>;
277
277
  placeholder: RealmNode<ReactNode>;
278
- autoFocus: RealmNode<boolean>;
278
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
279
279
  readOnly: RealmNode<boolean>;
280
280
  composerChildren: RealmNode<ComponentType<{}>[]>;
281
281
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -336,7 +336,7 @@ directivesPluginHooks: {
336
336
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
337
337
  contentEditableClassName: RealmNode<string>;
338
338
  placeholder: RealmNode<ReactNode>;
339
- autoFocus: RealmNode<boolean>;
339
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
340
340
  readOnly: RealmNode<boolean>;
341
341
  composerChildren: RealmNode<ComponentType<{}>[]>;
342
342
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -392,7 +392,7 @@ directivesPluginHooks: {
392
392
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
393
393
  contentEditableClassName: RealmNode<string>;
394
394
  placeholder: RealmNode<ReactNode>;
395
- autoFocus: RealmNode<boolean>;
395
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
396
396
  readOnly: RealmNode<boolean>;
397
397
  composerChildren: RealmNode<ComponentType<{}>[]>;
398
398
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -448,7 +448,7 @@ directivesPluginHooks: {
448
448
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
449
449
  contentEditableClassName: RealmNode<string>;
450
450
  placeholder: RealmNode<ReactNode>;
451
- autoFocus: RealmNode<boolean>;
451
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
452
452
  readOnly: RealmNode<boolean>;
453
453
  composerChildren: RealmNode<ComponentType<{}>[]>;
454
454
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -503,7 +503,7 @@ directivesPluginHooks: {
503
503
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
504
504
  contentEditableClassName: RealmNode<string>;
505
505
  placeholder: RealmNode<ReactNode>;
506
- autoFocus: RealmNode<boolean>;
506
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
507
507
  readOnly: RealmNode<boolean>;
508
508
  composerChildren: RealmNode<ComponentType<{}>[]>;
509
509
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -559,7 +559,7 @@ directivesPluginHooks: {
559
559
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
560
560
  contentEditableClassName: RealmNode<string>;
561
561
  placeholder: RealmNode<ReactNode>;
562
- autoFocus: RealmNode<boolean>;
562
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
563
563
  readOnly: RealmNode<boolean>;
564
564
  composerChildren: RealmNode<ComponentType<{}>[]>;
565
565
  addComposerChild: RealmNode<ComponentType<{}>>;
@@ -615,7 +615,7 @@ directivesPluginHooks: {
615
615
  editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
616
616
  contentEditableClassName: RealmNode<string>;
617
617
  placeholder: RealmNode<ReactNode>;
618
- autoFocus: RealmNode<boolean>;
618
+ autoFocus: RealmNode<boolean | "rootStart" | "rootEnd">;
619
619
  readOnly: RealmNode<boolean>;
620
620
  composerChildren: RealmNode<ComponentType<{}>[]>;
621
621
  addComposerChild: RealmNode<ComponentType<{}>>;
package/dist/plugins/frontmatter/FrontmatterEditor.js CHANGED
@@ -1,22 +1,25 @@
1
+ import * as Dialog from "@radix-ui/react-dialog";
1
2
  import classNames from "classnames";
2
3
  import YamlParser from "js-yaml";
3
4
  import React__default from "react";
4
5
  import { useForm, useFieldArray } from "react-hook-form";
5
- import DropDownIcon from "../../icons/arrow_drop_down.svg.js";
6
- import ArrowRight from "../../icons/arrow_right.svg.js";
6
+ import { frontmatterPluginHooks } from "./index.js";
7
+ import CloseIcon from "../../icons/close.svg.js";
7
8
  import DeleteIcon from "../../icons/delete.svg.js";
8
9
  import styles from "../../styles/ui.module.css.js";
9
10
  import { corePluginHooks } from "../core/index.js";
10
11
  const FrontmatterEditor = ({ yaml, onChange }) => {
11
- const [expanded, setExpanded] = React__default.useState(true);
12
- const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
12
+ const [readOnly, editorRootElementRef] = corePluginHooks.useEmitterValues("readOnly", "editorRootElementRef");
13
+ const [frontmatterDialogOpen] = frontmatterPluginHooks.useEmitterValues("frontmatterDialogOpen");
14
+ const setFrontmatterDialogOpen = frontmatterPluginHooks.usePublisher("frontmatterDialogOpen");
15
+ const removeFrontmatter = frontmatterPluginHooks.usePublisher("removeFrontmatter");
13
16
  const yamlConfig = React__default.useMemo(() => {
14
17
  if (!yaml) {
15
18
  return [];
16
19
  }
17
20
  return Object.entries(YamlParser.load(yaml)).map(([key, value]) => ({ key, value }));
18
21
  }, [yaml]);
19
- const { register, control, watch } = useForm({
22
+ const { register, control, handleSubmit } = useForm({
20
23
  defaultValues: {
21
24
  yamlConfig
22
25
  }
@@ -25,8 +28,13 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
25
28
  control,
26
29
  name: "yamlConfig"
27
30
  });
28
- React__default.useEffect(() => {
29
- const subscription = watch(({ yamlConfig: yamlConfig2 }) => {
31
+ const onSubmit = React__default.useCallback(
32
+ ({ yamlConfig: yamlConfig2 }) => {
33
+ if (yamlConfig2.length === 0) {
34
+ removeFrontmatter(true);
35
+ setFrontmatterDialogOpen(false);
36
+ return;
37
+ }
30
38
  const yaml2 = yamlConfig2.reduce((acc, { key, value }) => {
31
39
  if (key && value) {
32
40
  acc[key] = value;
@@ -34,34 +42,24 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
34
42
  return acc;
35
43
  }, {});
36
44
  onChange(YamlParser.dump(yaml2).trim());
37
- });
38
- return () => subscription.unsubscribe();
39
- }, [watch, onChange]);
40
- return /* @__PURE__ */ React__default.createElement("div", { className: styles.frontmatterWrapper, "data-expanded": expanded, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(
41
- "button",
42
- {
43
- className: styles.frontmatterToggleButton,
44
- onClick: (e) => {
45
- e.preventDefault();
46
- setExpanded((v) => !v);
47
- }
45
+ setFrontmatterDialogOpen(false);
48
46
  },
49
- expanded ? /* @__PURE__ */ React__default.createElement(DropDownIcon, null) : /* @__PURE__ */ React__default.createElement(ArrowRight, null),
50
- "Document frontmatter"
51
- ), expanded && /* @__PURE__ */ React__default.createElement("form", null, /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
47
+ [onChange, setFrontmatterDialogOpen, removeFrontmatter]
48
+ );
49
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog.Root, { open: frontmatterDialogOpen, onOpenChange: (open) => setFrontmatterDialogOpen(open) }, /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, "Edit document frontmatter"), /* @__PURE__ */ React__default.createElement("form", { onSubmit: handleSubmit(onSubmit), onReset: () => setFrontmatterDialogOpen(false) }, /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
52
50
  return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true, readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }), readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))));
53
51
  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
54
52
  "button",
55
53
  {
56
54
  disabled: readOnly,
57
- className: styles.primaryButton,
55
+ className: classNames(styles.primaryButton, styles.smallButton),
58
56
  type: "button",
59
57
  onClick: () => {
60
58
  append({ key: "", value: "" });
61
59
  }
62
60
  },
63
- "Add new key"
64
- )))))));
61
+ "Add entry"
62
+ ))))), /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", className: styles.secondaryButton }, "Cancel"), /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"))), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.dialogCloseButton, "aria-label": "Close" }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)))))));
65
63
  };
66
64
  const TableInput = React__default.forwardRef(({ className, autofocusIfEmpty: _, ...props }, ref) => {
67
65
  return /* @__PURE__ */ React__default.createElement("input", { className: classNames(styles.propertyEditorInput, className), ...props, ref });