Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insert appears not to work with CKEditor 5 #22

Open
nattywebdev opened this issue Jul 11, 2024 · 5 comments · Fixed by #23 · May be fixed by #24
Open

Insert appears not to work with CKEditor 5 #22

nattywebdev opened this issue Jul 11, 2024 · 5 comments · Fixed by #23 · May be fixed by #24
Labels

Comments

@nattywebdev
Copy link

When trying to insert a link to a document attached to a node (a pdf for example) into the Body field (CKEditor 5), it doesn't work.

Instead this message is displayed in the developer console of Google Chrome:

insert.js?sggjji:198
Uncaught TypeError: $pane.size is not a function
    at Object.activateTabPane (insert.js?sggjji:198:15)
    at Object.insertIntoActiveEditor (insert.js?sggjji:177:23)
    at HTMLInputElement.insert (insert.js?sggjji:106:21)
    at HTMLInputElement.dispatch (jquery.js?v=3.7.1:2:40035)
    at v.handle (jquery.js?v=3.7.1:2:38006)

I tested this with a fresh build in tugboat, but had experienced it on several recently-updated sites (to Backdrop 1.28.2).

@nattywebdev
Copy link
Author

This also applies to TinyMCE - the error displayed in console is the same.
According to @indigoxela :

size() has been deprecated in jQuery 1.8 (!!!) and removed in jQuery 3.
That script is definitely broken with the most recent jQuery: https://github.com/backdrop-contrib/insert/blob/1.x-1.x/insert.js#L198

@nattywebdev
Copy link
Author

nattywebdev commented Jul 11, 2024

I can confirm that the issue is not present if you switch back to jQuery 1 (Legacy), so at least there's a workaround, for now.

@indigoxela
Copy link
Member

@jromine here's a PR that addresses the jQuery compatibility problem.

More info in the documentation: https://api.jquery.com/size/

This does not address the CKEditor5 compatibility problem, which seem a lot trickier, but at least with that small change the module works with jQuery 3 and TinyMCE. 😉

@quicksketch
Copy link
Member

Thanks @indigoxela, I merged your bugfix PR as it seemed only beneficial. I'll take a look at making this work with CKE5. Wish me luck. 😅

@quicksketch
Copy link
Member

I was successful getting this working, but it's not super-clean. I filed a PR at #24.

The problem I encountered is that we need to track which CKEditor instance is the "active" one. TinyMCE politely provides tinyMCE.activeEditor. WYSIWYG module in D7 did something similar. But CKEditor 5 does not. In order to track which editor is active, we need to register each editor as it is created. That might take a few seconds after page load time, and we don't have the ability to register an event handler until after they're ready. To solve this problem cleanly and with 100% accuracy, we need a change to core, so I filed backdrop/backdrop-issues#6770.

In the mean time, my PR works fine, but it might not work if you're on a particularly slow connection or computer, as it's just guessing when the loading is complete (2 seconds) rather than receiving a ready() event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
4 participants