INT-3359: Support jquery 4

.storybook/main.ts

@@ -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/preview-head.html

@@ -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.js

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

.storybook/tsconfig.json

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

CHANGELOG.md

@@ -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

README.md

@@ -23,4 +23,7 @@ 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).*
+
+
+## Compatibility

eslint.config.mjs

@@ -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: [

package.json

@@ -19,15 +19,14 @@
     "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",
@@ -37,28 +36,22 @@
     "@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",
+    "storybook": "^10.0.0",
     "tinymce": "^8.0.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": {

src/demo/html/demo.html

@@ -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>

src/main/ts/Integration.ts

@@ -144,9 +144,14 @@ const tinymceFn = function (this: JQuery<HTMLElement>, settings?: RawEditorExten
 
 export const setupIntegration = () => {
   const jq = getJquery();
+
   // Add :tinymce pseudo selector this will select elements that has been converted into editor instances
   // it's now possible to use things like $('*:tinymce') to get all TinyMCE bound elements.
-  jq.expr.pseudos.tinymce = (e: Element) => !!getTinymceInstance(e);
+  // Take advantage of jQuery's createPseudo API in v4 while still supports the older versions
+  jq.expr.pseudos.tinymce = jq.expr.createPseudo ?
+    jq.expr.createPseudo(( _text ) => ( elem ) => !!getTinymceInstance( elem ))
+    : (e: Element) => !!getTinymceInstance(e);
+
   // Add a tinymce function for creating editors
   (jq.fn as any).tinymce = tinymceFn;
 };

src/main/ts/JQuery.ts

@@ -1,6 +1,6 @@
 import { Global } from './Global';
 
-const jquery = (): (typeof import('jquery')) | null => (Global && Global.jQuery) ?? null;
+const jquery = (): JQueryStatic | null => (Global && Global.jQuery) ?? null;
 
 export const getJquery = () => {
   const jq = jquery();

src/stories/Editor.stories.ts

@@ -1,19 +1,14 @@
 import { setupIntegration, RawEditorExtendedSettings } from '../main/ts/Integration';
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
 
 setupIntegration();
 
-// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
-  title: 'TinyMCE Editor',
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
-  argTypes: {
-  },
+  title: 'TinyMCE Editor'
 } as Meta;
 
 let count = 0;
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story<RawEditorExtendedSettings> = (args) => {
+const Template: StoryFn<RawEditorExtendedSettings> = (args) => {
   const mount = `${count++}`;
 
   const mountNode = document.createElement('div');
@@ -54,7 +49,6 @@ const Template: Story<RawEditorExtendedSettings> = (args) => {
 };
 
 export const IframeEditor = Template.bind({});
-// More on args: https://storybook.js.org/docs/html/writing-stories/args
 IframeEditor.args = {
   inline: false,
 };

src/test/ts/browser/JqAppendTest.ts

@@ -13,12 +13,14 @@ describe('Check jQuery\'s `.append()` function', () => {
       $(div).append('<p>Hello world</p>');
       Assertions.assertEq('Expected content to match the appended content.', `<p>Hello world</p>`, div.innerHTML);
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor((elm, ed) => {
         $(elm).append(`<p>Hello world</p>`);
         Assertions.assertEq('Expected editor content to match the appended content.', `<p>Hello world</p>`, ed.getContent());
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor((elm, ed) => {
         ed.setContent('<p>Original content</p>');
@@ -31,18 +33,21 @@ describe('Check jQuery\'s `.append()` function', () => {
       });
     });
   });
+
   context('Append a list of string', () => {
     it('check that appending to a div works', () => {
       const div = document.createElement('div');
       $(div).append('<p>Hello</p>', '<p>', '<p>world</p>');
       Assertions.assertEq('Expected content to match the appended content.', `<p>Hello</p><p></p><p>world</p>`, div.innerHTML);
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor((elm, ed) => {
         $(elm).append('<p>Hello</p>', '<p>', '<p>world</p>');
         Assertions.assertEq('Expected editor content to match the appended content.', `<p>Hello</p>\n<p>&nbsp;</p>\n<p>world</p>`, ed.getContent());
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor((elm, ed) => {
         ed.setContent('<p>Original content</p>');
@@ -63,6 +68,7 @@ describe('Check jQuery\'s `.append()` function', () => {
       $(div).append(p);
       Assertions.assertEq('Expected content to match the appended content.', `<p>Hello world</p>`, div.innerHTML);
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor((elm, ed) => {
         const p = document.createElement('p');
@@ -71,6 +77,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         Assertions.assertEq('Expected editor content to match the appended content.', `<p>Hello world</p>`, ed.getContent());
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor((elm, ed) => {
         ed.setContent('<p>Original content</p>');
@@ -85,6 +92,7 @@ describe('Check jQuery\'s `.append()` function', () => {
       });
     });
   });
+
   context('Append a list of node', () => {
     it('check that appending to a div works', () => {
       const div = document.createElement('div');
@@ -96,6 +104,7 @@ describe('Check jQuery\'s `.append()` function', () => {
       $(div).append(p1, p2, p3);
       Assertions.assertEq('Expected content to match the appended content.', `<p>Hello</p><p></p><p>world</p>`, div.innerHTML);
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor((elm, ed) => {
         const p1 = document.createElement('p');
@@ -107,6 +116,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         Assertions.assertEq('Expected editor content to match the appended content.', `<p>Hello</p>\n<p>&nbsp;</p>\n<p>world</p>`, ed.getContent());
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor((elm, ed) => {
         ed.setContent('<p>Original content</p>');
@@ -124,6 +134,7 @@ describe('Check jQuery\'s `.append()` function', () => {
       });
     });
   });
+
   context('Append a jquery node set', () => {
     it('check that appending to a div works', async () => {
       await createHTML(`<section><p class="move">One</p><p>Two</p><p class="move">Three</p></section>`, (root) => {
@@ -134,6 +145,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         Assertions.assertEq('Expected the nodes to have been removed from the root', `<p>Two</p>`, root.innerHTML);
       });
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor(async (elm, ed) => {
         await createHTML(`<section><p class="move">One</p><p>Two</p><p class="move">Three</p></section>`, (root) => {
@@ -144,6 +156,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         });
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor(async (elm, ed) => {
         await createHTML(`<section><p class="move">One</p><p>Two</p><p class="move">Three</p></section>`, (root) => {
@@ -157,6 +170,7 @@ describe('Check jQuery\'s `.append()` function', () => {
       });
     });
   });
+
   context('Append a list of jquery node set', () => {
     it('check that appending to a div works', async () => {
       // eslint-disable-next-line max-len
@@ -169,6 +183,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         Assertions.assertEq('Expected the nodes to have been removed from the root', `<p>Four</p>`, root.innerHTML);
       });
     });
+
     it('check that appending to an empty editor works', async () => {
       await createEditor(async (elm, ed) => {
         // eslint-disable-next-line max-len
@@ -181,6 +196,7 @@ describe('Check jQuery\'s `.append()` function', () => {
         });
       });
     });
+
     it('check that appending to an non-empty editor works', async () => {
       await createEditor(async (elm, ed) => {
         // eslint-disable-next-line max-len