@mdxeditor/editor 4.1.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/MDXEditor.js +1 -1
- package/dist/index.d.ts +17 -0
- package/dist/index.js +8 -7
- package/dist/plugins/codeblock/CodeBlockNode.js +1 -4
- package/dist/plugins/codeblock/index.js +1 -1
- package/dist/plugins/codemirror/CodeMirrorEditor.js +1 -1
- package/dist/plugins/core/GenericHTMLNode.js +2 -5
- package/dist/plugins/core/NestedLexicalEditor.js +2 -2
- package/dist/plugins/core/index.js +2 -2
- package/dist/plugins/diff-source/SourceEditor.js +1 -1
- package/dist/plugins/directives/DirectiveNode.js +1 -4
- package/dist/plugins/frontmatter/FrontmatterNode.js +4 -4
- package/dist/plugins/frontmatter/index.js +1 -1
- package/dist/plugins/headings/index.js +2 -1
- package/dist/plugins/image/ImageDialog.js +1 -2
- package/dist/plugins/image/ImageEditor.js +1 -2
- package/dist/plugins/image/ImageNode.js +1 -4
- package/dist/plugins/image/index.js +4 -6
- package/dist/plugins/jsx/LexicalJsxNode.js +1 -4
- package/dist/plugins/jsx/LexicalMdxExpressionNode.js +1 -4
- package/dist/plugins/link-dialog/LinkDialog.js +9 -4
- package/dist/plugins/link-dialog/index.js +149 -41
- package/dist/plugins/lists/index.js +3 -3
- package/dist/plugins/markdown-shortcut/index.js +1 -1
- package/dist/plugins/search/index.js +24 -47
- package/dist/plugins/table/TableEditor.js +1 -1
- package/dist/plugins/table/TableNode.js +1 -4
- package/dist/plugins/toolbar/components/CreateLink.js +3 -0
- package/dist/plugins/toolbar/components/KitchenSinkToolbar.js +1 -1
- package/dist/plugins/toolbar/primitives/toolbar.js +1 -1
- package/dist/style.css +1503 -1448
- package/dist/styles/ui.module.css.js +94 -94
- package/dist/utils/lexicalHelpers.js +29 -17
- package/package.json +2 -2
- package/dist/styles/globals.css.js +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { $isLinkNode, $createLinkNode, $isAutoLinkNode,
|
|
2
|
-
import {
|
|
3
|
-
import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $getNodeByKey, $createTextNode, $insertNodes, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
|
|
1
|
+
import { $isLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode, $isAutoLinkNode, LinkNode } from "@lexical/link";
|
|
2
|
+
import { Action, Cell, withLatestFrom, map, Signal } from "@mdxeditor/gurx";
|
|
3
|
+
import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $getNodeByKey, $createNodeSelection, $setSelection, $createTextNode, $insertNodes, $isNodeSelection, $isDecoratorNode, $isTextNode, $getNearestNodeFromDOMNode } from "lexical";
|
|
4
4
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
5
5
|
import { IS_APPLE } from "../../utils/detectMac.js";
|
|
6
|
-
import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
|
|
6
|
+
import { getNodeRectangle, getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
|
|
7
7
|
import { createActiveEditorSubscription$, viewMode$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
|
|
8
8
|
import { LinkDialog } from "./LinkDialog.js";
|
|
9
9
|
import { $findMatchingParent } from "@lexical/utils";
|
|
@@ -23,9 +23,16 @@ function getLinkNodeInSelection(selection) {
|
|
|
23
23
|
}
|
|
24
24
|
return null;
|
|
25
25
|
}
|
|
26
|
+
function getSelectedInlineDecorator(selection = $getSelection()) {
|
|
27
|
+
if (!$isNodeSelection(selection)) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
const nodes = selection.getNodes();
|
|
31
|
+
const node = nodes.length === 1 ? nodes[0] : null;
|
|
32
|
+
return $isDecoratorNode(node) && node.isInline() ? node : null;
|
|
33
|
+
}
|
|
26
34
|
function getPreviewHref(editor, linkNodeKey, url) {
|
|
27
|
-
if (!editor)
|
|
28
|
-
return "about:blank";
|
|
35
|
+
if (!editor) return "about:blank";
|
|
29
36
|
return editor.getEditorState().read(() => {
|
|
30
37
|
const keyedNode = linkNodeKey === "" ? null : $getNodeByKey(linkNodeKey);
|
|
31
38
|
const selection = $getSelection();
|
|
@@ -61,7 +68,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
61
68
|
(event) => {
|
|
62
69
|
if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey) && !r.getValue(readOnly$)) {
|
|
63
70
|
const selection = $getSelection();
|
|
64
|
-
if ($isRangeSelection(selection)) {
|
|
71
|
+
if ($isRangeSelection(selection) || getSelectedInlineDecorator(selection) !== null) {
|
|
65
72
|
r.pub(openLinkEditDialog$);
|
|
66
73
|
event.stopPropagation();
|
|
67
74
|
event.preventDefault();
|
|
@@ -90,6 +97,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
90
97
|
text,
|
|
91
98
|
withAnchorText,
|
|
92
99
|
linkNodeKey: state.linkNodeKey,
|
|
100
|
+
decoratorNodeKey: state.decoratorNodeKey,
|
|
93
101
|
rectangle: state.rectangle
|
|
94
102
|
});
|
|
95
103
|
});
|
|
@@ -104,6 +112,44 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
104
112
|
const url = ((_b = payload.url) == null ? void 0 : _b.trim()) ?? "";
|
|
105
113
|
const title = ((_c = payload.title) == null ? void 0 : _c.trim()) ?? "";
|
|
106
114
|
if (url !== "") {
|
|
115
|
+
if (state.decoratorNodeKey !== void 0) {
|
|
116
|
+
let linkNodeKey = "";
|
|
117
|
+
let linkApplied = false;
|
|
118
|
+
editor == null ? void 0 : editor.update(
|
|
119
|
+
() => {
|
|
120
|
+
const node = $getNodeByKey(state.decoratorNodeKey);
|
|
121
|
+
if (node === null) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
const nodeSelection = $createNodeSelection();
|
|
125
|
+
nodeSelection.add(node.getKey());
|
|
126
|
+
$setSelection(nodeSelection);
|
|
127
|
+
linkApplied = editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
|
|
128
|
+
if (!linkApplied) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
const parent = node.getParent();
|
|
132
|
+
if ($isLinkNode(parent)) {
|
|
133
|
+
parent.setTitle(title);
|
|
134
|
+
linkNodeKey = parent.getKey();
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{ discrete: true }
|
|
138
|
+
);
|
|
139
|
+
if (linkNodeKey === "") {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
r.pub(linkDialogState$, {
|
|
143
|
+
type: "preview",
|
|
144
|
+
linkNodeKey,
|
|
145
|
+
decoratorNodeKey: state.decoratorNodeKey,
|
|
146
|
+
rectangle: state.rectangle,
|
|
147
|
+
title,
|
|
148
|
+
url,
|
|
149
|
+
href: getPreviewHref(editor, linkNodeKey, url)
|
|
150
|
+
});
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
107
153
|
if (selection == null ? void 0 : selection.isCollapsed()) {
|
|
108
154
|
const linkContent = text || title || url;
|
|
109
155
|
editor == null ? void 0 : editor.update(
|
|
@@ -145,7 +191,20 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
145
191
|
});
|
|
146
192
|
} else {
|
|
147
193
|
if (state.type === "edit" && state.initialUrl !== "") {
|
|
148
|
-
|
|
194
|
+
if (state.decoratorNodeKey !== void 0) {
|
|
195
|
+
editor == null ? void 0 : editor.update(() => {
|
|
196
|
+
const node = $getNodeByKey(state.decoratorNodeKey);
|
|
197
|
+
if (node === null) {
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
const nodeSelection = $createNodeSelection();
|
|
201
|
+
nodeSelection.add(node.getKey());
|
|
202
|
+
$setSelection(nodeSelection);
|
|
203
|
+
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
|
204
|
+
});
|
|
205
|
+
} else {
|
|
206
|
+
editor == null ? void 0 : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
|
207
|
+
}
|
|
149
208
|
}
|
|
150
209
|
r.pub(linkDialogState$, {
|
|
151
210
|
type: "inactive"
|
|
@@ -169,6 +228,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
169
228
|
url: state.initialUrl,
|
|
170
229
|
href: getPreviewHref(editor, state.linkNodeKey, state.initialUrl),
|
|
171
230
|
linkNodeKey: state.linkNodeKey,
|
|
231
|
+
decoratorNodeKey: state.decoratorNodeKey,
|
|
172
232
|
rectangle: state.rectangle
|
|
173
233
|
};
|
|
174
234
|
}
|
|
@@ -183,11 +243,25 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
|
|
|
183
243
|
r.pipe(
|
|
184
244
|
r.combine(currentSelection$, onWindowChange$),
|
|
185
245
|
withLatestFrom(activeEditor$, linkDialogState$, readOnly$),
|
|
186
|
-
map(([[selection], activeEditor,
|
|
246
|
+
map(([[selection], activeEditor, state, readOnly]) => {
|
|
247
|
+
if (state.decoratorNodeKey !== void 0 && activeEditor && !readOnly) {
|
|
248
|
+
const selectedDecoratorKey = activeEditor.getEditorState().read(() => {
|
|
249
|
+
const editorSelection = $getSelection();
|
|
250
|
+
if (!$isNodeSelection(editorSelection)) {
|
|
251
|
+
return null;
|
|
252
|
+
}
|
|
253
|
+
const nodes = editorSelection.getNodes();
|
|
254
|
+
return nodes.length === 1 ? nodes[0].getKey() : null;
|
|
255
|
+
});
|
|
256
|
+
if (selectedDecoratorKey !== state.decoratorNodeKey) {
|
|
257
|
+
return { type: "inactive" };
|
|
258
|
+
}
|
|
259
|
+
const rectangle = getNodeRectangle(activeEditor, state.decoratorNodeKey);
|
|
260
|
+
return rectangle === null ? { type: "inactive" } : { ...state, rectangle };
|
|
261
|
+
}
|
|
187
262
|
if ($isRangeSelection(selection) && activeEditor && !readOnly) {
|
|
188
263
|
const node = getLinkNodeInSelection(selection);
|
|
189
|
-
if (!selection.isCollapsed())
|
|
190
|
-
return { type: "inactive" };
|
|
264
|
+
if (!selection.isCollapsed()) return { type: "inactive" };
|
|
191
265
|
if (node) {
|
|
192
266
|
const rect = getSelectionRectangle(activeEditor);
|
|
193
267
|
if (!rect) {
|
|
@@ -222,39 +296,73 @@ const removeLink$ = Action((r) => {
|
|
|
222
296
|
});
|
|
223
297
|
});
|
|
224
298
|
const openLinkEditDialog$ = Action((r) => {
|
|
225
|
-
r.sub(
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
299
|
+
r.sub(r.pipe(openLinkEditDialog$, withLatestFrom(currentSelection$, activeEditor$)), ([, selection, editor]) => {
|
|
300
|
+
if (!editor) {
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
const decorator = editor.getEditorState().read(() => {
|
|
304
|
+
const node = getSelectedInlineDecorator();
|
|
305
|
+
if (node === null) {
|
|
306
|
+
return null;
|
|
307
|
+
}
|
|
308
|
+
const parent = node.getParent();
|
|
309
|
+
const linkNode = $isLinkNode(parent) ? parent : null;
|
|
310
|
+
return {
|
|
311
|
+
nodeKey: node.getKey(),
|
|
312
|
+
url: (linkNode == null ? void 0 : linkNode.getURL()) ?? "",
|
|
313
|
+
title: (linkNode == null ? void 0 : linkNode.getTitle()) ?? "",
|
|
314
|
+
linkNodeKey: (linkNode == null ? void 0 : linkNode.getKey()) ?? ""
|
|
315
|
+
};
|
|
316
|
+
});
|
|
317
|
+
if (decorator !== null) {
|
|
318
|
+
const rectangle = getNodeRectangle(editor, decorator.nodeKey);
|
|
319
|
+
if (rectangle === null) {
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
r.pub(linkDialogState$, {
|
|
323
|
+
type: "edit",
|
|
324
|
+
initialUrl: decorator.url,
|
|
325
|
+
url: decorator.url,
|
|
326
|
+
title: decorator.title,
|
|
327
|
+
text: "",
|
|
328
|
+
withAnchorText: false,
|
|
329
|
+
linkNodeKey: decorator.linkNodeKey,
|
|
330
|
+
decoratorNodeKey: decorator.nodeKey,
|
|
331
|
+
rectangle
|
|
332
|
+
});
|
|
333
|
+
return;
|
|
334
|
+
}
|
|
335
|
+
if (!$isRangeSelection(selection)) {
|
|
336
|
+
return;
|
|
337
|
+
}
|
|
338
|
+
editor.focus(() => {
|
|
339
|
+
setTimeout(() => {
|
|
340
|
+
editor.getEditorState().read(() => {
|
|
341
|
+
const linkNode = getLinkNodeInSelection(selection);
|
|
342
|
+
const rectangle = getSelectionRectangle(editor);
|
|
343
|
+
if (rectangle === null) {
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
const initialUrl = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
|
|
347
|
+
const url = (linkNode == null ? void 0 : linkNode.getURL()) ?? "";
|
|
348
|
+
const title = (linkNode == null ? void 0 : linkNode.getTitle()) ?? "";
|
|
349
|
+
const linkNodeKey = (linkNode == null ? void 0 : linkNode.getKey()) ?? "";
|
|
350
|
+
const withAnchorText = linkNode ? linkNode.getTextContent().length > 0 && linkNode.getChildrenSize() <= 1 : selection.isCollapsed();
|
|
351
|
+
const text = withAnchorText && linkNode ? linkNode.getTextContent() : "";
|
|
352
|
+
r.pub(linkDialogState$, {
|
|
353
|
+
type: "edit",
|
|
354
|
+
initialUrl,
|
|
355
|
+
url,
|
|
356
|
+
title,
|
|
357
|
+
text,
|
|
358
|
+
withAnchorText,
|
|
359
|
+
linkNodeKey,
|
|
360
|
+
rectangle
|
|
253
361
|
});
|
|
254
362
|
});
|
|
255
363
|
});
|
|
256
|
-
}
|
|
257
|
-
);
|
|
364
|
+
});
|
|
365
|
+
});
|
|
258
366
|
});
|
|
259
367
|
const linkAutocompleteSuggestions$ = Cell([]);
|
|
260
368
|
const onClickLinkCallback$ = Cell(null);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { activeEditor$, currentSelection$, rootEditor$, addNestedEditorChild$, addComposerChild$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, addActivePlugin$ } from "../core/index.js";
|
|
2
2
|
import { MdastListVisitor } from "./MdastListVisitor.js";
|
|
3
3
|
import { MdastListItemVisitor } from "./MdastListItemVisitor.js";
|
|
4
4
|
import { LexicalListVisitor } from "./LexicalListVisitor.js";
|
|
5
5
|
import { LexicalListItemVisitor } from "./LexicalListItemVisitor.js";
|
|
6
|
-
import { $isListNode, ListNode,
|
|
6
|
+
import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
|
|
7
7
|
import { $isRootOrShadowRoot, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
|
|
8
8
|
import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin.js";
|
|
9
9
|
import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin.js";
|
|
@@ -11,7 +11,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin.js";
|
|
|
11
11
|
import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
|
|
12
12
|
import { gfmTaskListItem } from "micromark-extension-gfm-task-list-item";
|
|
13
13
|
import { gfmTaskListItemToMarkdown, gfmTaskListItemFromMarkdown } from "mdast-util-gfm-task-list-item";
|
|
14
|
-
import {
|
|
14
|
+
import { Signal, withLatestFrom, Cell } from "@mdxeditor/gurx";
|
|
15
15
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
16
16
|
const ListTypeCommandMap = /* @__PURE__ */ new Map([
|
|
17
17
|
["number", INSERT_ORDERED_LIST_COMMAND],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default from "react";
|
|
2
|
-
import { BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, QUOTE, LINK,
|
|
2
|
+
import { ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, QUOTE, LINK, CODE } from "@lexical/markdown";
|
|
3
3
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
|
4
4
|
import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
|
|
5
5
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Cell, debounceTime, useRealm, useCellValue, useCell } from "@mdxeditor/gurx";
|
|
2
2
|
import { createDOMRange } from "@lexical/selection";
|
|
3
|
-
import { $
|
|
3
|
+
import { $getRoot, $getNodeByKey, $isTextNode, $createRangeSelection, HISTORY_PUSH_TAG } from "lexical";
|
|
4
4
|
import { realmPlugin } from "../../RealmWithPlugins.js";
|
|
5
5
|
import { contentEditableRef$, createActiveEditorSubscription$, activeEditor$, historyState$ } from "../core/index.js";
|
|
6
6
|
import { editorUsesHistoryState } from "../core/lexicalExtensions.js";
|
|
@@ -76,8 +76,7 @@ function createSearchSnapshot(editor) {
|
|
|
76
76
|
let sourceOffset = 0;
|
|
77
77
|
while (sourceOffset < nodeText.length) {
|
|
78
78
|
const codePoint = nodeText.codePointAt(sourceOffset);
|
|
79
|
-
if (codePoint === void 0)
|
|
80
|
-
break;
|
|
79
|
+
if (codePoint === void 0) break;
|
|
81
80
|
const sourceUnit = String.fromCodePoint(codePoint);
|
|
82
81
|
const normalizedUnit = sourceUnit.normalize("NFKD");
|
|
83
82
|
const mapsOneToOne = normalizedUnit === sourceUnit;
|
|
@@ -97,8 +96,7 @@ function findStateMatches(snapshot, searchQuery) {
|
|
|
97
96
|
for (const [startIndex, endIndex] of searchText(snapshot.text, searchQuery)) {
|
|
98
97
|
const startUnit = snapshot.units[startIndex];
|
|
99
98
|
const endUnit = snapshot.units[endIndex];
|
|
100
|
-
if (!startUnit || !endUnit)
|
|
101
|
-
continue;
|
|
99
|
+
if (!startUnit || !endUnit) continue;
|
|
102
100
|
matches.push({
|
|
103
101
|
editor: snapshot.editor,
|
|
104
102
|
start: { key: startUnit.key, offset: startUnit.startOffset },
|
|
@@ -136,11 +134,9 @@ function projectSnapshot(snapshot, matches) {
|
|
|
136
134
|
for (const match of matches) {
|
|
137
135
|
const startNode = $getNodeByKey(match.start.key);
|
|
138
136
|
const endNode = $getNodeByKey(match.end.key);
|
|
139
|
-
if (!$isTextNode(startNode) || !$isTextNode(endNode))
|
|
140
|
-
continue;
|
|
137
|
+
if (!$isTextNode(startNode) || !$isTextNode(endNode)) continue;
|
|
141
138
|
const range = createDOMRange(snapshot.editor, startNode, match.start.offset, endNode, match.end.offset);
|
|
142
|
-
if (range)
|
|
143
|
-
projectedMatches.push({ match, range });
|
|
139
|
+
if (range) projectedMatches.push({ match, range });
|
|
144
140
|
}
|
|
145
141
|
});
|
|
146
142
|
return {
|
|
@@ -152,20 +148,16 @@ function supportsHighlights() {
|
|
|
152
148
|
return typeof CSS !== "undefined" && typeof CSS.highlights !== "undefined" && typeof Highlight !== "undefined";
|
|
153
149
|
}
|
|
154
150
|
const focusHighlightRange = (range) => {
|
|
155
|
-
if (!supportsHighlights())
|
|
156
|
-
return;
|
|
151
|
+
if (!supportsHighlights()) return;
|
|
157
152
|
CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
|
|
158
|
-
if (range)
|
|
159
|
-
CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
|
|
153
|
+
if (range) CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
|
|
160
154
|
};
|
|
161
155
|
const highlightRanges = (ranges) => {
|
|
162
|
-
if (!supportsHighlights())
|
|
163
|
-
return;
|
|
156
|
+
if (!supportsHighlights()) return;
|
|
164
157
|
CSS.highlights.set(MDX_SEARCH_NAME, new Highlight(...ranges));
|
|
165
158
|
};
|
|
166
159
|
const resetHighlights = () => {
|
|
167
|
-
if (!supportsHighlights())
|
|
168
|
-
return;
|
|
160
|
+
if (!supportsHighlights()) return;
|
|
169
161
|
CSS.highlights.delete(MDX_SEARCH_NAME);
|
|
170
162
|
CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
|
|
171
163
|
};
|
|
@@ -189,8 +181,7 @@ const scrollToRange = (range, contentEditable, options) => {
|
|
|
189
181
|
const rangeBottom = bottomRelativeToContainer + contentEditable.scrollTop;
|
|
190
182
|
const visibleTop = contentEditable.scrollTop;
|
|
191
183
|
const visibleBottom = visibleTop + contentEditable.clientHeight;
|
|
192
|
-
if (rangeTop >= visibleTop && rangeBottom <= visibleBottom)
|
|
193
|
-
return;
|
|
184
|
+
if (rangeTop >= visibleTop && rangeBottom <= visibleBottom) return;
|
|
194
185
|
}
|
|
195
186
|
const top = topRelativeToContainer + contentEditable.scrollTop - first.height;
|
|
196
187
|
contentEditable.scrollTo({ top, behavior });
|
|
@@ -207,8 +198,7 @@ function clearSearchResults(realm) {
|
|
|
207
198
|
resetHighlights();
|
|
208
199
|
}
|
|
209
200
|
function refreshSearch(realm, editor, advanceFrom) {
|
|
210
|
-
if (realm.getValue(editorSearchActiveEditor$) !== editor)
|
|
211
|
-
return;
|
|
201
|
+
if (realm.getValue(editorSearchActiveEditor$) !== editor) return;
|
|
212
202
|
let snapshot;
|
|
213
203
|
editor.getEditorState().read(() => {
|
|
214
204
|
snapshot = createSearchSnapshot(editor);
|
|
@@ -244,25 +234,19 @@ function refreshSearch(realm, editor, advanceFrom) {
|
|
|
244
234
|
function resolveMatch(match) {
|
|
245
235
|
const startNode = $getNodeByKey(match.start.key);
|
|
246
236
|
const endNode = $getNodeByKey(match.end.key);
|
|
247
|
-
if (!$isTextNode(startNode) || !$isTextNode(endNode))
|
|
248
|
-
|
|
249
|
-
if (match.
|
|
250
|
-
return null;
|
|
251
|
-
if (match.end.offset < 0 || match.end.offset > endNode.getTextContentSize())
|
|
252
|
-
return null;
|
|
237
|
+
if (!$isTextNode(startNode) || !$isTextNode(endNode)) return null;
|
|
238
|
+
if (match.start.offset < 0 || match.start.offset > startNode.getTextContentSize()) return null;
|
|
239
|
+
if (match.end.offset < 0 || match.end.offset > endNode.getTextContentSize()) return null;
|
|
253
240
|
return { startNode, endNode };
|
|
254
241
|
}
|
|
255
242
|
function replaceStateMatches(editor, matches, replacement, onUpdate) {
|
|
256
|
-
if (matches.length === 0 || matches.some((match) => match.editor !== editor))
|
|
257
|
-
return;
|
|
243
|
+
if (matches.length === 0 || matches.some((match) => match.editor !== editor)) return;
|
|
258
244
|
editor.update(
|
|
259
245
|
() => {
|
|
260
|
-
if (matches.some((match) => resolveMatch(match) === null))
|
|
261
|
-
return;
|
|
246
|
+
if (matches.some((match) => resolveMatch(match) === null)) return;
|
|
262
247
|
for (let index = matches.length - 1; index >= 0; index--) {
|
|
263
248
|
const match = matches[index];
|
|
264
|
-
if (!match)
|
|
265
|
-
continue;
|
|
249
|
+
if (!match) continue;
|
|
266
250
|
const resolved = resolveMatch(match);
|
|
267
251
|
if (!resolved) {
|
|
268
252
|
throw new Error("Search match became stale during replacement.");
|
|
@@ -330,15 +314,13 @@ function useEditorSearch() {
|
|
|
330
314
|
realm.pub(editorSearchTermDebounced$, term ?? "");
|
|
331
315
|
};
|
|
332
316
|
const next = () => {
|
|
333
|
-
if (!ranges.length)
|
|
334
|
-
return;
|
|
317
|
+
if (!ranges.length) return;
|
|
335
318
|
const newCursor = cursor % ranges.length + 1;
|
|
336
319
|
scrollToRangeOrIndex(newCursor);
|
|
337
320
|
realm.pub(editorSearchCursor$, newCursor);
|
|
338
321
|
};
|
|
339
322
|
const prev = () => {
|
|
340
|
-
if (!ranges.length)
|
|
341
|
-
return;
|
|
323
|
+
if (!ranges.length) return;
|
|
342
324
|
const newCursor = cursor <= 1 ? ranges.length : cursor - 1;
|
|
343
325
|
scrollToRangeOrIndex(newCursor);
|
|
344
326
|
realm.pub(editorSearchCursor$, newCursor);
|
|
@@ -347,8 +329,7 @@ function useEditorSearch() {
|
|
|
347
329
|
const editor = realm.getValue(editorSearchActiveEditor$);
|
|
348
330
|
const matches = realm.getValue(editorSearchStateMatches$);
|
|
349
331
|
const match = matches[cursor - 1];
|
|
350
|
-
if (!editor || !match)
|
|
351
|
-
return;
|
|
332
|
+
if (!editor || !match) return;
|
|
352
333
|
ensureHistoryBaseline(realm, editor);
|
|
353
334
|
replaceStateMatches(editor, [match], replacement, () => {
|
|
354
335
|
refreshSearch(realm, editor, { cursor, match });
|
|
@@ -358,8 +339,7 @@ function useEditorSearch() {
|
|
|
358
339
|
const replaceAll = (replacement, onUpdate) => {
|
|
359
340
|
const editor = realm.getValue(editorSearchActiveEditor$);
|
|
360
341
|
const matches = realm.getValue(editorSearchStateMatches$);
|
|
361
|
-
if (!editor || matches.length === 0)
|
|
362
|
-
return;
|
|
342
|
+
if (!editor || matches.length === 0) return;
|
|
363
343
|
ensureHistoryBaseline(realm, editor);
|
|
364
344
|
replaceStateMatches(editor, matches, replacement, () => {
|
|
365
345
|
refreshSearch(realm, editor);
|
|
@@ -397,8 +377,7 @@ const searchPlugin = realmPlugin({
|
|
|
397
377
|
});
|
|
398
378
|
realm.sub(editorSearchTerm$, () => {
|
|
399
379
|
const editor = realm.getValue(editorSearchActiveEditor$);
|
|
400
|
-
if (editor)
|
|
401
|
-
refreshSearch(realm, editor);
|
|
380
|
+
if (editor) refreshSearch(realm, editor);
|
|
402
381
|
});
|
|
403
382
|
realm.sub(searchOpen$, (searchOpen) => {
|
|
404
383
|
if (!searchOpen) {
|
|
@@ -406,8 +385,7 @@ const searchPlugin = realmPlugin({
|
|
|
406
385
|
return;
|
|
407
386
|
}
|
|
408
387
|
const editor = realm.getValue(editorSearchActiveEditor$);
|
|
409
|
-
if (editor)
|
|
410
|
-
refreshSearch(realm, editor);
|
|
388
|
+
if (editor) refreshSearch(realm, editor);
|
|
411
389
|
});
|
|
412
390
|
realm.pub(createActiveEditorSubscription$, (editor) => {
|
|
413
391
|
var _a;
|
|
@@ -419,8 +397,7 @@ const searchPlugin = realmPlugin({
|
|
|
419
397
|
clearSearchResults(realm);
|
|
420
398
|
refreshSearch(realm, editor);
|
|
421
399
|
const unregisterUpdate = editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
|
|
422
|
-
if (dirtyElements.size > 0 || dirtyLeaves.size > 0)
|
|
423
|
-
refreshSearch(realm, editor);
|
|
400
|
+
if (dirtyElements.size > 0 || dirtyLeaves.size > 0) refreshSearch(realm, editor);
|
|
424
401
|
});
|
|
425
402
|
const unregisterRoot = editor.registerRootListener((rootElement) => {
|
|
426
403
|
if (!rootElement) {
|
|
@@ -191,7 +191,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
|
|
|
191
191
|
};
|
|
192
192
|
const Cell = ({ align, ...props }) => {
|
|
193
193
|
const { activeCell, setActiveCell } = props;
|
|
194
|
-
const isActive =
|
|
194
|
+
const isActive = (activeCell == null ? void 0 : activeCell[0]) === props.colIndex && activeCell[1] === props.rowIndex;
|
|
195
195
|
const className = AlignToTailwindClassMap[align ?? "left"];
|
|
196
196
|
const CellElement = getCellType(props.rowIndex);
|
|
197
197
|
return /* @__PURE__ */ React__default.createElement(
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
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
|
-
};
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
4
|
import { DecoratorNode } from "lexical";
|
|
8
5
|
import React__default from "react";
|
|
9
6
|
import { noop } from "../../utils/fp.js";
|
|
@@ -18,7 +18,7 @@ import { CreateLink } from "./CreateLink.js";
|
|
|
18
18
|
import { HighlightToggle } from "./HighlightToggle.js";
|
|
19
19
|
function whenInAdmonition(editorInFocus) {
|
|
20
20
|
const node = editorInFocus == null ? void 0 : editorInFocus.rootNode;
|
|
21
|
-
if (
|
|
21
|
+
if ((node == null ? void 0 : node.getType()) !== "directive") {
|
|
22
22
|
return false;
|
|
23
23
|
}
|
|
24
24
|
return ["note", "tip", "danger", "info", "caution"].includes(node.getMdastNode().name);
|
|
@@ -5,7 +5,7 @@ import React__default from "react";
|
|
|
5
5
|
import styles from "../../../styles/ui.module.css.js";
|
|
6
6
|
import { TooltipWrap } from "./TooltipWrap.js";
|
|
7
7
|
import { SelectButtonTrigger, SelectContent, SelectItem } from "./select.js";
|
|
8
|
-
import {
|
|
8
|
+
import { readOnly$, editorInFocus$, useTranslation } from "../../core/index.js";
|
|
9
9
|
import { useCellValue } from "@mdxeditor/gurx";
|
|
10
10
|
function decorateWithRef(Component, decoratedProps) {
|
|
11
11
|
return React__default.forwardRef((props, ref) => {
|