[#69553] Remove jQuery from CKEditor build

CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## [Unreleased]
+
+### Changed
+
+- Removed jQuery dependency from the CKEditor build. All jQuery usage has been replaced with vanilla JavaScript equivalents:
+  - `jQuery.each()` replaced with native `Array.forEach()`
+  - `jQuery.getJSON()` replaced with `fetch()` API
+  - `jQuery.ajax()` replaced with `fetch()` API
+  - jQuery DOM manipulation replaced with native DOM APIs (`document.createElement()`, `element.parentElement`, `element.style`, etc.)
+
+### Migration Notes
+
+This library no longer uses jQuery internally. However, downstream consumers (such as OpenProject) should keep the jQuery global available for other parts of the application until they are ready to remove it. This change only affects the internal implementation of this library and should not require changes in consuming applications.
+
+For more context, see the related OpenProject pull request: https://github.com/opf/openproject/pull/19429

README.md

@@ -60,3 +60,13 @@ Now the webpack development mode is building the files and outputting them to `a
 
 
 
+## Migration Notes
+
+### jQuery Removal
+
+As of version 11.2.0, this library no longer uses jQuery internally. All jQuery dependencies have been replaced with vanilla JavaScript equivalents using the Fetch API and native DOM manipulation.
+
+**Important for downstream consumers (e.g., OpenProject):** While this library no longer uses jQuery internally, downstream applications should continue to expose the jQuery global if other parts of the application depend on it. Do not remove the jQuery global from the downstream application (OpenProject) yet until all components have been migrated.
+
+For more details on the downstream migration, see: https://github.com/opf/openproject/pull/19429
+

src/helpers/button-disabler.js

@@ -11,7 +11,7 @@ export function getToolbarItems(editor) {
 }
 
 export function disableItems(editor, except) {
-	jQuery.each(getToolbarItems(editor), function (index, item) {
+	getToolbarItems(editor).forEach((item) => {
 		let toDisable = item;
 
 		if (item instanceof FileDialogButtonView) {
@@ -31,7 +31,7 @@ export function disableItems(editor, except) {
 }
 
 export function enableItems(editor) {
-	jQuery.each(getToolbarItems(editor), function (index, item) {
+	getToolbarItems(editor).forEach((item) => {
 		let toEnable = item;
 
 		if (item instanceof FileDialogButtonView) {

src/mentions/user-mentions.js

@@ -28,18 +28,29 @@ export function userMentions(queryText) {
 	const pluginContext = getPluginContext(editor);
 	const base = window.OpenProject.urlRoot;
 
-	return new Promise((resolve, _reject) => {
-		jQuery.getJSON(url, collection => {
-			resolve(_.uniqBy(collection._embedded.elements, (el) => el.id).map(mention => {
-				const type = mention._type.toLowerCase();
-				const text = `@${mention.name}`;
-				const id = `@${mention.id}`;
-				const idNumber = mention.id;
-				const typeSegment = pluginContext.services.apiV3Service[`${type}s`].segment;
-				const link = `${base}/${typeSegment}/${idNumber}`;
+	return new Promise((resolve, reject) => {
+		fetch(url)
+			.then(response => {
+				if (!response.ok) {
+					throw new Error(`HTTP error! status: ${response.status}`);
+				}
+				return response.json();
+			})
+			.then(collection => {
+				resolve(_.uniqBy(collection._embedded.elements, (el) => el.id).map(mention => {
+					const type = mention._type.toLowerCase();
+					const text = `@${mention.name}`;
+					const id = `@${mention.id}`;
+					const idNumber = mention.id;
+					const typeSegment = pluginContext.services.apiV3Service[`${type}s`].segment;
+					const link = `${base}/${typeSegment}/${idNumber}`;
 
-				return {type, id, text, link, idNumber, name: mention.name};
-			}));
-		});
-	})
+					return {type, id, text, link, idNumber, name: mention.name};
+				}));
+			})
+			.catch(error => {
+				console.error('Error fetching user mentions:', error);
+				reject(error);
+			});
+	});
 }

src/mentions/work-package-mentions.js

@@ -8,15 +8,27 @@ export function workPackageMentions(prefix) {
       return [];
     }
 
-    return new Promise((resolve, _reject) => {
-      jQuery.getJSON(url, { q: query, scope: "all" }, collection => {
-        resolve(collection.map(wp => {
-          const id = `${prefix}${wp.id}`;
-          const idNumber = wp.id;
+    return new Promise((resolve, reject) => {
+      const params = new URLSearchParams({ q: query, scope: "all" });
+      fetch(`${url}?${params.toString()}`)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(collection => {
+          resolve(collection.map(wp => {
+            const id = `${prefix}${wp.id}`;
+            const idNumber = wp.id;
 
-          return { id, idNumber, type: "work_package", text: id, name: wp.to_s, link: base + wp.id };
-        }));
-      });
+            return { id, idNumber, type: "work_package", text: id, name: wp.to_s, link: base + wp.id };
+          }));
+        })
+        .catch(error => {
+          console.error('Error fetching work package mentions:', error);
+          reject(error);
+        });
     });
   };
 }

src/plugins/op-preview.plugin.js

@@ -30,15 +30,20 @@ export default class OPPreviewPlugin extends Plugin {
 
 
 			let showPreview = function(preview) {
-				let $reference = jQuery(editor.ui.getEditableElement()).parent();
-				let $previewWrapper = jQuery('<div class="ck-editor__preview op-uc-container"></div>');
-				$reference.siblings('.ck-editor__preview').remove();
+				const editableElement = editor.ui.getEditableElement();
+				const reference = editableElement.parentElement;
+				const previewWrapper = document.createElement('div');
+				previewWrapper.className = 'ck-editor__preview op-uc-container';
+
+				// Remove existing preview elements
+				const existingPreviews = reference.parentElement.querySelectorAll('.ck-editor__preview');
+				existingPreviews.forEach(el => el.remove());
 
 				const previewService = getOPService(editor, 'ckEditorPreview');
-				unregisterPreview = previewService.render($previewWrapper[0], preview);
+				unregisterPreview = previewService.render(previewWrapper, preview);
 
-				$reference.hide();
-				$reference.after($previewWrapper);
+				reference.style.display = 'none';
+				reference.parentElement.insertBefore(previewWrapper, reference.nextSibling);
 
 				disableItems(editor, view);
 			};
@@ -47,22 +52,38 @@ export default class OPPreviewPlugin extends Plugin {
 				let link = getOPPreviewContext(editor);
 				let url = getOPPath(editor).api.v3.previewMarkup(link);
 
-				jQuery
-					.ajax({
-						data: editor.getData(),
-						url: url,
-						response_type: 'text',
-						contentType: 'text/plain; charset=UTF-8',
-						method: 'POST',
-					}).done(showPreview);
+				fetch(url, {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'text/plain; charset=UTF-8'
+					},
+					body: editor.getData()
+				})
+					.then(response => {
+						if (!response.ok) {
+							throw new Error(`HTTP error! status: ${response.status}`);
+						}
+						return response.text();
+					})
+					.then(showPreview)
+					.catch(error => {
+						console.error('Error fetching preview:', error);
+					});
 			};
 
 			let disablePreviewing = function() {
-				let $mainEditor = jQuery(editor.ui.getEditableElement()).parent();
+				const editableElement = editor.ui.getEditableElement();
+				const mainEditor = editableElement.parentElement;
 
-				unregisterPreview();
-				$mainEditor.siblings('.ck-editor__preview').remove();
-				$mainEditor.show();
+				if (unregisterPreview) {
+					unregisterPreview();
+				}
+
+				// Remove existing preview elements
+				const existingPreviews = mainEditor.parentElement.querySelectorAll('.ck-editor__preview');
+				existingPreviews.forEach(el => el.remove());
+
+				mainEditor.style.display = '';
 
 				enableItems(editor);
 			};

src/plugins/op-source-code.plugin.js

@@ -35,12 +35,17 @@ export default class OPSourceCodePlugin extends Plugin {
 
 
 			let showSource = function(_preview) {
-				let $reference = jQuery(editor.ui.getEditableElement()).parent();
-				let $sourceWrapper = jQuery('<div class="ck-editor__source"></div>');
-				$reference.siblings('.ck-editor__source').remove();
-
-				$reference.hide();
-				$reference.after($sourceWrapper);
+				const editableElement = editor.ui.getEditableElement();
+				const reference = editableElement.parentElement;
+				const sourceWrapper = document.createElement('div');
+				sourceWrapper.className = 'ck-editor__source';
+
+				// Remove existing source elements
+				const existingSources = reference.parentElement.querySelectorAll('.ck-editor__source');
+				existingSources.forEach(el => el.remove());
+
+				reference.style.display = 'none';
+				reference.parentElement.insertBefore(sourceWrapper, reference.nextSibling);
 
 				disableItems(editor, view);
 
@@ -56,12 +61,16 @@ export default class OPSourceCodePlugin extends Plugin {
 			};
 
 			let hideSource = function() {
-				let $mainEditor = jQuery(editor.ui.getEditableElement()).parent();
+				const editableElement = editor.ui.getEditableElement();
+				const mainEditor = editableElement.parentElement;
 
 				editor.fire('op:source-code-disabled');
 
-				$mainEditor.siblings('.ck-editor__source').remove();
-				$mainEditor.show();
+				// Remove existing source elements
+				const existingSources = mainEditor.parentElement.querySelectorAll('.ck-editor__source');
+				existingSources.forEach(el => el.remove());
+
+				mainEditor.style.display = '';
 
 				enableItems(editor);