slate-angular 20.0.0 → 20.2.0-next.0

package/index.d.ts

@@ -3,7 +3,7 @@ import { DOMEditor, DOMNode, DOMElement, DOMPoint, DOMRange, DOMStaticRange, DOM
 import * as slate from 'slate';
 import { Descendant, Range as Range$1, Node, Editor, NodeEntry, Point, Element as Element$1, Path, Text, LeafPosition, Ancestor, BaseRange } from 'slate';
 import * as i0 from '@angular/core';
-import { Injector, ViewContainerRef, TemplateRef, OnInit, ElementRef, OnChanges, OnDestroy, AfterViewChecked, DoCheck, Renderer2, ChangeDetectorRef, NgZone, SimpleChanges } from '@angular/core';
+import { Injector, ViewContainerRef, TemplateRef, OnInit, OnChanges, OnDestroy, AfterViewChecked, DoCheck, ElementRef, Renderer2, ChangeDetectorRef, NgZone, SimpleChanges } from '@angular/core';
 import * as i1 from '@angular/common';
 
 declare enum SlateErrorCode {
@@ -274,24 +274,27 @@ interface SlatePlaceholder extends BaseRange {
     placeholder: string;
 }
 
-declare class SlateBlockCard implements OnInit {
-    private elementRef;
-    centerContainer: ElementRef;
+declare const SLATE_BLOCK_CARD_CLASS_NAME = "slate-block-card";
+declare class SlateBlockCard {
     centerRootNodes: HTMLElement[];
-    get nativeElement(): any;
-    get centerContainerElement(): HTMLElement;
-    constructor(elementRef: ElementRef);
-    ngOnInit(): void;
+    nativeElement: HTMLElement;
+    centerContainer: HTMLElement;
+    onInit(): void;
+    createContent(): void;
     append(): void;
     initializeCenter(rootNodes: HTMLElement[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SlateBlockCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SlateBlockCard, "slate-block-card, [slateBlockCard]", never, {}, {}, never, never, true, never>;
+    onDestroy(): void;
 }
+declare const getBlockCardByNativeElement: (nativeElement: HTMLElement) => HTMLElement;
 
 declare class FlavourRef {
     instance: BaseFlavour;
     destroy(): void;
 }
+declare class BlockCardRef {
+    instance: SlateBlockCard;
+    destroy(): void;
+}
 
 declare class ListRender {
     private viewContext;
@@ -311,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;
@@ -339,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;
@@ -364,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;
@@ -382,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;
@@ -403,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;
 
@@ -456,17 +482,9 @@ declare const createText: (text: string) => {
     nativeElement: HTMLSpanElement;
 };
 
-declare class SlateString {
-    context: SlateLeafContext;
-    viewContext: SlateViewContext;
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SlateString, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SlateString, "span[slateString]", never, { "context": { "alias": "context"; "required": false; }; "viewContext": { "alias": "viewContext"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 declare class SlateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SlateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SlateModule, never, [typeof i1.CommonModule, typeof SlateEditable, typeof SlateBlockCard, typeof SlateChildrenOutlet, typeof SlateString], [typeof SlateEditable, typeof SlateChildrenOutlet, typeof SlateString]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SlateModule, never, [typeof i1.CommonModule, typeof SlateEditable, typeof SlateChildrenOutlet], [typeof SlateEditable, typeof SlateChildrenOutlet]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SlateModule>;
 }
 
@@ -543,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>;
 }
@@ -582,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;
@@ -601,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;
 }
@@ -687,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;
 /**
@@ -762,8 +785,9 @@ declare const getPlainText: (domNode: DOMNode) => string;
  */
 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, 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, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, 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.0.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;
     }