From ce30d3ae56aee24b1d82f69944f58cd97d1bcbe1 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Wed, 19 Aug 2026 14:24:18 +0200 Subject: [PATCH] Migrated from TinyMCE editor to Hugerte --- ui-ngx/angular.json | 4 +-- ui-ngx/package.json | 5 ++- .../mobile/common/editor-panel.component.ts | 7 ++-- .../sent/sent-notification-dialog.componet.ts | 5 ++- ...cation-template-configuration.component.ts | 7 ++-- ui-ngx/src/app/shared/shared.module.ts | 6 ++-- ui-ngx/src/styles.scss | 4 +-- ui-ngx/yarn.lock | 33 +++++++++++-------- 8 files changed, 36 insertions(+), 35 deletions(-) diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json index 007af200ba..08ffdd7b9a 100644 --- a/ui-ngx/angular.json +++ b/ui-ngx/angular.json @@ -74,8 +74,8 @@ }, { "glob": "**/*", - "input": "node_modules/tinymce", - "output": "/assets/tinymce/" + "input": "node_modules/hugerte", + "output": "/assets/hugerte/" }, { "glob": "marker-icon-2x.png", diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 1a0eb050ab..a4ae6d7a6a 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -37,8 +37,8 @@ "@ngx-translate/core": "^17.0.0", "@svgdotjs/svg.filter.js": "^3.0.9", "@svgdotjs/svg.js": "3.2.4", + "@hugerte/hugerte-angular": "^1.1.1", "@svgdotjs/svg.panzoom.js": "^2.1.2", - "@tinymce/tinymce-angular": "^8.0.1", "ace-builds": "1.43.6", "ace-diff": "^3.3.0", "angular-gridster2": "~20.2.4", @@ -51,6 +51,7 @@ "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master", "font-awesome": "^4.7.0", "html2canvas": "^1.4.1", + "hugerte": "^1.0.12", "jquery": "^3.7.1", "jquery.terminal": "^2.45.2", "js-beautify": "1.15.4", @@ -87,7 +88,6 @@ "split.js": "^1.6.5", "systemjs": "6.15.1", "tinycolor2": "^1.6.0", - "tinymce": "~6.8.6", "tooltipster": "^4.2.8", "tslib": "^2.8.1", "typeface-roboto": "^1.1.13", @@ -138,7 +138,6 @@ }, "resolutions": { "ace-builds": "1.43.6", - "tinymce": "6.8.6", "@babel/core": "7.28.3", "esbuild": "0.28.1", "vite": "7.3.5", diff --git a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts b/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts index dbc1a5d9c8..5232162ec3 100644 --- a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts +++ b/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts @@ -17,7 +17,7 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; import { TbPopoverComponent } from '@shared/components/popover.component'; -import { EditorOptions } from 'tinymce'; +import { EditorOptions } from 'hugerte'; @Component({ selector: 'tb-release-notes-panel', @@ -46,7 +46,7 @@ export class EditorPanelComponent implements OnInit { editorControl: FormControl; tinyMceOptions: Partial = { - base_url: '/assets/tinymce', + base_url: '/assets/hugerte', suffix: '.min', plugins: ['link', 'table', 'image', 'lists', 'fullscreen'], menubar: 'edit insert view format', @@ -56,11 +56,10 @@ export class EditorPanelComponent implements OnInit { height: 400, autofocus: false, branding: false, - promotion: false, resize: false, setup: (editor) => { editor.on('PostRender', function() { - const container = document.querySelector('.tox.tox-tinymce-aux'); + const container = document.querySelector('.tox.tox-hugerte-aux'); const styleSheet = document.createElement('style'); styleSheet.innerText = ` .tox-tiered-menu .tox-menu { diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts index eec70df210..7ab522b651 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts +++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts @@ -79,7 +79,7 @@ export class SentNotificationDialogComponent extends showRefresh = false; tinyMceOptions: Record = { - base_url: '/assets/tinymce', + base_url: '/assets/hugerte', suffix: '.min', plugins: ['autoresize'], menubar: false, @@ -90,11 +90,10 @@ export class SentNotificationDialogComponent extends height: 400, autofocus: false, branding: false, - promotion: false, setup: (ed) => { ed.on('PreInit', () => { const document = $(ed.iframeElement.contentDocument); - const body = $('#tinymce', document); + const body = $('#hugerte', document); body.attr({contenteditable: false}); body.css('pointerEvents', 'none'); body.css('userSelect', 'none'); diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts index 4a4f11d40b..971d36d0c3 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts @@ -37,7 +37,7 @@ import { Subject } from 'rxjs'; import { deepClone, isDefinedAndNotNull } from '@core/utils'; import { coerceBoolean } from '@shared/decorators/coercion'; import { TranslateService } from '@ngx-translate/core'; -import { EditorOptions } from 'tinymce'; +import { EditorOptions } from 'hugerte'; @Component({ selector: 'tb-template-configuration', @@ -84,7 +84,7 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co readonly NotificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap; tinyMceOptions: Partial = { - base_url: '/assets/tinymce', + base_url: '/assets/hugerte', suffix: '.min', plugins: ['link', 'table', 'image', 'lists', 'code', 'fullscreen'], menubar: 'edit insert tools view format table', @@ -95,10 +95,9 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co height: 400, autofocus: false, branding: false, - promotion: false, setup: (editor) => { editor.on('PostRender', function() { - const container = document.querySelector('.tox.tox-tinymce-aux'); + const container = document.querySelector('.tox.tox-hugerte-aux'); const styleSheet = document.createElement('style'); styleSheet.innerText = ` .tox-tiered-menu .tox-menu { diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index d5073332d2..5fcf5ace8a 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -64,7 +64,7 @@ import { ShareButtonDirective } from 'ngx-sharebuttons'; import { HotkeyModule } from 'angular2-hotkeys'; import { ColorPickerModule } from '@iplab/ngx-color-picker'; import { NgxHmCarouselComponent, NgxHmCarouselDynamicDirective, NgxHmCarouselItemDirective } from 'ngx-hm-carousel'; -import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; +import { EditorModule, HUGERTE_SCRIPT_SRC } from '@hugerte/hugerte-angular'; import { UserMenuComponent } from '@shared/components/user-menu.component'; import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive'; import { ContextMenuDirective } from '@shared/directives/context-menu.directive'; @@ -258,8 +258,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) useValue: Flow }, { - provide: TINYMCE_SCRIPT_SRC, - useValue: 'assets/tinymce/tinymce.min.js' + provide: HUGERTE_SCRIPT_SRC, + useValue: 'assets/hugerte/hugerte.min.js' }, { provide: MAT_DATE_LOCALE, diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 00e051c497..79a54bbebe 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -1227,9 +1227,9 @@ pre.tb-highlight { white-space: pre-line; } - // TinyMCE + // HugeRTE - .tox-tinymce { + .tox-hugerte { button:not(.mat-mdc-menu-item):not(.mat-sort-header-button) { text-transform: none; } diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 2f755ff7e5..c7bd75c298 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -1614,6 +1614,19 @@ resolved "https://registry.yarnpkg.com/@hono/node-server/-/node-server-1.19.11.tgz#dc419f0826dd2504e9fc86ad289d5636a0444e2f" integrity sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g== +"@hugerte/framework-integration-shared@^1.0.1": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@hugerte/framework-integration-shared/-/framework-integration-shared-1.2.0.tgz#75f04e4249bbb2c314d1f7a962b9c2f5fed7db80" + integrity sha512-ogcvVO0dFcb/HQAY7itj8xnmeMcHZmtMaOj9uC34ZYopnvj12TGWnfRQwbt8jZMlmoZk2z1TTLmJgvQBuH013A== + +"@hugerte/hugerte-angular@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@hugerte/hugerte-angular/-/hugerte-angular-1.1.1.tgz#08b2c963d66d7a754e8cd4884b9111ca166781e7" + integrity sha512-ubh6ZG3+dU6g3BkS2ZHx0FO46nti6N2CpN2gG/URFtF+pau/V59N94E7w7+8VeoPjqsFRpjB6zefRGNUoTJLOA== + dependencies: + "@hugerte/framework-integration-shared" "^1.0.1" + tslib "^2.3.0" + "@humanfs/core@^0.19.1": version "0.19.1" resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77" @@ -2824,14 +2837,6 @@ dependencies: "@svgdotjs/svg.js" "^3.0.16" -"@tinymce/tinymce-angular@^8.0.1": - version "8.0.1" - resolved "https://registry.yarnpkg.com/@tinymce/tinymce-angular/-/tinymce-angular-8.0.1.tgz#a17b4a5bef87d563e63dc442ffeb4b82d2137da3" - integrity sha512-m0/ne5nL00YeZ7wCyhBVwKUbvS8fQZ+S+T5pinqTIqTUKpcfIC2+BIKqzUpS+niiRCowFoZl5eVlI5zdFN9/0A== - dependencies: - tinymce "^7.0.0 || ^6.0.0 || ^5.5.0" - tslib "^2.3.0" - "@tsconfig/node10@^1.0.7": version "1.0.11" resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.11.tgz#6ee46400685f130e278128c7b38b7e031ff5b2f2" @@ -6689,6 +6694,11 @@ https-proxy-agent@7.0.6, https-proxy-agent@^7.0.1: agent-base "^7.1.2" debug "4" +hugerte@^1.0.12: + version "1.0.12" + resolved "https://registry.yarnpkg.com/hugerte/-/hugerte-1.0.12.tgz#84337116bd7e76c39e851a51d5dc0214af9882b8" + integrity sha512-/JDCdJy1C83a7+RjlfWx6EjRvxqmmHFA5Pzcq8Y0ngdBESiC+2xa4ogsqnRPeadF04Cs95YfTd1SKquDdksjRw== + hyperdyperid@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hyperdyperid/-/hyperdyperid-1.2.0.tgz#59668d323ada92228d2a869d3e474d5a33b69e6b" @@ -8059,7 +8069,7 @@ mz@^2.7.0: object-assign "^4.0.1" thenify-all "^1.0.0" -nanoid@^3.3.11, nanoid@^3.3.16: +nanoid@^3.3.16: version "3.3.18" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.18.tgz#f66a2de1199ffde0fcf21c8a5f13106b1c081913" integrity sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w== @@ -10199,11 +10209,6 @@ tinyglobby@^0.2.11, tinyglobby@^0.2.12, tinyglobby@^0.2.15: fdir "^6.5.0" picomatch "^4.0.3" -tinymce@6.8.6, "tinymce@^7.0.0 || ^6.0.0 || ^5.5.0", tinymce@~6.8.6: - version "6.8.6" - resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.6.tgz#799e4f03eeb4399399dfdeb12ba17b3b91887adf" - integrity sha512-++XYEs8lKWvZxDCjrr8Baiw7KiikraZ5JkLMg6EdnUVNKJui0IsrAADj5MsyUeFkcEryfn2jd3p09H7REvewyg== - tinyqueue@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"