@skyux/text-editor 8.0.0-alpha.0 → 8.0.0-alpha.2
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/documentation.json +182 -218
- package/esm2020/lib/modules/text-editor/text-editor.component.mjs +55 -58
- package/fesm2015/skyux-text-editor.mjs +55 -57
- package/fesm2015/skyux-text-editor.mjs.map +1 -1
- package/fesm2020/skyux-text-editor.mjs +54 -57
- package/fesm2020/skyux-text-editor.mjs.map +1 -1
- package/lib/modules/text-editor/text-editor.component.d.ts +4 -5
- package/package.json +12 -12
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i3 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation
|
|
4
|
+
import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
|
|
5
5
|
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
6
6
|
import * as i1 from '@angular/platform-browser';
|
|
7
7
|
import createDOMPurify from 'dompurify';
|
|
@@ -1408,15 +1408,15 @@ class SkyTextEditorComponent {
|
|
|
1408
1408
|
let focusableChildren;
|
|
1409
1409
|
/* istanbul ignore else */
|
|
1410
1410
|
if (this.iframeRef) {
|
|
1411
|
-
focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.
|
|
1411
|
+
focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.contentDocument?.body, {
|
|
1412
1412
|
ignoreVisibility: true,
|
|
1413
1413
|
ignoreTabIndex: true,
|
|
1414
1414
|
});
|
|
1415
1415
|
if (__classPrivateFieldGet(this, _SkyTextEditorComponent__disabled, "f")) {
|
|
1416
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef
|
|
1416
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef);
|
|
1417
1417
|
}
|
|
1418
1418
|
else {
|
|
1419
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef
|
|
1419
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef);
|
|
1420
1420
|
}
|
|
1421
1421
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_changeDetector, "f").markForCheck();
|
|
1422
1422
|
}
|
|
@@ -1558,15 +1558,13 @@ class SkyTextEditorComponent {
|
|
|
1558
1558
|
get value() {
|
|
1559
1559
|
return __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f");
|
|
1560
1560
|
}
|
|
1561
|
-
ngAfterViewInit() {
|
|
1562
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
|
|
1563
|
-
}
|
|
1564
1561
|
ngOnDestroy() {
|
|
1565
1562
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").removeObservers(__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").editor);
|
|
1566
1563
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").next();
|
|
1567
1564
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").complete();
|
|
1568
1565
|
}
|
|
1569
|
-
onIframeLoad() {
|
|
1566
|
+
onIframeLoad(event) {
|
|
1567
|
+
this.iframeRef = event.target;
|
|
1570
1568
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
|
|
1571
1569
|
}
|
|
1572
1570
|
/**
|
|
@@ -1608,53 +1606,55 @@ _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id =
|
|
|
1608
1606
|
...__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getStyleState(),
|
|
1609
1607
|
}, "f");
|
|
1610
1608
|
}, _SkyTextEditorComponent_initIframe = function _SkyTextEditorComponent_initIframe() {
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
__classPrivateFieldGet(this,
|
|
1609
|
+
if (this.iframeRef) {
|
|
1610
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").initEditor(this.id, this.iframeRef, this.initialStyleState, this.placeholder);
|
|
1611
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1612
|
+
.inputListener()
|
|
1613
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1614
|
+
.subscribe(() => {
|
|
1615
|
+
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
1616
|
+
// so we have to call the onChange() event inside NgZone to force change propagation to consuming components.
|
|
1617
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1618
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
|
|
1619
|
+
});
|
|
1620
1620
|
});
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
this.editorFocusStream.next();
|
|
1628
|
-
});
|
|
1629
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1630
|
-
.clickListener()
|
|
1631
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1632
|
-
.subscribe(() => {
|
|
1633
|
-
this.editorFocusStream.next();
|
|
1634
|
-
});
|
|
1635
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1636
|
-
.blurListener()
|
|
1637
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1638
|
-
.subscribe(() => {
|
|
1639
|
-
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
1640
|
-
// so we have to run markForCheck() inside the NgZone to force change propagation to consuming components.
|
|
1641
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1642
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent__onTouched, "f").call(this);
|
|
1621
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1622
|
+
.selectionChangeListener()
|
|
1623
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1624
|
+
.subscribe(() => {
|
|
1625
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
|
|
1626
|
+
this.editorFocusStream.next();
|
|
1643
1627
|
});
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
__classPrivateFieldGet(this,
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1628
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1629
|
+
.clickListener()
|
|
1630
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1631
|
+
.subscribe(() => {
|
|
1632
|
+
this.editorFocusStream.next();
|
|
1633
|
+
});
|
|
1634
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1635
|
+
.blurListener()
|
|
1636
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1637
|
+
.subscribe(() => {
|
|
1638
|
+
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
1639
|
+
// so we have to run #_onTouched() inside the NgZone to force change propagation to consuming components.
|
|
1640
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1641
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent__onTouched, "f").call(this);
|
|
1642
|
+
});
|
|
1643
|
+
});
|
|
1644
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1645
|
+
.commandChangeListener()
|
|
1646
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1647
|
+
.subscribe(() => {
|
|
1648
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
|
|
1649
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
|
|
1650
|
+
});
|
|
1651
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").setEditorInnerHtml(__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
|
|
1652
|
+
/* istanbul ignore next */
|
|
1653
|
+
if (this.autofocus) {
|
|
1654
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").focusEditor();
|
|
1655
|
+
}
|
|
1656
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
|
|
1656
1657
|
}
|
|
1657
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
|
|
1658
1658
|
}, _SkyTextEditorComponent_viewToModelUpdate = function _SkyTextEditorComponent_viewToModelUpdate(emitChange = true) {
|
|
1659
1659
|
this.value = __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getEditorInnerHtml();
|
|
1660
1660
|
/* istanbul ignore else */
|
|
@@ -1667,14 +1667,14 @@ SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1667
1667
|
SkyTextEditorService,
|
|
1668
1668
|
SkyTextEditorSelectionService,
|
|
1669
1669
|
SkyTextEditorAdapterService,
|
|
1670
|
-
],
|
|
1670
|
+
], ngImport: i0, template: "<div class=\"sky-text-editor\">\n <sky-toolbar\n *ngIf=\"\n (menus && menus.length) > 0 ||\n (toolbarActions && toolbarActions.length > 0)\n \"\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n *ngIf=\"menus && menus.length > 0\"\n aria-label=\"Text formatting\"\n class=\"menubar\"\n role=\"toolbar\"\n >\n <sky-text-editor-menubar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n >\n </sky-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n aria-label=\"Text formatting\"\n class=\"toolbar\"\n role=\"toolbar\"\n >\n <sky-text-editor-toolbar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad($event)\"\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1671
1671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1672
1672
|
type: Component,
|
|
1673
1673
|
args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1674
1674
|
SkyTextEditorService,
|
|
1675
1675
|
SkyTextEditorSelectionService,
|
|
1676
1676
|
SkyTextEditorAdapterService,
|
|
1677
|
-
], template: "<div class=\"sky-text-editor\">\n <sky-toolbar\n *ngIf=\"\n (menus && menus.length) > 0 ||\n (toolbarActions && toolbarActions.length > 0)\n \"\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n *ngIf=\"menus && menus.length > 0\"\n aria-label=\"Text formatting\"\n class=\"menubar\"\n role=\"toolbar\"\n >\n <sky-text-editor-menubar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n >\n </sky-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n aria-label=\"Text formatting\"\n class=\"toolbar\"\n role=\"toolbar\"\n >\n <sky-text-editor-toolbar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n
|
|
1677
|
+
], template: "<div class=\"sky-text-editor\">\n <sky-toolbar\n *ngIf=\"\n (menus && menus.length) > 0 ||\n (toolbarActions && toolbarActions.length > 0)\n \"\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n *ngIf=\"menus && menus.length > 0\"\n aria-label=\"Text formatting\"\n class=\"menubar\"\n role=\"toolbar\"\n >\n <sky-text-editor-menubar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n >\n </sky-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n *ngIf=\"toolbarActions && toolbarActions.length > 0\"\n aria-label=\"Text formatting\"\n class=\"toolbar\"\n role=\"toolbar\"\n >\n <sky-text-editor-toolbar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad($event)\"\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
|
|
1678
1678
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i3$1.NgControl }, { type: i0.NgZone }, { type: i1$1.SkyIdService }]; }, propDecorators: { autofocus: [{
|
|
1679
1679
|
type: Input
|
|
1680
1680
|
}], disabled: [{
|
|
@@ -1695,9 +1695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1695
1695
|
type: Input
|
|
1696
1696
|
}], toolbarActions: [{
|
|
1697
1697
|
type: Input
|
|
1698
|
-
}], iframeRef: [{
|
|
1699
|
-
type: ViewChild,
|
|
1700
|
-
args: ['iframe']
|
|
1701
1698
|
}] } });
|
|
1702
1699
|
|
|
1703
1700
|
class SkyTextEditorModule {
|