@lexical/rich-text 0.7.7 → 0.7.9
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/LexicalRichText.dev.js +25 -153
- package/package.json +5 -5
package/LexicalRichText.dev.js
CHANGED
|
@@ -18,26 +18,24 @@ var lexical = require('lexical');
|
|
|
18
18
|
* LICENSE file in the root directory of this source tree.
|
|
19
19
|
*
|
|
20
20
|
*/
|
|
21
|
+
|
|
21
22
|
function caretFromPoint(x, y) {
|
|
22
23
|
if (typeof document.caretRangeFromPoint !== 'undefined') {
|
|
23
24
|
const range = document.caretRangeFromPoint(x, y);
|
|
24
|
-
|
|
25
25
|
if (range === null) {
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
|
-
|
|
29
28
|
return {
|
|
30
29
|
node: range.startContainer,
|
|
31
30
|
offset: range.startOffset
|
|
32
|
-
};
|
|
31
|
+
};
|
|
32
|
+
// @ts-ignore
|
|
33
33
|
} else if (document.caretPositionFromPoint !== 'undefined') {
|
|
34
34
|
// @ts-ignore FF - no types
|
|
35
35
|
const range = document.caretPositionFromPoint(x, y);
|
|
36
|
-
|
|
37
36
|
if (range === null) {
|
|
38
37
|
return null;
|
|
39
38
|
}
|
|
40
|
-
|
|
41
39
|
return {
|
|
42
40
|
node: range.offsetNode,
|
|
43
41
|
offset: range.offset
|
|
@@ -55,6 +53,7 @@ function caretFromPoint(x, y) {
|
|
|
55
53
|
* LICENSE file in the root directory of this source tree.
|
|
56
54
|
*
|
|
57
55
|
*/
|
|
56
|
+
|
|
58
57
|
const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
|
|
59
58
|
|
|
60
59
|
/**
|
|
@@ -69,39 +68,37 @@ CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
|
|
|
69
68
|
CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
|
|
70
69
|
const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
|
|
71
70
|
const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
|
|
72
|
-
const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
73
|
-
// export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
|
|
71
|
+
const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
74
72
|
|
|
75
|
-
|
|
73
|
+
// Keep these in case we need to use them in the future.
|
|
74
|
+
// export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
|
|
75
|
+
CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
|
|
76
|
+
// export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
|
|
76
77
|
|
|
77
78
|
/** @module @lexical/rich-text */
|
|
78
79
|
const DRAG_DROP_PASTE = lexical.createCommand('DRAG_DROP_PASTE_FILE');
|
|
79
|
-
|
|
80
80
|
/** @noInheritDoc */
|
|
81
81
|
class QuoteNode extends lexical.ElementNode {
|
|
82
82
|
static getType() {
|
|
83
83
|
return 'quote';
|
|
84
84
|
}
|
|
85
|
-
|
|
86
85
|
static clone(node) {
|
|
87
86
|
return new QuoteNode(node.__key);
|
|
88
87
|
}
|
|
89
|
-
|
|
90
88
|
constructor(key) {
|
|
91
89
|
super(key);
|
|
92
|
-
}
|
|
90
|
+
}
|
|
93
91
|
|
|
92
|
+
// View
|
|
94
93
|
|
|
95
94
|
createDOM(config) {
|
|
96
95
|
const element = document.createElement('blockquote');
|
|
97
96
|
utils.addClassNamesToElement(element, config.theme.quote);
|
|
98
97
|
return element;
|
|
99
98
|
}
|
|
100
|
-
|
|
101
99
|
updateDOM(prevNode, dom) {
|
|
102
100
|
return false;
|
|
103
101
|
}
|
|
104
|
-
|
|
105
102
|
static importDOM() {
|
|
106
103
|
return {
|
|
107
104
|
blockquote: node => ({
|
|
@@ -110,7 +107,6 @@ class QuoteNode extends lexical.ElementNode {
|
|
|
110
107
|
})
|
|
111
108
|
};
|
|
112
109
|
}
|
|
113
|
-
|
|
114
110
|
static importJSON(serializedNode) {
|
|
115
111
|
const node = $createQuoteNode();
|
|
116
112
|
node.setFormat(serializedNode.format);
|
|
@@ -118,13 +114,14 @@ class QuoteNode extends lexical.ElementNode {
|
|
|
118
114
|
node.setDirection(serializedNode.direction);
|
|
119
115
|
return node;
|
|
120
116
|
}
|
|
121
|
-
|
|
122
117
|
exportJSON() {
|
|
123
|
-
return {
|
|
118
|
+
return {
|
|
119
|
+
...super.exportJSON(),
|
|
124
120
|
type: 'quote'
|
|
125
121
|
};
|
|
126
|
-
}
|
|
122
|
+
}
|
|
127
123
|
|
|
124
|
+
// Mutation
|
|
128
125
|
|
|
129
126
|
insertNewAfter(_, restoreSelection) {
|
|
130
127
|
const newBlock = lexical.$createParagraphNode();
|
|
@@ -133,7 +130,6 @@ class QuoteNode extends lexical.ElementNode {
|
|
|
133
130
|
this.insertAfter(newBlock, restoreSelection);
|
|
134
131
|
return newBlock;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
133
|
collapseAtStart() {
|
|
138
134
|
const paragraph = lexical.$createParagraphNode();
|
|
139
135
|
const children = this.getChildren();
|
|
@@ -141,7 +137,6 @@ class QuoteNode extends lexical.ElementNode {
|
|
|
141
137
|
this.replace(paragraph);
|
|
142
138
|
return true;
|
|
143
139
|
}
|
|
144
|
-
|
|
145
140
|
}
|
|
146
141
|
function $createQuoteNode() {
|
|
147
142
|
return lexical.$applyNodeReplacement(new QuoteNode());
|
|
@@ -149,46 +144,40 @@ function $createQuoteNode() {
|
|
|
149
144
|
function $isQuoteNode(node) {
|
|
150
145
|
return node instanceof QuoteNode;
|
|
151
146
|
}
|
|
152
|
-
|
|
153
147
|
/** @noInheritDoc */
|
|
154
148
|
class HeadingNode extends lexical.ElementNode {
|
|
155
149
|
/** @internal */
|
|
150
|
+
|
|
156
151
|
static getType() {
|
|
157
152
|
return 'heading';
|
|
158
153
|
}
|
|
159
|
-
|
|
160
154
|
static clone(node) {
|
|
161
155
|
return new HeadingNode(node.__tag, node.__key);
|
|
162
156
|
}
|
|
163
|
-
|
|
164
157
|
constructor(tag, key) {
|
|
165
158
|
super(key);
|
|
166
159
|
this.__tag = tag;
|
|
167
160
|
}
|
|
168
|
-
|
|
169
161
|
getTag() {
|
|
170
162
|
return this.__tag;
|
|
171
|
-
}
|
|
163
|
+
}
|
|
172
164
|
|
|
165
|
+
// View
|
|
173
166
|
|
|
174
167
|
createDOM(config) {
|
|
175
168
|
const tag = this.__tag;
|
|
176
169
|
const element = document.createElement(tag);
|
|
177
170
|
const theme = config.theme;
|
|
178
171
|
const classNames = theme.heading;
|
|
179
|
-
|
|
180
172
|
if (classNames !== undefined) {
|
|
181
173
|
const className = classNames[tag];
|
|
182
174
|
utils.addClassNamesToElement(element, className);
|
|
183
175
|
}
|
|
184
|
-
|
|
185
176
|
return element;
|
|
186
177
|
}
|
|
187
|
-
|
|
188
178
|
updateDOM(prevNode, dom) {
|
|
189
179
|
return false;
|
|
190
180
|
}
|
|
191
|
-
|
|
192
181
|
static importDOM() {
|
|
193
182
|
return {
|
|
194
183
|
h1: node => ({
|
|
@@ -219,7 +208,6 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
219
208
|
// domNode is a <p> since we matched it by nodeName
|
|
220
209
|
const paragraph = node;
|
|
221
210
|
const firstChild = paragraph.firstChild;
|
|
222
|
-
|
|
223
211
|
if (firstChild !== null && isGoogleDocsTitle(firstChild)) {
|
|
224
212
|
return {
|
|
225
213
|
conversion: () => ({
|
|
@@ -228,7 +216,6 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
228
216
|
priority: 3
|
|
229
217
|
};
|
|
230
218
|
}
|
|
231
|
-
|
|
232
219
|
return null;
|
|
233
220
|
},
|
|
234
221
|
span: node => {
|
|
@@ -242,12 +229,10 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
242
229
|
priority: 3
|
|
243
230
|
};
|
|
244
231
|
}
|
|
245
|
-
|
|
246
232
|
return null;
|
|
247
233
|
}
|
|
248
234
|
};
|
|
249
235
|
}
|
|
250
|
-
|
|
251
236
|
static importJSON(serializedNode) {
|
|
252
237
|
const node = $createHeadingNode(serializedNode.tag);
|
|
253
238
|
node.setFormat(serializedNode.format);
|
|
@@ -255,16 +240,16 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
255
240
|
node.setDirection(serializedNode.direction);
|
|
256
241
|
return node;
|
|
257
242
|
}
|
|
258
|
-
|
|
259
243
|
exportJSON() {
|
|
260
|
-
return {
|
|
244
|
+
return {
|
|
245
|
+
...super.exportJSON(),
|
|
261
246
|
tag: this.getTag(),
|
|
262
247
|
type: 'heading',
|
|
263
248
|
version: 1
|
|
264
249
|
};
|
|
265
|
-
}
|
|
266
|
-
|
|
250
|
+
}
|
|
267
251
|
|
|
252
|
+
// Mutation
|
|
268
253
|
insertNewAfter(selection, restoreSelection = true) {
|
|
269
254
|
const anchorOffet = selection ? selection.anchor.offset : 0;
|
|
270
255
|
const newElement = anchorOffet > 0 && anchorOffet < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : lexical.$createParagraphNode();
|
|
@@ -273,7 +258,6 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
273
258
|
this.insertAfter(newElement, restoreSelection);
|
|
274
259
|
return newElement;
|
|
275
260
|
}
|
|
276
|
-
|
|
277
261
|
collapseAtStart() {
|
|
278
262
|
const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : lexical.$createParagraphNode();
|
|
279
263
|
const children = this.getChildren();
|
|
@@ -281,54 +265,43 @@ class HeadingNode extends lexical.ElementNode {
|
|
|
281
265
|
this.replace(newElement);
|
|
282
266
|
return true;
|
|
283
267
|
}
|
|
284
|
-
|
|
285
268
|
extractWithChild() {
|
|
286
269
|
return true;
|
|
287
270
|
}
|
|
288
|
-
|
|
289
271
|
}
|
|
290
|
-
|
|
291
272
|
function isGoogleDocsTitle(domNode) {
|
|
292
273
|
if (domNode.nodeName.toLowerCase() === 'span') {
|
|
293
274
|
return domNode.style.fontSize === '26pt';
|
|
294
275
|
}
|
|
295
|
-
|
|
296
276
|
return false;
|
|
297
277
|
}
|
|
298
|
-
|
|
299
278
|
function convertHeadingElement(domNode) {
|
|
300
279
|
const nodeName = domNode.nodeName.toLowerCase();
|
|
301
280
|
let node = null;
|
|
302
|
-
|
|
303
281
|
if (nodeName === 'h1' || nodeName === 'h2' || nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5' || nodeName === 'h6') {
|
|
304
282
|
node = $createHeadingNode(nodeName);
|
|
305
283
|
}
|
|
306
|
-
|
|
307
284
|
return {
|
|
308
285
|
node
|
|
309
286
|
};
|
|
310
287
|
}
|
|
311
|
-
|
|
312
288
|
function convertBlockquoteElement() {
|
|
313
289
|
const node = $createQuoteNode();
|
|
314
290
|
return {
|
|
315
291
|
node
|
|
316
292
|
};
|
|
317
293
|
}
|
|
318
|
-
|
|
319
294
|
function $createHeadingNode(headingTag) {
|
|
320
295
|
return lexical.$applyNodeReplacement(new HeadingNode(headingTag));
|
|
321
296
|
}
|
|
322
297
|
function $isHeadingNode(node) {
|
|
323
298
|
return node instanceof HeadingNode;
|
|
324
299
|
}
|
|
325
|
-
|
|
326
300
|
function onPasteForRichText(event, editor) {
|
|
327
301
|
event.preventDefault();
|
|
328
302
|
editor.update(() => {
|
|
329
303
|
const selection = lexical.$getSelection();
|
|
330
304
|
const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
|
|
331
|
-
|
|
332
305
|
if (clipboardData != null && (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
|
|
333
306
|
clipboard.$insertDataTransferForRichText(clipboardData, selection, editor);
|
|
334
307
|
}
|
|
@@ -336,63 +309,51 @@ function onPasteForRichText(event, editor) {
|
|
|
336
309
|
tag: 'paste'
|
|
337
310
|
});
|
|
338
311
|
}
|
|
339
|
-
|
|
340
312
|
async function onCutForRichText(event, editor) {
|
|
341
313
|
await clipboard.copyToClipboard__EXPERIMENTAL(editor, event instanceof ClipboardEvent ? event : null);
|
|
342
314
|
editor.update(() => {
|
|
343
315
|
const selection = lexical.$getSelection();
|
|
344
|
-
|
|
345
316
|
if (lexical.$isRangeSelection(selection)) {
|
|
346
317
|
selection.removeText();
|
|
347
318
|
} else if (lexical.$isNodeSelection(selection)) {
|
|
348
319
|
selection.getNodes().forEach(node => node.remove());
|
|
349
320
|
}
|
|
350
321
|
});
|
|
351
|
-
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// Clipboard may contain files that we aren't allowed to read. While the event is arguably useless,
|
|
352
325
|
// in certain ocassions, we want to know whether it was a file transfer, as opposed to text. We
|
|
353
326
|
// control this with the first boolean flag.
|
|
354
|
-
|
|
355
|
-
|
|
356
327
|
function eventFiles(event) {
|
|
357
328
|
let dataTransfer = null;
|
|
358
|
-
|
|
359
329
|
if (event instanceof DragEvent) {
|
|
360
330
|
dataTransfer = event.dataTransfer;
|
|
361
331
|
} else if (event instanceof ClipboardEvent) {
|
|
362
332
|
dataTransfer = event.clipboardData;
|
|
363
333
|
}
|
|
364
|
-
|
|
365
334
|
if (dataTransfer === null) {
|
|
366
335
|
return [false, [], false];
|
|
367
336
|
}
|
|
368
|
-
|
|
369
337
|
const types = dataTransfer.types;
|
|
370
338
|
const hasFiles = types.includes('Files');
|
|
371
339
|
const hasContent = types.includes('text/html') || types.includes('text/plain');
|
|
372
340
|
return [hasFiles, Array.from(dataTransfer.files), hasContent];
|
|
373
341
|
}
|
|
374
|
-
|
|
375
342
|
function handleIndentAndOutdent(insertTab, indentOrOutdent) {
|
|
376
343
|
const selection = lexical.$getSelection();
|
|
377
|
-
|
|
378
344
|
if (!lexical.$isRangeSelection(selection)) {
|
|
379
345
|
return;
|
|
380
346
|
}
|
|
381
|
-
|
|
382
347
|
const alreadyHandled = new Set();
|
|
383
348
|
const nodes = selection.getNodes();
|
|
384
|
-
|
|
385
349
|
for (let i = 0; i < nodes.length; i++) {
|
|
386
350
|
const node = nodes[i];
|
|
387
351
|
const key = node.getKey();
|
|
388
|
-
|
|
389
352
|
if (alreadyHandled.has(key)) {
|
|
390
353
|
continue;
|
|
391
354
|
}
|
|
392
|
-
|
|
393
355
|
const parentBlock = utils.$getNearestBlockElementAncestorOrThrow(node);
|
|
394
356
|
const parentKey = parentBlock.getKey();
|
|
395
|
-
|
|
396
357
|
if (parentBlock.canInsertTab()) {
|
|
397
358
|
insertTab(node);
|
|
398
359
|
alreadyHandled.add(key);
|
|
@@ -402,57 +363,45 @@ function handleIndentAndOutdent(insertTab, indentOrOutdent) {
|
|
|
402
363
|
}
|
|
403
364
|
}
|
|
404
365
|
}
|
|
405
|
-
|
|
406
366
|
function $isTargetWithinDecorator(target) {
|
|
407
367
|
const node = lexical.$getNearestNodeFromDOMNode(target);
|
|
408
368
|
return lexical.$isDecoratorNode(node);
|
|
409
369
|
}
|
|
410
|
-
|
|
411
370
|
function $isSelectionAtEndOfRoot(selection) {
|
|
412
371
|
const focus = selection.focus;
|
|
413
372
|
return focus.key === 'root' && focus.offset === lexical.$getRoot().getChildrenSize();
|
|
414
373
|
}
|
|
415
|
-
|
|
416
374
|
function registerRichText(editor) {
|
|
417
375
|
const removeListener = utils.mergeRegister(editor.registerCommand(lexical.CLICK_COMMAND, payload => {
|
|
418
376
|
const selection = lexical.$getSelection();
|
|
419
|
-
|
|
420
377
|
if (lexical.$isNodeSelection(selection)) {
|
|
421
378
|
selection.clear();
|
|
422
379
|
return true;
|
|
423
380
|
}
|
|
424
|
-
|
|
425
381
|
return false;
|
|
426
382
|
}, 0), editor.registerCommand(lexical.DELETE_CHARACTER_COMMAND, isBackward => {
|
|
427
383
|
const selection = lexical.$getSelection();
|
|
428
|
-
|
|
429
384
|
if (!lexical.$isRangeSelection(selection)) {
|
|
430
385
|
return false;
|
|
431
386
|
}
|
|
432
|
-
|
|
433
387
|
selection.deleteCharacter(isBackward);
|
|
434
388
|
return true;
|
|
435
389
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.DELETE_WORD_COMMAND, isBackward => {
|
|
436
390
|
const selection = lexical.$getSelection();
|
|
437
|
-
|
|
438
391
|
if (!lexical.$isRangeSelection(selection)) {
|
|
439
392
|
return false;
|
|
440
393
|
}
|
|
441
|
-
|
|
442
394
|
selection.deleteWord(isBackward);
|
|
443
395
|
return true;
|
|
444
396
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.DELETE_LINE_COMMAND, isBackward => {
|
|
445
397
|
const selection = lexical.$getSelection();
|
|
446
|
-
|
|
447
398
|
if (!lexical.$isRangeSelection(selection)) {
|
|
448
399
|
return false;
|
|
449
400
|
}
|
|
450
|
-
|
|
451
401
|
selection.deleteLine(isBackward);
|
|
452
402
|
return true;
|
|
453
403
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.CONTROLLED_TEXT_INSERTION_COMMAND, eventOrText => {
|
|
454
404
|
const selection = lexical.$getSelection();
|
|
455
|
-
|
|
456
405
|
if (typeof eventOrText === 'string') {
|
|
457
406
|
if (lexical.$isRangeSelection(selection)) {
|
|
458
407
|
selection.insertText(eventOrText);
|
|
@@ -461,72 +410,55 @@ function registerRichText(editor) {
|
|
|
461
410
|
if (!lexical.$isRangeSelection(selection) && !lexical.DEPRECATED_$isGridSelection(selection)) {
|
|
462
411
|
return false;
|
|
463
412
|
}
|
|
464
|
-
|
|
465
413
|
const dataTransfer = eventOrText.dataTransfer;
|
|
466
|
-
|
|
467
414
|
if (dataTransfer != null) {
|
|
468
415
|
clipboard.$insertDataTransferForRichText(dataTransfer, selection, editor);
|
|
469
416
|
} else if (lexical.$isRangeSelection(selection)) {
|
|
470
417
|
const data = eventOrText.data;
|
|
471
|
-
|
|
472
418
|
if (data) {
|
|
473
419
|
selection.insertText(data);
|
|
474
420
|
}
|
|
475
|
-
|
|
476
421
|
return true;
|
|
477
422
|
}
|
|
478
423
|
}
|
|
479
|
-
|
|
480
424
|
return true;
|
|
481
425
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.REMOVE_TEXT_COMMAND, () => {
|
|
482
426
|
const selection = lexical.$getSelection();
|
|
483
|
-
|
|
484
427
|
if (!lexical.$isRangeSelection(selection)) {
|
|
485
428
|
return false;
|
|
486
429
|
}
|
|
487
|
-
|
|
488
430
|
selection.removeText();
|
|
489
431
|
return true;
|
|
490
432
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.FORMAT_TEXT_COMMAND, format => {
|
|
491
433
|
const selection = lexical.$getSelection();
|
|
492
|
-
|
|
493
434
|
if (!lexical.$isRangeSelection(selection)) {
|
|
494
435
|
return false;
|
|
495
436
|
}
|
|
496
|
-
|
|
497
437
|
selection.formatText(format);
|
|
498
438
|
return true;
|
|
499
439
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.FORMAT_ELEMENT_COMMAND, format => {
|
|
500
440
|
const selection = lexical.$getSelection();
|
|
501
|
-
|
|
502
441
|
if (!lexical.$isRangeSelection(selection) && !lexical.$isNodeSelection(selection)) {
|
|
503
442
|
return false;
|
|
504
443
|
}
|
|
505
|
-
|
|
506
444
|
const nodes = selection.getNodes();
|
|
507
|
-
|
|
508
445
|
for (const node of nodes) {
|
|
509
446
|
const element = utils.$getNearestBlockElementAncestorOrThrow(node);
|
|
510
447
|
element.setFormat(format);
|
|
511
448
|
}
|
|
512
|
-
|
|
513
449
|
return true;
|
|
514
450
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.INSERT_LINE_BREAK_COMMAND, selectStart => {
|
|
515
451
|
const selection = lexical.$getSelection();
|
|
516
|
-
|
|
517
452
|
if (!lexical.$isRangeSelection(selection)) {
|
|
518
453
|
return false;
|
|
519
454
|
}
|
|
520
|
-
|
|
521
455
|
selection.insertLineBreak(selectStart);
|
|
522
456
|
return true;
|
|
523
457
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.INSERT_PARAGRAPH_COMMAND, () => {
|
|
524
458
|
const selection = lexical.$getSelection();
|
|
525
|
-
|
|
526
459
|
if (!lexical.$isRangeSelection(selection)) {
|
|
527
460
|
return false;
|
|
528
461
|
}
|
|
529
|
-
|
|
530
462
|
selection.insertParagraph();
|
|
531
463
|
return true;
|
|
532
464
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, () => {
|
|
@@ -534,7 +466,6 @@ function registerRichText(editor) {
|
|
|
534
466
|
editor.dispatchCommand(lexical.CONTROLLED_TEXT_INSERTION_COMMAND, '\t');
|
|
535
467
|
}, block => {
|
|
536
468
|
const indent = block.getIndent();
|
|
537
|
-
|
|
538
469
|
if (indent !== 10) {
|
|
539
470
|
block.setIndent(indent + 1);
|
|
540
471
|
}
|
|
@@ -545,14 +476,12 @@ function registerRichText(editor) {
|
|
|
545
476
|
if (lexical.$isTextNode(node)) {
|
|
546
477
|
const textContent = node.getTextContent();
|
|
547
478
|
const character = textContent[textContent.length - 1];
|
|
548
|
-
|
|
549
479
|
if (character === '\t') {
|
|
550
480
|
editor.dispatchCommand(lexical.DELETE_CHARACTER_COMMAND, true);
|
|
551
481
|
}
|
|
552
482
|
}
|
|
553
483
|
}, block => {
|
|
554
484
|
const indent = block.getIndent();
|
|
555
|
-
|
|
556
485
|
if (indent !== 0) {
|
|
557
486
|
block.setIndent(indent - 1);
|
|
558
487
|
}
|
|
@@ -560,19 +489,16 @@ function registerRichText(editor) {
|
|
|
560
489
|
return true;
|
|
561
490
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, event => {
|
|
562
491
|
const selection = lexical.$getSelection();
|
|
563
|
-
|
|
564
492
|
if (lexical.$isNodeSelection(selection) && !$isTargetWithinDecorator(event.target)) {
|
|
565
493
|
// If selection is on a node, let's try and move selection
|
|
566
494
|
// back to being a range selection.
|
|
567
495
|
const nodes = selection.getNodes();
|
|
568
|
-
|
|
569
496
|
if (nodes.length > 0) {
|
|
570
497
|
nodes[0].selectPrevious();
|
|
571
498
|
return true;
|
|
572
499
|
}
|
|
573
500
|
} else if (lexical.$isRangeSelection(selection)) {
|
|
574
501
|
const possibleNode = lexical.$getAdjacentNode(selection.focus, true);
|
|
575
|
-
|
|
576
502
|
if (lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated() && !possibleNode.isInline()) {
|
|
577
503
|
possibleNode.selectPrevious();
|
|
578
504
|
event.preventDefault();
|
|
@@ -583,16 +509,13 @@ function registerRichText(editor) {
|
|
|
583
509
|
return true;
|
|
584
510
|
}
|
|
585
511
|
}
|
|
586
|
-
|
|
587
512
|
return false;
|
|
588
513
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, event => {
|
|
589
514
|
const selection = lexical.$getSelection();
|
|
590
|
-
|
|
591
515
|
if (lexical.$isNodeSelection(selection)) {
|
|
592
516
|
// If selection is on a node, let's try and move selection
|
|
593
517
|
// back to being a range selection.
|
|
594
518
|
const nodes = selection.getNodes();
|
|
595
|
-
|
|
596
519
|
if (nodes.length > 0) {
|
|
597
520
|
nodes[0].selectNext(0, 0);
|
|
598
521
|
return true;
|
|
@@ -602,118 +525,93 @@ function registerRichText(editor) {
|
|
|
602
525
|
event.preventDefault();
|
|
603
526
|
return true;
|
|
604
527
|
}
|
|
605
|
-
|
|
606
528
|
const possibleNode = lexical.$getAdjacentNode(selection.focus, false);
|
|
607
|
-
|
|
608
529
|
if (lexical.$isDecoratorNode(possibleNode) && !possibleNode.isIsolated() && !possibleNode.isInline()) {
|
|
609
530
|
possibleNode.selectNext();
|
|
610
531
|
event.preventDefault();
|
|
611
532
|
return true;
|
|
612
533
|
}
|
|
613
534
|
}
|
|
614
|
-
|
|
615
535
|
return false;
|
|
616
536
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ARROW_LEFT_COMMAND, event => {
|
|
617
537
|
const selection$1 = lexical.$getSelection();
|
|
618
|
-
|
|
619
538
|
if (lexical.$isNodeSelection(selection$1)) {
|
|
620
539
|
// If selection is on a node, let's try and move selection
|
|
621
540
|
// back to being a range selection.
|
|
622
541
|
const nodes = selection$1.getNodes();
|
|
623
|
-
|
|
624
542
|
if (nodes.length > 0) {
|
|
625
543
|
event.preventDefault();
|
|
626
544
|
nodes[0].selectPrevious();
|
|
627
545
|
return true;
|
|
628
546
|
}
|
|
629
547
|
}
|
|
630
|
-
|
|
631
548
|
if (!lexical.$isRangeSelection(selection$1)) {
|
|
632
549
|
return false;
|
|
633
550
|
}
|
|
634
|
-
|
|
635
551
|
if (selection.$shouldOverrideDefaultCharacterSelection(selection$1, true)) {
|
|
636
552
|
const isHoldingShift = event.shiftKey;
|
|
637
553
|
event.preventDefault();
|
|
638
554
|
selection.$moveCharacter(selection$1, isHoldingShift, true);
|
|
639
555
|
return true;
|
|
640
556
|
}
|
|
641
|
-
|
|
642
557
|
return false;
|
|
643
558
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ARROW_RIGHT_COMMAND, event => {
|
|
644
559
|
const selection$1 = lexical.$getSelection();
|
|
645
|
-
|
|
646
560
|
if (lexical.$isNodeSelection(selection$1) && !$isTargetWithinDecorator(event.target)) {
|
|
647
561
|
// If selection is on a node, let's try and move selection
|
|
648
562
|
// back to being a range selection.
|
|
649
563
|
const nodes = selection$1.getNodes();
|
|
650
|
-
|
|
651
564
|
if (nodes.length > 0) {
|
|
652
565
|
event.preventDefault();
|
|
653
566
|
nodes[0].selectNext(0, 0);
|
|
654
567
|
return true;
|
|
655
568
|
}
|
|
656
569
|
}
|
|
657
|
-
|
|
658
570
|
if (!lexical.$isRangeSelection(selection$1)) {
|
|
659
571
|
return false;
|
|
660
572
|
}
|
|
661
|
-
|
|
662
573
|
const isHoldingShift = event.shiftKey;
|
|
663
|
-
|
|
664
574
|
if (selection.$shouldOverrideDefaultCharacterSelection(selection$1, false)) {
|
|
665
575
|
event.preventDefault();
|
|
666
576
|
selection.$moveCharacter(selection$1, isHoldingShift, false);
|
|
667
577
|
return true;
|
|
668
578
|
}
|
|
669
|
-
|
|
670
579
|
return false;
|
|
671
580
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, event => {
|
|
672
581
|
if ($isTargetWithinDecorator(event.target)) {
|
|
673
582
|
return false;
|
|
674
583
|
}
|
|
675
|
-
|
|
676
584
|
const selection = lexical.$getSelection();
|
|
677
|
-
|
|
678
585
|
if (!lexical.$isRangeSelection(selection)) {
|
|
679
586
|
return false;
|
|
680
587
|
}
|
|
681
|
-
|
|
682
588
|
event.preventDefault();
|
|
683
589
|
const {
|
|
684
590
|
anchor
|
|
685
591
|
} = selection;
|
|
686
592
|
const anchorNode = anchor.getNode();
|
|
687
|
-
|
|
688
593
|
if (selection.isCollapsed() && anchor.offset === 0 && !lexical.$isRootNode(anchorNode)) {
|
|
689
594
|
const element = utils.$getNearestBlockElementAncestorOrThrow(anchorNode);
|
|
690
|
-
|
|
691
595
|
if (element.getIndent() > 0) {
|
|
692
596
|
return editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, undefined);
|
|
693
597
|
}
|
|
694
598
|
}
|
|
695
|
-
|
|
696
599
|
return editor.dispatchCommand(lexical.DELETE_CHARACTER_COMMAND, true);
|
|
697
600
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_DELETE_COMMAND, event => {
|
|
698
601
|
if ($isTargetWithinDecorator(event.target)) {
|
|
699
602
|
return false;
|
|
700
603
|
}
|
|
701
|
-
|
|
702
604
|
const selection = lexical.$getSelection();
|
|
703
|
-
|
|
704
605
|
if (!lexical.$isRangeSelection(selection)) {
|
|
705
606
|
return false;
|
|
706
607
|
}
|
|
707
|
-
|
|
708
608
|
event.preventDefault();
|
|
709
609
|
return editor.dispatchCommand(lexical.DELETE_CHARACTER_COMMAND, false);
|
|
710
610
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
|
|
711
611
|
const selection = lexical.$getSelection();
|
|
712
|
-
|
|
713
612
|
if (!lexical.$isRangeSelection(selection)) {
|
|
714
613
|
return false;
|
|
715
614
|
}
|
|
716
|
-
|
|
717
615
|
if (event !== null) {
|
|
718
616
|
// If we have beforeinput, then we can avoid blocking
|
|
719
617
|
// the default behavior. This ensures that the iOS can
|
|
@@ -725,42 +623,33 @@ function registerRichText(editor) {
|
|
|
725
623
|
if ((IS_IOS || IS_SAFARI) && CAN_USE_BEFORE_INPUT) {
|
|
726
624
|
return false;
|
|
727
625
|
}
|
|
728
|
-
|
|
729
626
|
event.preventDefault();
|
|
730
|
-
|
|
731
627
|
if (event.shiftKey) {
|
|
732
628
|
return editor.dispatchCommand(lexical.INSERT_LINE_BREAK_COMMAND, false);
|
|
733
629
|
}
|
|
734
630
|
}
|
|
735
|
-
|
|
736
631
|
return editor.dispatchCommand(lexical.INSERT_PARAGRAPH_COMMAND, undefined);
|
|
737
632
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, () => {
|
|
738
633
|
const selection = lexical.$getSelection();
|
|
739
|
-
|
|
740
634
|
if (!lexical.$isRangeSelection(selection)) {
|
|
741
635
|
return false;
|
|
742
636
|
}
|
|
743
|
-
|
|
744
637
|
editor.blur();
|
|
745
638
|
return true;
|
|
746
639
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.DROP_COMMAND, event => {
|
|
747
640
|
const [, files] = eventFiles(event);
|
|
748
|
-
|
|
749
641
|
if (files.length > 0) {
|
|
750
642
|
const x = event.clientX;
|
|
751
643
|
const y = event.clientY;
|
|
752
644
|
const eventRange = caretFromPoint(x, y);
|
|
753
|
-
|
|
754
645
|
if (eventRange !== null) {
|
|
755
646
|
const {
|
|
756
647
|
offset: domOffset,
|
|
757
648
|
node: domNode
|
|
758
649
|
} = eventRange;
|
|
759
650
|
const node = lexical.$getNearestNodeFromDOMNode(domNode);
|
|
760
|
-
|
|
761
651
|
if (node !== null) {
|
|
762
652
|
const selection = lexical.$createRangeSelection();
|
|
763
|
-
|
|
764
653
|
if (lexical.$isTextNode(node)) {
|
|
765
654
|
selection.anchor.set(node.getKey(), domOffset, 'text');
|
|
766
655
|
selection.focus.set(node.getKey(), domOffset, 'text');
|
|
@@ -770,56 +659,43 @@ function registerRichText(editor) {
|
|
|
770
659
|
selection.anchor.set(parentKey, offset, 'element');
|
|
771
660
|
selection.focus.set(parentKey, offset, 'element');
|
|
772
661
|
}
|
|
773
|
-
|
|
774
662
|
const normalizedSelection = lexical.$normalizeSelection__EXPERIMENTAL(selection);
|
|
775
663
|
lexical.$setSelection(normalizedSelection);
|
|
776
664
|
}
|
|
777
|
-
|
|
778
665
|
editor.dispatchCommand(DRAG_DROP_PASTE, files);
|
|
779
666
|
}
|
|
780
|
-
|
|
781
667
|
event.preventDefault();
|
|
782
668
|
return true;
|
|
783
669
|
}
|
|
784
|
-
|
|
785
670
|
const selection = lexical.$getSelection();
|
|
786
|
-
|
|
787
671
|
if (lexical.$isRangeSelection(selection)) {
|
|
788
672
|
return true;
|
|
789
673
|
}
|
|
790
|
-
|
|
791
674
|
return false;
|
|
792
675
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.DRAGSTART_COMMAND, event => {
|
|
793
676
|
const [isFileTransfer] = eventFiles(event);
|
|
794
677
|
const selection = lexical.$getSelection();
|
|
795
|
-
|
|
796
678
|
if (isFileTransfer && !lexical.$isRangeSelection(selection)) {
|
|
797
679
|
return false;
|
|
798
680
|
}
|
|
799
|
-
|
|
800
681
|
return true;
|
|
801
682
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.DRAGOVER_COMMAND, event => {
|
|
802
683
|
const [isFileTransfer] = eventFiles(event);
|
|
803
684
|
const selection = lexical.$getSelection();
|
|
804
|
-
|
|
805
685
|
if (isFileTransfer && !lexical.$isRangeSelection(selection)) {
|
|
806
686
|
return false;
|
|
807
687
|
}
|
|
808
|
-
|
|
809
688
|
const x = event.clientX;
|
|
810
689
|
const y = event.clientY;
|
|
811
690
|
const eventRange = caretFromPoint(x, y);
|
|
812
|
-
|
|
813
691
|
if (eventRange !== null) {
|
|
814
692
|
const node = lexical.$getNearestNodeFromDOMNode(eventRange.node);
|
|
815
|
-
|
|
816
693
|
if (lexical.$isDecoratorNode(node)) {
|
|
817
694
|
// Show browser caret as the user is dragging the media across the screen. Won't work
|
|
818
695
|
// for DecoratorNode nor it's relevant.
|
|
819
696
|
event.preventDefault();
|
|
820
697
|
}
|
|
821
698
|
}
|
|
822
|
-
|
|
823
699
|
return true;
|
|
824
700
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.COPY_COMMAND, event => {
|
|
825
701
|
clipboard.copyToClipboard__EXPERIMENTAL(editor, event instanceof ClipboardEvent ? event : null);
|
|
@@ -829,19 +705,15 @@ function registerRichText(editor) {
|
|
|
829
705
|
return true;
|
|
830
706
|
}, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.PASTE_COMMAND, event => {
|
|
831
707
|
const [, files, hasTextContent] = eventFiles(event);
|
|
832
|
-
|
|
833
708
|
if (files.length > 0 && !hasTextContent) {
|
|
834
709
|
editor.dispatchCommand(DRAG_DROP_PASTE, files);
|
|
835
710
|
return true;
|
|
836
711
|
}
|
|
837
|
-
|
|
838
712
|
const selection = lexical.$getSelection();
|
|
839
|
-
|
|
840
713
|
if (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
|
|
841
714
|
onPasteForRichText(event, editor);
|
|
842
715
|
return true;
|
|
843
716
|
}
|
|
844
|
-
|
|
845
717
|
return false;
|
|
846
718
|
}, lexical.COMMAND_PRIORITY_EDITOR));
|
|
847
719
|
return removeListener;
|
package/package.json
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
"rich-text"
|
|
8
8
|
],
|
|
9
9
|
"license": "MIT",
|
|
10
|
-
"version": "0.7.
|
|
10
|
+
"version": "0.7.9",
|
|
11
11
|
"main": "LexicalRichText.js",
|
|
12
12
|
"peerDependencies": {
|
|
13
|
-
"lexical": "0.7.
|
|
14
|
-
"@lexical/selection": "0.7.
|
|
15
|
-
"@lexical/clipboard": "0.7.
|
|
16
|
-
"@lexical/utils": "0.7.
|
|
13
|
+
"lexical": "0.7.9",
|
|
14
|
+
"@lexical/selection": "0.7.9",
|
|
15
|
+
"@lexical/clipboard": "0.7.9",
|
|
16
|
+
"@lexical/utils": "0.7.9"
|
|
17
17
|
},
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|