@mdxeditor/editor 0.0.1 → 0.0.5-development
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/LICENSE +2 -2
- package/README.md +15 -75
- package/dist/FormatConstants.d.ts +9 -0
- package/dist/FormatConstants.js +10 -0
- package/dist/MDXEditor.d.ts +103 -0
- package/dist/MDXEditor.js +144 -0
- package/dist/directive-editors/AdmonitionDirectiveDescriptor.d.ts +17 -0
- package/dist/directive-editors/AdmonitionDirectiveDescriptor.js +28 -0
- package/dist/directive-editors/GenericDirectiveEditor.d.ts +8 -0
- package/dist/directive-editors/GenericDirectiveEditor.js +32 -0
- package/dist/exportMarkdownFromLexical.d.ts +138 -0
- package/dist/exportMarkdownFromLexical.js +239 -0
- package/dist/gurx/index.d.ts +3 -0
- package/dist/gurx/react.d.ts +152 -0
- package/dist/gurx/react.js +206 -0
- package/dist/gurx/realm.d.ts +148 -0
- package/dist/gurx/realm.js +489 -0
- package/dist/gurx/realmFactory.d.ts +79 -0
- package/dist/gurx/realmFactory.js +32 -0
- package/dist/icons/add_column.svg.js +5 -0
- package/dist/icons/add_photo.svg.js +5 -0
- package/dist/icons/add_row.svg.js +5 -0
- package/dist/icons/admonition.svg.js +5 -0
- package/dist/icons/arrow_drop_down.svg.js +5 -0
- package/dist/icons/check.svg.js +5 -0
- package/dist/icons/check_small.svg.js +5 -0
- package/dist/icons/close.svg.js +5 -0
- package/dist/icons/code.svg.js +5 -0
- package/dist/icons/content_copy.svg.js +5 -0
- package/dist/icons/delete_big.svg.js +5 -0
- package/dist/icons/delete_small.svg.js +5 -0
- package/dist/icons/difference.svg.js +5 -0
- package/dist/icons/edit.svg.js +5 -0
- package/dist/icons/extension.svg.js +7 -0
- package/dist/icons/format_align_center.svg.js +5 -0
- package/dist/icons/format_align_left.svg.js +5 -0
- package/dist/icons/format_align_right.svg.js +5 -0
- package/dist/icons/format_bold.svg.js +5 -0
- package/dist/icons/format_italic.svg.js +5 -0
- package/dist/icons/format_list_bulleted.svg.js +5 -0
- package/dist/icons/format_list_checked.svg.js +5 -0
- package/dist/icons/format_list_numbered.svg.js +5 -0
- package/dist/icons/format_underlined.svg.js +5 -0
- package/dist/icons/frame_source.svg.js +5 -0
- package/dist/icons/frontmatter.svg.js +5 -0
- package/dist/icons/horizontal_rule.svg.js +5 -0
- package/dist/icons/insert_col_left.svg.js +5 -0
- package/dist/icons/insert_col_right.svg.js +5 -0
- package/dist/icons/insert_row_above.svg.js +5 -0
- package/dist/icons/insert_row_below.svg.js +5 -0
- package/dist/icons/link.svg.js +5 -0
- package/dist/icons/link_off.svg.js +5 -0
- package/dist/icons/markdown.svg.js +5 -0
- package/dist/icons/more_horiz.svg.js +5 -0
- package/dist/icons/more_vert.svg.js +5 -0
- package/dist/icons/open_in_new.svg.js +5 -0
- package/dist/icons/redo.svg.js +5 -0
- package/dist/icons/rich_text.svg.js +5 -0
- package/dist/icons/sandpack.svg.js +5 -0
- package/dist/icons/settings.svg.js +5 -0
- package/dist/icons/table.svg.js +5 -0
- package/dist/icons/undo.svg.js +5 -0
- package/dist/importMarkdownToLexical.d.ts +101 -0
- package/dist/importMarkdownToLexical.js +93 -0
- package/dist/index.d.ts +62 -726
- package/dist/index.js +207 -4501
- package/dist/jsx-editors/GenericJsxEditor.d.ts +8 -0
- package/dist/jsx-editors/GenericJsxEditor.js +56 -0
- package/dist/plugins/codeblock/CodeBlockNode.d.ts +100 -0
- package/dist/plugins/codeblock/CodeBlockNode.js +158 -0
- package/dist/plugins/codeblock/CodeBlockVisitor.d.ts +4 -0
- package/dist/plugins/codeblock/CodeBlockVisitor.js +14 -0
- package/dist/plugins/codeblock/MdastCodeVisitor.d.ts +3 -0
- package/dist/plugins/codeblock/MdastCodeVisitor.js +16 -0
- package/dist/plugins/codeblock/index.d.ts +787 -0
- package/dist/plugins/codeblock/index.js +73 -0
- package/dist/plugins/codemirror/CodeMirrorEditor.d.ts +3 -0
- package/dist/plugins/codemirror/CodeMirrorEditor.js +42 -0
- package/dist/plugins/codemirror/index.d.ts +1038 -0
- package/dist/plugins/codemirror/index.js +62 -0
- package/dist/plugins/core/GenericHTMLNode.d.ts +38 -0
- package/dist/plugins/core/GenericHTMLNode.js +117 -0
- package/dist/plugins/core/Icon.d.ts +6 -0
- package/dist/plugins/core/Icon.js +96 -0
- package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.d.ts +4 -0
- package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.js +15 -0
- package/dist/plugins/core/LexicalLinebreakVisitor.d.ts +4 -0
- package/dist/plugins/core/LexicalLinebreakVisitor.js +10 -0
- package/dist/plugins/core/LexicalParagraphVisitor.d.ts +4 -0
- package/dist/plugins/core/LexicalParagraphVisitor.js +10 -0
- package/dist/plugins/core/LexicalRootVisitor.d.ts +4 -0
- package/dist/plugins/core/LexicalRootVisitor.js +10 -0
- package/dist/plugins/core/LexicalTextVisitor.d.ts +5 -0
- package/dist/plugins/core/LexicalTextVisitor.js +102 -0
- package/dist/plugins/core/MdastBreakVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastBreakVisitor.js +10 -0
- package/dist/plugins/core/MdastFormattingVisitor.d.ts +4 -0
- package/dist/plugins/core/MdastFormattingVisitor.js +36 -0
- package/dist/plugins/core/MdastHTMLNode.d.ts +13 -0
- package/dist/plugins/core/MdastHTMLNode.js +122 -0
- package/dist/plugins/core/MdastHTMLVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastHTMLVisitor.js +12 -0
- package/dist/plugins/core/MdastInlineCodeVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastInlineCodeVisitor.js +27 -0
- package/dist/plugins/core/MdastParagraphVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastParagraphVisitor.js +15 -0
- package/dist/plugins/core/MdastRootVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastRootVisitor.js +9 -0
- package/dist/plugins/core/MdastTextVisitor.d.ts +3 -0
- package/dist/plugins/core/MdastTextVisitor.js +10 -0
- package/dist/plugins/core/NestedLexicalEditor.d.ts +92 -0
- package/dist/plugins/core/NestedLexicalEditor.js +185 -0
- package/dist/plugins/core/PropertyPopover.d.ts +23 -0
- package/dist/plugins/core/PropertyPopover.js +39 -0
- package/dist/plugins/core/SharedHistoryPlugin.d.ts +2 -0
- package/dist/plugins/core/SharedHistoryPlugin.js +10 -0
- package/dist/plugins/core/index.d.ts +583 -0
- package/dist/plugins/core/index.js +490 -0
- package/dist/plugins/core/ui/DownshiftAutoComplete.d.ts +15 -0
- package/dist/plugins/core/ui/DownshiftAutoComplete.js +83 -0
- package/dist/plugins/core/ui/PopoverUtils.d.ts +4 -0
- package/dist/plugins/core/ui/PopoverUtils.js +17 -0
- package/dist/plugins/diff-source/DiffSourceWrapper.d.ts +4 -0
- package/dist/plugins/diff-source/DiffSourceWrapper.js +14 -0
- package/dist/plugins/diff-source/DiffViewer.d.ts +2 -0
- package/dist/plugins/diff-source/DiffViewer.js +59 -0
- package/dist/plugins/diff-source/SourceEditor.d.ts +4 -0
- package/dist/plugins/diff-source/SourceEditor.js +53 -0
- package/dist/plugins/diff-source/index.d.ts +725 -0
- package/dist/plugins/diff-source/index.js +56 -0
- package/dist/plugins/directives/DirectiveNode.d.ts +51 -0
- package/dist/plugins/directives/DirectiveNode.js +92 -0
- package/dist/plugins/directives/DirectiveVisitor.d.ts +4 -0
- package/dist/plugins/directives/DirectiveVisitor.js +10 -0
- package/dist/plugins/directives/MdastDirectiveVisitor.d.ts +3 -0
- package/dist/plugins/directives/MdastDirectiveVisitor.js +13 -0
- package/dist/plugins/directives/index.d.ts +773 -0
- package/dist/plugins/directives/index.js +53 -0
- package/dist/plugins/frontmatter/FrontmatterEditor.d.ts +6 -0
- package/dist/plugins/frontmatter/FrontmatterEditor.js +85 -0
- package/dist/plugins/frontmatter/FrontmatterNode.d.ts +35 -0
- package/dist/plugins/frontmatter/FrontmatterNode.js +71 -0
- package/dist/plugins/frontmatter/LexicalFrontmatterVisitor.d.ts +4 -0
- package/dist/plugins/frontmatter/LexicalFrontmatterVisitor.js +10 -0
- package/dist/plugins/frontmatter/MdastFrontmatterVisitor.d.ts +3 -0
- package/dist/plugins/frontmatter/MdastFrontmatterVisitor.js +10 -0
- package/dist/plugins/frontmatter/index.d.ts +717 -0
- package/dist/plugins/frontmatter/index.js +76 -0
- package/dist/plugins/headings/LexicalHeadingVisitor.d.ts +4 -0
- package/dist/plugins/headings/LexicalHeadingVisitor.js +11 -0
- package/dist/plugins/headings/MdastHeadingVisitor.d.ts +3 -0
- package/dist/plugins/headings/MdastHeadingVisitor.js +10 -0
- package/dist/plugins/headings/index.d.ts +707 -0
- package/dist/plugins/headings/index.js +69 -0
- package/dist/plugins/image/ImageDialog.d.ts +2 -0
- package/dist/plugins/image/ImageDialog.js +70 -0
- package/dist/plugins/image/ImageEditor.d.ts +10 -0
- package/dist/plugins/image/ImageEditor.js +227 -0
- package/dist/plugins/image/ImageNode.d.ts +65 -0
- package/dist/plugins/image/ImageNode.js +152 -0
- package/dist/plugins/image/ImageResizer.d.ts +18 -0
- package/dist/plugins/image/ImageResizer.js +214 -0
- package/dist/plugins/image/LexicalImageVisitor.d.ts +4 -0
- package/dist/plugins/image/LexicalImageVisitor.js +35 -0
- package/dist/plugins/image/MdastImageVisitor.d.ts +6 -0
- package/dist/plugins/image/MdastImageVisitor.js +87 -0
- package/dist/plugins/image/index.d.ts +804 -0
- package/dist/plugins/image/index.js +300 -0
- package/dist/plugins/jsx/LexicalJsxNode.d.ts +54 -0
- package/dist/plugins/jsx/LexicalJsxNode.js +102 -0
- package/dist/plugins/jsx/LexicalJsxVisitor.d.ts +4 -0
- package/dist/plugins/jsx/LexicalJsxVisitor.js +24 -0
- package/dist/plugins/jsx/MdastMdxJsEsmVisitor.d.ts +3 -0
- package/dist/plugins/jsx/MdastMdxJsEsmVisitor.js +8 -0
- package/dist/plugins/jsx/MdastMdxJsxElementVisitor.d.ts +3 -0
- package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js +12 -0
- package/dist/plugins/jsx/index.d.ts +779 -0
- package/dist/plugins/jsx/index.js +82 -0
- package/dist/plugins/link/AutoLinkPlugin.d.ts +9 -0
- package/dist/plugins/link/AutoLinkPlugin.js +18 -0
- package/dist/plugins/link/LexicalLinkVisitor.d.ts +4 -0
- package/dist/plugins/link/LexicalLinkVisitor.js +10 -0
- package/dist/plugins/link/MdastLinkVisitor.d.ts +3 -0
- package/dist/plugins/link/MdastLinkVisitor.js +14 -0
- package/dist/plugins/link/index.d.ts +101 -0
- package/dist/plugins/link/index.js +33 -0
- package/dist/plugins/link-dialog/LinkDialog.d.ts +16 -0
- package/dist/plugins/link-dialog/LinkDialog.js +148 -0
- package/dist/plugins/link-dialog/index.d.ts +669 -0
- package/dist/plugins/link-dialog/index.js +254 -0
- package/dist/plugins/lists/LexicalListItemVisitor.d.ts +4 -0
- package/dist/plugins/lists/LexicalListItemVisitor.js +23 -0
- package/dist/plugins/lists/LexicalListVisitor.d.ts +4 -0
- package/dist/plugins/lists/LexicalListVisitor.js +13 -0
- package/dist/plugins/lists/MdastListItemVisitor.d.ts +3 -0
- package/dist/plugins/lists/MdastListItemVisitor.js +10 -0
- package/dist/plugins/lists/MdastListVisitor.d.ts +3 -0
- package/dist/plugins/lists/MdastListVisitor.js +20 -0
- package/dist/plugins/lists/index.d.ts +703 -0
- package/dist/plugins/lists/index.js +122 -0
- package/dist/plugins/markdown-shortcut/index.d.ts +80 -0
- package/dist/plugins/markdown-shortcut/index.js +90 -0
- package/dist/plugins/quote/LexicalQuoteVisitor.d.ts +4 -0
- package/dist/plugins/quote/LexicalQuoteVisitor.js +12 -0
- package/dist/plugins/quote/MdastBlockQuoteVisitor.d.ts +3 -0
- package/dist/plugins/quote/MdastBlockQuoteVisitor.js +10 -0
- package/dist/plugins/quote/index.d.ts +480 -0
- package/dist/plugins/quote/index.js +26 -0
- package/dist/plugins/sandpack/SandpackEditor.d.ts +7 -0
- package/dist/plugins/sandpack/SandpackEditor.js +37 -0
- package/dist/plugins/sandpack/index.d.ts +1077 -0
- package/dist/plugins/sandpack/index.js +93 -0
- package/dist/plugins/sandpack/useCodeMirrorRef.d.ts +4 -0
- package/dist/plugins/sandpack/useCodeMirrorRef.js +96 -0
- package/dist/plugins/table/LexicalTableVisitor.d.ts +4 -0
- package/dist/plugins/table/LexicalTableVisitor.js +10 -0
- package/dist/plugins/table/MdastTableVisitor.d.ts +3 -0
- package/dist/plugins/table/MdastTableVisitor.js +10 -0
- package/dist/plugins/table/TableEditor.d.ts +21 -0
- package/dist/plugins/table/TableEditor.js +388 -0
- package/dist/plugins/table/TableNode.d.ts +52 -0
- package/dist/plugins/table/TableNode.js +152 -0
- package/dist/plugins/table/index.d.ts +704 -0
- package/dist/plugins/table/index.js +69 -0
- package/dist/plugins/thematic-break/LexicalThematicBreakVisitor.d.ts +4 -0
- package/dist/plugins/thematic-break/LexicalThematicBreakVisitor.js +10 -0
- package/dist/plugins/thematic-break/MdastThematicBreakVisitor.d.ts +3 -0
- package/dist/plugins/thematic-break/MdastThematicBreakVisitor.js +10 -0
- package/dist/plugins/thematic-break/index.d.ts +693 -0
- package/dist/plugins/thematic-break/index.js +39 -0
- package/dist/plugins/toolbar/components/BlockTypeSelect.d.ts +6 -0
- package/dist/plugins/toolbar/components/BlockTypeSelect.js +54 -0
- package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.d.ts +5 -0
- package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.js +33 -0
- package/dist/plugins/toolbar/components/ChangeAdmonitionType.d.ts +6 -0
- package/dist/plugins/toolbar/components/ChangeAdmonitionType.js +30 -0
- package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.d.ts +7 -0
- package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js +32 -0
- package/dist/plugins/toolbar/components/CodeToggle.d.ts +6 -0
- package/dist/plugins/toolbar/components/CodeToggle.js +19 -0
- package/dist/plugins/toolbar/components/CreateLink.d.ts +6 -0
- package/dist/plugins/toolbar/components/CreateLink.js +20 -0
- package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.d.ts +18 -0
- package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js +25 -0
- package/dist/plugins/toolbar/components/InsertAdmonition.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertAdmonition.js +29 -0
- package/dist/plugins/toolbar/components/InsertCodeBlock.d.ts +7 -0
- package/dist/plugins/toolbar/components/InsertCodeBlock.js +20 -0
- package/dist/plugins/toolbar/components/InsertFrontmatter.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertFrontmatter.js +24 -0
- package/dist/plugins/toolbar/components/InsertImage.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertImage.js +14 -0
- package/dist/plugins/toolbar/components/InsertSandpack.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertSandpack.js +13 -0
- package/dist/plugins/toolbar/components/InsertTable.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertTable.js +20 -0
- package/dist/plugins/toolbar/components/InsertThematicBreak.d.ts +6 -0
- package/dist/plugins/toolbar/components/InsertThematicBreak.js +11 -0
- package/dist/plugins/toolbar/components/KitchenSinkToolbar.d.ts +7 -0
- package/dist/plugins/toolbar/components/KitchenSinkToolbar.js +58 -0
- package/dist/plugins/toolbar/components/ListsToggle.d.ts +7 -0
- package/dist/plugins/toolbar/components/ListsToggle.js +23 -0
- package/dist/plugins/toolbar/components/ShowSandpackInfo.d.ts +7 -0
- package/dist/plugins/toolbar/components/ShowSandpackInfo.js +31 -0
- package/dist/plugins/toolbar/components/UndoRedo.d.ts +5 -0
- package/dist/plugins/toolbar/components/UndoRedo.js +58 -0
- package/dist/plugins/toolbar/index.d.ts +564 -0
- package/dist/plugins/toolbar/index.js +40 -0
- package/dist/plugins/toolbar/primitives/DialogButton.d.ts +40 -0
- package/dist/plugins/toolbar/primitives/DialogButton.js +114 -0
- package/dist/plugins/toolbar/primitives/TooltipWrap.d.ts +8 -0
- package/dist/plugins/toolbar/primitives/TooltipWrap.js +12 -0
- package/dist/plugins/toolbar/primitives/select.d.ts +50 -0
- package/dist/plugins/toolbar/primitives/select.js +55 -0
- package/dist/plugins/toolbar/primitives/toolbar.d.ts +163 -0
- package/dist/plugins/toolbar/primitives/toolbar.js +115 -0
- package/dist/style.css +1093 -288
- package/dist/styles/globals.css.js +4 -0
- package/dist/styles/lexical-theme.module.css.js +62 -0
- package/dist/styles/lexicalTheme.d.ts +2 -0
- package/dist/styles/lexicalTheme.js +31 -0
- package/dist/styles/ui.module.css.js +311 -0
- package/dist/utils/detectMac.d.ts +3 -0
- package/dist/utils/detectMac.js +13 -0
- package/dist/utils/fp.d.ts +47 -0
- package/dist/utils/fp.js +44 -0
- package/dist/utils/isPartOftheEditorUI.d.ts +1 -0
- package/dist/utils/isPartOftheEditorUI.js +12 -0
- package/dist/utils/lexicalHelpers.d.ts +11 -0
- package/dist/utils/lexicalHelpers.js +80 -0
- package/dist/utils/makeHslTransparent.d.ts +1 -0
- package/dist/utils/makeHslTransparent.js +6 -0
- package/dist/utils/mergeStyleAttributes.d.ts +1 -0
- package/dist/utils/mergeStyleAttributes.js +22 -0
- package/dist/utils/uuid4.d.ts +1 -0
- package/dist/utils/uuid4.js +10 -0
- package/dist/utils/voidEmitter.d.ts +14 -0
- package/dist/utils/voidEmitter.js +15 -0
- package/dist/utils/whitespaceConversion.d.ts +2 -0
- package/dist/utils/whitespaceConversion.js +9 -0
- package/package.json +326 -39
- package/dist/index.cjs +0 -1
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2023 Petyo Ivanov
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,88 +1,28 @@
|
|
|
1
|
-
#
|
|
1
|
+
# MDXEditor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+

|
|
4
|
+

|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
> Because markdown editing can be even more delightful.
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-

|
|
10
|
-

|
|
11
|
-
|
|
12
|
-
The markdown import/export utility supports **extensible** and **configurable** markdown interoperability with Lexical.
|
|
13
|
-
|
|
14
|
-
Unlike the built-in Lexical support, this implementation uses [Markdown Abstract Syntax Tree](https://github.com/syntax-tree/mdast) with the mdx extension turned on.
|
|
15
|
-
This allows support for html tags (like `<u>underline</u>`) and the editing and configuration of React components. It also supports configuration of the markdown output format.
|
|
16
|
-
|
|
17
|
-
Out of the box, the following syntax is supported:
|
|
18
|
-
|
|
19
|
-
- Paragraphs
|
|
20
|
-
- Bold, italic, underline formatting
|
|
21
|
-
- Headings
|
|
22
|
-
- Ordered and unordered lists
|
|
23
|
-
- Nested lists
|
|
24
|
-
- Links
|
|
25
|
-
- Block quotes
|
|
26
|
-
- Inline code and code blocks
|
|
27
|
-
- Images
|
|
28
|
-
- Horizontal rules
|
|
29
|
-
|
|
30
|
-
### Usage
|
|
31
|
-
|
|
32
|
-
To add the package to your project, install it with
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm install --save @virtuoso.dev/lexical-mdx-import-export
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
To import markdown, call the respective function in the initial config:
|
|
8
|
+
MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. [See the live demo](https://mdxeditor.dev/editor/demo) that has all features turned on.
|
|
9
|
+
The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.
|
|
39
10
|
|
|
40
11
|
```jsx
|
|
41
|
-
|
|
42
|
-
const initialConfig = {
|
|
43
|
-
editorState: () => {
|
|
44
|
-
importMarkdownToLexical($getRoot(), mardkown)
|
|
45
|
-
},
|
|
46
|
-
//...
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
//....
|
|
50
|
-
<LexicalComposer initialConfig={initialConfig}>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
To export markdown, read the editor state, and call the function with the root node:
|
|
12
|
+
import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
|
|
54
13
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
console.log(exportMarkdownFromLexical({root : $getRoot()}))
|
|
59
|
-
})
|
|
60
|
-
//
|
|
14
|
+
export default function App() {
|
|
15
|
+
return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
|
|
16
|
+
}
|
|
61
17
|
```
|
|
18
|
+
## Get Started
|
|
62
19
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
### Configure markdown export formatting
|
|
67
|
-
|
|
68
|
-
The `exportMarkdownFromLexical` method accepts an optional [`options`](https://github.com/syntax-tree/mdast-util-to-markdown#options)
|
|
69
|
-
parameter that controls the markdown formatting. Check the link above for detialed documentation from mdast.
|
|
70
|
-
|
|
71
|
-
### Support additional nodes through visitors
|
|
72
|
-
|
|
73
|
-
Both the import and export are implemented with visitor objects. The functions accept an optional Array parameter of the visitors to be applied to the syntax tree.
|
|
74
|
-
|
|
75
|
-
You can take the default array of visitors exported as `MdastVisitors` and, `LexicalVisitors` and append your own custom visitors or replace the default ones.
|
|
76
|
-
|
|
77
|
-
The easiest way to create your own visitor is to use the code of a one that's similar to what you need and use it as a starting point.
|
|
78
|
-
|
|
79
|
-
- [MdastVisitors source code](https://github.com/virtuoso-dev/lexical-mdx/blob/main/packages/import-export/src/importMarkdownToLexical.ts)
|
|
80
|
-
- [LexicalVisitors source code](https://github.com/virtuoso-dev/lexical-mdx/blob/main/packages/import-export/src/exportMarkdownFromLexical.ts)
|
|
20
|
+
The best place to get started using the component is the [documentation](https://mdxeditor.dev/editor/docs/getting-started).
|
|
81
21
|
|
|
82
|
-
##
|
|
22
|
+
## Help and support
|
|
83
23
|
|
|
84
|
-
|
|
24
|
+
Should you encounter any issues, please [create an issue](https://github.com/mdx-editor/editor/issues), but check if there's something similar already open first.
|
|
85
25
|
|
|
86
26
|
## License
|
|
87
27
|
|
|
88
|
-
MIT
|
|
28
|
+
MIT © Petyo Ivanov.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const DEFAULT_FORMAT: 0;
|
|
2
|
+
export declare const IS_BOLD: 1;
|
|
3
|
+
export declare const IS_ITALIC: 2;
|
|
4
|
+
export declare const IS_STRIKETHROUGH: 4;
|
|
5
|
+
export declare const IS_UNDERLINE: 8;
|
|
6
|
+
export declare const IS_CODE: 16;
|
|
7
|
+
export declare const IS_SUBSCRIPT: 32;
|
|
8
|
+
export declare const IS_SUPERSCRIPT: 64;
|
|
9
|
+
export declare const IS_HIGHLIGHT: 128;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RealmPluginInitializer } from './gurx';
|
|
3
|
+
import { ToMarkdownOptions } from './exportMarkdownFromLexical';
|
|
4
|
+
import { IconKey } from './plugins/core/Icon';
|
|
5
|
+
/**
|
|
6
|
+
* The properties of the {@link MDXEditor} React component.
|
|
7
|
+
*/
|
|
8
|
+
export interface MDXEditorProps {
|
|
9
|
+
/**
|
|
10
|
+
* the CSS class to apply to the content editable element of the editor.
|
|
11
|
+
* Use this to style the various content elements like lists and blockquotes.
|
|
12
|
+
*/
|
|
13
|
+
contentEditableClassName?: string;
|
|
14
|
+
/**
|
|
15
|
+
* The markdown to edit. Notice that this is read only when the component is mounted.
|
|
16
|
+
* To change the component content dynamically, use the `MDXEditorMethods.setMarkdown` method.
|
|
17
|
+
*/
|
|
18
|
+
markdown: string;
|
|
19
|
+
/**
|
|
20
|
+
* Triggered when the editor value changes. The callback is not throttled, you can use any throttling mechanism
|
|
21
|
+
* if you intend to do auto-saving.
|
|
22
|
+
*/
|
|
23
|
+
onChange?: (markdown: string) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Triggered when the markdown parser encounters an error. The payload includes the invalid source and the error message.
|
|
26
|
+
*/
|
|
27
|
+
onError?: (payload: {
|
|
28
|
+
error: string;
|
|
29
|
+
source: string;
|
|
30
|
+
}) => void;
|
|
31
|
+
/**
|
|
32
|
+
* The markdown options used to generate the resulting markdown.
|
|
33
|
+
* See {@link https://github.com/syntax-tree/mdast-util-to-markdown#options | the mdast-util-to-markdown docs} for the full list of options.
|
|
34
|
+
*/
|
|
35
|
+
toMarkdownOptions?: ToMarkdownOptions;
|
|
36
|
+
/**
|
|
37
|
+
* The plugins to use in the editor.
|
|
38
|
+
*/
|
|
39
|
+
plugins?: React.ComponentProps<typeof RealmPluginInitializer>['plugins'];
|
|
40
|
+
/**
|
|
41
|
+
* The class name to apply to the root component element. Use this if you want to change the editor dimensions, maximum height, etc.
|
|
42
|
+
* For a content-specific styling, Use `contentEditableClassName` property.
|
|
43
|
+
*/
|
|
44
|
+
className?: string;
|
|
45
|
+
/**
|
|
46
|
+
* pass if you would like to have the editor automatically focused when mounted.
|
|
47
|
+
*/
|
|
48
|
+
autoFocus?: boolean | {
|
|
49
|
+
defaultSelection?: 'rootStart' | 'rootEnd';
|
|
50
|
+
preventScroll?: boolean;
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* Triggered when focus leaves the editor
|
|
54
|
+
*/
|
|
55
|
+
onBlur?: (e: FocusEvent) => void;
|
|
56
|
+
/**
|
|
57
|
+
* The placeholder contents, displayed when the editor is empty.
|
|
58
|
+
*/
|
|
59
|
+
placeholder?: React.ReactNode;
|
|
60
|
+
/**
|
|
61
|
+
* pass if you would like to have the editor in read-only mode.
|
|
62
|
+
* Note: Don't use this mode to render content for consumption - render the markdown using a library of your choice instead.
|
|
63
|
+
*/
|
|
64
|
+
readOnly?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Use this prop to customize the icons used across the editor. Pass a function that returns an icon (JSX) for a given icon key.
|
|
67
|
+
*/
|
|
68
|
+
iconComponentFor?: (name: IconKey) => JSX.Element;
|
|
69
|
+
/**
|
|
70
|
+
* Set to false if you want to suppress the processing of HTML tags.
|
|
71
|
+
*/
|
|
72
|
+
suppressHtmlProcessing?: boolean;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* The interface for the {@link MDXEditor} object reference.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* const mdxEditorRef = React.useRef<MDXEditorMethods>(null)
|
|
80
|
+
* <MDXEditor ref={mdxEditorRef} />
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
export interface MDXEditorMethods {
|
|
84
|
+
/**
|
|
85
|
+
* Gets the current markdown value.
|
|
86
|
+
*/
|
|
87
|
+
getMarkdown: () => string;
|
|
88
|
+
/**
|
|
89
|
+
* Updates the markdown value of the editor.
|
|
90
|
+
*/
|
|
91
|
+
setMarkdown: (value: string) => void;
|
|
92
|
+
/**
|
|
93
|
+
* Sets focus on input
|
|
94
|
+
*/
|
|
95
|
+
focus: (callbackFn?: (() => void) | undefined, opts?: {
|
|
96
|
+
defaultSelection?: 'rootStart' | 'rootEnd';
|
|
97
|
+
preventScroll?: boolean;
|
|
98
|
+
}) => void;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* The MDXEditor React component. See {@link MDXEditorProps} for the list of properties supported and the {@link MDXEditorMethods} for the methods accessible through the ref.
|
|
102
|
+
*/
|
|
103
|
+
export declare const MDXEditor: React.ForwardRefExoticComponent<MDXEditorProps & React.RefAttributes<MDXEditorMethods>>;
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import React__default from "react";
|
|
2
|
+
import { corePlugin, corePluginHooks } from "./plugins/core/index.js";
|
|
3
|
+
import { lexicalTheme } from "./styles/lexicalTheme.js";
|
|
4
|
+
import { LexicalComposer } from "@lexical/react/LexicalComposer.js";
|
|
5
|
+
import styles from "./styles/ui.module.css.js";
|
|
6
|
+
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
|
|
7
|
+
import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
|
|
8
|
+
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
|
|
9
|
+
import classNames from "classnames";
|
|
10
|
+
import { noop } from "./utils/fp.js";
|
|
11
|
+
import { RealmPluginInitializer, useHasPlugin } from "./gurx/react.js";
|
|
12
|
+
const LexicalProvider = ({ children }) => {
|
|
13
|
+
const [initialRootEditorState, nodes, readOnly] = corePluginHooks.useEmitterValues(
|
|
14
|
+
"initialRootEditorState",
|
|
15
|
+
"usedLexicalNodes",
|
|
16
|
+
"readOnly"
|
|
17
|
+
);
|
|
18
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
19
|
+
LexicalComposer,
|
|
20
|
+
{
|
|
21
|
+
initialConfig: {
|
|
22
|
+
editable: !readOnly,
|
|
23
|
+
editorState: initialRootEditorState,
|
|
24
|
+
namespace: "MDXEditor",
|
|
25
|
+
theme: lexicalTheme,
|
|
26
|
+
nodes,
|
|
27
|
+
onError: (error) => {
|
|
28
|
+
throw error;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
children
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
const RichTextEditor = () => {
|
|
36
|
+
const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = corePluginHooks.useEmitterValues(
|
|
37
|
+
"contentEditableClassName",
|
|
38
|
+
"composerChildren",
|
|
39
|
+
"topAreaChildren",
|
|
40
|
+
"editorWrappers",
|
|
41
|
+
"placeholder"
|
|
42
|
+
);
|
|
43
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper) }, /* @__PURE__ */ React__default.createElement(
|
|
44
|
+
RichTextPlugin,
|
|
45
|
+
{
|
|
46
|
+
contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),
|
|
47
|
+
placeholder: /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName) }, /* @__PURE__ */ React__default.createElement("p", null, placeholder)),
|
|
48
|
+
ErrorBoundary: LexicalErrorBoundary
|
|
49
|
+
}
|
|
50
|
+
))), composerChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
|
|
51
|
+
};
|
|
52
|
+
const DEFAULT_MARKDOWN_OPTIONS = {
|
|
53
|
+
listItemIndent: "one"
|
|
54
|
+
};
|
|
55
|
+
const DefaultIcon = React__default.lazy(() => import("./plugins/core/Icon.js"));
|
|
56
|
+
const defaultIconComponentFor = (name) => {
|
|
57
|
+
return /* @__PURE__ */ React__default.createElement(DefaultIcon, { name });
|
|
58
|
+
};
|
|
59
|
+
const RenderRecurisveWrappers = ({
|
|
60
|
+
wrappers,
|
|
61
|
+
children
|
|
62
|
+
}) => {
|
|
63
|
+
if (wrappers.length === 0) {
|
|
64
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
|
|
65
|
+
}
|
|
66
|
+
const Wrapper = wrappers[0];
|
|
67
|
+
return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: wrappers.slice(1) }, children));
|
|
68
|
+
};
|
|
69
|
+
const EditorRootElement = ({ children, className }) => {
|
|
70
|
+
const editorRootElementRef = React__default.useRef(null);
|
|
71
|
+
const setEditorRootElementRef = corePluginHooks.usePublisher("editorRootElementRef");
|
|
72
|
+
React__default.useEffect(() => {
|
|
73
|
+
const popupContainer = document.createElement("div");
|
|
74
|
+
popupContainer.classList.add(styles.editorRoot);
|
|
75
|
+
if (className) {
|
|
76
|
+
className.split(" ").forEach((c) => {
|
|
77
|
+
popupContainer.classList.add(c);
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
document.body.appendChild(popupContainer);
|
|
81
|
+
editorRootElementRef.current = popupContainer;
|
|
82
|
+
setEditorRootElementRef(editorRootElementRef);
|
|
83
|
+
return () => {
|
|
84
|
+
popupContainer.remove();
|
|
85
|
+
};
|
|
86
|
+
}, [className, editorRootElementRef, setEditorRootElementRef]);
|
|
87
|
+
return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor") }, children);
|
|
88
|
+
};
|
|
89
|
+
const Methods = ({ mdxRef }) => {
|
|
90
|
+
const realm = corePluginHooks.useRealmContext();
|
|
91
|
+
const hasDiffSourcePlugin = useHasPlugin("diff-source");
|
|
92
|
+
React__default.useImperativeHandle(
|
|
93
|
+
mdxRef,
|
|
94
|
+
() => {
|
|
95
|
+
return {
|
|
96
|
+
getMarkdown: () => {
|
|
97
|
+
if (hasDiffSourcePlugin) {
|
|
98
|
+
if (realm.getKeyValue("viewMode") === "source") {
|
|
99
|
+
return realm.getKeyValue("markdownSourceEditorValue");
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
return realm.getKeyValue("markdown");
|
|
103
|
+
},
|
|
104
|
+
setMarkdown: (markdown) => {
|
|
105
|
+
realm.pubKey("setMarkdown", markdown);
|
|
106
|
+
},
|
|
107
|
+
focus: (callbackFn, opts) => {
|
|
108
|
+
var _a;
|
|
109
|
+
(_a = realm.getKeyValue("rootEditor")) == null ? void 0 : _a.focus(callbackFn, opts);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
},
|
|
113
|
+
[realm, hasDiffSourcePlugin]
|
|
114
|
+
);
|
|
115
|
+
return null;
|
|
116
|
+
};
|
|
117
|
+
const MDXEditor = React__default.forwardRef((props, ref) => {
|
|
118
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
119
|
+
RealmPluginInitializer,
|
|
120
|
+
{
|
|
121
|
+
plugins: [
|
|
122
|
+
corePlugin({
|
|
123
|
+
contentEditableClassName: props.contentEditableClassName ?? "",
|
|
124
|
+
initialMarkdown: props.markdown,
|
|
125
|
+
onChange: props.onChange ?? noop,
|
|
126
|
+
onBlur: props.onBlur ?? noop,
|
|
127
|
+
toMarkdownOptions: props.toMarkdownOptions ?? DEFAULT_MARKDOWN_OPTIONS,
|
|
128
|
+
autoFocus: props.autoFocus ?? false,
|
|
129
|
+
placeholder: props.placeholder ?? "",
|
|
130
|
+
readOnly: Boolean(props.readOnly),
|
|
131
|
+
iconComponentFor: props.iconComponentFor ?? defaultIconComponentFor,
|
|
132
|
+
suppressHtmlProcessing: props.suppressHtmlProcessing ?? false,
|
|
133
|
+
onError: props.onError ?? noop
|
|
134
|
+
}),
|
|
135
|
+
...props.plugins || []
|
|
136
|
+
]
|
|
137
|
+
},
|
|
138
|
+
/* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
|
|
139
|
+
/* @__PURE__ */ React__default.createElement(Methods, { mdxRef: ref })
|
|
140
|
+
);
|
|
141
|
+
});
|
|
142
|
+
export {
|
|
143
|
+
MDXEditor
|
|
144
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { DirectiveDescriptor } from '../plugins/directives';
|
|
2
|
+
/** @internal */
|
|
3
|
+
export declare const ADMONITION_TYPES: readonly ["note", "tip", "danger", "info", "caution"];
|
|
4
|
+
/** @internal */
|
|
5
|
+
export type AdmonitionKind = (typeof ADMONITION_TYPES)[number];
|
|
6
|
+
/**
|
|
7
|
+
* Pass this descriptor to the `directivesPlugin` `directiveDescriptors` parameter to enable {@link https://docusaurus.io/docs/markdown-features/admonitions | markdown admonitions}.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <MDXEditor
|
|
12
|
+
* plugins={[
|
|
13
|
+
* directivesPlugin({ directiveDescriptors: [ AdmonitionDirectiveDescriptor] }),
|
|
14
|
+
* ]} />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React__default from "react";
|
|
2
|
+
import { useNestedEditorContext, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
|
|
3
|
+
const ADMONITION_TYPES = ["note", "tip", "danger", "info", "caution"];
|
|
4
|
+
const AdmonitionDirectiveDescriptor = {
|
|
5
|
+
name: "admonition",
|
|
6
|
+
attributes: [],
|
|
7
|
+
hasChildren: true,
|
|
8
|
+
testNode(node) {
|
|
9
|
+
return ADMONITION_TYPES.includes(node.name);
|
|
10
|
+
},
|
|
11
|
+
Editor({ mdastNode }) {
|
|
12
|
+
const {
|
|
13
|
+
config: { theme }
|
|
14
|
+
} = useNestedEditorContext();
|
|
15
|
+
return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
|
|
16
|
+
NestedLexicalEditor,
|
|
17
|
+
{
|
|
18
|
+
block: true,
|
|
19
|
+
getContent: (node) => node.children,
|
|
20
|
+
getUpdatedMdastNode: (mdastNode2, children) => ({ ...mdastNode2, children })
|
|
21
|
+
}
|
|
22
|
+
));
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
ADMONITION_TYPES,
|
|
27
|
+
AdmonitionDirectiveDescriptor
|
|
28
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DirectiveEditorProps } from '../plugins/directives';
|
|
3
|
+
/**
|
|
4
|
+
* A generic editor that can be used as an universal UI for any directive.
|
|
5
|
+
* Allows editing of the directive content and properties.
|
|
6
|
+
* Use this editor for the {@link DirectiveDescriptor} Editor option.
|
|
7
|
+
*/
|
|
8
|
+
export declare const GenericDirectiveEditor: React.FC<DirectiveEditorProps>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React__default from "react";
|
|
2
|
+
import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
|
|
3
|
+
import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
|
|
4
|
+
import styles from "../styles/ui.module.css.js";
|
|
5
|
+
const GenericDirectiveEditor = ({ mdastNode, descriptor }) => {
|
|
6
|
+
const updateMdastNode = useMdastNodeUpdater();
|
|
7
|
+
const properties = React__default.useMemo(() => {
|
|
8
|
+
return descriptor.attributes.reduce((acc, attributeName) => {
|
|
9
|
+
acc[attributeName] = (mdastNode.attributes || {})[attributeName] || "";
|
|
10
|
+
return acc;
|
|
11
|
+
}, {});
|
|
12
|
+
}, [mdastNode, descriptor]);
|
|
13
|
+
const onChange = React__default.useCallback(
|
|
14
|
+
(values) => {
|
|
15
|
+
updateMdastNode({ attributes: Object.fromEntries(Object.entries(values).filter(([, value]) => value !== "")) });
|
|
16
|
+
},
|
|
17
|
+
[updateMdastNode]
|
|
18
|
+
);
|
|
19
|
+
return /* @__PURE__ */ React__default.createElement("div", { className: mdastNode.type === "textDirective" ? styles.inlineEditor : styles.blockEditor }, descriptor.attributes.length == 0 && descriptor.hasChildren && mdastNode.type !== "textDirective" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.attributes.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
|
|
20
|
+
NestedLexicalEditor,
|
|
21
|
+
{
|
|
22
|
+
block: mdastNode.type === "containerDirective",
|
|
23
|
+
getContent: (node) => node.children,
|
|
24
|
+
getUpdatedMdastNode: (mdastNode2, children) => {
|
|
25
|
+
return { ...mdastNode2, children };
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
) : /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name));
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
GenericDirectiveEditor
|
|
32
|
+
};
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { LexicalNode, RootNode as LexicalRootNode } from 'lexical';
|
|
2
|
+
import * as Mdast from 'mdast';
|
|
3
|
+
import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
|
|
4
|
+
import type { JsxComponentDescriptor } from './plugins/jsx';
|
|
5
|
+
export type { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
|
|
6
|
+
/**
|
|
7
|
+
* A set of covenience utilities to manipulate the mdast tree when processing lexical nodes.
|
|
8
|
+
*/
|
|
9
|
+
export interface LexicalVisitActions<T extends LexicalNode> {
|
|
10
|
+
/**
|
|
11
|
+
* Iterate over the immediate children of a lexical node with the given mdast node as a parent.
|
|
12
|
+
*/
|
|
13
|
+
visitChildren(node: T, mdastParent: Mdast.Parent): void;
|
|
14
|
+
/**
|
|
15
|
+
* Create a new mdast node with the given type, and props.
|
|
16
|
+
* Iterate over the immediate children of the current lexical node with the new mdast node as a parent.
|
|
17
|
+
* @param hasChildren - true by default. Pass false to skip iterating over the lexical node children.
|
|
18
|
+
*/
|
|
19
|
+
addAndStepInto(type: string, props?: Record<string, unknown>, hasChildren?: boolean): void;
|
|
20
|
+
/**
|
|
21
|
+
* Append a new mdast node to a parent node.
|
|
22
|
+
* @param parentNode - the mdast parent node to append the new node to.
|
|
23
|
+
* @param node - the mdast node to append.
|
|
24
|
+
*/
|
|
25
|
+
appendToParent<T extends Mdast.Parent>(parentNode: T, node: T['children'][number]): T['children'][number] | Mdast.Root;
|
|
26
|
+
/**
|
|
27
|
+
* Used when processing JSX nodes so that later, the correct import statement can be added to the document.
|
|
28
|
+
* @param componentName - the name of the component that has to be imported.
|
|
29
|
+
* @see {@link JsxComponentDescriptor}
|
|
30
|
+
*/
|
|
31
|
+
registerReferredComponent(componentName: string): void;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* The params passed to the {@link LexicalExportVisitor.visitLexicalNode} method.
|
|
35
|
+
*/
|
|
36
|
+
export interface LexicalNodeVisitParams<T extends LexicalNode> {
|
|
37
|
+
/**
|
|
38
|
+
* The lexical node that is being visited.
|
|
39
|
+
*/
|
|
40
|
+
lexicalNode: T;
|
|
41
|
+
/**
|
|
42
|
+
* The mdast parent node that the result of the lexical node conversion should be appended to.
|
|
43
|
+
*/
|
|
44
|
+
mdastParent: Mdast.Parent;
|
|
45
|
+
/**
|
|
46
|
+
* A set of actions that can be used to manipulate the mdast tree.
|
|
47
|
+
* These are "convenience" utilities that avoid the repetitive boilerplate of creating mdast nodes.
|
|
48
|
+
*/
|
|
49
|
+
actions: LexicalVisitActions<T>;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Implement this interface in order to process mdast node(s) into a lexical tree.
|
|
53
|
+
* This is part of the process that converts the editor contents to markdown.
|
|
54
|
+
*/
|
|
55
|
+
export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Content> {
|
|
56
|
+
/**
|
|
57
|
+
* Return true if the given node is of the type that this visitor can process.
|
|
58
|
+
* You can safely use the node type guard functions (as in $isParagraphNode, $isLinkNode, etc.) here.
|
|
59
|
+
*/
|
|
60
|
+
testLexicalNode?(lexicalNode: LexicalNode): lexicalNode is LN;
|
|
61
|
+
/**
|
|
62
|
+
* Process the given node and manipulate the mdast tree accordingly.
|
|
63
|
+
* @see {@link LexicalNodeVisitParams} and {@link LexicalVisitActions} for more information.
|
|
64
|
+
*/
|
|
65
|
+
visitLexicalNode?(params: LexicalNodeVisitParams<LN>): void;
|
|
66
|
+
/**
|
|
67
|
+
* Return true if the current node should be joined with the previous node.
|
|
68
|
+
* This is necessary due to some inconsistencies between the lexical tree and the mdast tree when it comes to formatting.
|
|
69
|
+
*/
|
|
70
|
+
shouldJoin?(prevNode: Mdast.Content, currentNode: UN): boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Join the current node with the previous node, returning the resulting new node
|
|
73
|
+
* For this to be called by the tree walk, shouldJoin must return true.
|
|
74
|
+
*/
|
|
75
|
+
join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
|
|
76
|
+
/**
|
|
77
|
+
* Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
|
|
78
|
+
*/
|
|
79
|
+
priority?: number;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* The "any" type for LexicalExportVisitor.
|
|
83
|
+
* @internal
|
|
84
|
+
*/
|
|
85
|
+
export type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
|
|
86
|
+
/**
|
|
87
|
+
* @internal
|
|
88
|
+
*/
|
|
89
|
+
export interface ExportLexicalTreeOptions {
|
|
90
|
+
root: LexicalRootNode;
|
|
91
|
+
visitors: LexicalVisitor[];
|
|
92
|
+
jsxComponentDescriptors: JsxComponentDescriptor[];
|
|
93
|
+
jsxIsAvailable: boolean;
|
|
94
|
+
addImportStatements?: boolean;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* @internal
|
|
98
|
+
*/
|
|
99
|
+
export declare function exportLexicalTreeToMdast({ root, visitors, jsxComponentDescriptors, jsxIsAvailable, addImportStatements }: ExportLexicalTreeOptions): Mdast.Root;
|
|
100
|
+
/**
|
|
101
|
+
* @internal
|
|
102
|
+
*/
|
|
103
|
+
export type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
|
|
104
|
+
/**
|
|
105
|
+
* @internal
|
|
106
|
+
*/
|
|
107
|
+
export interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
|
|
108
|
+
visitors: LexicalVisitor[];
|
|
109
|
+
/**
|
|
110
|
+
* the markdown extensions to use
|
|
111
|
+
*/
|
|
112
|
+
toMarkdownExtensions: ToMarkdownExtension[];
|
|
113
|
+
/**
|
|
114
|
+
* The options to pass to `toMarkdown`
|
|
115
|
+
*/
|
|
116
|
+
toMarkdownOptions: ToMarkdownOptions;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Configures how the lexical tree is converted to a mdast tree and then to markdown.
|
|
120
|
+
*/
|
|
121
|
+
export interface LexicalConvertOptions {
|
|
122
|
+
/**
|
|
123
|
+
* The visitors to use when processing the lexical tree
|
|
124
|
+
*/
|
|
125
|
+
visitors?: LexicalVisitor[];
|
|
126
|
+
/**
|
|
127
|
+
* the markdown extensions to use
|
|
128
|
+
*/
|
|
129
|
+
toMarkdownExtensions?: ToMarkdownExtension[];
|
|
130
|
+
/**
|
|
131
|
+
* The options to pass to `toMarkdown`
|
|
132
|
+
*/
|
|
133
|
+
toMarkdownOptions?: ToMarkdownOptions;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* @internal
|
|
137
|
+
*/
|
|
138
|
+
export declare function exportMarkdownFromLexical({ root, toMarkdownOptions, toMarkdownExtensions, visitors, jsxComponentDescriptors, jsxIsAvailable }: ExportMarkdownFromLexicalOptions): string;
|