@mdxeditor/editor 0.1.1 → 0.2.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.
package/dist/index.d.ts CHANGED
@@ -9,7 +9,6 @@
9
9
 
10
10
  import { AdmonitionKind } from 'lexical';
11
11
  import type { ComponentType } from 'react';
12
- import { ContainerDirective } from 'mdast-util-directive';
13
12
  import { DecoratorNode } from 'lexical';
14
13
  import type { DOMConversionMap } from 'lexical';
15
14
  import type { DOMExportOutput } from 'lexical';
@@ -17,25 +16,13 @@ import { EditorConfig } from 'lexical';
17
16
  import { EditorThemeClasses } from 'lexical';
18
17
  import { ElementNode } from 'lexical';
19
18
  import { FromMarkdownOptions } from 'mdast-util-from-markdown/lib';
20
- import { HeadingNode } from '@lexical/rich-text';
21
- import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
22
19
  import { Klass } from 'lexical';
23
20
  import { LexicalEditor } from 'lexical';
24
21
  import { LexicalNode } from 'lexical';
25
- import { LineBreakNode } from 'lexical';
26
- import { LinkNode } from '@lexical/link';
27
- import { ListItemNode } from '@lexical/list';
28
- import { ListNode } from '@lexical/list';
29
22
  import * as Mdast from 'mdast';
30
- import { MdxjsEsm } from 'mdast-util-mdx';
31
23
  import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
32
- import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
33
- import type { MdxJsxTextElement } from 'mdast-util-mdx-jsx';
34
- import { MdxJsxTextElement as MdxJsxTextElement_2 } from 'mdast-util-mdx';
35
24
  import { NodeKey } from 'lexical';
36
- import { ParagraphNode } from 'lexical';
37
25
  import { ParseOptions } from 'mdast-util-from-markdown/lib';
38
- import { QuoteNode } from '@lexical/rich-text';
39
26
  import * as RadixToolbar from '@radix-ui/react-toolbar';
40
27
  import { RangeSelection } from 'lexical';
41
28
  import { default as React_2 } from 'react';
@@ -45,41 +32,103 @@ import { SerializedEditorState } from 'lexical';
45
32
  import { SerializedElementNode } from 'lexical';
46
33
  import { SerializedLexicalNode } from 'lexical';
47
34
  import { Spread } from 'lexical';
48
- import { TextNode } from 'lexical';
35
+ import { ToMarkdownExtension as ToMarkdownExtension_2 } from 'mdast-util-mdx';
49
36
  import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
37
+ import { ToMarkdownOptions as ToMarkdownOptions_2 } from 'mdast-util-mdx';
50
38
 
39
+ /**
40
+ * Creates an {@link AdmonitionNode}.
41
+ * @param kind - The kind of admonition to create. Accepts `'note' | 'tip' | 'danger' | 'info' | 'caution'`
42
+ */
51
43
  export declare function $createAdmonitionNode(kind?: AdmonitionKind): AdmonitionNode;
52
44
 
53
- export declare function $createCodeBlockNode({ code, language, meta }: CodeBlockPayload): CodeBlockNode;
45
+ /**
46
+ * Creates a {@link CodeBlockNode}.
47
+ * @param options - The code contents, the language (i.e. js, jsx, etc.), and the additional meta data of the block.
48
+ */
49
+ export declare function $createCodeBlockNode(options: CreateCodeBlockNodeOptions): CodeBlockNode;
54
50
 
55
- export declare function $createFrontmatterNode({ yaml }: FrontmatterPayload): FrontmatterNode;
51
+ /**
52
+ * Creates a {@link FrontmatterNode}.
53
+ * @param yaml - The YAML string of the frontmatter.
54
+ */
55
+ export declare function $createFrontmatterNode(yaml: string): FrontmatterNode;
56
56
 
57
- export declare function $createImageNode({ altText, title, src, key }: ImagePayload): ImageNode;
57
+ /**
58
+ * Creates an {@link ImageNode}.
59
+ * @param options - The payload to create an image. The keys map to the img tag attributes.
60
+ */
61
+ export declare function $createImageNode(options: CreateImageNodeOptions): ImageNode;
58
62
 
59
- export declare function $createJsxNode(payload: JsxPayload): JsxNode;
63
+ /**
64
+ * Creates a {@link JsxNode}.
65
+ * @param options - The payload necessary for the creation of a {@link JsxNode}.
66
+ *
67
+ * @see {@link CreateJsxNodeOptions} for more details.
68
+ */
69
+ export declare function $createJsxNode(options: CreateJsxNodeOptions): JsxNode;
60
70
 
61
- export declare function $createSandpackNode({ code, language, meta }: SandpackPayload): SandpackNode;
71
+ /**
72
+ * Creates a {@link SandpackNode}.
73
+ */
74
+ export declare function $createSandpackNode(options: CreateSandpackNodeOptions): SandpackNode;
62
75
 
76
+ /**
77
+ * Creates a {@link TableNode}
78
+ * @param mdastNode - The mdast node to create the {@link TableNode} from.
79
+ */
63
80
  export declare function $createTableNode(mdastNode: Mdast.Table): TableNode;
64
81
 
82
+ /**
83
+ * Returns `true` if the given node is an {@link AdmonitionNode}.
84
+ */
65
85
  export declare function $isAdmonitionNode(node: LexicalNode | null | undefined): node is AdmonitionNode;
66
86
 
87
+ /**
88
+ * Returns true if the given node is a {@link CodeBlockNode}.
89
+ */
67
90
  export declare function $isCodeBlockNode(node: LexicalNode | null | undefined): node is CodeBlockNode;
68
91
 
92
+ /**
93
+ * Returns `true` if the given node is a {@link FrontmatterNode}.
94
+ */
69
95
  export declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node is FrontmatterNode;
70
96
 
97
+ /**
98
+ * Retruns true if the node is an {@link ImageNode}.
99
+ */
71
100
  export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
72
101
 
102
+ /**
103
+ * Returns true if a node is a {@link JsxNode}.
104
+ */
73
105
  export declare function $isJsxNode(node: LexicalNode | null | undefined): node is JsxNode;
74
106
 
107
+ /**
108
+ * Returns true if the given node is a {@link SandpackNode}.
109
+ */
75
110
  export declare function $isSandpackNode(node: LexicalNode | null | undefined): node is SandpackNode;
76
111
 
112
+ /**
113
+ * Retruns true if the given node is a {@link TableNode}.
114
+ */
77
115
  export declare function $isTableNode(node: LexicalNode | null | undefined): node is TableNode;
78
116
 
79
- export declare type ActiveEditorType = LexicalEditorType | CodeBlockEditorType | SandpackEditorType;
80
-
81
117
  export { AdmonitionKind }
82
118
 
119
+ /**
120
+ * A lexical node that represents the markdown directives (better known as admonitions, thanks to Docusaurus). Use {@link "$createAdmonitionNode"} to construct one.
121
+ *
122
+ * @remarks
123
+ *
124
+ * An admonition in markdown looks like this:
125
+ *
126
+ * ```md
127
+ * :::tip
128
+ * Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
129
+ * :::
130
+ * ```
131
+ */
83
132
  export declare class AdmonitionNode extends ElementNode {
84
133
  __kind: AdmonitionKind;
85
134
  static getType(): string;
@@ -95,15 +144,13 @@ export declare class AdmonitionNode extends ElementNode {
95
144
  collapseAtStart(): true;
96
145
  }
97
146
 
98
- export declare interface CodeBlockEditorProps extends SandpackEditorProps {
147
+ declare interface CodeBlockEditorProps extends SandpackEditorProps {
99
148
  language: string;
100
149
  }
101
150
 
102
- export declare type CodeBlockEditorType = {
103
- type: 'codeblock';
104
- nodeKey: string;
105
- };
106
-
151
+ /**
152
+ * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
153
+ */
107
154
  export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
108
155
  __code: string;
109
156
  __meta: string;
@@ -129,79 +176,118 @@ export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
129
176
  decorate(_editor: LexicalEditor, { theme: { nodeDecoratorComponents: { CodeBlockEditor } } }: ExtendedEditorConfig): JSX.Element;
130
177
  }
131
178
 
132
- export declare interface CodeBlockPayload {
179
+ declare type CoordinatesSubscription = (coords: [colIndex: number, rowIndex: number]) => void;
180
+
181
+ /**
182
+ * The options necessary to construct a {@link CodeBlockNode}.
183
+ */
184
+ export declare interface CreateCodeBlockNodeOptions {
185
+ /**
186
+ * The code contents of the block.
187
+ */
133
188
  code: string;
189
+ /**
190
+ * The additional meta data of the block.
191
+ */
134
192
  meta: string;
193
+ /**
194
+ * The language of the code block (i.e. `js`, `jsx`, etc.). This is used for syntax highlighting.
195
+ */
135
196
  language: string;
136
197
  }
137
198
 
138
- export declare type CoordinatesSubscription = (coords: [colIndex: number, rowIndex: number]) => void;
139
-
140
- export declare const defaultExtensions: {
141
- mdxToMarkdown: ToMarkdownOptions;
142
- frontmatterToMarkdown: ToMarkdownOptions;
143
- directiveToMarkdown: ToMarkdownOptions;
144
- gfmTableToMarkdown: ToMarkdownOptions;
145
- };
199
+ /**
200
+ * The payload to create an {@link ImageNode}.
201
+ */
202
+ export declare interface CreateImageNodeOptions {
203
+ altText: string;
204
+ title?: string;
205
+ key?: NodeKey;
206
+ src: string;
207
+ }
146
208
 
147
- export declare const defaultLexicalNodes: Record<string, Klass<LexicalNode>>;
148
-
149
- export declare const defaultLexicalVisitors: {
150
- LexicalRootVisitor: LexicalExportVisitor<RootNode, Mdast.Content>;
151
- LexicalParagraphVisitor: LexicalExportVisitor<ParagraphNode, Mdast.Paragraph>;
152
- LexicalFrontmatterVisitor: LexicalExportVisitor<FrontmatterNode, Mdast.YAML>;
153
- LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text>;
154
- LexicalLinebreakVisitor: LexicalExportVisitor<LineBreakNode, Mdast.Text>;
155
- LexicalLinkVisitor: LexicalExportVisitor<LinkNode, Mdast.Link>;
156
- LexicalHeadingVisitor: LexicalExportVisitor<HeadingNode, Mdast.Heading>;
157
- LexicalListVisitor: LexicalExportVisitor<ListNode, Mdast.List>;
158
- LexicalListItemVisitor: LexicalExportVisitor<ListItemNode, Mdast.ListItem>;
159
- LexicalQuoteVisitor: LexicalExportVisitor<QuoteNode, Mdast.Blockquote>;
160
- SandpackNodeVisitor: LexicalExportVisitor<SandpackNode, Mdast.Code>;
161
- CodeBlockVisitor: LexicalExportVisitor<CodeBlockNode, Mdast.Code>;
162
- LexicalThematicBreakVisitor: LexicalExportVisitor<HorizontalRuleNode, Mdast.ThematicBreak>;
163
- AdmonitionVisitor: LexicalExportVisitor<AdmonitionNode, ContainerDirective>;
164
- LexicalImageVisitor: LexicalExportVisitor<ImageNode, Mdast.Image>;
165
- JsxVisitor: LexicalExportVisitor<JsxNode, MdxJsxFlowElement | MdxJsxTextElement>;
166
- LexicalTableVisitor: LexicalExportVisitor<TableNode, Mdast.Table>;
167
- };
209
+ /**
210
+ * The payload to create a {@link JsxNode}.
211
+ */
212
+ export declare interface CreateJsxNodeOptions {
213
+ /**
214
+ * The name of the JSX element.
215
+ */
216
+ name: string;
217
+ /**
218
+ * The type of the element - markdown makes a distinction between text and flow elements.
219
+ */
220
+ kind: JsxKind;
221
+ /**
222
+ * The attributes of the JSX element.
223
+ */
224
+ attributes: Array<MdxJsxAttribute>;
225
+ /**
226
+ * The tree state of the children.
227
+ */
228
+ state?: SerializedEditorState;
229
+ /**
230
+ * If passed, this function will be called with the root paragraph node of the editor.
231
+ */
232
+ updateFn?: updateFn;
233
+ }
168
234
 
169
- export declare const defaultMdastExtensions: Record<string, MarkdownParseOptions['mdastExtensions'][number]>;
235
+ /**
236
+ * The options necessary to construct a {@link SandpackNode}.
237
+ */
238
+ export declare interface CreateSandpackNodeOptions {
239
+ code: string;
240
+ meta: string;
241
+ language: string;
242
+ }
170
243
 
171
- export declare const defaultMdastVisitors: Record<string, MdastImportVisitor<Mdast.Content>>;
244
+ /**
245
+ * The default set of lexical nodes used in the editor.
246
+ */
247
+ declare const defaultLexicalNodes: Record<string, Klass<LexicalNode>>;
172
248
 
173
- export declare interface DefaultMdxOptionValues {
249
+ /**
250
+ * A structure that holds the default values for the options used in the markdown import/export steps.
251
+ *
252
+ * Most options are exported as records, so that you can pick a specific value using its name rather than its index which can change.
253
+ * The actual MDXEditor props accept arrays, so you should use the `Object.values` function to convert the records to arrays.
254
+ */
255
+ export declare type DefaultMdxOptionValues = {
256
+ /** The default values for the options used in the import step */
174
257
  markdownParse: {
175
- defaultVisitors: typeof defaultMdastVisitors;
176
- defaultSyntaxExtensions: typeof defaultSyntaxExtensions;
177
- defaultMdastExtensions: typeof defaultMdastExtensions;
258
+ defaultVisitors: Record<string, MdastImportVisitor<Mdast.Content>>;
259
+ defaultSyntaxExtensions: Record<string, SyntaxExtension>;
260
+ defaultMdastExtensions: Record<string, MdastExtension>;
178
261
  };
262
+ /** The default values for the options used in the markdown export step */
179
263
  lexicalConvert: {
180
- defaultVisitors: typeof defaultLexicalVisitors;
181
- defaultExtensions: typeof defaultExtensions;
182
- defaultMarkdownOptions: typeof defaultToMarkdownOptions;
264
+ defaultVisitors: Record<string, LexicalExportVisitor<LexicalNode, Mdast.Content>>;
265
+ defaultExtensions: Record<string, ToMarkdownExtension_2>;
266
+ defaultMarkdownOptions: ToMarkdownOptions_2;
183
267
  };
268
+ /** The default lexical nodes used by the underlying Lexical framework */
184
269
  defaultLexicalNodes: typeof defaultLexicalNodes;
185
- }
270
+ };
186
271
 
272
+ /**
273
+ * Exports the default values for the options used in the markdown import/export steps.
274
+ */
187
275
  export declare const defaultMdxOptionValues: DefaultMdxOptionValues;
188
276
 
189
- export declare const defaultSyntaxExtensions: Record<string, MarkdownParseOptions['syntaxExtensions'][number]>;
190
-
191
- export declare const defaultToMarkdownOptions: ToMarkdownOptions;
192
-
193
- export declare interface ExportLexicalTreeOptions {
277
+ declare interface ExportLexicalTreeOptions {
194
278
  root: RootNode;
195
279
  visitors: LexicalVisitor[];
196
- jsxComponentDescriptors: JsxComponentDescriptors;
280
+ jsxComponentDescriptors: JsxComponentDescriptor[];
197
281
  }
198
282
 
199
- export declare function exportLexicalTreeToMdast({ root, visitors, jsxComponentDescriptors }: ExportLexicalTreeOptions): Mdast.Root;
200
-
201
- export declare function exportMarkdownFromLexical({ root, toMarkdownOptions, toMarkdownExtensions, visitors, jsxComponentDescriptors }: ExportMarkdownFromLexicalOptions): string;
202
-
203
- export declare interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
204
- toMarkdownExtensions: ToMarkdownOptions['extensions'];
283
+ declare interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
284
+ /**
285
+ * the markdown extensions to use
286
+ */
287
+ toMarkdownExtensions: Array<ToMarkdownExtension>;
288
+ /**
289
+ * The options to pass to `toMarkdown`
290
+ */
205
291
  toMarkdownOptions: ToMarkdownOptions;
206
292
  }
207
293
 
@@ -211,11 +297,15 @@ declare type ExtendedEditorConfig = EditorConfig & {
211
297
  };
212
298
  };
213
299
 
214
- export declare interface FrontmatterEditorProps {
300
+ declare interface FrontmatterEditorProps {
215
301
  yaml: string;
216
302
  onChange: (yaml: string) => void;
217
303
  }
218
304
 
305
+ /**
306
+ * Represents {@link https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/ | the frontmatter} of the markdown document.
307
+ * Use {@link "$createFrontmatterNode"} to construct one.
308
+ */
219
309
  export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
220
310
  __yaml: string;
221
311
  static getType(): string;
@@ -230,10 +320,9 @@ export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
230
320
  decorate(editor: LexicalEditor, { theme: { nodeDecoratorComponents: { FrontmatterEditor } } }: ExtendedEditorConfig): JSX.Element;
231
321
  }
232
322
 
233
- export declare interface FrontmatterPayload {
234
- yaml: string;
235
- }
236
-
323
+ /**
324
+ * A lexical node that represents an image. Use {@link "$createImageNode"} to construct one.
325
+ */
237
326
  export declare class ImageNode extends DecoratorNode<JSX.Element> {
238
327
  __src: string;
239
328
  __altText: string;
@@ -254,36 +343,39 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
254
343
  decorate(): JSX.Element;
255
344
  }
256
345
 
257
- export declare interface ImagePayload {
258
- altText: string;
259
- title?: string;
260
- key?: NodeKey;
261
- src: string;
262
- }
263
-
264
- export declare function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, mdastExtensions }: MarkdownParseOptions): void;
265
-
266
- export declare function importMdastTreeToLexical({ root, mdastRoot, visitors }: MdastTreeImportOptions): void;
267
-
268
- export declare type ImportVisitors = Array<MdastImportVisitor<Mdast.Content>>;
269
-
270
346
  declare const IS_BOLD: 1;
271
347
 
272
348
  declare const IS_ITALIC: 2;
273
349
 
274
350
  declare const IS_UNDERLINE: 8;
275
351
 
352
+ /**
353
+ * Defines the structure of a JSX component that can be used within the markdown document.
354
+ */
276
355
  export declare interface JsxComponentDescriptor {
356
+ /**
357
+ * The tag name
358
+ */
277
359
  name: string;
360
+ /**
361
+ * Wether the component is a flow or text component (inline or block)
362
+ */
278
363
  kind: 'flow' | 'text';
364
+ /**
365
+ * The module path from which the component can be imported
366
+ */
279
367
  source: string;
368
+ /**
369
+ * Wether the component is the default export of the module
370
+ */
280
371
  defaultExport?: boolean;
372
+ /**
373
+ * The properties that can be applied to the component
374
+ */
281
375
  props: Array<JsxPropertyDescriptor>;
282
376
  }
283
377
 
284
- export declare type JsxComponentDescriptors = Array<JsxComponentDescriptor>;
285
-
286
- export declare interface JsxEditorProps {
378
+ declare interface JsxEditorProps {
287
379
  kind: JsxKind;
288
380
  attributes: MdxJsxAttribute[];
289
381
  componentName: string;
@@ -292,8 +384,11 @@ export declare interface JsxEditorProps {
292
384
  editor: LexicalEditor;
293
385
  }
294
386
 
295
- export declare type JsxKind = 'text' | 'flow';
387
+ declare type JsxKind = 'text' | 'flow';
296
388
 
389
+ /**
390
+ * A lexical node that represents a JSX element. Use {@link "$createJsxNode"} to construct one.
391
+ */
297
392
  export declare class JsxNode extends DecoratorNode<JSX.Element> {
298
393
  __kind: JsxKind;
299
394
  __name: string;
@@ -315,110 +410,177 @@ export declare class JsxNode extends DecoratorNode<JSX.Element> {
315
410
  decorate(_parentEditor: LexicalEditor, { theme: { nodeDecoratorComponents: { JsxEditor } } }: ExtendedEditorConfig): JSX.Element;
316
411
  }
317
412
 
318
- export declare interface JsxNodeConstructorParams extends JsxPayload {
413
+ /**
414
+ * The parameters of the {@link JsxNode} constructor.
415
+ */
416
+ export declare interface JsxNodeConstructorParams extends CreateJsxNodeOptions {
319
417
  key?: NodeKey;
320
418
  }
321
419
 
322
- export declare interface JsxPayload {
323
- name: string;
324
- kind: JsxKind;
325
- attributes: Array<MdxJsxAttribute>;
326
- state?: SerializedEditorState;
327
- updateFn?: updateFn;
328
- }
329
-
420
+ /**
421
+ * Defines the structure of a JSX component property.
422
+ */
330
423
  export declare interface JsxPropertyDescriptor {
424
+ /**
425
+ * The name of the property
426
+ */
331
427
  name: string;
428
+ /**
429
+ * The type of the property
430
+ */
332
431
  type: 'string' | 'number';
432
+ /**
433
+ * Wether the property is required
434
+ */
333
435
  required?: boolean;
334
436
  }
335
437
 
336
- export declare type LexicalEditorType = {
337
- type: 'lexical';
338
- };
339
-
438
+ /**
439
+ * Implement this interface in order to process mdast node(s) into a lexical tree.
440
+ * This is part of the process that converts the editor contents to markdown.
441
+ */
340
442
  export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Content> {
443
+ /**
444
+ * Return true if the given node is of the type that this visitor can process.
445
+ * You can safely use the node type guard functions (as in $isParagraphNode, $isLinkNode, etc.) here.
446
+ */
341
447
  testLexicalNode?(lexicalNode: LexicalNode): lexicalNode is LN;
448
+ /**
449
+ * Process the given node and manipulate the mdast tree accordingly.
450
+ * @see {@link LexicalNodeVisitParams} and {@link LexicalVisitActions} for more information.
451
+ */
342
452
  visitLexicalNode?(params: LexicalNodeVisitParams<LN>): void;
453
+ /**
454
+ * Return true if the current node should be joined with the previous node.
455
+ * This is necessary due to some inconsistencies between the lexical tree and the mdast tree when it comes to formatting.
456
+ */
343
457
  shouldJoin?(prevNode: Mdast.Content, currentNode: UN): boolean;
458
+ /**
459
+ * Join the current node with the previous node, returning the resulting new node
460
+ * For this to be called by the tree walk, shouldJoin must return true.
461
+ */
344
462
  join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
345
463
  }
346
464
 
465
+ /**
466
+ * The params passed to the {@link LexicalExportVisitor.visitLexicalNode} method.
467
+ */
347
468
  export declare interface LexicalNodeVisitParams<T extends LexicalNode> {
469
+ /**
470
+ * The lexical node that is being visited.
471
+ */
348
472
  lexicalNode: T;
473
+ /**
474
+ * The mdast parent node that the result of the lexical node conversion should be appended to.
475
+ */
349
476
  mdastParent: Mdast.Parent;
477
+ /**
478
+ * A set of actions that can be used to manipulate the mdast tree.
479
+ * These are "convenience" utilities that avoid the repetitive boilerplate of creating mdast nodes.
480
+ */
350
481
  actions: LexicalVisitActions<T>;
351
482
  }
352
483
 
484
+ /**
485
+ * A set of covenience utilities to manipulate the mdast tree when processing lexical nodes.
486
+ */
353
487
  export declare interface LexicalVisitActions<T extends LexicalNode> {
488
+ /**
489
+ * Iterate over the immediate children of a lexical node with the given mdast node as a parent.
490
+ */
354
491
  visitChildren(node: T, mdastParent: Mdast.Parent): void;
492
+ /**
493
+ * Create a new mdast node with the given type, and props.
494
+ * Iterate over the immediate children of the current lexical node with the new mdast node as a parent.
495
+ * @param hasChildren - true by default. Pass false to skip iterating over the lexical node children.
496
+ */
355
497
  addAndStepInto(type: string, props?: Record<string, unknown>, hasChildren?: boolean): void;
498
+ /**
499
+ * Append a new mdast node to a parent node.
500
+ * @param parentNode - the mdast parent node to append the new node to.
501
+ * @param node - the mdast node to append.
502
+ */
356
503
  appendToParent<T extends Mdast.Parent>(parentNode: T, node: T['children'][number]): T['children'][number] | Mdast.Root;
504
+ /**
505
+ * Used when processing JSX nodes so that later, the correct import statement can be added to the document.
506
+ * @param componentName - the name of the component that has to be imported.
507
+ * @see {@link JsxComponentDescriptor}
508
+ */
357
509
  registerReferredComponent(componentName: string): void;
358
510
  }
359
511
 
360
- export declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
512
+ declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
361
513
 
514
+ /**
515
+ * Options that control how the the markdown input string is parsed into a tree.
516
+ * @see {@link https://github.com/syntax-tree/mdast-util-from-markdown | fromMarkdown}
517
+ */
362
518
  export declare interface MarkdownParseOptions extends Omit<MdastTreeImportOptions, 'mdastRoot'> {
363
519
  markdown: string;
364
520
  syntaxExtensions: NonNullable<ParseOptions['extensions']>;
365
521
  mdastExtensions: NonNullable<FromMarkdownOptions['mdastExtensions']>;
366
522
  }
367
523
 
368
- export declare const MdastAdmonitionVisitor: MdastImportVisitor<ContainerDirective>;
369
-
370
- export declare const MdastBlockQuoteVisitor: MdastImportVisitor<Mdast.Blockquote>;
371
-
372
- export declare const MdastCodeVisitor: MdastImportVisitor<Mdast.Code>;
373
-
374
- export declare const MdastFormattingVisitor: MdastImportVisitor<Mdast.Emphasis | Mdast.Strong | MdxJsxTextElement_2>;
375
-
376
- export declare const MdastFrontmatterVisitor: MdastImportVisitor<Mdast.YAML>;
377
-
378
- export declare const MdastHeadingVisitor: MdastImportVisitor<Mdast.Heading>;
379
-
380
- export declare const MdastImageVisitor: MdastImportVisitor<Mdast.Image>;
524
+ /**
525
+ * An extension for the `fromMarkdown` utility tree construction.
526
+ */
527
+ declare type MdastExtension = MarkdownParseOptions['mdastExtensions'][number];
381
528
 
529
+ /**
530
+ * Implement this interface to convert certian mdast nodes into lexical nodes.
531
+ * @typeParam UN - The type of the mdast node that is being visited.
532
+ */
382
533
  export declare interface MdastImportVisitor<UN extends Mdast.Content> {
534
+ /**
535
+ * The test function that determines if this visitor should be used for the given node.
536
+ * As a convenience, you can also pass a string here, which will be compared to the node's type.
537
+ */
383
538
  testNode: ((mdastNode: Mdast.Content | Mdast.Root) => boolean) | string;
539
+ /**
540
+ * The function that is called when the node is visited. See {@link MdastVisitParams} for details.
541
+ */
384
542
  visitNode(params: MdastVisitParams<UN>): void;
385
543
  }
386
544
 
387
- export declare const MdastInlineCodeVisitor: MdastImportVisitor<Mdast.InlineCode>;
388
-
389
- export declare const MdastLinkVisitor: MdastImportVisitor<Mdast.Link>;
390
-
391
- export declare const MdastListItemVisitor: MdastImportVisitor<Mdast.ListItem>;
392
-
393
- export declare const MdastListVisitor: MdastImportVisitor<Mdast.List>;
394
-
395
- export declare const MdastMdxJsEsmVisitor: MdastImportVisitor<MdxjsEsm>;
396
-
397
- export declare const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement_2>;
398
-
399
- export declare const MdastParagraphVisitor: MdastImportVisitor<Mdast.Paragraph>;
400
-
401
- export declare const MdastRootVisitor: MdastImportVisitor<Mdast.Content>;
402
-
403
- export declare const MdastTableVisitor: MdastImportVisitor<Mdast.Table>;
404
-
405
- export declare const MdastTextVisitor: MdastImportVisitor<Mdast.Text>;
406
-
407
- export declare const MdastThematicBreakVisitor: MdastImportVisitor<Mdast.ThematicBreak>;
408
-
545
+ /**
546
+ * The options of the tree import utility. Not meant to be used directly.
547
+ */
409
548
  export declare interface MdastTreeImportOptions {
410
549
  root: RootNode;
411
550
  visitors: Array<MdastImportVisitor<Mdast.Content>>;
412
551
  mdastRoot: Mdast.Root;
413
552
  }
414
553
 
554
+ /**
555
+ * A set of actions that can be used to modify the lexical tree while visiting the mdast tree.
556
+ */
415
557
  export declare interface MdastVisitActions {
558
+ /**
559
+ * Iterate the children of the node with the lexical node as the parent.
560
+ */
416
561
  visitChildren(node: Mdast.Parent, lexicalParent: LexicalNode): void;
562
+ /**
563
+ * Add the given node to the lexical tree, and iterate the current mdast node's children with the newly created lexical node as a parent.
564
+ */
417
565
  addAndStepInto(lexicalNode: LexicalNode): void;
566
+ /**
567
+ * Adds formatting as a context for the current node and its children.
568
+ * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
569
+ */
418
570
  addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE): void;
571
+ /**
572
+ * Access the current formatting context.
573
+ */
419
574
  getParentFormatting(): number;
420
575
  }
421
576
 
577
+ /**
578
+ * Parameters passe to the {@link MdastImportVisitor.visitNode} function.
579
+ * @param mdastNode - The node that is currently being visited.
580
+ * @param lexicalParent - The parent lexical node to which the results of the processing should be added.
581
+ * @param actions - A set of convenience utilities that can be used to add nodes to the lexical tree.
582
+ * @typeParam T - The type of the mdast node that is being visited.
583
+ */
422
584
  export declare interface MdastVisitParams<T extends Mdast.Content> {
423
585
  mdastNode: T;
424
586
  lexicalParent: LexicalNode;
@@ -462,9 +624,9 @@ export declare interface MDXEditorProps {
462
624
  headMarkdown?: string;
463
625
  /**
464
626
  * The configuration for the JSX components used in the markdown content.
465
- * @see the {@link JsxComponentDescriptors} interface for more details.
627
+ * @see the {@link JsxComponentDescriptor} interface for more details.
466
628
  */
467
- jsxComponentDescriptors?: JsxComponentDescriptors;
629
+ jsxComponentDescriptors?: JsxComponentDescriptor[];
468
630
  /**
469
631
  * The list of suggestions to be shown in the link autocomplete dialog dropdown.
470
632
  */
@@ -481,12 +643,35 @@ export declare interface MDXEditorProps {
481
643
  * The initial view mode for the editor. Defaults to `ViewMode.editor`.
482
644
  */
483
645
  viewMode?: ViewMode;
646
+ /**
647
+ * Triggered when the markdown content changes.
648
+ */
484
649
  onChange?: (markdown: string) => void;
650
+ /**
651
+ * The CSS class name to be applied to the wrapper element of the component.
652
+ */
485
653
  className?: string;
654
+ /**
655
+ * The CSS class name to be applied to the content editable element.
656
+ */
486
657
  contentEditableClassName?: string;
658
+ /**
659
+ * The options to be used when parsing the markdown content.
660
+ * @see the {@link MarkdownParseOptions} interface for more details.
661
+ */
487
662
  markdownParseOptions?: Partial<MarkdownParseOptions>;
663
+ /**
664
+ * The {@link https://lexical.dev/ Lexical nodes} used by the editor.
665
+ */
488
666
  lexicalNodes?: Klass<LexicalNode>[];
667
+ /**
668
+ * The options used when converting the lexical tree to markdown.
669
+ */
489
670
  lexicalConvertOptions?: Partial<ExportMarkdownFromLexicalOptions>;
671
+ /**
672
+ * The supported code block languages.
673
+ */
674
+ codeBlockLanguages?: Record<string, string>;
490
675
  }
491
676
 
492
677
  declare interface NodeDecoratorComponents {
@@ -511,7 +696,7 @@ export declare interface SandpackConfig {
511
696
  presets: Array<SandpackPreset>;
512
697
  }
513
698
 
514
- export declare interface SandpackEditorProps {
699
+ declare interface SandpackEditorProps {
515
700
  code: string;
516
701
  nodeKey: string;
517
702
  meta: string;
@@ -519,11 +704,9 @@ export declare interface SandpackEditorProps {
519
704
  focusEmitter: VoidEmitter;
520
705
  }
521
706
 
522
- export declare type SandpackEditorType = {
523
- type: 'sandpack';
524
- nodeKey: string;
525
- };
526
-
707
+ /**
708
+ * A lexical node that represents a live code block that gets a preview. Use {@link "$createSandpackNode"} to construct one.
709
+ */
527
710
  export declare class SandpackNode extends DecoratorNode<JSX.Element> {
528
711
  __code: string;
529
712
  __meta: string;
@@ -549,12 +732,6 @@ export declare class SandpackNode extends DecoratorNode<JSX.Element> {
549
732
  decorate(_parentEditor: LexicalEditor, { theme: { nodeDecoratorComponents: { SandpackEditor } } }: ExtendedEditorConfig): JSX.Element;
550
733
  }
551
734
 
552
- export declare interface SandpackPayload {
553
- code: string;
554
- meta: string;
555
- language: string;
556
- }
557
-
558
735
  /**
559
736
  * Defines a single preset that can be used to create a sandbox.
560
737
  */
@@ -604,22 +781,34 @@ export declare interface SandpackPreset {
604
781
 
605
782
  declare type SandpackProviderProps = React_2.ComponentProps<typeof SandpackProvider>;
606
783
 
784
+ /**
785
+ * A serialized representation of an {@link AdmonitionNode}.
786
+ */
607
787
  export declare type SerializedAdmonitionNode = Spread<{
608
788
  type: 'admonition';
609
789
  kind: AdmonitionKind;
610
790
  version: 1;
611
791
  }, SerializedElementNode>;
612
792
 
613
- export declare type SerializedCodeBlockNode = Spread<CodeBlockPayload & {
793
+ /**
794
+ * A serialized representation of an {@link CodeBlockNode}.
795
+ */
796
+ export declare type SerializedCodeBlockNode = Spread<CreateCodeBlockNodeOptions & {
614
797
  type: 'codeblock';
615
798
  version: 1;
616
799
  }, SerializedLexicalNode>;
617
800
 
801
+ /**
802
+ * A serialized representation of an {@link FrontmatterNode}.
803
+ */
618
804
  export declare type SerializedFrontmatterNode = Spread<{
619
805
  yaml: string;
620
806
  version: 1;
621
807
  }, SerializedLexicalNode>;
622
808
 
809
+ /**
810
+ * A serialized representation of an {@link ImageNode}.
811
+ */
623
812
  export declare type SerializedImageNode = Spread<{
624
813
  altText: string;
625
814
  title?: string;
@@ -628,26 +817,44 @@ export declare type SerializedImageNode = Spread<{
628
817
  version: 1;
629
818
  }, SerializedLexicalNode>;
630
819
 
631
- export declare type SerializedJsxNode = Spread<Omit<JsxPayload, 'updateFn'> & {
820
+ /**
821
+ * A serialized representation of a {@link JsxNode}.
822
+ */
823
+ export declare type SerializedJsxNode = Spread<Omit<CreateJsxNodeOptions, 'updateFn'> & {
632
824
  version: 1;
633
825
  type: 'jsx';
634
826
  }, SerializedLexicalNode>;
635
827
 
636
- export declare type SerializedSandpackNode = Spread<SandpackPayload & {
828
+ /**
829
+ * A serialized representation of an {@link SandpackNode}.
830
+ */
831
+ export declare type SerializedSandpackNode = Spread<CreateSandpackNodeOptions & {
637
832
  type: 'sandpack';
638
833
  version: 1;
639
834
  }, SerializedLexicalNode>;
640
835
 
836
+ /**
837
+ * A serialized representation of a {@link TableNode}.
838
+ */
641
839
  export declare type SerializedTableNode = Spread<{
642
840
  mdastNode: Mdast.Table;
643
841
  }, SerializedLexicalNode>;
644
842
 
645
- export declare interface TableEditorProps {
843
+ /**
844
+ * An extension for the `fromMarkdown` utility markdown parse.
845
+ */
846
+ declare type SyntaxExtension = MarkdownParseOptions['syntaxExtensions'][number];
847
+
848
+ declare interface TableEditorProps {
646
849
  parentEditor: LexicalEditor;
647
850
  lexicalTable: TableNode;
648
851
  mdastNode: Mdast.Table;
649
852
  }
650
853
 
854
+ /**
855
+ * A lexical node that represents a table, with features specific to the markdown tables.
856
+ * Use {@link "$createTableNode"} to construct one.
857
+ */
651
858
  export declare class TableNode extends DecoratorNode<JSX.Element> {
652
859
  __mdastNode: Mdast.Table;
653
860
  focusEmitter: {
@@ -677,8 +884,14 @@ export declare class TableNode extends DecoratorNode<JSX.Element> {
677
884
  isInline(): false;
678
885
  }
679
886
 
887
+ declare type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
888
+
680
889
  export { ToMarkdownOptions }
681
890
 
891
+ /**
892
+ * A dictionary with all built-in Toolbar components that can be used within the toolbar.
893
+ * @see To customize the toolbar, pass an array of what you need to the {@link MDXEditorProps.toolbarComponents}.
894
+ */
682
895
  export declare const ToolbarComponents: {
683
896
  BlockTypeSelect: () => React_2.JSX.Element;
684
897
  BoldItalicUnderlineButtons: React_2.FC<{}>;
@@ -712,9 +925,9 @@ export declare type updateFn = (node: LexicalNode) => void;
712
925
  * markdown - plain text markdown edit mode.
713
926
  * diff - side by side comparison with the original markdown (passed as `headMarkdown`).
714
927
  */
715
- export declare type ViewMode = 'editor' | 'markdown' | 'diff';
928
+ declare type ViewMode = 'editor' | 'markdown' | 'diff';
716
929
 
717
- export declare interface VoidEmitter {
930
+ declare interface VoidEmitter {
718
931
  publish: () => void;
719
932
  subscribe: (callback: () => void) => void;
720
933
  }