diff --git a/apps/octra/project.json b/apps/octra/project.json index 0815db061..d789d57c7 100644 --- a/apps/octra/project.json +++ b/apps/octra/project.json @@ -32,6 +32,7 @@ ], "styles": [ "node_modules/video.js/dist/video-js.min.css", + "node_modules/jodit/es2021/jodit.min.css", "apps/octra/src/styles.scss" ], "scripts": [ diff --git a/apps/octra/src/app/app.shared.module.ts b/apps/octra/src/app/app.shared.module.ts index b4834d427..57884761c 100644 --- a/apps/octra/src/app/app.shared.module.ts +++ b/apps/octra/src/app/app.shared.module.ts @@ -22,7 +22,7 @@ import { OctraUtilitiesModule } from '@octra/ngx-utilities'; import { SignupComponent } from './core/component/authentication-component/signup/signup.component'; import { TranslocoModule } from '@ngneat/transloco'; import { TranscrOverviewComponent } from './core/component/transcr-overview'; -import { NgxJoditModule } from 'ngx-jodit'; +import { NgxJoditComponent } from 'ngx-jodit'; import { ValidationPopoverComponent } from './core/component/transcr-editor/validation-popover/validation-popover.component'; @NgModule({ @@ -49,7 +49,7 @@ import { ValidationPopoverComponent } from './core/component/transcr-editor/vali OctraUtilitiesModule, TranslocoModule, NgbToast, - NgxJoditModule, + NgxJoditComponent, ], exports: [ AsrOptionsComponent, diff --git a/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts b/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts index 16a2b4e2c..7ed406653 100644 --- a/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts +++ b/apps/octra/src/app/core/component/transcr-editor/transcr-editor.component.ts @@ -30,8 +30,7 @@ import { Subscription, timer } from 'rxjs'; import { NgxJoditComponent } from 'ngx-jodit'; import { DefaultComponent } from '../default.component'; import { Config } from 'jodit/types/config'; -import { IControlType } from 'jodit/src/types'; -import { IJodit, IToolbarButton } from 'jodit/types/types'; +import { IControlType, IJodit, IToolbarButton } from 'jodit/types/types'; import { OctraAnnotationSegment } from '@octra/annotation'; import { AnnotationStoreService } from '../../store/login-mode/annotation/annotation.store.service'; import { OctraGuidelines } from '@octra/assets'; @@ -424,9 +423,6 @@ export class TranscrEditorComponent this.joditOptions = { ...this.joditDefaultOptions, - showCharsCounter: false, - showWordsCounter: false, - showXPathInStatusbar: false, disablePlugins: 'add-new-line,image-processor,image-properties,image,video,media,file,resize-cells,select-cells,' + 'table-keyboard-navigation,table,preview,print,about,drag-and-drop,iframe,indent,inline-popup,' + @@ -780,33 +776,30 @@ export class TranscrEditorComponent data: { active: false, }, - getContent: (a, b, c) => { - if (!this.initialized) { - const content = getContent(); - - const button = document.createElement('span'); - button.setAttribute('class', 'me-2 align-items-center px-1 h-100'); - if (typeof content === 'string') { - button.innerHTML = getContent(); - if (events?.onClick) { - button.addEventListener('click', (event: MouseEvent) => { - events!.onClick!(event, button); - }); - } - } else { - button.appendChild(content); + getContent: (a: IJodit, b: IToolbarButton) => { + const content = getContent(); + + const button = document.createElement('span'); + button.setAttribute('class', 'me-2 align-items-center px-1 h-100'); + if (typeof content === 'string') { + button.innerHTML = getContent(); + if (events?.onClick) { + button.addEventListener('click', (event: MouseEvent) => { + events!.onClick!(event, button); + }); } - - return button; + } else { + button.appendChild(content); } - return c.container.children[0]; + + return button; }, - isActive: function (editor, btn) { + /* isActive: function (editor, btn) { if (btn.data) { return btn.data['active']; } return false; - }, + },*/ tooltip, hotkeys, }; diff --git a/apps/octra/src/styles.scss b/apps/octra/src/styles.scss index d8a1e8c7f..400a05ca9 100644 --- a/apps/octra/src/styles.scss +++ b/apps/octra/src/styles.scss @@ -1,6 +1,5 @@ @import 'bootstrap/scss/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons'; -@import 'jodit/build/jodit.min.css'; .btn.btn-success { color: #fff; diff --git a/package-lock.json b/package-lock.json index 7cdd77a51..4af52c58d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,12 +44,12 @@ "hammerjs": "^2.0.8", "hotkeys-js": "^3.12.0", "immer": "^9.0.21", - "jodit": "^3.24.9", + "jodit": "^4.0.1", "konva": "^9.2.2", "luxon": "^3.0.4", "modernizr": "^3.12.0", "ngrx-wieder": "^11.0.0", - "ngx-jodit": "^1.0.8", + "ngx-jodit": "^3.0.1", "ngx-webstorage": "^12.0.0", "node-ssh": "^13.0.0", "platform": "^1.3.6", @@ -12067,16 +12067,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/core-js": { - "version": "3.33.3", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz", - "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==", - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-js-compat": { "version": "3.33.3", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.3.tgz", @@ -18415,12 +18405,11 @@ "dev": true }, "node_modules/jodit": { - "version": "3.24.9", - "resolved": "https://registry.npmjs.org/jodit/-/jodit-3.24.9.tgz", - "integrity": "sha512-t2d73v7GFbGI08ZzdCTwrzi8ZtoOG4icGzD6IIN2e+ghlpUKYxcHZ/Rmy6/mc6055172z+tv7QSr9BcOz6IOFQ==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/jodit/-/jodit-4.0.1.tgz", + "integrity": "sha512-lZzPWVa2kpAVknOoA46kISrDs7mFMmOYtDQSF/6/CM0btruLyIJDJQ3hxfGv9nZpAz7y3zW8zCmXtulgtazFKQ==", "dependencies": { - "autobind-decorator": "^2.4.0", - "core-js": "^3.28.0" + "autobind-decorator": "^2.4.0" } }, "node_modules/js-tokens": { @@ -20169,16 +20158,16 @@ } }, "node_modules/ngx-jodit": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/ngx-jodit/-/ngx-jodit-1.0.8.tgz", - "integrity": "sha512-/B8NsptJP9Omab1B3PhmjG2JOteem1YjqYJWMwwP/OnXHTDRhPnP9sjuxCMA2P71qQPWEQ0MsP0Yo+RiJXvSlQ==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ngx-jodit/-/ngx-jodit-3.0.1.tgz", + "integrity": "sha512-bDv4DHeFN75nryUtDgw9YvENdS2MHSx0MgncOzXSBhp/2a+zIoeoBHRZXiiMXz6C8Zf2leBbGwldpKF3bh2Leg==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": ">=12.0.0", - "@angular/core": ">=12.0.0", - "jodit": ">=3.7.2" + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0", + "jodit": "^4.0.0" } }, "node_modules/ngx-webstorage": { diff --git a/package.json b/package.json index 3afc64d53..569dd020d 100644 --- a/package.json +++ b/package.json @@ -92,12 +92,12 @@ "hammerjs": "^2.0.8", "hotkeys-js": "^3.12.0", "immer": "^9.0.21", - "jodit": "^3.24.9", + "jodit": "^4.0.1", "konva": "^9.2.2", "luxon": "^3.0.4", "modernizr": "^3.12.0", "ngrx-wieder": "^11.0.0", - "ngx-jodit": "^1.0.8", + "ngx-jodit": "^3.0.1", "ngx-webstorage": "^12.0.0", "node-ssh": "^13.0.0", "platform": "^1.3.6",