@skyux/text-editor 8.0.0-alpha.9 → 8.0.0-beta.0
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 +218 -182
- package/esm2020/lib/modules/text-editor/menubar/text-editor-menubar.component.mjs +2 -2
- package/esm2020/lib/modules/text-editor/services/text-editor-adapter.service.mjs +1 -1
- package/esm2020/lib/modules/text-editor/services/text-editor.service.mjs +10 -7
- package/esm2020/lib/modules/text-editor/services/text-sanitization.service.mjs +2 -2
- package/esm2020/lib/modules/text-editor/text-editor.component.mjs +62 -56
- package/fesm2015/skyux-text-editor.mjs +72 -64
- package/fesm2015/skyux-text-editor.mjs.map +1 -1
- package/fesm2020/skyux-text-editor.mjs +72 -63
- package/fesm2020/skyux-text-editor.mjs.map +1 -1
- package/lib/modules/text-editor/services/text-editor.service.d.ts +1 -0
- package/lib/modules/text-editor/text-editor.component.d.ts +5 -4
- package/package.json +13 -13
|
@@ -1,10 +1,10 @@
|
|
|
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 } from '@angular/core';
|
|
4
|
+
import { Injectable, Component, Input, NgModule, ChangeDetectionStrategy, ViewEncapsulation, ViewChild } from '@angular/core';
|
|
5
5
|
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
|
6
6
|
import * as i1 from '@angular/platform-browser';
|
|
7
|
-
import
|
|
7
|
+
import createDOMPurify from 'dompurify';
|
|
8
8
|
import * as i3$1 from '@angular/forms';
|
|
9
9
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
10
10
|
import * as i6$1 from '@skyux/colorpicker';
|
|
@@ -27,7 +27,7 @@ import * as i6 from '@skyux/tabs';
|
|
|
27
27
|
import { SkyTabsModule } from '@skyux/tabs';
|
|
28
28
|
import * as i5 from '@skyux/theme';
|
|
29
29
|
import { SkyThemeModule } from '@skyux/theme';
|
|
30
|
-
import
|
|
30
|
+
import he from 'he';
|
|
31
31
|
import { Subject } from 'rxjs';
|
|
32
32
|
import { takeUntil, take } from 'rxjs/operators';
|
|
33
33
|
import { SkyValidation } from '@skyux/validation';
|
|
@@ -374,25 +374,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
374
374
|
type: Injectable
|
|
375
375
|
}] });
|
|
376
376
|
|
|
377
|
-
var
|
|
377
|
+
var _SkyTextEditorService_editor;
|
|
378
378
|
/**
|
|
379
379
|
* @internal
|
|
380
380
|
*/
|
|
381
381
|
class SkyTextEditorService {
|
|
382
382
|
constructor() {
|
|
383
|
-
|
|
383
|
+
_SkyTextEditorService_editor.set(this, void 0);
|
|
384
384
|
}
|
|
385
385
|
/**
|
|
386
386
|
* A dictionary representing all active text editors and their settings.
|
|
387
387
|
*/
|
|
388
388
|
set editor(value) {
|
|
389
|
-
__classPrivateFieldSet(this,
|
|
389
|
+
__classPrivateFieldSet(this, _SkyTextEditorService_editor, value, "f");
|
|
390
390
|
}
|
|
391
391
|
get editor() {
|
|
392
|
-
if (!__classPrivateFieldGet(this,
|
|
392
|
+
if (!__classPrivateFieldGet(this, _SkyTextEditorService_editor, "f")) {
|
|
393
393
|
throw new Error('Editor has not been initialized.');
|
|
394
394
|
}
|
|
395
|
-
return __classPrivateFieldGet(this,
|
|
395
|
+
return __classPrivateFieldGet(this, _SkyTextEditorService_editor, "f");
|
|
396
|
+
}
|
|
397
|
+
get isInitialized() {
|
|
398
|
+
return __classPrivateFieldGet(this, _SkyTextEditorService_editor, "f") !== undefined;
|
|
396
399
|
}
|
|
397
400
|
/**
|
|
398
401
|
* Returns the blur observable from the editor with the corresponding id.
|
|
@@ -425,7 +428,7 @@ class SkyTextEditorService {
|
|
|
425
428
|
return this.editor.selectionChangeObservable;
|
|
426
429
|
}
|
|
427
430
|
}
|
|
428
|
-
|
|
431
|
+
_SkyTextEditorService_editor = new WeakMap();
|
|
429
432
|
SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
430
433
|
SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService });
|
|
431
434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
@@ -1362,15 +1365,15 @@ class SkyTextEditorComponent {
|
|
|
1362
1365
|
let focusableChildren;
|
|
1363
1366
|
/* istanbul ignore else */
|
|
1364
1367
|
if (this.iframeRef) {
|
|
1365
|
-
focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.contentDocument
|
|
1368
|
+
focusableChildren = __classPrivateFieldGet(this, _SkyTextEditorComponent_coreAdapterService, "f").getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
|
|
1366
1369
|
ignoreVisibility: true,
|
|
1367
1370
|
ignoreTabIndex: true,
|
|
1368
1371
|
});
|
|
1369
1372
|
if (__classPrivateFieldGet(this, _SkyTextEditorComponent__disabled, "f")) {
|
|
1370
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef);
|
|
1373
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").disableEditor(focusableChildren, this.iframeRef.nativeElement);
|
|
1371
1374
|
}
|
|
1372
1375
|
else {
|
|
1373
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef);
|
|
1376
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").enableEditor(focusableChildren, this.iframeRef.nativeElement);
|
|
1374
1377
|
}
|
|
1375
1378
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_changeDetector, "f").markForCheck();
|
|
1376
1379
|
}
|
|
@@ -1558,14 +1561,19 @@ class SkyTextEditorComponent {
|
|
|
1558
1561
|
__classPrivateFieldSet(this, _SkyTextEditorComponent_id, __classPrivateFieldSet(this, _SkyTextEditorComponent_defaultId, idSvc.generateId(), "f"), "f");
|
|
1559
1562
|
ngControl.valueAccessor = this;
|
|
1560
1563
|
}
|
|
1564
|
+
ngAfterViewInit() {
|
|
1565
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
|
|
1566
|
+
}
|
|
1561
1567
|
ngOnDestroy() {
|
|
1562
1568
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").removeObservers(__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").editor);
|
|
1563
1569
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").next();
|
|
1564
1570
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").complete();
|
|
1565
1571
|
}
|
|
1566
|
-
onIframeLoad(
|
|
1567
|
-
|
|
1568
|
-
__classPrivateFieldGet(this,
|
|
1572
|
+
onIframeLoad() {
|
|
1573
|
+
// Reinitialize the editor if it already exists to cover situations where the text editor might have been moved in the DOM.
|
|
1574
|
+
if (__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").isInitialized) {
|
|
1575
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_initIframe).call(this);
|
|
1576
|
+
}
|
|
1569
1577
|
}
|
|
1570
1578
|
/**
|
|
1571
1579
|
* Implemented as part of ControlValueAccessor.
|
|
@@ -1606,55 +1614,53 @@ _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id =
|
|
|
1606
1614
|
...__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getStyleState(),
|
|
1607
1615
|
}, "f");
|
|
1608
1616
|
}, _SkyTextEditorComponent_initIframe = function _SkyTextEditorComponent_initIframe() {
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1618
|
-
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
|
|
1619
|
-
});
|
|
1620
|
-
});
|
|
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();
|
|
1627
|
-
});
|
|
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);
|
|
1617
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").initEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
|
|
1618
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1619
|
+
.inputListener()
|
|
1620
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1621
|
+
.subscribe(() => {
|
|
1622
|
+
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
1623
|
+
// so we have to call the onChange() event inside NgZone to force change propagation to consuming components.
|
|
1624
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1649
1625
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
|
|
1650
1626
|
});
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1627
|
+
});
|
|
1628
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1629
|
+
.selectionChangeListener()
|
|
1630
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1631
|
+
.subscribe(() => {
|
|
1632
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
|
|
1633
|
+
this.editorFocusStream.next();
|
|
1634
|
+
});
|
|
1635
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1636
|
+
.clickListener()
|
|
1637
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1638
|
+
.subscribe(() => {
|
|
1639
|
+
this.editorFocusStream.next();
|
|
1640
|
+
});
|
|
1641
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1642
|
+
.blurListener()
|
|
1643
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1644
|
+
.subscribe(() => {
|
|
1645
|
+
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
1646
|
+
// so we have to run markForCheck() inside the NgZone to force change propagation to consuming components.
|
|
1647
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_zone, "f").run(() => {
|
|
1648
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent__onTouched, "f").call(this);
|
|
1649
|
+
});
|
|
1650
|
+
});
|
|
1651
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f")
|
|
1652
|
+
.commandChangeListener()
|
|
1653
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f")))
|
|
1654
|
+
.subscribe(() => {
|
|
1655
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_updateStyle).call(this);
|
|
1656
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_instances, "m", _SkyTextEditorComponent_viewToModelUpdate).call(this);
|
|
1657
|
+
});
|
|
1658
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").setEditorInnerHtml(__classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
|
|
1659
|
+
/* istanbul ignore next */
|
|
1660
|
+
if (this.autofocus) {
|
|
1661
|
+
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").focusEditor();
|
|
1657
1662
|
}
|
|
1663
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_initialized, true, "f");
|
|
1658
1664
|
}, _SkyTextEditorComponent_viewToModelUpdate = function _SkyTextEditorComponent_viewToModelUpdate(emitChange = true) {
|
|
1659
1665
|
this.value = __classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").getEditorInnerHtml();
|
|
1660
1666
|
/* istanbul ignore else */
|
|
@@ -1667,14 +1673,14 @@ SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1667
1673
|
SkyTextEditorService,
|
|
1668
1674
|
SkyTextEditorSelectionService,
|
|
1669
1675
|
SkyTextEditorAdapterService,
|
|
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(
|
|
1676
|
+
], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], 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()\"\n #iframe\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
1677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1672
1678
|
type: Component,
|
|
1673
1679
|
args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1674
1680
|
SkyTextEditorService,
|
|
1675
1681
|
SkyTextEditorSelectionService,
|
|
1676
1682
|
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(
|
|
1683
|
+
], 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 #iframe\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
1684
|
}], 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
1685
|
type: Input
|
|
1680
1686
|
}], disabled: [{
|
|
@@ -1695,6 +1701,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
|
|
|
1695
1701
|
type: Input
|
|
1696
1702
|
}], toolbarActions: [{
|
|
1697
1703
|
type: Input
|
|
1704
|
+
}], iframeRef: [{
|
|
1705
|
+
type: ViewChild,
|
|
1706
|
+
args: ['iframe']
|
|
1698
1707
|
}] } });
|
|
1699
1708
|
|
|
1700
1709
|
class SkyTextEditorModule {
|