slate-angular 16.1.0-next.7 → 16.1.0-next.9
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/components/children/children-outlet.component.d.ts +9 -0
- package/components/editable/editable.component.d.ts +1 -1
- package/esm2022/components/children/children-outlet.component.mjs +22 -0
- package/esm2022/components/children/children.component.mjs +2 -4
- package/esm2022/components/editable/editable.component.mjs +20 -6
- package/esm2022/components/leaf/token.mjs +1 -1
- package/esm2022/components/string/default-string.component.mjs +1 -1
- package/esm2022/components/string/string.component.mjs +1 -1
- package/esm2022/components/text/token.mjs +1 -1
- package/esm2022/module.mjs +7 -16
- package/esm2022/plugins/angular-editor.mjs +24 -4
- package/esm2022/plugins/with-angular.mjs +4 -4
- package/esm2022/public-api.mjs +2 -1
- package/esm2022/utils/constants.mjs +2 -0
- package/esm2022/utils/throttle.mjs +1 -1
- package/esm2022/view/base.mjs +29 -10
- package/esm2022/view/container.mjs +1 -1
- package/esm2022/view/context.mjs +1 -1
- package/esm2022/view/render/leaves-render.mjs +8 -6
- package/esm2022/view/render/list-render.mjs +9 -8
- package/esm2022/view/render/utils.mjs +20 -7
- package/fesm2022/slate-angular.mjs +133 -55
- package/fesm2022/slate-angular.mjs.map +1 -1
- package/module.d.ts +2 -1
- package/package.json +5 -5
- package/plugins/angular-editor.d.ts +1 -1
- package/public-api.d.ts +1 -0
- package/utils/constants.d.ts +1 -0
- package/view/base.d.ts +7 -2
- package/view/context.d.ts +0 -1
- package/view/render/leaves-render.d.ts +2 -1
- package/view/render/list-render.d.ts +2 -1
- package/view/render/utils.d.ts +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Editor, Range, Transforms, Path,
|
|
1
|
+
import { Editor, Range, Element, Transforms, Path, Text as Text$1, Node } from 'slate';
|
|
2
2
|
import { isKeyHotkey } from 'is-hotkey';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, InjectionToken, ComponentRef, IterableDiffers, HostBinding, inject, ViewContainerRef, forwardRef, ElementRef, Inject, NgModule } from '@angular/core';
|
|
@@ -415,7 +415,7 @@ const AngularEditor = {
|
|
|
415
415
|
const [start, end] = Range.edges(selection);
|
|
416
416
|
const endBlock = Editor.above(editor, {
|
|
417
417
|
at: end,
|
|
418
|
-
match: node => Editor.isBlock(editor, node)
|
|
418
|
+
match: node => Element.isElement(node) && Editor.isBlock(editor, node)
|
|
419
419
|
});
|
|
420
420
|
return Editor.isStart(editor, end, endBlock[1]);
|
|
421
421
|
},
|
|
@@ -637,7 +637,7 @@ const AngularEditor = {
|
|
|
637
637
|
// If the drop target is inside a void node, move it into either the
|
|
638
638
|
// next or previous node, depending on which side the `x` and `y`
|
|
639
639
|
// coordinates are closest to.
|
|
640
|
-
if (Editor.isVoid(editor, node)) {
|
|
640
|
+
if (Element.isElement(node) && Editor.isVoid(editor, node)) {
|
|
641
641
|
const rect = target.getBoundingClientRect();
|
|
642
642
|
const isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
|
|
643
643
|
const edge = Editor.point(editor, path, {
|
|
@@ -815,9 +815,29 @@ const AngularEditor = {
|
|
|
815
815
|
if (anchorNode == null || focusNode == null || anchorOffset == null || focusOffset == null) {
|
|
816
816
|
throw new Error(`Cannot resolve a Slate range from DOM range: ${domRange}`);
|
|
817
817
|
}
|
|
818
|
+
// COMPAT: Triple-clicking a word in chrome will sometimes place the focus
|
|
819
|
+
// inside a `contenteditable="false"` DOM node following the word, which
|
|
820
|
+
// will cause `toSlatePoint` to throw an error. (2023/03/07)
|
|
821
|
+
if ('getAttribute' in focusNode &&
|
|
822
|
+
focusNode.getAttribute('contenteditable') === 'false' &&
|
|
823
|
+
focusNode.getAttribute('data-slate-void') !== 'true') {
|
|
824
|
+
focusNode = anchorNode;
|
|
825
|
+
focusOffset = anchorNode.textContent?.length || 0;
|
|
826
|
+
}
|
|
818
827
|
const anchor = AngularEditor.toSlatePoint(editor, [anchorNode, anchorOffset]);
|
|
819
828
|
const focus = isCollapsed ? anchor : AngularEditor.toSlatePoint(editor, [focusNode, focusOffset]);
|
|
820
|
-
|
|
829
|
+
let range = { anchor: anchor, focus: focus };
|
|
830
|
+
// if the selection is a hanging range that ends in a void
|
|
831
|
+
// and the DOM focus is an Element
|
|
832
|
+
// (meaning that the selection ends before the element)
|
|
833
|
+
// unhang the range to avoid mistakenly including the void
|
|
834
|
+
if (Range.isExpanded(range) &&
|
|
835
|
+
Range.isForward(range) &&
|
|
836
|
+
isDOMElement(focusNode) &&
|
|
837
|
+
Editor.void(editor, { at: range.focus, mode: 'highest' })) {
|
|
838
|
+
range = Editor.unhangRange(editor, range, { voids: true });
|
|
839
|
+
}
|
|
840
|
+
return range;
|
|
821
841
|
},
|
|
822
842
|
isLeafBlock(editor, node) {
|
|
823
843
|
return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
|
|
@@ -1080,7 +1100,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
|
|
|
1080
1100
|
}
|
|
1081
1101
|
if (editor.selection && Range.isCollapsed(editor.selection)) {
|
|
1082
1102
|
const parentBlockEntry = Editor.above(editor, {
|
|
1083
|
-
match: n => Editor.isBlock(editor, n),
|
|
1103
|
+
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
|
|
1084
1104
|
at: editor.selection
|
|
1085
1105
|
});
|
|
1086
1106
|
if (parentBlockEntry) {
|
|
@@ -1230,7 +1250,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
|
|
|
1230
1250
|
}
|
|
1231
1251
|
else {
|
|
1232
1252
|
const node = Node.parent(editor, selection.anchor.path);
|
|
1233
|
-
if (Editor.isVoid(editor, node)) {
|
|
1253
|
+
if (Element.isElement(node) && Editor.isVoid(editor, node)) {
|
|
1234
1254
|
Transforms.delete(editor);
|
|
1235
1255
|
}
|
|
1236
1256
|
}
|
|
@@ -1712,8 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1712
1732
|
selector: 'slate-children',
|
|
1713
1733
|
template: ``,
|
|
1714
1734
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1715
|
-
standalone: true
|
|
1716
|
-
imports: [NgFor]
|
|
1735
|
+
standalone: true
|
|
1717
1736
|
}]
|
|
1718
1737
|
}], propDecorators: { children: [{
|
|
1719
1738
|
type: Input
|
|
@@ -1813,14 +1832,20 @@ function updateContext(view, newContext, viewContext) {
|
|
|
1813
1832
|
view.detectChanges();
|
|
1814
1833
|
}
|
|
1815
1834
|
}
|
|
1816
|
-
function mount(views, blockCards, outletElement) {
|
|
1835
|
+
function mount(views, blockCards, outletParent, outletElement) {
|
|
1817
1836
|
if (views.length > 0) {
|
|
1818
|
-
const
|
|
1837
|
+
const fragment = document.createDocumentFragment();
|
|
1819
1838
|
views.forEach((view, index) => {
|
|
1820
1839
|
const blockCard = blockCards ? blockCards[index] : undefined;
|
|
1821
|
-
|
|
1840
|
+
fragment.append(...getRootNodes(view, blockCard));
|
|
1822
1841
|
});
|
|
1823
|
-
outletElement
|
|
1842
|
+
if (outletElement) {
|
|
1843
|
+
outletParent.insertBefore(fragment, outletElement);
|
|
1844
|
+
outletElement.remove();
|
|
1845
|
+
}
|
|
1846
|
+
else {
|
|
1847
|
+
outletParent.prepend(fragment);
|
|
1848
|
+
}
|
|
1824
1849
|
}
|
|
1825
1850
|
}
|
|
1826
1851
|
function getRootNodes(ref, blockCard) {
|
|
@@ -1849,7 +1874,7 @@ function getRootNodes(ref, blockCard) {
|
|
|
1849
1874
|
return result;
|
|
1850
1875
|
}
|
|
1851
1876
|
}
|
|
1852
|
-
function mountOnItemChange(index, item, views, blockCards,
|
|
1877
|
+
function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
|
|
1853
1878
|
const view = views[index];
|
|
1854
1879
|
let rootNodes = getRootNodes(view);
|
|
1855
1880
|
if (blockCards) {
|
|
@@ -1860,7 +1885,14 @@ function mountOnItemChange(index, item, views, blockCards, outletElement, viewCo
|
|
|
1860
1885
|
}
|
|
1861
1886
|
}
|
|
1862
1887
|
if (index === 0) {
|
|
1863
|
-
|
|
1888
|
+
if (firstRootNode) {
|
|
1889
|
+
rootNodes.forEach(rootNode => {
|
|
1890
|
+
firstRootNode.insertAdjacentElement('beforebegin', rootNode);
|
|
1891
|
+
});
|
|
1892
|
+
}
|
|
1893
|
+
else {
|
|
1894
|
+
outletParent.prepend(...rootNodes);
|
|
1895
|
+
}
|
|
1864
1896
|
}
|
|
1865
1897
|
else {
|
|
1866
1898
|
const previousView = views[index - 1];
|
|
@@ -1875,9 +1907,10 @@ function mountOnItemChange(index, item, views, blockCards, outletElement, viewCo
|
|
|
1875
1907
|
}
|
|
1876
1908
|
|
|
1877
1909
|
class ListRender {
|
|
1878
|
-
constructor(viewContext, viewContainerRef, getOutletElement) {
|
|
1910
|
+
constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
|
|
1879
1911
|
this.viewContext = viewContext;
|
|
1880
1912
|
this.viewContainerRef = viewContainerRef;
|
|
1913
|
+
this.getOutletParent = getOutletParent;
|
|
1881
1914
|
this.getOutletElement = getOutletElement;
|
|
1882
1915
|
this.views = [];
|
|
1883
1916
|
this.blockCards = [];
|
|
@@ -1901,7 +1934,7 @@ class ListRender {
|
|
|
1901
1934
|
this.viewTypes.push(viewType);
|
|
1902
1935
|
this.blockCards.push(blockCard);
|
|
1903
1936
|
});
|
|
1904
|
-
mount(this.views, this.blockCards, this.getOutletElement());
|
|
1937
|
+
mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
|
|
1905
1938
|
const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
|
|
1906
1939
|
this.differ = newDiffers.find(children).create(trackBy$1(this.viewContext));
|
|
1907
1940
|
this.differ.diff(children);
|
|
@@ -1911,10 +1944,11 @@ class ListRender {
|
|
|
1911
1944
|
this.initialize(children, parent, childrenContext);
|
|
1912
1945
|
return;
|
|
1913
1946
|
}
|
|
1914
|
-
const
|
|
1947
|
+
const outletParent = this.getOutletParent();
|
|
1915
1948
|
const diffResult = this.differ.diff(children);
|
|
1916
1949
|
const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
|
|
1917
1950
|
if (diffResult) {
|
|
1951
|
+
let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
|
|
1918
1952
|
const newContexts = [];
|
|
1919
1953
|
const newViewTypes = [];
|
|
1920
1954
|
const newViews = [];
|
|
@@ -1933,7 +1967,7 @@ class ListRender {
|
|
|
1933
1967
|
newContexts.push(context);
|
|
1934
1968
|
newViews.push(view);
|
|
1935
1969
|
newBlockCards.push(blockCard);
|
|
1936
|
-
mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards,
|
|
1970
|
+
mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
|
|
1937
1971
|
}
|
|
1938
1972
|
else {
|
|
1939
1973
|
const previousView = this.views[record.previousIndex];
|
|
@@ -1964,7 +1998,7 @@ class ListRender {
|
|
|
1964
1998
|
newBlockCards.push(blockCard);
|
|
1965
1999
|
}
|
|
1966
2000
|
});
|
|
1967
|
-
diffResult.forEachOperation(
|
|
2001
|
+
diffResult.forEachOperation(record => {
|
|
1968
2002
|
// removed
|
|
1969
2003
|
if (record.currentIndex === null) {
|
|
1970
2004
|
const view = this.views[record.previousIndex];
|
|
@@ -1974,7 +2008,7 @@ class ListRender {
|
|
|
1974
2008
|
}
|
|
1975
2009
|
// moved
|
|
1976
2010
|
if (record.previousIndex !== null && record.currentIndex !== null) {
|
|
1977
|
-
mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards,
|
|
2011
|
+
mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
|
|
1978
2012
|
// Solve the block-card DOMElement loss when moving nodes
|
|
1979
2013
|
newBlockCards[record.currentIndex]?.instance.append();
|
|
1980
2014
|
}
|
|
@@ -2023,7 +2057,6 @@ function getContext$1(index, item, parentPath, childrenContext, viewContext) {
|
|
|
2023
2057
|
}
|
|
2024
2058
|
if (isVoid) {
|
|
2025
2059
|
elementContext.attributes['data-slate-void'] = true;
|
|
2026
|
-
elementContext.attributes.contenteditable = false;
|
|
2027
2060
|
}
|
|
2028
2061
|
return elementContext;
|
|
2029
2062
|
}
|
|
@@ -2118,9 +2151,10 @@ function memoizedTextContext(prev, next) {
|
|
|
2118
2151
|
}
|
|
2119
2152
|
|
|
2120
2153
|
class LeavesRender {
|
|
2121
|
-
constructor(viewContext, viewContainerRef, getOutletElement) {
|
|
2154
|
+
constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
|
|
2122
2155
|
this.viewContext = viewContext;
|
|
2123
2156
|
this.viewContainerRef = viewContainerRef;
|
|
2157
|
+
this.getOutletParent = getOutletParent;
|
|
2124
2158
|
this.getOutletElement = getOutletElement;
|
|
2125
2159
|
this.views = [];
|
|
2126
2160
|
this.contexts = [];
|
|
@@ -2138,16 +2172,17 @@ class LeavesRender {
|
|
|
2138
2172
|
this.contexts.push(context);
|
|
2139
2173
|
this.viewTypes.push(viewType);
|
|
2140
2174
|
});
|
|
2141
|
-
mount(this.views, null, this.getOutletElement());
|
|
2175
|
+
mount(this.views, null, this.getOutletParent(), this.getOutletElement());
|
|
2142
2176
|
const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
|
|
2143
2177
|
this.differ = newDiffers.find(this.leaves).create(trackBy(this.viewContext));
|
|
2144
2178
|
this.differ.diff(this.leaves);
|
|
2145
2179
|
}
|
|
2146
2180
|
update(context) {
|
|
2147
2181
|
const { leaves, contexts } = this.getLeaves(context);
|
|
2148
|
-
const
|
|
2182
|
+
const outletParent = this.getOutletParent();
|
|
2149
2183
|
const diffResult = this.differ.diff(leaves);
|
|
2150
2184
|
if (diffResult) {
|
|
2185
|
+
let firstRootNode = getRootNodes(this.views[0])[0];
|
|
2151
2186
|
const newContexts = [];
|
|
2152
2187
|
const newViewTypes = [];
|
|
2153
2188
|
const newViews = [];
|
|
@@ -2160,7 +2195,7 @@ class LeavesRender {
|
|
|
2160
2195
|
view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
|
|
2161
2196
|
newContexts.push(context);
|
|
2162
2197
|
newViews.push(view);
|
|
2163
|
-
mountOnItemChange(record.currentIndex, record.item, newViews, null,
|
|
2198
|
+
mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
|
|
2164
2199
|
}
|
|
2165
2200
|
else {
|
|
2166
2201
|
const previousView = this.views[record.previousIndex];
|
|
@@ -2185,7 +2220,7 @@ class LeavesRender {
|
|
|
2185
2220
|
view.destroy();
|
|
2186
2221
|
});
|
|
2187
2222
|
diffResult.forEachMovedItem(record => {
|
|
2188
|
-
mountOnItemChange(record.currentIndex, record.item, newViews, null,
|
|
2223
|
+
mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
|
|
2189
2224
|
});
|
|
2190
2225
|
this.viewTypes = newViewTypes;
|
|
2191
2226
|
this.views = newViews;
|
|
@@ -2219,6 +2254,26 @@ function trackBy(viewContext) {
|
|
|
2219
2254
|
};
|
|
2220
2255
|
}
|
|
2221
2256
|
|
|
2257
|
+
class SlateChildrenOutlet {
|
|
2258
|
+
constructor(elementRef) {
|
|
2259
|
+
this.elementRef = elementRef;
|
|
2260
|
+
}
|
|
2261
|
+
getNativeElement() {
|
|
2262
|
+
return this.elementRef.nativeElement;
|
|
2263
|
+
}
|
|
2264
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildrenOutlet, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SlateChildrenOutlet, isStandalone: true, selector: "slate-children-outlet", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2266
|
+
}
|
|
2267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateChildrenOutlet, decorators: [{
|
|
2268
|
+
type: Component,
|
|
2269
|
+
args: [{
|
|
2270
|
+
selector: 'slate-children-outlet',
|
|
2271
|
+
template: ``,
|
|
2272
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2273
|
+
standalone: true
|
|
2274
|
+
}]
|
|
2275
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
|
|
2276
|
+
|
|
2222
2277
|
/**
|
|
2223
2278
|
* base class for custom element component or text component
|
|
2224
2279
|
*/
|
|
@@ -2333,9 +2388,15 @@ class BaseElementComponent extends BaseComponent {
|
|
|
2333
2388
|
constructor() {
|
|
2334
2389
|
super(...arguments);
|
|
2335
2390
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
2336
|
-
this.
|
|
2391
|
+
this.getOutletParent = () => {
|
|
2337
2392
|
return this.elementRef.nativeElement;
|
|
2338
2393
|
};
|
|
2394
|
+
this.getOutletElement = () => {
|
|
2395
|
+
if (this.childrenOutletInstance) {
|
|
2396
|
+
return this.childrenOutletInstance.getNativeElement();
|
|
2397
|
+
}
|
|
2398
|
+
return null;
|
|
2399
|
+
};
|
|
2339
2400
|
}
|
|
2340
2401
|
get element() {
|
|
2341
2402
|
return this._context && this._context.element;
|
|
@@ -2363,7 +2424,7 @@ class BaseElementComponent extends BaseComponent {
|
|
|
2363
2424
|
this.nativeElement.setAttribute(key, this._context.attributes[key]);
|
|
2364
2425
|
}
|
|
2365
2426
|
this.initialized = true;
|
|
2366
|
-
this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletElement);
|
|
2427
|
+
this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
|
|
2367
2428
|
this.listRender.initialize(this.children, this.element, this.childrenContext);
|
|
2368
2429
|
}
|
|
2369
2430
|
updateWeakMap() {
|
|
@@ -2397,11 +2458,14 @@ class BaseElementComponent extends BaseComponent {
|
|
|
2397
2458
|
};
|
|
2398
2459
|
}
|
|
2399
2460
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2400
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseElementComponent, usesInheritance: true, ngImport: i0 }); }
|
|
2461
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseElementComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
|
|
2401
2462
|
}
|
|
2402
2463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseElementComponent, decorators: [{
|
|
2403
2464
|
type: Directive
|
|
2404
|
-
}]
|
|
2465
|
+
}], propDecorators: { childrenOutletInstance: [{
|
|
2466
|
+
type: ViewChild,
|
|
2467
|
+
args: [SlateChildrenOutlet, { static: true }]
|
|
2468
|
+
}] } });
|
|
2405
2469
|
/**
|
|
2406
2470
|
* base class for custom text component
|
|
2407
2471
|
*/
|
|
@@ -2409,16 +2473,22 @@ class BaseTextComponent extends BaseComponent {
|
|
|
2409
2473
|
constructor() {
|
|
2410
2474
|
super(...arguments);
|
|
2411
2475
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
2412
|
-
this.
|
|
2476
|
+
this.getOutletParent = () => {
|
|
2413
2477
|
return this.elementRef.nativeElement;
|
|
2414
2478
|
};
|
|
2479
|
+
this.getOutletElement = () => {
|
|
2480
|
+
if (this.childrenOutletInstance) {
|
|
2481
|
+
return this.childrenOutletInstance.getNativeElement();
|
|
2482
|
+
}
|
|
2483
|
+
return null;
|
|
2484
|
+
};
|
|
2415
2485
|
}
|
|
2416
2486
|
get text() {
|
|
2417
2487
|
return this._context && this._context.text;
|
|
2418
2488
|
}
|
|
2419
2489
|
ngOnInit() {
|
|
2420
2490
|
this.initialized = true;
|
|
2421
|
-
this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletElement);
|
|
2491
|
+
this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
|
|
2422
2492
|
this.leavesRender.initialize(this.context);
|
|
2423
2493
|
}
|
|
2424
2494
|
updateWeakMap() {
|
|
@@ -2438,11 +2508,14 @@ class BaseTextComponent extends BaseComponent {
|
|
|
2438
2508
|
this.leavesRender.update(this.context);
|
|
2439
2509
|
}
|
|
2440
2510
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2441
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseTextComponent, usesInheritance: true, ngImport: i0 }); }
|
|
2511
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: BaseTextComponent, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
|
|
2442
2512
|
}
|
|
2443
2513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseTextComponent, decorators: [{
|
|
2444
2514
|
type: Directive
|
|
2445
|
-
}]
|
|
2515
|
+
}], propDecorators: { childrenOutletInstance: [{
|
|
2516
|
+
type: ViewChild,
|
|
2517
|
+
args: [SlateChildrenOutlet, { static: true }]
|
|
2518
|
+
}] } });
|
|
2446
2519
|
|
|
2447
2520
|
class SlateLeaves extends ViewContainer {
|
|
2448
2521
|
constructor() {
|
|
@@ -2842,6 +2915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
2842
2915
|
|
|
2843
2916
|
const SLATE_DEFAULT_LEAF_COMPONENT_TOKEN = new InjectionToken('slate-default-leaf-token');
|
|
2844
2917
|
|
|
2918
|
+
const TRIPLE_CLICK = 3;
|
|
2919
|
+
|
|
2845
2920
|
// not correctly clipboardData on beforeinput
|
|
2846
2921
|
const forceOnDOMPaste = IS_SAFARI;
|
|
2847
2922
|
class SlateEditable {
|
|
@@ -2880,7 +2955,7 @@ class SlateEditable {
|
|
|
2880
2955
|
this.dataSlateNode = 'value';
|
|
2881
2956
|
this.dataGramm = false;
|
|
2882
2957
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
2883
|
-
this.
|
|
2958
|
+
this.getOutletParent = () => {
|
|
2884
2959
|
return this.elementRef.nativeElement;
|
|
2885
2960
|
};
|
|
2886
2961
|
}
|
|
@@ -2908,7 +2983,7 @@ class SlateEditable {
|
|
|
2908
2983
|
// add browser class
|
|
2909
2984
|
let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
|
|
2910
2985
|
browserClass && this.elementRef.nativeElement.classList.add(browserClass);
|
|
2911
|
-
this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.
|
|
2986
|
+
this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, () => null);
|
|
2912
2987
|
}
|
|
2913
2988
|
ngOnChanges(simpleChanges) {
|
|
2914
2989
|
if (!this.initialized) {
|
|
@@ -3445,6 +3520,19 @@ class SlateEditable {
|
|
|
3445
3520
|
const end = Editor.end(this.editor, path);
|
|
3446
3521
|
const startVoid = Editor.void(this.editor, { at: start });
|
|
3447
3522
|
const endVoid = Editor.void(this.editor, { at: end });
|
|
3523
|
+
if (event.detail === TRIPLE_CLICK && path.length >= 1) {
|
|
3524
|
+
let blockPath = path;
|
|
3525
|
+
if (!(Element.isElement(node) && Editor.isBlock(this.editor, node))) {
|
|
3526
|
+
const block = Editor.above(this.editor, {
|
|
3527
|
+
match: n => Element.isElement(n) && Editor.isBlock(this.editor, n),
|
|
3528
|
+
at: path
|
|
3529
|
+
});
|
|
3530
|
+
blockPath = block?.[1] ?? path.slice(0, 1);
|
|
3531
|
+
}
|
|
3532
|
+
const range = Editor.range(this.editor, blockPath);
|
|
3533
|
+
Transforms.select(this.editor, range);
|
|
3534
|
+
return;
|
|
3535
|
+
}
|
|
3448
3536
|
if (startVoid && endVoid && Path.equals(startVoid[1], endVoid[1])) {
|
|
3449
3537
|
const range = Editor.range(this.editor, start);
|
|
3450
3538
|
Transforms.select(this.editor, range);
|
|
@@ -3511,7 +3599,7 @@ class SlateEditable {
|
|
|
3511
3599
|
// that drops are allowed. Editable content is droppable by
|
|
3512
3600
|
// default, and calling `preventDefault` hides the cursor.
|
|
3513
3601
|
const node = AngularEditor.toSlateNode(this.editor, event.target);
|
|
3514
|
-
if (Editor.isVoid(this.editor, node)) {
|
|
3602
|
+
if (Element.isElement(node) && Editor.isVoid(this.editor, node)) {
|
|
3515
3603
|
event.preventDefault();
|
|
3516
3604
|
}
|
|
3517
3605
|
}
|
|
@@ -3520,7 +3608,7 @@ class SlateEditable {
|
|
|
3520
3608
|
if (!this.readonly && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
|
|
3521
3609
|
const node = AngularEditor.toSlateNode(this.editor, event.target);
|
|
3522
3610
|
const path = AngularEditor.findPath(this.editor, node);
|
|
3523
|
-
const voidMatch = Editor.isVoid(this.editor, node) || Editor.void(this.editor, { at: path, voids: true });
|
|
3611
|
+
const voidMatch = Element.isElement(node) && (Editor.isVoid(this.editor, node) || Editor.void(this.editor, { at: path, voids: true }));
|
|
3524
3612
|
// If starting a drag on a void node, make sure it is selected
|
|
3525
3613
|
// so that it shows up in the selection's fragment.
|
|
3526
3614
|
if (voidMatch) {
|
|
@@ -4043,7 +4131,7 @@ const hasTarget = (editor, target) => {
|
|
|
4043
4131
|
*/
|
|
4044
4132
|
const isTargetInsideVoid = (editor, target) => {
|
|
4045
4133
|
const slateNode = hasTarget(editor, target) && AngularEditor.toSlateNode(editor, target);
|
|
4046
|
-
return Editor.isVoid(editor, slateNode);
|
|
4134
|
+
return Element.isElement(slateNode) && Editor.isVoid(editor, slateNode);
|
|
4047
4135
|
};
|
|
4048
4136
|
const hasStringTarget = (domSelection) => {
|
|
4049
4137
|
return ((domSelection.anchorNode.parentElement.hasAttribute('data-slate-string') ||
|
|
@@ -4099,12 +4187,8 @@ class SlateModule {
|
|
|
4099
4187
|
SlateBlockCard,
|
|
4100
4188
|
SlateLeaves,
|
|
4101
4189
|
SlateDefaultLeaf,
|
|
4102
|
-
SlateDefaultString
|
|
4103
|
-
SlateChildren,
|
|
4104
|
-
SlateElement,
|
|
4105
|
-
SlateLeaves,
|
|
4106
|
-
SlateString,
|
|
4107
|
-
SlateDefaultString] }); }
|
|
4190
|
+
SlateDefaultString,
|
|
4191
|
+
SlateChildrenOutlet], exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString] }); }
|
|
4108
4192
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SlateModule, providers: [
|
|
4109
4193
|
{
|
|
4110
4194
|
provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
|
|
@@ -4128,16 +4212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
4128
4212
|
SlateBlockCard,
|
|
4129
4213
|
SlateLeaves,
|
|
4130
4214
|
SlateDefaultLeaf,
|
|
4131
|
-
SlateDefaultString
|
|
4132
|
-
|
|
4133
|
-
exports: [
|
|
4134
|
-
SlateEditable,
|
|
4135
|
-
SlateChildren,
|
|
4136
|
-
SlateElement,
|
|
4137
|
-
SlateLeaves,
|
|
4138
|
-
SlateString,
|
|
4139
|
-
SlateDefaultString
|
|
4215
|
+
SlateDefaultString,
|
|
4216
|
+
SlateChildrenOutlet
|
|
4140
4217
|
],
|
|
4218
|
+
exports: [SlateEditable, SlateChildren, SlateChildrenOutlet, SlateElement, SlateLeaves, SlateString, SlateDefaultString],
|
|
4141
4219
|
providers: [
|
|
4142
4220
|
{
|
|
4143
4221
|
provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,
|
|
@@ -4155,5 +4233,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
4155
4233
|
* Generated bundle index. Do not edit.
|
|
4156
4234
|
*/
|
|
4157
4235
|
|
|
4158
|
-
export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildren, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
|
|
4236
|
+
export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
|
|
4159
4237
|
//# sourceMappingURL=slate-angular.mjs.map
|