@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.cjs +1 -1
- package/dist/index.d.ts +383 -170
- package/dist/index.js +83 -73
- package/dist/style.css +133 -127
- package/package.json +1 -1
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 {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
147
|
+
declare interface CodeBlockEditorProps extends SandpackEditorProps {
|
|
99
148
|
language: string;
|
|
100
149
|
}
|
|
101
150
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
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
|
-
|
|
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
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
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
|
-
|
|
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
|
-
|
|
244
|
+
/**
|
|
245
|
+
* The default set of lexical nodes used in the editor.
|
|
246
|
+
*/
|
|
247
|
+
declare const defaultLexicalNodes: Record<string, Klass<LexicalNode>>;
|
|
172
248
|
|
|
173
|
-
|
|
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:
|
|
176
|
-
defaultSyntaxExtensions:
|
|
177
|
-
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:
|
|
181
|
-
defaultExtensions:
|
|
182
|
-
defaultMarkdownOptions:
|
|
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
|
-
|
|
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:
|
|
280
|
+
jsxComponentDescriptors: JsxComponentDescriptor[];
|
|
197
281
|
}
|
|
198
282
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
|
|
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
|
-
|
|
234
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
323
|
-
|
|
324
|
-
|
|
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
|
-
|
|
337
|
-
|
|
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
|
-
|
|
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
|
-
|
|
369
|
-
|
|
370
|
-
|
|
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
|
-
|
|
388
|
-
|
|
389
|
-
|
|
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
|
|
627
|
+
* @see the {@link JsxComponentDescriptor} interface for more details.
|
|
466
628
|
*/
|
|
467
|
-
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
|
-
|
|
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
|
-
|
|
523
|
-
|
|
524
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
928
|
+
declare type ViewMode = 'editor' | 'markdown' | 'diff';
|
|
716
929
|
|
|
717
|
-
|
|
930
|
+
declare interface VoidEmitter {
|
|
718
931
|
publish: () => void;
|
|
719
932
|
subscribe: (callback: () => void) => void;
|
|
720
933
|
}
|