@skyux/text-editor 4.0.0-beta.2 → 5.0.0-beta.4
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/LICENSE +21 -0
- package/bundles/skyux-text-editor.umd.js +730 -562
- package/bundles/skyux-text-editor.umd.js.map +1 -1
- package/documentation.json +1961 -0
- package/esm2015/modules/rich-text-display/rich-text-display.component.js +17 -20
- package/esm2015/modules/rich-text-display/rich-text-display.module.js +22 -17
- package/esm2015/modules/shared/forms-utility.js +1 -1
- package/esm2015/modules/shared/sky-text-editor-resources.module.js +41 -0
- package/esm2015/modules/text-editor/defaults/font-list-defaults.js +1 -1
- package/esm2015/modules/text-editor/defaults/font-size-list-defaults.js +1 -1
- package/esm2015/modules/text-editor/defaults/menu-defaults.js +1 -1
- package/esm2015/modules/text-editor/defaults/style-state-defaults.js +1 -1
- package/esm2015/modules/text-editor/defaults/toolbar-action-defaults.js +1 -1
- package/esm2015/modules/text-editor/menubar/text-editor-menubar.component.js +32 -36
- package/esm2015/modules/text-editor/services/text-editor-adapter.service.js +17 -22
- package/esm2015/modules/text-editor/services/text-editor-selection.service.js +12 -13
- package/esm2015/modules/text-editor/services/text-editor.service.js +11 -11
- package/esm2015/modules/text-editor/services/text-sanitization.service.js +12 -14
- package/esm2015/modules/text-editor/text-editor.component.js +63 -68
- package/esm2015/modules/text-editor/text-editor.module.js +68 -27
- package/esm2015/modules/text-editor/toolbar/text-editor-toolbar.component.js +40 -42
- package/esm2015/modules/text-editor/types/editor-command.js +2 -1
- package/esm2015/modules/text-editor/types/editor-setting.js +2 -1
- package/esm2015/modules/text-editor/types/font-state.js +2 -1
- package/esm2015/modules/text-editor/types/menu-type.js +2 -1
- package/esm2015/modules/text-editor/types/style-state.js +2 -1
- package/esm2015/modules/text-editor/types/text-editor-merge-field.js +2 -1
- package/esm2015/modules/text-editor/types/toolbar-action-type.js +2 -1
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-context.js +1 -1
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-result.js +2 -1
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal.component.js +21 -18
- package/esm2015/modules/text-editor/url-modal/text-editor-url-target.js +1 -1
- package/esm2015/public-api.js +15 -0
- package/esm2015/skyux-text-editor.js +2 -14
- package/fesm2015/skyux-text-editor.js +359 -312
- package/fesm2015/skyux-text-editor.js.map +1 -1
- package/modules/rich-text-display/rich-text-display.component.d.ts +3 -0
- package/modules/rich-text-display/rich-text-display.module.d.ts +6 -0
- package/modules/shared/sky-text-editor-resources.module.d.ts +14 -0
- package/modules/text-editor/menubar/text-editor-menubar.component.d.ts +3 -0
- package/modules/text-editor/services/text-editor-adapter.service.d.ts +3 -0
- package/modules/text-editor/services/text-editor-selection.service.d.ts +3 -0
- package/modules/text-editor/services/text-editor.service.d.ts +3 -0
- package/modules/text-editor/services/text-sanitization.service.d.ts +3 -0
- package/modules/text-editor/text-editor.component.d.ts +3 -0
- package/modules/text-editor/text-editor.module.d.ts +21 -0
- package/modules/text-editor/toolbar/text-editor-toolbar.component.d.ts +3 -0
- package/modules/text-editor/url-modal/text-editor-url-modal.component.d.ts +3 -0
- package/package.json +20 -36
- package/public-api.d.ts +12 -0
- package/skyux-text-editor.d.ts +2 -13
- package/CHANGELOG.md +0 -13
- package/bundles/skyux-text-editor.umd.min.js +0 -2
- package/bundles/skyux-text-editor.umd.min.js.map +0 -1
- package/esm2015/plugin-resources/text-editor-resources-provider.js +0 -16
- package/esm2015/plugin-resources/text-editor-resources.module.js +0 -19
- package/esm2015/public_api.js +0 -3
- package/esm5/modules/rich-text-display/rich-text-display.component.js +0 -44
- package/esm5/modules/rich-text-display/rich-text-display.module.js +0 -24
- package/esm5/modules/shared/forms-utility.js +0 -14
- package/esm5/modules/text-editor/defaults/font-list-defaults.js +0 -42
- package/esm5/modules/text-editor/defaults/font-size-list-defaults.js +0 -5
- package/esm5/modules/text-editor/defaults/menu-defaults.js +0 -8
- package/esm5/modules/text-editor/defaults/style-state-defaults.js +0 -15
- package/esm5/modules/text-editor/defaults/toolbar-action-defaults.js +0 -12
- package/esm5/modules/text-editor/menubar/text-editor-menubar.component.js +0 -199
- package/esm5/modules/text-editor/services/text-editor-adapter.service.js +0 -470
- package/esm5/modules/text-editor/services/text-editor-selection.service.js +0 -77
- package/esm5/modules/text-editor/services/text-editor.service.js +0 -49
- package/esm5/modules/text-editor/services/text-sanitization.service.js +0 -41
- package/esm5/modules/text-editor/text-editor.component.js +0 -287
- package/esm5/modules/text-editor/text-editor.module.js +0 -63
- package/esm5/modules/text-editor/toolbar/text-editor-toolbar.component.js +0 -178
- package/esm5/modules/text-editor/types/editor-command.js +0 -1
- package/esm5/modules/text-editor/types/editor-setting.js +0 -1
- package/esm5/modules/text-editor/types/font-state.js +0 -1
- package/esm5/modules/text-editor/types/menu-type.js +0 -1
- package/esm5/modules/text-editor/types/style-state.js +0 -1
- package/esm5/modules/text-editor/types/text-editor-merge-field.js +0 -1
- package/esm5/modules/text-editor/types/toolbar-action-type.js +0 -1
- package/esm5/modules/text-editor/url-modal/text-editor-url-modal-context.js +0 -10
- package/esm5/modules/text-editor/url-modal/text-editor-url-modal-result.js +0 -1
- package/esm5/modules/text-editor/url-modal/text-editor-url-modal.component.js +0 -120
- package/esm5/modules/text-editor/url-modal/text-editor-url-target.js +0 -9
- package/esm5/plugin-resources/text-editor-resources-provider.js +0 -17
- package/esm5/plugin-resources/text-editor-resources.module.js +0 -22
- package/esm5/public_api.js +0 -3
- package/esm5/skyux-text-editor.js +0 -17
- package/fesm5/skyux-text-editor.js +0 -1620
- package/fesm5/skyux-text-editor.js.map +0 -1
- package/plugin-resources/text-editor-resources-provider.d.ts +0 -5
- package/plugin-resources/text-editor-resources.module.d.ts +0 -2
- package/public_api.d.ts +0 -7
- package/skyux-text-editor.metadata.json +0 -1
- package/src/assets/img/default-anatomy.png +0 -0
- package/src/assets/img/default-option-menu-toolbar-items.png +0 -0
- package/src/assets/img/default-use-when.png +0 -0
- package/src/assets/img/modern-anatomy.png +0 -0
- package/src/assets/img/modern-option-menu-toolbar-items.png +0 -0
- package/src/assets/img/modern-use-when.png +0 -0
- package/src/assets/locales/resources_en_US.json +0 -130
|
@@ -1,1620 +0,0 @@
|
|
|
1
|
-
import { __decorate, __assign, __values } from 'tslib';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import { ɵɵdefineInjectable, Injectable, Input, Component, NgModule, ɵɵinject, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
|
|
4
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
|
-
import dompurify from 'dompurify';
|
|
6
|
-
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
|
|
8
|
-
import { SkyAppWindowRef, SkyCoreAdapterService, SkyCoreAdapterModule, SkyIdModule } from '@skyux/core';
|
|
9
|
-
import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
|
|
10
|
-
import { SkyModalInstance, SkyModalService, SkyModalModule } from '@skyux/modals';
|
|
11
|
-
import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
12
|
-
import { SkyIconModule } from '@skyux/indicators';
|
|
13
|
-
import { SkyToolbarModule } from '@skyux/layout';
|
|
14
|
-
import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
|
|
15
|
-
import { SkyTabsModule } from '@skyux/tabs';
|
|
16
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
17
|
-
import { Subject, forkJoin } from 'rxjs';
|
|
18
|
-
import { takeUntil, take } from 'rxjs/operators';
|
|
19
|
-
import { SkyValidation } from '@skyux/validation';
|
|
20
|
-
|
|
21
|
-
// TODO: figure out how to get the following `import` to work with docs-tools library.
|
|
22
|
-
// import DOMPurify from 'dompurify';
|
|
23
|
-
|
|
24
|
-
var domPurify = dompurify(window);
|
|
25
|
-
domPurify.addHook('afterSanitizeAttributes', function (node) {
|
|
26
|
-
// Set all elements owning target to target=_blank
|
|
27
|
-
// so we only allow the target attribute with that value.
|
|
28
|
-
if (!!node.getAttribute('target')) {
|
|
29
|
-
node.setAttribute('target', '_blank');
|
|
30
|
-
node.setAttribute('rel', 'noopener noreferrer');
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
/**
|
|
34
|
-
* The `SkyTextSanitizationService` user the `DOMPurify` library to sanitize strings for use
|
|
35
|
-
* in the DOM. `DOMPurify` allows more customization than Angular's internal `DomSanitizer` so we
|
|
36
|
-
* can preserve `<style>` tags and allow `target` attributes for new tab links.
|
|
37
|
-
* @internal
|
|
38
|
-
*/
|
|
39
|
-
var SkyTextSanitizationService = /** @class */ (function () {
|
|
40
|
-
function SkyTextSanitizationService() {
|
|
41
|
-
this.allowedAttributes = ['target'];
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Returns a sanitized string, allowing target attribute for new tab links.
|
|
45
|
-
*/
|
|
46
|
-
SkyTextSanitizationService.prototype.sanitize = function (htmlString) {
|
|
47
|
-
return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
|
|
48
|
-
};
|
|
49
|
-
SkyTextSanitizationService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextSanitizationService_Factory() { return new SkyTextSanitizationService(); }, token: SkyTextSanitizationService, providedIn: "root" });
|
|
50
|
-
SkyTextSanitizationService = __decorate([
|
|
51
|
-
Injectable({
|
|
52
|
-
providedIn: 'root'
|
|
53
|
-
})
|
|
54
|
-
], SkyTextSanitizationService);
|
|
55
|
-
return SkyTextSanitizationService;
|
|
56
|
-
}());
|
|
57
|
-
|
|
58
|
-
var SkyRichTextDisplayComponent = /** @class */ (function () {
|
|
59
|
-
function SkyRichTextDisplayComponent(sanitizer, sanitizationService) {
|
|
60
|
-
this.sanitizer = sanitizer;
|
|
61
|
-
this.sanitizationService = sanitizationService;
|
|
62
|
-
this.sanitizedText = '';
|
|
63
|
-
this._richText = '';
|
|
64
|
-
}
|
|
65
|
-
Object.defineProperty(SkyRichTextDisplayComponent.prototype, "richText", {
|
|
66
|
-
/**
|
|
67
|
-
* Specifies the rich text to display.
|
|
68
|
-
*/
|
|
69
|
-
set: function (value) {
|
|
70
|
-
var cleaned = this.sanitizationService.sanitize(value);
|
|
71
|
-
if (cleaned !== this._richText) {
|
|
72
|
-
this._richText = cleaned;
|
|
73
|
-
// Text has already been sanitized with DOMPurifier.
|
|
74
|
-
// Tell Angular to bypass its own internal sanitization.
|
|
75
|
-
this.sanitizedText = this.sanitizer.bypassSecurityTrustHtml(cleaned);
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
enumerable: true,
|
|
79
|
-
configurable: true
|
|
80
|
-
});
|
|
81
|
-
SkyRichTextDisplayComponent.ctorParameters = function () { return [
|
|
82
|
-
{ type: DomSanitizer },
|
|
83
|
-
{ type: SkyTextSanitizationService }
|
|
84
|
-
]; };
|
|
85
|
-
__decorate([
|
|
86
|
-
Input()
|
|
87
|
-
], SkyRichTextDisplayComponent.prototype, "richText", null);
|
|
88
|
-
SkyRichTextDisplayComponent = __decorate([
|
|
89
|
-
Component({
|
|
90
|
-
selector: 'sky-rich-text-display',
|
|
91
|
-
template: "<span\n class=\"sky-rich-text-display-text\"\n [innerHTML]=\"sanitizedText\"\n>\n</span>\n"
|
|
92
|
-
})
|
|
93
|
-
], SkyRichTextDisplayComponent);
|
|
94
|
-
return SkyRichTextDisplayComponent;
|
|
95
|
-
}());
|
|
96
|
-
|
|
97
|
-
var SkyRichTextDisplayModule = /** @class */ (function () {
|
|
98
|
-
function SkyRichTextDisplayModule() {
|
|
99
|
-
}
|
|
100
|
-
SkyRichTextDisplayModule = __decorate([
|
|
101
|
-
NgModule({
|
|
102
|
-
imports: [
|
|
103
|
-
CommonModule
|
|
104
|
-
],
|
|
105
|
-
exports: [
|
|
106
|
-
SkyRichTextDisplayComponent
|
|
107
|
-
],
|
|
108
|
-
declarations: [
|
|
109
|
-
SkyRichTextDisplayComponent
|
|
110
|
-
]
|
|
111
|
-
})
|
|
112
|
-
], SkyRichTextDisplayModule);
|
|
113
|
-
return SkyRichTextDisplayModule;
|
|
114
|
-
}());
|
|
115
|
-
|
|
116
|
-
var SkyTextEditorResourcesProvider = /** @class */ (function () {
|
|
117
|
-
function SkyTextEditorResourcesProvider() {
|
|
118
|
-
this.resources = { "EN-US": { "skyux_text_editor_format_menu_action_bold_label": "Bold", "skyux_text_editor_format_menu_action_bold_key_shortcut": "Ctrl+B", "skyux_text_editor_format_menu_action_italic_label": "Italic", "skyux_text_editor_format_menu_action_italic_key_shortcut": "Ctrl+I", "skyux_text_editor_format_menu_action_underline_label": "Underline", "skyux_text_editor_format_menu_action_underline_key_shortcut": "Ctrl+U", "skyux_text_editor_format_menu_action_strikethrough_label": "Strikethrough", "skyux_text_editor_format_menu_action_clear_formatting_label": "Clear formatting", "skyux_text_editor_edit_menu_action_undo_label": "Undo", "skyux_text_editor_edit_menu_action_undo_key_shortcut": "Ctrl+Z", "skyux_text_editor_edit_menu_action_redo_label": "Redo", "skyux_text_editor_edit_menu_action_redo_key_shortcut": "Ctrl+Y", "skyux_text_editor_edit_menu_action_cut_label": "Cut", "skyux_text_editor_edit_menu_action_cut_key_shortcut": "Ctrl+X", "skyux_text_editor_edit_menu_action_copy_label": "Copy", "skyux_text_editor_edit_menu_action_copy_key_shortcut": "Ctrl+C", "skyux_text_editor_edit_menu_action_paste_label": "Paste", "skyux_text_editor_edit_menu_action_paste_key_shortcut": "Ctrl+V", "skyux_text_editor_edit_menu_action_select_all_label": "Select all", "skyux_text_editor_edit_menu_action_select_all_key_shortcut": "Ctrl+A", "skyux_text_editor_menubar_dropdown_button_edit_label": "Edit", "skyux_text_editor_menubar_dropdown_button_format_label": "Format", "skyux_text_editor_menubar_dropdown_button_insert_label": "Insert merge field", "skyux_text_editor_url_modal_header_label": "Create link", "skyux_text_editor_url_modal_url_label": "Enter a URL to link to:", "skyux_text_editor_url_modal_open_label": "Where should it open?", "skyux_text_editor_url_modal_current_option_label": "Current window", "skyux_text_editor_url_modal_new_option_label": "New window", "skyux_text_editor_url_modal_email_label": "Email address", "skyux_text_editor_url_modal_subject_label": "Subject line", "skyux_text_editor_url_modal_save_button_label": "Save", "skyux_text_editor_url_modal_cancel_button_label": "Cancel" } };
|
|
119
|
-
}
|
|
120
|
-
SkyTextEditorResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
121
|
-
return getStringForLocale(this.resources, localeInfo.locale, name);
|
|
122
|
-
};
|
|
123
|
-
SkyTextEditorResourcesProvider = __decorate([
|
|
124
|
-
Injectable()
|
|
125
|
-
], SkyTextEditorResourcesProvider);
|
|
126
|
-
return SkyTextEditorResourcesProvider;
|
|
127
|
-
}());
|
|
128
|
-
|
|
129
|
-
var SkyTextEditorResourcesModule = /** @class */ (function () {
|
|
130
|
-
function SkyTextEditorResourcesModule() {
|
|
131
|
-
}
|
|
132
|
-
SkyTextEditorResourcesModule = __decorate([
|
|
133
|
-
NgModule({
|
|
134
|
-
providers: [
|
|
135
|
-
{
|
|
136
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
137
|
-
useClass: SkyTextEditorResourcesProvider,
|
|
138
|
-
multi: true
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
})
|
|
142
|
-
], SkyTextEditorResourcesModule);
|
|
143
|
-
return SkyTextEditorResourcesModule;
|
|
144
|
-
}());
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* @internal
|
|
148
|
-
*/
|
|
149
|
-
var FONT_LIST_DEFAULTS = [
|
|
150
|
-
{
|
|
151
|
-
name: 'Blackbaud Sans',
|
|
152
|
-
value: '"Blackbaud Sans", Arial, sans-serif'
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
name: 'Arial',
|
|
156
|
-
value: 'Arial'
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
name: 'Arial Black',
|
|
160
|
-
value: '"Arial Black"'
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
name: 'Courier New',
|
|
164
|
-
value: '"Courier New"'
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
name: 'Georgia',
|
|
168
|
-
value: 'Georgia, serif'
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
name: 'Tahoma',
|
|
172
|
-
value: 'Tahoma, Geneva, sans-serif'
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
name: 'Times New Roman',
|
|
176
|
-
value: '"Times New Roman"'
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
name: 'Trebuchet MS',
|
|
180
|
-
value: '"Trebuchet MS", sans-serif'
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
name: 'Verdana',
|
|
184
|
-
value: 'Verdana, Geneva, sans-serif'
|
|
185
|
-
}
|
|
186
|
-
];
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* @internal
|
|
190
|
-
*/
|
|
191
|
-
var STYLE_STATE_DEFAULTS = {
|
|
192
|
-
backColor: 'rgba(0, 0, 0, 0)',
|
|
193
|
-
fontColor: '#000',
|
|
194
|
-
fontSize: 14,
|
|
195
|
-
font: FONT_LIST_DEFAULTS[0].value,
|
|
196
|
-
boldState: false,
|
|
197
|
-
italicState: false,
|
|
198
|
-
underlineState: false,
|
|
199
|
-
linkState: false
|
|
200
|
-
};
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* @internal
|
|
204
|
-
*/
|
|
205
|
-
var UrlTarget;
|
|
206
|
-
(function (UrlTarget) {
|
|
207
|
-
UrlTarget[UrlTarget["None"] = 0] = "None";
|
|
208
|
-
UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
|
|
209
|
-
})(UrlTarget || (UrlTarget = {}));
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* @internal
|
|
213
|
-
*/
|
|
214
|
-
var SkyTextEditorService = /** @class */ (function () {
|
|
215
|
-
function SkyTextEditorService() {
|
|
216
|
-
/**
|
|
217
|
-
* A dictionary representing all active text editors and their settings.
|
|
218
|
-
*/
|
|
219
|
-
this.editors = {};
|
|
220
|
-
}
|
|
221
|
-
/**
|
|
222
|
-
* Returns the click observable from the editor with the corresponding id.
|
|
223
|
-
*/
|
|
224
|
-
SkyTextEditorService.prototype.clickListener = function (id) {
|
|
225
|
-
return this.editors[id].clickObservable;
|
|
226
|
-
};
|
|
227
|
-
/**
|
|
228
|
-
* Returns the command change observable from the editor with the corresponding id.
|
|
229
|
-
*/
|
|
230
|
-
SkyTextEditorService.prototype.commandChangeListener = function (id) {
|
|
231
|
-
return this.editors[id].commandChangeObservable;
|
|
232
|
-
};
|
|
233
|
-
/**
|
|
234
|
-
* Removes editor from the `editors` index by id.
|
|
235
|
-
*/
|
|
236
|
-
SkyTextEditorService.prototype.removeEditor = function (id) {
|
|
237
|
-
if (id in this.editors) {
|
|
238
|
-
delete this.editors[id];
|
|
239
|
-
}
|
|
240
|
-
};
|
|
241
|
-
/**
|
|
242
|
-
* Returns the selection change observable from the editor with the corresponding id.
|
|
243
|
-
*/
|
|
244
|
-
SkyTextEditorService.prototype.selectionChangeListener = function (id) {
|
|
245
|
-
return this.editors[id].selectionChangeObservable;
|
|
246
|
-
};
|
|
247
|
-
SkyTextEditorService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorService_Factory() { return new SkyTextEditorService(); }, token: SkyTextEditorService, providedIn: "root" });
|
|
248
|
-
SkyTextEditorService = __decorate([
|
|
249
|
-
Injectable({
|
|
250
|
-
providedIn: 'root'
|
|
251
|
-
})
|
|
252
|
-
], SkyTextEditorService);
|
|
253
|
-
return SkyTextEditorService;
|
|
254
|
-
}());
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* @internal
|
|
258
|
-
*/
|
|
259
|
-
var SkyTextEditorSelectionService = /** @class */ (function () {
|
|
260
|
-
function SkyTextEditorSelectionService() {
|
|
261
|
-
}
|
|
262
|
-
SkyTextEditorSelectionService.prototype.isElementSelected = function (documentEl, element) {
|
|
263
|
-
var selectedNode = this.getCurrentSelection(documentEl).anchorNode;
|
|
264
|
-
return selectedNode &&
|
|
265
|
-
(element.contains(selectedNode) ||
|
|
266
|
-
(selectedNode.parentNode && element.contains(selectedNode.parentNode)));
|
|
267
|
-
};
|
|
268
|
-
SkyTextEditorSelectionService.prototype.getCurrentSelection = function (documentEl) {
|
|
269
|
-
return documentEl.getSelection();
|
|
270
|
-
};
|
|
271
|
-
SkyTextEditorSelectionService.prototype.getCurrentSelectionParentElement = function (documentEl) {
|
|
272
|
-
var selection = this.getCurrentSelection(documentEl);
|
|
273
|
-
var selectedEl;
|
|
274
|
-
/* istanbul ignore else */
|
|
275
|
-
if (selection &&
|
|
276
|
-
selection.getRangeAt &&
|
|
277
|
-
selection.getRangeAt(0).commonAncestorContainer) {
|
|
278
|
-
selectedEl = selection.getRangeAt(0).commonAncestorContainer;
|
|
279
|
-
selectedEl = selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
|
|
280
|
-
}
|
|
281
|
-
else if (selection && selection.type !== 'Control') {
|
|
282
|
-
selectedEl = selection.createRange().parentElement();
|
|
283
|
-
}
|
|
284
|
-
else {
|
|
285
|
-
return undefined;
|
|
286
|
-
}
|
|
287
|
-
return selectedEl;
|
|
288
|
-
};
|
|
289
|
-
SkyTextEditorSelectionService.prototype.getCurrentSelectionRange = function (documentEl, windowEl) {
|
|
290
|
-
/* istanbul ignore else */
|
|
291
|
-
if (windowEl.getSelection) {
|
|
292
|
-
var sel = windowEl.getSelection();
|
|
293
|
-
if (sel.getRangeAt && sel.rangeCount) {
|
|
294
|
-
return sel.getRangeAt(0);
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
else if (documentEl.getSelection() && documentEl.getSelection().getRangeAt) {
|
|
298
|
-
return documentEl.getSelection().getRangeAt(0);
|
|
299
|
-
}
|
|
300
|
-
};
|
|
301
|
-
SkyTextEditorSelectionService.prototype.selectElement = function (documentEl, windowEl, element) {
|
|
302
|
-
if (element) {
|
|
303
|
-
/* istanbul ignore else */
|
|
304
|
-
if (windowEl.getSelection) {
|
|
305
|
-
var sel = windowEl.getSelection();
|
|
306
|
-
sel.removeAllRanges();
|
|
307
|
-
var range = documentEl.createRange();
|
|
308
|
-
range.selectNodeContents(element);
|
|
309
|
-
sel.addRange(range);
|
|
310
|
-
}
|
|
311
|
-
else if (documentEl.getSelection) {
|
|
312
|
-
var sel = documentEl.getSelection();
|
|
313
|
-
sel.removeAllRanges();
|
|
314
|
-
var range = documentEl.createRange();
|
|
315
|
-
range.selectNodeContents(element);
|
|
316
|
-
sel.addRange(range);
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
};
|
|
320
|
-
SkyTextEditorSelectionService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorSelectionService_Factory() { return new SkyTextEditorSelectionService(); }, token: SkyTextEditorSelectionService, providedIn: "root" });
|
|
321
|
-
SkyTextEditorSelectionService = __decorate([
|
|
322
|
-
Injectable({
|
|
323
|
-
providedIn: 'root'
|
|
324
|
-
})
|
|
325
|
-
], SkyTextEditorSelectionService);
|
|
326
|
-
return SkyTextEditorSelectionService;
|
|
327
|
-
}());
|
|
328
|
-
|
|
329
|
-
/**
|
|
330
|
-
* @internal
|
|
331
|
-
*/
|
|
332
|
-
var SkyTextEditorAdapterService = /** @class */ (function () {
|
|
333
|
-
function SkyTextEditorAdapterService(selectionService, textEditorService, windowService) {
|
|
334
|
-
this.selectionService = selectionService;
|
|
335
|
-
this.textEditorService = textEditorService;
|
|
336
|
-
this.windowService = windowService;
|
|
337
|
-
}
|
|
338
|
-
Object.defineProperty(SkyTextEditorAdapterService.prototype, "editors", {
|
|
339
|
-
get: function () {
|
|
340
|
-
return this.textEditorService.editors;
|
|
341
|
-
},
|
|
342
|
-
enumerable: true,
|
|
343
|
-
configurable: true
|
|
344
|
-
});
|
|
345
|
-
/**
|
|
346
|
-
* Creates a text editor inside the supplied iframe element.
|
|
347
|
-
*/
|
|
348
|
-
SkyTextEditorAdapterService.prototype.addEditor = function (id, iframeElement, styleState, placeholder) {
|
|
349
|
-
if (!(id in this.editors)) {
|
|
350
|
-
this.editors[id] = this.createObservers(id, iframeElement);
|
|
351
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
352
|
-
var styleEl = documentEl.createElement('style');
|
|
353
|
-
styleEl.innerHTML = ".editor:empty:before {\n content: attr(data-placeholder);\n font-family: \"Blackbaud Sans\", Arial, sans-serif;\n color: #686c73;\n font-weight: 400;\n font-size: 15px;\n font-style: italic;\n }";
|
|
354
|
-
documentEl.head.appendChild(styleEl);
|
|
355
|
-
var style = __assign(__assign({}, STYLE_STATE_DEFAULTS), styleState);
|
|
356
|
-
var bodyStyle = "background-color: " + style.backColor + ";\n color: " + style.fontColor + ";\n font-family: " + style.font + ";\n font-size: " + style.fontSize + "px";
|
|
357
|
-
documentEl.querySelector('html').setAttribute('lang', 'en');
|
|
358
|
-
documentEl.body.setAttribute('contenteditable', 'true');
|
|
359
|
-
documentEl.body.setAttribute('id', id);
|
|
360
|
-
documentEl.body.setAttribute('role', 'main');
|
|
361
|
-
documentEl.body.setAttribute('class', 'editor');
|
|
362
|
-
documentEl.body.setAttribute('style', bodyStyle);
|
|
363
|
-
documentEl.body.setAttribute('data-placeholder', placeholder || '');
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
SkyTextEditorAdapterService.prototype.disableEditor = function (id, focusableChildren, textEditorNativeElement) {
|
|
367
|
-
this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, true);
|
|
368
|
-
};
|
|
369
|
-
SkyTextEditorAdapterService.prototype.enableEditor = function (id, focusableChildren, textEditorNativeElement) {
|
|
370
|
-
this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, false);
|
|
371
|
-
};
|
|
372
|
-
/**
|
|
373
|
-
* Executes a command on the text editor with the corresponding id.
|
|
374
|
-
*/
|
|
375
|
-
SkyTextEditorAdapterService.prototype.execCommand = function (id, editorCommand) {
|
|
376
|
-
if (id in this.editors) {
|
|
377
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
378
|
-
if (this.editorSelected(id)) {
|
|
379
|
-
var commandIsSupportedAndEnabled = documentEl.execCommand(editorCommand.command, false, editorCommand.value);
|
|
380
|
-
// IE11 doesn't support insertHTML
|
|
381
|
-
/* istanbul ignore next */
|
|
382
|
-
if (editorCommand.command.toLowerCase() === 'inserthtml' &&
|
|
383
|
-
!commandIsSupportedAndEnabled) {
|
|
384
|
-
this.insertHtmlInIE11(id, editorCommand.value);
|
|
385
|
-
}
|
|
386
|
-
this.focusEditor(id);
|
|
387
|
-
this.editors[id].commandChangeObservable.next();
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
};
|
|
391
|
-
SkyTextEditorAdapterService.prototype.getCurrentSelection = function (id) {
|
|
392
|
-
return this.selectionService.getCurrentSelection(this.getIframeDocumentEl(id));
|
|
393
|
-
};
|
|
394
|
-
/**
|
|
395
|
-
* Returns a data URI using the provided text string.
|
|
396
|
-
* Used to display a merge field inside a string of text.
|
|
397
|
-
*/
|
|
398
|
-
SkyTextEditorAdapterService.prototype.getMergeFieldDataURI = function (text) {
|
|
399
|
-
var documentEl = this.windowService.nativeWindow.document;
|
|
400
|
-
var textToUse = text;
|
|
401
|
-
if (text.length > 18) {
|
|
402
|
-
textToUse = text.substr(0, 15) + '...';
|
|
403
|
-
}
|
|
404
|
-
var canvasElement = documentEl.createElement('canvas');
|
|
405
|
-
canvasElement.setAttribute('height', '20');
|
|
406
|
-
canvasElement.setAttribute('width', '100');
|
|
407
|
-
canvasElement.style.backgroundColor = 'tan';
|
|
408
|
-
canvasElement.style.border = '1px solid #000000';
|
|
409
|
-
canvasElement.style.borderRadius = '5px';
|
|
410
|
-
var context = canvasElement.getContext('2d');
|
|
411
|
-
context.font = '12px Arial';
|
|
412
|
-
context.textAlign = 'center';
|
|
413
|
-
context.fillText(textToUse, 50, 15);
|
|
414
|
-
context.globalCompositeOperation = 'destination-over';
|
|
415
|
-
context.fillStyle = '#00FFFF';
|
|
416
|
-
context.fillRect(0, 0, 100, 20);
|
|
417
|
-
context.globalCompositeOperation = 'source-over';
|
|
418
|
-
context.lineWidth = 2;
|
|
419
|
-
context.strokeStyle = '#FF0000';
|
|
420
|
-
context.strokeRect(0, 0, 100, 20);
|
|
421
|
-
var result = canvasElement.toDataURL('image/png', 1.0);
|
|
422
|
-
return result;
|
|
423
|
-
};
|
|
424
|
-
SkyTextEditorAdapterService.prototype.getStyleState = function (id) {
|
|
425
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
426
|
-
if (this.editorSelected(id)) {
|
|
427
|
-
return {
|
|
428
|
-
backColor: this.getColor(documentEl, 'BackColor'),
|
|
429
|
-
fontColor: this.getColor(documentEl, 'ForeColor'),
|
|
430
|
-
fontSize: parseInt(this.getFontSize(id), undefined),
|
|
431
|
-
font: documentEl.queryCommandValue('fontname'),
|
|
432
|
-
boldState: documentEl.queryCommandState('Bold'),
|
|
433
|
-
italicState: documentEl.queryCommandState('Italic'),
|
|
434
|
-
underlineState: documentEl.queryCommandState('Underline'),
|
|
435
|
-
linkState: this.hasLink(id)
|
|
436
|
-
};
|
|
437
|
-
}
|
|
438
|
-
/* istanbul ignore next */
|
|
439
|
-
return {};
|
|
440
|
-
};
|
|
441
|
-
SkyTextEditorAdapterService.prototype.getEditorInnerHtml = function (id) {
|
|
442
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
443
|
-
if (documentEl) {
|
|
444
|
-
return this.replaceHtmlCodes(documentEl.body.innerHTML);
|
|
445
|
-
}
|
|
446
|
-
return '';
|
|
447
|
-
};
|
|
448
|
-
SkyTextEditorAdapterService.prototype.setEditorInnerHtml = function (id, value) {
|
|
449
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
450
|
-
var editorContent = documentEl.body;
|
|
451
|
-
if (editorContent.innerHTML !== value) {
|
|
452
|
-
editorContent.innerHTML = value;
|
|
453
|
-
}
|
|
454
|
-
};
|
|
455
|
-
SkyTextEditorAdapterService.prototype.focusEditor = function (id) {
|
|
456
|
-
if (id in this.editors) {
|
|
457
|
-
var windowEl = this.getContentWindowEl(id);
|
|
458
|
-
var iframeDocumentEl = this.getIframeDocumentEl(id);
|
|
459
|
-
var currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
|
|
460
|
-
var cursorIsNotActiveAndHasReset = currentSelection && (currentSelection.startOffset === 0 && currentSelection.endOffset === 0);
|
|
461
|
-
if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
|
|
462
|
-
// focus the end of the editor
|
|
463
|
-
var documentEl = this.windowService.nativeWindow.document;
|
|
464
|
-
var editor = iframeDocumentEl.body;
|
|
465
|
-
var range = documentEl.createRange();
|
|
466
|
-
this.editors[id].iframeElementRef.focus();
|
|
467
|
-
editor.focus();
|
|
468
|
-
/* istanbul ignore else */
|
|
469
|
-
if (windowEl.getSelection && documentEl.createRange) {
|
|
470
|
-
range.selectNodeContents(editor);
|
|
471
|
-
range.collapse(false);
|
|
472
|
-
var sel = windowEl.getSelection();
|
|
473
|
-
sel.removeAllRanges();
|
|
474
|
-
sel.addRange(range);
|
|
475
|
-
}
|
|
476
|
-
else {
|
|
477
|
-
// IE only
|
|
478
|
-
var textRange = editor.createTextRange();
|
|
479
|
-
textRange.moveToElementText(editor);
|
|
480
|
-
textRange.collapse(false);
|
|
481
|
-
textRange.select();
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
else {
|
|
485
|
-
// Cursor may not be active, restore it
|
|
486
|
-
this.editors[id].iframeElementRef.focus();
|
|
487
|
-
iframeDocumentEl.body.focus();
|
|
488
|
-
}
|
|
489
|
-
}
|
|
490
|
-
};
|
|
491
|
-
SkyTextEditorAdapterService.prototype.getLink = function (editorId) {
|
|
492
|
-
var link = undefined;
|
|
493
|
-
var anchorEl = this.getSelectedAnchorTag(editorId);
|
|
494
|
-
if (anchorEl && anchorEl.href) {
|
|
495
|
-
link = {
|
|
496
|
-
target: anchorEl.getAttribute('target') === '_blank' ? UrlTarget.NewWindow : UrlTarget.None,
|
|
497
|
-
url: anchorEl.href
|
|
498
|
-
};
|
|
499
|
-
}
|
|
500
|
-
return link;
|
|
501
|
-
};
|
|
502
|
-
SkyTextEditorAdapterService.prototype.getSelectedAnchorTag = function (editorId) {
|
|
503
|
-
var selectedEl = this.getCurrentSelectionParentElement(editorId);
|
|
504
|
-
return this.getParent(selectedEl, 'a');
|
|
505
|
-
};
|
|
506
|
-
SkyTextEditorAdapterService.prototype.saveSelection = function (id) {
|
|
507
|
-
return this.selectionService.getCurrentSelectionRange(this.getIframeDocumentEl(id), this.getContentWindowEl(id));
|
|
508
|
-
};
|
|
509
|
-
SkyTextEditorAdapterService.prototype.selectElement = function (id, element) {
|
|
510
|
-
this.selectionService.selectElement(this.getIframeDocumentEl(id), this.getContentWindowEl(id), element);
|
|
511
|
-
};
|
|
512
|
-
SkyTextEditorAdapterService.prototype.setPlaceholder = function (id, placeholder) {
|
|
513
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
514
|
-
documentEl.body.setAttribute('data-placeholder', placeholder || '');
|
|
515
|
-
};
|
|
516
|
-
SkyTextEditorAdapterService.prototype.setFontSize = function (id, fontSize) {
|
|
517
|
-
var e_1, _a;
|
|
518
|
-
var doc = this.getIframeDocumentEl(id);
|
|
519
|
-
this.execCommand(id, { command: 'fontSize', value: 1 });
|
|
520
|
-
var fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
|
|
521
|
-
try {
|
|
522
|
-
for (var fontElements_1 = __values(fontElements), fontElements_1_1 = fontElements_1.next(); !fontElements_1_1.done; fontElements_1_1 = fontElements_1.next()) {
|
|
523
|
-
var element = fontElements_1_1.value;
|
|
524
|
-
element.removeAttribute('size');
|
|
525
|
-
element.style.fontSize = (fontSize + 'px');
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
529
|
-
finally {
|
|
530
|
-
try {
|
|
531
|
-
if (fontElements_1_1 && !fontElements_1_1.done && (_a = fontElements_1.return)) _a.call(fontElements_1);
|
|
532
|
-
}
|
|
533
|
-
finally { if (e_1) throw e_1.error; }
|
|
534
|
-
}
|
|
535
|
-
this.cleanUpBlankStyleTags(doc);
|
|
536
|
-
this.focusEditor(id);
|
|
537
|
-
this.editors[id].commandChangeObservable.next();
|
|
538
|
-
};
|
|
539
|
-
SkyTextEditorAdapterService.prototype.removeObservers = function (setting) {
|
|
540
|
-
/* istanbul ignore next */
|
|
541
|
-
var documentEl = setting.iframeElementRef.contentWindow ?
|
|
542
|
-
setting.iframeElementRef.contentWindow.document :
|
|
543
|
-
setting.iframeElementRef.contentDocument;
|
|
544
|
-
setting.selectionChangeObservable.complete();
|
|
545
|
-
setting.clickObservable.complete();
|
|
546
|
-
setting.commandChangeObservable.complete();
|
|
547
|
-
documentEl.removeEventListener('selectionchange', setting.selectionListener);
|
|
548
|
-
documentEl.removeEventListener('input', setting.selectionListener);
|
|
549
|
-
documentEl.removeEventListener('mousedown', setting.clickListener);
|
|
550
|
-
documentEl.body.removeEventListener('paste', setting.pasteListener);
|
|
551
|
-
};
|
|
552
|
-
SkyTextEditorAdapterService.prototype.getContentWindowEl = function (id) {
|
|
553
|
-
return this.editors[id].iframeElementRef.contentWindow;
|
|
554
|
-
};
|
|
555
|
-
SkyTextEditorAdapterService.prototype.getChildSelectedAnchorTags = function (editorId) {
|
|
556
|
-
var selectedRange = this.getCurrentSelection(editorId).getRangeAt(0);
|
|
557
|
-
if (selectedRange.toString().length <= 0) {
|
|
558
|
-
return [];
|
|
559
|
-
}
|
|
560
|
-
var parentElement = this.getCurrentSelectionParentElement(editorId);
|
|
561
|
-
var childElements = parentElement ? Array.from(parentElement.querySelectorAll('a')) : [];
|
|
562
|
-
/* istanbul ignore next */
|
|
563
|
-
return childElements.filter(function (element) {
|
|
564
|
-
// IE specific
|
|
565
|
-
if (!selectedRange.intersectsNode) {
|
|
566
|
-
if (!element || !element.href) {
|
|
567
|
-
return false;
|
|
568
|
-
}
|
|
569
|
-
var tempRange = document.createRange();
|
|
570
|
-
tempRange.selectNodeContents(element);
|
|
571
|
-
return (selectedRange.compareBoundaryPoints(Range.START_TO_START, tempRange) !== -1
|
|
572
|
-
&& selectedRange.compareBoundaryPoints(Range.START_TO_END, tempRange) !== 1) ||
|
|
573
|
-
(selectedRange.compareBoundaryPoints(Range.END_TO_START, tempRange) !== -1
|
|
574
|
-
&& selectedRange.compareBoundaryPoints(Range.END_TO_END, tempRange) !== 1);
|
|
575
|
-
}
|
|
576
|
-
// Normal non-IE
|
|
577
|
-
return !!element && !!element.href && selectedRange.intersectsNode(element);
|
|
578
|
-
});
|
|
579
|
-
};
|
|
580
|
-
SkyTextEditorAdapterService.prototype.getIframeDocumentEl = function (id) {
|
|
581
|
-
/* istanbul ignore next */
|
|
582
|
-
if (!(id in this.editors)) {
|
|
583
|
-
return undefined;
|
|
584
|
-
}
|
|
585
|
-
var contentWindowEl = this.getContentWindowEl(id);
|
|
586
|
-
if (contentWindowEl) {
|
|
587
|
-
return contentWindowEl.document;
|
|
588
|
-
}
|
|
589
|
-
/* istanbul ignore next */
|
|
590
|
-
return this.editors[id].iframeElementRef.contentDocument;
|
|
591
|
-
};
|
|
592
|
-
SkyTextEditorAdapterService.prototype.getFontSize = function (id) {
|
|
593
|
-
var fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
|
|
594
|
-
var selection = this.getCurrentSelection(id);
|
|
595
|
-
if (selection &&
|
|
596
|
-
selection.anchorNode &&
|
|
597
|
-
selection.anchorNode.parentElement) {
|
|
598
|
-
var element = selection.anchorNode;
|
|
599
|
-
if (element.nodeType !== 1) {
|
|
600
|
-
element = element.parentElement;
|
|
601
|
-
}
|
|
602
|
-
var computedStyle = window.getComputedStyle(element);
|
|
603
|
-
/* istanbul ignore else */
|
|
604
|
-
if (computedStyle) {
|
|
605
|
-
fontSize = computedStyle.getPropertyValue('font-size');
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
return fontSize;
|
|
609
|
-
};
|
|
610
|
-
SkyTextEditorAdapterService.prototype.createObservers = function (id, element) {
|
|
611
|
-
/* istanbul ignore next */
|
|
612
|
-
var documentEl = element.contentWindow ?
|
|
613
|
-
element.contentWindow.document :
|
|
614
|
-
element.contentDocument;
|
|
615
|
-
// Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
|
|
616
|
-
documentEl.open();
|
|
617
|
-
documentEl.close();
|
|
618
|
-
var selectionObservable = new Subject();
|
|
619
|
-
var selectionListener = function () { return selectionObservable.next(); };
|
|
620
|
-
var clickObservable = new Subject();
|
|
621
|
-
var clickListener = function () { return clickObservable.next(); };
|
|
622
|
-
var pasteListener = this.getPasteOverride(id);
|
|
623
|
-
documentEl.addEventListener('selectionchange', selectionListener);
|
|
624
|
-
documentEl.addEventListener('input', selectionListener);
|
|
625
|
-
documentEl.addEventListener('mousedown', clickListener);
|
|
626
|
-
documentEl.body.addEventListener('paste', pasteListener);
|
|
627
|
-
return {
|
|
628
|
-
iframeElementRef: element,
|
|
629
|
-
selectionListener: selectionListener,
|
|
630
|
-
clickListener: clickListener,
|
|
631
|
-
pasteListener: pasteListener,
|
|
632
|
-
selectionChangeObservable: selectionObservable,
|
|
633
|
-
clickObservable: clickObservable,
|
|
634
|
-
commandChangeObservable: new Subject()
|
|
635
|
-
};
|
|
636
|
-
};
|
|
637
|
-
/* istanbul ignore next */
|
|
638
|
-
SkyTextEditorAdapterService.prototype.getPasteOverride = function (id) {
|
|
639
|
-
var _this = this;
|
|
640
|
-
return function (e) {
|
|
641
|
-
e.preventDefault();
|
|
642
|
-
var text = e.clipboardData.getData('text/plain');
|
|
643
|
-
_this.execCommand(id, { command: 'insertHTML', value: text });
|
|
644
|
-
};
|
|
645
|
-
};
|
|
646
|
-
SkyTextEditorAdapterService.prototype.getCurrentSelectionParentElement = function (id) {
|
|
647
|
-
return this.selectionService.getCurrentSelectionParentElement(this.getIframeDocumentEl(id));
|
|
648
|
-
};
|
|
649
|
-
SkyTextEditorAdapterService.prototype.getColor = function (documentEl, selector) {
|
|
650
|
-
var commandValue = documentEl.queryCommandValue(selector);
|
|
651
|
-
// Edge is weird and returns numbers
|
|
652
|
-
if (typeof commandValue === 'number') {
|
|
653
|
-
/* istanbul ignore next */
|
|
654
|
-
// tslint:disable-next-line: no-bitwise
|
|
655
|
-
return 'rgb(' + (commandValue & 0xFF) + ', ' +
|
|
656
|
-
// tslint:disable-next-line: no-bitwise
|
|
657
|
-
((commandValue & 0xFF00) >> 8) + ', ' +
|
|
658
|
-
// tslint:disable-next-line: no-bitwise
|
|
659
|
-
((commandValue & 0xFF0000) >> 16) + ')';
|
|
660
|
-
}
|
|
661
|
-
// Firefox uses 'Transparent' instead of a color value
|
|
662
|
-
/* istanbul ignore next */
|
|
663
|
-
if (commandValue.toString().toLowerCase() === 'transparent') {
|
|
664
|
-
return STYLE_STATE_DEFAULTS.backColor;
|
|
665
|
-
}
|
|
666
|
-
return commandValue;
|
|
667
|
-
};
|
|
668
|
-
SkyTextEditorAdapterService.prototype.hasLink = function (editorId) {
|
|
669
|
-
var anchorEl = this.getSelectedAnchorTag(editorId);
|
|
670
|
-
var childAnchorEls = this.getChildSelectedAnchorTags(editorId);
|
|
671
|
-
return childAnchorEls.length > 0 || (!!anchorEl && !!anchorEl.href);
|
|
672
|
-
};
|
|
673
|
-
SkyTextEditorAdapterService.prototype.getParent = function (element, tag) {
|
|
674
|
-
var currentNode = element;
|
|
675
|
-
while (currentNode && currentNode.tagName.toUpperCase() !== 'BODY') {
|
|
676
|
-
if (currentNode.tagName.toUpperCase() === tag.toUpperCase()) {
|
|
677
|
-
return currentNode;
|
|
678
|
-
}
|
|
679
|
-
currentNode = currentNode.parentElement;
|
|
680
|
-
}
|
|
681
|
-
return undefined;
|
|
682
|
-
};
|
|
683
|
-
SkyTextEditorAdapterService.prototype.editorSelected = function (id) {
|
|
684
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
685
|
-
return this.selectionService.isElementSelected(documentEl, documentEl.body);
|
|
686
|
-
};
|
|
687
|
-
/* istanbul ignore next */
|
|
688
|
-
SkyTextEditorAdapterService.prototype.insertHtmlInIE11 = function (id, html) {
|
|
689
|
-
var documentEl = this.getIframeDocumentEl(id);
|
|
690
|
-
var windowEl = this.getContentWindowEl(id);
|
|
691
|
-
var sel = windowEl.getSelection();
|
|
692
|
-
if (sel.getRangeAt && sel.rangeCount) {
|
|
693
|
-
var range = sel.getRangeAt(0);
|
|
694
|
-
range.deleteContents();
|
|
695
|
-
var el = documentEl.createElement('div');
|
|
696
|
-
el.innerHTML = html;
|
|
697
|
-
var frag = documentEl.createDocumentFragment(), node = void 0, lastNode = void 0;
|
|
698
|
-
while (el.firstChild) {
|
|
699
|
-
node = el.firstChild;
|
|
700
|
-
lastNode = frag.appendChild(node);
|
|
701
|
-
}
|
|
702
|
-
range.insertNode(frag);
|
|
703
|
-
// Preserve the selection
|
|
704
|
-
if (lastNode) {
|
|
705
|
-
range = range.cloneRange();
|
|
706
|
-
range.setStartAfter(lastNode);
|
|
707
|
-
range.collapse(true);
|
|
708
|
-
sel.removeAllRanges();
|
|
709
|
-
sel.addRange(range);
|
|
710
|
-
}
|
|
711
|
-
}
|
|
712
|
-
};
|
|
713
|
-
SkyTextEditorAdapterService.prototype.cleanUpBlankStyleTags = function (doc) {
|
|
714
|
-
var e_2, _a, e_3, _b;
|
|
715
|
-
var orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
|
|
716
|
-
try {
|
|
717
|
-
for (var orphanElements_1 = __values(orphanElements), orphanElements_1_1 = orphanElements_1.next(); !orphanElements_1_1.done; orphanElements_1_1 = orphanElements_1.next()) {
|
|
718
|
-
var element = orphanElements_1_1.value;
|
|
719
|
-
if (!element.getAttribute('style')) {
|
|
720
|
-
element.removeAttribute('style');
|
|
721
|
-
}
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
725
|
-
finally {
|
|
726
|
-
try {
|
|
727
|
-
if (orphanElements_1_1 && !orphanElements_1_1.done && (_a = orphanElements_1.return)) _a.call(orphanElements_1);
|
|
728
|
-
}
|
|
729
|
-
finally { if (e_2) throw e_2.error; }
|
|
730
|
-
}
|
|
731
|
-
var removableElements = orphanElements.filter(function (element) {
|
|
732
|
-
var tagName = element.tagName.toUpperCase();
|
|
733
|
-
return (tagName === 'FONT' || tagName === 'SPAN') &&
|
|
734
|
-
(element.attributes.length === 0 || !element.hasChildNodes);
|
|
735
|
-
});
|
|
736
|
-
try {
|
|
737
|
-
for (var removableElements_1 = __values(removableElements), removableElements_1_1 = removableElements_1.next(); !removableElements_1_1.done; removableElements_1_1 = removableElements_1.next()) {
|
|
738
|
-
var element = removableElements_1_1.value;
|
|
739
|
-
var parent_1 = element.parentNode;
|
|
740
|
-
/* istanbul ignore else */
|
|
741
|
-
if (parent_1) {
|
|
742
|
-
while (element.firstChild) {
|
|
743
|
-
parent_1.insertBefore(element.firstChild, element);
|
|
744
|
-
}
|
|
745
|
-
parent_1.removeChild(element);
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
}
|
|
749
|
-
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
750
|
-
finally {
|
|
751
|
-
try {
|
|
752
|
-
if (removableElements_1_1 && !removableElements_1_1.done && (_b = removableElements_1.return)) _b.call(removableElements_1);
|
|
753
|
-
}
|
|
754
|
-
finally { if (e_3) throw e_3.error; }
|
|
755
|
-
}
|
|
756
|
-
};
|
|
757
|
-
// Certain values are encoded in html and need to be decoded
|
|
758
|
-
SkyTextEditorAdapterService.prototype.replaceHtmlCodes = function (str) {
|
|
759
|
-
return str.replace(/ /, String.fromCharCode(160))
|
|
760
|
-
.replace(/</g, '<')
|
|
761
|
-
.replace(/>/g, '>')
|
|
762
|
-
.replace(/&/g, '&');
|
|
763
|
-
};
|
|
764
|
-
SkyTextEditorAdapterService.prototype.setEditorDisabled = function (id, focusableChildren, textEditorNativeElement, disabled) {
|
|
765
|
-
textEditorNativeElement.style.pointerEvents = disabled ? 'none' : 'auto';
|
|
766
|
-
textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
|
767
|
-
focusableChildren.forEach(function (aFocusableChild) {
|
|
768
|
-
aFocusableChild.tabIndex = disabled ? -1 : 0;
|
|
769
|
-
});
|
|
770
|
-
this.getIframeDocumentEl(id).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
|
|
771
|
-
};
|
|
772
|
-
SkyTextEditorAdapterService.ctorParameters = function () { return [
|
|
773
|
-
{ type: SkyTextEditorSelectionService },
|
|
774
|
-
{ type: SkyTextEditorService },
|
|
775
|
-
{ type: SkyAppWindowRef }
|
|
776
|
-
]; };
|
|
777
|
-
SkyTextEditorAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorAdapterService_Factory() { return new SkyTextEditorAdapterService(ɵɵinject(SkyTextEditorSelectionService), ɵɵinject(SkyTextEditorService), ɵɵinject(SkyAppWindowRef)); }, token: SkyTextEditorAdapterService, providedIn: "root" });
|
|
778
|
-
SkyTextEditorAdapterService = __decorate([
|
|
779
|
-
Injectable({
|
|
780
|
-
providedIn: 'root'
|
|
781
|
-
})
|
|
782
|
-
], SkyTextEditorAdapterService);
|
|
783
|
-
return SkyTextEditorAdapterService;
|
|
784
|
-
}());
|
|
785
|
-
|
|
786
|
-
// Need to add the following to classes which contain static methods.
|
|
787
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
788
|
-
// @dynamic
|
|
789
|
-
var SkyFormsUtility = /** @class */ (function () {
|
|
790
|
-
function SkyFormsUtility() {
|
|
791
|
-
}
|
|
792
|
-
/** Coerces a data-bound value (typically a string) to a boolean. */
|
|
793
|
-
SkyFormsUtility.coerceBooleanProperty = function (value) {
|
|
794
|
-
return value !== undefined && "" + value !== 'false';
|
|
795
|
-
};
|
|
796
|
-
return SkyFormsUtility;
|
|
797
|
-
}());
|
|
798
|
-
|
|
799
|
-
/**
|
|
800
|
-
* @internal
|
|
801
|
-
*/
|
|
802
|
-
var SkyTextEditorMenubarComponent = /** @class */ (function () {
|
|
803
|
-
function SkyTextEditorMenubarComponent(adapterService, changeDetector, resources) {
|
|
804
|
-
this.adapterService = adapterService;
|
|
805
|
-
this.changeDetector = changeDetector;
|
|
806
|
-
this.resources = resources;
|
|
807
|
-
this.editorFocusStream = new Subject();
|
|
808
|
-
this.menus = [];
|
|
809
|
-
this.mergeFields = [];
|
|
810
|
-
this._disabled = false;
|
|
811
|
-
this.editDropdownStream = new Subject();
|
|
812
|
-
this.formatDropdownStream = new Subject();
|
|
813
|
-
this.mergeFieldDropdownStream = new Subject();
|
|
814
|
-
this.ngUnsubscribe = new Subject();
|
|
815
|
-
}
|
|
816
|
-
Object.defineProperty(SkyTextEditorMenubarComponent.prototype, "disabled", {
|
|
817
|
-
get: function () {
|
|
818
|
-
return this._disabled;
|
|
819
|
-
},
|
|
820
|
-
set: function (value) {
|
|
821
|
-
var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
|
|
822
|
-
if (coercedValue !== this.disabled) {
|
|
823
|
-
this._disabled = coercedValue;
|
|
824
|
-
this.changeDetector.markForCheck();
|
|
825
|
-
}
|
|
826
|
-
},
|
|
827
|
-
enumerable: true,
|
|
828
|
-
configurable: true
|
|
829
|
-
});
|
|
830
|
-
SkyTextEditorMenubarComponent.prototype.ngOnInit = function () {
|
|
831
|
-
var _this = this;
|
|
832
|
-
this.editorFocusStream
|
|
833
|
-
.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function () {
|
|
834
|
-
_this.closeDropdowns();
|
|
835
|
-
});
|
|
836
|
-
forkJoin([
|
|
837
|
-
// Format menu strings.
|
|
838
|
-
this.resources.getString('skyux_text_editor_format_menu_action_bold_label'),
|
|
839
|
-
this.resources.getString('skyux_text_editor_format_menu_action_bold_key_shortcut'),
|
|
840
|
-
this.resources.getString('skyux_text_editor_format_menu_action_italic_label'),
|
|
841
|
-
this.resources.getString('skyux_text_editor_format_menu_action_italic_key_shortcut'),
|
|
842
|
-
this.resources.getString('skyux_text_editor_format_menu_action_underline_label'),
|
|
843
|
-
this.resources.getString('skyux_text_editor_format_menu_action_underline_key_shortcut'),
|
|
844
|
-
this.resources.getString('skyux_text_editor_format_menu_action_strikethrough_label'),
|
|
845
|
-
this.resources.getString('skyux_text_editor_format_menu_action_clear_formatting_label'),
|
|
846
|
-
// Edit menu string - start at index 8.
|
|
847
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),
|
|
848
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_undo_key_shortcut'),
|
|
849
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),
|
|
850
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_redo_key_shortcut'),
|
|
851
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),
|
|
852
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_cut_key_shortcut'),
|
|
853
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),
|
|
854
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_copy_key_shortcut'),
|
|
855
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
|
|
856
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
|
|
857
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
|
|
858
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut')
|
|
859
|
-
])
|
|
860
|
-
.pipe(take(1))
|
|
861
|
-
.subscribe(function (resources) {
|
|
862
|
-
_this.formatItems = [
|
|
863
|
-
{
|
|
864
|
-
function: function () { return _this.execCommand('bold'); },
|
|
865
|
-
label: resources[0],
|
|
866
|
-
keyShortcut: resources[1]
|
|
867
|
-
},
|
|
868
|
-
{
|
|
869
|
-
function: function () { return _this.execCommand('italic'); },
|
|
870
|
-
label: resources[2],
|
|
871
|
-
keyShortcut: resources[3]
|
|
872
|
-
},
|
|
873
|
-
{
|
|
874
|
-
function: function () { return _this.execCommand('underline'); },
|
|
875
|
-
label: resources[4],
|
|
876
|
-
keyShortcut: resources[5]
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
function: function () { return _this.execCommand('strikethrough'); },
|
|
880
|
-
label: resources[6]
|
|
881
|
-
},
|
|
882
|
-
{
|
|
883
|
-
isDivider: true
|
|
884
|
-
},
|
|
885
|
-
{
|
|
886
|
-
function: function () { return _this.clearFormat(); },
|
|
887
|
-
label: resources[7]
|
|
888
|
-
}
|
|
889
|
-
];
|
|
890
|
-
_this.editItems = [
|
|
891
|
-
{
|
|
892
|
-
function: function () { return _this.execCommand('undo'); },
|
|
893
|
-
label: resources[8],
|
|
894
|
-
keyShortcut: resources[9]
|
|
895
|
-
},
|
|
896
|
-
{
|
|
897
|
-
function: function () { return _this.execCommand('redo'); },
|
|
898
|
-
label: resources[10],
|
|
899
|
-
keyShortcut: resources[11]
|
|
900
|
-
},
|
|
901
|
-
{
|
|
902
|
-
isDivider: true
|
|
903
|
-
},
|
|
904
|
-
{
|
|
905
|
-
function: function () { return _this.execCommand('cut'); },
|
|
906
|
-
label: resources[12],
|
|
907
|
-
keyShortcut: resources[13]
|
|
908
|
-
},
|
|
909
|
-
{
|
|
910
|
-
function: function () { return _this.execCommand('copy'); },
|
|
911
|
-
label: resources[14],
|
|
912
|
-
keyShortcut: resources[15]
|
|
913
|
-
},
|
|
914
|
-
{
|
|
915
|
-
function: function () { return _this.execCommand('paste'); },
|
|
916
|
-
label: resources[16],
|
|
917
|
-
keyShortcut: resources[17]
|
|
918
|
-
},
|
|
919
|
-
{
|
|
920
|
-
isDivider: true
|
|
921
|
-
},
|
|
922
|
-
{
|
|
923
|
-
function: function () { return _this.execCommand('selectAll'); },
|
|
924
|
-
label: resources[18],
|
|
925
|
-
keyShortcut: resources[19]
|
|
926
|
-
}
|
|
927
|
-
];
|
|
928
|
-
});
|
|
929
|
-
};
|
|
930
|
-
SkyTextEditorMenubarComponent.prototype.ngOnDestroy = function () {
|
|
931
|
-
this.ngUnsubscribe.next();
|
|
932
|
-
this.ngUnsubscribe.complete();
|
|
933
|
-
};
|
|
934
|
-
SkyTextEditorMenubarComponent.prototype.execCommand = function (command, value) {
|
|
935
|
-
if (value === void 0) { value = ''; }
|
|
936
|
-
this.adapterService.execCommand(this.editorId, {
|
|
937
|
-
command: command,
|
|
938
|
-
value: value
|
|
939
|
-
});
|
|
940
|
-
};
|
|
941
|
-
SkyTextEditorMenubarComponent.prototype.insertMergeField = function (field) {
|
|
942
|
-
this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' + field.id +
|
|
943
|
-
'" data-fielddisplay="' + field.name +
|
|
944
|
-
'" src="' + (field.previewImageUrl || this.adapterService.getMergeFieldDataURI(field.name)) + '">');
|
|
945
|
-
};
|
|
946
|
-
SkyTextEditorMenubarComponent.prototype.closeDropdowns = function () {
|
|
947
|
-
this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
|
|
948
|
-
this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
|
|
949
|
-
this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
|
|
950
|
-
};
|
|
951
|
-
SkyTextEditorMenubarComponent.prototype.clearFormat = function () {
|
|
952
|
-
var currentSelection = this.adapterService.getCurrentSelection(this.editorId);
|
|
953
|
-
if (currentSelection.rangeCount > 0 && currentSelection.getRangeAt(0).toString().length <= 0) {
|
|
954
|
-
this.execCommand('selectAll');
|
|
955
|
-
}
|
|
956
|
-
this.execCommand('removeFormat');
|
|
957
|
-
};
|
|
958
|
-
SkyTextEditorMenubarComponent.ctorParameters = function () { return [
|
|
959
|
-
{ type: SkyTextEditorAdapterService },
|
|
960
|
-
{ type: ChangeDetectorRef },
|
|
961
|
-
{ type: SkyLibResourcesService }
|
|
962
|
-
]; };
|
|
963
|
-
__decorate([
|
|
964
|
-
Input()
|
|
965
|
-
], SkyTextEditorMenubarComponent.prototype, "editorFocusStream", void 0);
|
|
966
|
-
__decorate([
|
|
967
|
-
Input()
|
|
968
|
-
], SkyTextEditorMenubarComponent.prototype, "editorId", void 0);
|
|
969
|
-
__decorate([
|
|
970
|
-
Input()
|
|
971
|
-
], SkyTextEditorMenubarComponent.prototype, "menus", void 0);
|
|
972
|
-
__decorate([
|
|
973
|
-
Input()
|
|
974
|
-
], SkyTextEditorMenubarComponent.prototype, "mergeFields", void 0);
|
|
975
|
-
__decorate([
|
|
976
|
-
Input()
|
|
977
|
-
], SkyTextEditorMenubarComponent.prototype, "disabled", null);
|
|
978
|
-
SkyTextEditorMenubarComponent = __decorate([
|
|
979
|
-
Component({
|
|
980
|
-
selector: 'sky-text-editor-menubar',
|
|
981
|
-
template: "\n <sky-toolbar-item *ngFor=\"let menu of menus\"\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n >\n <ng-container\n [ngSwitch]=\"menu\"\n >\n <ng-container *ngSwitchCase=\"'edit'\">\n <sky-dropdown\n label=\"Edit menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"editDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_edit_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n <button *ngIf=\"!editItem.isDivider\"\n type=\"button\"\n (click)=\"editItem.function()\"\n >\n {{ editItem.label }}\n <div *ngIf=\"editItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized' : 'modern',\n 'sky-deemphasized' : 'default'\n }\"\n >\n {{ editItem.keyShortcut }}\n </div>\n </button>\n <div *ngIf=\"editItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n >\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'format'\">\n <sky-dropdown\n label=\"Format menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"formatDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_format_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n <button *ngIf=\"!formatItem.isDivider\"\n type=\"button\"\n (click)=\"formatItem.function()\"\n >\n {{ formatItem.label }}\n <div *ngIf=\"formatItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized' : 'modern',\n 'sky-deemphasized' : 'default'\n }\"\n >\n {{ formatItem.keyShortcut}}\n </div>\n </button>\n <div *ngIf=\"formatItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n >\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'merge-field'\">\n <sky-dropdown *ngIf=\"mergeFields && mergeFields.length > 0\"\n label=\"Insert merge field\"\n [disabled]=\"disabled\"\n [messageStream]=\"mergeFieldDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_insert_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n <button\n type=\"button\"\n (click)=\"insertMergeField(mergeField)\"\n >\n {{ mergeField.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n </ng-container>\n </sky-toolbar-item>\n",
|
|
982
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
983
|
-
styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:0 0;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}"]
|
|
984
|
-
})
|
|
985
|
-
], SkyTextEditorMenubarComponent);
|
|
986
|
-
return SkyTextEditorMenubarComponent;
|
|
987
|
-
}());
|
|
988
|
-
|
|
989
|
-
/**
|
|
990
|
-
* @internal
|
|
991
|
-
*/
|
|
992
|
-
var SkyUrlModalContext = /** @class */ (function () {
|
|
993
|
-
function SkyUrlModalContext() {
|
|
994
|
-
}
|
|
995
|
-
return SkyUrlModalContext;
|
|
996
|
-
}());
|
|
997
|
-
|
|
998
|
-
var emailKey = 'mailto:';
|
|
999
|
-
var queryStringParamKey = '?Subject=';
|
|
1000
|
-
/**
|
|
1001
|
-
* @internal
|
|
1002
|
-
*/
|
|
1003
|
-
var SkyTextEditorUrlModalComponent = /** @class */ (function () {
|
|
1004
|
-
function SkyTextEditorUrlModalComponent(modalInstance, modalContext) {
|
|
1005
|
-
this.modalInstance = modalInstance;
|
|
1006
|
-
this.emailAddressValid = false;
|
|
1007
|
-
this.subject = '';
|
|
1008
|
-
this.target = 0;
|
|
1009
|
-
this.valid = false;
|
|
1010
|
-
this._activeTab = 0;
|
|
1011
|
-
this._emailAddress = '';
|
|
1012
|
-
this._url = 'https://';
|
|
1013
|
-
if (modalContext.urlResult) {
|
|
1014
|
-
if (modalContext.urlResult.url.startsWith(emailKey)) {
|
|
1015
|
-
this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
|
|
1016
|
-
var queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
|
|
1017
|
-
queryStringIndex = queryStringIndex > -1 ? queryStringIndex : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
|
|
1018
|
-
if (queryStringIndex > -1) {
|
|
1019
|
-
this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
|
|
1020
|
-
this.emailAddress = this.emailAddress.slice(0, queryStringIndex);
|
|
1021
|
-
}
|
|
1022
|
-
// Set active tab to email
|
|
1023
|
-
this.activeTab = 1;
|
|
1024
|
-
}
|
|
1025
|
-
else {
|
|
1026
|
-
this.url = modalContext.urlResult.url,
|
|
1027
|
-
this.target = modalContext.urlResult.target;
|
|
1028
|
-
// set active tab to web page
|
|
1029
|
-
this.activeTab = 0;
|
|
1030
|
-
}
|
|
1031
|
-
}
|
|
1032
|
-
}
|
|
1033
|
-
Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "activeTab", {
|
|
1034
|
-
get: function () {
|
|
1035
|
-
return this._activeTab;
|
|
1036
|
-
},
|
|
1037
|
-
set: function (value) {
|
|
1038
|
-
this._activeTab = value;
|
|
1039
|
-
this.valid = this.isValid();
|
|
1040
|
-
},
|
|
1041
|
-
enumerable: true,
|
|
1042
|
-
configurable: true
|
|
1043
|
-
});
|
|
1044
|
-
Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "emailAddress", {
|
|
1045
|
-
get: function () {
|
|
1046
|
-
return this._emailAddress;
|
|
1047
|
-
},
|
|
1048
|
-
set: function (value) {
|
|
1049
|
-
this._emailAddress = value;
|
|
1050
|
-
this.valid = this.isValid();
|
|
1051
|
-
},
|
|
1052
|
-
enumerable: true,
|
|
1053
|
-
configurable: true
|
|
1054
|
-
});
|
|
1055
|
-
Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "url", {
|
|
1056
|
-
get: function () {
|
|
1057
|
-
return this._url;
|
|
1058
|
-
},
|
|
1059
|
-
set: function (value) {
|
|
1060
|
-
this._url = value;
|
|
1061
|
-
this.valid = this.isValid();
|
|
1062
|
-
},
|
|
1063
|
-
enumerable: true,
|
|
1064
|
-
configurable: true
|
|
1065
|
-
});
|
|
1066
|
-
SkyTextEditorUrlModalComponent.prototype.activeTabChanged = function (value) {
|
|
1067
|
-
this.activeTab = value;
|
|
1068
|
-
};
|
|
1069
|
-
SkyTextEditorUrlModalComponent.prototype.save = function () {
|
|
1070
|
-
if (this.isValid()) {
|
|
1071
|
-
if (this.activeTab === 0) {
|
|
1072
|
-
this.modalInstance.save({
|
|
1073
|
-
url: this.url,
|
|
1074
|
-
target: this.target ? parseInt(this.target, undefined) : UrlTarget.None
|
|
1075
|
-
});
|
|
1076
|
-
}
|
|
1077
|
-
else {
|
|
1078
|
-
this.modalInstance.save({
|
|
1079
|
-
url: this.getEmailUrl(),
|
|
1080
|
-
target: UrlTarget.None
|
|
1081
|
-
});
|
|
1082
|
-
}
|
|
1083
|
-
}
|
|
1084
|
-
};
|
|
1085
|
-
SkyTextEditorUrlModalComponent.prototype.cancel = function () {
|
|
1086
|
-
this.modalInstance.cancel();
|
|
1087
|
-
};
|
|
1088
|
-
SkyTextEditorUrlModalComponent.prototype.getEmailUrl = function () {
|
|
1089
|
-
return emailKey + this.emailAddress + (this.subject ? '?Subject=' + encodeURI(this.subject) : '');
|
|
1090
|
-
};
|
|
1091
|
-
SkyTextEditorUrlModalComponent.prototype.isValid = function () {
|
|
1092
|
-
if (this.activeTab === 0) {
|
|
1093
|
-
return !!this.url && SkyValidation.isUrl(this.url);
|
|
1094
|
-
}
|
|
1095
|
-
return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
|
|
1096
|
-
};
|
|
1097
|
-
SkyTextEditorUrlModalComponent.ctorParameters = function () { return [
|
|
1098
|
-
{ type: SkyModalInstance },
|
|
1099
|
-
{ type: SkyUrlModalContext }
|
|
1100
|
-
]; };
|
|
1101
|
-
SkyTextEditorUrlModalComponent = __decorate([
|
|
1102
|
-
Component({
|
|
1103
|
-
selector: 'skyux-text-editor-url-modal',
|
|
1104
|
-
template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab\n tabHeading=\"Web page\"\n >\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"url\"\n skyId\n #urlInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label\n class=\"sky-control-label\"\n [for]=\"targetInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n [(ngModel)]=\"target\"\n skyId\n #targetInput=\"skyId\"\n >\n <option value=\"0\">\n {{ 'skyux_text_editor_url_modal_current_option_label' | skyLibResources }}\n </option>\n <option value=\"1\">\n {{ 'skyux_text_editor_url_modal_new_option_label' | skyLibResources }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab\n tabHeading=\"Email address\"\n >\n <div class=\"sky-form-group first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"emailAddress\"\n skyId\n #emailAddressInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label\n class=\"sky-control-label\"\n [for]=\"subjectInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"subject\"\n skyId\n #subjectInput=\"skyId\"\n />\n </sky-input-box>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"submit\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!valid\"\n (click)=\"save()\"\n >\n {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n </button>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link\"\n (click)=\"cancel()\"\n >\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n",
|
|
1105
|
-
styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}"]
|
|
1106
|
-
})
|
|
1107
|
-
], SkyTextEditorUrlModalComponent);
|
|
1108
|
-
return SkyTextEditorUrlModalComponent;
|
|
1109
|
-
}());
|
|
1110
|
-
|
|
1111
|
-
/**
|
|
1112
|
-
* @internal
|
|
1113
|
-
*/
|
|
1114
|
-
var SkyTextEditorToolbarComponent = /** @class */ (function () {
|
|
1115
|
-
function SkyTextEditorToolbarComponent(adapterService, changeDetector, modalService) {
|
|
1116
|
-
this.adapterService = adapterService;
|
|
1117
|
-
this.changeDetector = changeDetector;
|
|
1118
|
-
this.modalService = modalService;
|
|
1119
|
-
this.editorFocusStream = new Subject();
|
|
1120
|
-
this.backColorpickerStream = new Subject();
|
|
1121
|
-
this.colorpickerStream = new Subject();
|
|
1122
|
-
this.fontPickerStream = new Subject();
|
|
1123
|
-
this.fontSizeStream = new Subject();
|
|
1124
|
-
this._disabled = false;
|
|
1125
|
-
this._styleState = STYLE_STATE_DEFAULTS;
|
|
1126
|
-
}
|
|
1127
|
-
Object.defineProperty(SkyTextEditorToolbarComponent.prototype, "styleState", {
|
|
1128
|
-
get: function () {
|
|
1129
|
-
return this._styleState;
|
|
1130
|
-
},
|
|
1131
|
-
set: function (value) {
|
|
1132
|
-
this._styleState = value;
|
|
1133
|
-
if (value.font !== this.styleStateFontName) {
|
|
1134
|
-
if (value.font === '\"Blackbaud Sans\", Arial, sans-serif') {
|
|
1135
|
-
this.styleStateFontName = this.getFontName('Blackbaud Sans');
|
|
1136
|
-
}
|
|
1137
|
-
else {
|
|
1138
|
-
this.styleStateFontName = this.getFontName(value.font);
|
|
1139
|
-
}
|
|
1140
|
-
}
|
|
1141
|
-
},
|
|
1142
|
-
enumerable: true,
|
|
1143
|
-
configurable: true
|
|
1144
|
-
});
|
|
1145
|
-
Object.defineProperty(SkyTextEditorToolbarComponent.prototype, "disabled", {
|
|
1146
|
-
get: function () {
|
|
1147
|
-
return this._disabled;
|
|
1148
|
-
},
|
|
1149
|
-
set: function (value) {
|
|
1150
|
-
var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
|
|
1151
|
-
if (coercedValue !== this.disabled) {
|
|
1152
|
-
this._disabled = coercedValue;
|
|
1153
|
-
this.changeDetector.markForCheck();
|
|
1154
|
-
}
|
|
1155
|
-
},
|
|
1156
|
-
enumerable: true,
|
|
1157
|
-
configurable: true
|
|
1158
|
-
});
|
|
1159
|
-
SkyTextEditorToolbarComponent.prototype.ngOnInit = function () {
|
|
1160
|
-
var _this = this;
|
|
1161
|
-
this.editorFocusStream.subscribe(function () {
|
|
1162
|
-
_this.styleState = __assign(__assign({}, _this._styleState), _this.adapterService.getStyleState(_this.editorId));
|
|
1163
|
-
_this.closeDropdowns();
|
|
1164
|
-
_this.changeDetector.detectChanges();
|
|
1165
|
-
});
|
|
1166
|
-
};
|
|
1167
|
-
SkyTextEditorToolbarComponent.prototype.execCommand = function (command, value) {
|
|
1168
|
-
if (value === void 0) { value = ''; }
|
|
1169
|
-
this.adapterService.execCommand(this.editorId, {
|
|
1170
|
-
command: command,
|
|
1171
|
-
value: value
|
|
1172
|
-
});
|
|
1173
|
-
this.styleState = __assign(__assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
|
|
1174
|
-
};
|
|
1175
|
-
SkyTextEditorToolbarComponent.prototype.toggleFontStyle = function (currentState, newState, command) {
|
|
1176
|
-
if (currentState !== newState) {
|
|
1177
|
-
this.execCommand(command);
|
|
1178
|
-
}
|
|
1179
|
-
// Force sky-checkbox to show changes on user's initial click.
|
|
1180
|
-
this.changeDetector.detectChanges();
|
|
1181
|
-
};
|
|
1182
|
-
SkyTextEditorToolbarComponent.prototype.link = function () {
|
|
1183
|
-
var _this = this;
|
|
1184
|
-
var priorSelection = this.adapterService.saveSelection(this.editorId);
|
|
1185
|
-
var currentLink = this.adapterService.getLink(this.editorId);
|
|
1186
|
-
var inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [{
|
|
1187
|
-
provide: SkyUrlModalContext,
|
|
1188
|
-
useValue: { urlResult: currentLink }
|
|
1189
|
-
}]);
|
|
1190
|
-
inputModal.closed.subscribe(function (result) {
|
|
1191
|
-
if (result.reason === 'save' && priorSelection) {
|
|
1192
|
-
if (currentLink) {
|
|
1193
|
-
var anchor = _this.adapterService.getSelectedAnchorTag(_this.editorId);
|
|
1194
|
-
_this.adapterService.selectElement(_this.editorId, anchor);
|
|
1195
|
-
}
|
|
1196
|
-
_this.execCommand('unlink');
|
|
1197
|
-
if (result.data.target === UrlTarget.None) {
|
|
1198
|
-
// Current window
|
|
1199
|
-
_this.execCommand('createLink', result.data.url);
|
|
1200
|
-
}
|
|
1201
|
-
else {
|
|
1202
|
-
// New Window
|
|
1203
|
-
var sText = _this.adapterService.getCurrentSelection(_this.editorId);
|
|
1204
|
-
_this.execCommand('insertHTML', '<a href="' + result.data.url + '" rel="noopener noreferrer" target="_blank">' + sText + '</a>');
|
|
1205
|
-
}
|
|
1206
|
-
}
|
|
1207
|
-
});
|
|
1208
|
-
};
|
|
1209
|
-
SkyTextEditorToolbarComponent.prototype.unlink = function () {
|
|
1210
|
-
var currentSelectionRange = this.adapterService.getCurrentSelection(this.editorId).getRangeAt(0);
|
|
1211
|
-
if (currentSelectionRange.toString().length <= 0) {
|
|
1212
|
-
var anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
|
|
1213
|
-
this.adapterService.selectElement(this.editorId, anchorTag);
|
|
1214
|
-
}
|
|
1215
|
-
this.execCommand('unlink');
|
|
1216
|
-
};
|
|
1217
|
-
SkyTextEditorToolbarComponent.prototype.changeFontSize = function (size) {
|
|
1218
|
-
this.adapterService.setFontSize(this.editorId, size);
|
|
1219
|
-
this.styleState = __assign(__assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
|
|
1220
|
-
};
|
|
1221
|
-
SkyTextEditorToolbarComponent.prototype.onColorpickerColorChanged = function (color, isBackground) {
|
|
1222
|
-
if (isBackground === void 0) { isBackground = false; }
|
|
1223
|
-
this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
|
|
1224
|
-
};
|
|
1225
|
-
SkyTextEditorToolbarComponent.prototype.closeDropdowns = function () {
|
|
1226
|
-
var message = { type: SkyColorpickerMessageType.Close };
|
|
1227
|
-
this.colorpickerStream.next(message);
|
|
1228
|
-
this.backColorpickerStream.next(message);
|
|
1229
|
-
this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
|
|
1230
|
-
this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
|
|
1231
|
-
};
|
|
1232
|
-
SkyTextEditorToolbarComponent.prototype.getFontName = function (fontName) {
|
|
1233
|
-
for (var i = 0; i < this.fontList.length; i++) {
|
|
1234
|
-
if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
|
|
1235
|
-
return this.fontList[i].name;
|
|
1236
|
-
}
|
|
1237
|
-
}
|
|
1238
|
-
};
|
|
1239
|
-
SkyTextEditorToolbarComponent.ctorParameters = function () { return [
|
|
1240
|
-
{ type: SkyTextEditorAdapterService },
|
|
1241
|
-
{ type: ChangeDetectorRef },
|
|
1242
|
-
{ type: SkyModalService }
|
|
1243
|
-
]; };
|
|
1244
|
-
__decorate([
|
|
1245
|
-
Input()
|
|
1246
|
-
], SkyTextEditorToolbarComponent.prototype, "editorFocusStream", void 0);
|
|
1247
|
-
__decorate([
|
|
1248
|
-
Input()
|
|
1249
|
-
], SkyTextEditorToolbarComponent.prototype, "editorId", void 0);
|
|
1250
|
-
__decorate([
|
|
1251
|
-
Input()
|
|
1252
|
-
], SkyTextEditorToolbarComponent.prototype, "fontList", void 0);
|
|
1253
|
-
__decorate([
|
|
1254
|
-
Input()
|
|
1255
|
-
], SkyTextEditorToolbarComponent.prototype, "fontSizeList", void 0);
|
|
1256
|
-
__decorate([
|
|
1257
|
-
Input()
|
|
1258
|
-
], SkyTextEditorToolbarComponent.prototype, "toolbarActions", void 0);
|
|
1259
|
-
__decorate([
|
|
1260
|
-
Input()
|
|
1261
|
-
], SkyTextEditorToolbarComponent.prototype, "styleState", null);
|
|
1262
|
-
__decorate([
|
|
1263
|
-
Input()
|
|
1264
|
-
], SkyTextEditorToolbarComponent.prototype, "disabled", null);
|
|
1265
|
-
SkyTextEditorToolbarComponent = __decorate([
|
|
1266
|
-
Component({
|
|
1267
|
-
selector: 'sky-text-editor-toolbar',
|
|
1268
|
-
template: "\n <sky-toolbar-item *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n <ng-container\n [ngSwitch]=\"action\"\n >\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button\n type=\"button\"\n (click)=\"changeFontSize(size)\"\n >\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div\n class=\"sky-switch-icon-group sky-text-editor-font-style-picker\"\n >\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"toggleFontStyle(styleState.boldState, $event, 'bold')\"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"toggleFontStyle(styleState.italicState, $event, 'italic')\"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"toggleFontStyle(styleState.underlineState, $event, 'underline')\"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"list-ul\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"list-ol\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-left\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-center\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-right\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"outdent\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"outdent-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"indent\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"indent-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"undo\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"undo-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"repeat\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"redo-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"link\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"link-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"unlink\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"unlink-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </sky-toolbar-item>\n",
|
|
1269
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1270
|
-
styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}"]
|
|
1271
|
-
})
|
|
1272
|
-
], SkyTextEditorToolbarComponent);
|
|
1273
|
-
return SkyTextEditorToolbarComponent;
|
|
1274
|
-
}());
|
|
1275
|
-
|
|
1276
|
-
/**
|
|
1277
|
-
* @internal
|
|
1278
|
-
*/
|
|
1279
|
-
var MENU_DEFAULTS = [
|
|
1280
|
-
'edit',
|
|
1281
|
-
'format'
|
|
1282
|
-
];
|
|
1283
|
-
|
|
1284
|
-
/**
|
|
1285
|
-
* @internal
|
|
1286
|
-
*/
|
|
1287
|
-
var TOOLBAR_ACTION_DEFAULTS = [
|
|
1288
|
-
'font-family',
|
|
1289
|
-
'font-size',
|
|
1290
|
-
'font-style',
|
|
1291
|
-
'color',
|
|
1292
|
-
'list',
|
|
1293
|
-
'link'
|
|
1294
|
-
];
|
|
1295
|
-
|
|
1296
|
-
/**
|
|
1297
|
-
* @internal
|
|
1298
|
-
*/
|
|
1299
|
-
var FONT_SIZE_LIST_DEFAULTS = [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48];
|
|
1300
|
-
|
|
1301
|
-
/**
|
|
1302
|
-
* Auto-incrementing integer used to generate unique ids for radio components.
|
|
1303
|
-
*/
|
|
1304
|
-
var nextUniqueId = 0;
|
|
1305
|
-
/**
|
|
1306
|
-
* The text editor component lets users format and manipulate text.
|
|
1307
|
-
*/
|
|
1308
|
-
var SkyTextEditorComponent = /** @class */ (function () {
|
|
1309
|
-
function SkyTextEditorComponent(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService) {
|
|
1310
|
-
this.changeDetector = changeDetector;
|
|
1311
|
-
this.coreAdapterService = coreAdapterService;
|
|
1312
|
-
this.adapterService = adapterService;
|
|
1313
|
-
this.editorService = editorService;
|
|
1314
|
-
this.sanitizationService = sanitizationService;
|
|
1315
|
-
/**
|
|
1316
|
-
* Indicates whether to put focus on the editor after it renders.
|
|
1317
|
-
*/
|
|
1318
|
-
this.autofocus = false;
|
|
1319
|
-
this.editorFocusStream = new Subject();
|
|
1320
|
-
// tslint:disable: max-line-length
|
|
1321
|
-
/**
|
|
1322
|
-
* Specifies the fonts to include in the font picker.
|
|
1323
|
-
* @default [{name: 'Blackbaud Sans', value: '"Blackbaud Sans", Arial, sans-serif'}, {name: 'Arial', value: 'Arial'}, {name: 'Arial Black', value: '"Arial Black"'}, {name: 'Courier New', value: '"Courier New"'}, {name: 'Georgia', value: 'Georgia, serif'}, {name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif'}, {name: 'Times New Roman', value: '"Times New Roman"'}, {name: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif'}, {name: 'Verdana', value: 'Verdana, Geneva, sans-serif'}]
|
|
1324
|
-
*/
|
|
1325
|
-
// tslint:enable: max-line-length
|
|
1326
|
-
this.fontList = FONT_LIST_DEFAULTS;
|
|
1327
|
-
/**
|
|
1328
|
-
* Specifies the font sizes to include in the font size picker.
|
|
1329
|
-
* @default [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48]
|
|
1330
|
-
*/
|
|
1331
|
-
this.fontSizeList = FONT_SIZE_LIST_DEFAULTS;
|
|
1332
|
-
/**
|
|
1333
|
-
* Specifies a unique ID attribute for the text editor.
|
|
1334
|
-
* By default, the component generates a random ID.
|
|
1335
|
-
*/
|
|
1336
|
-
this.id = "sky-text-editor-" + ++nextUniqueId;
|
|
1337
|
-
/**
|
|
1338
|
-
* Specifies the menus to include in the menu bar.
|
|
1339
|
-
* @default [ 'edit', 'format' ]
|
|
1340
|
-
*/
|
|
1341
|
-
this.menus = MENU_DEFAULTS;
|
|
1342
|
-
/**
|
|
1343
|
-
* Specifies the merge fields to include in the merge field menu.
|
|
1344
|
-
*/
|
|
1345
|
-
this.mergeFields = [];
|
|
1346
|
-
// tslint:disable: max-line-length
|
|
1347
|
-
/**
|
|
1348
|
-
* Specifies the actions to include in the toolbar and determines their order.
|
|
1349
|
-
* @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
|
|
1350
|
-
*/
|
|
1351
|
-
// tslint:enable: max-line-length
|
|
1352
|
-
this.toolbarActions = TOOLBAR_ACTION_DEFAULTS;
|
|
1353
|
-
this.focusInitialized = false;
|
|
1354
|
-
this.initialized = false;
|
|
1355
|
-
this.ngUnsubscribe = new Subject();
|
|
1356
|
-
this._disabled = false;
|
|
1357
|
-
this._initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
|
|
1358
|
-
this._placeholder = '';
|
|
1359
|
-
this._value = '<p></p>';
|
|
1360
|
-
/* istanbul ignore next */
|
|
1361
|
-
this.onTouch = function () { };
|
|
1362
|
-
/* istanbul ignore next */
|
|
1363
|
-
this._onChange = function (_) { };
|
|
1364
|
-
}
|
|
1365
|
-
SkyTextEditorComponent_1 = SkyTextEditorComponent;
|
|
1366
|
-
Object.defineProperty(SkyTextEditorComponent.prototype, "disabled", {
|
|
1367
|
-
get: function () {
|
|
1368
|
-
return this._disabled;
|
|
1369
|
-
},
|
|
1370
|
-
/**
|
|
1371
|
-
* Indicates whether to disable the text editor.
|
|
1372
|
-
* @default false
|
|
1373
|
-
*/
|
|
1374
|
-
set: function (value) {
|
|
1375
|
-
var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
|
|
1376
|
-
if (coercedValue !== this.disabled) {
|
|
1377
|
-
this._disabled = coercedValue;
|
|
1378
|
-
if (this._disabled) {
|
|
1379
|
-
this.adapterService.disableEditor(this.id, this.focusableChildren, this.iframeRef.nativeElement);
|
|
1380
|
-
}
|
|
1381
|
-
else {
|
|
1382
|
-
this.adapterService.enableEditor(this.id, this.focusableChildren, this.iframeRef.nativeElement);
|
|
1383
|
-
}
|
|
1384
|
-
this.changeDetector.markForCheck();
|
|
1385
|
-
}
|
|
1386
|
-
},
|
|
1387
|
-
enumerable: true,
|
|
1388
|
-
configurable: true
|
|
1389
|
-
});
|
|
1390
|
-
Object.defineProperty(SkyTextEditorComponent.prototype, "initialStyleState", {
|
|
1391
|
-
get: function () {
|
|
1392
|
-
return this._initialStyleState;
|
|
1393
|
-
},
|
|
1394
|
-
/**
|
|
1395
|
-
* Specifies the initial styles for all content, including background color, font size, and link state.
|
|
1396
|
-
*/
|
|
1397
|
-
set: function (state) {
|
|
1398
|
-
// Do not update the state after initialization has taken place
|
|
1399
|
-
if (!this.initialized) {
|
|
1400
|
-
this._initialStyleState = __assign(__assign({}, STYLE_STATE_DEFAULTS), state);
|
|
1401
|
-
}
|
|
1402
|
-
},
|
|
1403
|
-
enumerable: true,
|
|
1404
|
-
configurable: true
|
|
1405
|
-
});
|
|
1406
|
-
Object.defineProperty(SkyTextEditorComponent.prototype, "placeholder", {
|
|
1407
|
-
get: function () {
|
|
1408
|
-
return this._placeholder;
|
|
1409
|
-
},
|
|
1410
|
-
/**
|
|
1411
|
-
* Specifies placeholder text to display when the text entry area is empty.
|
|
1412
|
-
*/
|
|
1413
|
-
set: function (value) {
|
|
1414
|
-
if (value !== this._placeholder) {
|
|
1415
|
-
this._placeholder = value;
|
|
1416
|
-
if (this.initialized) {
|
|
1417
|
-
this.adapterService.setPlaceholder(this.id, value);
|
|
1418
|
-
}
|
|
1419
|
-
}
|
|
1420
|
-
},
|
|
1421
|
-
enumerable: true,
|
|
1422
|
-
configurable: true
|
|
1423
|
-
});
|
|
1424
|
-
Object.defineProperty(SkyTextEditorComponent.prototype, "value", {
|
|
1425
|
-
get: function () {
|
|
1426
|
-
return this._value;
|
|
1427
|
-
},
|
|
1428
|
-
set: function (value) {
|
|
1429
|
-
// Set clear state to be an empty string
|
|
1430
|
-
var valueString = value;
|
|
1431
|
-
if (!value || (value.trim() === '<p></p>' && value.trim() === '<br>')) {
|
|
1432
|
-
valueString = '';
|
|
1433
|
-
}
|
|
1434
|
-
valueString = this.sanitizationService.sanitize(valueString).trim();
|
|
1435
|
-
if (this._value !== valueString) {
|
|
1436
|
-
this._value = valueString;
|
|
1437
|
-
// Autofocus isn't testable in Firefox and IE.
|
|
1438
|
-
/* istanbul ignore next */
|
|
1439
|
-
if (this.autofocus && !this.focusInitialized) {
|
|
1440
|
-
this.adapterService.focusEditor(this.id);
|
|
1441
|
-
this.focusInitialized = true;
|
|
1442
|
-
}
|
|
1443
|
-
this.onChange();
|
|
1444
|
-
}
|
|
1445
|
-
},
|
|
1446
|
-
enumerable: true,
|
|
1447
|
-
configurable: true
|
|
1448
|
-
});
|
|
1449
|
-
SkyTextEditorComponent.prototype.ngAfterViewInit = function () {
|
|
1450
|
-
var _this = this;
|
|
1451
|
-
this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
|
|
1452
|
-
this.editorService.selectionChangeListener(this.id)
|
|
1453
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1454
|
-
.subscribe(function () {
|
|
1455
|
-
_this.updateValueAndStyle();
|
|
1456
|
-
_this.editorFocusStream.next();
|
|
1457
|
-
});
|
|
1458
|
-
this.editorService.clickListener(this.id)
|
|
1459
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1460
|
-
.subscribe(function () {
|
|
1461
|
-
_this.editorFocusStream.next();
|
|
1462
|
-
});
|
|
1463
|
-
this.editorService.commandChangeListener(this.id)
|
|
1464
|
-
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1465
|
-
.subscribe(function () {
|
|
1466
|
-
_this.updateValueAndStyle();
|
|
1467
|
-
});
|
|
1468
|
-
this.adapterService.setEditorInnerHtml(this.id, this._value);
|
|
1469
|
-
/* istanbul ignore next */
|
|
1470
|
-
if (this.autofocus) {
|
|
1471
|
-
this.adapterService.focusEditor(this.id);
|
|
1472
|
-
}
|
|
1473
|
-
this.focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement, {
|
|
1474
|
-
ignoreVisibility: true
|
|
1475
|
-
});
|
|
1476
|
-
this.initialized = true;
|
|
1477
|
-
};
|
|
1478
|
-
SkyTextEditorComponent.prototype.ngOnDestroy = function () {
|
|
1479
|
-
this.adapterService.removeObservers(this.editorService.editors[this.id]);
|
|
1480
|
-
this.editorService.removeEditor(this.id);
|
|
1481
|
-
this.ngUnsubscribe.next();
|
|
1482
|
-
this.ngUnsubscribe.complete();
|
|
1483
|
-
};
|
|
1484
|
-
SkyTextEditorComponent.prototype.writeValue = function (obj) {
|
|
1485
|
-
this.value = obj;
|
|
1486
|
-
// Update HTML if necessary.
|
|
1487
|
-
var editorValue = this.adapterService.getEditorInnerHtml(this.id);
|
|
1488
|
-
if (this.initialized && editorValue !== this._value) {
|
|
1489
|
-
this.adapterService.setEditorInnerHtml(this.id, this._value);
|
|
1490
|
-
}
|
|
1491
|
-
};
|
|
1492
|
-
SkyTextEditorComponent.prototype.registerOnChange = function (fn) {
|
|
1493
|
-
this._onChange = fn;
|
|
1494
|
-
};
|
|
1495
|
-
SkyTextEditorComponent.prototype.registerOnTouched = function (fn) {
|
|
1496
|
-
this.onTouch = fn;
|
|
1497
|
-
};
|
|
1498
|
-
/**
|
|
1499
|
-
* Implemented as part of ControlValueAccessor.
|
|
1500
|
-
*/
|
|
1501
|
-
SkyTextEditorComponent.prototype.setDisabledState = function (isDisabled) {
|
|
1502
|
-
this.disabled = isDisabled;
|
|
1503
|
-
};
|
|
1504
|
-
SkyTextEditorComponent.prototype.onChange = function () {
|
|
1505
|
-
this._onChange(this.value);
|
|
1506
|
-
};
|
|
1507
|
-
SkyTextEditorComponent.prototype.updateValueAndStyle = function () {
|
|
1508
|
-
this.value = this.adapterService.getEditorInnerHtml(this.id);
|
|
1509
|
-
this._initialStyleState = __assign(__assign({}, this._initialStyleState), this.adapterService.getStyleState(this.id));
|
|
1510
|
-
};
|
|
1511
|
-
var SkyTextEditorComponent_1;
|
|
1512
|
-
SkyTextEditorComponent.ctorParameters = function () { return [
|
|
1513
|
-
{ type: ChangeDetectorRef },
|
|
1514
|
-
{ type: SkyCoreAdapterService },
|
|
1515
|
-
{ type: SkyTextEditorAdapterService },
|
|
1516
|
-
{ type: SkyTextEditorService },
|
|
1517
|
-
{ type: SkyTextSanitizationService }
|
|
1518
|
-
]; };
|
|
1519
|
-
__decorate([
|
|
1520
|
-
Input()
|
|
1521
|
-
], SkyTextEditorComponent.prototype, "autofocus", void 0);
|
|
1522
|
-
__decorate([
|
|
1523
|
-
Input()
|
|
1524
|
-
], SkyTextEditorComponent.prototype, "disabled", null);
|
|
1525
|
-
__decorate([
|
|
1526
|
-
Input()
|
|
1527
|
-
], SkyTextEditorComponent.prototype, "fontList", void 0);
|
|
1528
|
-
__decorate([
|
|
1529
|
-
Input()
|
|
1530
|
-
], SkyTextEditorComponent.prototype, "fontSizeList", void 0);
|
|
1531
|
-
__decorate([
|
|
1532
|
-
Input()
|
|
1533
|
-
], SkyTextEditorComponent.prototype, "id", void 0);
|
|
1534
|
-
__decorate([
|
|
1535
|
-
Input()
|
|
1536
|
-
], SkyTextEditorComponent.prototype, "initialStyleState", null);
|
|
1537
|
-
__decorate([
|
|
1538
|
-
Input()
|
|
1539
|
-
], SkyTextEditorComponent.prototype, "menus", void 0);
|
|
1540
|
-
__decorate([
|
|
1541
|
-
Input()
|
|
1542
|
-
], SkyTextEditorComponent.prototype, "mergeFields", void 0);
|
|
1543
|
-
__decorate([
|
|
1544
|
-
Input()
|
|
1545
|
-
], SkyTextEditorComponent.prototype, "placeholder", null);
|
|
1546
|
-
__decorate([
|
|
1547
|
-
Input()
|
|
1548
|
-
], SkyTextEditorComponent.prototype, "toolbarActions", void 0);
|
|
1549
|
-
__decorate([
|
|
1550
|
-
ViewChild('iframe')
|
|
1551
|
-
], SkyTextEditorComponent.prototype, "iframeRef", void 0);
|
|
1552
|
-
SkyTextEditorComponent = SkyTextEditorComponent_1 = __decorate([
|
|
1553
|
-
Component({
|
|
1554
|
-
selector: 'sky-text-editor',
|
|
1555
|
-
template: "<div\n class=\"sky-text-editor\"\n>\n <sky-toolbar\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n aria-label=\"Text formatting\"\n class=\"menubar\"\n role=\"toolbar\"\n >\n <sky-text-editor-menubar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [editorId]=\"id\"\n [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n >\n </sky-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n aria-label=\"Text formatting\"\n class=\"toolbar\"\n role=\"toolbar\"\n >\n <sky-text-editor-toolbar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [editorId]=\"id\"\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 #iframe\n >\n </iframe>\n</div>\n",
|
|
1556
|
-
providers: [
|
|
1557
|
-
{
|
|
1558
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1559
|
-
// tslint:disable-next-line: no-forward-ref
|
|
1560
|
-
useExisting: forwardRef(function () { return SkyTextEditorComponent_1; }),
|
|
1561
|
-
multi: true
|
|
1562
|
-
}
|
|
1563
|
-
],
|
|
1564
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1565
|
-
encapsulation: ViewEncapsulation.None,
|
|
1566
|
-
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 silver;overflow-y:auto;outline:0}.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}"]
|
|
1567
|
-
})
|
|
1568
|
-
], SkyTextEditorComponent);
|
|
1569
|
-
return SkyTextEditorComponent;
|
|
1570
|
-
}());
|
|
1571
|
-
|
|
1572
|
-
var SkyTextEditorModule = /** @class */ (function () {
|
|
1573
|
-
function SkyTextEditorModule() {
|
|
1574
|
-
}
|
|
1575
|
-
SkyTextEditorModule = __decorate([
|
|
1576
|
-
NgModule({
|
|
1577
|
-
imports: [
|
|
1578
|
-
CommonModule,
|
|
1579
|
-
FormsModule,
|
|
1580
|
-
ReactiveFormsModule,
|
|
1581
|
-
SkyCoreAdapterModule,
|
|
1582
|
-
SkyTextEditorResourcesModule,
|
|
1583
|
-
SkyI18nModule,
|
|
1584
|
-
SkyIconModule,
|
|
1585
|
-
SkyIdModule,
|
|
1586
|
-
SkyInputBoxModule,
|
|
1587
|
-
SkyColorpickerModule,
|
|
1588
|
-
SkyCheckboxModule,
|
|
1589
|
-
SkyDropdownModule,
|
|
1590
|
-
SkyModalModule,
|
|
1591
|
-
SkyTabsModule,
|
|
1592
|
-
SkyThemeModule,
|
|
1593
|
-
SkyToolbarModule
|
|
1594
|
-
],
|
|
1595
|
-
exports: [
|
|
1596
|
-
SkyTextEditorComponent,
|
|
1597
|
-
SkyTextEditorUrlModalComponent,
|
|
1598
|
-
SkyTextEditorToolbarComponent,
|
|
1599
|
-
SkyTextEditorMenubarComponent
|
|
1600
|
-
],
|
|
1601
|
-
declarations: [
|
|
1602
|
-
SkyTextEditorComponent,
|
|
1603
|
-
SkyTextEditorUrlModalComponent,
|
|
1604
|
-
SkyTextEditorToolbarComponent,
|
|
1605
|
-
SkyTextEditorMenubarComponent
|
|
1606
|
-
],
|
|
1607
|
-
entryComponents: [
|
|
1608
|
-
SkyTextEditorUrlModalComponent
|
|
1609
|
-
]
|
|
1610
|
-
})
|
|
1611
|
-
], SkyTextEditorModule);
|
|
1612
|
-
return SkyTextEditorModule;
|
|
1613
|
-
}());
|
|
1614
|
-
|
|
1615
|
-
/**
|
|
1616
|
-
* Generated bundle index. Do not edit.
|
|
1617
|
-
*/
|
|
1618
|
-
|
|
1619
|
-
export { SkyRichTextDisplayModule, SkyTextEditorModule, SkyRichTextDisplayComponent as ɵa, SkyTextSanitizationService as ɵb, SkyTextEditorResourcesModule as ɵc, SkyTextEditorResourcesProvider as ɵd, SkyTextEditorComponent as ɵe, SkyTextEditorAdapterService as ɵf, SkyTextEditorSelectionService as ɵg, SkyTextEditorService as ɵh, SkyTextEditorUrlModalComponent as ɵi, SkyUrlModalContext as ɵj, SkyTextEditorToolbarComponent as ɵk, SkyTextEditorMenubarComponent as ɵl };
|
|
1620
|
-
//# sourceMappingURL=skyux-text-editor.js.map
|