[#69553] Remove jQuery from CKEditor build [FIXUP] (#108)

* Add Request.js as peer/dev dependency

* Replace fetch() calls with Request.JS

Request.JS provides a wrapper around `fetch`, taking care of setting the
`X-CSRF-Token` header.

Author: myabc

CHANGELOG.md

@@ -6,8 +6,8 @@
 
 - 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.getJSON()` replaced with Request.JS
+  - `jQuery.ajax()` replaced with Request.JS
   - jQuery DOM manipulation replaced with native DOM APIs (`document.createElement()`, `element.parentElement`, `element.style`, etc.)
 
 ### Migration Notes

README.md

@@ -62,7 +62,7 @@ Now the webpack development mode is building the files and outputting them to `a
 
 ### 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.
+As of version 11.2.0, this library no longer uses jQuery internally. All jQuery dependencies have been replaced with vanilla JavaScript equivalents using Request.JS 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.
 

package-lock.json

@@ -51,6 +51,7 @@
     "@ckeditor/ckeditor5-watchdog": "44.3.0",
     "@ckeditor/ckeditor5-widget": "44.3.0",
     "@eslint/js": "^9.16.0",
+    "@rails/request.js": "^0.0.13",
     "babel-jest": "^29.7.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.23.0",
@@ -98,5 +99,8 @@
   },
   "dependencies": {
     "patch-package": "^8.0.0"
+  },
+  "peerDependencies": {
+    "@rails/request.js": "^0.0.13"
   }
 }

package.json

@@ -3,6 +3,7 @@ import {
 	getOPPath,
 	getPluginContext,
 } from "../plugins/op-context/op-context";
+import { get } from '@rails/request.js';
 
 export function userMentions(queryText) {
 	const editor = this;
@@ -24,18 +25,13 @@ export function userMentions(queryText) {
 		return [];
 	}
 
-	const url = getOPPath(editor).api.v3.principals(resource, queryText) + '&select=elements/_type,elements/id,elements/name';
+	const url = getOPPath(editor).api.v3.principals(resource, queryText);
 	const pluginContext = getPluginContext(editor);
 	const base = window.OpenProject.urlRoot;
 
 	return new Promise((resolve, reject) => {
-		fetch(url)
-			.then(response => {
-				if (!response.ok) {
-					throw new Error(`HTTP error! status: ${response.status}`);
-				}
-				return response.json();
-			})
+		get(url, { responseKind: 'json', query: { select: 'elements/_type,elements/id,elements/name' } })
+			.then(response => response.json)
 			.then(collection => {
 				resolve(_.uniqBy(collection._embedded.elements, (el) => el.id).map(mention => {
 					const type = mention._type.toLowerCase();

src/mentions/user-mentions.js

@@ -1,3 +1,5 @@
+import { get } from '@rails/request.js';
+
 export function workPackageMentions(prefix) {
   return function (query) {
     let editor = this;
@@ -9,14 +11,8 @@ export function workPackageMentions(prefix) {
     }
 
     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();
-        })
+      get(url, { responseKind: 'json', query: { q: query, scope: "all" } })
+        .then(response => response.json)
         .then(collection => {
           resolve(collection.map(wp => {
             const id = `${prefix}${wp.id}`;

src/mentions/work-package-mentions.js

@@ -7,6 +7,7 @@ import { ButtonView } from '@ckeditor/ckeditor5-ui';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import {getOPPath, getOPPreviewContext, getOPService} from './op-context/op-context';
 import {enableItems, disableItems} from '../helpers/button-disabler';
+import { post } from '@rails/request.js';
 
 export default class OPPreviewPlugin extends Plugin {
 
@@ -39,7 +40,7 @@ export default class OPPreviewPlugin extends Plugin {
 
 				const previewWrapper = document.createElement('div');
 				previewWrapper.className = 'ck-editor__preview op-uc-container';
-				
+
 				// Remove existing preview elements (only direct siblings)
 				const existingPreviews = Array.from(reference.parentElement.children)
 					.filter(el => el !== reference && el.classList.contains('ck-editor__preview'));
@@ -58,19 +59,12 @@ export default class OPPreviewPlugin extends Plugin {
 				let link = getOPPreviewContext(editor);
 				let url = getOPPath(editor).api.v3.previewMarkup(link);
 
-				fetch(url, {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'text/plain; charset=UTF-8'
-					},
-					body: editor.getData()
+				post(url, {
+					contentType: 'text/plain; charset=UTF-8',
+					responseKind: 'html',
+					body: editor.getData(),
 				})
-					.then(response => {
-						if (!response.ok) {
-							throw new Error(`HTTP error! status: ${response.status}`);
-						}
-						return response.text();
-					})
+					.then(response => response.html)
 					.then(showPreview)
 					.catch(error => {
 						console.error('Error fetching preview:', error);
@@ -90,12 +84,12 @@ export default class OPPreviewPlugin extends Plugin {
 				if (unregisterPreview) {
 					unregisterPreview();
 				}
-				
+
 				// Remove existing preview elements (only direct siblings)
 				const existingPreviews = Array.from(mainEditor.parentElement.children)
 					.filter(el => el !== mainEditor && el.classList.contains('ck-editor__preview'));
 				existingPreviews.forEach(el => el.remove());
-				
+
 				mainEditor.style.display = '';
 
 				enableItems(editor);