Skip to content

Commit ef596eb

Browse files
harasunu-narayanAndriiMysko
harasunu-narayan
and
AndriiMysko
authored
Update to v4.4.0 (#555)
 - Angular framework plugin upgraded - Fixed, Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') - Fixed, Random number list gets generated when copy-pasting content from MS Word - Fixed, Pasting TOC from Word does not work as expected - Fixed, oneNote: deleting bullet lists after pasting into the editor does not work as expected - Fixed, editor does not returns `fullPage` content when `fontFamilyDefaultSelection` option is used - Fixed, issue with using Froala Angular SDK in standalone component (Angular 17) when Server-Side Rendering (SSR) is enabled - Fixed, pasting list containing sub-bullet lists, the sub bullet lists are not preserved in the same order - Fixed, complex numbering and bullets alignment is not pasted correctly from MS Word inside the editor - Fixed, increasing font size does not increase's the subscript line - Fixed, problem with underline text and color change - Fixed, table with header that contains merged cells is not displayed correctly - Fixed, after clicking an image the image toolbar moves with outer scroll - Fixed, track changes: editor completely delete's characters from content when pressing backspace - Fixed, cursor position get's lost if the content is wrapped with `html.wrap` inside tables - Fixed, XSS vulnerability when pasting content into the froala editor - Fixed, Vimeo Embedded Code Includes Extra `<p>` Tag Causing Embed Failure - Fixed, inserting link with special character, the editor removes any formatting from the content. - Updated Dompurify library integration within Froala to respect the configurable options --------- Co-authored-by: AndriiMysko <[email protected]>
1 parent 25544ac commit ef596eb

File tree

12 files changed

+130
-89
lines changed

12 files changed

+130
-89
lines changed

‎Dockerfile‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM node:14
1+
FROM node:18
22

33
LABEL maintainer="[email protected]"
44

@@ -11,13 +11,13 @@ COPY . /app
1111
WORKDIR /app/
1212

1313
RUN apt update -y \
14-
&& apt install -y jq unzip wget
14+
&& apt install -y jq unzip wget
1515
RUN echo "Dummy line"
1616

1717
RUN echo "PackageName=$PackageName PackageVersion=$PackageVersion NexusUser=${NexusUser} NexusPassword=${NexusPassword}"
1818
RUN wget --no-check-certificate --user ${NexusUser} --password ${NexusPassword} https://nexus.tools.froala-infra.com/repository/Froala-npm/${PackageName}/-/${PackageName}-${PackageVersion}.tgz
1919

20-
RUN npm install
20+
RUN npm install
2121

2222
RUN npm run demo.build
2323
EXPOSE 4200

‎README.md‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,57 @@ cd my-app
7272
npm install angular-froala-wysiwyg --save
7373
```
7474

75-
- open `src/app/app.module.ts` and add
75+
- if you are adding Froala to an application that uses Server-side rendering, open `src/app/app.component.ts` and add
76+
77+
```typescript
78+
// Import helpers to detect browser context
79+
import { PLATFORM_ID, Inject } from '@angular/core';
80+
import { isPlatformBrowser } from "@angular/common";
81+
// Import Angular plugin.
82+
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
83+
...
84+
85+
@Component({
86+
...
87+
imports: [FroalaEditorModule, FroalaViewModule ... ],
88+
...
89+
})
90+
91+
export class AppComponent {
92+
...
93+
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
94+
95+
ngOnInit() {
96+
// Import Froala plugins dynamically only in the browser context
97+
if (isPlatformBrowser(this.platformId)) {
98+
// Import all Froala Editor plugins.
99+
// @ts-ignore
100+
// import('froala-editor/js/plugins.pkgd.min.js');
101+
102+
// Import a single Froala Editor plugin.
103+
// @ts-ignore
104+
// import('froala-editor/js/plugins/align.min.js');
105+
106+
// Import a Froala Editor language file.
107+
// @ts-ignore
108+
// import('froala-editor/js/languages/de.js');
109+
110+
// Import a third-party plugin.
111+
// @ts-ignore
112+
// import('froala-editor/js/third_party/font_awesome.min');
113+
// @ts-ignore
114+
// import('froala-editor/js/third_party/image_tui.min');
115+
// @ts-ignore
116+
// import('froala-editor/js/third_party/spell_checker.min';
117+
// @ts-ignore
118+
// import('froala-editor/js/third_party/embedly.min');
119+
}
120+
}
121+
...
122+
}
123+
```
124+
125+
- alternatively, for non-SSR applications, open `src/app/app.module.ts` and add
76126

77127
```typescript
78128
// Import all Froala Editor plugins.

‎angular.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,14 @@
6363
"serve": {
6464
"builder": "@angular-devkit/build-angular:dev-server",
6565
"options": {
66-
"browserTarget": "angular-froala-wysiwyg-demo:build"
66+
"buildTarget": "angular-froala-wysiwyg-demo:build"
6767
},
6868
"configurations": {}
6969
},
7070
"extract-i18n": {
7171
"builder": "@angular-devkit/build-angular:extract-i18n",
7272
"options": {
73-
"browserTarget": "angular-froala-wysiwyg-demo:build"
73+
"buildTarget": "angular-froala-wysiwyg-demo:build"
7474
}
7575
},
7676
"lint": {

‎package.json‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-froala-wysiwyg-base",
3-
"version": "4.3.1",
4-
"description": "Angular 15+ versions bindings for Froala WYSIWYG HTML rich text editor",
3+
"version": "4.4.0",
4+
"description": "Angular 19+ versions bindings for Froala WYSIWYG HTML rich text editor",
55
"main": "bundles/angular-froala-wysiwyg.umd.js",
66
"typings": "index.d.ts",
77
"module": "index.js",
@@ -16,8 +16,8 @@
1616
"url": "https://github.com/froala/angular-froala-wysiwyg.git"
1717
},
1818
"keywords": [
19-
"angular15",
20-
"ng15",
19+
"angular19",
20+
"ng19",
2121
"froala",
2222
"html",
2323
"text",
@@ -35,33 +35,30 @@
3535
},
3636
"dependencies": {
3737
"font-awesome": "^4.7.0",
38-
"froala-editor": "^4.3.1",
39-
"tslib": "^2.5.0"
38+
"froala-editor": "^4.4.0",
39+
"tslib": "^2.8.1"
4040
},
4141
"peerDependencies": {},
4242
"devDependencies": {
43-
"@angular-devkit/build-angular": "^15.0.0",
44-
"@angular/cli": "^15.0.0",
45-
"@angular/common": "^15.0.0",
46-
"@angular/compiler": "^15.0.0",
47-
"@angular/compiler-cli": "^15.0.0",
48-
"@angular/core": "^15.0.0",
49-
"@angular/forms": "^15.0.0",
50-
"@angular/language-service": "^15.0.0",
51-
"@angular/platform-browser": "^15.0.0",
52-
"@angular/platform-browser-dynamic": "^15.0.0",
53-
"@angular/router": "^15.0.0",
54-
"core-js": "~2.6.11",
55-
"@types/marked": "4.0.8",
56-
"@types/node": "^16.13.0",
57-
"@types/tapable": "^1.0.4",
58-
"@types/webpack": "^5.28.0",
43+
"@angular-devkit/build-angular": "^19.0.1",
44+
"@angular/cli": "^19.0.1",
45+
"@angular/common": "^19.0.0",
46+
"@angular/compiler": "^19.0.0",
47+
"@angular/compiler-cli": "^19.0.0",
48+
"@angular/core": "^19.0.0",
49+
"@angular/forms": "^19.0.0",
50+
"@angular/language-service": "^19.0.0",
51+
"@angular/platform-browser": "^19.0.0",
52+
"@angular/platform-browser-dynamic": "^19.0.0",
53+
"@angular/router": "^19.0.0",
54+
"@types/node": "^18.11.9",
55+
"@types/tapable": "^2.2.1",
56+
"@types/webpack": "^5.28.5",
5957
"classlist.js": "^1.1.20150312",
60-
"ng-packagr": "^15.0.0",
61-
"rxjs": "^6.5.3",
62-
"ts-helpers": "^1.1.1",
63-
"typescript": "~4.8.2",
64-
"zone.js": "~0.12.0",
65-
"tsickle": "^0.46.3"
58+
"ng-packagr": "^19.0.1",
59+
"rxjs": "^7.8.1",
60+
"ts-helpers": "^1.1.2",
61+
"typescript": "~5.6.3",
62+
"zone.js": "~0.15.0"
6663
}
67-
}
64+
}

‎projects/demo/src/app/app.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
44
import FroalaEditor from 'froala-editor';
55

66
@Component({
7-
selector: 'app-demo',
8-
template: `
7+
selector: 'app-demo',
8+
template: `
99
1010
<h1>Angular adapter for the Froala WYSIWYG editor</h1>
1111
<div class="sample">
@@ -93,7 +93,8 @@ import FroalaEditor from 'froala-editor';
9393
<div id="sample11" [froalaEditor]="options" [(froalaModel)]="content" ></div>
9494
</div>
9595
96-
`
96+
`,
97+
standalone: false
9798
})
9899

99100
export class AppComponent implements OnInit {

‎projects/demo/src/app/froala.component.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import { Component, forwardRef } from '@angular/core';
22
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
33

44
@Component({
5-
selector: 'froala-component',
6-
template: `
5+
selector: 'froala-component',
6+
template: `
77
<textarea [froalaEditor]="config" (froalaModelChange)="onChange($event)" [(froalaModel)]="model"></textarea>
88
`,
9-
providers: [
10-
{
11-
provide: NG_VALUE_ACCESSOR,
12-
useExisting: forwardRef(() => FroalaComponent),
13-
multi: true
14-
}
15-
]
9+
providers: [
10+
{
11+
provide: NG_VALUE_ACCESSOR,
12+
useExisting: forwardRef(() => FroalaComponent),
13+
multi: true
14+
}
15+
],
16+
standalone: false
1617
})
1718
export class FroalaComponent implements ControlValueAccessor {
1819

‎projects/demo/src/polyfills.ts‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
// This file includes polyfills needed by Angular 2 and is loaded before
22
// the app. You can add your own extra polyfills to this file.
3-
import 'core-js/es6/symbol';
4-
import 'core-js/es6/object';
5-
import 'core-js/es6/function';
6-
import 'core-js/es6/parse-int';
7-
import 'core-js/es6/parse-float';
8-
import 'core-js/es6/number';
9-
import 'core-js/es6/math';
10-
import 'core-js/es6/string';
11-
import 'core-js/es6/date';
12-
import 'core-js/es6/array';
13-
import 'core-js/es6/regexp';
14-
import 'core-js/es6/map';
15-
import 'core-js/es6/set';
16-
import 'core-js/es6/reflect';
17-
import 'core-js/es7/reflect';
18-
import 'zone.js/dist/zone';
3+
import 'zone.js';
4+
import 'zone.js/testing';
195

206
import 'classlist.js';

‎projects/library/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"url": "https://github.com/froala/angular-froala-wysiwyg.git",
66
"directory":"projects/library"
77
},
8-
"version": "4.3.1",
8+
"version": "4.4.0",
99
"dependencies": {
10-
"froala-editor": "4.3.1"
10+
"froala-editor": "4.4.0"
1111
}
1212
}

‎projects/library/src/editor/editor.directive.ts‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
2-
import { Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output } from '@angular/core';
3-
4-
import FroalaEditor from 'froala-editor';
2+
import { Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, PLATFORM_ID, Inject } from '@angular/core';
3+
import { isPlatformBrowser } from "@angular/common";
54

65
@Directive({
7-
selector: '[froalaEditor]',
8-
exportAs: 'froalaEditor',
9-
providers: [
10-
{
11-
provide: NG_VALUE_ACCESSOR,
12-
useExisting: forwardRef(() => FroalaEditorDirective),
13-
multi: true
14-
}
15-
]
6+
selector: '[froalaEditor]',
7+
exportAs: 'froalaEditor',
8+
providers: [
9+
{
10+
provide: NG_VALUE_ACCESSOR,
11+
useExisting: forwardRef(() => FroalaEditorDirective),
12+
multi: true
13+
}
14+
],
15+
standalone: false
1616
})
1717
export class FroalaEditorDirective implements ControlValueAccessor {
1818

@@ -38,7 +38,7 @@ export class FroalaEditorDirective implements ControlValueAccessor {
3838

3939
private _oldModel: string = null;
4040

41-
constructor(el: ElementRef, private zone: NgZone) {
41+
constructor(el: ElementRef, private zone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
4242

4343
let element: any = el.nativeElement;
4444

@@ -292,11 +292,13 @@ export class FroalaEditorDirective implements ControlValueAccessor {
292292
this._opts.events.initialized.overridden = true;
293293
}
294294

295-
// Initialize the Froala Editor.
296-
this._editor = new FroalaEditor(
297-
this._element,
298-
this._opts
299-
);
295+
import('froala-editor').then(({ default: FroalaEditor }) => {
296+
// Initialize the Froala Editor.
297+
this._editor = new FroalaEditor(
298+
this._element,
299+
this._opts
300+
);
301+
});
300302
});
301303
}
302304

@@ -371,7 +373,10 @@ export class FroalaEditorDirective implements ControlValueAccessor {
371373
// TODO not sure if ngOnInit is executed after @inputs
372374
ngAfterViewInit() {
373375
// check if output froalaInit is present. Maybe observers is private and should not be used?? TODO how to better test that an output directive is present.
374-
this.setup();
376+
// Only allow initialization in browser
377+
if (isPlatformBrowser(this.platformId)) {
378+
this.setup();
379+
}
375380
}
376381

377382
private initialized = false;

‎projects/library/src/view/view.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';
22

33
@Directive({
4-
selector: '[froalaView]'
4+
selector: '[froalaView]',
5+
standalone: false
56
})
67
export class FroalaViewDirective {
78

0 commit comments

Comments
 (0)