@firestitch/html-editor 18.0.39 → 18.0.41
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/app/modules/html-editor/components/html-editor/html-editor.component.d.ts +3 -5
- package/app/modules/html-editor/directives/html-editor-container.directive.d.ts +1 -1
- package/app/modules/html-editor/fs-html-editor.module.d.ts +7 -8
- package/app/modules/html-editor/services/froala-loader.service.d.ts +2 -3
- package/app/modules/html-renderer/components/html-renderer/html-renderer.component.d.ts +2 -5
- package/esm2022/app/modules/html-editor/components/html-editor/html-editor.component.mjs +21 -25
- package/esm2022/app/modules/html-editor/directives/html-editor-container.directive.mjs +6 -3
- package/esm2022/app/modules/html-editor/fs-html-editor.module.mjs +8 -12
- package/esm2022/app/modules/html-editor/services/froala-loader.service.mjs +7 -17
- package/esm2022/app/modules/html-renderer/components/html-renderer/html-renderer.component.mjs +9 -18
- package/esm2022/public_api.mjs +1 -2
- package/fesm2022/firestitch-html-editor.mjs +134 -176
- package/fesm2022/firestitch-html-editor.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +0 -1
- package/styles.scss +4 -4
- package/app/modules/html-renderer/fs-html-renderer.module.d.ts +0 -8
- package/esm2022/app/modules/html-renderer/fs-html-renderer.module.mjs +0 -24
|
@@ -1,157 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
1
|
+
import { DOCUMENT, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
5
|
-
import * as
|
|
3
|
+
import { Directive, InjectionToken, inject, Injectable, ChangeDetectorRef, forwardRef, TemplateRef, Optional, Component, ChangeDetectionStrategy, ContentChild, HostBinding, ViewChild, Input, NgModule } from '@angular/core';
|
|
4
|
+
import * as i1 from '@firestitch/label';
|
|
6
5
|
import { FsLabelModule } from '@firestitch/label';
|
|
7
|
-
import * as
|
|
6
|
+
import * as i2 from '@firestitch/skeleton';
|
|
8
7
|
import { FsSkeletonModule } from '@firestitch/skeleton';
|
|
9
|
-
import * as i1 from '@angular/platform-browser';
|
|
10
|
-
import { fsSourceLoader, guid } from '@firestitch/common';
|
|
11
|
-
import { BehaviorSubject, combineLatest, ReplaySubject, Subject, fromEventPattern } from 'rxjs';
|
|
12
|
-
import { map, shareReplay, tap, concatMap, switchMap, filter, startWith, distinctUntilChanged, skip, takeUntil } from 'rxjs/operators';
|
|
13
8
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer, NgForm } from '@angular/forms';
|
|
14
9
|
import { MatDialogRef } from '@angular/material/dialog';
|
|
10
|
+
import { fsSourceLoader, guid } from '@firestitch/common';
|
|
15
11
|
import { FileProcessor, FsFile } from '@firestitch/file';
|
|
12
|
+
import { BehaviorSubject, combineLatest, ReplaySubject, Subject, fromEventPattern } from 'rxjs';
|
|
13
|
+
import { map, shareReplay, tap, concatMap, switchMap, filter, startWith, distinctUntilChanged, skip, takeUntil } from 'rxjs/operators';
|
|
16
14
|
import { merge, debounce } from 'lodash-es';
|
|
15
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
17
16
|
import Tribute from 'tributejs';
|
|
18
17
|
|
|
19
|
-
const FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
|
|
20
|
-
const FS_HTML_EDITOR_CONFIG = new InjectionToken('fs-html-editor.config');
|
|
21
|
-
|
|
22
|
-
class FsFroalaLoaderService {
|
|
23
|
-
_defaultConfig;
|
|
24
|
-
_document;
|
|
25
|
-
_froalaLoaded = new BehaviorSubject(false);
|
|
26
|
-
_froalaPluginsLoaded = new BehaviorSubject(false);
|
|
27
|
-
_sourceLoader = fsSourceLoader;
|
|
28
|
-
_froalaEditor;
|
|
29
|
-
get FroalaEditor() {
|
|
30
|
-
return this._froalaEditor;
|
|
31
|
-
}
|
|
32
|
-
_loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
|
|
33
|
-
.pipe(map(([FroalaReady, pluginsRead]) => {
|
|
34
|
-
return pluginsRead && FroalaReady;
|
|
35
|
-
}), shareReplay(1));
|
|
36
|
-
constructor(_defaultConfig, _document) {
|
|
37
|
-
this._defaultConfig = _defaultConfig;
|
|
38
|
-
this._document = _document;
|
|
39
|
-
this._sourceLoader.setDocument(this._document);
|
|
40
|
-
this._load();
|
|
41
|
-
}
|
|
42
|
-
get loaded$() {
|
|
43
|
-
return this._loaded$;
|
|
44
|
-
}
|
|
45
|
-
_load() {
|
|
46
|
-
const baseDir = '/assets/froala/';
|
|
47
|
-
this._sourceLoader.registerResources({
|
|
48
|
-
froala: [
|
|
49
|
-
`${baseDir}js/froala_editor.min.js`,
|
|
50
|
-
`${baseDir}css/froala_editor.pkgd.min.css`,
|
|
51
|
-
],
|
|
52
|
-
froala_align: `${baseDir}js/plugins/align.min.js`,
|
|
53
|
-
froala_colors: `${baseDir}js/plugins/colors.min.js`,
|
|
54
|
-
froala_image: `${baseDir}js/plugins/image.min.js`,
|
|
55
|
-
froala_link: `${baseDir}js/plugins/link.min.js`,
|
|
56
|
-
froala_lists: `${baseDir}js/plugins/lists.min.js`,
|
|
57
|
-
froala_paragraph_format: `${baseDir}js/plugins/paragraph_format.min.js`,
|
|
58
|
-
froala_table: `${baseDir}js/plugins/table.min.js`,
|
|
59
|
-
froala_url: `${baseDir}js/plugins/url.min.js`,
|
|
60
|
-
froala_video: `${baseDir}js/plugins/video.min.js`,
|
|
61
|
-
froala_quote: `${baseDir}js/plugins/quote.min.js`,
|
|
62
|
-
froala_draggable: `${baseDir}js/plugins/draggable.min.js`,
|
|
63
|
-
froala_font_size: `${baseDir}js/plugins/font_size.min.js`,
|
|
64
|
-
froala_quick_insert: `${baseDir}js/plugins/quick_insert.min.js`,
|
|
65
|
-
froala_line_height: `${baseDir}js/plugins/line_height.min.js`,
|
|
66
|
-
});
|
|
67
|
-
this._sourceLoader.loadResource('froala')
|
|
68
|
-
.pipe(tap(() => {
|
|
69
|
-
this._froalaEditor = window.FroalaEditor;
|
|
70
|
-
this._froalaDone();
|
|
71
|
-
}), concatMap(() => {
|
|
72
|
-
return this._loadPlugins();
|
|
73
|
-
}), tap(() => {
|
|
74
|
-
this._froalaPluginsDone();
|
|
75
|
-
}))
|
|
76
|
-
.subscribe();
|
|
77
|
-
}
|
|
78
|
-
_loadPlugins() {
|
|
79
|
-
const resources = this._defaultConfig
|
|
80
|
-
.froalaPlugins
|
|
81
|
-
.map((pluginName) => `froala_${pluginName}`);
|
|
82
|
-
return this._sourceLoader.loadResources(resources);
|
|
83
|
-
}
|
|
84
|
-
_froalaDone() {
|
|
85
|
-
this._froalaLoaded.next(true);
|
|
86
|
-
}
|
|
87
|
-
_froalaPluginsDone() {
|
|
88
|
-
this._froalaPluginsLoaded.next(true);
|
|
89
|
-
}
|
|
90
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
91
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
|
|
92
|
-
}
|
|
93
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
|
|
94
|
-
type: Injectable,
|
|
95
|
-
args: [{
|
|
96
|
-
providedIn: 'root',
|
|
97
|
-
}]
|
|
98
|
-
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
99
|
-
type: Optional
|
|
100
|
-
}, {
|
|
101
|
-
type: Inject,
|
|
102
|
-
args: [FS_HTML_EDITOR_CONFIG]
|
|
103
|
-
}] }, { type: Document, decorators: [{
|
|
104
|
-
type: Inject,
|
|
105
|
-
args: [DOCUMENT]
|
|
106
|
-
}] }] });
|
|
107
|
-
|
|
108
|
-
class FsHtmlRendererComponent {
|
|
109
|
-
sanitized;
|
|
110
|
-
_cdRef;
|
|
111
|
-
_fr;
|
|
112
|
-
set setHtml(html) {
|
|
113
|
-
this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
|
|
114
|
-
this._cdRef.markForCheck();
|
|
115
|
-
}
|
|
116
|
-
trustedHtml;
|
|
117
|
-
constructor(sanitized, _cdRef,
|
|
118
|
-
// Initial service call to load Froala css
|
|
119
|
-
_fr) {
|
|
120
|
-
this.sanitized = sanitized;
|
|
121
|
-
this._cdRef = _cdRef;
|
|
122
|
-
this._fr = _fr;
|
|
123
|
-
}
|
|
124
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
125
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
126
|
-
}
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
|
|
128
|
-
type: Component,
|
|
129
|
-
args: [{ selector: 'fs-html-renderer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n" }]
|
|
130
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: FsFroalaLoaderService }], propDecorators: { setHtml: [{
|
|
131
|
-
type: Input,
|
|
132
|
-
args: ['html']
|
|
133
|
-
}] } });
|
|
134
|
-
|
|
135
|
-
class FsHtmlRendererModule {
|
|
136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
137
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [CommonModule], exports: [FsHtmlRendererComponent] });
|
|
138
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererModule, imports: [CommonModule] });
|
|
139
|
-
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererModule, decorators: [{
|
|
141
|
-
type: NgModule,
|
|
142
|
-
args: [{
|
|
143
|
-
imports: [
|
|
144
|
-
CommonModule,
|
|
145
|
-
],
|
|
146
|
-
exports: [
|
|
147
|
-
FsHtmlRendererComponent,
|
|
148
|
-
],
|
|
149
|
-
declarations: [
|
|
150
|
-
FsHtmlRendererComponent,
|
|
151
|
-
],
|
|
152
|
-
}]
|
|
153
|
-
}] });
|
|
154
|
-
|
|
155
18
|
const ParagraphButtons = [
|
|
156
19
|
'align',
|
|
157
20
|
'formatOL',
|
|
@@ -222,17 +85,99 @@ class FsHtmlEditorContainerDirective {
|
|
|
222
85
|
return true;
|
|
223
86
|
}
|
|
224
87
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
225
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsHtmlEditorContainerDirective, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
|
|
88
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsHtmlEditorContainerDirective, isStandalone: true, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
|
|
226
89
|
}
|
|
227
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorContainerDirective, decorators: [{
|
|
228
91
|
type: Directive,
|
|
229
|
-
args: [{
|
|
92
|
+
args: [{
|
|
93
|
+
selector: '[fsHtmlEditorContainer]',
|
|
94
|
+
standalone: true
|
|
95
|
+
}]
|
|
230
96
|
}] });
|
|
231
97
|
|
|
98
|
+
const FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default-config');
|
|
99
|
+
const FS_HTML_EDITOR_CONFIG = new InjectionToken('fs-html-editor.config');
|
|
100
|
+
|
|
101
|
+
class FsFroalaLoaderService {
|
|
102
|
+
_defaultConfig = inject(FS_HTML_EDITOR_CONFIG, { optional: true });
|
|
103
|
+
_document = inject(DOCUMENT);
|
|
104
|
+
_froalaLoaded = new BehaviorSubject(false);
|
|
105
|
+
_froalaPluginsLoaded = new BehaviorSubject(false);
|
|
106
|
+
_sourceLoader = fsSourceLoader;
|
|
107
|
+
_froalaEditor;
|
|
108
|
+
get FroalaEditor() {
|
|
109
|
+
return this._froalaEditor;
|
|
110
|
+
}
|
|
111
|
+
_loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
|
|
112
|
+
.pipe(map(([FroalaReady, pluginsRead]) => {
|
|
113
|
+
return pluginsRead && FroalaReady;
|
|
114
|
+
}), shareReplay(1));
|
|
115
|
+
constructor() {
|
|
116
|
+
this._sourceLoader.setDocument(this._document);
|
|
117
|
+
this._load();
|
|
118
|
+
}
|
|
119
|
+
get loaded$() {
|
|
120
|
+
return this._loaded$;
|
|
121
|
+
}
|
|
122
|
+
_load() {
|
|
123
|
+
const baseDir = '/assets/froala/';
|
|
124
|
+
this._sourceLoader.registerResources({
|
|
125
|
+
froala: [
|
|
126
|
+
`${baseDir}js/froala_editor.min.js`,
|
|
127
|
+
`${baseDir}css/froala_editor.pkgd.min.css`,
|
|
128
|
+
],
|
|
129
|
+
froala_align: `${baseDir}js/plugins/align.min.js`,
|
|
130
|
+
froala_colors: `${baseDir}js/plugins/colors.min.js`,
|
|
131
|
+
froala_image: `${baseDir}js/plugins/image.min.js`,
|
|
132
|
+
froala_link: `${baseDir}js/plugins/link.min.js`,
|
|
133
|
+
froala_lists: `${baseDir}js/plugins/lists.min.js`,
|
|
134
|
+
froala_paragraph_format: `${baseDir}js/plugins/paragraph_format.min.js`,
|
|
135
|
+
froala_table: `${baseDir}js/plugins/table.min.js`,
|
|
136
|
+
froala_url: `${baseDir}js/plugins/url.min.js`,
|
|
137
|
+
froala_video: `${baseDir}js/plugins/video.min.js`,
|
|
138
|
+
froala_quote: `${baseDir}js/plugins/quote.min.js`,
|
|
139
|
+
froala_draggable: `${baseDir}js/plugins/draggable.min.js`,
|
|
140
|
+
froala_font_size: `${baseDir}js/plugins/font_size.min.js`,
|
|
141
|
+
froala_quick_insert: `${baseDir}js/plugins/quick_insert.min.js`,
|
|
142
|
+
froala_line_height: `${baseDir}js/plugins/line_height.min.js`,
|
|
143
|
+
});
|
|
144
|
+
this._sourceLoader.loadResource('froala')
|
|
145
|
+
.pipe(tap(() => {
|
|
146
|
+
this._froalaEditor = window.FroalaEditor;
|
|
147
|
+
this._froalaDone();
|
|
148
|
+
}), concatMap(() => {
|
|
149
|
+
return this._loadPlugins();
|
|
150
|
+
}), tap(() => {
|
|
151
|
+
this._froalaPluginsDone();
|
|
152
|
+
}))
|
|
153
|
+
.subscribe();
|
|
154
|
+
}
|
|
155
|
+
_loadPlugins() {
|
|
156
|
+
const resources = this._defaultConfig
|
|
157
|
+
.froalaPlugins
|
|
158
|
+
.map((pluginName) => `froala_${pluginName}`);
|
|
159
|
+
return this._sourceLoader.loadResources(resources);
|
|
160
|
+
}
|
|
161
|
+
_froalaDone() {
|
|
162
|
+
this._froalaLoaded.next(true);
|
|
163
|
+
}
|
|
164
|
+
_froalaPluginsDone() {
|
|
165
|
+
this._froalaPluginsLoaded.next(true);
|
|
166
|
+
}
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
168
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
|
|
169
|
+
}
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
|
|
171
|
+
type: Injectable,
|
|
172
|
+
args: [{
|
|
173
|
+
providedIn: 'root',
|
|
174
|
+
}]
|
|
175
|
+
}], ctorParameters: () => [] });
|
|
176
|
+
|
|
232
177
|
class FsHtmlEditorComponent {
|
|
233
|
-
_defaultConfig;
|
|
234
|
-
_cdRef;
|
|
235
|
-
_fr;
|
|
178
|
+
_defaultConfig = inject(FS_HTML_EDITOR_CONFIG, { optional: true });
|
|
179
|
+
_cdRef = inject(ChangeDetectorRef);
|
|
180
|
+
_fr = inject(FsFroalaLoaderService);
|
|
236
181
|
htmlEditorContainer;
|
|
237
182
|
classFocused = false;
|
|
238
183
|
elRef;
|
|
@@ -249,11 +194,6 @@ class FsHtmlEditorComponent {
|
|
|
249
194
|
_initialize$ = new ReplaySubject();
|
|
250
195
|
_froalaReady$ = new BehaviorSubject(null);
|
|
251
196
|
_destroy$ = new Subject();
|
|
252
|
-
constructor(_defaultConfig, _cdRef, _fr) {
|
|
253
|
-
this._defaultConfig = _defaultConfig;
|
|
254
|
-
this._cdRef = _cdRef;
|
|
255
|
-
this._fr = _fr;
|
|
256
|
-
}
|
|
257
197
|
get el() {
|
|
258
198
|
return this.elRef.nativeElement;
|
|
259
199
|
}
|
|
@@ -528,6 +468,7 @@ class FsHtmlEditorComponent {
|
|
|
528
468
|
linkInsertButtons: [],
|
|
529
469
|
linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove'],
|
|
530
470
|
linkMultipleStyles: false,
|
|
471
|
+
heightMin: this._dialogRef ? 200 : 0,
|
|
531
472
|
tabSpaces: 2,
|
|
532
473
|
toolbarSticky: false,
|
|
533
474
|
listAdvancedTypes: false,
|
|
@@ -678,8 +619,8 @@ class FsHtmlEditorComponent {
|
|
|
678
619
|
this.focus();
|
|
679
620
|
}
|
|
680
621
|
}
|
|
681
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorComponent, deps: [
|
|
682
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
|
|
622
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsHtmlEditorComponent, isStandalone: true, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
|
|
683
624
|
{
|
|
684
625
|
provide: NG_VALUE_ACCESSOR,
|
|
685
626
|
useExisting: forwardRef(() => FsHtmlEditorComponent),
|
|
@@ -690,7 +631,7 @@ class FsHtmlEditorComponent {
|
|
|
690
631
|
useExisting: forwardRef(() => FsHtmlEditorComponent),
|
|
691
632
|
multi: true,
|
|
692
633
|
},
|
|
693
|
-
], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field\n
|
|
634
|
+
], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field\n [appearance]=\"'outline'\"\n [hoverable]=\"true\"\n [showOutline]=\"initialized\"\n [disabled]=\"disabled\"\n [padless]=\"config.padless\"\n [class.init-on-click]=\"config.initOnClick\"\n [class.initialized]=\"initialized\">\n @if (config.label) {\n <fs-label>\n {{ config.label }}\n </fs-label>\n }\n @if (htmlEditorContainer) {\n <ng-container\n [ngTemplateOutlet]=\"htmlEditorContainer\"\n [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n </ng-container>\n } @else {\n <div\n class=\"html-editor-container fs-html-editor-default\"\n [id]=\"containerID\">\n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n <div #elRef></div>\n </div>\n }\n <ng-template #htmlEditorContainerTmpl>\n <div\n class=\"html-editor-container fs-html-editor-default\"\n [id]=\"containerID\">\n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n <div #elRef></div>\n </div>\n </ng-template>\n <fs-label-message>\n <div class=\"fs-form-message\">\n <div class=\"fs-form-hint\">\n {{ config.hint }}\n </div>\n </div>\n </fs-label-message>\n</fs-label-field>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field:not(.initialized).init-on-click{cursor:pointer}:host ::ng-deep fs-label-field:not(.initialized) .fr-view>*:first-child{margin-top:0}:host ::ng-deep fs-label-field:not(.initialized).appearance-outline .outline-overlay{display:none}:host ::ng-deep fs-label-field.initialized.appearance-outline .field-wrap{padding-top:6px;padding-bottom:4px}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-wrapper.show-placeholder .fr-placeholder{font-family:inherit}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{flex-wrap:wrap!important;height:auto!important}:host ::ng-deep .fr-more-toolbar:not(.fr-expanded){display:none!important}:host ::ng-deep .fr-toolbar.fr-top{z-index:999;position:sticky;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{display:none}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view{word-break:break-word}:host ::ng-deep .fr-view .fr-element img{box-sizing:border-box}:host ::ng-deep .fr-view li{display:block}:host ::ng-deep .fr-view li:before{margin-right:5px;margin-left:-40px;width:40px;display:inline-block;text-align:right}:host ::ng-deep .fr-view ol{counter-reset:listNumbering}:host ::ng-deep .fr-view ol>li{counter-increment:listNumbering;list-style:none}:host ::ng-deep .fr-view ol>li:before{content:counter(listNumbering,decimal) \".\"}:host ::ng-deep .fr-view ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ol ol ol>li:before{content:counter(listNumbering,decimal) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol ol>li:before{content:counter(listNumbering,decimal) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ul>li{list-style:none}:host ::ng-deep .fr-view ul>li:before{content:\"\\2022\"}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-popup .fr-layer{margin:0 15px!important}::ng-deep .fr-popup .fr-layer.fr-image-upload-layer{margin:12px!important}::ng-deep .fr-popup .fr-input-line{padding-bottom:0!important}::ng-deep .fr-popup .fr-input-line input{border-radius:4px!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i1.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
|
|
694
635
|
{
|
|
695
636
|
provide: ControlContainer,
|
|
696
637
|
deps: [[Optional, NgForm]],
|
|
@@ -717,13 +658,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
717
658
|
deps: [[Optional, NgForm]],
|
|
718
659
|
useFactory: (ngForm) => ngForm,
|
|
719
660
|
},
|
|
720
|
-
],
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
661
|
+
], standalone: true, imports: [
|
|
662
|
+
FsLabelModule,
|
|
663
|
+
NgTemplateOutlet,
|
|
664
|
+
FsSkeletonModule,
|
|
665
|
+
AsyncPipe,
|
|
666
|
+
], template: "<fs-label-field\n [appearance]=\"'outline'\"\n [hoverable]=\"true\"\n [showOutline]=\"initialized\"\n [disabled]=\"disabled\"\n [padless]=\"config.padless\"\n [class.init-on-click]=\"config.initOnClick\"\n [class.initialized]=\"initialized\">\n @if (config.label) {\n <fs-label>\n {{ config.label }}\n </fs-label>\n }\n @if (htmlEditorContainer) {\n <ng-container\n [ngTemplateOutlet]=\"htmlEditorContainer\"\n [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n </ng-container>\n } @else {\n <div\n class=\"html-editor-container fs-html-editor-default\"\n [id]=\"containerID\">\n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n <div #elRef></div>\n </div>\n }\n <ng-template #htmlEditorContainerTmpl>\n <div\n class=\"html-editor-container fs-html-editor-default\"\n [id]=\"containerID\">\n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n <div #elRef></div>\n </div>\n </ng-template>\n <fs-label-message>\n <div class=\"fs-form-message\">\n <div class=\"fs-form-hint\">\n {{ config.hint }}\n </div>\n </div>\n </fs-label-message>\n</fs-label-field>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field:not(.initialized).init-on-click{cursor:pointer}:host ::ng-deep fs-label-field:not(.initialized) .fr-view>*:first-child{margin-top:0}:host ::ng-deep fs-label-field:not(.initialized).appearance-outline .outline-overlay{display:none}:host ::ng-deep fs-label-field.initialized.appearance-outline .field-wrap{padding-top:6px;padding-bottom:4px}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-wrapper.show-placeholder .fr-placeholder{font-family:inherit}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{flex-wrap:wrap!important;height:auto!important}:host ::ng-deep .fr-more-toolbar:not(.fr-expanded){display:none!important}:host ::ng-deep .fr-toolbar.fr-top{z-index:999;position:sticky;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{display:none}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view{word-break:break-word}:host ::ng-deep .fr-view .fr-element img{box-sizing:border-box}:host ::ng-deep .fr-view li{display:block}:host ::ng-deep .fr-view li:before{margin-right:5px;margin-left:-40px;width:40px;display:inline-block;text-align:right}:host ::ng-deep .fr-view ol{counter-reset:listNumbering}:host ::ng-deep .fr-view ol>li{counter-increment:listNumbering;list-style:none}:host ::ng-deep .fr-view ol>li:before{content:counter(listNumbering,decimal) \".\"}:host ::ng-deep .fr-view ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ol ol ol>li:before{content:counter(listNumbering,decimal) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol ol>li:before{content:counter(listNumbering,decimal) \".\"!important}:host ::ng-deep .fr-view ol ol ol ol ol ol>li:before{content:counter(listNumbering,lower-alpha) \".\"!important}:host ::ng-deep .fr-view ul>li{list-style:none}:host ::ng-deep .fr-view ul>li:before{content:\"\\2022\"}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-popup .fr-layer{margin:0 15px!important}::ng-deep .fr-popup .fr-layer.fr-image-upload-layer{margin:12px!important}::ng-deep .fr-popup .fr-input-line{padding-bottom:0!important}::ng-deep .fr-popup .fr-input-line input{border-radius:4px!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"] }]
|
|
667
|
+
}], propDecorators: { htmlEditorContainer: [{
|
|
727
668
|
type: ContentChild,
|
|
728
669
|
args: [FsHtmlEditorContainerDirective, { read: TemplateRef }]
|
|
729
670
|
}], classFocused: [{
|
|
@@ -752,23 +693,23 @@ class FsHtmlEditorModule {
|
|
|
752
693
|
{ provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
|
|
753
694
|
{
|
|
754
695
|
provide: FS_HTML_EDITOR_CONFIG,
|
|
755
|
-
useFactory:
|
|
696
|
+
useFactory: htmlEditorConfigFactory,
|
|
756
697
|
deps: [FS_HTML_EDITOR_DEFAULT_CONFIG],
|
|
757
698
|
},
|
|
758
699
|
],
|
|
759
700
|
};
|
|
760
701
|
}
|
|
761
702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
762
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule,
|
|
763
|
-
FsHtmlEditorContainerDirective], imports: [CommonModule,
|
|
703
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
|
|
764
704
|
FsSkeletonModule,
|
|
765
705
|
FsLabelModule,
|
|
766
|
-
|
|
706
|
+
FsHtmlEditorComponent,
|
|
707
|
+
FsHtmlEditorContainerDirective], exports: [FsHtmlEditorComponent,
|
|
767
708
|
FsHtmlEditorContainerDirective] });
|
|
768
709
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
|
|
769
710
|
FsSkeletonModule,
|
|
770
711
|
FsLabelModule,
|
|
771
|
-
|
|
712
|
+
FsHtmlEditorComponent] });
|
|
772
713
|
}
|
|
773
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
|
|
774
715
|
type: NgModule,
|
|
@@ -777,19 +718,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
777
718
|
CommonModule,
|
|
778
719
|
FsSkeletonModule,
|
|
779
720
|
FsLabelModule,
|
|
780
|
-
FsHtmlRendererModule,
|
|
781
|
-
],
|
|
782
|
-
exports: [
|
|
783
721
|
FsHtmlEditorComponent,
|
|
784
722
|
FsHtmlEditorContainerDirective,
|
|
785
723
|
],
|
|
786
|
-
|
|
724
|
+
exports: [
|
|
787
725
|
FsHtmlEditorComponent,
|
|
788
726
|
FsHtmlEditorContainerDirective,
|
|
789
727
|
],
|
|
790
728
|
}]
|
|
791
729
|
}] });
|
|
792
|
-
function
|
|
730
|
+
function htmlEditorConfigFactory(config) {
|
|
793
731
|
return {
|
|
794
732
|
froalaPlugins: [
|
|
795
733
|
"align" /* FroalaPlugin.Align */,
|
|
@@ -810,6 +748,26 @@ function FsHtmlEditorConfigFactory(config) {
|
|
|
810
748
|
};
|
|
811
749
|
}
|
|
812
750
|
|
|
751
|
+
class FsHtmlRendererComponent {
|
|
752
|
+
sanitized = inject(DomSanitizer);
|
|
753
|
+
_cdRef = inject(ChangeDetectorRef);
|
|
754
|
+
_fr = inject(FsFroalaLoaderService);
|
|
755
|
+
set setHtml(html) {
|
|
756
|
+
this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
|
|
757
|
+
this._cdRef.markForCheck();
|
|
758
|
+
}
|
|
759
|
+
trustedHtml;
|
|
760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHtmlRendererComponent, isStandalone: true, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
762
|
+
}
|
|
763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
|
|
764
|
+
type: Component,
|
|
765
|
+
args: [{ selector: 'fs-html-renderer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n" }]
|
|
766
|
+
}], propDecorators: { setHtml: [{
|
|
767
|
+
type: Input,
|
|
768
|
+
args: ['html']
|
|
769
|
+
}] } });
|
|
770
|
+
|
|
813
771
|
class Plugin {
|
|
814
772
|
config;
|
|
815
773
|
editor;
|
|
@@ -1124,5 +1082,5 @@ class ScreenRecordPlugin extends Plugin {
|
|
|
1124
1082
|
* Generated bundle index. Do not edit.
|
|
1125
1083
|
*/
|
|
1126
1084
|
|
|
1127
|
-
export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorContainerDirective, FsHtmlEditorModule, FsHtmlRendererComponent,
|
|
1085
|
+
export { ChecklistPlugin, CodePlugin, FS_HTML_EDITOR_CONFIG, FsHtmlEditorComponent, FsHtmlEditorContainerDirective, FsHtmlEditorModule, FsHtmlRendererComponent, MentionPlugin, ParagraphButtons, Plugin, RealtimePlugin, RichButtons, ScreenRecordPlugin, TextButtons, ToolbarButtons, ToolbarXsButtons };
|
|
1128
1086
|
//# sourceMappingURL=firestitch-html-editor.mjs.map
|