@mdxeditor/editor 2.8.3 → 2.9.1
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/MDXEditor.js +6 -9
- package/dist/index.d.ts +1 -1
- package/dist/plugins/jsx/LexicalMdxTextExpressionNode.js +125 -0
- package/dist/plugins/jsx/LexicalMdxTextExpressionVisitor.js +14 -0
- package/dist/plugins/jsx/MdastMdxTextExpressionVisitor.js +11 -0
- package/dist/plugins/jsx/index.js +6 -3
- package/dist/style.css +282 -240
- package/dist/styles/lexical-theme.module.css.js +27 -24
- package/dist/styles/lexicalTheme.js +18 -18
- package/dist/styles/ui.module.css.js +107 -104
- package/package.json +1 -1
package/dist/MDXEditor.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
+
import { useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
|
|
1
2
|
import React__default from "react";
|
|
2
|
-
import { corePlugin, initialRootEditorState$, usedLexicalNodes$, readOnly$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$, rootEditor$ } from "./plugins/core/index.js";
|
|
3
3
|
import { RealmWithPlugins } from "./RealmWithPlugins.js";
|
|
4
|
-
import {
|
|
5
|
-
import { lexicalTheme } from "./styles/lexicalTheme.js";
|
|
4
|
+
import { corePlugin, initialRootEditorState$, usedLexicalNodes$, readOnly$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$, rootEditor$ } from "./plugins/core/index.js";
|
|
6
5
|
import { LexicalComposer } from "@lexical/react/LexicalComposer.js";
|
|
7
|
-
import styles from "./styles/ui.module.css.js";
|
|
8
|
-
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
|
|
9
6
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
|
|
10
7
|
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
|
|
8
|
+
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
|
|
11
9
|
import classNames from "classnames";
|
|
10
|
+
import { lexicalTheme } from "./styles/lexicalTheme.js";
|
|
11
|
+
import styles from "./styles/ui.module.css.js";
|
|
12
12
|
import { noop } from "./utils/fp.js";
|
|
13
13
|
const LexicalProvider = ({ children }) => {
|
|
14
14
|
const [initialRootEditorState, nodes, readOnly] = useCellValues(initialRootEditorState$, usedLexicalNodes$, readOnly$);
|
|
@@ -56,10 +56,7 @@ const IconFallback = () => {
|
|
|
56
56
|
const defaultIconComponentFor = (name) => {
|
|
57
57
|
return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: /* @__PURE__ */ React__default.createElement(IconFallback, null) }, /* @__PURE__ */ React__default.createElement(DefaultIcon, { name }));
|
|
58
58
|
};
|
|
59
|
-
const RenderRecursiveWrappers = ({
|
|
60
|
-
wrappers,
|
|
61
|
-
children
|
|
62
|
-
}) => {
|
|
59
|
+
const RenderRecursiveWrappers = ({ wrappers, children }) => {
|
|
63
60
|
if (wrappers.length === 0) {
|
|
64
61
|
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
|
|
65
62
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -2536,7 +2536,7 @@ export declare function thrush<I, K>(arg: I, proc: (arg: I) => K): K;
|
|
|
2536
2536
|
|
|
2537
2537
|
/* Excluded from this release type: ToggleSingleGroupWithItem */
|
|
2538
2538
|
|
|
2539
|
-
|
|
2539
|
+
export declare type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
|
|
2540
2540
|
|
|
2541
2541
|
/* Excluded from this release type: toMarkdownExtensions$ */
|
|
2542
2542
|
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => {
|
|
4
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
return value;
|
|
6
|
+
};
|
|
7
|
+
import React__default from "react";
|
|
8
|
+
import { DecoratorNode, $applyNodeReplacement } from "lexical";
|
|
9
|
+
import lexicalThemeStyles from "../../styles/lexical-theme.module.css.js";
|
|
10
|
+
import styles from "../../styles/ui.module.css.js";
|
|
11
|
+
class LexicalMdxTextExpressionNode extends DecoratorNode {
|
|
12
|
+
/**
|
|
13
|
+
* Constructs a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
|
|
14
|
+
*/
|
|
15
|
+
constructor(value, key) {
|
|
16
|
+
super(key);
|
|
17
|
+
/** @internal */
|
|
18
|
+
__publicField(this, "__value");
|
|
19
|
+
this.__value = value;
|
|
20
|
+
}
|
|
21
|
+
/** @internal */
|
|
22
|
+
static getType() {
|
|
23
|
+
return "mdx-text-expression";
|
|
24
|
+
}
|
|
25
|
+
/** @internal */
|
|
26
|
+
static clone(node) {
|
|
27
|
+
return new LexicalMdxTextExpressionNode(node.__value, node.__key);
|
|
28
|
+
}
|
|
29
|
+
getValue() {
|
|
30
|
+
return this.__value;
|
|
31
|
+
}
|
|
32
|
+
// View
|
|
33
|
+
createDOM() {
|
|
34
|
+
const element = document.createElement("span");
|
|
35
|
+
element.classList.add(lexicalThemeStyles.mdxTextExpression);
|
|
36
|
+
return element;
|
|
37
|
+
}
|
|
38
|
+
updateDOM() {
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
static importDOM() {
|
|
42
|
+
return {};
|
|
43
|
+
}
|
|
44
|
+
exportDOM(editor) {
|
|
45
|
+
const { element } = super.exportDOM(editor);
|
|
46
|
+
return {
|
|
47
|
+
element
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
static importJSON(serializedNode) {
|
|
51
|
+
return $createLexicalMdxTextExpressionNode(serializedNode.value);
|
|
52
|
+
}
|
|
53
|
+
exportJSON() {
|
|
54
|
+
return {
|
|
55
|
+
...super.exportJSON(),
|
|
56
|
+
value: this.getValue(),
|
|
57
|
+
type: "mdx-text-expression",
|
|
58
|
+
version: 1
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
/*
|
|
62
|
+
// Mutation
|
|
63
|
+
insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
|
|
64
|
+
const anchorOffet = selection ? selection.anchor.offset : 0
|
|
65
|
+
const newElement =
|
|
66
|
+
anchorOffet > 0 && anchorOffet < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
|
|
67
|
+
const direction = this.getDirection()
|
|
68
|
+
newElement.setDirection(direction)
|
|
69
|
+
this.insertAfter(newElement, restoreSelection)
|
|
70
|
+
return newElement
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
collapseAtStart(): true {
|
|
74
|
+
const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
|
|
75
|
+
const children = this.getChildren()
|
|
76
|
+
children.forEach((child) => newElement.append(child))
|
|
77
|
+
this.replace(newElement)
|
|
78
|
+
return true
|
|
79
|
+
}*/
|
|
80
|
+
extractWithChild() {
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
isInline() {
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
86
|
+
decorate(editor) {
|
|
87
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "{", /* @__PURE__ */ React__default.createElement("span", { className: styles.inputSizer, "data-value": this.getValue() }, /* @__PURE__ */ React__default.createElement(
|
|
88
|
+
"input",
|
|
89
|
+
{
|
|
90
|
+
size: 1,
|
|
91
|
+
onKeyDown: (e) => {
|
|
92
|
+
const value = e.target.value;
|
|
93
|
+
if (value === "" && e.key === "Backspace" || e.key === "Delete") {
|
|
94
|
+
e.stopPropagation();
|
|
95
|
+
e.nativeEvent.stopImmediatePropagation();
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
editor.update(() => {
|
|
98
|
+
this.selectPrevious();
|
|
99
|
+
this.remove();
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
onChange: (e) => {
|
|
104
|
+
e.target.parentElement.dataset.value = e.target.value;
|
|
105
|
+
editor.update(() => {
|
|
106
|
+
this.getWritable().__value = e.target.value;
|
|
107
|
+
});
|
|
108
|
+
},
|
|
109
|
+
type: "text",
|
|
110
|
+
value: this.getValue()
|
|
111
|
+
}
|
|
112
|
+
)), "}");
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
function $createLexicalMdxTextExpressionNode(value) {
|
|
116
|
+
return $applyNodeReplacement(new LexicalMdxTextExpressionNode(value));
|
|
117
|
+
}
|
|
118
|
+
function $isLexicalMdxTextExpressionNode(node) {
|
|
119
|
+
return node instanceof LexicalMdxTextExpressionNode;
|
|
120
|
+
}
|
|
121
|
+
export {
|
|
122
|
+
$createLexicalMdxTextExpressionNode,
|
|
123
|
+
$isLexicalMdxTextExpressionNode,
|
|
124
|
+
LexicalMdxTextExpressionNode
|
|
125
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { $isLexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
|
|
2
|
+
const LexicalMdxTextExpressionVisitor = {
|
|
3
|
+
testLexicalNode: $isLexicalMdxTextExpressionNode,
|
|
4
|
+
visitLexicalNode({ actions, mdastParent, lexicalNode }) {
|
|
5
|
+
const mdastNode = {
|
|
6
|
+
type: "mdxTextExpression",
|
|
7
|
+
value: lexicalNode.getValue()
|
|
8
|
+
};
|
|
9
|
+
actions.appendToParent(mdastParent, mdastNode);
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
LexicalMdxTextExpressionVisitor
|
|
14
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { $createLexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
|
|
2
|
+
const MdastMdxTextExpressionVisitor = {
|
|
3
|
+
testNode: "mdxTextExpression",
|
|
4
|
+
visitNode({ lexicalParent, mdastNode }) {
|
|
5
|
+
lexicalParent.append($createLexicalMdxTextExpressionNode(mdastNode.value));
|
|
6
|
+
},
|
|
7
|
+
priority: -200
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
MdastMdxTextExpressionVisitor
|
|
11
|
+
};
|
|
@@ -7,6 +7,9 @@ import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
|
|
|
7
7
|
import { MdastMdxJsxElementVisitor } from "./MdastMdxJsxElementVisitor.js";
|
|
8
8
|
import { Signal, map } from "@mdxeditor/gurx";
|
|
9
9
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
10
|
+
import { MdastMdxTextExpressionVisitor } from "./MdastMdxTextExpressionVisitor.js";
|
|
11
|
+
import { LexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
|
|
12
|
+
import { LexicalMdxTextExpressionVisitor } from "./LexicalMdxTextExpressionVisitor.js";
|
|
10
13
|
function isMdastJsxNode(node) {
|
|
11
14
|
return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
|
|
12
15
|
}
|
|
@@ -52,10 +55,10 @@ const jsxPlugin = realmPlugin({
|
|
|
52
55
|
[jsxIsAvailable$]: true,
|
|
53
56
|
[addMdastExtension$]: mdxFromMarkdown(),
|
|
54
57
|
[addSyntaxExtension$]: mdxjs(),
|
|
55
|
-
[addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor],
|
|
58
|
+
[addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor, MdastMdxTextExpressionVisitor],
|
|
56
59
|
// export
|
|
57
|
-
[addLexicalNode$]: LexicalJsxNode,
|
|
58
|
-
[addExportVisitor$]: LexicalJsxVisitor,
|
|
60
|
+
[addLexicalNode$]: [LexicalJsxNode, LexicalMdxTextExpressionNode],
|
|
61
|
+
[addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxTextExpressionVisitor],
|
|
59
62
|
[addToMarkdownExtension$]: mdxToMarkdown(),
|
|
60
63
|
[jsxComponentDescriptors$]: (params == null ? void 0 : params.jsxComponentDescriptors) || []
|
|
61
64
|
});
|