• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

worktile / slate-angular / fb30d33e-e9ae-4e7b-a748-4e40a17cb98d

07 Jan 2026 03:35AM UTC coverage: 36.662% (+0.02%) from 36.647%
fb30d33e-e9ae-4e7b-a748-4e40a17cb98d

push

circleci

web-flow
feat(virtual-scroll): #WIK-19695 collapsed content will not be rendered (#330)

* feat(virtual-scroll): #WIK-19695 collapsed content will not be rendered

* fix: optimize

* chore: add changeset

394 of 1274 branches covered (30.93%)

Branch coverage included in aggregate %.

14 of 56 new or added lines in 3 files covered. (25.0%)

1 existing line in 1 file now uncovered.

1093 of 2782 relevant lines covered (39.29%)

24.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

22.55
/packages/src/components/editable/editable.component.ts
1
import {
2
    Component,
3
    OnInit,
4
    Input,
5
    HostBinding,
6
    Renderer2,
7
    ElementRef,
8
    ChangeDetectionStrategy,
9
    OnDestroy,
10
    ChangeDetectorRef,
11
    NgZone,
12
    Injector,
13
    forwardRef,
14
    OnChanges,
15
    SimpleChanges,
16
    AfterViewChecked,
17
    DoCheck,
18
    inject,
19
    ViewContainerRef
20
} from '@angular/core';
21
import { Text as SlateText, Element, Transforms, Editor, Range, Path, NodeEntry, Node, Selection } from 'slate';
22
import { direction } from 'direction';
23
import scrollIntoView from 'scroll-into-view-if-needed';
24
import { AngularEditor } from '../../plugins/angular-editor';
25
import {
26
    DOMElement,
27
    isDOMNode,
28
    DOMStaticRange,
29
    DOMRange,
30
    isDOMElement,
31
    isPlainTextOnlyPaste,
32
    DOMSelection,
33
    getDefaultView,
34
    EDITOR_TO_WINDOW,
35
    EDITOR_TO_ELEMENT,
36
    NODE_TO_ELEMENT,
37
    ELEMENT_TO_NODE,
38
    IS_FOCUSED,
39
    IS_READ_ONLY
40
} from 'slate-dom';
41
import { Subject } from 'rxjs';
42
import {
43
    IS_FIREFOX,
44
    IS_SAFARI,
45
    IS_CHROME,
46
    HAS_BEFORE_INPUT_SUPPORT,
47
    IS_ANDROID,
48
    SLATE_DEBUG_KEY,
49
    SLATE_DEBUG_KEY_SCROLL_TOP
50
} from '../../utils/environment';
51
import Hotkeys from '../../utils/hotkeys';
52
import { BeforeInputEvent, extractBeforeInputEvent } from '../../custom-event/BeforeInputEventPlugin';
53
import { BEFORE_INPUT_EVENTS } from '../../custom-event/before-input-polyfill';
54
import { SlateErrorCode } from '../../types/error';
55
import { NG_VALUE_ACCESSOR } from '@angular/forms';
56
import { SlateChildrenContext, SlateViewContext } from '../../view/context';
57
import { ViewType } from '../../types/view';
58
import { HistoryEditor } from 'slate-history';
59
import {
60
    buildHeightsAndAccumulatedHeights,
61
    EDITOR_TO_BUSINESS_TOP,
62
    EDITOR_TO_VIRTUAL_SCROLL_SELECTION,
63
    ELEMENT_KEY_TO_HEIGHTS,
64
    getBusinessTop,
65
    getRealHeightByElement,
66
    IS_ENABLED_VIRTUAL_SCROLL,
67
    isDebug,
68
    isDebugScrollTop,
69
    isDecoratorRangeListEqual,
70
    measureHeightByIndics
71
} from '../../utils';
72
import { SlatePlaceholder } from '../../types/feature';
73
import { restoreDom } from '../../utils/restore-dom';
74
import { ListRender } from '../../view/render/list-render';
75
import { TRIPLE_CLICK, EDITOR_TO_ON_CHANGE } from 'slate-dom';
76
import { SlateVirtualScrollConfig, VirtualViewResult } from '../../types';
77
import { isKeyHotkey } from 'is-hotkey';
78
import { calculateVirtualTopHeight, debugLog, EDITOR_TO_ROOT_NODE_WIDTH } from '../../utils/virtual-scroll';
79

80
// not correctly clipboardData on beforeinput
81
const forceOnDOMPaste = IS_SAFARI;
1✔
82

83
@Component({
84
    selector: 'slate-editable',
85
    host: {
86
        class: 'slate-editable-container',
87
        '[attr.contenteditable]': 'readonly ? undefined : true',
88
        '[attr.role]': `readonly ? undefined : 'textbox'`,
89
        '[attr.spellCheck]': `!hasBeforeInputSupport ? false : spellCheck`,
90
        '[attr.autoCorrect]': `!hasBeforeInputSupport ? 'false' : autoCorrect`,
91
        '[attr.autoCapitalize]': `!hasBeforeInputSupport ? 'false' : autoCapitalize`
92
    },
93
    template: '',
94
    changeDetection: ChangeDetectionStrategy.OnPush,
95
    providers: [
96
        {
97
            provide: NG_VALUE_ACCESSOR,
98
            useExisting: forwardRef(() => SlateEditable),
23✔
99
            multi: true
100
        }
101
    ],
102
    imports: []
103
})
104
export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChecked, DoCheck {
1✔
105
    viewContext: SlateViewContext;
106
    context: SlateChildrenContext;
107

108
    private destroy$ = new Subject();
23✔
109

110
    isComposing = false;
23✔
111
    isDraggingInternally = false;
23✔
112
    isUpdatingSelection = false;
23✔
113
    latestElement = null as DOMElement | null;
23✔
114

115
    protected manualListeners: (() => void)[] = [];
23✔
116

117
    private initialized: boolean;
118

119
    private onTouchedCallback: () => void = () => {};
23✔
120

121
    private onChangeCallback: (_: any) => void = () => {};
23✔
122

123
    @Input() editor: AngularEditor;
124

125
    @Input() renderElement: (element: Element) => ViewType | null;
126

127
    @Input() renderLeaf: (text: SlateText) => ViewType | null;
128

129
    @Input() renderText: (text: SlateText) => ViewType | null;
130

131
    @Input() decorate: (entry: NodeEntry) => Range[] = () => [];
228✔
132

133
    @Input() placeholderDecorate: (editor: Editor) => SlatePlaceholder[];
134

135
    @Input() scrollSelectionIntoView: (editor: AngularEditor, domRange: DOMRange) => void = defaultScrollSelectionIntoView;
23✔
136

137
    @Input() isStrictDecorate: boolean = true;
23✔
138

139
    @Input() trackBy: (node: Element) => any = () => null;
206✔
140

141
    @Input() readonly = false;
23✔
142

143
    @Input() placeholder: string;
144

145
    @Input()
146
    set virtualScroll(config: SlateVirtualScrollConfig) {
147
        this.virtualScrollConfig = config;
×
148
        if (isDebugScrollTop) {
×
149
            debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
×
150
        }
151
        IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
×
152
        if (this.isEnabledVirtualScroll()) {
×
153
            this.tryUpdateVirtualViewport();
×
154
        }
155
    }
156

157
    //#region input event handler
158
    @Input() beforeInput: (event: Event) => void;
159
    @Input() blur: (event: Event) => void;
160
    @Input() click: (event: MouseEvent) => void;
161
    @Input() compositionEnd: (event: CompositionEvent) => void;
162
    @Input() compositionUpdate: (event: CompositionEvent) => void;
163
    @Input() compositionStart: (event: CompositionEvent) => void;
164
    @Input() copy: (event: ClipboardEvent) => void;
165
    @Input() cut: (event: ClipboardEvent) => void;
166
    @Input() dragOver: (event: DragEvent) => void;
167
    @Input() dragStart: (event: DragEvent) => void;
168
    @Input() dragEnd: (event: DragEvent) => void;
169
    @Input() drop: (event: DragEvent) => void;
170
    @Input() focus: (event: Event) => void;
171
    @Input() keydown: (event: KeyboardEvent) => void;
172
    @Input() paste: (event: ClipboardEvent) => void;
173
    //#endregion
174

175
    //#region DOM attr
176
    @Input() spellCheck = false;
23✔
177
    @Input() autoCorrect = false;
23✔
178
    @Input() autoCapitalize = false;
23✔
179

180
    @HostBinding('attr.data-slate-editor') dataSlateEditor = true;
23✔
181
    @HostBinding('attr.data-slate-node') dataSlateNode = 'value';
23✔
182
    @HostBinding('attr.data-gramm') dataGramm = false;
23✔
183

184
    get hasBeforeInputSupport() {
185
        return HAS_BEFORE_INPUT_SUPPORT;
456✔
186
    }
187
    //#endregion
188

189
    viewContainerRef = inject(ViewContainerRef);
23✔
190

191
    getOutletParent = () => {
23✔
192
        return this.elementRef.nativeElement;
43✔
193
    };
194

195
    getOutletElement = () => {
23✔
196
        if (this.virtualScrollInitialized) {
23!
197
            return this.virtualCenterOutlet;
×
198
        } else {
199
            return null;
23✔
200
        }
201
    };
202

203
    listRender: ListRender;
204

205
    private virtualScrollConfig: SlateVirtualScrollConfig = {
23✔
206
        enabled: false,
207
        scrollTop: 0,
208
        viewportHeight: 0,
209
        viewportBoundingTop: 0,
210
        scrollContainer: null
211
    };
212

213
    private inViewportChildren: Element[] = [];
23✔
214
    private inViewportIndics: number[] = [];
23✔
215
    private keyHeightMap = new Map<string, number>();
23✔
216
    private tryUpdateVirtualViewportAnimId: number;
217
    private tryMeasureInViewportChildrenHeightsAnimId: number;
218
    private editorResizeObserver?: ResizeObserver;
219

220
    constructor(
221
        public elementRef: ElementRef,
23✔
222
        public renderer2: Renderer2,
23✔
223
        public cdr: ChangeDetectorRef,
23✔
224
        private ngZone: NgZone,
23✔
225
        private injector: Injector
23✔
226
    ) {}
227

228
    ngOnInit() {
229
        this.editor.injector = this.injector;
23✔
230
        this.editor.children = [];
23✔
231
        let window = getDefaultView(this.elementRef.nativeElement);
23✔
232
        EDITOR_TO_WINDOW.set(this.editor, window);
23✔
233
        EDITOR_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
23✔
234
        NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
23✔
235
        ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
23✔
236
        IS_READ_ONLY.set(this.editor, this.readonly);
23✔
237
        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.keyHeightMap);
23✔
238
        EDITOR_TO_ON_CHANGE.set(this.editor, () => {
23✔
239
            this.ngZone.run(() => {
13✔
240
                this.onChange();
13✔
241
            });
242
        });
243
        this.ngZone.runOutsideAngular(() => {
23✔
244
            this.initialize();
23✔
245
        });
246
        this.initializeViewContext();
23✔
247
        this.initializeContext();
23✔
248

249
        // add browser class
250
        let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
23!
251
        browserClass && this.elementRef.nativeElement.classList.add(browserClass);
23!
252
        this.initializeVirtualScroll();
23✔
253
        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
23✔
254
    }
255

256
    ngOnChanges(simpleChanges: SimpleChanges) {
257
        if (!this.initialized) {
30✔
258
            return;
23✔
259
        }
260
        const decorateChange = simpleChanges['decorate'];
7✔
261
        if (decorateChange) {
7✔
262
            this.forceRender();
2✔
263
        }
264
        const placeholderChange = simpleChanges['placeholder'];
7✔
265
        if (placeholderChange) {
7✔
266
            this.render();
1✔
267
        }
268
        const readonlyChange = simpleChanges['readonly'];
7✔
269
        if (readonlyChange) {
7!
270
            IS_READ_ONLY.set(this.editor, this.readonly);
×
271
            this.render();
×
272
            this.toSlateSelection();
×
273
        }
274
    }
275

276
    registerOnChange(fn: any) {
277
        this.onChangeCallback = fn;
23✔
278
    }
279
    registerOnTouched(fn: any) {
280
        this.onTouchedCallback = fn;
23✔
281
    }
282

283
    writeValue(value: Element[]) {
284
        if (value && value.length) {
49✔
285
            this.editor.children = value;
26✔
286
            this.initializeContext();
26✔
287
            if (this.isEnabledVirtualScroll()) {
26!
288
                const virtualView = this.calculateVirtualViewport();
×
289
                this.applyVirtualView(virtualView);
×
290
                const childrenForRender = virtualView.inViewportChildren;
×
291
                if (isDebug) {
×
292
                    debugLog('log', 'writeValue calculate: ', virtualView.inViewportIndics, 'initialized: ', this.listRender.initialized);
×
293
                }
294
                if (!this.listRender.initialized) {
×
NEW
295
                    this.listRender.initialize(childrenForRender, this.editor, this.context, 0, virtualView.inViewportIndics);
×
296
                } else {
NEW
297
                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
×
NEW
298
                    this.listRender.update(
×
299
                        childrenWithPreRendering,
300
                        this.editor,
301
                        this.context,
302
                        preRenderingCount,
303
                        childrenWithPreRenderingIndics
304
                    );
305
                }
306
            } else {
307
                if (!this.listRender.initialized) {
26✔
308
                    this.listRender.initialize(this.editor.children, this.editor, this.context);
23✔
309
                } else {
310
                    this.listRender.update(this.editor.children, this.editor, this.context);
3✔
311
                }
312
            }
313
            this.cdr.markForCheck();
26✔
314
        }
315
    }
316

317
    initialize() {
318
        this.initialized = true;
23✔
319
        const window = AngularEditor.getWindow(this.editor);
23✔
320
        this.addEventListener(
23✔
321
            'selectionchange',
322
            event => {
323
                this.toSlateSelection();
2✔
324
            },
325
            window.document
326
        );
327
        if (HAS_BEFORE_INPUT_SUPPORT) {
23✔
328
            this.addEventListener('beforeinput', this.onDOMBeforeInput.bind(this));
23✔
329
        }
330
        this.addEventListener('blur', this.onDOMBlur.bind(this));
23✔
331
        this.addEventListener('click', this.onDOMClick.bind(this));
23✔
332
        this.addEventListener('compositionend', this.onDOMCompositionEnd.bind(this));
23✔
333
        this.addEventListener('compositionupdate', this.onDOMCompositionUpdate.bind(this));
23✔
334
        this.addEventListener('compositionstart', this.onDOMCompositionStart.bind(this));
23✔
335
        this.addEventListener('copy', this.onDOMCopy.bind(this));
23✔
336
        this.addEventListener('cut', this.onDOMCut.bind(this));
23✔
337
        this.addEventListener('dragover', this.onDOMDragOver.bind(this));
23✔
338
        this.addEventListener('dragstart', this.onDOMDragStart.bind(this));
23✔
339
        this.addEventListener('dragend', this.onDOMDragEnd.bind(this));
23✔
340
        this.addEventListener('drop', this.onDOMDrop.bind(this));
23✔
341
        this.addEventListener('focus', this.onDOMFocus.bind(this));
23✔
342
        this.addEventListener('keydown', this.onDOMKeydown.bind(this));
23✔
343
        this.addEventListener('paste', this.onDOMPaste.bind(this));
23✔
344
        BEFORE_INPUT_EVENTS.forEach(event => {
23✔
345
            this.addEventListener(event.name, () => {});
115✔
346
        });
347
    }
348

349
    calculateVirtualScrollSelection(selection: Selection) {
350
        if (selection) {
×
351
            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
×
352
            const indics = this.inViewportIndics;
×
353
            if (indics.length > 0) {
×
354
                const currentVisibleRange: Range = {
×
355
                    anchor: Editor.start(this.editor, [indics[0]]),
356
                    focus: Editor.end(this.editor, [indics[indics.length - 1]])
357
                };
358
                const [start, end] = Range.edges(selection);
×
359
                let forwardSelection = { anchor: start, focus: end };
×
360
                if (!isBlockCardCursor) {
×
361
                    forwardSelection = { anchor: start, focus: end };
×
362
                } else {
363
                    forwardSelection = { anchor: { path: start.path, offset: 0 }, focus: { path: end.path, offset: 0 } };
×
364
                }
365
                const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
×
366
                if (intersectedSelection && isBlockCardCursor) {
×
367
                    return selection;
×
368
                }
369
                EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
×
370
                if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
×
371
                    if (isDebug) {
×
372
                        debugLog(
×
373
                            'log',
374
                            `selection is not in visible range, selection: ${JSON.stringify(
375
                                selection
376
                            )}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`
377
                        );
378
                    }
379
                    return intersectedSelection;
×
380
                }
381
                return selection;
×
382
            }
383
        }
384
        EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
×
385
        return selection;
×
386
    }
387

388
    toNativeSelection(autoScroll = true) {
15✔
389
        try {
15✔
390
            let { selection } = this.editor;
15✔
391
            if (this.isEnabledVirtualScroll()) {
15!
392
                selection = this.calculateVirtualScrollSelection(selection);
×
393
            }
394
            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
15✔
395
            const { activeElement } = root;
15✔
396
            const domSelection = (root as Document).getSelection();
15✔
397

398
            if ((this.isComposing && !IS_ANDROID) || !domSelection || !AngularEditor.isFocused(this.editor)) {
15!
399
                return;
14✔
400
            }
401

402
            const hasDomSelection = domSelection.type !== 'None';
1✔
403

404
            // If the DOM selection is properly unset, we're done.
405
            if (!selection && !hasDomSelection) {
1!
406
                return;
×
407
            }
408

409
            // If the DOM selection is already correct, we're done.
410
            // verify that the dom selection is in the editor
411
            const editorElement = EDITOR_TO_ELEMENT.get(this.editor)!;
1✔
412
            let hasDomSelectionInEditor = false;
1✔
413
            if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
1✔
414
                hasDomSelectionInEditor = true;
1✔
415
            }
416

417
            // If the DOM selection is in the editor and the editor selection is already correct, we're done.
418
            if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
1✔
419
                const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, {
1✔
420
                    exactMatch: false,
421
                    suppressThrow: true
422
                });
423
                if (rangeFromDOMSelection && Range.equals(rangeFromDOMSelection, selection)) {
1!
424
                    return;
×
425
                }
426
            }
427

428
            // prevent updating native selection when active element is void element
429
            if (isTargetInsideVoid(this.editor, activeElement)) {
1!
430
                return;
×
431
            }
432

433
            // when <Editable/> is being controlled through external value
434
            // then its children might just change - DOM responds to it on its own
435
            // but Slate's value is not being updated through any operation
436
            // and thus it doesn't transform selection on its own
437
            if (selection && !AngularEditor.hasRange(this.editor, selection)) {
1!
438
                this.editor.selection = AngularEditor.toSlateRange(this.editor, domSelection, { exactMatch: false, suppressThrow: false });
×
439
                return;
×
440
            }
441

442
            // Otherwise the DOM selection is out of sync, so update it.
443
            const el = AngularEditor.toDOMNode(this.editor, this.editor);
1✔
444
            this.isUpdatingSelection = true;
1✔
445

446
            const newDomRange = selection && AngularEditor.toDOMRange(this.editor, selection);
1✔
447

448
            if (newDomRange) {
1!
449
                // COMPAT: Since the DOM range has no concept of backwards/forwards
450
                // we need to check and do the right thing here.
451
                if (Range.isBackward(selection)) {
1!
452
                    // eslint-disable-next-line max-len
453
                    domSelection.setBaseAndExtent(
×
454
                        newDomRange.endContainer,
455
                        newDomRange.endOffset,
456
                        newDomRange.startContainer,
457
                        newDomRange.startOffset
458
                    );
459
                } else {
460
                    // eslint-disable-next-line max-len
461
                    domSelection.setBaseAndExtent(
1✔
462
                        newDomRange.startContainer,
463
                        newDomRange.startOffset,
464
                        newDomRange.endContainer,
465
                        newDomRange.endOffset
466
                    );
467
                }
468
            } else {
469
                domSelection.removeAllRanges();
×
470
            }
471

472
            setTimeout(() => {
1✔
473
                if (
1!
474
                    this.isEnabledVirtualScroll() &&
1!
475
                    !selection &&
476
                    this.editor.selection &&
477
                    autoScroll &&
478
                    this.virtualScrollConfig.scrollContainer
479
                ) {
480
                    this.virtualScrollConfig.scrollContainer.scrollTop = this.virtualScrollConfig.scrollContainer.scrollTop + 100;
×
481
                    this.isUpdatingSelection = false;
×
482
                    return;
×
483
                } else {
484
                    // handle scrolling in setTimeout because of
485
                    // dom should not have updated immediately after listRender's updating
486
                    newDomRange && autoScroll && this.scrollSelectionIntoView(this.editor, newDomRange);
1✔
487
                    // COMPAT: In Firefox, it's not enough to create a range, you also need
488
                    // to focus the contenteditable element too. (2016/11/16)
489
                    if (newDomRange && IS_FIREFOX) {
1!
490
                        el.focus();
×
491
                    }
492
                }
493
                this.isUpdatingSelection = false;
1✔
494
            });
495
        } catch (error) {
496
            this.editor.onError({
×
497
                code: SlateErrorCode.ToNativeSelectionError,
498
                nativeError: error
499
            });
500
            this.isUpdatingSelection = false;
×
501
        }
502
    }
503

504
    onChange() {
505
        this.forceRender();
13✔
506
        this.onChangeCallback(this.editor.children);
13✔
507
    }
508

509
    ngAfterViewChecked() {}
510

511
    ngDoCheck() {}
512

513
    forceRender() {
514
        this.updateContext();
15✔
515
        if (this.isEnabledVirtualScroll()) {
15!
516
            this.updateListRenderAndRemeasureHeights();
×
517
        } else {
518
            this.listRender.update(this.editor.children, this.editor, this.context);
15✔
519
        }
520
        // repair collaborative editing when Chinese input is interrupted by other users' cursors
521
        // when the DOMElement where the selection is located is removed
522
        // the compositionupdate and compositionend events will no longer be fired
523
        // so isComposing needs to be corrected
524
        // need exec after this.cdr.detectChanges() to render HTML
525
        // need exec before this.toNativeSelection() to correct native selection
526
        if (this.isComposing) {
15!
527
            // Composition input text be not rendered when user composition input with selection is expanded
528
            // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
529
            // this time condition is true and isComposing is assigned false
530
            // Therefore, need to wait for the composition input text to be rendered before performing condition matching
531
            setTimeout(() => {
×
532
                const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
×
533
                const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
×
534
                let textContent = '';
×
535
                // skip decorate text
536
                textDOMNode.querySelectorAll('[editable-text]').forEach(stringDOMNode => {
×
537
                    let text = stringDOMNode.textContent;
×
538
                    const zeroChar = '\uFEFF';
×
539
                    // remove zero with char
540
                    if (text.startsWith(zeroChar)) {
×
541
                        text = text.slice(1);
×
542
                    }
543
                    if (text.endsWith(zeroChar)) {
×
544
                        text = text.slice(0, text.length - 1);
×
545
                    }
546
                    textContent += text;
×
547
                });
548
                if (Node.string(textNode).endsWith(textContent)) {
×
549
                    this.isComposing = false;
×
550
                }
551
            }, 0);
552
        }
553
        this.toNativeSelection();
15✔
554
    }
555

556
    render() {
557
        const changed = this.updateContext();
2✔
558
        if (changed) {
2✔
559
            if (this.isEnabledVirtualScroll()) {
2!
560
                this.updateListRenderAndRemeasureHeights();
×
561
            } else {
562
                this.listRender.update(this.editor.children, this.editor, this.context);
2✔
563
            }
564
        }
565
    }
566

567
    updateListRenderAndRemeasureHeights() {
568
        const virtualView = this.calculateVirtualViewport();
×
569
        const oldInViewportChildren = this.inViewportChildren;
×
570
        this.applyVirtualView(virtualView);
×
NEW
571
        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
×
NEW
572
        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
×
573
        // 新增或者修改的才需要重算,计算出这个结果
574
        const remeasureIndics = [];
×
575
        this.inViewportChildren.forEach((child, index) => {
×
576
            if (oldInViewportChildren.indexOf(child) === -1) {
×
577
                remeasureIndics.push(this.inViewportIndics[index]);
×
578
            }
579
        });
580
        if (isDebug && remeasureIndics.length > 0) {
×
581
            console.log('remeasure height by indics: ', remeasureIndics);
×
582
        }
583
    }
584

585
    updateContext() {
586
        const decorations = this.generateDecorations();
17✔
587
        if (
17✔
588
            this.context.selection !== this.editor.selection ||
46✔
589
            this.context.decorate !== this.decorate ||
590
            this.context.readonly !== this.readonly ||
591
            !isDecoratorRangeListEqual(this.context.decorations, decorations)
592
        ) {
593
            this.context = {
10✔
594
                parent: this.editor,
595
                selection: this.editor.selection,
596
                decorations: decorations,
597
                decorate: this.decorate,
598
                readonly: this.readonly
599
            };
600
            return true;
10✔
601
        }
602
        return false;
7✔
603
    }
604

605
    initializeContext() {
606
        this.context = {
49✔
607
            parent: this.editor,
608
            selection: this.editor.selection,
609
            decorations: this.generateDecorations(),
610
            decorate: this.decorate,
611
            readonly: this.readonly
612
        };
613
    }
614

615
    initializeViewContext() {
616
        this.viewContext = {
23✔
617
            editor: this.editor,
618
            renderElement: this.renderElement,
619
            renderLeaf: this.renderLeaf,
620
            renderText: this.renderText,
621
            trackBy: this.trackBy,
622
            isStrictDecorate: this.isStrictDecorate
623
        };
624
    }
625

626
    composePlaceholderDecorate(editor: Editor) {
627
        if (this.placeholderDecorate) {
64!
628
            return this.placeholderDecorate(editor) || [];
×
629
        }
630

631
        if (this.placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '') {
64✔
632
            const start = Editor.start(editor, []);
3✔
633
            return [
3✔
634
                {
635
                    placeholder: this.placeholder,
636
                    anchor: start,
637
                    focus: start
638
                }
639
            ];
640
        } else {
641
            return [];
61✔
642
        }
643
    }
644

645
    generateDecorations() {
646
        const decorations = this.decorate([this.editor, []]);
66✔
647
        const placeholderDecorations = this.isComposing ? [] : this.composePlaceholderDecorate(this.editor);
66✔
648
        decorations.push(...placeholderDecorations);
66✔
649
        return decorations;
66✔
650
    }
651

652
    private isEnabledVirtualScroll() {
653
        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
82✔
654
    }
655

656
    virtualScrollInitialized = false;
23✔
657

658
    virtualTopHeightElement: HTMLElement;
659

660
    virtualBottomHeightElement: HTMLElement;
661

662
    virtualCenterOutlet: HTMLElement;
663

664
    initializeVirtualScroll() {
665
        if (this.virtualScrollInitialized) {
23!
666
            return;
×
667
        }
668
        if (this.isEnabledVirtualScroll()) {
23!
669
            this.virtualScrollInitialized = true;
×
670
            this.virtualTopHeightElement = document.createElement('div');
×
671
            this.virtualTopHeightElement.classList.add('virtual-top-height');
×
672
            this.virtualTopHeightElement.contentEditable = 'false';
×
673
            this.virtualBottomHeightElement = document.createElement('div');
×
674
            this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
×
675
            this.virtualBottomHeightElement.contentEditable = 'false';
×
676
            this.virtualCenterOutlet = document.createElement('div');
×
677
            this.virtualCenterOutlet.classList.add('virtual-center-outlet');
×
678
            this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
×
679
            this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
×
680
            this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
×
681
            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
×
682
            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
×
683
            this.editorResizeObserver = new ResizeObserver(entries => {
×
684
                if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
×
685
                    editorResizeObserverRectWidth = entries[0].contentRect.width;
×
686
                    this.keyHeightMap.clear();
×
687
                    const remeasureIndics = this.inViewportIndics;
×
688
                    measureHeightByIndics(this.editor, remeasureIndics, true);
×
689
                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
×
690
                    if (isDebug) {
×
691
                        debugLog(
×
692
                            'log',
693
                            'editorResizeObserverRectWidth: ',
694
                            editorResizeObserverRectWidth,
695
                            'EDITOR_TO_ROOT_NODE_WIDTH: ',
696
                            EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor)
697
                        );
698
                    }
699
                }
700
            });
701
            this.editorResizeObserver.observe(this.elementRef.nativeElement);
×
702
        }
703
    }
704

705
    setVirtualSpaceHeight(topHeight: number, bottomHeight?: number) {
706
        if (!this.virtualScrollInitialized) {
×
707
            return;
×
708
        }
709
        this.virtualTopHeightElement.style.height = `${topHeight}px`;
×
710
        if (bottomHeight !== undefined) {
×
711
            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
×
712
        }
713
    }
714

715
    getActualVirtualTopHeight() {
716
        if (!this.virtualScrollInitialized) {
×
717
            return 0;
×
718
        }
719
        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
×
720
    }
721

722
    handlePreRendering() {
NEW
723
        let preRenderingCount = 0;
×
724
        const childrenWithPreRendering = [...this.inViewportChildren];
×
NEW
725
        const childrenWithPreRenderingIndics = [...this.inViewportIndics];
×
NEW
726
        const firstIndex = this.inViewportIndics[0];
×
NEW
727
        for (let index = firstIndex - 1; index >= 0; index--) {
×
NEW
728
            const element = this.editor.children[index] as Element;
×
NEW
729
            if (this.editor.isVisible(element)) {
×
NEW
730
                childrenWithPreRendering.unshift(element);
×
NEW
731
                childrenWithPreRenderingIndics.unshift(index);
×
NEW
732
                preRenderingCount = 1;
×
NEW
733
                break;
×
734
            }
735
        }
736
        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
×
NEW
737
        for (let index = lastIndex + 1; index < this.editor.children.length; index++) {
×
NEW
738
            const element = this.editor.children[index] as Element;
×
NEW
739
            if (this.editor.isVisible(element)) {
×
NEW
740
                childrenWithPreRendering.push(element);
×
NEW
741
                childrenWithPreRenderingIndics.push(index);
×
NEW
742
                break;
×
743
            }
744
        }
NEW
745
        return { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics };
×
746
    }
747

748
    private tryUpdateVirtualViewport() {
749
        if (isDebug) {
×
750
            debugLog('log', 'tryUpdateVirtualViewport');
×
751
        }
752
        if (this.inViewportIndics.length > 0) {
×
753
            const topHeight = this.getActualVirtualTopHeight();
×
754
            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0]);
×
755
            if (topHeight !== refreshVirtualTopHeight) {
×
756
                if (isDebug) {
×
757
                    debugLog(
×
758
                        'log',
759
                        'update top height since dirty state(正数减去高度,负数代表增加高度): ',
760
                        topHeight - refreshVirtualTopHeight
761
                    );
762
                }
763
                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
×
764
                return;
×
765
            }
766
        }
767
        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
×
768
        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
×
769
            if (isDebug) {
×
770
                debugLog('log', 'tryUpdateVirtualViewport Anim start');
×
771
            }
772
            let virtualView = this.calculateVirtualViewport();
×
773
            let diff = this.diffVirtualViewport(virtualView);
×
774
            if (diff.isDifferent && diff.needRemoveOnTop) {
×
775
                const remeasureIndics = diff.changedIndexesOfTop;
×
776
                const changed = measureHeightByIndics(this.editor, remeasureIndics);
×
777
                if (changed) {
×
778
                    virtualView = this.calculateVirtualViewport();
×
779
                    diff = this.diffVirtualViewport(virtualView, 'second');
×
780
                }
781
            }
782
            if (diff.isDifferent) {
×
783
                this.applyVirtualView(virtualView);
×
784
                if (this.listRender.initialized) {
×
NEW
785
                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
×
NEW
786
                    this.listRender.update(
×
787
                        childrenWithPreRendering,
788
                        this.editor,
789
                        this.context,
790
                        preRenderingCount,
791
                        childrenWithPreRenderingIndics
792
                    );
793
                    if (diff.needAddOnTop) {
×
794
                        const remeasureAddedIndics = diff.changedIndexesOfTop;
×
795
                        if (isDebug) {
×
796
                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
×
797
                        }
798
                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
×
799
                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
×
800
                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
×
801
                        if (changed) {
×
802
                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
×
803
                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
×
804
                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
×
805
                            this.setVirtualSpaceHeight(newTopHeight);
×
806
                            if (isDebug) {
×
807
                                debugLog(
×
808
                                    'log',
809
                                    `update top height since will add element in top(正数减去高度,负数代表增加高度): ${actualTopHeightAfterAdd - topHeightBeforeAdd}`
810
                                );
811
                            }
812
                        }
813
                    }
814
                    if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
×
815
                        this.toNativeSelection(false);
×
816
                    }
817
                }
818
            }
819
            if (isDebug) {
×
820
                debugLog('log', 'tryUpdateVirtualViewport Anim end');
×
821
            }
822
        });
823
    }
824

825
    private calculateVirtualViewport() {
826
        const children = (this.editor.children || []) as Element[];
×
827
        if (!children.length || !this.isEnabledVirtualScroll()) {
×
828
            return {
×
829
                inViewportChildren: children,
830
                inViewportIndics: [],
831
                top: 0,
832
                bottom: 0,
833
                heights: []
834
            };
835
        }
836
        const scrollTop = this.virtualScrollConfig.scrollTop;
×
837
        const viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
×
838
        if (!viewportHeight) {
×
839
            return {
×
840
                inViewportChildren: [],
841
                inViewportIndics: [],
842
                top: 0,
843
                bottom: 0,
844
                heights: []
845
            };
846
        }
847
        const elementLength = children.length;
×
848
        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
×
849
            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
×
850
            setTimeout(() => {
×
851
                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
×
852
                const businessTop =
853
                    Math.ceil(virtualTopBoundingTop) +
×
854
                    Math.ceil(this.virtualScrollConfig.scrollTop) -
855
                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
856
                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
×
857
                if (isDebug) {
×
858
                    debugLog('log', 'businessTop', businessTop);
×
859
                }
860
            }, 100);
861
        }
862
        const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
×
NEW
863
        const { heights, accumulatedHeights, visibles } = buildHeightsAndAccumulatedHeights(this.editor);
×
864
        const totalHeight = accumulatedHeights[elementLength];
×
865
        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
×
866
        const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
×
867
        const viewBottom = limitedScrollTop + viewportHeight;
×
868
        let accumulatedOffset = 0;
×
869
        let inViewportStartIndex = -1;
×
870
        const visible: Element[] = [];
×
871
        const inViewportIndics: number[] = [];
×
872

873
        for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
×
874
            const currentHeight = heights[i];
×
875
            const nextOffset = accumulatedOffset + currentHeight;
×
NEW
876
            if (!visibles[i]) {
×
NEW
877
                accumulatedOffset = nextOffset;
×
NEW
878
                continue;
×
879
            }
880
            // 可视区域有交集,加入渲染
881
            if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
×
882
                if (inViewportStartIndex === -1) inViewportStartIndex = i; // 第一个相交起始位置
×
883
                visible.push(children[i]);
×
884
                inViewportIndics.push(i);
×
885
            }
886
            accumulatedOffset = nextOffset;
×
887
        }
888

889
        const inViewportEndIndex =
890
            inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
×
891
        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
×
892
        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
×
893
        return {
×
894
            inViewportChildren: visible.length ? visible : children,
×
895
            inViewportIndics,
896
            top,
897
            bottom,
898
            heights,
899
            accumulatedHeights
900
        };
901
    }
902

903
    private applyVirtualView(virtualView: VirtualViewResult) {
904
        this.inViewportChildren = virtualView.inViewportChildren;
×
905
        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
×
906
        this.inViewportIndics = virtualView.inViewportIndics;
×
907
    }
908

909
    private diffVirtualViewport(virtualView: VirtualViewResult, stage: 'first' | 'second' | 'onChange' = 'first') {
×
910
        if (!this.inViewportChildren.length) {
×
911
            if (isDebug) {
×
912
                debugLog('log', 'diffVirtualViewport', stage, 'empty inViewportChildren', virtualView.inViewportIndics);
×
913
            }
914
            return {
×
915
                isDifferent: true,
916
                changedIndexesOfTop: [],
917
                changedIndexesOfBottom: []
918
            };
919
        }
920
        const oldIndexesInViewport = [...this.inViewportIndics];
×
921
        const newIndexesInViewport = [...virtualView.inViewportIndics];
×
922
        const firstNewIndex = newIndexesInViewport[0];
×
923
        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
×
924
        const firstOldIndex = oldIndexesInViewport[0];
×
925
        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
×
926
        const isSameViewport =
NEW
927
            oldIndexesInViewport.length === newIndexesInViewport.length &&
×
NEW
928
            oldIndexesInViewport.every((index, i) => index === newIndexesInViewport[i]);
×
NEW
929
        if (firstNewIndex === firstOldIndex && lastNewIndex === lastOldIndex) {
×
NEW
930
            return {
×
931
                isDifferent: !isSameViewport,
932
                changedIndexesOfTop: [],
933
                changedIndexesOfBottom: []
934
            };
935
        }
936
        if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
×
937
            const changedIndexesOfTop = [];
×
938
            const changedIndexesOfBottom = [];
×
939
            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
×
940
            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
×
941
            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
×
942
            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
×
943
            if (needRemoveOnTop || needAddOnBottom) {
×
944
                // 向下
945
                for (let index = 0; index < oldIndexesInViewport.length; index++) {
×
946
                    const element = oldIndexesInViewport[index];
×
947
                    if (!newIndexesInViewport.includes(element)) {
×
948
                        changedIndexesOfTop.push(element);
×
949
                    } else {
950
                        break;
×
951
                    }
952
                }
953
                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
×
954
                    const element = newIndexesInViewport[index];
×
955
                    if (!oldIndexesInViewport.includes(element)) {
×
956
                        changedIndexesOfBottom.push(element);
×
957
                    } else {
958
                        break;
×
959
                    }
960
                }
961
            } else if (needAddOnTop || needRemoveOnBottom) {
×
962
                // 向上
963
                for (let index = 0; index < newIndexesInViewport.length; index++) {
×
964
                    const element = newIndexesInViewport[index];
×
965
                    if (!oldIndexesInViewport.includes(element)) {
×
966
                        changedIndexesOfTop.push(element);
×
967
                    } else {
968
                        break;
×
969
                    }
970
                }
971
                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
×
972
                    const element = oldIndexesInViewport[index];
×
973
                    if (!newIndexesInViewport.includes(element)) {
×
974
                        changedIndexesOfBottom.push(element);
×
975
                    } else {
976
                        break;
×
977
                    }
978
                }
979
            }
980
            if (isDebug) {
×
981
                debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
×
982
                debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
×
983
                debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
×
984
                debugLog(
×
985
                    'log',
986
                    'changedIndexesOfTop:',
987
                    needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-',
×
988
                    changedIndexesOfTop,
989
                    changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index] as Element, 0))
×
990
                );
991
                debugLog(
×
992
                    'log',
993
                    'changedIndexesOfBottom:',
994
                    needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+',
×
995
                    changedIndexesOfBottom,
996
                    changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index] as Element, 0))
×
997
                );
998
                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
×
999
                const needBottom = virtualView.heights
×
1000
                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
1001
                    .reduce((acc, height) => acc + height, 0);
×
1002
                debugLog(
×
1003
                    'log',
1004
                    needTop - parseFloat(this.virtualTopHeightElement.style.height),
1005
                    'newTopHeight:',
1006
                    needTop,
1007
                    'prevTopHeight:',
1008
                    parseFloat(this.virtualTopHeightElement.style.height)
1009
                );
1010
                debugLog(
×
1011
                    'log',
1012
                    'newBottomHeight:',
1013
                    needBottom,
1014
                    'prevBottomHeight:',
1015
                    parseFloat(this.virtualBottomHeightElement.style.height)
1016
                );
1017
                debugLog('warn', '=========== Dividing line ===========');
×
1018
            }
1019
            return {
×
1020
                isDifferent: true,
1021
                needRemoveOnTop,
1022
                needAddOnTop,
1023
                needRemoveOnBottom,
1024
                needAddOnBottom,
1025
                changedIndexesOfTop,
1026
                changedIndexesOfBottom
1027
            };
1028
        }
1029
        return {
×
1030
            isDifferent: false,
1031
            changedIndexesOfTop: [],
1032
            changedIndexesOfBottom: []
1033
        };
1034
    }
1035

1036
    //#region event proxy
1037
    private addEventListener(eventName: string, listener: EventListener, target: HTMLElement | Document = this.elementRef.nativeElement) {
460✔
1038
        this.manualListeners.push(
483✔
1039
            this.renderer2.listen(target, eventName, (event: Event) => {
1040
                const beforeInputEvent = extractBeforeInputEvent(event.type, null, event, event.target);
5✔
1041
                if (beforeInputEvent) {
5!
1042
                    this.onFallbackBeforeInput(beforeInputEvent);
×
1043
                }
1044
                listener(event);
5✔
1045
            })
1046
        );
1047
    }
1048

1049
    private toSlateSelection() {
1050
        if ((!this.isComposing || IS_ANDROID) && !this.isUpdatingSelection && !this.isDraggingInternally) {
2✔
1051
            try {
1✔
1052
                const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
1✔
1053
                const { activeElement } = root;
1✔
1054
                const el = AngularEditor.toDOMNode(this.editor, this.editor);
1✔
1055
                const domSelection = (root as Document).getSelection();
1✔
1056

1057
                if (activeElement === el) {
1!
1058
                    this.latestElement = activeElement;
1✔
1059
                    IS_FOCUSED.set(this.editor, true);
1✔
1060
                } else {
1061
                    IS_FOCUSED.delete(this.editor);
×
1062
                }
1063

1064
                if (!domSelection) {
1!
1065
                    return Transforms.deselect(this.editor);
×
1066
                }
1067

1068
                const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
1✔
1069
                const hasDomSelectionInEditor =
1070
                    editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode);
1✔
1071
                if (!hasDomSelectionInEditor) {
1!
1072
                    Transforms.deselect(this.editor);
×
1073
                    return;
×
1074
                }
1075

1076
                // try to get the selection directly, because some terrible case can be normalize for normalizeDOMPoint
1077
                // for example, double-click the last cell of the table to select a non-editable DOM
1078
                const range = AngularEditor.toSlateRange(this.editor, domSelection, { exactMatch: false, suppressThrow: true });
1✔
1079
                if (range) {
1✔
1080
                    if (this.editor.selection && Range.equals(range, this.editor.selection) && !hasStringTarget(domSelection)) {
1!
1081
                        if (!isTargetInsideVoid(this.editor, activeElement)) {
×
1082
                            // force adjust DOMSelection
1083
                            this.toNativeSelection(false);
×
1084
                        }
1085
                    } else {
1086
                        Transforms.select(this.editor, range);
1✔
1087
                    }
1088
                }
1089
            } catch (error) {
1090
                this.editor.onError({
×
1091
                    code: SlateErrorCode.ToSlateSelectionError,
1092
                    nativeError: error
1093
                });
1094
            }
1095
        }
1096
    }
1097

1098
    private onDOMBeforeInput(
1099
        event: Event & {
1100
            inputType: string;
1101
            isComposing: boolean;
1102
            data: string | null;
1103
            dataTransfer: DataTransfer | null;
1104
            getTargetRanges(): DOMStaticRange[];
1105
        }
1106
    ) {
1107
        const editor = this.editor;
×
1108
        const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
×
1109
        const { activeElement } = root;
×
1110
        const { selection } = editor;
×
1111
        const { inputType: type } = event;
×
1112
        const data = event.dataTransfer || event.data || undefined;
×
1113
        if (IS_ANDROID) {
×
1114
            let targetRange: Range | null = null;
×
1115
            let [nativeTargetRange] = event.getTargetRanges();
×
1116
            if (nativeTargetRange) {
×
1117
                targetRange = AngularEditor.toSlateRange(editor, nativeTargetRange, { exactMatch: false, suppressThrow: false });
×
1118
            }
1119
            // COMPAT: SelectionChange event is fired after the action is performed, so we
1120
            // have to manually get the selection here to ensure it's up-to-date.
1121
            const window = AngularEditor.getWindow(editor);
×
1122
            const domSelection = window.getSelection();
×
1123
            if (!targetRange && domSelection) {
×
1124
                targetRange = AngularEditor.toSlateRange(editor, domSelection, { exactMatch: false, suppressThrow: false });
×
1125
            }
1126
            targetRange = targetRange ?? editor.selection;
×
1127
            if (type === 'insertCompositionText') {
×
1128
                if (data && data.toString().includes('\n')) {
×
1129
                    restoreDom(editor, () => {
×
1130
                        Editor.insertBreak(editor);
×
1131
                    });
1132
                } else {
1133
                    if (targetRange) {
×
1134
                        if (data) {
×
1135
                            restoreDom(editor, () => {
×
1136
                                Transforms.insertText(editor, data.toString(), { at: targetRange });
×
1137
                            });
1138
                        } else {
1139
                            restoreDom(editor, () => {
×
1140
                                Transforms.delete(editor, { at: targetRange });
×
1141
                            });
1142
                        }
1143
                    }
1144
                }
1145
                return;
×
1146
            }
1147
            if (type === 'deleteContentBackward') {
×
1148
                // gboard can not prevent default action, so must use restoreDom,
1149
                // sougou Keyboard can prevent default action(only in Chinese input mode).
1150
                // In order to avoid weird action in Sougou Keyboard, use resotreDom only range's isCollapsed is false (recognize gboard)
1151
                if (!Range.isCollapsed(targetRange)) {
×
1152
                    restoreDom(editor, () => {
×
1153
                        Transforms.delete(editor, { at: targetRange });
×
1154
                    });
1155
                    return;
×
1156
                }
1157
            }
1158
            if (type === 'insertText') {
×
1159
                restoreDom(editor, () => {
×
1160
                    if (typeof data === 'string') {
×
1161
                        Editor.insertText(editor, data);
×
1162
                    }
1163
                });
1164
                return;
×
1165
            }
1166
        }
1167
        if (
×
1168
            !this.readonly &&
×
1169
            AngularEditor.hasEditableTarget(editor, event.target) &&
1170
            !isTargetInsideVoid(editor, activeElement) &&
1171
            !this.isDOMEventHandled(event, this.beforeInput)
1172
        ) {
1173
            try {
×
1174
                event.preventDefault();
×
1175

1176
                // COMPAT: If the selection is expanded, even if the command seems like
1177
                // a delete forward/backward command it should delete the selection.
1178
                if (selection && Range.isExpanded(selection) && type.startsWith('delete')) {
×
1179
                    const direction = type.endsWith('Backward') ? 'backward' : 'forward';
×
1180
                    Editor.deleteFragment(editor, { direction });
×
1181
                    return;
×
1182
                }
1183

1184
                switch (type) {
×
1185
                    case 'deleteByComposition':
1186
                    case 'deleteByCut':
1187
                    case 'deleteByDrag': {
1188
                        Editor.deleteFragment(editor);
×
1189
                        break;
×
1190
                    }
1191

1192
                    case 'deleteContent':
1193
                    case 'deleteContentForward': {
1194
                        Editor.deleteForward(editor);
×
1195
                        break;
×
1196
                    }
1197

1198
                    case 'deleteContentBackward': {
1199
                        Editor.deleteBackward(editor);
×
1200
                        break;
×
1201
                    }
1202

1203
                    case 'deleteEntireSoftLine': {
1204
                        Editor.deleteBackward(editor, { unit: 'line' });
×
1205
                        Editor.deleteForward(editor, { unit: 'line' });
×
1206
                        break;
×
1207
                    }
1208

1209
                    case 'deleteHardLineBackward': {
1210
                        Editor.deleteBackward(editor, { unit: 'block' });
×
1211
                        break;
×
1212
                    }
1213

1214
                    case 'deleteSoftLineBackward': {
1215
                        Editor.deleteBackward(editor, { unit: 'line' });
×
1216
                        break;
×
1217
                    }
1218

1219
                    case 'deleteHardLineForward': {
1220
                        Editor.deleteForward(editor, { unit: 'block' });
×
1221
                        break;
×
1222
                    }
1223

1224
                    case 'deleteSoftLineForward': {
1225
                        Editor.deleteForward(editor, { unit: 'line' });
×
1226
                        break;
×
1227
                    }
1228

1229
                    case 'deleteWordBackward': {
1230
                        Editor.deleteBackward(editor, { unit: 'word' });
×
1231
                        break;
×
1232
                    }
1233

1234
                    case 'deleteWordForward': {
1235
                        Editor.deleteForward(editor, { unit: 'word' });
×
1236
                        break;
×
1237
                    }
1238

1239
                    case 'insertLineBreak':
1240
                    case 'insertParagraph': {
1241
                        Editor.insertBreak(editor);
×
1242
                        break;
×
1243
                    }
1244

1245
                    case 'insertFromComposition': {
1246
                        // COMPAT: in safari, `compositionend` event is dispatched after
1247
                        // the beforeinput event with the inputType "insertFromComposition" has been dispatched.
1248
                        // https://www.w3.org/TR/input-events-2/
1249
                        // so the following code is the right logic
1250
                        // because DOM selection in sync will be exec before `compositionend` event
1251
                        // isComposing is true will prevent DOM selection being update correctly.
1252
                        this.isComposing = false;
×
1253
                        preventInsertFromComposition(event, this.editor);
×
1254
                    }
1255
                    case 'insertFromDrop':
1256
                    case 'insertFromPaste':
1257
                    case 'insertFromYank':
1258
                    case 'insertReplacementText':
1259
                    case 'insertText': {
1260
                        // use a weak comparison instead of 'instanceof' to allow
1261
                        // programmatic access of paste events coming from external windows
1262
                        // like cypress where cy.window does not work realibly
1263
                        if (data?.constructor.name === 'DataTransfer') {
×
1264
                            AngularEditor.insertData(editor, data as DataTransfer);
×
1265
                        } else if (typeof data === 'string') {
×
1266
                            Editor.insertText(editor, data);
×
1267
                        }
1268
                        break;
×
1269
                    }
1270
                }
1271
            } catch (error) {
1272
                this.editor.onError({
×
1273
                    code: SlateErrorCode.OnDOMBeforeInputError,
1274
                    nativeError: error
1275
                });
1276
            }
1277
        }
1278
    }
1279

1280
    private onDOMBlur(event: FocusEvent) {
1281
        if (
×
1282
            this.readonly ||
×
1283
            this.isUpdatingSelection ||
1284
            !AngularEditor.hasEditableTarget(this.editor, event.target) ||
1285
            this.isDOMEventHandled(event, this.blur)
1286
        ) {
1287
            return;
×
1288
        }
1289

1290
        const window = AngularEditor.getWindow(this.editor);
×
1291

1292
        // COMPAT: If the current `activeElement` is still the previous
1293
        // one, this is due to the window being blurred when the tab
1294
        // itself becomes unfocused, so we want to abort early to allow to
1295
        // editor to stay focused when the tab becomes focused again.
1296
        const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
×
1297
        if (this.latestElement === root.activeElement) {
×
1298
            return;
×
1299
        }
1300

1301
        const { relatedTarget } = event;
×
1302
        const el = AngularEditor.toDOMNode(this.editor, this.editor);
×
1303

1304
        // COMPAT: The event should be ignored if the focus is returning
1305
        // to the editor from an embedded editable element (eg. an <input>
1306
        // element inside a void node).
1307
        if (relatedTarget === el) {
×
1308
            return;
×
1309
        }
1310

1311
        // COMPAT: The event should be ignored if the focus is moving from
1312
        // the editor to inside a void node's spacer element.
1313
        if (isDOMElement(relatedTarget) && relatedTarget.hasAttribute('data-slate-spacer')) {
×
1314
            return;
×
1315
        }
1316

1317
        // COMPAT: The event should be ignored if the focus is moving to a
1318
        // non- editable section of an element that isn't a void node (eg.
1319
        // a list item of the check list example).
1320
        if (relatedTarget != null && isDOMNode(relatedTarget) && AngularEditor.hasDOMNode(this.editor, relatedTarget)) {
×
1321
            const node = AngularEditor.toSlateNode(this.editor, relatedTarget);
×
1322

1323
            if (Element.isElement(node) && !this.editor.isVoid(node)) {
×
1324
                return;
×
1325
            }
1326
        }
1327

1328
        IS_FOCUSED.delete(this.editor);
×
1329
    }
1330

1331
    private onDOMClick(event: MouseEvent) {
1332
        if (
×
1333
            !this.readonly &&
×
1334
            AngularEditor.hasTarget(this.editor, event.target) &&
1335
            !this.isDOMEventHandled(event, this.click) &&
1336
            isDOMNode(event.target)
1337
        ) {
1338
            const node = AngularEditor.toSlateNode(this.editor, event.target);
×
1339
            const path = AngularEditor.findPath(this.editor, node);
×
1340
            const start = Editor.start(this.editor, path);
×
1341
            const end = Editor.end(this.editor, path);
×
1342

1343
            const startVoid = Editor.void(this.editor, { at: start });
×
1344
            const endVoid = Editor.void(this.editor, { at: end });
×
1345

1346
            if (event.detail === TRIPLE_CLICK && path.length >= 1) {
×
1347
                let blockPath = path;
×
1348
                if (!(Element.isElement(node) && Editor.isBlock(this.editor, node))) {
×
1349
                    const block = Editor.above(this.editor, {
×
1350
                        match: n => Element.isElement(n) && Editor.isBlock(this.editor, n),
×
1351
                        at: path
1352
                    });
1353

1354
                    blockPath = block?.[1] ?? path.slice(0, 1);
×
1355
                }
1356

1357
                const range = Editor.range(this.editor, blockPath);
×
1358
                Transforms.select(this.editor, range);
×
1359
                return;
×
1360
            }
1361

1362
            if (
×
1363
                startVoid &&
×
1364
                endVoid &&
1365
                Path.equals(startVoid[1], endVoid[1]) &&
1366
                !(AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor))
×
1367
            ) {
1368
                const range = Editor.range(this.editor, start);
×
1369
                Transforms.select(this.editor, range);
×
1370
            }
1371
        }
1372
    }
1373

1374
    private onDOMCompositionStart(event: CompositionEvent) {
1375
        const { selection } = this.editor;
1✔
1376
        if (selection) {
1!
1377
            // solve the problem of cross node Chinese input
1378
            if (Range.isExpanded(selection)) {
×
1379
                Editor.deleteFragment(this.editor);
×
1380
                this.forceRender();
×
1381
            }
1382
        }
1383
        if (AngularEditor.hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
1✔
1384
            this.isComposing = true;
1✔
1385
        }
1386
        this.render();
1✔
1387
    }
1388

1389
    private onDOMCompositionUpdate(event: CompositionEvent) {
1390
        this.isDOMEventHandled(event, this.compositionUpdate);
×
1391
    }
1392

1393
    private onDOMCompositionEnd(event: CompositionEvent) {
1394
        if (!event.data && !Range.isCollapsed(this.editor.selection)) {
×
1395
            Transforms.delete(this.editor);
×
1396
        }
1397
        if (AngularEditor.hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionEnd)) {
×
1398
            // COMPAT: In Chrome/Firefox, `beforeinput` events for compositions
1399
            // aren't correct and never fire the "insertFromComposition"
1400
            // type that we need. So instead, insert whenever a composition
1401
            // ends since it will already have been committed to the DOM.
1402
            if (this.isComposing === true && !IS_SAFARI && !IS_ANDROID && event.data) {
×
1403
                preventInsertFromComposition(event, this.editor);
×
1404
                Editor.insertText(this.editor, event.data);
×
1405
            }
1406

1407
            // COMPAT: In Firefox 87.0 CompositionEnd fire twice
1408
            // so we need avoid repeat isnertText by isComposing === true,
1409
            this.isComposing = false;
×
1410
        }
1411
        this.render();
×
1412
    }
1413

1414
    private onDOMCopy(event: ClipboardEvent) {
1415
        const window = AngularEditor.getWindow(this.editor);
×
1416
        const isOutsideSlate = !hasStringTarget(window.getSelection()) && isTargetInsideVoid(this.editor, event.target);
×
1417
        if (!isOutsideSlate && AngularEditor.hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.copy)) {
×
1418
            event.preventDefault();
×
1419
            AngularEditor.setFragmentData(this.editor, event.clipboardData, 'copy');
×
1420
        }
1421
    }
1422

1423
    private onDOMCut(event: ClipboardEvent) {
1424
        if (!this.readonly && AngularEditor.hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.cut)) {
×
1425
            event.preventDefault();
×
1426
            AngularEditor.setFragmentData(this.editor, event.clipboardData, 'cut');
×
1427
            const { selection } = this.editor;
×
1428

1429
            if (selection) {
×
1430
                AngularEditor.deleteCutData(this.editor);
×
1431
            }
1432
        }
1433
    }
1434

1435
    private onDOMDragOver(event: DragEvent) {
1436
        if (AngularEditor.hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragOver)) {
×
1437
            // Only when the target is void, call `preventDefault` to signal
1438
            // that drops are allowed. Editable content is droppable by
1439
            // default, and calling `preventDefault` hides the cursor.
1440
            const node = AngularEditor.toSlateNode(this.editor, event.target);
×
1441

1442
            if (Element.isElement(node) && Editor.isVoid(this.editor, node)) {
×
1443
                event.preventDefault();
×
1444
            }
1445
        }
1446
    }
1447

1448
    private onDOMDragStart(event: DragEvent) {
1449
        if (!this.readonly && AngularEditor.hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
×
1450
            const node = AngularEditor.toSlateNode(this.editor, event.target);
×
1451
            const path = AngularEditor.findPath(this.editor, node);
×
1452
            const voidMatch =
1453
                Element.isElement(node) && (Editor.isVoid(this.editor, node) || Editor.void(this.editor, { at: path, voids: true }));
×
1454

1455
            // If starting a drag on a void node, make sure it is selected
1456
            // so that it shows up in the selection's fragment.
1457
            if (voidMatch) {
×
1458
                const range = Editor.range(this.editor, path);
×
1459
                Transforms.select(this.editor, range);
×
1460
            }
1461

1462
            this.isDraggingInternally = true;
×
1463

1464
            AngularEditor.setFragmentData(this.editor, event.dataTransfer, 'drag');
×
1465
        }
1466
    }
1467

1468
    private onDOMDrop(event: DragEvent) {
1469
        const editor = this.editor;
×
1470
        if (!this.readonly && AngularEditor.hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.drop)) {
×
1471
            event.preventDefault();
×
1472
            // Keep a reference to the dragged range before updating selection
1473
            const draggedRange = editor.selection;
×
1474

1475
            // Find the range where the drop happened
1476
            const range = AngularEditor.findEventRange(editor, event);
×
1477
            const data = event.dataTransfer;
×
1478

1479
            Transforms.select(editor, range);
×
1480

1481
            if (this.isDraggingInternally) {
×
1482
                if (draggedRange) {
×
1483
                    Transforms.delete(editor, {
×
1484
                        at: draggedRange
1485
                    });
1486
                }
1487

1488
                this.isDraggingInternally = false;
×
1489
            }
1490

1491
            AngularEditor.insertData(editor, data);
×
1492

1493
            // When dragging from another source into the editor, it's possible
1494
            // that the current editor does not have focus.
1495
            if (!AngularEditor.isFocused(editor)) {
×
1496
                AngularEditor.focus(editor);
×
1497
            }
1498
        }
1499
    }
1500

1501
    private onDOMDragEnd(event: DragEvent) {
1502
        if (
×
1503
            !this.readonly &&
×
1504
            this.isDraggingInternally &&
1505
            AngularEditor.hasTarget(this.editor, event.target) &&
1506
            !this.isDOMEventHandled(event, this.dragEnd)
1507
        ) {
1508
            this.isDraggingInternally = false;
×
1509
        }
1510
    }
1511

1512
    private onDOMFocus(event: Event) {
1513
        if (
2✔
1514
            !this.readonly &&
8✔
1515
            !this.isUpdatingSelection &&
1516
            AngularEditor.hasEditableTarget(this.editor, event.target) &&
1517
            !this.isDOMEventHandled(event, this.focus)
1518
        ) {
1519
            const el = AngularEditor.toDOMNode(this.editor, this.editor);
2✔
1520
            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
2✔
1521
            this.latestElement = root.activeElement;
2✔
1522

1523
            // COMPAT: If the editor has nested editable elements, the focus
1524
            // can go to them. In Firefox, this must be prevented because it
1525
            // results in issues with keyboard navigation. (2017/03/30)
1526
            if (IS_FIREFOX && event.target !== el) {
2!
1527
                el.focus();
×
1528
                return;
×
1529
            }
1530

1531
            IS_FOCUSED.set(this.editor, true);
2✔
1532
        }
1533
    }
1534

1535
    private onDOMKeydown(event: KeyboardEvent) {
1536
        const editor = this.editor;
×
1537
        const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
×
1538
        const { activeElement } = root;
×
1539
        if (
×
1540
            !this.readonly &&
×
1541
            AngularEditor.hasEditableTarget(editor, event.target) &&
1542
            !isTargetInsideVoid(editor, activeElement) && // stop fire keydown handle when focus void node
1543
            !this.isComposing &&
1544
            !this.isDOMEventHandled(event, this.keydown)
1545
        ) {
1546
            const nativeEvent = event;
×
1547
            const { selection } = editor;
×
1548

1549
            const element = editor.children[selection !== null ? selection.focus.path[0] : 0];
×
1550
            const isRTL = direction(Node.string(element)) === 'rtl';
×
1551

1552
            try {
×
1553
                // COMPAT: Since we prevent the default behavior on
1554
                // `beforeinput` events, the browser doesn't think there's ever
1555
                // any history stack to undo or redo, so we have to manage these
1556
                // hotkeys ourselves. (2019/11/06)
1557
                if (Hotkeys.isRedo(nativeEvent)) {
×
1558
                    event.preventDefault();
×
1559

1560
                    if (HistoryEditor.isHistoryEditor(editor)) {
×
1561
                        editor.redo();
×
1562
                    }
1563

1564
                    return;
×
1565
                }
1566

1567
                if (Hotkeys.isUndo(nativeEvent)) {
×
1568
                    event.preventDefault();
×
1569

1570
                    if (HistoryEditor.isHistoryEditor(editor)) {
×
1571
                        editor.undo();
×
1572
                    }
1573

1574
                    return;
×
1575
                }
1576

1577
                // COMPAT: Certain browsers don't handle the selection updates
1578
                // properly. In Chrome, the selection isn't properly extended.
1579
                // And in Firefox, the selection isn't properly collapsed.
1580
                // (2017/10/17)
1581
                if (Hotkeys.isMoveLineBackward(nativeEvent)) {
×
1582
                    event.preventDefault();
×
1583
                    Transforms.move(editor, { unit: 'line', reverse: true });
×
1584
                    return;
×
1585
                }
1586

1587
                if (Hotkeys.isMoveLineForward(nativeEvent)) {
×
1588
                    event.preventDefault();
×
1589
                    Transforms.move(editor, { unit: 'line' });
×
1590
                    return;
×
1591
                }
1592

1593
                if (Hotkeys.isExtendLineBackward(nativeEvent)) {
×
1594
                    event.preventDefault();
×
1595
                    Transforms.move(editor, {
×
1596
                        unit: 'line',
1597
                        edge: 'focus',
1598
                        reverse: true
1599
                    });
1600
                    return;
×
1601
                }
1602

1603
                if (Hotkeys.isExtendLineForward(nativeEvent)) {
×
1604
                    event.preventDefault();
×
1605
                    Transforms.move(editor, { unit: 'line', edge: 'focus' });
×
1606
                    return;
×
1607
                }
1608

1609
                // COMPAT: If a void node is selected, or a zero-width text node
1610
                // adjacent to an inline is selected, we need to handle these
1611
                // hotkeys manually because browsers won't be able to skip over
1612
                // the void node with the zero-width space not being an empty
1613
                // string.
1614
                if (Hotkeys.isMoveBackward(nativeEvent)) {
×
1615
                    event.preventDefault();
×
1616

1617
                    if (selection && Range.isCollapsed(selection)) {
×
1618
                        Transforms.move(editor, { reverse: !isRTL });
×
1619
                    } else {
1620
                        Transforms.collapse(editor, { edge: 'start' });
×
1621
                    }
1622

1623
                    return;
×
1624
                }
1625

1626
                if (Hotkeys.isMoveForward(nativeEvent)) {
×
1627
                    event.preventDefault();
×
1628
                    if (selection && Range.isCollapsed(selection)) {
×
1629
                        Transforms.move(editor, { reverse: isRTL });
×
1630
                    } else {
1631
                        Transforms.collapse(editor, { edge: 'end' });
×
1632
                    }
1633

1634
                    return;
×
1635
                }
1636

1637
                if (Hotkeys.isMoveWordBackward(nativeEvent)) {
×
1638
                    event.preventDefault();
×
1639

1640
                    if (selection && Range.isExpanded(selection)) {
×
1641
                        Transforms.collapse(editor, { edge: 'focus' });
×
1642
                    }
1643

1644
                    Transforms.move(editor, { unit: 'word', reverse: !isRTL });
×
1645
                    return;
×
1646
                }
1647

1648
                if (Hotkeys.isMoveWordForward(nativeEvent)) {
×
1649
                    event.preventDefault();
×
1650

1651
                    if (selection && Range.isExpanded(selection)) {
×
1652
                        Transforms.collapse(editor, { edge: 'focus' });
×
1653
                    }
1654

1655
                    Transforms.move(editor, { unit: 'word', reverse: isRTL });
×
1656
                    return;
×
1657
                }
1658

1659
                if (isKeyHotkey('mod+a', event)) {
×
1660
                    this.editor.selectAll();
×
1661
                    event.preventDefault();
×
1662
                    return;
×
1663
                }
1664

1665
                // COMPAT: Certain browsers don't support the `beforeinput` event, so we
1666
                // fall back to guessing at the input intention for hotkeys.
1667
                // COMPAT: In iOS, some of these hotkeys are handled in the
1668
                if (!HAS_BEFORE_INPUT_SUPPORT) {
×
1669
                    // We don't have a core behavior for these, but they change the
1670
                    // DOM if we don't prevent them, so we have to.
1671
                    if (Hotkeys.isBold(nativeEvent) || Hotkeys.isItalic(nativeEvent) || Hotkeys.isTransposeCharacter(nativeEvent)) {
×
1672
                        event.preventDefault();
×
1673
                        return;
×
1674
                    }
1675

1676
                    if (Hotkeys.isSplitBlock(nativeEvent)) {
×
1677
                        event.preventDefault();
×
1678
                        Editor.insertBreak(editor);
×
1679
                        return;
×
1680
                    }
1681

1682
                    if (Hotkeys.isDeleteBackward(nativeEvent)) {
×
1683
                        event.preventDefault();
×
1684

1685
                        if (selection && Range.isExpanded(selection)) {
×
1686
                            Editor.deleteFragment(editor, {
×
1687
                                direction: 'backward'
1688
                            });
1689
                        } else {
1690
                            Editor.deleteBackward(editor);
×
1691
                        }
1692

1693
                        return;
×
1694
                    }
1695

1696
                    if (Hotkeys.isDeleteForward(nativeEvent)) {
×
1697
                        event.preventDefault();
×
1698

1699
                        if (selection && Range.isExpanded(selection)) {
×
1700
                            Editor.deleteFragment(editor, {
×
1701
                                direction: 'forward'
1702
                            });
1703
                        } else {
1704
                            Editor.deleteForward(editor);
×
1705
                        }
1706

1707
                        return;
×
1708
                    }
1709

1710
                    if (Hotkeys.isDeleteLineBackward(nativeEvent)) {
×
1711
                        event.preventDefault();
×
1712

1713
                        if (selection && Range.isExpanded(selection)) {
×
1714
                            Editor.deleteFragment(editor, {
×
1715
                                direction: 'backward'
1716
                            });
1717
                        } else {
1718
                            Editor.deleteBackward(editor, { unit: 'line' });
×
1719
                        }
1720

1721
                        return;
×
1722
                    }
1723

1724
                    if (Hotkeys.isDeleteLineForward(nativeEvent)) {
×
1725
                        event.preventDefault();
×
1726

1727
                        if (selection && Range.isExpanded(selection)) {
×
1728
                            Editor.deleteFragment(editor, {
×
1729
                                direction: 'forward'
1730
                            });
1731
                        } else {
1732
                            Editor.deleteForward(editor, { unit: 'line' });
×
1733
                        }
1734

1735
                        return;
×
1736
                    }
1737

1738
                    if (Hotkeys.isDeleteWordBackward(nativeEvent)) {
×
1739
                        event.preventDefault();
×
1740

1741
                        if (selection && Range.isExpanded(selection)) {
×
1742
                            Editor.deleteFragment(editor, {
×
1743
                                direction: 'backward'
1744
                            });
1745
                        } else {
1746
                            Editor.deleteBackward(editor, { unit: 'word' });
×
1747
                        }
1748

1749
                        return;
×
1750
                    }
1751

1752
                    if (Hotkeys.isDeleteWordForward(nativeEvent)) {
×
1753
                        event.preventDefault();
×
1754

1755
                        if (selection && Range.isExpanded(selection)) {
×
1756
                            Editor.deleteFragment(editor, {
×
1757
                                direction: 'forward'
1758
                            });
1759
                        } else {
1760
                            Editor.deleteForward(editor, { unit: 'word' });
×
1761
                        }
1762

1763
                        return;
×
1764
                    }
1765
                } else {
1766
                    if (IS_CHROME || IS_SAFARI) {
×
1767
                        // COMPAT: Chrome and Safari support `beforeinput` event but do not fire
1768
                        // an event when deleting backwards in a selected void inline node
1769
                        if (
×
1770
                            selection &&
×
1771
                            (Hotkeys.isDeleteBackward(nativeEvent) || Hotkeys.isDeleteForward(nativeEvent)) &&
1772
                            Range.isCollapsed(selection)
1773
                        ) {
1774
                            const currentNode = Node.parent(editor, selection.anchor.path);
×
1775
                            if (
×
1776
                                Element.isElement(currentNode) &&
×
1777
                                Editor.isVoid(editor, currentNode) &&
1778
                                (Editor.isInline(editor, currentNode) || Editor.isBlock(editor, currentNode))
1779
                            ) {
1780
                                event.preventDefault();
×
1781
                                Editor.deleteBackward(editor, {
×
1782
                                    unit: 'block'
1783
                                });
1784
                                return;
×
1785
                            }
1786
                        }
1787
                    }
1788
                }
1789
            } catch (error) {
1790
                this.editor.onError({
×
1791
                    code: SlateErrorCode.OnDOMKeydownError,
1792
                    nativeError: error
1793
                });
1794
            }
1795
        }
1796
    }
1797

1798
    private onDOMPaste(event: ClipboardEvent) {
1799
        // COMPAT: Certain browsers don't support the `beforeinput` event, so we
1800
        // fall back to React's `onPaste` here instead.
1801
        // COMPAT: Firefox, Chrome and Safari are not emitting `beforeinput` events
1802
        // when "paste without formatting" option is used.
1803
        // This unfortunately needs to be handled with paste events instead.
1804
        if (
×
1805
            !this.isDOMEventHandled(event, this.paste) &&
×
1806
            (!HAS_BEFORE_INPUT_SUPPORT || isPlainTextOnlyPaste(event) || forceOnDOMPaste) &&
1807
            !this.readonly &&
1808
            AngularEditor.hasEditableTarget(this.editor, event.target)
1809
        ) {
1810
            event.preventDefault();
×
1811
            AngularEditor.insertData(this.editor, event.clipboardData);
×
1812
        }
1813
    }
1814

1815
    private onFallbackBeforeInput(event: BeforeInputEvent) {
1816
        // COMPAT: Certain browsers don't support the `beforeinput` event, so we
1817
        // fall back to React's leaky polyfill instead just for it. It
1818
        // only works for the `insertText` input type.
1819
        if (
×
1820
            !HAS_BEFORE_INPUT_SUPPORT &&
×
1821
            !this.readonly &&
1822
            !this.isDOMEventHandled(event.nativeEvent, this.beforeInput) &&
1823
            AngularEditor.hasEditableTarget(this.editor, event.nativeEvent.target)
1824
        ) {
1825
            event.nativeEvent.preventDefault();
×
1826
            try {
×
1827
                const text = event.data;
×
1828
                if (!Range.isCollapsed(this.editor.selection)) {
×
1829
                    Editor.deleteFragment(this.editor);
×
1830
                }
1831
                // just handle Non-IME input
1832
                if (!this.isComposing) {
×
1833
                    Editor.insertText(this.editor, text);
×
1834
                }
1835
            } catch (error) {
1836
                this.editor.onError({
×
1837
                    code: SlateErrorCode.ToNativeSelectionError,
1838
                    nativeError: error
1839
                });
1840
            }
1841
        }
1842
    }
1843

1844
    private isDOMEventHandled(event: Event, handler?: (event: Event) => void) {
1845
        if (!handler) {
3✔
1846
            return false;
3✔
1847
        }
1848
        handler(event);
×
1849
        return event.defaultPrevented;
×
1850
    }
1851
    //#endregion
1852

1853
    ngOnDestroy() {
1854
        this.editorResizeObserver?.disconnect();
23✔
1855
        NODE_TO_ELEMENT.delete(this.editor);
23✔
1856
        this.manualListeners.forEach(manualListener => {
23✔
1857
            manualListener();
483✔
1858
        });
1859
        this.destroy$.complete();
23✔
1860
        EDITOR_TO_ON_CHANGE.delete(this.editor);
23✔
1861
    }
1862
}
1863

1864
export const defaultScrollSelectionIntoView = (editor: AngularEditor, domRange: DOMRange) => {
1✔
1865
    // This was affecting the selection of multiple blocks and dragging behavior,
1866
    // so enabled only if the selection has been collapsed.
1867
    if (domRange.getBoundingClientRect && (!editor.selection || (editor.selection && Range.isCollapsed(editor.selection)))) {
×
1868
        const leafEl = domRange.startContainer.parentElement!;
×
1869

1870
        // COMPAT: In Chrome, domRange.getBoundingClientRect() can return zero dimensions for valid ranges (e.g. line breaks).
1871
        // When this happens, do not scroll like most editors do.
1872
        const domRect = domRange.getBoundingClientRect();
×
1873
        const isZeroDimensionRect = domRect.width === 0 && domRect.height === 0 && domRect.x === 0 && domRect.y === 0;
×
1874

1875
        if (isZeroDimensionRect) {
×
1876
            const leafRect = leafEl.getBoundingClientRect();
×
1877
            const leafHasDimensions = leafRect.width > 0 || leafRect.height > 0;
×
1878

1879
            if (leafHasDimensions) {
×
1880
                return;
×
1881
            }
1882
        }
1883

1884
        leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
×
1885
        scrollIntoView(leafEl, {
×
1886
            scrollMode: 'if-needed'
1887
        });
1888
        delete leafEl.getBoundingClientRect;
×
1889
    }
1890
};
1891

1892
/**
1893
 * Check if the target is inside void and in the editor.
1894
 */
1895

1896
const isTargetInsideVoid = (editor: AngularEditor, target: EventTarget | null): boolean => {
1✔
1897
    let slateNode: Node | null = null;
1✔
1898
    try {
1✔
1899
        slateNode = AngularEditor.hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
1✔
1900
    } catch (error) {}
1901
    return slateNode && Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
1!
1902
};
1903

1904
const hasStringTarget = (domSelection: DOMSelection) => {
1✔
1905
    return (
2✔
1906
        (domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
4!
1907
            domSelection.anchorNode.parentElement.hasAttribute('data-slate-zero-width')) &&
1908
        (domSelection.focusNode.parentElement.hasAttribute('data-slate-string') ||
1909
            domSelection.focusNode.parentElement.hasAttribute('data-slate-zero-width'))
1910
    );
1911
};
1912

1913
/**
1914
 * remove default insert from composition
1915
 * @param text
1916
 */
1917
const preventInsertFromComposition = (event: Event, editor: AngularEditor) => {
1✔
1918
    const types = ['compositionend', 'insertFromComposition'];
×
1919
    if (!types.includes(event.type)) {
×
1920
        return;
×
1921
    }
1922
    const insertText = (event as CompositionEvent).data;
×
1923
    const window = AngularEditor.getWindow(editor);
×
1924
    const domSelection = window.getSelection();
×
1925
    // ensure text node insert composition input text
1926
    if (insertText && domSelection.anchorNode instanceof Text && domSelection.anchorNode.textContent.endsWith(insertText)) {
×
1927
        const textNode = domSelection.anchorNode;
×
1928
        textNode.splitText(textNode.length - insertText.length).remove();
×
1929
    }
1930
};
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc