Insert appears not to work with CKEditor 5

[nattywebdev]

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]

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]

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]

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

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]

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.

[nattywebdev]

This still needs work. With that PR, I am still getting this code inserted into the Body area, with a <p> tag round both the image and the link:

<p><img class="file-icon" src="/core/modules/file/icons/application-pdf.png" alt="" title="application/pdf" /></p>
<p>
    <a href="/files/docs/my-test-file.pdf" title="My test file"><span class="file">My test file</span></a> 
</p>

Clearly the <p> tags are unhelpful.

As an enhancement, it would surely be cleaner to be able to add the image using a class in css, such as:

<a href="/files/docs/my-test-file.pdf" class="pdf-doc" title="application/pdf">My test file</a> 

where the class is added depending on the document type. The image can then be styled as needed.

[quicksketch]

Hi @nattywebdev, I'm working on fixing this issue. The Backdrop 1.30.0 release added a new API that #24 can now use (although #24 works in 1.30.0 as-is, it just could be better).

In your example, that problem happens when inserting a file link, is that correct? Inserting an image includes just a <img> tag and no wrapping markup at all. One of my clients has suggested that inserted images actually should include a wrapping <p> tag. But for inserted file links, I think you're right that it should just be an <a> tag, with no extra image for the icon.