[#69553] Remove jQuery from CKEditor build #107

Copilot · 2025-12-01T18:38:28Z

Ticket

https://community.openproject.org/wp/69553

jQuery Removal - Complete

This PR removes all direct jQuery usage from the commonmark-ckeditor-build repository.

Changes Made

Files Changed (7 files)

src/helpers/button-disabler.js - Replaced jQuery.each with forEach
src/mentions/user-mentions.js - Replaced jQuery.getJSON with fetch
src/mentions/work-package-mentions.js - Replaced jQuery.getJSON with fetch
src/plugins/op-preview.plugin.js - Replaced jQuery.ajax, DOM manipulation, improved error handling
src/plugins/op-source-code.plugin.js - Replaced jQuery DOM manipulation, added null checks
CHANGELOG.md - Added (new file)
README.md - Updated with migration notes

Testing & Verification

✅ All 219 tests pass without modifications
✅ Build succeeds (webpack compiled successfully)
✅ ESLint passes with no errors
✅ All code review comments addressed
✅ No new issues in final code review

Migration Notes for Downstream Consumers

This library no longer uses jQuery internally. However, downstream applications (OpenProject) should continue to expose the jQuery global until other components are migrated.

Related downstream PR: opf/openproject#19429

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

- Replace jQuery.each() with native forEach() in button-disabler.js - Replace jQuery.getJSON() with fetch() API in user-mentions.js and work-package-mentions.js - Replace jQuery.ajax() with fetch() API in op-preview.plugin.js - Replace jQuery DOM manipulation with native DOM APIs in op-preview.plugin.js and op-source-code.plugin.js - All tests pass, build succeeds, and linter passes Co-authored-by: myabc <[email protected]>

Co-authored-by: myabc <[email protected]>

Copilot

Pull request overview

This pull request removes jQuery as a dependency from the CKEditor build, replacing all jQuery usage with vanilla JavaScript equivalents using modern DOM APIs and the Fetch API.

Key changes:

Replaced jQuery AJAX methods ($.getJSON(), $.ajax()) with native fetch() API
Converted jQuery DOM manipulation to native DOM APIs (document.createElement(), parentElement, querySelectorAll(), etc.)
Replaced jQuery.each() with native Array.forEach()

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/plugins/op-source-code.plugin.js	Converted jQuery DOM traversal and manipulation to vanilla JS for source code mode toggling
src/plugins/op-preview.plugin.js	Replaced jQuery AJAX with fetch API and converted DOM manipulation for preview functionality
src/mentions/work-package-mentions.js	Replaced `jQuery.getJSON()` with fetch API for work package autocomplete
src/mentions/user-mentions.js	Replaced `jQuery.getJSON()` with fetch API for user mentions autocomplete
src/helpers/button-disabler.js	Converted `jQuery.each()` to native `Array.forEach()` for toolbar item iteration
README.md	Added migration notes warning downstream consumers to keep jQuery global available
CHANGELOG.md	Documented the jQuery removal with implementation details and migration guidance

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-03T13:03:56Z

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

+				sourceWrapper.className = 'ck-editor__source';
+
+				// Remove existing source elements
+				const existingSources = reference.parentElement.querySelectorAll('.ck-editor__source');


The selector logic has changed from the original jQuery behavior. $reference.siblings('.ck-editor__source') only selected sibling elements of reference, but reference.parentElement.querySelectorAll('.ck-editor__source') selects ALL descendants matching the selector within the parent element, not just siblings. This could remove unintended elements if there are nested structures.

Consider using a more precise selector or filtering to match only siblings:

const existingSources = Array.from(reference.parentElement.children) .filter(el => el.classList.contains('ck-editor__source')); existingSources.forEach(el => el.remove());

@copilot please fix

Fixed in 0497dc1 - replaced querySelectorAll with Array.from(parentElement.children).filter() to match jQuery's .siblings() behavior

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

src/plugins/op-preview.plugin.js

Copilot · 2025-12-03T13:03:57Z

src/plugins/op-preview.plugin.js

+				const editableElement = editor.ui.getEditableElement();
+				const reference = editableElement.parentElement;


Potential null reference error if editableElement.parentElement is null. The code immediately accesses reference.parentElement on lines 39 and 46 without checking if reference (which is editableElement.parentElement) is null first.

Consider adding a null check:

const editableElement = editor.ui.getEditableElement(); const reference = editableElement.parentElement; if (!reference || !reference.parentElement) { console.error('Cannot show preview: invalid editor structure'); return; }

@copilot apply suggestion, but use optional chaining

Fixed in 0497dc1 - added optional chaining (?.) and early return guard with error logging

Copilot · 2025-12-03T13:03:57Z

src/plugins/op-preview.plugin.js

 			let disablePreviewing = function() {
-				let $mainEditor = jQuery(editor.ui.getEditableElement()).parent();
+				const editableElement = editor.ui.getEditableElement();
+				const mainEditor = editableElement.parentElement;


Potential null reference error if editableElement.parentElement is null. The code immediately accesses mainEditor.parentElement on line 83 without checking if mainEditor (which is editableElement.parentElement) is null first.

Consider adding a null check:

const editableElement = editor.ui.getEditableElement(); const mainEditor = editableElement.parentElement; if (!mainEditor || !mainEditor.parentElement) { console.error('Cannot disable preview: invalid editor structure'); return; }

Suggested change

const mainEditor = editableElement.parentElement;

const mainEditor = editableElement && editableElement.parentElement;

if (!mainEditor || !mainEditor.parentElement) {

console.error('Cannot disable preview: invalid editor structure');

return;

}

@copilot apply suggestion, but use optional chaining

Fixed in 0497dc1 - added optional chaining (?.) and early return guard with error logging as requested

src/plugins/op-preview.plugin.js

Copilot · 2025-12-03T13:03:57Z

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

+				const editableElement = editor.ui.getEditableElement();
+				const reference = editableElement.parentElement;


Potential null reference error if editableElement.parentElement is null. The code immediately accesses reference.parentElement on lines 44 and 48 without checking if reference (which is editableElement.parentElement) is null first.

Consider adding a null check:

const editableElement = editor.ui.getEditableElement(); const reference = editableElement.parentElement; if (!reference || !reference.parentElement) { console.error('Cannot show source: invalid editor structure'); return; }

@copilot apply suggestion, but use optional chaining

Fixed in 0497dc1 - added optional chaining (?.) and early return guard with error logging

Copilot · 2025-12-03T13:03:58Z

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

 			let hideSource = function() {
-				let $mainEditor = jQuery(editor.ui.getEditableElement()).parent();
+				const editableElement = editor.ui.getEditableElement();
+				const mainEditor = editableElement.parentElement;


Potential null reference error if editableElement.parentElement is null. The code immediately accesses mainEditor.parentElement on line 70 without checking if mainEditor (which is editableElement.parentElement) is null first.

Consider adding a null check:

const editableElement = editor.ui.getEditableElement(); const mainEditor = editableElement.parentElement; if (!mainEditor || !mainEditor.parentElement) { console.error('Cannot hide source: invalid editor structure'); return; }

Suggested change

const mainEditor = editableElement.parentElement;

const mainEditor = editableElement.parentElement;

if (!mainEditor || !mainEditor.parentElement) {

console.error('Cannot hide source: invalid editor structure');

return;

}

@copilot apply suggestion, but use optional chaining

Fixed in 0497dc1 - added optional chaining (?.) and early return guard with error logging

src/plugins/op-preview.plugin.js

Co-authored-by: Copilot <[email protected]>

@myabc

- Add optional chaining (?.) for null-safe property access as requested by @myabc - Add early return guards with error logging for invalid DOM structures - Fix showSource to use Array.from().filter() to match jQuery .siblings() behavior - All tests passing, linter passing Co-authored-by: myabc <[email protected]>

- Add `el !== mainEditor` check in disablePreviewing and hideSource filters - This ensures consistency with showPreview and showSource logic - Prevents potential edge case where mainEditor could be removed if it had the class Co-authored-by: myabc <[email protected]>

akabiru

Nice one 👍🏾 I place my confidence in the existing unit tests but I suppose some stuff might break, so we should probably let it hang in dev/edge sooner rather than later.

See upstream PR: opf/commonmark-ckeditor-build#107

Built from upstream commit: 122e338255f254940dc02a5c2e72681e8d9c5d37 See upstream PRs: - opf/commonmark-ckeditor-build#107 - opf/commonmark-ckeditor-build#108

Built from upstream commit: 509e73464638e45f84d0b713089ea31b8cfb3ced See upstream PRs: - opf/commonmark-ckeditor-build#107 - opf/commonmark-ckeditor-build#108

Built from upstream commit: 7795208016d3efbf1cd8545aa852824fd2f3b149 See upstream PRs: - opf/commonmark-ckeditor-build#107 - opf/commonmark-ckeditor-build#108

Built from upstream commit: ec8c1b8b1a0a858467fdd4f15a761a25fd85f801 See upstream PRs: - opf/commonmark-ckeditor-build#107 - opf/commonmark-ckeditor-build#108

Initial plan

97eb707

Copilot AI assigned Copilot and myabc Dec 1, 2025

Copilot started work on behalf of myabc December 1, 2025 18:38 View session

Copilot AI and others added 2 commits December 1, 2025 18:49

fix: add null check for unregisterPreview in op-preview.plugin.js

ab1b098

Co-authored-by: myabc <[email protected]>

Copilot AI changed the title ~~[WIP] Remove jQuery from CKEditor build~~ [#69553] Remove jQuery from CKEditor build Dec 1, 2025

Copilot AI requested a review from myabc December 1, 2025 18:59

Copilot finished work on behalf of myabc December 1, 2025 18:59

myabc marked this pull request as ready for review December 3, 2025 13:00

Copilot AI review requested due to automatic review settings December 3, 2025 13:00

Copilot started reviewing on behalf of myabc December 3, 2025 13:00 View session

Copilot finished reviewing on behalf of myabc December 3, 2025 13:02

myabc added the enhancement New feature or request label Dec 3, 2025

Copilot AI reviewed Dec 3, 2025

View reviewed changes

myabc requested a review from a team December 3, 2025 13:07

Copilot started work on behalf of myabc December 3, 2025 23:28 View session

myabc and others added 3 commits December 3, 2025 20:31

Apply suggestions from code review

6575b57

Co-authored-by: Copilot <[email protected]>

Copilot finished work on behalf of myabc December 3, 2025 23:42

Copilot started work on behalf of myabc December 3, 2025 23:42 View session

Copilot finished work on behalf of myabc December 3, 2025 23:45

akabiru approved these changes Dec 9, 2025

View reviewed changes

myabc merged commit 6789b3b into master Dec 20, 2025
6 checks passed

myabc deleted the copilot/remove-jquery-usage branch December 20, 2025 16:17

myabc added a commit to opf/openproject that referenced this pull request Jan 17, 2026

[#69553] Bump CKEditor build: removes jQuery

2c8760f

See upstream PR: opf/commonmark-ckeditor-build#107

myabc mentioned this pull request Jan 17, 2026

[#69553] Bump CKEditor build: removes jQuery opf/openproject#21712

Merged

3 tasks

myabc added a commit to opf/openproject that referenced this pull request Jan 17, 2026

[#69553] Bump CKEditor build: removes jQuery

3dd42a2

See upstream PR: opf/commonmark-ckeditor-build#107

myabc mentioned this pull request Jan 19, 2026

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

Merged

3 tasks

		const editableElement = editor.ui.getEditableElement();
		const reference = editableElement.parentElement;

-				const mainEditor = editableElement.parentElement;
+				const mainEditor = editableElement && editableElement.parentElement;
+				if (!mainEditor || !mainEditor.parentElement) {
+					console.error('Cannot disable preview: invalid editor structure');
+					return;
+				}

[#69553] Remove jQuery from CKEditor build #107

[#69553] Remove jQuery from CKEditor build #107

Uh oh!

Conversation

Copilot AI commented Dec 1, 2025 • edited by myabc Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

jQuery Removal - Complete

Changes Made

Files Changed (7 files)

Testing & Verification

Migration Notes for Downstream Consumers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

akabiru left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Copilot AI commented Dec 1, 2025 •

edited by myabc

Loading

myabc Dec 3, 2025 •

edited

Loading

myabc Dec 3, 2025 •

edited

Loading

myabc Dec 3, 2025 •

edited

Loading

akabiru left a comment •

edited

Loading