slate-angular 20.1.0 → 20.2.0-next.1

package/index.d.ts

@@ -314,6 +314,24 @@ declare class ListRender {
     destroy(): void;
 }
 
+interface SlateVirtualScrollConfig {
+    enabled?: boolean;
+    scrollTop: number;
+    viewportHeight: number;
+    blockHeight?: number;
+    bufferCount?: number;
+}
+interface VirtualViewResult {
+    renderedChildren: Element$1[];
+    visibleIndexes: Set<number>;
+    top: number;
+    bottom: number;
+    heights: number[];
+}
+
+type SafeAny = any;
+
+declare const JUST_NOW_UPDATED_VIRTUAL_VIEW: WeakMap<AngularEditor, boolean>;
 declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChecked, DoCheck {
     elementRef: ElementRef;
     renderer2: Renderer2;
@@ -342,6 +360,7 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     trackBy: (node: Element$1) => any;
     readonly: boolean;
     placeholder: string;
+    set virtualScroll(config: SlateVirtualScrollConfig);
     beforeInput: (event: Event) => void;
     blur: (event: Event) => void;
     click: (event: MouseEvent) => void;
@@ -366,7 +385,15 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     get hasBeforeInputSupport(): boolean;
     viewContainerRef: ViewContainerRef;
     getOutletParent: () => any;
+    getOutletElement: () => HTMLElement;
     listRender: ListRender;
+    private virtualConfig;
+    private renderedChildren;
+    private virtualVisibleIndexes;
+    private measuredHeights;
+    private measurePending;
+    private refreshVirtualViewAnimId;
+    private measureVisibleHeightsAnimId;
     constructor(elementRef: ElementRef, renderer2: Renderer2, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector);
     ngOnInit(): void;
     ngOnChanges(simpleChanges: SimpleChanges): void;
@@ -385,6 +412,21 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     initializeViewContext(): void;
     composePlaceholderDecorate(editor: Editor): SlatePlaceholder[];
     generateDecorations(): slate.BaseRange[];
+    private shouldUseVirtual;
+    virtualScrollInitialized: boolean;
+    virtualTopHeightElement: HTMLElement;
+    virtualBottomHeightElement: HTMLElement;
+    virtualCenterOutlet: HTMLElement;
+    initializeVirtualScrolling(): void;
+    changeVirtualHeight(topHeight: number, bottomHeight: number): void;
+    private refreshVirtualView;
+    private applyVirtualView;
+    private diffVirtualView;
+    private getBlockHeight;
+    private buildAccumulatedHeight;
+    private getBufferBelowHeight;
+    private scheduleMeasureVisibleHeights;
+    private measureVisibleHeights;
     private addEventListener;
     private toSlateSelection;
     private onDOMBeforeInput;
@@ -406,7 +448,7 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     private isDOMEventHandled;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SlateEditable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SlateEditable, "slate-editable", never, { "editor": { "alias": "editor"; "required": false; }; "renderElement": { "alias": "renderElement"; "required": false; }; "renderLeaf": { "alias": "renderLeaf"; "required": false; }; "renderText": { "alias": "renderText"; "required": false; }; "decorate": { "alias": "decorate"; "required": false; }; "placeholderDecorate": { "alias": "placeholderDecorate"; "required": false; }; "scrollSelectionIntoView": { "alias": "scrollSelectionIntoView"; "required": false; }; "isStrictDecorate": { "alias": "isStrictDecorate"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "beforeInput": { "alias": "beforeInput"; "required": false; }; "blur": { "alias": "blur"; "required": false; }; "click": { "alias": "click"; "required": false; }; "compositionEnd": { "alias": "compositionEnd"; "required": false; }; "compositionUpdate": { "alias": "compositionUpdate"; "required": false; }; "compositionStart": { "alias": "compositionStart"; "required": false; }; "copy": { "alias": "copy"; "required": false; }; "cut": { "alias": "cut"; "required": false; }; "dragOver": { "alias": "dragOver"; "required": false; }; "dragStart": { "alias": "dragStart"; "required": false; }; "dragEnd": { "alias": "dragEnd"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "focus": { "alias": "focus"; "required": false; }; "keydown": { "alias": "keydown"; "required": false; }; "paste": { "alias": "paste"; "required": false; }; "spellCheck": { "alias": "spellCheck"; "required": false; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlateEditable, "slate-editable", never, { "editor": { "alias": "editor"; "required": false; }; "renderElement": { "alias": "renderElement"; "required": false; }; "renderLeaf": { "alias": "renderLeaf"; "required": false; }; "renderText": { "alias": "renderText"; "required": false; }; "decorate": { "alias": "decorate"; "required": false; }; "placeholderDecorate": { "alias": "placeholderDecorate"; "required": false; }; "scrollSelectionIntoView": { "alias": "scrollSelectionIntoView"; "required": false; }; "isStrictDecorate": { "alias": "isStrictDecorate"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "beforeInput": { "alias": "beforeInput"; "required": false; }; "blur": { "alias": "blur"; "required": false; }; "click": { "alias": "click"; "required": false; }; "compositionEnd": { "alias": "compositionEnd"; "required": false; }; "compositionUpdate": { "alias": "compositionUpdate"; "required": false; }; "compositionStart": { "alias": "compositionStart"; "required": false; }; "copy": { "alias": "copy"; "required": false; }; "cut": { "alias": "cut"; "required": false; }; "dragOver": { "alias": "dragOver"; "required": false; }; "dragStart": { "alias": "dragStart"; "required": false; }; "dragEnd": { "alias": "dragEnd"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "focus": { "alias": "focus"; "required": false; }; "keydown": { "alias": "keydown"; "required": false; }; "paste": { "alias": "paste"; "required": false; }; "spellCheck": { "alias": "spellCheck"; "required": false; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; }; "autoCapitalize": { "alias": "autoCapitalize"; "required": false; }; }, {}, never, never, true, never>;
 }
 declare const defaultScrollSelectionIntoView: (editor: AngularEditor, domRange: DOMRange) => void;
 
@@ -538,6 +580,7 @@ declare class BaseElementComponent<T extends Element$1 = Element$1, K extends An
     onContextChange(): void;
     updateChildrenView(): void;
     getChildrenContext(): SlateChildrenContext;
+    getRealHeight(): Promise<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseElementComponent<any, any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseElementComponent<any, any>, never, never, {}, {}, never, never, true, never>;
 }
@@ -577,6 +620,7 @@ declare class BaseLeafComponent extends BaseComponent<SlateLeafContext> implemen
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLeafComponent, never, never, {}, {}, never, never, true, never>;
 }
 
+declare const DEFAULT_ELEMENT_HEIGHT = 24;
 declare abstract class BaseElementFlavour<T extends Element$1 = Element$1, K extends AngularEditor = AngularEditor> extends BaseFlavour<SlateElementContext<T>, K> {
     childrenContext: SlateChildrenContext;
     get element(): T;
@@ -596,6 +640,7 @@ declare abstract class BaseElementFlavour<T extends Element$1 = Element$1, K ext
     onContextChange(): void;
     updateChildrenView(): void;
     getChildrenContext(): SlateChildrenContext;
+    getRealHeight(): Promise<number>;
     abstract render(): void;
     abstract rerender(): void;
 }
@@ -682,6 +727,9 @@ declare const IS_QQBROWSER: boolean;
 declare const IS_UC_MOBILE: boolean;
 declare const IS_WECHATBROWSER: boolean;
 declare const HAS_BEFORE_INPUT_SUPPORT: boolean;
+declare const VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT = 3;
+declare const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 40;
+declare const SLATE_DEBUG_KEY = "__SLATE_DEBUG__";
 
 declare const shallowCompare: (obj1: {}, obj2: {}) => boolean;
 /**
@@ -759,7 +807,5 @@ declare const getSelection: (root: Document | ShadowRoot) => Selection | null;
 declare const getContentHeight: (element: Element) => number;
 declare const getZeroTextNode: () => DOMText;
 
-type SafeAny = any;
-
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, 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_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
-export type { AfterContextChange, BaseEmbeddedView, BeforeContextChange, ClipboardData, ComponentType, OriginEvent, SafeAny, SlateChildrenContext, SlateElementAttributes, SlateElementContext, SlateError, SlateLeafContext, SlatePlaceholder, SlateStringContext, SlateTextContext, SlateViewContext, ThrottleRAF, ViewType };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, 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_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, JUST_NOW_UPDATED_VIRTUAL_VIEW, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export type { AfterContextChange, BaseEmbeddedView, BeforeContextChange, ClipboardData, ComponentType, OriginEvent, SafeAny, SlateChildrenContext, SlateElementAttributes, SlateElementContext, SlateError, SlateLeafContext, SlatePlaceholder, SlateStringContext, SlateTextContext, SlateViewContext, SlateVirtualScrollConfig, ThrottleRAF, ViewType, VirtualViewResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-angular",
-  "version": "20.1.0",
+  "version": "20.2.0-next.1",
   "description": "Angular view layer for Slate",
   "author": "pubuzhixing <pubuzhixing@gmail.com>",
   "homepage": "https://github.com/worktile/slate-angular#readme",

package/styles/index.scss

@@ -2,7 +2,7 @@
 .slate-editable-container {
     display: block;
     outline: none;
-    padding: 32px;
+    padding: 0 32px;
     white-space: break-spaces;
     & [contenteditable='true'] {
         outline: none;