slate-angular 20.2.0-next.20 → 20.2.0-next.22

package/fesm2022/slate-angular.mjs

@@ -477,6 +477,7 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
     typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
 const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 30;
 const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
+const SLATE_DEBUG_KEY_SCROLL_TOP = '__SLATE_DEBUG_SCROLL_TOP__';
 
 /**
  * Hotkey mappings for each platform.
@@ -3137,10 +3138,13 @@ class VirtualScrollDebugOverlay {
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
+const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualScrollConfig = config;
-        console.log('virtualScrollConfig', config);
+        if (isDebugScrollTop) {
+            this.debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
+        }
         IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
         if (this.isEnabledVirtualScroll()) {
             this.tryUpdateVirtualViewport();
@@ -3576,6 +3580,7 @@ class SlateEditable {
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
+                    this.keyHeightMap.clear();
                     const remeasureIndics = Array.from(this.inViewportIndics);
                     this.remeasureHeightByIndics(remeasureIndics);
                 }
@@ -3625,6 +3630,28 @@ class SlateEditable {
                     this.toNativeSelection();
                 }
             }
+            if (diff.isAddedTop) {
+                const remeasureAddedIndics = diff.diffTopRenderedIndexes;
+                if (isDebug) {
+                    this.debugLog('log', 'isAddedTop to remeasure heights: ', remeasureAddedIndics);
+                }
+                const startIndexBeforeAdd = diff.diffTopRenderedIndexes[diff.diffTopRenderedIndexes.length - 1] + 1;
+                const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                const result = this.remeasureHeightByIndics(remeasureAddedIndics);
+                if (result) {
+                    const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                    const visibleStartIndex = diff.diffTopRenderedIndexes[0];
+                    const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                    const adjustedTopHeight = (visibleStartIndex === -1 ? 0 : newHeights.accumulatedHeights[visibleStartIndex]) -
+                        (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                    if (adjustedTopHeight !== virtualView.top) {
+                        if (isDebug) {
+                            this.debugLog('log', `update top height cause added element in top: ${adjustedTopHeight}, old height: ${virtualView.top}`);
+                        }
+                        this.virtualTopHeightElement.style.height = `${adjustedTopHeight}px`;
+                    }
+                }
+            }
             this.tryMeasureInViewportChildrenHeights();
         });
     }
@@ -3673,7 +3700,7 @@ class SlateEditable {
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
-        const viewBottom = limitedScrollTop + viewportHeight + getBusinessTop(this.editor);
+        const viewBottom = limitedScrollTop + viewportHeight;
         let accumulatedOffset = 0;
         let visibleStartIndex = -1;
         const visible = [];
@@ -3703,7 +3730,8 @@ class SlateEditable {
             visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
-            heights
+            heights,
+            accumulatedHeights
         };
     }
     applyVirtualView(virtualView) {
@@ -3891,9 +3919,6 @@ class SlateEditable {
     toSlateSelection() {
         if ((!this.isComposing || IS_ANDROID) && !this.isUpdatingSelection && !this.isDraggingInternally) {
             try {
-                if (isDebug) {
-                    console.log('toSlateSelection');
-                }
                 const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
                 const { activeElement } = root;
                 const el = AngularEditor.toDOMNode(this.editor, this.editor);
@@ -5005,6 +5030,9 @@ class BaseLeafComponent extends BaseComponent {
         super(...arguments);
         this.stringRender = null;
         this.isSlateLeaf = true;
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
     }
     get text() {
         return this.context && this.context.text;
@@ -5019,7 +5047,7 @@ class BaseLeafComponent extends BaseComponent {
         if (!this.initialized) {
             this.stringRender = new SlateStringRender(this.context, this.viewContext);
             const stringNode = this.stringRender.render();
-            this.nativeElement.appendChild(stringNode);
+            this.getOutletParent().appendChild(stringNode);
         }
         else {
             this.stringRender?.update(this.context, this.viewContext);
@@ -5091,5 +5119,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map