slate-angular 20.2.14 → 20.2.16

package/fesm2022/slate-angular.mjs

@@ -3508,668 +3508,707 @@ class SlateEditable {
             this.addEventListener(event.name, () => { });
         });
     }
-    calculateVirtualScrollSelection(selection) {
-        if (selection) {
-            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
-            const indics = this.inViewportIndics;
-            if (indics.length > 0) {
-                const currentVisibleRange = {
-                    anchor: Editor.start(this.editor, [indics[0]]),
-                    focus: Editor.end(this.editor, [indics[indics.length - 1]])
-                };
-                const [start, end] = Range.edges(selection);
-                let forwardSelection = { anchor: start, focus: end };
-                if (!isBlockCardCursor) {
-                    forwardSelection = { anchor: start, focus: end };
-                }
-                else {
-                    forwardSelection = { anchor: { path: start.path, offset: 0 }, focus: { path: end.path, offset: 0 } };
-                }
-                const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
-                if (intersectedSelection && isBlockCardCursor) {
-                    return selection;
+    isEnabledVirtualScroll() {
+        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
+    }
+    initializeVirtualScroll() {
+        if (this.virtualScrollInitialized) {
+            return;
+        }
+        if (this.isEnabledVirtualScroll()) {
+            this.virtualScrollInitialized = true;
+            this.virtualTopHeightElement = document.createElement('div');
+            this.virtualTopHeightElement.classList.add('virtual-top-height');
+            this.virtualTopHeightElement.contentEditable = 'false';
+            this.virtualBottomHeightElement = document.createElement('div');
+            this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
+            this.virtualBottomHeightElement.contentEditable = 'false';
+            this.virtualCenterOutlet = document.createElement('div');
+            this.virtualCenterOutlet.classList.add('virtual-center-outlet');
+            this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
+            this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
+            this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
+            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.offsetWidth);
+            this.editorResizeObserver = new ResizeObserver(entries => {
+                if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
+                    editorResizeObserverRectWidth = entries[0].contentRect.width;
+                    this.keyHeightMap.clear();
+                    let target = this.virtualTopHeightElement;
+                    if (this.inViewportChildren[0]) {
+                        const firstElement = this.inViewportChildren[0];
+                        const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
+                        target = firstDomElement;
+                    }
+                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, target.offsetWidth);
+                    updatePreRenderingElementWidth(this.editor);
+                    if (isDebug) {
+                        debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));
+                    }
                 }
-                EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
-                if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
+            });
+            this.editorResizeObserver.observe(this.elementRef.nativeElement);
+            let pendingRemeasureIndics = [];
+            this.indicsOfNeedBeMeasured$
+                .pipe(tap((previousValue) => {
+                previousValue.forEach((index) => {
+                    if (!pendingRemeasureIndics.includes(index)) {
+                        pendingRemeasureIndics.push(index);
+                    }
+                });
+            }), debounceTime(500), filter(() => pendingRemeasureIndics.length > 0))
+                .subscribe(() => {
+                const changed = measureHeightByIndics(this.editor, pendingRemeasureIndics, true);
+                if (changed) {
+                    this.tryUpdateVirtualViewport();
                     if (isDebug) {
-                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
+                        debugLog('log', 'exist pendingRemeasureIndics: ', pendingRemeasureIndics, 'will try to update virtual viewport');
                     }
-                    return intersectedSelection;
                 }
-                return selection;
+                pendingRemeasureIndics = [];
+            });
+        }
+    }
+    getChangedIndics(previousValue) {
+        const remeasureIndics = [];
+        this.inViewportChildren.forEach((child, index) => {
+            if (previousValue.indexOf(child) === -1) {
+                remeasureIndics.push(this.inViewportIndics[index]);
             }
+        });
+        return remeasureIndics;
+    }
+    setVirtualSpaceHeight(topHeight, bottomHeight) {
+        if (!this.virtualScrollInitialized) {
+            return;
+        }
+        this.virtualTopHeightElement.style.height = `${topHeight}px`;
+        if (bottomHeight !== undefined) {
+            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
         }
-        EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
-        return selection;
     }
-    isSelectionInvisible(selection) {
-        const anchorIndex = selection.anchor.path[0];
-        const focusIndex = selection.focus.path[0];
-        const anchorElement = this.editor.children[anchorIndex];
-        const focusElement = this.editor.children[focusIndex];
-        return !anchorElement || !focusElement || !this.editor.isVisible(anchorElement) || !this.editor.isVisible(focusElement);
+    getActualVirtualTopHeight() {
+        if (!this.virtualScrollInitialized) {
+            return 0;
+        }
+        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    toNativeSelection(autoScroll = true) {
-        try {
-            let { selection } = this.editor;
-            if (this.isEnabledVirtualScroll()) {
-                selection = this.calculateVirtualScrollSelection(selection);
-            }
-            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
-            const { activeElement } = root;
-            const domSelection = root.getSelection();
-            if ((this.isComposing && !IS_ANDROID) || !domSelection || !AngularEditor.isFocused(this.editor)) {
-                return;
-            }
-            const hasDomSelection = domSelection.type !== 'None';
-            // If the DOM selection is properly unset, we're done.
-            if (!selection && !hasDomSelection) {
-                return;
+    handlePreRendering(visibleStates) {
+        let preRenderingCount = 0;
+        const childrenWithPreRendering = [...this.inViewportChildren];
+        const childrenWithPreRenderingIndics = [...this.inViewportIndics];
+        const firstIndex = this.inViewportIndics[0];
+        for (let index = firstIndex - 1; index >= 0; index--) {
+            const element = this.editor.children[index];
+            if (visibleStates[index]) {
+                childrenWithPreRendering.unshift(element);
+                childrenWithPreRenderingIndics.unshift(index);
+                preRenderingCount = 1;
+                break;
             }
-            // If the DOM selection is already correct, we're done.
-            // verify that the dom selection is in the editor
-            const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
-            let hasDomSelectionInEditor = false;
-            if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
-                hasDomSelectionInEditor = true;
+        }
+        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        for (let index = lastIndex + 1; index < this.editor.children.length; index++) {
+            const element = this.editor.children[index];
+            if (visibleStates[index]) {
+                childrenWithPreRendering.push(element);
+                childrenWithPreRenderingIndics.push(index);
+                break;
             }
-            // If the DOM selection is in the editor and the editor selection is already correct, we're done.
-            if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
-                const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, {
-                    exactMatch: false,
-                    suppressThrow: true
-                });
-                if (rangeFromDOMSelection && Range.equals(rangeFromDOMSelection, selection)) {
-                    return;
+        }
+        return { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics };
+    }
+    tryUpdateVirtualViewport() {
+        if (isDebug) {
+            debugLog('log', 'tryUpdateVirtualViewport');
+        }
+        const isFromScrollTo = EDITOR_TO_IS_FROM_SCROLL_TO.get(this.editor);
+        if (this.inViewportIndics.length > 0 && !isFromScrollTo) {
+            const topHeight = this.getActualVirtualTopHeight();
+            const visibleStates = this.editor.getAllVisibleStates();
+            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
+            if (topHeight !== refreshVirtualTopHeight) {
+                if (isDebug) {
+                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
                 }
-            }
-            // prevent updating native selection when active element is void element
-            if (isTargetInsideVoid(this.editor, activeElement)) {
+                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
                 return;
             }
-            // when <Editable/> is being controlled through external value
-            // then its children might just change - DOM responds to it on its own
-            // but Slate's value is not being updated through any operation
-            // and thus it doesn't transform selection on its own
-            if (selection && !AngularEditor.hasRange(this.editor, selection)) {
-                this.editor.selection = AngularEditor.toSlateRange(this.editor, domSelection, { exactMatch: false, suppressThrow: false });
-                return;
+        }
+        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
+        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
+            if (isDebug) {
+                debugLog('log', 'tryUpdateVirtualViewport Anim start');
             }
-            // Otherwise the DOM selection is out of sync, so update it.
-            const el = AngularEditor.toDOMNode(this.editor, this.editor);
-            this.isUpdatingSelection = true;
-            const newDomRange = selection && AngularEditor.toDOMRange(this.editor, selection);
-            if (newDomRange) {
-                // COMPAT: Since the DOM range has no concept of backwards/forwards
-                // we need to check and do the right thing here.
-                if (Range.isBackward(selection)) {
-                    // eslint-disable-next-line max-len
-                    domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
+            const visibleStates = this.editor.getAllVisibleStates();
+            let virtualView = this.calculateVirtualViewport(visibleStates);
+            let diff = this.diffVirtualViewport(virtualView);
+            if (diff.isDifferent && diff.needRemoveOnTop && !isFromScrollTo) {
+                const remeasureIndics = diff.changedIndexesOfTop;
+                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                if (changed) {
+                    virtualView = this.calculateVirtualViewport(visibleStates);
+                    diff = this.diffVirtualViewport(virtualView, 'second');
                 }
-                else {
-                    // eslint-disable-next-line max-len
-                    domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
+            }
+            if (diff.isDifferent) {
+                this.applyVirtualView(virtualView);
+                if (this.listRender.initialized) {
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
+                    if (diff.needAddOnTop && !isFromScrollTo) {
+                        const remeasureAddedIndics = diff.changedIndexesOfTop;
+                        if (isDebug) {
+                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                        }
+                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
+                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
+                        if (changed) {
+                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
+                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                            this.setVirtualSpaceHeight(newTopHeight);
+                            if (isDebug) {
+                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                            }
+                        }
+                    }
+                    if (this.editor.selection) {
+                        this.toNativeSelection(false);
+                    }
                 }
             }
-            else {
-                domSelection.removeAllRanges();
+            if (isDebug) {
+                debugLog('log', 'tryUpdateVirtualViewport Anim end');
             }
-            setTimeout(() => {
-                if (this.isEnabledVirtualScroll() &&
-                    !selection &&
-                    this.editor.selection &&
-                    autoScroll &&
-                    this.virtualScrollConfig.scrollContainer) {
-                    this.virtualScrollConfig.scrollContainer.scrollTop = this.virtualScrollConfig.scrollContainer.scrollTop + 100;
-                    this.isUpdatingSelection = false;
-                    return;
-                }
-                else {
-                    // handle scrolling in setTimeout because of
-                    // dom should not have updated immediately after listRender's updating
-                    newDomRange && autoScroll && this.scrollSelectionIntoView(this.editor, newDomRange);
-                    // COMPAT: In Firefox, it's not enough to create a range, you also need
-                    // to focus the contenteditable element too. (2016/11/16)
-                    if (newDomRange && IS_FIREFOX) {
-                        el.focus();
-                    }
-                }
-                this.isUpdatingSelection = false;
-            });
-        }
-        catch (error) {
-            this.editor.onError({
-                code: SlateErrorCode.ToNativeSelectionError,
-                nativeError: error
-            });
-            this.isUpdatingSelection = false;
-        }
-    }
-    onChange() {
-        this.forceRender();
-        this.onChangeCallback(this.editor.children);
+        });
     }
-    ngAfterViewChecked() { }
-    ngDoCheck() { }
-    forceRender() {
-        this.updateContext();
-        if (this.isEnabledVirtualScroll()) {
-            this.updateListRenderAndRemeasureHeights();
+    calculateVirtualViewport(visibleStates) {
+        const children = (this.editor.children || []);
+        if (!children.length || !this.isEnabledVirtualScroll()) {
+            return {
+                inViewportChildren: children,
+                inViewportIndics: [],
+                top: 0,
+                bottom: 0,
+                heights: []
+            };
         }
-        else {
-            this.listRender.update(this.editor.children, this.editor, this.context);
+        const scrollTop = this.virtualScrollConfig.scrollTop;
+        let viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
+        if (!viewportHeight) {
+            return {
+                inViewportChildren: [],
+                inViewportIndics: [],
+                top: 0,
+                bottom: 0,
+                heights: []
+            };
         }
-        // repair collaborative editing when Chinese input is interrupted by other users' cursors
-        // when the DOMElement where the selection is located is removed
-        // the compositionupdate and compositionend events will no longer be fired
-        // so isComposing needs to be corrected
-        // need exec after this.cdr.detectChanges() to render HTML
-        // need exec before this.toNativeSelection() to correct native selection
-        if (this.isComposing) {
-            // Composition input text be not rendered when user composition input with selection is expanded
-            // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
-            // this time condition is true and isComposing is assigned false
-            // Therefore, need to wait for the composition input text to be rendered before performing condition matching
+        const elementLength = children.length;
+        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
+            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
             setTimeout(() => {
-                const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
-                const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
-                let textContent = '';
-                // skip decorate text
-                textDOMNode.querySelectorAll('[editable-text]').forEach(stringDOMNode => {
-                    let text = stringDOMNode.textContent;
-                    const zeroChar = '\uFEFF';
-                    // remove zero with char
-                    if (text.startsWith(zeroChar)) {
-                        text = text.slice(1);
-                    }
-                    if (text.endsWith(zeroChar)) {
-                        text = text.slice(0, text.length - 1);
-                    }
-                    textContent += text;
-                });
-                if (Node.string(textNode).endsWith(textContent)) {
-                    this.isComposing = false;
+                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+                const businessTop = Math.ceil(virtualTopBoundingTop) +
+                    Math.ceil(this.virtualScrollConfig.scrollTop) -
+                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
+                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
+                if (isDebug) {
+                    debugLog('log', 'businessTop', businessTop);
+                    this.virtualTopHeightElement.setAttribute('data-business-top', businessTop.toString());
                 }
-            }, 0);
-        }
-        if (this.editor.selection && this.isSelectionInvisible(this.editor.selection)) {
-            Transforms.deselect(this.editor);
-            return;
+            }, 100);
         }
-        else {
-            this.toNativeSelection();
+        const businessTop = getBusinessTop(this.editor);
+        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
+        const totalHeight = accumulatedHeights[elementLength] + businessTop;
+        let startPosition = Math.max(scrollTop - businessTop, 0);
+        let endPosition = startPosition + viewportHeight;
+        if (scrollTop < businessTop) {
+            endPosition = startPosition + viewportHeight - (businessTop - scrollTop);
         }
-    }
-    render() {
-        const changed = this.updateContext();
-        if (changed) {
-            if (this.isEnabledVirtualScroll()) {
-                this.updateListRenderAndRemeasureHeights();
+        let accumulatedOffset = 0;
+        let inViewportStartIndex = -1;
+        const visible = [];
+        const inViewportIndics = [];
+        for (let i = 0; i < elementLength && accumulatedOffset < endPosition; i++) {
+            const currentHeight = heights[i];
+            const nextOffset = accumulatedOffset + currentHeight;
+            const isVisible = visibleStates[i];
+            if (!isVisible) {
+                accumulatedOffset = nextOffset;
+                continue;
             }
-            else {
-                this.listRender.update(this.editor.children, this.editor, this.context);
+            // 可视区域有交集，加入渲染
+            if (nextOffset > startPosition && accumulatedOffset < endPosition) {
+                if (inViewportStartIndex === -1)
+                    inViewportStartIndex = i; // 第一个相交起始位置
+                visible.push(children[i]);
+                inViewportIndics.push(i);
             }
+            accumulatedOffset = nextOffset;
         }
+        const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
+        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
+        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
+        return {
+            inViewportChildren: visible.length ? visible : children,
+            inViewportIndics,
+            top,
+            bottom,
+            heights,
+            accumulatedHeights
+        };
     }
-    updateListRenderAndRemeasureHeights() {
-        const visibleStates = this.editor.getAllVisibleStates();
-        const previousInViewportChildren = [...this.inViewportChildren];
-        let virtualView = this.calculateVirtualViewport(visibleStates);
-        let diff = this.diffVirtualViewport(virtualView, 'onChange');
-        if (diff.isDifferent && diff.needRemoveOnTop) {
-            const remeasureIndics = diff.changedIndexesOfTop;
-            const changed = measureHeightByIndics(this.editor, remeasureIndics);
-            if (changed) {
-                virtualView = this.calculateVirtualViewport(visibleStates);
-                diff = this.diffVirtualViewport(virtualView, 'second');
+    applyVirtualView(virtualView) {
+        this.inViewportChildren = virtualView.inViewportChildren;
+        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
+        this.inViewportIndics = virtualView.inViewportIndics;
+    }
+    diffVirtualViewport(virtualView, stage = 'first') {
+        if (!this.inViewportChildren.length) {
+            if (isDebug) {
+                debugLog('log', 'diffVirtualViewport', stage, 'empty inViewportChildren', virtualView.inViewportIndics);
             }
+            return {
+                isDifferent: true,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
+            };
         }
-        this.applyVirtualView(virtualView);
-        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
-        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
-        const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
-        if (remeasureIndics.length) {
-            this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+        const oldIndexesInViewport = [...this.inViewportIndics];
+        const newIndexesInViewport = [...virtualView.inViewportIndics];
+        const firstNewIndex = newIndexesInViewport[0];
+        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
+        const firstOldIndex = oldIndexesInViewport[0];
+        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
+        const isSameViewport = oldIndexesInViewport.length === newIndexesInViewport.length &&
+            oldIndexesInViewport.every((index, i) => index === newIndexesInViewport[i]);
+        if (firstNewIndex === firstOldIndex && lastNewIndex === lastOldIndex) {
+            return {
+                isDifferent: !isSameViewport,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
+            };
         }
-    }
-    updateContext() {
-        const decorations = this.generateDecorations();
-        if (this.context.selection !== this.editor.selection ||
-            this.context.decorate !== this.decorate ||
-            this.context.readonly !== this.readonly ||
-            !isDecoratorRangeListEqual(this.context.decorations, decorations)) {
-            this.context = {
-                parent: this.editor,
-                selection: this.editor.selection,
-                decorations: decorations,
-                decorate: this.decorate,
-                readonly: this.readonly
+        if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
+            const changedIndexesOfTop = [];
+            const changedIndexesOfBottom = [];
+            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (needRemoveOnTop || needAddOnBottom) {
+                // 向下
+                for (let index = 0; index < oldIndexesInViewport.length; index++) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else if (needAddOnTop || needRemoveOnBottom) {
+                // 向上
+                for (let index = 0; index < newIndexesInViewport.length; index++) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            if (isDebug) {
+                debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
+                debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
+                debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
+                // this.editor.children[index] will be undefined when it is removed
+                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => (this.editor.children[index] &&
+                    getCachedHeightByElement(this.editor, this.editor.children[index])) ||
+                    0));
+                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => (this.editor.children[index] &&
+                    getCachedHeightByElement(this.editor, this.editor.children[index])) ||
+                    0));
+                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
+                const needBottom = virtualView.heights
+                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
+                    .reduce((acc, height) => acc + height, 0);
+                debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
+                debugLog('warn', '=========== Dividing line ===========');
+            }
+            return {
+                isDifferent: true,
+                needRemoveOnTop,
+                needAddOnTop,
+                needRemoveOnBottom,
+                needAddOnBottom,
+                changedIndexesOfTop,
+                changedIndexesOfBottom
             };
-            return true;
         }
-        return false;
-    }
-    initializeContext() {
-        this.context = {
-            parent: this.editor,
-            selection: this.editor.selection,
-            decorations: this.generateDecorations(),
-            decorate: this.decorate,
-            readonly: this.readonly
+        return {
+            isDifferent: false,
+            changedIndexesOfTop: [],
+            changedIndexesOfBottom: []
         };
     }
-    initializeViewContext() {
-        this.viewContext = {
-            editor: this.editor,
-            renderElement: this.renderElement,
-            renderLeaf: this.renderLeaf,
-            renderText: this.renderText,
-            trackBy: this.trackBy,
-            isStrictDecorate: this.isStrictDecorate
-        };
+    //#region event proxy
+    addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
+        this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
+            const beforeInputEvent = extractBeforeInputEvent(event.type, null, event, event.target);
+            if (beforeInputEvent) {
+                this.onFallbackBeforeInput(beforeInputEvent);
+            }
+            listener(event);
+        }));
     }
-    composePlaceholderDecorate(editor) {
-        if (this.placeholderDecorate) {
-            return this.placeholderDecorate(editor) || [];
-        }
-        if (this.placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '') {
-            const start = Editor.start(editor, []);
-            return [
-                {
-                    placeholder: this.placeholder,
-                    anchor: start,
-                    focus: start
+    calculateVirtualScrollSelection(selection) {
+        if (selection) {
+            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
+            const indics = this.inViewportIndics;
+            if (indics.length > 0) {
+                const currentVisibleRange = {
+                    anchor: Editor.start(this.editor, [indics[0]]),
+                    focus: Editor.end(this.editor, [indics[indics.length - 1]])
+                };
+                const [start, end] = Range.edges(selection);
+                let forwardSelection = { anchor: start, focus: end };
+                if (!isBlockCardCursor) {
+                    forwardSelection = { anchor: start, focus: end };
                 }
-            ];
-        }
-        else {
-            return [];
-        }
-    }
-    generateDecorations() {
-        const decorations = this.decorate([this.editor, []]);
-        const placeholderDecorations = this.isComposing ? [] : this.composePlaceholderDecorate(this.editor);
-        decorations.push(...placeholderDecorations);
-        return decorations;
-    }
-    isEnabledVirtualScroll() {
-        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
-    }
-    initializeVirtualScroll() {
-        if (this.virtualScrollInitialized) {
-            return;
-        }
-        if (this.isEnabledVirtualScroll()) {
-            this.virtualScrollInitialized = true;
-            this.virtualTopHeightElement = document.createElement('div');
-            this.virtualTopHeightElement.classList.add('virtual-top-height');
-            this.virtualTopHeightElement.contentEditable = 'false';
-            this.virtualBottomHeightElement = document.createElement('div');
-            this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
-            this.virtualBottomHeightElement.contentEditable = 'false';
-            this.virtualCenterOutlet = document.createElement('div');
-            this.virtualCenterOutlet.classList.add('virtual-center-outlet');
-            this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
-            this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
-            this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
-            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.offsetWidth);
-            this.editorResizeObserver = new ResizeObserver(entries => {
-                if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
-                    editorResizeObserverRectWidth = entries[0].contentRect.width;
-                    this.keyHeightMap.clear();
-                    let target = this.virtualTopHeightElement;
-                    if (this.inViewportChildren[0]) {
-                        const firstElement = this.inViewportChildren[0];
-                        const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
-                        target = firstDomElement;
-                    }
-                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, target.offsetWidth);
-                    updatePreRenderingElementWidth(this.editor);
-                    if (isDebug) {
-                        debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));
-                    }
+                else {
+                    forwardSelection = { anchor: { path: start.path, offset: 0 }, focus: { path: end.path, offset: 0 } };
                 }
-            });
-            this.editorResizeObserver.observe(this.elementRef.nativeElement);
-            let pendingRemeasureIndics = [];
-            this.indicsOfNeedBeMeasured$
-                .pipe(tap((previousValue) => {
-                previousValue.forEach((index) => {
-                    if (!pendingRemeasureIndics.includes(index)) {
-                        pendingRemeasureIndics.push(index);
-                    }
-                });
-            }), debounceTime(500), filter(() => pendingRemeasureIndics.length > 0))
-                .subscribe(() => {
-                const changed = measureHeightByIndics(this.editor, pendingRemeasureIndics, true);
-                if (changed) {
-                    this.tryUpdateVirtualViewport();
+                const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
+                if (intersectedSelection && isBlockCardCursor) {
+                    return selection;
+                }
+                EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
+                if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
                     if (isDebug) {
-                        debugLog('log', 'exist pendingRemeasureIndics: ', pendingRemeasureIndics, 'will try to update virtual viewport');
+                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
                     }
+                    return intersectedSelection;
                 }
-                pendingRemeasureIndics = [];
-            });
-        }
-    }
-    getChangedIndics(previousValue) {
-        const remeasureIndics = [];
-        this.inViewportChildren.forEach((child, index) => {
-            if (previousValue.indexOf(child) === -1) {
-                remeasureIndics.push(this.inViewportIndics[index]);
+                return selection;
             }
-        });
-        return remeasureIndics;
-    }
-    setVirtualSpaceHeight(topHeight, bottomHeight) {
-        if (!this.virtualScrollInitialized) {
-            return;
-        }
-        this.virtualTopHeightElement.style.height = `${topHeight}px`;
-        if (bottomHeight !== undefined) {
-            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
         }
+        EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
+        return selection;
     }
-    getActualVirtualTopHeight() {
-        if (!this.virtualScrollInitialized) {
-            return 0;
-        }
-        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
+    isSelectionInvisible(selection) {
+        const anchorIndex = selection.anchor.path[0];
+        const focusIndex = selection.focus.path[0];
+        const anchorElement = this.editor.children[anchorIndex];
+        const focusElement = this.editor.children[focusIndex];
+        return !anchorElement || !focusElement || !this.editor.isVisible(anchorElement) || !this.editor.isVisible(focusElement);
     }
-    handlePreRendering(visibleStates) {
-        let preRenderingCount = 0;
-        const childrenWithPreRendering = [...this.inViewportChildren];
-        const childrenWithPreRenderingIndics = [...this.inViewportIndics];
-        const firstIndex = this.inViewportIndics[0];
-        for (let index = firstIndex - 1; index >= 0; index--) {
-            const element = this.editor.children[index];
-            if (visibleStates[index]) {
-                childrenWithPreRendering.unshift(element);
-                childrenWithPreRenderingIndics.unshift(index);
-                preRenderingCount = 1;
-                break;
+    toNativeSelection(autoScroll = true) {
+        try {
+            let { selection } = this.editor;
+            if (this.isEnabledVirtualScroll()) {
+                selection = this.calculateVirtualScrollSelection(selection);
             }
-        }
-        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
-        for (let index = lastIndex + 1; index < this.editor.children.length; index++) {
-            const element = this.editor.children[index];
-            if (visibleStates[index]) {
-                childrenWithPreRendering.push(element);
-                childrenWithPreRenderingIndics.push(index);
-                break;
+            const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
+            const { activeElement } = root;
+            const domSelection = root.getSelection();
+            if ((this.isComposing && !IS_ANDROID) || !domSelection) {
+                return;
             }
-        }
-        return { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics };
-    }
-    tryUpdateVirtualViewport() {
-        if (isDebug) {
-            debugLog('log', 'tryUpdateVirtualViewport');
-        }
-        const isFromScrollTo = EDITOR_TO_IS_FROM_SCROLL_TO.get(this.editor);
-        if (this.inViewportIndics.length > 0 && !isFromScrollTo) {
-            const topHeight = this.getActualVirtualTopHeight();
-            const visibleStates = this.editor.getAllVisibleStates();
-            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
-            if (topHeight !== refreshVirtualTopHeight) {
-                if (isDebug) {
-                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
-                }
-                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
+            const hasDomSelection = domSelection.type !== 'None';
+            // If the DOM selection is properly unset, we're done.
+            if (!selection && !hasDomSelection) {
                 return;
             }
-        }
-        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
-        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
-            if (isDebug) {
-                debugLog('log', 'tryUpdateVirtualViewport Anim start');
+            // If the DOM selection is already correct, we're done.
+            // verify that the dom selection is in the editor
+            const editorElement = EDITOR_TO_ELEMENT.get(this.editor);
+            let hasDomSelectionInEditor = false;
+            if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
+                hasDomSelectionInEditor = true;
             }
-            const visibleStates = this.editor.getAllVisibleStates();
-            let virtualView = this.calculateVirtualViewport(visibleStates);
-            let diff = this.diffVirtualViewport(virtualView);
-            if (diff.isDifferent && diff.needRemoveOnTop && !isFromScrollTo) {
-                const remeasureIndics = diff.changedIndexesOfTop;
-                const changed = measureHeightByIndics(this.editor, remeasureIndics);
-                if (changed) {
-                    virtualView = this.calculateVirtualViewport(visibleStates);
-                    diff = this.diffVirtualViewport(virtualView, 'second');
+            // If the DOM selection is in the editor and the editor selection is already correct, we're done.
+            if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
+                const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, {
+                    exactMatch: false,
+                    suppressThrow: true
+                });
+                if (rangeFromDOMSelection && Range.equals(rangeFromDOMSelection, selection)) {
+                    return;
                 }
             }
-            if (diff.isDifferent) {
-                this.applyVirtualView(virtualView);
-                if (this.listRender.initialized) {
-                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
-                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
-                    if (diff.needAddOnTop && !isFromScrollTo) {
-                        const remeasureAddedIndics = diff.changedIndexesOfTop;
-                        if (isDebug) {
-                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
-                        }
-                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
-                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
-                        if (changed) {
-                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
-                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
-                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
-                            this.setVirtualSpaceHeight(newTopHeight);
-                            if (isDebug) {
-                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
-                            }
-                        }
-                    }
-                    if (this.editor.selection) {
-                        this.toNativeSelection(false);
-                    }
+            // prevent updating native selection when active element is void element
+            if (isTargetInsideVoid(this.editor, activeElement)) {
+                return;
+            }
+            // when <Editable/> is being controlled through external value
+            // then its children might just change - DOM responds to it on its own
+            // but Slate's value is not being updated through any operation
+            // and thus it doesn't transform selection on its own
+            if (selection && !AngularEditor.hasRange(this.editor, selection)) {
+                this.editor.selection = AngularEditor.toSlateRange(this.editor, domSelection, { exactMatch: false, suppressThrow: false });
+                return;
+            }
+            // Otherwise the DOM selection is out of sync, so update it.
+            const el = AngularEditor.toDOMNode(this.editor, this.editor);
+            this.isUpdatingSelection = true;
+            const newDomRange = selection && AngularEditor.toDOMRange(this.editor, selection);
+            if (newDomRange) {
+                // COMPAT: Since the DOM range has no concept of backwards/forwards
+                // we need to check and do the right thing here.
+                if (Range.isBackward(selection)) {
+                    // eslint-disable-next-line max-len
+                    domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
+                }
+                else {
+                    // eslint-disable-next-line max-len
+                    domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
                 }
             }
-            if (isDebug) {
-                debugLog('log', 'tryUpdateVirtualViewport Anim end');
+            else {
+                domSelection.removeAllRanges();
             }
-        });
-    }
-    calculateVirtualViewport(visibleStates) {
-        const children = (this.editor.children || []);
-        if (!children.length || !this.isEnabledVirtualScroll()) {
-            return {
-                inViewportChildren: children,
-                inViewportIndics: [],
-                top: 0,
-                bottom: 0,
-                heights: []
-            };
-        }
-        const scrollTop = this.virtualScrollConfig.scrollTop;
-        let viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
-        if (!viewportHeight) {
-            return {
-                inViewportChildren: [],
-                inViewportIndics: [],
-                top: 0,
-                bottom: 0,
-                heights: []
-            };
-        }
-        const elementLength = children.length;
-        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
-            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
             setTimeout(() => {
-                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
-                const businessTop = Math.ceil(virtualTopBoundingTop) +
-                    Math.ceil(this.virtualScrollConfig.scrollTop) -
-                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
-                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
-                if (isDebug) {
-                    debugLog('log', 'businessTop', businessTop);
-                    this.virtualTopHeightElement.setAttribute('data-business-top', businessTop.toString());
+                if (this.isEnabledVirtualScroll() &&
+                    !selection &&
+                    this.editor.selection &&
+                    autoScroll &&
+                    this.virtualScrollConfig.scrollContainer) {
+                    this.virtualScrollConfig.scrollContainer.scrollTop = this.virtualScrollConfig.scrollContainer.scrollTop + 100;
+                    this.isUpdatingSelection = false;
+                    return;
                 }
-            }, 100);
-        }
-        const businessTop = getBusinessTop(this.editor);
-        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
-        const totalHeight = accumulatedHeights[elementLength] + businessTop;
-        let startPosition = Math.max(scrollTop - businessTop, 0);
-        let endPosition = startPosition + viewportHeight;
-        if (scrollTop < businessTop) {
-            endPosition = startPosition + viewportHeight - (businessTop - scrollTop);
+                else {
+                    // handle scrolling in setTimeout because of
+                    // dom should not have updated immediately after listRender's updating
+                    newDomRange && autoScroll && this.scrollSelectionIntoView(this.editor, newDomRange);
+                    // COMPAT: In Firefox, it's not enough to create a range, you also need
+                    // to focus the contenteditable element too. (2016/11/16)
+                    if (newDomRange && IS_FIREFOX) {
+                        el.focus();
+                    }
+                }
+                this.isUpdatingSelection = false;
+            });
         }
-        let accumulatedOffset = 0;
-        let inViewportStartIndex = -1;
-        const visible = [];
-        const inViewportIndics = [];
-        for (let i = 0; i < elementLength && accumulatedOffset < endPosition; i++) {
-            const currentHeight = heights[i];
-            const nextOffset = accumulatedOffset + currentHeight;
-            const isVisible = visibleStates[i];
-            if (!isVisible) {
-                accumulatedOffset = nextOffset;
-                continue;
-            }
-            // 可视区域有交集，加入渲染
-            if (nextOffset > startPosition && accumulatedOffset < endPosition) {
-                if (inViewportStartIndex === -1)
-                    inViewportStartIndex = i; // 第一个相交起始位置
-                visible.push(children[i]);
-                inViewportIndics.push(i);
-            }
-            accumulatedOffset = nextOffset;
+        catch (error) {
+            this.editor.onError({
+                code: SlateErrorCode.ToNativeSelectionError,
+                nativeError: error
+            });
+            this.isUpdatingSelection = false;
         }
-        const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
-        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
-        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
-        return {
-            inViewportChildren: visible.length ? visible : children,
-            inViewportIndics,
-            top,
-            bottom,
-            heights,
-            accumulatedHeights
-        };
     }
-    applyVirtualView(virtualView) {
-        this.inViewportChildren = virtualView.inViewportChildren;
-        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
-        this.inViewportIndics = virtualView.inViewportIndics;
+    onChange() {
+        this.forceRender();
+        this.onChangeCallback(this.editor.children);
     }
-    diffVirtualViewport(virtualView, stage = 'first') {
-        if (!this.inViewportChildren.length) {
-            if (isDebug) {
-                debugLog('log', 'diffVirtualViewport', stage, 'empty inViewportChildren', virtualView.inViewportIndics);
-            }
-            return {
-                isDifferent: true,
-                changedIndexesOfTop: [],
-                changedIndexesOfBottom: []
-            };
+    ngAfterViewChecked() { }
+    ngDoCheck() { }
+    forceRender() {
+        this.updateContext();
+        if (this.isEnabledVirtualScroll()) {
+            this.updateListRenderAndRemeasureHeights();
         }
-        const oldIndexesInViewport = [...this.inViewportIndics];
-        const newIndexesInViewport = [...virtualView.inViewportIndics];
-        const firstNewIndex = newIndexesInViewport[0];
-        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
-        const firstOldIndex = oldIndexesInViewport[0];
-        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
-        const isSameViewport = oldIndexesInViewport.length === newIndexesInViewport.length &&
-            oldIndexesInViewport.every((index, i) => index === newIndexesInViewport[i]);
-        if (firstNewIndex === firstOldIndex && lastNewIndex === lastOldIndex) {
-            return {
-                isDifferent: !isSameViewport,
-                changedIndexesOfTop: [],
-                changedIndexesOfBottom: []
-            };
+        else {
+            this.listRender.update(this.editor.children, this.editor, this.context);
         }
-        if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
-            const changedIndexesOfTop = [];
-            const changedIndexesOfBottom = [];
-            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
-            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
-            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
-            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
-            if (needRemoveOnTop || needAddOnBottom) {
-                // 向下
-                for (let index = 0; index < oldIndexesInViewport.length; index++) {
-                    const element = oldIndexesInViewport[index];
-                    if (!newIndexesInViewport.includes(element)) {
-                        changedIndexesOfTop.push(element);
-                    }
-                    else {
-                        break;
-                    }
-                }
-                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
-                    const element = newIndexesInViewport[index];
-                    if (!oldIndexesInViewport.includes(element)) {
-                        changedIndexesOfBottom.push(element);
+        // repair collaborative editing when Chinese input is interrupted by other users' cursors
+        // when the DOMElement where the selection is located is removed
+        // the compositionupdate and compositionend events will no longer be fired
+        // so isComposing needs to be corrected
+        // need exec after this.cdr.detectChanges() to render HTML
+        // need exec before this.toNativeSelection() to correct native selection
+        if (this.isComposing) {
+            // Composition input text be not rendered when user composition input with selection is expanded
+            // At this time, the following matching conditions are met, assign isComposing to false, and the status is wrong
+            // this time condition is true and isComposing is assigned false
+            // Therefore, need to wait for the composition input text to be rendered before performing condition matching
+            setTimeout(() => {
+                const textNode = Node.get(this.editor, this.editor.selection.anchor.path);
+                const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
+                let textContent = '';
+                // skip decorate text
+                textDOMNode.querySelectorAll('[editable-text]').forEach(stringDOMNode => {
+                    let text = stringDOMNode.textContent;
+                    const zeroChar = '\uFEFF';
+                    // remove zero with char
+                    if (text.startsWith(zeroChar)) {
+                        text = text.slice(1);
                     }
-                    else {
-                        break;
+                    if (text.endsWith(zeroChar)) {
+                        text = text.slice(0, text.length - 1);
                     }
+                    textContent += text;
+                });
+                if (Node.string(textNode).endsWith(textContent)) {
+                    this.isComposing = false;
                 }
+            }, 0);
+        }
+        if (this.editor.selection && this.isSelectionInvisible(this.editor.selection)) {
+            Transforms.deselect(this.editor);
+            return;
+        }
+        else {
+            this.toNativeSelection();
+        }
+    }
+    render() {
+        const changed = this.updateContext();
+        if (changed) {
+            if (this.isEnabledVirtualScroll()) {
+                this.updateListRenderAndRemeasureHeights();
             }
-            else if (needAddOnTop || needRemoveOnBottom) {
-                // 向上
-                for (let index = 0; index < newIndexesInViewport.length; index++) {
-                    const element = newIndexesInViewport[index];
-                    if (!oldIndexesInViewport.includes(element)) {
-                        changedIndexesOfTop.push(element);
-                    }
-                    else {
-                        break;
-                    }
+            else {
+                this.listRender.update(this.editor.children, this.editor, this.context);
+            }
+        }
+    }
+    updateListRenderAndRemeasureHeights() {
+        const operations = this.editor.operations;
+        const firstIndex = this.inViewportIndics[0];
+        const operationsOfFirstElementMerged = operations.filter(op => op.type === 'merge_node' && op.path.length === 1 && firstIndex === op.path[0] - 1);
+        const operationsOfFirstElementSplitted = operations.filter(op => op.type === 'split_node' && op.path.length === 1 && firstIndex === op.path[0]);
+        const mutationOfFirstElementHeight = operationsOfFirstElementSplitted.length > 0 || operationsOfFirstElementMerged.length > 0;
+        const visibleStates = this.editor.getAllVisibleStates();
+        const previousInViewportChildren = [...this.inViewportChildren];
+        // the first element height will reset to default height when split or merge
+        // if the most top content of the first element is not in viewport, the change of height will cause the viewport to scroll
+        // to keep viewport stable, we need to use the current inViewportIndics temporarily
+        if (mutationOfFirstElementHeight) {
+            const newInViewportIndics = [];
+            const newInViewportChildren = [];
+            this.inViewportIndics.forEach(index => {
+                const element = this.editor.children[index];
+                const isVisible = visibleStates[index];
+                if (isVisible) {
+                    newInViewportIndics.push(index);
+                    newInViewportChildren.push(element);
                 }
-                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
-                    const element = oldIndexesInViewport[index];
-                    if (!newIndexesInViewport.includes(element)) {
-                        changedIndexesOfBottom.push(element);
-                    }
-                    else {
+            });
+            if (operationsOfFirstElementSplitted.length > 0) {
+                const lastIndex = newInViewportIndics[newInViewportIndics.length - 1];
+                for (let i = lastIndex + 1; i < this.editor.children.length; i++) {
+                    const element = this.editor.children[i];
+                    const isVisible = visibleStates[i];
+                    if (isVisible) {
+                        newInViewportIndics.push(i);
+                        newInViewportChildren.push(element);
                         break;
                     }
                 }
             }
+            this.inViewportIndics = newInViewportIndics;
+            this.inViewportChildren = newInViewportChildren;
             if (isDebug) {
-                debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
-                debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
-                debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
-                // this.editor.children[index] will be undefined when it is removed
-                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => (this.editor.children[index] &&
-                    getCachedHeightByElement(this.editor, this.editor.children[index])) ||
-                    0));
-                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => (this.editor.children[index] &&
-                    getCachedHeightByElement(this.editor, this.editor.children[index])) ||
-                    0));
-                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
-                const needBottom = virtualView.heights
-                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
-                    .reduce((acc, height) => acc + height, 0);
-                debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                debugLog('warn', '=========== Dividing line ===========');
+                debugLog('log', 'updateListRenderAndRemeasureHeights', 'mutationOfFirstElementHeight', 'newInViewportIndics', newInViewportIndics);
             }
-            return {
-                isDifferent: true,
-                needRemoveOnTop,
-                needAddOnTop,
-                needRemoveOnBottom,
-                needAddOnBottom,
-                changedIndexesOfTop,
-                changedIndexesOfBottom
+        }
+        else {
+            let virtualView = this.calculateVirtualViewport(visibleStates);
+            let diff = this.diffVirtualViewport(virtualView, 'onChange');
+            if (diff.isDifferent && diff.needRemoveOnTop) {
+                const remeasureIndics = diff.changedIndexesOfTop;
+                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                if (changed) {
+                    virtualView = this.calculateVirtualViewport(visibleStates);
+                    diff = this.diffVirtualViewport(virtualView, 'second');
+                }
+            }
+            this.applyVirtualView(virtualView);
+        }
+        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
+        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
+        const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
+        if (remeasureIndics.length) {
+            this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+        }
+    }
+    updateContext() {
+        const decorations = this.generateDecorations();
+        if (this.context.selection !== this.editor.selection ||
+            this.context.decorate !== this.decorate ||
+            this.context.readonly !== this.readonly ||
+            !isDecoratorRangeListEqual(this.context.decorations, decorations)) {
+            this.context = {
+                parent: this.editor,
+                selection: this.editor.selection,
+                decorations: decorations,
+                decorate: this.decorate,
+                readonly: this.readonly
             };
+            return true;
         }
-        return {
-            isDifferent: false,
-            changedIndexesOfTop: [],
-            changedIndexesOfBottom: []
+        return false;
+    }
+    initializeContext() {
+        this.context = {
+            parent: this.editor,
+            selection: this.editor.selection,
+            decorations: this.generateDecorations(),
+            decorate: this.decorate,
+            readonly: this.readonly
         };
     }
-    //#region event proxy
-    addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
-        this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
-            const beforeInputEvent = extractBeforeInputEvent(event.type, null, event, event.target);
-            if (beforeInputEvent) {
-                this.onFallbackBeforeInput(beforeInputEvent);
-            }
-            listener(event);
-        }));
+    initializeViewContext() {
+        this.viewContext = {
+            editor: this.editor,
+            renderElement: this.renderElement,
+            renderLeaf: this.renderLeaf,
+            renderText: this.renderText,
+            trackBy: this.trackBy,
+            isStrictDecorate: this.isStrictDecorate
+        };
+    }
+    composePlaceholderDecorate(editor) {
+        if (this.placeholderDecorate) {
+            return this.placeholderDecorate(editor) || [];
+        }
+        if (this.placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '') {
+            const start = Editor.start(editor, []);
+            return [
+                {
+                    placeholder: this.placeholder,
+                    anchor: start,
+                    focus: start
+                }
+            ];
+        }
+        else {
+            return [];
+        }
+    }
+    generateDecorations() {
+        const decorations = this.decorate([this.editor, []]);
+        const placeholderDecorations = this.isComposing ? [] : this.composePlaceholderDecorate(this.editor);
+        decorations.push(...placeholderDecorations);
+        return decorations;
     }
     toSlateSelection() {
         if ((!this.isComposing || IS_ANDROID) && !this.isUpdatingSelection && !this.isDraggingInternally) {