@lexical/react 0.14.3 → 0.14.4
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/LexicalAutoEmbedPlugin.dev.js +2 -2
- package/LexicalAutoEmbedPlugin.dev.mjs +2 -2
- package/LexicalAutoEmbedPlugin.prod.js +2 -2
- package/LexicalAutoEmbedPlugin.prod.mjs +1 -1
- package/LexicalClearEditorPlugin.dev.js +3 -0
- package/LexicalClearEditorPlugin.dev.mjs +4 -1
- package/LexicalClearEditorPlugin.prod.js +2 -2
- package/LexicalClearEditorPlugin.prod.mjs +1 -1
- package/LexicalContextMenuPlugin.dev.js +1 -1
- package/LexicalContextMenuPlugin.dev.mjs +1 -1
- package/LexicalContextMenuPlugin.prod.js +1 -1
- package/LexicalContextMenuPlugin.prod.mjs +1 -1
- package/LexicalNodeMenuPlugin.dev.js +1 -1
- package/LexicalNodeMenuPlugin.dev.mjs +1 -1
- package/LexicalNodeMenuPlugin.prod.js +1 -1
- package/LexicalNodeMenuPlugin.prod.mjs +1 -1
- package/LexicalTreeView.dev.js +26 -434
- package/LexicalTreeView.dev.mjs +26 -434
- package/LexicalTreeView.prod.js +3 -17
- package/LexicalTreeView.prod.mjs +1 -1
- package/LexicalTypeaheadMenuPlugin.dev.js +1 -1
- package/LexicalTypeaheadMenuPlugin.dev.mjs +1 -1
- package/LexicalTypeaheadMenuPlugin.prod.js +1 -1
- package/LexicalTypeaheadMenuPlugin.prod.mjs +1 -1
- package/package.json +339 -19
package/LexicalTreeView.dev.mjs
CHANGED
|
@@ -4,14 +4,10 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import { $
|
|
8
|
-
import { $isLinkNode } from '@lexical/link';
|
|
9
|
-
import { $isMarkNode } from '@lexical/mark';
|
|
10
|
-
import { $isTableSelection } from '@lexical/table';
|
|
7
|
+
import { useLexicalCommandsLog, TreeView as TreeView$1, generateContent } from '@lexical/devtools-core';
|
|
11
8
|
import { mergeRegister } from '@lexical/utils';
|
|
12
|
-
import { COMMAND_PRIORITY_HIGH, $getSelection, $getRoot, $isRangeSelection, $isElementNode, $isNodeSelection, $isTextNode } from 'lexical';
|
|
13
9
|
import * as React from 'react';
|
|
14
|
-
import { useState,
|
|
10
|
+
import { useState, useEffect } from 'react';
|
|
15
11
|
|
|
16
12
|
/**
|
|
17
13
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
@@ -20,19 +16,6 @@ import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
|
|
|
20
16
|
* LICENSE file in the root directory of this source tree.
|
|
21
17
|
*
|
|
22
18
|
*/
|
|
23
|
-
const NON_SINGLE_WIDTH_CHARS_REPLACEMENT = Object.freeze({
|
|
24
|
-
'\t': '\\t',
|
|
25
|
-
'\n': '\\n'
|
|
26
|
-
});
|
|
27
|
-
const NON_SINGLE_WIDTH_CHARS_REGEX = new RegExp(Object.keys(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).join('|'), 'g');
|
|
28
|
-
const SYMBOLS = Object.freeze({
|
|
29
|
-
ancestorHasNextSibling: '|',
|
|
30
|
-
ancestorIsLastChild: ' ',
|
|
31
|
-
hasNextSibling: '├',
|
|
32
|
-
isLastChild: '└',
|
|
33
|
-
selectedChar: '^',
|
|
34
|
-
selectedLine: '>'
|
|
35
|
-
});
|
|
36
19
|
function TreeView({
|
|
37
20
|
treeTypeButtonClassName,
|
|
38
21
|
timeTravelButtonClassName,
|
|
@@ -42,78 +25,18 @@ function TreeView({
|
|
|
42
25
|
timeTravelPanelClassName,
|
|
43
26
|
editor
|
|
44
27
|
}) {
|
|
45
|
-
const
|
|
46
|
-
const [
|
|
47
|
-
const [timeTravelEnabled, setTimeTravelEnabled] = useState(false);
|
|
48
|
-
const [showExportDOM, setShowExportDOM] = useState(false);
|
|
49
|
-
const playingIndexRef = useRef(0);
|
|
50
|
-
const treeElementRef = useRef(null);
|
|
51
|
-
const inputRef = useRef(null);
|
|
52
|
-
const [isPlaying, setIsPlaying] = useState(false);
|
|
53
|
-
const [isLimited, setIsLimited] = useState(false);
|
|
54
|
-
const [showLimited, setShowLimited] = useState(false);
|
|
55
|
-
const lastEditorStateRef = useRef(null);
|
|
28
|
+
const treeElementRef = /*#__PURE__*/React.createRef();
|
|
29
|
+
const [editorCurrentState, setEditorCurrentState] = useState(editor.getEditorState());
|
|
56
30
|
const commandsLog = useLexicalCommandsLog(editor);
|
|
57
|
-
const generateTree = useCallback(editorState => {
|
|
58
|
-
const treeText = generateContent(editor, commandsLog, showExportDOM);
|
|
59
|
-
setContent(treeText);
|
|
60
|
-
if (!timeTravelEnabled) {
|
|
61
|
-
setTimeStampedEditorStates(currentEditorStates => [...currentEditorStates, [Date.now(), editorState]]);
|
|
62
|
-
}
|
|
63
|
-
}, [commandsLog, editor, timeTravelEnabled, showExportDOM]);
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
const editorState = editor.getEditorState();
|
|
66
|
-
if (!showLimited && editorState._nodeMap.size < 1000) {
|
|
67
|
-
setContent(generateContent(editor, commandsLog, showExportDOM));
|
|
68
|
-
}
|
|
69
|
-
}, [commandsLog, editor, showLimited, showExportDOM]);
|
|
70
31
|
useEffect(() => {
|
|
71
32
|
return mergeRegister(editor.registerUpdateListener(({
|
|
72
33
|
editorState
|
|
73
34
|
}) => {
|
|
74
|
-
|
|
75
|
-
lastEditorStateRef.current = editorState;
|
|
76
|
-
setIsLimited(true);
|
|
77
|
-
if (!showLimited) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
generateTree(editorState);
|
|
35
|
+
setEditorCurrentState(editorState);
|
|
82
36
|
}), editor.registerEditableListener(() => {
|
|
83
|
-
|
|
84
|
-
setContent(treeText);
|
|
37
|
+
setEditorCurrentState(editor.getEditorState());
|
|
85
38
|
}));
|
|
86
|
-
}, [
|
|
87
|
-
const totalEditorStates = timeStampedEditorStates.length;
|
|
88
|
-
useEffect(() => {
|
|
89
|
-
if (isPlaying) {
|
|
90
|
-
let timeoutId;
|
|
91
|
-
const play = () => {
|
|
92
|
-
const currentIndex = playingIndexRef.current;
|
|
93
|
-
if (currentIndex === totalEditorStates - 1) {
|
|
94
|
-
setIsPlaying(false);
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
const currentTime = timeStampedEditorStates[currentIndex][0];
|
|
98
|
-
const nextTime = timeStampedEditorStates[currentIndex + 1][0];
|
|
99
|
-
const timeDiff = nextTime - currentTime;
|
|
100
|
-
timeoutId = setTimeout(() => {
|
|
101
|
-
playingIndexRef.current++;
|
|
102
|
-
const index = playingIndexRef.current;
|
|
103
|
-
const input = inputRef.current;
|
|
104
|
-
if (input !== null) {
|
|
105
|
-
input.value = String(index);
|
|
106
|
-
}
|
|
107
|
-
editor.setEditorState(timeStampedEditorStates[index][1]);
|
|
108
|
-
play();
|
|
109
|
-
}, timeDiff);
|
|
110
|
-
};
|
|
111
|
-
play();
|
|
112
|
-
return () => {
|
|
113
|
-
clearTimeout(timeoutId);
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
}, [timeStampedEditorStates, isPlaying, editor, totalEditorStates]);
|
|
39
|
+
}, [editor]);
|
|
117
40
|
useEffect(() => {
|
|
118
41
|
const element = treeElementRef.current;
|
|
119
42
|
if (element !== null) {
|
|
@@ -124,360 +47,29 @@ function TreeView({
|
|
|
124
47
|
element.__lexicalEditor = null;
|
|
125
48
|
};
|
|
126
49
|
}
|
|
127
|
-
}, [editor]);
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
padding: 20
|
|
133
|
-
}
|
|
134
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
135
|
-
style: {
|
|
136
|
-
marginRight: 20
|
|
137
|
-
}
|
|
138
|
-
}, "Detected large EditorState, this can impact debugging performance."), /*#__PURE__*/React.createElement("button", {
|
|
139
|
-
onClick: () => {
|
|
140
|
-
setShowLimited(true);
|
|
141
|
-
const editorState = lastEditorStateRef.current;
|
|
142
|
-
if (editorState !== null) {
|
|
143
|
-
lastEditorStateRef.current = null;
|
|
144
|
-
generateTree(editorState);
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
style: {
|
|
148
|
-
background: 'transparent',
|
|
149
|
-
border: '1px solid white',
|
|
150
|
-
color: 'white',
|
|
151
|
-
cursor: 'pointer',
|
|
152
|
-
padding: 5
|
|
50
|
+
}, [editor, treeElementRef]);
|
|
51
|
+
const handleEditorReadOnly = isReadonly => {
|
|
52
|
+
const rootElement = editor.getRootElement();
|
|
53
|
+
if (rootElement == null) {
|
|
54
|
+
return;
|
|
153
55
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
56
|
+
rootElement.contentEditable = isReadonly ? 'false' : 'true';
|
|
57
|
+
};
|
|
58
|
+
return /*#__PURE__*/React.createElement(TreeView$1, {
|
|
59
|
+
treeTypeButtonClassName: treeTypeButtonClassName,
|
|
60
|
+
timeTravelButtonClassName: timeTravelButtonClassName,
|
|
61
|
+
timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,
|
|
62
|
+
timeTravelPanelButtonClassName: timeTravelPanelButtonClassName,
|
|
63
|
+
viewClassName: viewClassName,
|
|
64
|
+
timeTravelPanelClassName: timeTravelPanelClassName,
|
|
65
|
+
setEditorReadOnly: handleEditorReadOnly,
|
|
66
|
+
editorState: editorCurrentState,
|
|
67
|
+
setEditorState: state => editor.setEditorState(state),
|
|
68
|
+
generateContent: async function (exportDOM) {
|
|
69
|
+
return generateContent(editor, commandsLog, exportDOM);
|
|
166
70
|
},
|
|
167
|
-
className: timeTravelButtonClassName,
|
|
168
|
-
type: "button"
|
|
169
|
-
}, "Time Travel"), (showLimited || !isLimited) && /*#__PURE__*/React.createElement("pre", {
|
|
170
71
|
ref: treeElementRef
|
|
171
|
-
}, content), timeTravelEnabled && (showLimited || !isLimited) && /*#__PURE__*/React.createElement("div", {
|
|
172
|
-
className: timeTravelPanelClassName
|
|
173
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
174
|
-
className: timeTravelPanelButtonClassName,
|
|
175
|
-
onClick: () => {
|
|
176
|
-
if (playingIndexRef.current === totalEditorStates - 1) {
|
|
177
|
-
playingIndexRef.current = 1;
|
|
178
|
-
}
|
|
179
|
-
setIsPlaying(!isPlaying);
|
|
180
|
-
},
|
|
181
|
-
type: "button"
|
|
182
|
-
}, isPlaying ? 'Pause' : 'Play'), /*#__PURE__*/React.createElement("input", {
|
|
183
|
-
className: timeTravelPanelSliderClassName,
|
|
184
|
-
ref: inputRef,
|
|
185
|
-
onChange: event => {
|
|
186
|
-
const editorStateIndex = Number(event.target.value);
|
|
187
|
-
const timeStampedEditorState = timeStampedEditorStates[editorStateIndex];
|
|
188
|
-
if (timeStampedEditorState) {
|
|
189
|
-
playingIndexRef.current = editorStateIndex;
|
|
190
|
-
editor.setEditorState(timeStampedEditorState[1]);
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
type: "range",
|
|
194
|
-
min: "1",
|
|
195
|
-
max: totalEditorStates - 1
|
|
196
|
-
}), /*#__PURE__*/React.createElement("button", {
|
|
197
|
-
className: timeTravelPanelButtonClassName,
|
|
198
|
-
onClick: () => {
|
|
199
|
-
const rootElement = editor.getRootElement();
|
|
200
|
-
if (rootElement !== null) {
|
|
201
|
-
rootElement.contentEditable = 'true';
|
|
202
|
-
const index = timeStampedEditorStates.length - 1;
|
|
203
|
-
const timeStampedEditorState = timeStampedEditorStates[index];
|
|
204
|
-
editor.setEditorState(timeStampedEditorState[1]);
|
|
205
|
-
const input = inputRef.current;
|
|
206
|
-
if (input !== null) {
|
|
207
|
-
input.value = String(index);
|
|
208
|
-
}
|
|
209
|
-
setTimeTravelEnabled(false);
|
|
210
|
-
setIsPlaying(false);
|
|
211
|
-
}
|
|
212
|
-
},
|
|
213
|
-
type: "button"
|
|
214
|
-
}, "Exit")));
|
|
215
|
-
}
|
|
216
|
-
function useLexicalCommandsLog(editor) {
|
|
217
|
-
const [loggedCommands, setLoggedCommands] = useState([]);
|
|
218
|
-
useEffect(() => {
|
|
219
|
-
const unregisterCommandListeners = new Set();
|
|
220
|
-
for (const [command] of editor._commands) {
|
|
221
|
-
unregisterCommandListeners.add(editor.registerCommand(command, payload => {
|
|
222
|
-
setLoggedCommands(state => {
|
|
223
|
-
const newState = [...state];
|
|
224
|
-
newState.push({
|
|
225
|
-
payload,
|
|
226
|
-
type: command.type ? command.type : 'UNKNOWN'
|
|
227
|
-
});
|
|
228
|
-
if (newState.length > 10) {
|
|
229
|
-
newState.shift();
|
|
230
|
-
}
|
|
231
|
-
return newState;
|
|
232
|
-
});
|
|
233
|
-
return false;
|
|
234
|
-
}, COMMAND_PRIORITY_HIGH));
|
|
235
|
-
}
|
|
236
|
-
return () => unregisterCommandListeners.forEach(unregister => unregister());
|
|
237
|
-
}, [editor]);
|
|
238
|
-
return useMemo(() => loggedCommands, [loggedCommands]);
|
|
239
|
-
}
|
|
240
|
-
function printRangeSelection(selection) {
|
|
241
|
-
let res = '';
|
|
242
|
-
const formatText = printFormatProperties(selection);
|
|
243
|
-
res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''} ${selection.style !== '' ? `{ style: ${selection.style} } ` : ''}`;
|
|
244
|
-
const anchor = selection.anchor;
|
|
245
|
-
const focus = selection.focus;
|
|
246
|
-
const anchorOffset = anchor.offset;
|
|
247
|
-
const focusOffset = focus.offset;
|
|
248
|
-
res += `\n ├ anchor { key: ${anchor.key}, offset: ${anchorOffset === null ? 'null' : anchorOffset}, type: ${anchor.type} }`;
|
|
249
|
-
res += `\n └ focus { key: ${focus.key}, offset: ${focusOffset === null ? 'null' : focusOffset}, type: ${focus.type} }`;
|
|
250
|
-
return res;
|
|
251
|
-
}
|
|
252
|
-
function printNodeSelection(selection) {
|
|
253
|
-
if (!$isNodeSelection(selection)) {
|
|
254
|
-
return '';
|
|
255
|
-
}
|
|
256
|
-
return `: node\n └ [${Array.from(selection._nodes).join(', ')}]`;
|
|
257
|
-
}
|
|
258
|
-
function printTableSelection(selection) {
|
|
259
|
-
return `: table\n └ { table: ${selection.tableKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
|
|
260
|
-
}
|
|
261
|
-
function generateContent(editor, commandsLog, exportDOM) {
|
|
262
|
-
const editorState = editor.getEditorState();
|
|
263
|
-
const editorConfig = editor._config;
|
|
264
|
-
const compositionKey = editor._compositionKey;
|
|
265
|
-
const editable = editor._editable;
|
|
266
|
-
if (exportDOM) {
|
|
267
|
-
let htmlString = '';
|
|
268
|
-
editorState.read(() => {
|
|
269
|
-
htmlString = printPrettyHTML($generateHtmlFromNodes(editor));
|
|
270
|
-
});
|
|
271
|
-
return htmlString;
|
|
272
|
-
}
|
|
273
|
-
let res = ' root\n';
|
|
274
|
-
const selectionString = editorState.read(() => {
|
|
275
|
-
const selection = $getSelection();
|
|
276
|
-
visitTree($getRoot(), (node, indent) => {
|
|
277
|
-
const nodeKey = node.getKey();
|
|
278
|
-
const nodeKeyDisplay = `(${nodeKey})`;
|
|
279
|
-
const typeDisplay = node.getType() || '';
|
|
280
|
-
const isSelected = node.isSelected();
|
|
281
|
-
const idsDisplay = $isMarkNode(node) ? ` id: [ ${node.getIDs().join(', ')} ] ` : '';
|
|
282
|
-
res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(' ')} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(node)}\n`;
|
|
283
|
-
res += printSelectedCharsLine({
|
|
284
|
-
indent,
|
|
285
|
-
isSelected,
|
|
286
|
-
node,
|
|
287
|
-
nodeKeyDisplay,
|
|
288
|
-
selection,
|
|
289
|
-
typeDisplay
|
|
290
|
-
});
|
|
291
|
-
});
|
|
292
|
-
return selection === null ? ': null' : $isRangeSelection(selection) ? printRangeSelection(selection) : $isTableSelection(selection) ? printTableSelection(selection) : printNodeSelection(selection);
|
|
293
|
-
});
|
|
294
|
-
res += '\n selection' + selectionString;
|
|
295
|
-
res += '\n\n commands:';
|
|
296
|
-
if (commandsLog.length) {
|
|
297
|
-
for (const {
|
|
298
|
-
type,
|
|
299
|
-
payload
|
|
300
|
-
} of commandsLog) {
|
|
301
|
-
res += `\n └ { type: ${type}, payload: ${payload instanceof Event ? payload.constructor.name : payload} }`;
|
|
302
|
-
}
|
|
303
|
-
} else {
|
|
304
|
-
res += '\n └ None dispatched.';
|
|
305
|
-
}
|
|
306
|
-
res += '\n\n editor:';
|
|
307
|
-
res += `\n └ namespace ${editorConfig.namespace}`;
|
|
308
|
-
if (compositionKey !== null) {
|
|
309
|
-
res += `\n └ compositionKey ${compositionKey}`;
|
|
310
|
-
}
|
|
311
|
-
res += `\n └ editable ${String(editable)}`;
|
|
312
|
-
return res;
|
|
313
|
-
}
|
|
314
|
-
function visitTree(currentNode, visitor, indent = []) {
|
|
315
|
-
const childNodes = currentNode.getChildren();
|
|
316
|
-
const childNodesLength = childNodes.length;
|
|
317
|
-
childNodes.forEach((childNode, i) => {
|
|
318
|
-
visitor(childNode, indent.concat(i === childNodesLength - 1 ? SYMBOLS.isLastChild : SYMBOLS.hasNextSibling));
|
|
319
|
-
if ($isElementNode(childNode)) {
|
|
320
|
-
visitTree(childNode, visitor, indent.concat(i === childNodesLength - 1 ? SYMBOLS.ancestorIsLastChild : SYMBOLS.ancestorHasNextSibling));
|
|
321
|
-
}
|
|
322
72
|
});
|
|
323
73
|
}
|
|
324
|
-
function normalize(text) {
|
|
325
|
-
return Object.entries(NON_SINGLE_WIDTH_CHARS_REPLACEMENT).reduce((acc, [key, value]) => acc.replace(new RegExp(key, 'g'), String(value)), text);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
// TODO Pass via props to allow customizability
|
|
329
|
-
function printNode(node) {
|
|
330
|
-
if ($isTextNode(node)) {
|
|
331
|
-
const text = node.getTextContent();
|
|
332
|
-
const title = text.length === 0 ? '(empty)' : `"${normalize(text)}"`;
|
|
333
|
-
const properties = printAllTextNodeProperties(node);
|
|
334
|
-
return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
|
|
335
|
-
} else if ($isLinkNode(node)) {
|
|
336
|
-
const link = node.getURL();
|
|
337
|
-
const title = link.length === 0 ? '(empty)' : `"${normalize(link)}"`;
|
|
338
|
-
const properties = printAllLinkNodeProperties(node);
|
|
339
|
-
return [title, properties.length !== 0 ? `{ ${properties} }` : null].filter(Boolean).join(' ').trim();
|
|
340
|
-
} else {
|
|
341
|
-
return '';
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
const FORMAT_PREDICATES = [node => node.hasFormat('bold') && 'Bold', node => node.hasFormat('code') && 'Code', node => node.hasFormat('italic') && 'Italic', node => node.hasFormat('strikethrough') && 'Strikethrough', node => node.hasFormat('subscript') && 'Subscript', node => node.hasFormat('superscript') && 'Superscript', node => node.hasFormat('underline') && 'Underline'];
|
|
345
|
-
const DETAIL_PREDICATES = [node => node.isDirectionless() && 'Directionless', node => node.isUnmergeable() && 'Unmergeable'];
|
|
346
|
-
const MODE_PREDICATES = [node => node.isToken() && 'Token', node => node.isSegmented() && 'Segmented'];
|
|
347
|
-
function printAllTextNodeProperties(node) {
|
|
348
|
-
return [printFormatProperties(node), printDetailProperties(node), printModeProperties(node)].filter(Boolean).join(', ');
|
|
349
|
-
}
|
|
350
|
-
function printAllLinkNodeProperties(node) {
|
|
351
|
-
return [printTargetProperties(node), printRelProperties(node), printTitleProperties(node)].filter(Boolean).join(', ');
|
|
352
|
-
}
|
|
353
|
-
function printDetailProperties(nodeOrSelection) {
|
|
354
|
-
let str = DETAIL_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
|
|
355
|
-
if (str !== '') {
|
|
356
|
-
str = 'detail: ' + str;
|
|
357
|
-
}
|
|
358
|
-
return str;
|
|
359
|
-
}
|
|
360
|
-
function printModeProperties(nodeOrSelection) {
|
|
361
|
-
let str = MODE_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
|
|
362
|
-
if (str !== '') {
|
|
363
|
-
str = 'mode: ' + str;
|
|
364
|
-
}
|
|
365
|
-
return str;
|
|
366
|
-
}
|
|
367
|
-
function printFormatProperties(nodeOrSelection) {
|
|
368
|
-
let str = FORMAT_PREDICATES.map(predicate => predicate(nodeOrSelection)).filter(Boolean).join(', ').toLocaleLowerCase();
|
|
369
|
-
if (str !== '') {
|
|
370
|
-
str = 'format: ' + str;
|
|
371
|
-
}
|
|
372
|
-
return str;
|
|
373
|
-
}
|
|
374
|
-
function printTargetProperties(node) {
|
|
375
|
-
let str = node.getTarget();
|
|
376
|
-
// TODO Fix nullish on LinkNode
|
|
377
|
-
if (str != null) {
|
|
378
|
-
str = 'target: ' + str;
|
|
379
|
-
}
|
|
380
|
-
return str;
|
|
381
|
-
}
|
|
382
|
-
function printRelProperties(node) {
|
|
383
|
-
let str = node.getRel();
|
|
384
|
-
// TODO Fix nullish on LinkNode
|
|
385
|
-
if (str != null) {
|
|
386
|
-
str = 'rel: ' + str;
|
|
387
|
-
}
|
|
388
|
-
return str;
|
|
389
|
-
}
|
|
390
|
-
function printTitleProperties(node) {
|
|
391
|
-
let str = node.getTitle();
|
|
392
|
-
// TODO Fix nullish on LinkNode
|
|
393
|
-
if (str != null) {
|
|
394
|
-
str = 'title: ' + str;
|
|
395
|
-
}
|
|
396
|
-
return str;
|
|
397
|
-
}
|
|
398
|
-
function printSelectedCharsLine({
|
|
399
|
-
indent,
|
|
400
|
-
isSelected,
|
|
401
|
-
node,
|
|
402
|
-
nodeKeyDisplay,
|
|
403
|
-
selection,
|
|
404
|
-
typeDisplay
|
|
405
|
-
}) {
|
|
406
|
-
// No selection or node is not selected.
|
|
407
|
-
if (!$isTextNode(node) || !$isRangeSelection(selection) || !isSelected || $isElementNode(node)) {
|
|
408
|
-
return '';
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
// No selected characters.
|
|
412
|
-
const anchor = selection.anchor;
|
|
413
|
-
const focus = selection.focus;
|
|
414
|
-
if (node.getTextContent() === '' || anchor.getNode() === selection.focus.getNode() && anchor.offset === focus.offset) {
|
|
415
|
-
return '';
|
|
416
|
-
}
|
|
417
|
-
const [start, end] = $getSelectionStartEnd(node, selection);
|
|
418
|
-
if (start === end) {
|
|
419
|
-
return '';
|
|
420
|
-
}
|
|
421
|
-
const selectionLastIndent = indent[indent.length - 1] === SYMBOLS.hasNextSibling ? SYMBOLS.ancestorHasNextSibling : SYMBOLS.ancestorIsLastChild;
|
|
422
|
-
const indentionChars = [...indent.slice(0, indent.length - 1), selectionLastIndent];
|
|
423
|
-
const unselectedChars = Array(start + 1).fill(' ');
|
|
424
|
-
const selectedChars = Array(end - start).fill(SYMBOLS.selectedChar);
|
|
425
|
-
const paddingLength = typeDisplay.length + 3; // 2 for the spaces around + 1 for the double quote.
|
|
426
|
-
|
|
427
|
-
const nodePrintSpaces = Array(nodeKeyDisplay.length + paddingLength).fill(' ');
|
|
428
|
-
return [SYMBOLS.selectedLine, indentionChars.join(' '), [...nodePrintSpaces, ...unselectedChars, ...selectedChars].join('')].join(' ') + '\n';
|
|
429
|
-
}
|
|
430
|
-
function printPrettyHTML(str) {
|
|
431
|
-
const div = document.createElement('div');
|
|
432
|
-
div.innerHTML = str.trim();
|
|
433
|
-
return prettifyHTML(div, 0).innerHTML;
|
|
434
|
-
}
|
|
435
|
-
function prettifyHTML(node, level) {
|
|
436
|
-
const indentBefore = new Array(level++ + 1).join(' ');
|
|
437
|
-
const indentAfter = new Array(level - 1).join(' ');
|
|
438
|
-
let textNode;
|
|
439
|
-
for (let i = 0; i < node.children.length; i++) {
|
|
440
|
-
textNode = document.createTextNode('\n' + indentBefore);
|
|
441
|
-
node.insertBefore(textNode, node.children[i]);
|
|
442
|
-
prettifyHTML(node.children[i], level);
|
|
443
|
-
if (node.lastElementChild === node.children[i]) {
|
|
444
|
-
textNode = document.createTextNode('\n' + indentAfter);
|
|
445
|
-
node.appendChild(textNode);
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
return node;
|
|
449
|
-
}
|
|
450
|
-
function $getSelectionStartEnd(node, selection) {
|
|
451
|
-
const anchorAndFocus = selection.getStartEndPoints();
|
|
452
|
-
if ($isNodeSelection(selection) || anchorAndFocus === null) {
|
|
453
|
-
return [-1, -1];
|
|
454
|
-
}
|
|
455
|
-
const [anchor, focus] = anchorAndFocus;
|
|
456
|
-
const textContent = node.getTextContent();
|
|
457
|
-
const textLength = textContent.length;
|
|
458
|
-
let start = -1;
|
|
459
|
-
let end = -1;
|
|
460
|
-
|
|
461
|
-
// Only one node is being selected.
|
|
462
|
-
if (anchor.type === 'text' && focus.type === 'text') {
|
|
463
|
-
const anchorNode = anchor.getNode();
|
|
464
|
-
const focusNode = focus.getNode();
|
|
465
|
-
if (anchorNode === focusNode && node === anchorNode && anchor.offset !== focus.offset) {
|
|
466
|
-
[start, end] = anchor.offset < focus.offset ? [anchor.offset, focus.offset] : [focus.offset, anchor.offset];
|
|
467
|
-
} else if (node === anchorNode) {
|
|
468
|
-
[start, end] = anchorNode.isBefore(focusNode) ? [anchor.offset, textLength] : [0, anchor.offset];
|
|
469
|
-
} else if (node === focusNode) {
|
|
470
|
-
[start, end] = focusNode.isBefore(anchorNode) ? [focus.offset, textLength] : [0, focus.offset];
|
|
471
|
-
} else {
|
|
472
|
-
// Node is within selection but not the anchor nor focus.
|
|
473
|
-
[start, end] = [0, textLength];
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
// Account for non-single width characters.
|
|
478
|
-
const numNonSingleWidthCharBeforeSelection = (textContent.slice(0, start).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
|
|
479
|
-
const numNonSingleWidthCharInSelection = (textContent.slice(start, end).match(NON_SINGLE_WIDTH_CHARS_REGEX) || []).length;
|
|
480
|
-
return [start + numNonSingleWidthCharBeforeSelection, end + numNonSingleWidthCharBeforeSelection + numNonSingleWidthCharInSelection];
|
|
481
|
-
}
|
|
482
74
|
|
|
483
75
|
export { TreeView };
|
package/LexicalTreeView.prod.js
CHANGED
|
@@ -4,20 +4,6 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
'use strict';var
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
function W(a,b,c){let m=a.getEditorState(),d=a._config,p=a._compositionKey,e=a._editable;if(c){let l="";m.read(()=>{var k=g.$generateHtmlFromNodes(a);let t=document.createElement("div");t.innerHTML=k.trim();l=X(t,0).innerHTML});return l}let h=" root\n";c=m.read(()=>{const l=N.$getSelection();Y(N.$getRoot(),(k,t)=>{const y=`(${k.getKey()})`,w=k.getType()||"",q=k.isSelected(),J=x.$isMarkNode(k)?` id: [ ${k.getIDs().join(", ")} ] `:"";var A=h,H=q?R.selectedLine:" ",F=t.join(" ");if(N.$isTextNode(k)){var n=
|
|
11
|
-
k.getTextContent();var u=0===n.length?"(empty)":`"${Z(n)}"`;n=[V(k),ca(k),da(k)].filter(Boolean).join(", ");n=[u,0!==n.length?`{ ${n} }`:null].filter(Boolean).join(" ").trim()}else if(v.$isLinkNode(k)){n=k.getURL();n=0===n.length?"(empty)":`"${Z(n)}"`;u=k.getTarget();null!=u&&(u="target: "+u);var B=Boolean;var C=k.getRel();null!=C&&(C="rel: "+C);let r=k.getTitle();null!=r&&(r="title: "+r);u=[u,C,r].filter(B).join(", ");n=[n,0!==u.length?`{ ${u} }`:null].filter(Boolean).join(" ").trim()}else n="";
|
|
12
|
-
h=A+`${H} ${F} ${y} ${w} ${J} ${n}\n`;h+=ea({indent:t,isSelected:q,node:k,nodeKeyDisplay:y,selection:l,typeDisplay:w})});return null===l?": null":N.$isRangeSelection(l)?aa(l):I.$isTableSelection(l)?`: table\n \u2514 { table: ${l.tableKey}, anchorCell: ${l.anchor.key}, focusCell: ${l.focus.key} }`:ba(l)});h+="\n selection"+c;h+="\n\n commands:";if(b.length)for(let {type:l,payload:k}of b)h+=`\n \u2514 { type: ${l}, payload: ${k instanceof Event?k.constructor.name:k} }`;else h+="\n \u2514 None dispatched.";
|
|
13
|
-
h+="\n\n editor:";h+=`\n \u2514 namespace ${d.namespace}`;null!==p&&(h+=`\n \u2514 compositionKey ${p}`);return h+=`\n \u2514 editable ${String(e)}`}function Y(a,b,c=[]){a=a.getChildren();let m=a.length;a.forEach((d,p)=>{b(d,c.concat(p===m-1?R.isLastChild:R.hasNextSibling));N.$isElementNode(d)&&Y(d,b,c.concat(p===m-1?R.ancestorIsLastChild:R.ancestorHasNextSibling))})}function Z(a){return Object.entries(P).reduce((b,[c,m])=>b.replace(new RegExp(c,"g"),String(m)),a)}
|
|
14
|
-
let fa=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],ha=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],ia=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
|
|
15
|
-
function ca(a){let b=ha.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function da(a){let b=ia.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function V(a){let b=fa.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
|
|
16
|
-
function ea({indent:a,isSelected:b,node:c,nodeKeyDisplay:m,selection:d,typeDisplay:p}){if(!N.$isTextNode(c)||!N.$isRangeSelection(d)||!b||N.$isElementNode(c))return"";b=d.anchor;var e=d.focus;if(""===c.getTextContent()||b.getNode()===d.focus.getNode()&&b.offset===e.offset)return"";b=d.getStartEndPoints();if(N.$isNodeSelection(d)||null===b)c=[-1,-1];else{var [h,l]=b;e=c.getTextContent();var k=e.length;b=d=-1;if("text"===h.type&&"text"===l.type){let w=h.getNode(),q=l.getNode();w===q&&c===w&&h.offset!==
|
|
17
|
-
l.offset?[d,b]=h.offset<l.offset?[h.offset,l.offset]:[l.offset,h.offset]:c===w?[d,b]=w.isBefore(q)?[h.offset,k]:[0,h.offset]:c===q?[d,b]=q.isBefore(w)?[l.offset,k]:[0,l.offset]:[d,b]=[0,k]}c=(e.slice(0,d).match(Q)||[]).length;e=(e.slice(d,b).match(Q)||[]).length;c=[d+c,b+c+e]}let [t,y]=c;if(t===y)return"";c=a[a.length-1]===R.hasNextSibling?R.ancestorHasNextSibling:R.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(t+1).fill(" ");d=Array(y-t).fill(R.selectedChar);m=Array(m.length+(p.length+
|
|
18
|
-
3)).fill(" ");return[R.selectedLine,a.join(" "),[...m,...c,...d].join("")].join(" ")+"\n"}function X(a,b){let c=Array(b++ +1).join(" "),m=Array(b-1).join(" "),d;for(let p=0;p<a.children.length;p++)d=document.createTextNode("\n"+c),a.insertBefore(d,a.children[p]),X(a.children[p],b),a.lastElementChild===a.children[p]&&(d=document.createTextNode("\n"+m),a.appendChild(d));return a}
|
|
19
|
-
exports.TreeView=function({treeTypeButtonClassName:a,timeTravelButtonClassName:b,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:m,viewClassName:d,timeTravelPanelClassName:p,editor:e}){let [h,l]=O.useState([]),[k,t]=O.useState(""),[y,w]=O.useState(!1),[q,J]=O.useState(!1),A=O.useRef(0),H=O.useRef(null),F=O.useRef(null),[n,u]=O.useState(!1),[B,C]=O.useState(!1),[r,ja]=O.useState(!1),K=O.useRef(null),D=U(e),L=O.useCallback(f=>{const z=W(e,D,q);t(z);y||l(G=>[...G,[Date.now(),f]])},[D,
|
|
20
|
-
e,y,q]);O.useEffect(()=>{let f=e.getEditorState();!r&&1E3>f._nodeMap.size&&t(W(e,D,q))},[D,e,r,q]);O.useEffect(()=>M.mergeRegister(e.registerUpdateListener(({editorState:f})=>{if(!r&&1E3<f._nodeMap.size&&(K.current=f,C(!0),!r))return;L(f)}),e.registerEditableListener(()=>{let f=W(e,D,q);t(f)})),[D,e,q,B,L,r]);let E=h.length;O.useEffect(()=>{if(n){let f,z=()=>{const G=A.current;G===E-1?u(!1):f=setTimeout(()=>{A.current++;const S=A.current,T=F.current;null!==T&&(T.value=String(S));e.setEditorState(h[S][1]);
|
|
21
|
-
z()},h[G+1][0]-h[G][0])};z();return()=>{clearTimeout(f)}}},[h,n,e,E]);O.useEffect(()=>{let f=H.current;if(null!==f)return f.__lexicalEditor=e,()=>{f.__lexicalEditor=null}},[e]);return O.createElement("div",{className:d},!r&&B?O.createElement("div",{style:{padding:20}},O.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),O.createElement("button",{onClick:()=>{ja(!0);let f=K.current;null!==f&&(K.current=null,L(f))},style:{background:"transparent",
|
|
22
|
-
border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,r?null:O.createElement("button",{onClick:()=>J(!q),className:a,type:"button"},q?"Tree":"Export DOM"),!y&&(r||!B)&&2<E&&O.createElement("button",{onClick:()=>{let f=e.getRootElement();null!==f&&(f.contentEditable="false",A.current=E-1,w(!0))},className:b,type:"button"},"Time Travel"),(r||!B)&&O.createElement("pre",{ref:H},k),y&&(r||!B)&&O.createElement("div",{className:p},O.createElement("button",{className:m,
|
|
23
|
-
onClick:()=>{A.current===E-1&&(A.current=1);u(!n)},type:"button"},n?"Pause":"Play"),O.createElement("input",{className:c,ref:F,onChange:f=>{f=Number(f.target.value);let z=h[f];z&&(A.current=f,e.setEditorState(z[1]))},type:"range",min:"1",max:E-1}),O.createElement("button",{className:m,onClick:()=>{var f=e.getRootElement();if(null!==f){f.contentEditable="true";f=h.length-1;e.setEditorState(h[f][1]);let z=F.current;null!==z&&(z.value=String(f));w(!1);u(!1)}},type:"button"},"Exit")))}
|
|
7
|
+
'use strict';var c=require("@lexical/devtools-core"),d=require("@lexical/utils"),h=require("react");
|
|
8
|
+
exports.TreeView=function({treeTypeButtonClassName:k,timeTravelButtonClassName:l,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:n,viewClassName:p,timeTravelPanelClassName:q,editor:a}){let e=h.createRef(),[r,f]=h.useState(a.getEditorState()),t=c.useLexicalCommandsLog(a);h.useEffect(()=>d.mergeRegister(a.registerUpdateListener(({editorState:b})=>{f(b)}),a.registerEditableListener(()=>{f(a.getEditorState())})),[a]);h.useEffect(()=>{let b=e.current;if(null!==b)return b.__lexicalEditor=
|
|
9
|
+
a,()=>{b.__lexicalEditor=null}},[a,e]);return h.createElement(c.TreeView,{treeTypeButtonClassName:k,timeTravelButtonClassName:l,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:n,viewClassName:p,timeTravelPanelClassName:q,setEditorReadOnly:b=>{const g=a.getRootElement();null!=g&&(g.contentEditable=b?"false":"true")},editorState:r,setEditorState:b=>a.setEditorState(b),generateContent:async function(b){return c.generateContent(a,t,b)},ref:e})}
|
package/LexicalTreeView.prod.mjs
CHANGED
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import{
|
|
7
|
+
import{useLexicalCommandsLog as e,TreeView as t,generateContent as a}from"@lexical/devtools-core";import{mergeRegister as r}from"@lexical/utils";import*as l from"react";import{useState as i,useEffect as s}from"react";function n({treeTypeButtonClassName:n,timeTravelButtonClassName:o,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:u,editor:C}){const N=l.createRef(),[v,E]=i(C.getEditorState()),T=e(C);s((()=>r(C.registerUpdateListener((({editorState:e})=>{E(e)})),C.registerEditableListener((()=>{E(C.getEditorState())})))),[C]),s((()=>{const e=N.current;if(null!==e)return e.__lexicalEditor=C,()=>{e.__lexicalEditor=null}}),[C,N]);return l.createElement(t,{treeTypeButtonClassName:n,timeTravelButtonClassName:o,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:u,setEditorReadOnly:e=>{const t=C.getRootElement();null!=t&&(t.contentEditable=e?"false":"true")},editorState:v,setEditorState:e=>C.setEditorState(e),generateContent:async function(e){return a(C,T,e)},ref:N})}export{n as TreeView};
|
|
@@ -323,7 +323,7 @@ function useMenuAnchorRef(resolution, setResolution, className, parent = documen
|
|
|
323
323
|
height
|
|
324
324
|
} = resolution.getRect();
|
|
325
325
|
const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
|
|
326
|
-
containerDiv.style.top = `${top + anchorHeight + 3}px`;
|
|
326
|
+
containerDiv.style.top = `${top + window.pageYOffset + anchorHeight + 3}px`;
|
|
327
327
|
containerDiv.style.left = `${left + window.pageXOffset}px`;
|
|
328
328
|
containerDiv.style.height = `${height}px`;
|
|
329
329
|
containerDiv.style.width = `${width}px`;
|
|
@@ -322,7 +322,7 @@ function useMenuAnchorRef(resolution, setResolution, className, parent = documen
|
|
|
322
322
|
height
|
|
323
323
|
} = resolution.getRect();
|
|
324
324
|
const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
|
|
325
|
-
containerDiv.style.top = `${top + anchorHeight + 3}px`;
|
|
325
|
+
containerDiv.style.top = `${top + window.pageYOffset + anchorHeight + 3}px`;
|
|
326
326
|
containerDiv.style.left = `${left + window.pageXOffset}px`;
|
|
327
327
|
containerDiv.style.height = `${height}px`;
|
|
328
328
|
containerDiv.style.width = `${width}px`;
|
|
@@ -14,7 +14,7 @@ function L({close:b,editor:a,anchorElementRef:c,resolution:d,options:f,menuRende
|
|
|
14
14
|
"typeahead-item-"+g),h(g))},[a]);y.useEffect(()=>()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);B(()=>{null===f?h(null):null===e&&t(0)},[f,e,t]);y.useEffect(()=>A.mergeRegister(a.registerCommand(K,({option:g})=>g.ref&&null!=g.ref.current?(D(g.ref.current),!0):!1,p)),[a,t,p]);y.useEffect(()=>A.mergeRegister(a.registerCommand(q.KEY_ARROW_DOWN_COMMAND,g=>{if(null!==f&&f.length&&null!==e){let m=e!==f.length-1?e+1:0;t(m);let w=f[m];null!=w.ref&&w.ref.current&&
|
|
15
15
|
a.dispatchCommand(K,{index:m,option:w});g.preventDefault();g.stopImmediatePropagation()}return!0},p),a.registerCommand(q.KEY_ARROW_UP_COMMAND,g=>{if(null!==f&&f.length&&null!==e){var m=0!==e?e-1:f.length-1;t(m);m=f[m];null!=m.ref&&m.ref.current&&D(m.ref.current);g.preventDefault();g.stopImmediatePropagation()}return!0},p),a.registerCommand(q.KEY_ESCAPE_COMMAND,g=>{g.preventDefault();g.stopImmediatePropagation();b();return!0},p),a.registerCommand(q.KEY_TAB_COMMAND,g=>{if(null===f||null===e||null==
|
|
16
16
|
f[e])return!1;g.preventDefault();g.stopImmediatePropagation();k(f[e]);return!0},p),a.registerCommand(q.KEY_ENTER_COMMAND,g=>{if(null===f||null===e||null==f[e])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());k(f[e]);return!0},p)),[k,b,a,f,e,t,p]);let u=y.useMemo(()=>({options:f,selectOptionAndCleanUp:k,selectedIndex:e,setHighlightedIndex:h}),[k,e,f]);return n(c,u,d.match?d.match.matchingString:"")}
|
|
17
|
-
function M(b,a,c,d=document.body){let [f]=l.useLexicalComposerContext(),n=y.useRef(document.createElement("div")),r=y.useCallback(()=>{n.current.style.top=n.current.style.bottom;const p=f.getRootElement(),e=n.current;var h=e.firstChild;if(null!==p&&null!==b){const {left:t,top:u,width:g,height:m}=b.getRect();e.style.top=`${u+n.current.offsetHeight+3}px`;e.style.left=`${t+window.pageXOffset}px`;e.style.height=`${m}px`;e.style.width=`${g}px`;if(null!==h){h.style.top=`${u}`;var k=h.getBoundingClientRect();
|
|
17
|
+
function M(b,a,c,d=document.body){let [f]=l.useLexicalComposerContext(),n=y.useRef(document.createElement("div")),r=y.useCallback(()=>{n.current.style.top=n.current.style.bottom;const p=f.getRootElement(),e=n.current;var h=e.firstChild;if(null!==p&&null!==b){const {left:t,top:u,width:g,height:m}=b.getRect();e.style.top=`${u+window.pageYOffset+n.current.offsetHeight+3}px`;e.style.left=`${t+window.pageXOffset}px`;e.style.height=`${m}px`;e.style.width=`${g}px`;if(null!==h){h.style.top=`${u}`;var k=h.getBoundingClientRect();
|
|
18
18
|
h=k.height;k=k.width;const w=p.getBoundingClientRect();t+k>w.right&&(e.style.left=`${w.right-k+window.pageXOffset}px`);(u+h>window.innerHeight||u+h>w.bottom)&&u-w.top>h&&(e.style.top=`${u-h+window.pageYOffset-m}px`)}e.isConnected||(null!=c&&(e.className=c),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("id","typeahead-menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute",d.append(e));n.current=e;p.setAttribute("aria-controls","typeahead-menu")}},
|
|
19
19
|
[f,b,c,d]);y.useEffect(()=>{let p=f.getRootElement();if(null!==b)return r(),()=>{null!==p&&p.removeAttribute("aria-controls");let e=n.current;null!==e&&e.isConnected&&e.remove()}},[f,r,b]);let v=y.useCallback(p=>{null!==b&&(p||a(null))},[b,a]);J(b,n.current,r,v);return n}function N(b,a,c){var d=c.getSelection();if(null===d||!d.isCollapsed)return!1;c=d.anchorNode;d=d.anchorOffset;if(null==c||null==d)return!1;try{a.setStart(c,b),a.setEnd(c,d)}catch(f){return!1}return!0}
|
|
20
20
|
function O(b){let a=null;b.getEditorState().read(()=>{var c=q.$getSelection();if(q.$isRangeSelection(c)){var d=c.anchor;"text"!==d.type?a=null:(c=d.getNode(),c.isSimpleText()?(d=d.offset,a=c.getTextContent().slice(0,d)):a=null)}});return a}function P(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=q.$getSelection();return q.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),q.$isTextNode(c)&&c.isTextEntity()):!1})}function Q(b){y.startTransition?y.startTransition(b):b()}
|