@mdxeditor/editor 2.3.2 → 2.3.3
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/importMarkdownToLexical.js +39 -9
- package/dist/index.d.ts +21 -11
- package/dist/index.js +3 -3
- package/dist/plugins/codeblock/CodeBlockNode.js +3 -4
- package/dist/plugins/codeblock/MdastCodeVisitor.js +7 -1
- package/dist/plugins/codeblock/index.js +1 -3
- package/dist/plugins/codemirror/index.js +12 -6
- package/dist/plugins/core/MdastFormattingVisitor.js +1 -1
- package/dist/plugins/core/NestedLexicalEditor.js +18 -3
- package/dist/plugins/core/index.js +8 -1
- package/dist/plugins/directives/DirectiveNode.js +1 -1
- package/dist/plugins/directives/MdastDirectiveVisitor.js +11 -3
- package/dist/plugins/directives/index.js +2 -4
- package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js +6 -2
- package/dist/plugins/sandpack/index.js +20 -14
- package/dist/plugins/table/TableEditor.js +17 -3
- package/package.json +1 -1
|
@@ -16,7 +16,14 @@ class UnrecognizedMarkdownConstructError extends Error {
|
|
|
16
16
|
this.name = "UnrecognizedMarkdownConstructError";
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
function importMarkdownToLexical({
|
|
19
|
+
function importMarkdownToLexical({
|
|
20
|
+
root,
|
|
21
|
+
markdown,
|
|
22
|
+
visitors,
|
|
23
|
+
syntaxExtensions,
|
|
24
|
+
mdastExtensions,
|
|
25
|
+
...descriptors
|
|
26
|
+
}) {
|
|
20
27
|
var _a;
|
|
21
28
|
let mdastRoot;
|
|
22
29
|
try {
|
|
@@ -37,9 +44,9 @@ function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, m
|
|
|
37
44
|
if (((_a = mdastRoot.children.at(-1)) == null ? void 0 : _a.type) !== "paragraph") {
|
|
38
45
|
mdastRoot.children.push({ type: "paragraph", children: [] });
|
|
39
46
|
}
|
|
40
|
-
importMdastTreeToLexical({ root, mdastRoot, visitors });
|
|
47
|
+
importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors });
|
|
41
48
|
}
|
|
42
|
-
function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
|
|
49
|
+
function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
|
|
43
50
|
const formattingMap = /* @__PURE__ */ new WeakMap();
|
|
44
51
|
visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
|
|
45
52
|
function visitChildren(mdastNode, lexicalParent) {
|
|
@@ -53,10 +60,19 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
|
|
|
53
60
|
if (typeof visitor2.testNode === "string") {
|
|
54
61
|
return visitor2.testNode === mdastNode.type;
|
|
55
62
|
}
|
|
56
|
-
return visitor2.testNode(mdastNode);
|
|
63
|
+
return visitor2.testNode(mdastNode, descriptors);
|
|
57
64
|
});
|
|
58
65
|
if (!visitor) {
|
|
59
|
-
|
|
66
|
+
try {
|
|
67
|
+
throw new UnrecognizedMarkdownConstructError(`Unsupported markdown syntax: ${toMarkdown(mdastNode)}`);
|
|
68
|
+
} catch (e) {
|
|
69
|
+
throw new UnrecognizedMarkdownConstructError(
|
|
70
|
+
`Parsing of the following markdown structure failed: ${JSON.stringify({
|
|
71
|
+
type: mdastNode.type,
|
|
72
|
+
name: "name" in mdastNode ? mdastNode.name : "N/A"
|
|
73
|
+
})}`
|
|
74
|
+
);
|
|
75
|
+
}
|
|
60
76
|
}
|
|
61
77
|
visitor.visitNode({
|
|
62
78
|
//@ts-expect-error root type is glitching
|
|
@@ -71,11 +87,25 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
|
|
|
71
87
|
visitChildren(mdastNode, lexicalNode);
|
|
72
88
|
}
|
|
73
89
|
},
|
|
74
|
-
addFormatting(format, node
|
|
75
|
-
|
|
90
|
+
addFormatting(format, node) {
|
|
91
|
+
if (!node) {
|
|
92
|
+
if (isParent(mdastNode)) {
|
|
93
|
+
node = mdastNode;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
if (node) {
|
|
97
|
+
formattingMap.set(node, format | (formattingMap.get(mdastParent) ?? 0));
|
|
98
|
+
}
|
|
76
99
|
},
|
|
77
|
-
removeFormatting(format, node
|
|
78
|
-
|
|
100
|
+
removeFormatting(format, node) {
|
|
101
|
+
if (!node) {
|
|
102
|
+
if (isParent(mdastNode)) {
|
|
103
|
+
node = mdastNode;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
if (node) {
|
|
107
|
+
formattingMap.set(node, format ^ (formattingMap.get(mdastParent) ?? 0));
|
|
108
|
+
}
|
|
79
109
|
},
|
|
80
110
|
getParentFormatting() {
|
|
81
111
|
return formattingMap.get(mdastParent) ?? 0;
|
package/dist/index.d.ts
CHANGED
|
@@ -434,7 +434,7 @@ export declare interface CodeBlockEditorDescriptor {
|
|
|
434
434
|
* @param language - The language of the code block.
|
|
435
435
|
* @param meta - The meta of the code block.
|
|
436
436
|
*/
|
|
437
|
-
match: (language: string, meta: string) => boolean;
|
|
437
|
+
match: (language: string | null | undefined, meta: string | null | undefined) => boolean;
|
|
438
438
|
/**
|
|
439
439
|
* The React component to be used. See {@link CodeBlockEditorProps} for the props passed to the component.
|
|
440
440
|
*/
|
|
@@ -535,7 +535,7 @@ export declare const codeBlockPlugin: (params?: {
|
|
|
535
535
|
/* Excluded from this release type: CodeMirrorEditor */
|
|
536
536
|
|
|
537
537
|
/**
|
|
538
|
-
* A plugin that adds lets users
|
|
538
|
+
* A plugin that adds lets users edit code blocks with CodeMirror.
|
|
539
539
|
* @group CodeMirror
|
|
540
540
|
*/
|
|
541
541
|
export declare const codeMirrorPlugin: (params?: {
|
|
@@ -736,6 +736,15 @@ export declare function curry2to1<T, K, R>(proc: (arg1: T, arg2: K) => R, arg1:
|
|
|
736
736
|
*/
|
|
737
737
|
export declare const defaultCodeBlockLanguage$: NodeRef<string>;
|
|
738
738
|
|
|
739
|
+
/**
|
|
740
|
+
* The registered descriptors for composite nodes (jsx, directives, code blocks).
|
|
741
|
+
*/
|
|
742
|
+
export declare interface Descriptors {
|
|
743
|
+
jsxComponentDescriptors: JsxComponentDescriptor[];
|
|
744
|
+
directiveDescriptors: DirectiveDescriptor[];
|
|
745
|
+
codeBlockEditorDescriptors: CodeBlockEditorDescriptor[];
|
|
746
|
+
}
|
|
747
|
+
|
|
739
748
|
/**
|
|
740
749
|
* Use this primitive to create a toolbar button that opens a dialog with a text input, autocomplete suggestions, and a submit button.
|
|
741
750
|
* @group Toolbar Primitives
|
|
@@ -847,10 +856,10 @@ export declare interface DirectiveDescriptor<T extends Directives = Directives>
|
|
|
847
856
|
}
|
|
848
857
|
|
|
849
858
|
/**
|
|
850
|
-
* Contains the currently registered directive descriptors.
|
|
859
|
+
* Contains the currently registered Markdown directive descriptors.
|
|
851
860
|
* @group Directive
|
|
852
861
|
*/
|
|
853
|
-
export declare const directiveDescriptors$: NodeRef<DirectiveDescriptor<
|
|
862
|
+
export declare const directiveDescriptors$: NodeRef<DirectiveDescriptor<Directives>[]>;
|
|
854
863
|
|
|
855
864
|
/**
|
|
856
865
|
* The properties passed to the {@link DirectiveDescriptor.Editor} component.
|
|
@@ -1758,8 +1767,9 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
|
|
|
1758
1767
|
/**
|
|
1759
1768
|
* The test function that determines if this visitor should be used for the given node.
|
|
1760
1769
|
* As a convenience, you can also pass a string here, which will be compared to the node's type.
|
|
1770
|
+
* @param options - the registered descriptors for composite nodes (jsx, directives, code blocks).
|
|
1761
1771
|
*/
|
|
1762
|
-
testNode: ((mdastNode: Mdast.Nodes) => boolean) | string;
|
|
1772
|
+
testNode: ((mdastNode: Mdast.Nodes, options: Descriptors) => boolean) | string;
|
|
1763
1773
|
visitNode(params: {
|
|
1764
1774
|
/**
|
|
1765
1775
|
* The node that is currently being visited.
|
|
@@ -1789,12 +1799,12 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
|
|
|
1789
1799
|
* Adds formatting as a context for the current node and its children.
|
|
1790
1800
|
* This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
|
|
1791
1801
|
*/
|
|
1792
|
-
addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.
|
|
1802
|
+
addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Parent | null): void;
|
|
1793
1803
|
/**
|
|
1794
1804
|
* Removes formatting as a context for the current node and its children.
|
|
1795
1805
|
* This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
|
|
1796
1806
|
*/
|
|
1797
|
-
removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.
|
|
1807
|
+
removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Parent | null): void;
|
|
1798
1808
|
/**
|
|
1799
1809
|
* Access the current formatting context.
|
|
1800
1810
|
*/
|
|
@@ -2019,11 +2029,11 @@ export declare const NestedLexicalEditor: <T extends Mdast.RootContent>(props: {
|
|
|
2019
2029
|
/**
|
|
2020
2030
|
* A function that returns the phrasing content of the mdast node. In most cases, this will be the `children` property of the mdast node, but you can also have multiple nested nodes with their own children.
|
|
2021
2031
|
*/
|
|
2022
|
-
getContent: (mdastNode: T) => Mdast.
|
|
2032
|
+
getContent: (mdastNode: T) => Mdast.RootContent[];
|
|
2023
2033
|
/**
|
|
2024
2034
|
* A function that should return the updated mdast node based on the original mdast node and the new content (serialized as mdast tree) produced by the editor.
|
|
2025
2035
|
*/
|
|
2026
|
-
getUpdatedMdastNode: (mdastNode: T, children: Mdast.
|
|
2036
|
+
getUpdatedMdastNode: (mdastNode: T, children: Mdast.RootContent[]) => T;
|
|
2027
2037
|
/**
|
|
2028
2038
|
* Props passed to the {@link https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalContentEditable.tsx | ContentEditable} component.
|
|
2029
2039
|
*/
|
|
@@ -2558,13 +2568,13 @@ export declare function useLexicalNodeRemove(): () => void;
|
|
|
2558
2568
|
* A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components.
|
|
2559
2569
|
* @group Custom Editor Primitives
|
|
2560
2570
|
*/
|
|
2561
|
-
export declare function useMdastNodeUpdater<T extends Mdast.
|
|
2571
|
+
export declare function useMdastNodeUpdater<T extends Mdast.RootContent>(): (node: Partial<T>) => void;
|
|
2562
2572
|
|
|
2563
2573
|
/**
|
|
2564
2574
|
* A hook to get the current {@link NestedEditorsContext} value. Use this in your custom editor components.
|
|
2565
2575
|
* @group Custom Editor Primitives
|
|
2566
2576
|
*/
|
|
2567
|
-
export declare function useNestedEditorContext<T extends Mdast.
|
|
2577
|
+
export declare function useNestedEditorContext<T extends Mdast.RootContent>(): NestedEditorsContextValue<T>;
|
|
2568
2578
|
|
|
2569
2579
|
/* Excluded from this release type: uuidv4 */
|
|
2570
2580
|
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export * from "@mdxeditor/gurx";
|
|
|
3
3
|
import { MDXEditor } from "./MDXEditor.js";
|
|
4
4
|
import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
|
|
5
5
|
import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
|
|
6
|
-
import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialRootEditorState$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
|
|
6
|
+
import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialRootEditorState$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
|
|
7
7
|
import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
|
|
8
8
|
import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
|
|
9
9
|
import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
|
|
@@ -17,8 +17,8 @@ import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
|
|
|
17
17
|
import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
|
|
18
18
|
import { codeBlockLanguages$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
|
|
19
19
|
import { CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
|
|
20
|
-
import { appendCodeBlockEditorDescriptor$,
|
|
21
|
-
import {
|
|
20
|
+
import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
|
|
21
|
+
import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
|
|
22
22
|
import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
|
|
23
23
|
import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
|
|
24
24
|
import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
|
|
@@ -4,12 +4,11 @@ var __publicField = (obj, key, value) => {
|
|
|
4
4
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
|
-
import
|
|
7
|
+
import { useCellValue } from "@mdxeditor/gurx";
|
|
8
8
|
import { DecoratorNode } from "lexical";
|
|
9
|
-
import
|
|
9
|
+
import React__default from "react";
|
|
10
10
|
import { voidEmitter } from "../../utils/voidEmitter.js";
|
|
11
|
-
import { NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
|
|
12
|
-
import { useCellValue } from "@mdxeditor/gurx";
|
|
11
|
+
import { codeBlockEditorDescriptors$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
|
|
13
12
|
class CodeBlockNode extends DecoratorNode {
|
|
14
13
|
constructor(code, language, meta, key) {
|
|
15
14
|
super(key);
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { $createCodeBlockNode } from "./CodeBlockNode.js";
|
|
2
2
|
const MdastCodeVisitor = {
|
|
3
|
-
testNode:
|
|
3
|
+
testNode: (node, { codeBlockEditorDescriptors }) => {
|
|
4
|
+
if (node.type === "code") {
|
|
5
|
+
const descriptor = codeBlockEditorDescriptors.find((descriptor2) => descriptor2.match(node.lang, node.meta));
|
|
6
|
+
return descriptor !== void 0;
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
9
|
+
},
|
|
4
10
|
visitNode({ mdastNode, actions }) {
|
|
5
11
|
actions.addAndStepInto(
|
|
6
12
|
$createCodeBlockNode({
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { CodeBlockVisitor } from "./CodeBlockVisitor.js";
|
|
2
2
|
import { MdastCodeVisitor } from "./MdastCodeVisitor.js";
|
|
3
|
-
import { insertDecoratorNode$, Appender, addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$ } from "../core/index.js";
|
|
3
|
+
import { insertDecoratorNode$, Appender, codeBlockEditorDescriptors$, addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$ } from "../core/index.js";
|
|
4
4
|
import { $createCodeBlockNode, CodeBlockNode } from "./CodeBlockNode.js";
|
|
5
5
|
import { $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js";
|
|
6
6
|
import { Cell, Signal, withLatestFrom, map } from "@mdxeditor/gurx";
|
|
7
7
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
8
|
-
const codeBlockEditorDescriptors$ = Cell([]);
|
|
9
8
|
const defaultCodeBlockLanguage$ = Cell("");
|
|
10
9
|
const insertCodeBlock$ = Signal((r) => {
|
|
11
10
|
r.link(
|
|
@@ -39,7 +38,6 @@ export {
|
|
|
39
38
|
$isCodeBlockNode,
|
|
40
39
|
CodeBlockNode,
|
|
41
40
|
appendCodeBlockEditorDescriptor$,
|
|
42
|
-
codeBlockEditorDescriptors$,
|
|
43
41
|
codeBlockPlugin,
|
|
44
42
|
defaultCodeBlockLanguage$,
|
|
45
43
|
insertCodeBlock$,
|
|
@@ -29,15 +29,21 @@ const codeMirrorPlugin = realmPlugin({
|
|
|
29
29
|
r.pub(codeBlockLanguages$, params == null ? void 0 : params.codeBlockLanguages);
|
|
30
30
|
},
|
|
31
31
|
init(r, params) {
|
|
32
|
-
r.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
},
|
|
36
|
-
priority: 1,
|
|
37
|
-
Editor: CodeMirrorEditor
|
|
32
|
+
r.pubIn({
|
|
33
|
+
[codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
|
|
34
|
+
[appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) || {})
|
|
38
35
|
});
|
|
39
36
|
}
|
|
40
37
|
});
|
|
38
|
+
function buildCodeBlockDescriptor(codeBlockLanguages) {
|
|
39
|
+
return {
|
|
40
|
+
match(language, meta) {
|
|
41
|
+
return Boolean(codeBlockLanguages.hasOwnProperty(language || "")) && !Boolean(meta);
|
|
42
|
+
},
|
|
43
|
+
priority: 1,
|
|
44
|
+
Editor: CodeMirrorEditor
|
|
45
|
+
};
|
|
46
|
+
}
|
|
41
47
|
export {
|
|
42
48
|
codeBlockLanguages$,
|
|
43
49
|
codeMirrorPlugin,
|
|
@@ -14,7 +14,7 @@ const MdastFormattingVisitor = {
|
|
|
14
14
|
},
|
|
15
15
|
visitNode({ mdastNode, lexicalParent, actions, mdastParent }) {
|
|
16
16
|
if (isOpeningUnderlineNode(mdastNode)) {
|
|
17
|
-
actions.
|
|
17
|
+
actions.removeFormatting(IS_UNDERLINE, mdastParent);
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
20
|
if (isClosingUnderlineNode(mdastNode)) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { $addUpdateTag, $getNodeByKey, createEditor, $getRoot, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL } from "lexical";
|
|
2
2
|
import React__default from "react";
|
|
3
|
-
import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, jsxIsAvailable$, nestedEditorChildren$, editorInFocus$ } from "./index.js";
|
|
3
|
+
import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, nestedEditorChildren$, editorInFocus$ } from "./index.js";
|
|
4
4
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
|
|
5
5
|
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
|
|
6
6
|
import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
|
|
@@ -53,12 +53,24 @@ const NestedLexicalEditor = function(props) {
|
|
|
53
53
|
const updateMdastNode = useMdastNodeUpdater();
|
|
54
54
|
const removeNode = useLexicalNodeRemove();
|
|
55
55
|
const content = getContent(mdastNode);
|
|
56
|
-
const [
|
|
56
|
+
const [
|
|
57
|
+
rootEditor,
|
|
58
|
+
importVisitors,
|
|
59
|
+
exportVisitors,
|
|
60
|
+
usedLexicalNodes,
|
|
61
|
+
jsxComponentDescriptors,
|
|
62
|
+
directiveDescriptors,
|
|
63
|
+
codeBlockEditorDescriptors,
|
|
64
|
+
jsxIsAvailable,
|
|
65
|
+
nestedEditorChildren
|
|
66
|
+
] = useCellValues(
|
|
57
67
|
rootEditor$,
|
|
58
68
|
importVisitors$,
|
|
59
69
|
exportVisitors$,
|
|
60
70
|
usedLexicalNodes$,
|
|
61
71
|
jsxComponentDescriptors$,
|
|
72
|
+
directiveDescriptors$,
|
|
73
|
+
codeBlockEditorDescriptors$,
|
|
62
74
|
jsxIsAvailable$,
|
|
63
75
|
nestedEditorChildren$
|
|
64
76
|
);
|
|
@@ -92,7 +104,10 @@ const NestedLexicalEditor = function(props) {
|
|
|
92
104
|
type: "root",
|
|
93
105
|
children: theContent
|
|
94
106
|
},
|
|
95
|
-
visitors: importVisitors
|
|
107
|
+
visitors: importVisitors,
|
|
108
|
+
directiveDescriptors,
|
|
109
|
+
codeBlockEditorDescriptors,
|
|
110
|
+
jsxComponentDescriptors
|
|
96
111
|
});
|
|
97
112
|
});
|
|
98
113
|
}, [editor, block, importVisitors]);
|
|
@@ -91,6 +91,8 @@ const toMarkdownExtensions$ = Cell([]);
|
|
|
91
91
|
const toMarkdownOptions$ = Cell({});
|
|
92
92
|
const jsxIsAvailable$ = Cell(false);
|
|
93
93
|
const jsxComponentDescriptors$ = Cell([]);
|
|
94
|
+
const directiveDescriptors$ = Cell([]);
|
|
95
|
+
const codeBlockEditorDescriptors$ = Cell([]);
|
|
94
96
|
const editorRootElementRef$ = Cell(null);
|
|
95
97
|
const addLexicalNode$ = Appender(usedLexicalNodes$);
|
|
96
98
|
const addImportVisitor$ = Appender(importVisitors$);
|
|
@@ -321,7 +323,10 @@ function tryImportingMarkdown(r, node, markdownValue) {
|
|
|
321
323
|
visitors: r.getValue(importVisitors$),
|
|
322
324
|
mdastExtensions: r.getValue(mdastExtensions$),
|
|
323
325
|
markdown: markdownValue,
|
|
324
|
-
syntaxExtensions: r.getValue(syntaxExtensions$)
|
|
326
|
+
syntaxExtensions: r.getValue(syntaxExtensions$),
|
|
327
|
+
jsxComponentDescriptors: r.getValue(jsxComponentDescriptors$),
|
|
328
|
+
directiveDescriptors: r.getValue(directiveDescriptors$),
|
|
329
|
+
codeBlockEditorDescriptors: r.getValue(codeBlockEditorDescriptors$)
|
|
325
330
|
});
|
|
326
331
|
r.pub(markdownProcessingError$, null);
|
|
327
332
|
} catch (e) {
|
|
@@ -526,6 +531,7 @@ export {
|
|
|
526
531
|
applyBlockType$,
|
|
527
532
|
applyFormat$,
|
|
528
533
|
autoFocus$,
|
|
534
|
+
codeBlockEditorDescriptors$,
|
|
529
535
|
composerChildren$,
|
|
530
536
|
contentEditableClassName$,
|
|
531
537
|
convertSelectionToNode$,
|
|
@@ -535,6 +541,7 @@ export {
|
|
|
535
541
|
currentBlockType$,
|
|
536
542
|
currentFormat$,
|
|
537
543
|
currentSelection$,
|
|
544
|
+
directiveDescriptors$,
|
|
538
545
|
editorInFocus$,
|
|
539
546
|
editorRootElementRef$,
|
|
540
547
|
editorWrappers$,
|
|
@@ -7,9 +7,9 @@ var __publicField = (obj, key, value) => {
|
|
|
7
7
|
import React__default from "react";
|
|
8
8
|
import { DecoratorNode } from "lexical";
|
|
9
9
|
import { NestedEditorsContext } from "../core/NestedLexicalEditor.js";
|
|
10
|
-
import { directiveDescriptors$ } from "./index.js";
|
|
11
10
|
import { voidEmitter } from "../../utils/voidEmitter.js";
|
|
12
11
|
import { useCellValues } from "@mdxeditor/gurx";
|
|
12
|
+
import { directiveDescriptors$ } from "../core/index.js";
|
|
13
13
|
let GENERATION = 0;
|
|
14
14
|
class DirectiveNode extends DecoratorNode {
|
|
15
15
|
/**
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { $createDirectiveNode } from "./DirectiveNode.js";
|
|
2
2
|
const DIRECTIVE_TYPES = ["leafDirective", "containerDirective", "textDirective"];
|
|
3
|
+
function isMdastDirectivesNode(node) {
|
|
4
|
+
return DIRECTIVE_TYPES.includes(node.type);
|
|
5
|
+
}
|
|
3
6
|
const MdastDirectiveVisitor = {
|
|
4
|
-
testNode: (node) => {
|
|
5
|
-
|
|
7
|
+
testNode: (node, { directiveDescriptors }) => {
|
|
8
|
+
if (isMdastDirectivesNode(node)) {
|
|
9
|
+
const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(node));
|
|
10
|
+
return descriptor !== void 0;
|
|
11
|
+
}
|
|
12
|
+
return false;
|
|
6
13
|
},
|
|
7
14
|
visitNode({ lexicalParent, mdastNode }) {
|
|
8
15
|
lexicalParent.append($createDirectiveNode(mdastNode));
|
|
9
16
|
}
|
|
10
17
|
};
|
|
11
18
|
export {
|
|
12
|
-
MdastDirectiveVisitor
|
|
19
|
+
MdastDirectiveVisitor,
|
|
20
|
+
isMdastDirectivesNode
|
|
13
21
|
};
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
2
|
-
import { insertDecoratorNode$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
|
|
3
|
-
import {
|
|
2
|
+
import { insertDecoratorNode$, directiveDescriptors$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
|
|
3
|
+
import { Signal, map } from "@mdxeditor/gurx";
|
|
4
4
|
import { directiveFromMarkdown, directiveToMarkdown } from "mdast-util-directive";
|
|
5
5
|
import { directive } from "micromark-extension-directive";
|
|
6
6
|
import { $createDirectiveNode, DirectiveNode } from "./DirectiveNode.js";
|
|
7
7
|
import { $isDirectiveNode } from "./DirectiveNode.js";
|
|
8
8
|
import { DirectiveVisitor } from "./DirectiveVisitor.js";
|
|
9
9
|
import { MdastDirectiveVisitor } from "./MdastDirectiveVisitor.js";
|
|
10
|
-
const directiveDescriptors$ = Cell([]);
|
|
11
10
|
const insertDirective$ = Signal((r) => {
|
|
12
11
|
r.link(
|
|
13
12
|
r.pipe(
|
|
@@ -40,7 +39,6 @@ export {
|
|
|
40
39
|
$createDirectiveNode,
|
|
41
40
|
$isDirectiveNode,
|
|
42
41
|
DirectiveNode,
|
|
43
|
-
directiveDescriptors$,
|
|
44
42
|
directivesPlugin,
|
|
45
43
|
insertDirective$
|
|
46
44
|
};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
|
|
2
2
|
const MdastMdxJsxElementVisitor = {
|
|
3
|
-
testNode: (node) => {
|
|
4
|
-
|
|
3
|
+
testNode: (node, { jsxComponentDescriptors }) => {
|
|
4
|
+
if (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") {
|
|
5
|
+
const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === node.name);
|
|
6
|
+
return descriptor !== void 0;
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
5
9
|
},
|
|
6
10
|
visitNode({ lexicalParent, mdastNode }) {
|
|
7
11
|
lexicalParent.append($createLexicalJsxNode(mdastNode));
|
|
@@ -50,26 +50,32 @@ const insertSandpack$ = Signal((r) => {
|
|
|
50
50
|
);
|
|
51
51
|
});
|
|
52
52
|
const sandpackPlugin = realmPlugin({
|
|
53
|
-
init(realm) {
|
|
54
|
-
realm.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
},
|
|
58
|
-
priority: 1,
|
|
59
|
-
Editor(props) {
|
|
60
|
-
const config = useCellValue(sandpackConfig$);
|
|
61
|
-
const preset = config.presets.find((preset2) => preset2.meta === props.meta);
|
|
62
|
-
if (!preset) {
|
|
63
|
-
throw new Error(`No sandpack preset found with ${props.meta}`);
|
|
64
|
-
}
|
|
65
|
-
return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
|
|
66
|
-
}
|
|
53
|
+
init(realm, params) {
|
|
54
|
+
realm.pubIn({
|
|
55
|
+
[sandpackConfig$]: params == null ? void 0 : params.sandpackConfig,
|
|
56
|
+
[appendCodeBlockEditorDescriptor$]: sandpackCodeBlockDescriptor()
|
|
67
57
|
});
|
|
68
58
|
},
|
|
69
59
|
update(realm, params) {
|
|
70
60
|
realm.pub(sandpackConfig$, params == null ? void 0 : params.sandpackConfig);
|
|
71
61
|
}
|
|
72
62
|
});
|
|
63
|
+
function sandpackCodeBlockDescriptor() {
|
|
64
|
+
return {
|
|
65
|
+
match(_language, meta) {
|
|
66
|
+
return Boolean(meta == null ? void 0 : meta.startsWith("live"));
|
|
67
|
+
},
|
|
68
|
+
Editor(props) {
|
|
69
|
+
const config = useCellValue(sandpackConfig$);
|
|
70
|
+
const preset = config.presets.find((preset2) => preset2.meta === props.meta);
|
|
71
|
+
if (!preset) {
|
|
72
|
+
throw new Error(`No sandpack preset found with ${props.meta}`);
|
|
73
|
+
}
|
|
74
|
+
return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
|
|
75
|
+
},
|
|
76
|
+
priority: 1
|
|
77
|
+
};
|
|
78
|
+
}
|
|
73
79
|
export {
|
|
74
80
|
insertSandpack$,
|
|
75
81
|
sandpackConfig$,
|
|
@@ -15,7 +15,7 @@ import classNames from "classnames";
|
|
|
15
15
|
import styles from "../../styles/ui.module.css.js";
|
|
16
16
|
import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
|
|
17
17
|
import { uuidv4 } from "../../utils/uuid4.js";
|
|
18
|
-
import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
|
|
18
|
+
import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
|
|
19
19
|
import { useCellValues } from "@mdxeditor/gurx";
|
|
20
20
|
const AlignToTailwindClassMap = {
|
|
21
21
|
center: styles.centeredCell,
|
|
@@ -188,11 +188,22 @@ const Cell = ({ align, ...props }) => {
|
|
|
188
188
|
);
|
|
189
189
|
};
|
|
190
190
|
const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
|
|
191
|
-
const [
|
|
191
|
+
const [
|
|
192
|
+
importVisitors,
|
|
193
|
+
exportVisitors,
|
|
194
|
+
usedLexicalNodes,
|
|
195
|
+
jsxComponentDescriptors,
|
|
196
|
+
directiveDescriptors,
|
|
197
|
+
codeBlockEditorDescriptors,
|
|
198
|
+
jsxIsAvailable,
|
|
199
|
+
rootEditor
|
|
200
|
+
] = useCellValues(
|
|
192
201
|
importVisitors$,
|
|
193
202
|
exportVisitors$,
|
|
194
203
|
usedLexicalNodes$,
|
|
195
204
|
jsxComponentDescriptors$,
|
|
205
|
+
directiveDescriptors$,
|
|
206
|
+
codeBlockEditorDescriptors$,
|
|
196
207
|
jsxIsAvailable$,
|
|
197
208
|
rootEditor$
|
|
198
209
|
);
|
|
@@ -205,7 +216,10 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
|
|
|
205
216
|
importMdastTreeToLexical({
|
|
206
217
|
root: $getRoot(),
|
|
207
218
|
mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
|
|
208
|
-
visitors: importVisitors
|
|
219
|
+
visitors: importVisitors,
|
|
220
|
+
jsxComponentDescriptors,
|
|
221
|
+
directiveDescriptors,
|
|
222
|
+
codeBlockEditorDescriptors
|
|
209
223
|
});
|
|
210
224
|
});
|
|
211
225
|
return editor2;
|