slate-angular 20.2.0-next.0 → 20.2.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -472,6 +472,7 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
472
472
  typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
473
473
  const VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT = 3;
474
474
  const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 40;
475
+ const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
475
476
 
476
477
  /**
477
478
  * Hotkey mappings for each platform.
@@ -1685,6 +1686,49 @@ class BaseFlavour {
1685
1686
  }
1686
1687
  }
1687
1688
 
1689
+ const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
1690
+ class SlateBlockCard {
1691
+ onInit() {
1692
+ const nativeElement = document.createElement('div');
1693
+ nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
1694
+ this.nativeElement = nativeElement;
1695
+ this.createContent();
1696
+ }
1697
+ createContent() {
1698
+ const leftCaret = document.createElement('span');
1699
+ leftCaret.setAttribute(`card-target`, 'card-left');
1700
+ leftCaret.classList.add('card-left');
1701
+ leftCaret.appendChild(getZeroTextNode());
1702
+ const rightCaret = document.createElement('span');
1703
+ rightCaret.setAttribute(`card-target`, 'card-right');
1704
+ rightCaret.classList.add('card-right');
1705
+ rightCaret.appendChild(getZeroTextNode());
1706
+ const center = document.createElement('div');
1707
+ center.setAttribute(`card-target`, 'card-center');
1708
+ this.nativeElement.appendChild(leftCaret);
1709
+ this.nativeElement.appendChild(center);
1710
+ this.nativeElement.appendChild(rightCaret);
1711
+ this.centerContainer = center;
1712
+ }
1713
+ append() {
1714
+ this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
1715
+ }
1716
+ initializeCenter(rootNodes) {
1717
+ this.centerRootNodes = rootNodes;
1718
+ this.append();
1719
+ }
1720
+ onDestroy() {
1721
+ this.nativeElement.remove();
1722
+ }
1723
+ }
1724
+ const getBlockCardByNativeElement = (nativeElement) => {
1725
+ const blockCardElement = nativeElement?.parentElement?.parentElement;
1726
+ if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
1727
+ return blockCardElement;
1728
+ }
1729
+ return null;
1730
+ };
1731
+
1688
1732
  const DEFAULT_ELEMENT_HEIGHT = 24;
1689
1733
  class BaseElementFlavour extends BaseFlavour {
1690
1734
  constructor() {
@@ -1781,7 +1825,10 @@ class BaseElementFlavour extends BaseFlavour {
1781
1825
  };
1782
1826
  }
1783
1827
  getRealHeight() {
1784
- return Promise.resolve(this.nativeElement.offsetHeight);
1828
+ const blockCard = getBlockCardByNativeElement(this.nativeElement);
1829
+ const target = blockCard || this.nativeElement;
1830
+ const computedStyle = getComputedStyle(target);
1831
+ return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
1785
1832
  }
1786
1833
  }
1787
1834
 
@@ -2209,49 +2256,6 @@ const createText = (text) => {
2209
2256
  return { nativeElement };
2210
2257
  };
2211
2258
 
2212
- const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
2213
- class SlateBlockCard {
2214
- onInit() {
2215
- const nativeElement = document.createElement('div');
2216
- nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
2217
- this.nativeElement = nativeElement;
2218
- this.createContent();
2219
- }
2220
- createContent() {
2221
- const leftCaret = document.createElement('span');
2222
- leftCaret.setAttribute(`card-target`, 'card-left');
2223
- leftCaret.classList.add('card-left');
2224
- leftCaret.appendChild(getZeroTextNode());
2225
- const rightCaret = document.createElement('span');
2226
- rightCaret.setAttribute(`card-target`, 'card-right');
2227
- rightCaret.classList.add('card-right');
2228
- rightCaret.appendChild(getZeroTextNode());
2229
- const center = document.createElement('div');
2230
- center.setAttribute(`card-target`, 'card-center');
2231
- this.nativeElement.appendChild(leftCaret);
2232
- this.nativeElement.appendChild(center);
2233
- this.nativeElement.appendChild(rightCaret);
2234
- this.centerContainer = center;
2235
- }
2236
- append() {
2237
- this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
2238
- }
2239
- initializeCenter(rootNodes) {
2240
- this.centerRootNodes = rootNodes;
2241
- this.append();
2242
- }
2243
- onDestroy() {
2244
- this.nativeElement.remove();
2245
- }
2246
- }
2247
- const getBlockCardByNativeElement = (nativeElement) => {
2248
- const blockCardElement = nativeElement?.parentElement?.parentElement;
2249
- if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
2250
- return blockCardElement;
2251
- }
2252
- return null;
2253
- };
2254
-
2255
2259
  class ListRender {
2256
2260
  constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
2257
2261
  this.viewContext = viewContext;
@@ -2549,6 +2553,7 @@ function executeAfterViewInit(editor) {
2549
2553
  clearAfterViewInitQueue(editor);
2550
2554
  }
2551
2555
 
2556
+ const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
2552
2557
  // not correctly clipboardData on beforeinput
2553
2558
  const forceOnDOMPaste = IS_SAFARI;
2554
2559
  class SlateEditable {
@@ -2556,11 +2561,15 @@ class SlateEditable {
2556
2561
  this.virtualConfig = config;
2557
2562
  this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
2558
2563
  this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
2559
- this.refreshVirtualView();
2560
- if (this.listRender.initialized) {
2561
- this.listRender.update(this.renderedChildren, this.editor, this.context);
2564
+ const virtualView = this.refreshVirtualView();
2565
+ const diff = this.diffVirtualView(virtualView);
2566
+ if (diff) {
2567
+ this.applyVirtualView(virtualView);
2568
+ if (this.listRender.initialized) {
2569
+ this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
2570
+ }
2571
+ this.scheduleMeasureVisibleHeights();
2562
2572
  }
2563
- this.scheduleMeasureVisibleHeights();
2564
2573
  });
2565
2574
  }
2566
2575
  get hasBeforeInputSupport() {
@@ -2585,8 +2594,6 @@ class SlateEditable {
2585
2594
  this.isStrictDecorate = true;
2586
2595
  this.trackBy = () => null;
2587
2596
  this.readonly = false;
2588
- this.virtualTopPadding = 0;
2589
- this.virtualBottomPadding = 0;
2590
2597
  //#endregion
2591
2598
  //#region DOM attr
2592
2599
  this.spellCheck = false;
@@ -2600,6 +2607,14 @@ class SlateEditable {
2600
2607
  this.getOutletParent = () => {
2601
2608
  return this.elementRef.nativeElement;
2602
2609
  };
2610
+ this.getOutletElement = () => {
2611
+ if (this.virtualScrollInitialized) {
2612
+ return this.virtualCenterOutlet;
2613
+ }
2614
+ else {
2615
+ return null;
2616
+ }
2617
+ };
2603
2618
  this.virtualConfig = {
2604
2619
  enabled: false,
2605
2620
  scrollTop: 0,
@@ -2609,6 +2624,7 @@ class SlateEditable {
2609
2624
  this.virtualVisibleIndexes = new Set();
2610
2625
  this.measuredHeights = new Map();
2611
2626
  this.measurePending = false;
2627
+ this.virtualScrollInitialized = false;
2612
2628
  }
2613
2629
  ngOnInit() {
2614
2630
  this.editor.injector = this.injector;
@@ -2632,7 +2648,8 @@ class SlateEditable {
2632
2648
  // add browser class
2633
2649
  let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
2634
2650
  browserClass && this.elementRef.nativeElement.classList.add(browserClass);
2635
- this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, () => null);
2651
+ this.initializeVirtualScrolling();
2652
+ this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
2636
2653
  }
2637
2654
  ngOnChanges(simpleChanges) {
2638
2655
  if (!this.initialized) {
@@ -2663,8 +2680,9 @@ class SlateEditable {
2663
2680
  if (value && value.length) {
2664
2681
  this.editor.children = value;
2665
2682
  this.initializeContext();
2666
- this.refreshVirtualView();
2667
- const childrenForRender = this.renderedChildren;
2683
+ const virtualView = this.refreshVirtualView();
2684
+ this.applyVirtualView(virtualView);
2685
+ const childrenForRender = virtualView.renderedChildren;
2668
2686
  if (!this.listRender.initialized) {
2669
2687
  this.listRender.initialize(childrenForRender, this.editor, this.context);
2670
2688
  }
@@ -2792,8 +2810,9 @@ class SlateEditable {
2792
2810
  ngDoCheck() { }
2793
2811
  forceRender() {
2794
2812
  this.updateContext();
2795
- this.refreshVirtualView();
2796
- this.listRender.update(this.renderedChildren, this.editor, this.context);
2813
+ const virtualView = this.refreshVirtualView();
2814
+ this.applyVirtualView(virtualView);
2815
+ this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
2797
2816
  this.scheduleMeasureVisibleHeights();
2798
2817
  // repair collaborative editing when Chinese input is interrupted by other users' cursors
2799
2818
  // when the DOMElement where the selection is located is removed
@@ -2833,8 +2852,9 @@ class SlateEditable {
2833
2852
  render() {
2834
2853
  const changed = this.updateContext();
2835
2854
  if (changed) {
2836
- this.refreshVirtualView();
2837
- this.listRender.update(this.renderedChildren, this.editor, this.context);
2855
+ const virtualView = this.refreshVirtualView();
2856
+ this.applyVirtualView(virtualView);
2857
+ this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
2838
2858
  this.scheduleMeasureVisibleHeights();
2839
2859
  }
2840
2860
  }
@@ -2901,29 +2921,56 @@ class SlateEditable {
2901
2921
  shouldUseVirtual() {
2902
2922
  return !!(this.virtualConfig && this.virtualConfig.enabled);
2903
2923
  }
2924
+ initializeVirtualScrolling() {
2925
+ if (this.virtualScrollInitialized) {
2926
+ return;
2927
+ }
2928
+ if (this.virtualConfig && this.virtualConfig.enabled) {
2929
+ this.virtualScrollInitialized = true;
2930
+ this.virtualTopHeightElement = document.createElement('div');
2931
+ this.virtualTopHeightElement.classList.add('virtual-top-height');
2932
+ this.virtualBottomHeightElement = document.createElement('div');
2933
+ this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
2934
+ this.virtualCenterOutlet = document.createElement('div');
2935
+ this.virtualCenterOutlet.classList.add('virtual-center-outlet');
2936
+ this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
2937
+ this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
2938
+ this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
2939
+ }
2940
+ }
2941
+ changeVirtualHeight(topHeight, bottomHeight) {
2942
+ if (!this.virtualScrollInitialized) {
2943
+ return;
2944
+ }
2945
+ this.virtualTopHeightElement.style.height = `${topHeight}px`;
2946
+ this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
2947
+ }
2904
2948
  refreshVirtualView() {
2905
2949
  const children = (this.editor.children || []);
2906
2950
  if (!children.length || !this.shouldUseVirtual()) {
2907
- this.renderedChildren = children;
2908
- this.virtualTopPadding = 0;
2909
- this.virtualBottomPadding = 0;
2910
- this.virtualVisibleIndexes.clear();
2911
- return;
2951
+ return {
2952
+ renderedChildren: children,
2953
+ visibleIndexes: new Set(),
2954
+ top: 0,
2955
+ bottom: 0,
2956
+ heights: []
2957
+ };
2912
2958
  }
2913
2959
  const scrollTop = this.virtualConfig.scrollTop ?? 0;
2914
2960
  const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
2915
2961
  if (!viewportHeight) {
2916
2962
  // 已经启用虚拟滚动,但可视区域高度还未获取到,先置空不渲染
2917
- this.renderedChildren = [];
2918
- this.virtualTopPadding = 0;
2919
- this.virtualBottomPadding = 0;
2920
- this.virtualVisibleIndexes.clear();
2921
- return;
2963
+ return {
2964
+ renderedChildren: [],
2965
+ visibleIndexes: new Set(),
2966
+ top: 0,
2967
+ bottom: 0,
2968
+ heights: []
2969
+ };
2922
2970
  }
2923
2971
  const bufferCount = this.virtualConfig.bufferCount ?? VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT;
2924
2972
  const heights = children.map((_, idx) => this.getBlockHeight(idx));
2925
2973
  const accumulatedHeights = this.buildAccumulatedHeight(heights);
2926
- const total = accumulatedHeights[accumulatedHeights.length - 1] || 0;
2927
2974
  let visibleStart = 0;
2928
2975
  // 按真实或估算高度往后累加,找到滚动起点所在块
2929
2976
  while (visibleStart < heights.length && accumulatedHeights[visibleStart + 1] <= scrollTop) {
@@ -2945,12 +2992,94 @@ class SlateEditable {
2945
2992
  accumulated += this.getBlockHeight(cursor);
2946
2993
  cursor++;
2947
2994
  }
2948
- const bottom = Math.max(total - top - accumulated, 0); // 下占位高度
2949
- this.renderedChildren = visible.length ? visible : children;
2950
- // padding 占位
2951
- this.virtualTopPadding = this.renderedChildren === visible ? Math.round(top) : 0;
2952
- this.virtualBottomPadding = this.renderedChildren === visible ? Math.round(bottom) : 0;
2953
- this.virtualVisibleIndexes = new Set(visibleIndexes);
2995
+ const bottom = heights.slice(cursor).reduce((acc, height) => acc + height, 0);
2996
+ const renderedChildren = visible.length ? visible : children;
2997
+ const visibleIndexesSet = new Set(visibleIndexes);
2998
+ return {
2999
+ renderedChildren,
3000
+ visibleIndexes: visibleIndexesSet,
3001
+ top,
3002
+ bottom,
3003
+ heights
3004
+ };
3005
+ }
3006
+ applyVirtualView(virtualView) {
3007
+ this.renderedChildren = virtualView.renderedChildren;
3008
+ this.changeVirtualHeight(virtualView.top, virtualView.bottom);
3009
+ this.virtualVisibleIndexes = virtualView.visibleIndexes;
3010
+ }
3011
+ diffVirtualView(virtualView) {
3012
+ if (!this.renderedChildren.length) {
3013
+ return true;
3014
+ }
3015
+ const oldVisibleIndexes = [...this.virtualVisibleIndexes];
3016
+ const newVisibleIndexes = [...virtualView.visibleIndexes];
3017
+ if (newVisibleIndexes[0] !== oldVisibleIndexes[0] ||
3018
+ newVisibleIndexes[newVisibleIndexes.length - 1] !== oldVisibleIndexes[oldVisibleIndexes.length - 1]) {
3019
+ if (localStorage.getItem(SLATE_DEBUG_KEY) === 'true') {
3020
+ const diffTopRenderedIndexes = [];
3021
+ const diffBottomRenderedIndexes = [];
3022
+ let direction = '';
3023
+ if (newVisibleIndexes[0] > oldVisibleIndexes[0]) {
3024
+ // 向下
3025
+ direction = 'down';
3026
+ for (let index = 0; index < oldVisibleIndexes.length; index++) {
3027
+ const element = oldVisibleIndexes[index];
3028
+ if (!newVisibleIndexes.includes(element)) {
3029
+ diffTopRenderedIndexes.push(element);
3030
+ }
3031
+ else {
3032
+ break;
3033
+ }
3034
+ }
3035
+ for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
3036
+ const element = newVisibleIndexes[index];
3037
+ if (!oldVisibleIndexes.includes(element)) {
3038
+ diffBottomRenderedIndexes.push(element);
3039
+ }
3040
+ else {
3041
+ break;
3042
+ }
3043
+ }
3044
+ }
3045
+ else {
3046
+ // 向上
3047
+ direction = 'up';
3048
+ for (let index = 0; index < newVisibleIndexes.length; index++) {
3049
+ const element = newVisibleIndexes[index];
3050
+ if (!oldVisibleIndexes.includes(element)) {
3051
+ diffTopRenderedIndexes.push(element);
3052
+ }
3053
+ else {
3054
+ break;
3055
+ }
3056
+ }
3057
+ for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
3058
+ const element = oldVisibleIndexes[index];
3059
+ if (!newVisibleIndexes.includes(element)) {
3060
+ diffBottomRenderedIndexes.push(element);
3061
+ }
3062
+ else {
3063
+ break;
3064
+ }
3065
+ }
3066
+ }
3067
+ console.log('oldVisibleIndexes:', oldVisibleIndexes);
3068
+ console.log('newVisibleIndexes:', newVisibleIndexes);
3069
+ const directionStr = direction === 'down' ? '+' : '-';
3070
+ console.log('diffTopRenderedIndexes:', directionStr, diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => virtualView.heights[index]));
3071
+ console.log('diffBottomRenderedIndexes:', directionStr, diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => virtualView.heights[index]));
3072
+ const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
3073
+ const needBottom = virtualView.heights
3074
+ .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
3075
+ .reduce((acc, height) => acc + height, 0);
3076
+ console.log('newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
3077
+ console.log('newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
3078
+ console.warn('=========== Dividing line ===========');
3079
+ }
3080
+ return true;
3081
+ }
3082
+ return false;
2954
3083
  }
2955
3084
  getBlockHeight(index) {
2956
3085
  const node = this.editor.children[index];
@@ -3013,10 +3142,7 @@ class SlateEditable {
3013
3142
  return;
3014
3143
  }
3015
3144
  view.getRealHeight()?.then(height => {
3016
- const actualHeight = height +
3017
- parseFloat(getComputedStyle(view.nativeElement).marginTop) +
3018
- parseFloat(getComputedStyle(view.nativeElement).marginBottom);
3019
- this.measuredHeights.set(key.id, actualHeight);
3145
+ this.measuredHeights.set(key.id, height);
3020
3146
  });
3021
3147
  });
3022
3148
  }
@@ -3719,7 +3845,7 @@ class SlateEditable {
3719
3845
  EDITOR_TO_ON_CHANGE.delete(this.editor);
3720
3846
  }
3721
3847
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
3722
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", virtualScroll: "virtualScroll", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "style.--virtual-top-padding.px": "this.virtualTopPadding", "style.--virtual-bottom-padding.px": "this.virtualBottomPadding", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
3848
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", virtualScroll: "virtualScroll", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
3723
3849
  {
3724
3850
  provide: NG_VALUE_ACCESSOR,
3725
3851
  useExisting: forwardRef(() => SlateEditable),
@@ -3774,12 +3900,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
3774
3900
  type: Input
3775
3901
  }], virtualScroll: [{
3776
3902
  type: Input
3777
- }], virtualTopPadding: [{
3778
- type: HostBinding,
3779
- args: ['style.--virtual-top-padding.px']
3780
- }], virtualBottomPadding: [{
3781
- type: HostBinding,
3782
- args: ['style.--virtual-bottom-padding.px']
3783
3903
  }], beforeInput: [{
3784
3904
  type: Input
3785
3905
  }], blur: [{
@@ -4058,7 +4178,10 @@ class BaseElementComponent extends BaseComponent {
4058
4178
  };
4059
4179
  }
4060
4180
  getRealHeight() {
4061
- return Promise.resolve(this.nativeElement.offsetHeight);
4181
+ const blockCard = getBlockCardByNativeElement(this.nativeElement);
4182
+ const target = blockCard || this.nativeElement;
4183
+ const computedStyle = getComputedStyle(target);
4184
+ return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
4062
4185
  }
4063
4186
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
4064
4187
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
@@ -4214,5 +4337,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
4214
4337
  * Generated bundle index. Do not edit.
4215
4338
  */
4216
4339
 
4217
- 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 };
4340
+ 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 };
4218
4341
  //# sourceMappingURL=slate-angular.mjs.map