@firestitch/html-editor 18.0.40 → 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 +20 -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 +133 -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
|
}
|
|
@@ -679,8 +619,8 @@ class FsHtmlEditorComponent {
|
|
|
679
619
|
this.focus();
|
|
680
620
|
}
|
|
681
621
|
}
|
|
682
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorComponent, deps: [
|
|
683
|
-
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: [
|
|
684
624
|
{
|
|
685
625
|
provide: NG_VALUE_ACCESSOR,
|
|
686
626
|
useExisting: forwardRef(() => FsHtmlEditorComponent),
|
|
@@ -691,7 +631,7 @@ class FsHtmlEditorComponent {
|
|
|
691
631
|
useExisting: forwardRef(() => FsHtmlEditorComponent),
|
|
692
632
|
multi: true,
|
|
693
633
|
},
|
|
694
|
-
], 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: [
|
|
695
635
|
{
|
|
696
636
|
provide: ControlContainer,
|
|
697
637
|
deps: [[Optional, NgForm]],
|
|
@@ -718,13 +658,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
718
658
|
deps: [[Optional, NgForm]],
|
|
719
659
|
useFactory: (ngForm) => ngForm,
|
|
720
660
|
},
|
|
721
|
-
],
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
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: [{
|
|
728
668
|
type: ContentChild,
|
|
729
669
|
args: [FsHtmlEditorContainerDirective, { read: TemplateRef }]
|
|
730
670
|
}], classFocused: [{
|
|
@@ -753,23 +693,23 @@ class FsHtmlEditorModule {
|
|
|
753
693
|
{ provide: FS_HTML_EDITOR_DEFAULT_CONFIG, useValue: config },
|
|
754
694
|
{
|
|
755
695
|
provide: FS_HTML_EDITOR_CONFIG,
|
|
756
|
-
useFactory:
|
|
696
|
+
useFactory: htmlEditorConfigFactory,
|
|
757
697
|
deps: [FS_HTML_EDITOR_DEFAULT_CONFIG],
|
|
758
698
|
},
|
|
759
699
|
],
|
|
760
700
|
};
|
|
761
701
|
}
|
|
762
702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
763
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule,
|
|
764
|
-
FsHtmlEditorContainerDirective], imports: [CommonModule,
|
|
703
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
|
|
765
704
|
FsSkeletonModule,
|
|
766
705
|
FsLabelModule,
|
|
767
|
-
|
|
706
|
+
FsHtmlEditorComponent,
|
|
707
|
+
FsHtmlEditorContainerDirective], exports: [FsHtmlEditorComponent,
|
|
768
708
|
FsHtmlEditorContainerDirective] });
|
|
769
709
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
|
|
770
710
|
FsSkeletonModule,
|
|
771
711
|
FsLabelModule,
|
|
772
|
-
|
|
712
|
+
FsHtmlEditorComponent] });
|
|
773
713
|
}
|
|
774
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
|
|
775
715
|
type: NgModule,
|
|
@@ -778,19 +718,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
778
718
|
CommonModule,
|
|
779
719
|
FsSkeletonModule,
|
|
780
720
|
FsLabelModule,
|
|
781
|
-
FsHtmlRendererModule,
|
|
782
|
-
],
|
|
783
|
-
exports: [
|
|
784
721
|
FsHtmlEditorComponent,
|
|
785
722
|
FsHtmlEditorContainerDirective,
|
|
786
723
|
],
|
|
787
|
-
|
|
724
|
+
exports: [
|
|
788
725
|
FsHtmlEditorComponent,
|
|
789
726
|
FsHtmlEditorContainerDirective,
|
|
790
727
|
],
|
|
791
728
|
}]
|
|
792
729
|
}] });
|
|
793
|
-
function
|
|
730
|
+
function htmlEditorConfigFactory(config) {
|
|
794
731
|
return {
|
|
795
732
|
froalaPlugins: [
|
|
796
733
|
"align" /* FroalaPlugin.Align */,
|
|
@@ -811,6 +748,26 @@ function FsHtmlEditorConfigFactory(config) {
|
|
|
811
748
|
};
|
|
812
749
|
}
|
|
813
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
|
+
|
|
814
771
|
class Plugin {
|
|
815
772
|
config;
|
|
816
773
|
editor;
|
|
@@ -1125,5 +1082,5 @@ class ScreenRecordPlugin extends Plugin {
|
|
|
1125
1082
|
* Generated bundle index. Do not edit.
|
|
1126
1083
|
*/
|
|
1127
1084
|
|
|
1128
|
-
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 };
|
|
1129
1086
|
//# sourceMappingURL=firestitch-html-editor.mjs.map
|