INT-3359: Support jquery 4 (#30)

* INT-3359: Support jQuery v4

* Use jquery 4 in storybook

* Upgrade storybook to v10

* Update type checking

* Update storybook

* Add changelog

* Fix invalid typescript option

* Add lint rules for storybook

* Re-add the baseUrl config which is needed for bedrock webpack

* Unwrap setupIntegration in jqAppendTest

* Remove a heading

* Undo change to fix test failing

* Use jquery 4 in test

* Attempt to fix test

* Fix tests keeping timeout before tinymce being loaded

* Remove gpl license key

* Add license key gpl to tests which uses self-hosted tinymce

* Bump the minor version

* Remove unnecessary test

* Fix lint

* Use local tinymce

* Disabled jqAppentest

* Fix flaky tests in OriginalTest

* Another attempt to fix test

* fix lint

* Another fix

* Stack trace any error

* lint

* Undo some changes

* Another attempt

* Remove all try catches

* Strip more try/catch

* Use different predicate

* Undo jquery restrictin

* Skip some tests to try out

* Update bedrock and clean up dom after each test

* Update bedrock and clean up dom after each test

* fix lint

* Re-add try/final blocks

* Another lint fix

Author: tiny-ben-tran

.storybook/main.js

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs"
+  ],
+  framework: {
+    "name": "@storybook/html-vite",
+    "options": {}
+  },
+  async viteFinal(config) {
+    return config;
+  }
+};
+
+export default config;

.storybook/main.ts

@@ -1,8 +1,5 @@
 <!-- load jQuery -->
-<script
-  src="https://code.jquery.com/jquery-3.6.0.min.js"
-  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
-  crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-4.0.0.js" integrity="sha256-9fsHeVnKBvqh3FB2HYu7g2xseAZ5MlN6Kz/qnkASV8U=" crossorigin="anonymous"></script>
 <!-- load TinyMCE -->
 <script
   src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js"

.storybook/preview-head.html

@@ -1,5 +1,4 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

.storybook/preview.js

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "nodenext",
+    "target": "es6",
+    "module": "nodenext",
+     "lib": ["es2015", "dom"],
+     "types": ["jquery"]
+    },
+  "include": [
+    "../src/**/*",
+    "../.storybook/**/*"
+  ]
+}

.storybook/tsconfig.json

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Updated to support jQuery 4. #INT-3359
+
 ## 2.2.0 - 2025-10-16
 
 ### Fixed

CHANGELOG.md

@@ -23,4 +23,4 @@ Have you found an issue with tinymce-jquery or do you have a feature request?
 Open up an [issue](https://github.com/tinymce/tinymce-jquery/issues) and let us
 know or submit a [pull request](https://github.com/tinymce/tinymce-jquery/pulls).
 *Note: For issues concerning TinyMCE please visit the
-[TinyMCE repository](https://github.com/tinymce/tinymce).*
+[TinyMCE repository](https://github.com/tinymce/tinymce).*

README.md

@@ -21,6 +21,25 @@ export default defineConfig([
       },
     },
     rules: {}
+  },
+    {
+    files: [
+      ".storybook/*.ts",
+      "src/stories/**/*.ts"
+    ],
+    plugins: {
+        "@tinymce": tinymceEslintPlugin
+    },
+    extends: [ '@tinymce/standard' ],
+    languageOptions: {
+      parserOptions: {
+        sourceType: "module",
+        project: [
+            ".storybook/tsconfig.json"
+        ]
+      },
+    },
+    rules: {}
   },
   {
     files: [

eslint.config.mjs

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-jquery",
-  "version": "2.2.1-rc",
+  "version": "2.3.0-rc",
   "description": "Official TinyMCE integration for jQuery",
   "main": "dist/tinymce-jquery.js",
   "files": [
@@ -19,49 +19,43 @@
     "test-manual": "bedrock -d src/test/ts",
     "build": "yarn run clean && tsc -p ./tsconfig.json && rollup -c rollup.config.js",
     "lint": "eslint src",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy-storybook": "yarn storybook-to-ghpages --source-branch=main"
   },
   "repository": "https://github.com/tinymce/tinymce-jquery",
   "author": "Tiny Technologies",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.21.3",
     "@ephox/agar": "^7.4.1",
-    "@ephox/bedrock-client": "^14.0.0",
-    "@ephox/bedrock-server": "^14.0.0",
+    "@ephox/bedrock-client": "^16.0.0",
+    "@ephox/bedrock-server": "^16.2.0",
     "@ephox/katamari": "^9.1.5",
     "@ephox/mcagar": "^8.3.2",
     "@ephox/sand": "^6.0.9",
     "@ephox/sugar": "^9.2.1",
     "@ephox/swag": "^4.6.0",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/html": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-links": "^10.0.0",
+    "@storybook/html": "^10.0.0",
+    "@storybook/html-vite": "^10.0.0",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/testing-library": "^0.0.13",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^3.0.0",
-    "@types/jquery": "^3.5.16",
-    "@types/react": "^17.0.0",
-    "babel-loader": "^8.3.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "@types/jquery": "^4.0.0",
     "rimraf": "^4.4.1",
     "rollup": "^3.20.2",
-    "tinymce": "^8.0.1",
+    "storybook": "^10.0.0",
+    "tinymce": "^8.5.1",
     "tslib": "^2.5.0",
     "typescript": "^5.9.3",
-    "webpack": "^5.9.0"
+    "vite": "^8.0.0",
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "dependencies": {},
   "resolutions": {
-    "@types/node": "^16"
+    "@types/node": "^16",
+    "jquery": "^4.0.0"
   }
 }

package.json

@@ -5,8 +5,8 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Page Title</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
-  <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
-  <script src='../../../dist/tinymce-min.js'></script>
+  <script src="https://code.jquery.com/jquery-4.0.0.js" integrity="sha256-9fsHeVnKBvqh3FB2HYu7g2xseAZ5MlN6Kz/qnkASV8U=" crossorigin="anonymous"></script>
+  <script src='../../../dist/tinymce-jquery.js'></script>
 </head>
 <body>
   <textarea></textarea>