@mdxeditor/editor 3.30.0 → 3.30.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
CHANGED
|
@@ -69,7 +69,7 @@ const RenderRecursiveWrappers = ({ wrappers, children }) => {
|
|
|
69
69
|
const Wrapper = wrappers[0];
|
|
70
70
|
return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: wrappers.slice(1) }, children));
|
|
71
71
|
};
|
|
72
|
-
const EditorRootElement = ({ children, className }) => {
|
|
72
|
+
const EditorRootElement = ({ children, className, overlayContainer }) => {
|
|
73
73
|
const editorRootElementRef = React__default.useRef(null);
|
|
74
74
|
const setEditorRootElementRef = usePublisher(editorRootElementRef$);
|
|
75
75
|
React__default.useEffect(() => {
|
|
@@ -80,13 +80,14 @@ const EditorRootElement = ({ children, className }) => {
|
|
|
80
80
|
styles.popupContainer,
|
|
81
81
|
...(className ?? "").trim().split(" ").filter(Boolean)
|
|
82
82
|
);
|
|
83
|
-
document.body
|
|
83
|
+
const container = overlayContainer ?? document.body;
|
|
84
|
+
container.appendChild(popupContainer);
|
|
84
85
|
editorRootElementRef.current = popupContainer;
|
|
85
86
|
setEditorRootElementRef(editorRootElementRef);
|
|
86
87
|
return () => {
|
|
87
88
|
popupContainer.remove();
|
|
88
89
|
};
|
|
89
|
-
}, [className, editorRootElementRef, setEditorRootElementRef]);
|
|
90
|
+
}, [className, editorRootElementRef, overlayContainer, setEditorRootElementRef]);
|
|
90
91
|
return /* @__PURE__ */ React__default.createElement("div", { className: classNames("mdxeditor", styles.editorRoot, styles.editorWrapper, className) }, children);
|
|
91
92
|
};
|
|
92
93
|
const Methods = ({ mdxRef }) => {
|
|
@@ -142,7 +143,7 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
|
|
|
142
143
|
...props.plugins ?? []
|
|
143
144
|
]
|
|
144
145
|
},
|
|
145
|
-
/* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
|
|
146
|
+
/* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className, overlayContainer: props.overlayContainer }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
|
|
146
147
|
/* @__PURE__ */ React__default.createElement(Methods, { mdxRef: ref })
|
|
147
148
|
);
|
|
148
149
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -2239,6 +2239,11 @@ export declare interface MDXEditorProps {
|
|
|
2239
2239
|
* A custom lexical theme to use for the editor.
|
|
2240
2240
|
*/
|
|
2241
2241
|
lexicalTheme?: EditorThemeClasses;
|
|
2242
|
+
/**
|
|
2243
|
+
* Optional container element to use for rendering editor popups.
|
|
2244
|
+
* Defaults to document.body.
|
|
2245
|
+
*/
|
|
2246
|
+
overlayContainer?: HTMLElement | null;
|
|
2242
2247
|
}
|
|
2243
2248
|
|
|
2244
2249
|
/**
|
|
@@ -160,12 +160,16 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
160
160
|
if ($isRangeSelection(selection) && activeEditor && !readOnly) {
|
|
161
161
|
const node = getLinkNodeInSelection(selection);
|
|
162
162
|
if (node) {
|
|
163
|
+
const rect = getSelectionRectangle(activeEditor);
|
|
164
|
+
if (!rect) {
|
|
165
|
+
return { type: "inactive" };
|
|
166
|
+
}
|
|
163
167
|
return {
|
|
164
168
|
type: "preview",
|
|
165
169
|
url: node.getURL(),
|
|
166
170
|
linkNodeKey: node.getKey(),
|
|
167
171
|
title: node.getTitle(),
|
|
168
|
-
rectangle:
|
|
172
|
+
rectangle: rect
|
|
169
173
|
};
|
|
170
174
|
} else {
|
|
171
175
|
return { type: "inactive" };
|
|
@@ -48,7 +48,7 @@ const ToggleSingleGroupWithItem = React__default.forwardRef(({ on, title, childr
|
|
|
48
48
|
value: on ? "on" : "off",
|
|
49
49
|
ref: forwardedRef
|
|
50
50
|
},
|
|
51
|
-
/* @__PURE__ */ React__default.createElement(ToolbarToggleItem, { title, value: "on", disabled }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children))
|
|
51
|
+
/* @__PURE__ */ React__default.createElement(ToolbarToggleItem, { "aria-label": title, value: "on", disabled }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children))
|
|
52
52
|
);
|
|
53
53
|
});
|
|
54
54
|
const MultipleChoiceToggleGroup = ({ items }) => {
|