From 534d2e071eaaadc981899167696cf0e1a174817c Mon Sep 17 00:00:00 2001 From: shubhamsharma9199 Date: Wed, 26 Nov 2025 17:58:27 +0530 Subject: [PATCH] feat: replace CKEditor with self-hosted TinyMCE WEB-435 Unit Test Coverage for ViewCollateralComponent feat: replace CKEditor with self-hosted TinyMCE (no API key) Change ViewChild static option to false --- angular.json | 9 +- package-lock.json | 456 ++---------------- package.json | 4 +- .../create-edit-template.component.html | 16 +- .../create-edit-template.component.ts | 62 +-- src/app/templates/templates.module.ts | 4 +- src/typings.d.ts | 6 - 7 files changed, 82 insertions(+), 475 deletions(-) diff --git a/angular.json b/angular.json index 4b90ba975..e46f8a7dd 100644 --- a/angular.json +++ b/angular.json @@ -34,7 +34,12 @@ "src/favicon.ico", "src/robots.txt", "src/manifest.json", - "src/assets" + "src/assets", + { + "glob": "**/*", + "input": "node_modules/tinymce", + "output": "assets/tinymce" + } ], "styles": [ "node_modules/@fortawesome/fontawesome-free/css/all.css", @@ -49,7 +54,7 @@ "scripts": [], "allowedCommonJsDependencies": [ "lodash", - "@ckeditor/ckeditor5-build-classic", + "tinymce", "moment" ], "browser": "src/main.ts", diff --git a/package-lock.json b/package-lock.json index ae03fc7d3..00b265c9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,8 +22,6 @@ "@angular/platform-browser": "19.2.14", "@angular/platform-browser-dynamic": "19.2.14", "@angular/router": "19.2.14", - "@ckeditor/ckeditor5-angular": "6.0.1", - "@ckeditor/ckeditor5-build-classic": "40.2.0", "@fortawesome/angular-fontawesome": "^1.0.0", "@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-svg-core": "6.2.1", @@ -33,6 +31,7 @@ "@ngx-translate/http-loader": "^16.0.1", "@swimlane/ngx-graph": "^10.0.0", "@tailwindcss/forms": "^0.5.4", + "@tinymce/tinymce-angular": "^9.1.1", "chart.js": "^4.5.1", "d3": "^7.9.0", "exceljs": "^4.4.0", @@ -43,6 +42,7 @@ "moment": "^2.29.4", "ngx-mat-select-search": "^7.0.10", "rxjs": "7.8.1", + "tinymce": "^8.2.2", "tslib": "^2.0.0", "vkbeautify": "^0.99.3", "zone.js": "0.15.1" @@ -3095,374 +3095,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@ckeditor/ckeditor5-adapter-ckfinder": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-adapter-ckfinder/-/ckeditor5-adapter-ckfinder-40.2.0.tgz", - "integrity": "sha512-YKdydg4DzaMk91saOL55KBNQE3St2NEj1E9hlk9CzHKQaHc79dYzHDNBolSE7ZmzkNJ4ToVbY7kRW5CDGfG5Rg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-angular": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-angular/-/ckeditor5-angular-6.0.1.tgz", - "integrity": "sha512-HryWnHaZTJ4KFIP6hjx5dCOUfhRuxmn/I0JFzrXXbPCVXXwlsGAtx2sjczmKnpTyofRSlDq8vTqw7+4hV4zB9g==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-watchdog": "^37.0.0", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": ">=13.0.0", - "@angular/core": ">=13.0.0", - "@angular/forms": ">=13.0.0", - "rxjs": ">=6.0.0" - } - }, - "node_modules/@ckeditor/ckeditor5-autoformat": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-40.2.0.tgz", - "integrity": "sha512-F3w5k7ti5l6V8U07eSQ3gup3ivltRZQXdtvstBXMmTzDb2ceazNcUDLb6TKSHp5y30ETN0dRGgbhx9xiDL0TXg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-basic-styles": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-40.2.0.tgz", - "integrity": "sha512-P7jYddLnRpaR4zVCqDa8InsZ6YNRHdF0RrX6+Uz81+A1IfyfmSd+5IaiLxxdnFWQ4JlEhJutjy9vMwSmOhZocQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-block-quote": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-block-quote/-/ckeditor5-block-quote-40.2.0.tgz", - "integrity": "sha512-t03Yp+MeAyQhwdGZqUlkJEx25VSiigpzkIGGOhccSaTIIZ9XcWDkrTevDhwA4Pq4Q9IRQ8Loj3KCVSBuAqkBgw==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-build-classic": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-40.2.0.tgz", - "integrity": "sha512-b9zt1kU0S2Azco8mXraxj56pctHRs9y/XfdVrpFzxiRbbzyBZ42WgX1ThJNTqH6WkXCxDPYSbqPhNIvPHpuEyg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-adapter-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-ckbox": "40.2.0", - "@ckeditor/ckeditor5-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-easy-image": "40.2.0", - "@ckeditor/ckeditor5-editor-classic": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-heading": "40.2.0", - "@ckeditor/ckeditor5-image": "40.2.0", - "@ckeditor/ckeditor5-indent": "40.2.0", - "@ckeditor/ckeditor5-link": "40.2.0", - "@ckeditor/ckeditor5-list": "40.2.0", - "@ckeditor/ckeditor5-media-embed": "40.2.0", - "@ckeditor/ckeditor5-paragraph": "40.2.0", - "@ckeditor/ckeditor5-paste-from-office": "40.2.0", - "@ckeditor/ckeditor5-table": "40.2.0", - "@ckeditor/ckeditor5-typing": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-ckbox": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-ckbox/-/ckeditor5-ckbox-40.2.0.tgz", - "integrity": "sha512-w/A3RA7qpR7Scl4hgUTt8j+oV7oD9IFPNGTpp0xoyfWEV8Ymm2NrMAvV0PAJiavYS3+FT4GO4RBOM6BvLHuV3w==", - "license": "GPL-2.0-or-later", - "dependencies": { - "blurhash": "2.0.5", - "ckeditor5": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-ckfinder": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-ckfinder/-/ckeditor5-ckfinder-40.2.0.tgz", - "integrity": "sha512-kiW5TZOLHYd6hhWeDIrep8FXLo0q14b0e0Jit0XSi3z4PQfdDSRk9UuMJPkkf4EdF3PUSdMJ9bccJG76DYXzFQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-clipboard": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-clipboard/-/ckeditor5-clipboard-40.2.0.tgz", - "integrity": "sha512-8/xPH9/i86ukcEiHdmTgNuPVJeYTrivbx5ZYqycPO4Eem7VM99gIbOe7pIYpuV+klr9ymVxIHbGyTJDJ3oUO8A==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-cloud-services": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-cloud-services/-/ckeditor5-cloud-services-40.2.0.tgz", - "integrity": "sha512-xrPQjFGGy1ZfXyKIMw0uzn7OIriSv13YMw0M2ZTh+V1jRN1HW9KzzNb2DlQc+6wQfRk0bq69XGLp3M296/cVTQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-core": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-core/-/ckeditor5-core-40.2.0.tgz", - "integrity": "sha512-0fqIaN+ZhkXXA3mpBN+alycBzPMc8ruO8VrP0OnvCjowqZVS2HXC2AaXNBdxc75xGI3ScXIor7FsgFHxVJIYYQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-easy-image": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-easy-image/-/ckeditor5-easy-image-40.2.0.tgz", - "integrity": "sha512-bE9YHGYEY1ql5mIqZSI2fkoBA4th28M0GDaJutwJYKM3t+Bost3Zh1UfmYKE2kvYgmeLY1L3hjQpN9w7NYyLpw==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-editor-classic": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-editor-classic/-/ckeditor5-editor-classic-40.2.0.tgz", - "integrity": "sha512-dftfDBxANOgqgQZ4SB3YTsEV/XX1u0g9jopbOBwqIABnVVa8zoGcktgFdGnLUFk51sL65baSx2z8Z1NNYdZcFQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-engine": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-40.2.0.tgz", - "integrity": "sha512-sgboUX8Ps+LcEgywyT3BeK1nzLHjNVIiZU1qvRxR3ixzIw4w2xRNXCGfESWLW5Y5rv9+ypUCrX61oLnZU64PQQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-utils": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-enter": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-enter/-/ckeditor5-enter-40.2.0.tgz", - "integrity": "sha512-GjTRaKNX8QEDJ3YYKG3GfPZfGHrcigGBxbo+1WDT7NaOsR2DA/CIZfHlAPfgJDAMV17bhWsT3gy3+oQZsExtnQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-essentials": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-essentials/-/ckeditor5-essentials-40.2.0.tgz", - "integrity": "sha512-7iUUy0Uwiei4yLrn145SOcyzriMeVFVc5ontQkxQE5b9alFdAc/6ZoDPZqwD7V0zi5RQ/2YsoVMRLFa4hbPfNA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-heading": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-40.2.0.tgz", - "integrity": "sha512-uDT1sttMy+KrKi90jnqEI43886o1wfKrROWqaMbmKOerTbIi58GNH9LvX04sf1RyHV3+3566RRmB248fsLkYjA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-image": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-image/-/ckeditor5-image-40.2.0.tgz", - "integrity": "sha512-0Dunw1o5k2+5Q5XiWLDG1r8k9awosfIFuDZwqKJGWtDaNE4QQbJ9+iJSwiiRw2QjcGr7D3JdH7xwJZFra7kYmA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-ui": "40.2.0", - "ckeditor5": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-indent": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-indent/-/ckeditor5-indent-40.2.0.tgz", - "integrity": "sha512-gSlRGoyAslB2OpqghimIY6Oiflf3Z2/MdLBzvFipU5N4X66cL29HuWZc/bOkcFzWwNeDK5LgzfLdvXNzkdv5Xw==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-link": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-link/-/ckeditor5-link-40.2.0.tgz", - "integrity": "sha512-/r4Ti9USdrURBX+qutvyDGOb75sNuSgtXdI8xK503EVfx5yBIi6qsYIYWoFvnGJKkLYkVo+940ilduhwzq0M7g==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-ui": "40.2.0", - "ckeditor5": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-list": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-list/-/ckeditor5-list-40.2.0.tgz", - "integrity": "sha512-lsQWSLSFRHRQ2AxA6vgTib9YELjF2J5jpR6H4RDW1gM//dL3FjvLxKPPN/V7rMcp15rrpSiOya+qB99l24DEpQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-media-embed": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-media-embed/-/ckeditor5-media-embed-40.2.0.tgz", - "integrity": "sha512-ORY7VebL7UTuBG/4++UxzqEKjnlZZKAFqUrIom7xXpQNfo6oJFtZLnKYwESZ6iNk7NBOAeiHEecP2tKWyFQd1g==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-ui": "40.2.0", - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-paragraph": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-40.2.0.tgz", - "integrity": "sha512-NotxWP1cKvbJSY1UwdTe/Oy1NnAj9Etsi4Z7XA908EvCsNSnFtzdMhYzLhFZJ18avrQFDa7PpSKSyN3M64CbSA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-paste-from-office": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-paste-from-office/-/ckeditor5-paste-from-office-40.2.0.tgz", - "integrity": "sha512-kdk7uJlSa9mvyuNAwmIfV6Kc1tfWI6DbCs19jyseA/F0vySKibb0DsBVSZ7xa5ihcjphfJvwpypWYL0BYdYKLQ==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-select-all": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-select-all/-/ckeditor5-select-all-40.2.0.tgz", - "integrity": "sha512-yaYCqhdMcoEH3BsilhweNdbOfuO/cexQ1r1/mYoBoW4CypIuAeq8J/3qLpvFaThmCRPzJBn1J7v2Yjs/0UnamA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-table": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-table/-/ckeditor5-table-40.2.0.tgz", - "integrity": "sha512-yODne7az/aJ9lsuI7w476pgGV2QBoH2tOKp3JFh/e2DdHC20637LCVd0cx8sUe3zk61X/eYPY+wOiRJx/mIUqg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "ckeditor5": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-typing": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-typing/-/ckeditor5-typing-40.2.0.tgz", - "integrity": "sha512-2E7LkmC4RHdenMUwow0EZDKxlbX00c5UHysUVT51EBGrXiJcN++0cqxQaeJzQ262oTDpk94qE5IZdGXt3ntzrw==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-ui": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-40.2.0.tgz", - "integrity": "sha512-K8oC9zrJokZD5Nl4uQjJMo8Couds0eHmfNI/go6iU4A4OAdDzph+W50QnyMed4etKnMdhvUSbnuZnPtQjnsvFA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "color-convert": "2.0.1", - "color-parse": "1.4.2", - "lodash-es": "4.17.21", - "vanilla-colorful": "0.7.2" - } - }, - "node_modules/@ckeditor/ckeditor5-undo": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-undo/-/ckeditor5-undo-40.2.0.tgz", - "integrity": "sha512-k2VZS5x4SJtYk3zhdwHYg+D00DgD0iWR0H4qQgcWmQMFRipYvXJRixP3hSLZGJciQanPFeYcjZgxNQ+rU1s8ug==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-upload": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-upload/-/ckeditor5-upload-40.2.0.tgz", - "integrity": "sha512-AdJSKvWEQbSSyA/DfxbCHRhFN6S4ew4kuYETO57e6AS3aOuYGLBRdu9Mub7IAQcOyy1LL6ktr9u5WEOoWS2h0w==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0" - } - }, - "node_modules/@ckeditor/ckeditor5-utils": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-40.2.0.tgz", - "integrity": "sha512-f+kTJBwwk7Y/LXm8pEPxBTXVlJwQrH7Levzye9zxEDB0Jtj7+brGr87o666fPmL/ATQc5M+VPhbvnk2sOv7WKg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "lodash-es": "4.17.21" - } - }, - "node_modules/@ckeditor/ckeditor5-watchdog": { - "version": "37.1.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-watchdog/-/ckeditor5-watchdog-37.1.0.tgz", - "integrity": "sha512-0d4WU2BO5n0tNzJl9iamnrFK+XEaK7gVEMIXcduznbupfFGVYFdrOXfDTdW0Yr59kpKEG8JbaWOF3aILjBRRWA==", - "license": "GPL-2.0-or-later", - "dependencies": { - "lodash-es": "^4.17.15" - }, - "engines": { - "node": ">=16.0.0", - "npm": ">=5.7.1" - } - }, - "node_modules/@ckeditor/ckeditor5-widget": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-widget/-/ckeditor5-widget-40.2.0.tgz", - "integrity": "sha512-okeUSwbnu6TUKvwBOl0YdED6Me0/vvs1ybfKZPNEJNwGl989iG0LQO4oYUye8BTCZvzCZ2cBTb1Cvnwr8KRcbg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-typing": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "lodash-es": "4.17.21" - } - }, "node_modules/@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -7422,6 +7054,27 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1" } }, + "node_modules/@tinymce/tinymce-angular": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-9.1.1.tgz", + "integrity": "sha512-4W15Ruheqg9hnCUhtNoYX/SnvytT9N0ugv1Tk/aXXXVQMUCQwL3MQBNn8SNer8iZvkDbP+11au0zWW9dWVGSVA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0", + "@angular/forms": ">=16.0.0", + "rxjs": "^7.4.0", + "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.0" + }, + "peerDependenciesMeta": { + "tinymce": { + "optional": true + } + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -9607,12 +9260,6 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "license": "MIT" }, - "node_modules/blurhash": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz", - "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==", - "license": "MIT" - }, "node_modules/body-parser": { "version": "1.20.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", @@ -10216,36 +9863,6 @@ "dev": true, "license": "MIT" }, - "node_modules/ckeditor5": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/ckeditor5/-/ckeditor5-40.2.0.tgz", - "integrity": "sha512-JaFuY/6DX1wbA6yRB2xQVMr+9W1C3HvSX4AT10ccoKBKe9OctIatekDt2ztV+cMaVHLF1wocskS/Ql9XFRy2Eg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-paragraph": "40.2.0", - "@ckeditor/ckeditor5-select-all": "40.2.0", - "@ckeditor/ckeditor5-typing": "40.2.0", - "@ckeditor/ckeditor5-ui": "40.2.0", - "@ckeditor/ckeditor5-undo": "40.2.0", - "@ckeditor/ckeditor5-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-watchdog": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0" - } - }, - "node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-watchdog": { - "version": "40.2.0", - "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-watchdog/-/ckeditor5-watchdog-40.2.0.tgz", - "integrity": "sha512-ets7o2dUR7l23G9o/RAbu+gJzUkc2Ul269E3TEhZnbQXFjshvEGK2kzuay7I+/waL3ADuYe4zuoBqsqdPoAhfg==", - "license": "GPL-2.0-or-later", - "dependencies": { - "lodash-es": "4.17.21" - } - }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -10483,15 +10100,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "license": "MIT" }, - "node_modules/color-parse": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-1.4.2.tgz", - "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==", - "license": "MIT", - "dependencies": { - "color-name": "^1.0.0" - } - }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -17058,12 +16666,6 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "license": "MIT" }, - "node_modules/lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", - "license": "MIT" - }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -22511,6 +22113,12 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/tinymce": { + "version": "8.2.2", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-8.2.2.tgz", + "integrity": "sha512-CFDSZwciMvFGW2czK/Xig1HcOGpXI0qcQMIqaIcG2F4RuuTdf+LQTreyEZunAJoFTQ9L0KAugOqL7OA5TJkoAA==", + "license": "GPL-2.0-or-later" + }, "node_modules/tldts": { "version": "6.1.86", "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz", @@ -23262,12 +22870,6 @@ "node": "^18.17.0 || >=20.5.0" } }, - "node_modules/vanilla-colorful": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz", - "integrity": "sha512-z2YZusTFC6KnLERx1cgoIRX2CjPRP0W75N+3CC6gbvdX5Ch47rZkEMGO2Xnf+IEmi3RiFLxS18gayMA27iU7Kg==", - "license": "MIT" - }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 064105777..2274e9ca2 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,6 @@ "@angular/platform-browser": "19.2.14", "@angular/platform-browser-dynamic": "19.2.14", "@angular/router": "19.2.14", - "@ckeditor/ckeditor5-angular": "6.0.1", - "@ckeditor/ckeditor5-build-classic": "40.2.0", "@fortawesome/angular-fontawesome": "^1.0.0", "@fortawesome/fontawesome-free": "^6.7.2", "@fortawesome/fontawesome-svg-core": "6.2.1", @@ -54,6 +52,7 @@ "@ngx-translate/http-loader": "^16.0.1", "@swimlane/ngx-graph": "^10.0.0", "@tailwindcss/forms": "^0.5.4", + "@tinymce/tinymce-angular": "^9.1.1", "chart.js": "^4.5.1", "d3": "^7.9.0", "exceljs": "^4.4.0", @@ -64,6 +63,7 @@ "moment": "^2.29.4", "ngx-mat-select-search": "^7.0.10", "rxjs": "7.8.1", + "tinymce": "^8.2.2", "tslib": "^2.0.0", "vkbeautify": "^0.99.3", "zone.js": "0.15.1" diff --git a/src/app/templates/create-edit-template/create-edit-template.component.html b/src/app/templates/create-edit-template/create-edit-template.component.html index a13e811ee..a0f6f93d2 100644 --- a/src/app/templates/create-edit-template/create-edit-template.component.html +++ b/src/app/templates/create-edit-template/create-edit-template.component.html @@ -81,15 +81,17 @@
-
diff --git a/src/app/templates/create-edit-template/create-edit-template.component.ts b/src/app/templates/create-edit-template/create-edit-template.component.ts index bfc1b0e80..6be373166 100644 --- a/src/app/templates/create-edit-template/create-edit-template.component.ts +++ b/src/app/templates/create-edit-template/create-edit-template.component.ts @@ -9,16 +9,13 @@ import { } from '@angular/forms'; import { Router, ActivatedRoute, RouterLink } from '@angular/router'; -/** CKEditor5 Imports */ -import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; - /** Custom Imports */ import { clientParameterLabels, loanParameterLabels, repaymentParameterLabels } from '../template-parameter-labels'; /** Custom Services */ import { TemplatesService } from '../templates.service'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; -import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; +import { EditorComponent, EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; import { MatAccordion, MatExpansionPanel, @@ -37,18 +34,37 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; imports: [ ...STANDALONE_SHARED_IMPORTS, FaIconComponent, - CKEditorModule, + EditorModule, MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle + ], + providers: [ + { + provide: TINYMCE_SCRIPT_SRC, + useValue: 'assets/tinymce/tinymce.min.js' + } ] }) export class CreateEditComponent implements OnInit { - /** CKEditor5 */ - public Editor = ClassicEditor; - /** CKEditor5 Template Reference */ - @ViewChild('ckEditor', { static: true }) ckEditor: any; + /** TinyMCE instance configuration */ + tinymceConfig = { + base_url: 'assets/tinymce', + suffix: '.min', + menubar: false, + branding: false, + height: 320, + forced_root_block: false, + statusbar: false, + elementpath: false, + resize: false, + plugins: 'lists link table media codesample', + toolbar: + 'undo redo | blocks | bold italic underline | link | numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | table media | removeformat' + }; + /** TinyMCE component reference */ + @ViewChild('tinymceEditor', { static: false }) tinymceEditor: EditorComponent; /** Template form. */ templateForm: UntypedFormGroup; @@ -166,6 +182,7 @@ export class CreateEditComponent implements OnInit { }); } this.setEditorContent(''); + this.templateForm.get('text').setValue(''); }); if (this.mode === 'create') { this.templateForm.get('entity').patchValue(0); @@ -192,44 +209,31 @@ export class CreateEditComponent implements OnInit { } /** - * Adds text to CKEditor at cursor position. + * Adds text to the editor at cursor position. * @param {string} label Template parameter label. */ addText(label: string) { - if (this.ckEditor && this.ckEditor.editorInstance) { - this.ckEditor.editorInstance.model.change((writer: any) => { - const insertPosition = this.ckEditor.editorInstance.model.document.selection.getFirstPosition(); - writer.insertText(label, insertPosition); - }); - } + this.tinymceEditor?.editor?.insertContent(label); } /** - * Gets the contents of CKEditor. + * Gets the contents of the editor. */ getEditorContent() { - if (this.ckEditor && this.ckEditor.editorInstance) { - return this.ckEditor.editorInstance.getData(); - } - return ''; + return this.tinymceEditor?.editor?.getContent({ format: 'html' }) || ''; } /** - * Sets the contents of CKEditor. + * Sets the contents of the editor. * @param {string} content Editor Content */ setEditorContent(content: string) { - if (this.ckEditor && this.ckEditor.editorInstance) { - return this.ckEditor.editorInstance.setData(content); + if (this.tinymceEditor?.editor) { + this.tinymceEditor.editor.setContent(content || ''); } return ''; } - onEditorChange(event: any) { - const editorContent = event.editor.getData(); - this.templateForm.get('text').setValue(editorContent); - } - /** * Submits a template. */ diff --git a/src/app/templates/templates.module.ts b/src/app/templates/templates.module.ts index 03ada4a8e..fd28ec0b3 100644 --- a/src/app/templates/templates.module.ts +++ b/src/app/templates/templates.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; /** Custom Modules */ -import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; +import { EditorModule } from '@tinymce/tinymce-angular'; import { SharedModule } from '../shared/shared.module'; import { DirectivesModule } from '../directives/directives.module'; import { TemplatesRoutingModule } from './templates-routing.module'; @@ -19,7 +19,7 @@ import { CreateEditComponent } from './create-edit-template/create-edit-template */ @NgModule({ imports: [ - CKEditorModule, + EditorModule, SharedModule, DirectivesModule, TemplatesRoutingModule, diff --git a/src/typings.d.ts b/src/typings.d.ts index 032cc380c..74f54beda 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -43,9 +43,3 @@ interface Window { } declare module 'chart.js'; - -declare module '@ckeditor/ckeditor5-build-classic' { - const ClassicEditorBuild: any; - - export = ClassicEditorBuild; -}