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.
- package/fesm2022/slate-angular.mjs +210 -87
- package/fesm2022/slate-angular.mjs.map +1 -1
- package/index.d.ts +24 -6
- package/package.json +1 -1
- package/styles/index.scss +0 -13
|
@@ -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
|
-
|
|
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
|
-
|
|
2561
|
-
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
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
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
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 =
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
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
|
-
|
|
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", "
|
|
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
|
-
|
|
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
|