slate-angular 20.1.0 → 20.2.0-next.0

package/index.d.ts

@@ -314,6 +314,12 @@ declare class ListRender {
     destroy(): void;
 }
 
+interface SlateVirtualScrollConfig {
+    enabled?: boolean;
+    scrollTop: number;
+    viewportHeight: number;
+    bufferCount?: number;
+}
 declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChecked, DoCheck {
     elementRef: ElementRef;
     renderer2: Renderer2;
@@ -342,6 +348,9 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     trackBy: (node: Element$1) => any;
     readonly: boolean;
     placeholder: string;
+    set virtualScroll(config: SlateVirtualScrollConfig);
+    virtualTopPadding: number;
+    virtualBottomPadding: number;
     beforeInput: (event: Event) => void;
     blur: (event: Event) => void;
     click: (event: MouseEvent) => void;
@@ -367,6 +376,13 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     viewContainerRef: ViewContainerRef;
     getOutletParent: () => any;
     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 +401,13 @@ declare class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewCh
     initializeViewContext(): void;
     composePlaceholderDecorate(editor: Editor): SlatePlaceholder[];
     generateDecorations(): slate.BaseRange[];
+    private shouldUseVirtual;
+    private refreshVirtualView;
+    private getBlockHeight;
+    private buildAccumulatedHeight;
+    private getBufferBelowHeight;
+    private scheduleMeasureVisibleHeights;
+    private measureVisibleHeights;
     private addEventListener;
     private toSlateSelection;
     private onDOMBeforeInput;
@@ -406,7 +429,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 +561,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 +601,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 +621,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 +708,8 @@ 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 shallowCompare: (obj1: {}, obj2: {}) => boolean;
 /**
@@ -761,5 +789,5 @@ 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, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, 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 };

package/package.json

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

package/styles/index.scss

@@ -2,8 +2,21 @@
 .slate-editable-container {
     display: block;
     outline: none;
-    padding: 32px;
+    padding: 0 32px;
     white-space: break-spaces;
+    &::before,
+    &::after {
+        content: '';
+        display: block;
+        pointer-events: none;
+        height: 0;
+    }
+    &::before {
+        height: var(--virtual-top-padding, 0px);
+    }
+    &::after {
+        height: var(--virtual-bottom-padding, 0px);
+    }
     & [contenteditable='true'] {
         outline: none;
     }