INT-3324: Update dependencies and move tinymce to be an optional peer…

… dependency (#395)

* INT-3324: Move tinymce to be a optional peer dependency

* INT-3324: Move tinymce in the root `package.json` to dev dependencies

* INT-3324: Import tinymce types only

* INT-3324: Added a check before using deprecated TinyMCE mode API

This is needed now as tinymce dev dep is at v7

* INT-3324: Add package lock file

* INT-3324: Add changelog entries

* INT-3324: Updated dependencies to latest

* INT-3324: Added another changelog entry

CHANGELOG.md

@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Fixed
+- Updated dependencies. #INT-3324
+
+### Changed
+- Moved tinymce dependency to be a optional peer dependency. #INT-3324
+- Updated tinymce dev dependency to version ^7 from 5.10.7 so now all internal tinymce types point to version 7. #INT-3324
+
 ## 8.0.1 - 2024-07-12
 
 ### Fixed

package.json

@@ -15,36 +15,36 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.1",
-    "@angular-devkit/core": "^17.3.1",
-    "@angular/animations": "^17.3.1",
-    "@angular/cdk": "^17.3.1",
-    "@angular/cli": "^17.3.1",
-    "@angular/common": "^17.3.1",
-    "@angular/compiler": "^17.3.1",
-    "@angular/compiler-cli": "^17.3.1",
-    "@angular/core": "^17.3.1",
-    "@angular/forms": "^17.3.1",
-    "@angular/language-service": "^17.3.1",
-    "@angular/material": "^17.3.1",
-    "@angular/platform-browser": "^17.3.1",
-    "@angular/platform-browser-dynamic": "^17.3.1",
-    "@babel/core": "^7.24.3",
+    "@angular-devkit/build-angular": "^18.1.1",
+    "@angular-devkit/core": "^18.1.1",
+    "@angular/animations": "^18.1.1",
+    "@angular/cdk": "^18.1.1",
+    "@angular/cli": "^18.1.1",
+    "@angular/common": "^18.1.1",
+    "@angular/compiler": "^18.1.1",
+    "@angular/compiler-cli": "^18.1.1",
+    "@angular/core": "^18.1.1",
+    "@angular/forms": "^18.1.1",
+    "@angular/language-service": "^18.1.1",
+    "@angular/material": "^18.1.1",
+    "@angular/platform-browser": "^18.1.1",
+    "@angular/platform-browser-dynamic": "^18.1.1",
+    "@babel/core": "^7.24.9",
     "@ephox/agar": "^8.0.1",
     "@ephox/bedrock-client": "^14.1.1",
     "@ephox/bedrock-server": "^14.1.3",
     "@ephox/sugar": "^9.3.1",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/angular": "^8.0.4",
-    "@storybook/blocks": "^8.0.4",
-    "@storybook/test": "^8.0.4",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-links": "^8.2.5",
+    "@storybook/angular": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/test": "^8.2.5",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^2.3.1",
     "@tinymce/miniature": "^6.0.0",
     "@types/chai": "^4.3.16",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.14.12",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "chai": "^5.1.1",
@@ -55,26 +55,24 @@
     "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^6.1.0",
     "json": "11.0.0",
-    "ng-packagr": "^17.3.0",
+    "ng-packagr": "^18.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
-    "storybook": "^8.0.4",
+    "storybook": "^8.2.5",
+    "tinymce": "^7",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
-    "typescript": "~5.4.3",
-    "webpack": "^5.91.0",
-    "zone.js": "~0.14.4"
+    "typescript": "~5.5.4",
+    "webpack": "^5.93.0",
+    "zone.js": "~0.14.8"
   },
-  "dependencies": {
-    "tinymce": "^5.10.7"
-  },
-  "version": "8.0.2-rc",
+  "version": "9.0.0-rc",
   "name": "@tinymce/tinymce-angular"
 }

tinymce-angular-component/package.json

@@ -10,9 +10,12 @@
     "@angular/core": ">=16.0.0",
     "@angular/common": ">=16.0.0",
     "@angular/forms": ">=16.0.0",
-    "rxjs": "^7.4.0"
-  },
-  "dependencies": {
+    "rxjs": "^7.4.0",
     "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.0"
+  },
+  "peerDependenciesMeta": {
+    "tinymce": {
+      "optional": true
+    }
   }
 }

tinymce-angular-component/src/main/ts/editor/Events.ts

@@ -1,5 +1,5 @@
 import { Output, EventEmitter, Directive } from '@angular/core';
-import { Editor as TinyMCEEditor } from 'tinymce';
+import type { Editor as TinyMCEEditor } from 'tinymce';
 
 export interface EventObj<T> {
   event: T;

tinymce-angular-component/src/main/ts/editor/editor.component.ts

@@ -21,7 +21,7 @@ import { getTinymce } from '../TinyMCE';
 import { listenTinyMCEEvent, bindHandlers, isTextarea, mergePlugins, uuid, noop, isNullOrUndefined } from '../utils/Utils';
 import { EventObj, Events } from './Events';
 import { ScriptLoader } from '../utils/ScriptLoader';
-import { Editor as TinyMCEEditor, TinyMCE } from 'tinymce';
+import type { Editor as TinyMCEEditor, TinyMCE } from 'tinymce';
 
 type EditorOptions = Parameters<TinyMCE['init']>[0];
 
@@ -70,7 +70,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
     if (this._editor && this._editor.initialized) {
       if (typeof this._editor.mode?.set === 'function') {
         this._editor.mode.set(val ? 'readonly' : 'design');
-      } else {
+      } else if ('setMode' in this._editor && typeof this._editor.setMode === 'function') {
         this._editor.setMode(val ? 'readonly' : 'design');
       }
     }

tinymce-angular-component/src/test/ts/alien/TestHelpers.ts

@@ -5,7 +5,7 @@ import { Attribute, Remove, SelectorFilter, SugarElement } from '@ephox/sugar';
 import { ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { EditorComponent } from '../../../main/ts/editor/editor.component';
-import { Editor } from 'tinymce';
+import type { Editor } from 'tinymce';
 import { Keyboard, Keys } from '@ephox/agar';
 
 export const apiKey = Fun.constant('qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc');

tinymce-angular-component/src/test/ts/alien/TestHooks.ts

@@ -8,7 +8,7 @@ import { Optional, Singleton } from '@ephox/katamari';
 import { VersionLoader } from '@tinymce/miniature';
 import { deleteTinymce, throwTimeout } from './TestHelpers';
 import { FormsModule, ReactiveFormsModule, NgModel } from '@angular/forms';
-import { Editor } from 'tinymce';
+import type { Editor } from 'tinymce';
 
 export const fixtureHook = <T = unknown>(component: Type<T>, moduleDef: TestModuleMetadata) => {
   before(async () => {

tinymce-angular-component/src/test/ts/browser/FormControlTest.ts

@@ -9,7 +9,7 @@ import { EditorComponent } from '../../../main/ts/public_api';
 import { eachVersionContext, editorHook, fixtureHook } from '../alien/TestHooks';
 import { By } from '@angular/platform-browser';
 import { first, firstValueFrom, switchMap } from 'rxjs';
-import { Editor } from 'tinymce';
+import type { Editor } from 'tinymce';
 import { fakeTypeInEditor } from '../alien/TestHelpers';
 
 type FormControlProps = Partial<Record<'touched' | 'pristine' | 'dirty' | 'valid', boolean>>;

tinymce-angular-component/src/test/ts/browser/LoadTinyTest.ts

@@ -7,7 +7,7 @@ import { Global } from '@ephox/katamari';
 import { EditorComponent, TINYMCE_SCRIPT_SRC } from '../../../main/ts/public_api';
 import { Version } from '../../../main/ts/editor/editor.component';
 import { editorHook, tinymceVersionHook } from '../alien/TestHooks';
-import { Editor } from 'tinymce';
+import type { Editor } from 'tinymce';
 import { deleteTinymce } from '../alien/TestHelpers';
 
 describe('LoadTinyTest', () => {

tinymce-angular-component/src/test/ts/browser/PropTest.ts

@@ -9,7 +9,7 @@ import { captureLogs, throwTimeout } from '../alien/TestHelpers';
 import { concatMap, distinct, firstValueFrom, mergeMap, of, toArray } from 'rxjs';
 import { ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Editor } from 'tinymce';
+import type { Editor } from 'tinymce';
 import { expect } from 'chai';
 import { Fun } from '@ephox/katamari';
 import { Waiter } from '@ephox/agar';