Ckeditor with Drupal 11 may break Juicebox links

Experimenting with DDEV and updating to Drupal 11. This comes with ckeditor 5. Despite all the good things that ckeditor 5 is supposed to do for us, it may also disable Juicebox galleries that are linked using the recommended approach. Specifially the embedding recommendations call for putting code such as:

<!--START JUICEBOX EMBED--><script src="/web/sites/all/libraries/juicebox/juicebox.js"></script><script>
    new juicebox({
        baseUrl : '/web/sites/default/files/jboxgalleries/greylock09/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '110%',
        backgroundColor: '#222222'
    });
    </script>
<div id="juicebox-container">
    &nbsp;
</div>
<!--END JUICEBOX EMBED-->

Ckeditor seems to "squash" the embedded code. Instead of the code shown above I get code like this:

<p>
    &lt;!--START JUICEBOX EMBED--&gt;&lt;script src="/web/sites/all/libraries/juicebox/juicebox.js"&gt;&lt;/script&gt;&lt;script&gt;<br>
    &nbsp; &nbsp;new juicebox({<br>
    &nbsp; &nbsp; &nbsp; &nbsp;baseUrl : '/web/sites/default/files/jboxgalleries/greylock09/',<br>
    &nbsp; &nbsp; &nbsp; &nbsp;containerId: 'juicebox-container',<br>
    &nbsp; &nbsp; &nbsp; &nbsp;galleryWidth: '100%',<br>
    &nbsp; &nbsp; &nbsp; &nbsp;galleryHeight: '110%',<br>
    &nbsp; &nbsp; &nbsp; &nbsp;backgroundColor: '#222222'<br>
    &nbsp; &nbsp;});<br>
    &nbsp; &nbsp;&lt;/script&gt;<br>
    &lt;div id="juicebox-container"&gt;<br>
    &nbsp; &nbsp;&amp;nbsp;<br>
    &lt;/div&gt;<br>
    &lt;!--END JUICEBOX EMBED--&gt;
</p>
<!--START JUICEBOX EMBED-->
<p>
    &nbsp;
</p>
<p>
    <!--END JUICEBOX EMBED-->&nbsp;
</p>

This is strange. My hosted site is at Drupal 10.4.1 and ckeditor 5. My local site is at Drupal 11.1.2 and ckeditor 5. I may have missed some steps in setting ckeditor up on the local ddev based site.

I would be cautious on upgrading to the latest and greatest until we can sort this out.

I made some progress on Sunday 2/9 getting closer to the recommended format on my dev site. But I think I'll explore the migrate module so see if I can copy all instances of my JuiceboxGallery content type from my live site to my new dev site.

Quick and incomplete update. Migrate module looks like a dead end for this purpose. Way too complicated for what we (I) need.

Issue could be with ddev or with ckeditor 5. https://www.drupal.org/project/drupal/issues/3410100 🐛 [10.2 regression] CKEditor 5 breaks when "Source"/Source editing button is added and "Manually editable HTML tags" are specified Needs review ... reading this it appears that it is a very involved ckeditor 5 issue. I think that if you have pre-existing juicebox gallery content items with embeds that activate JB gallery javascript and then you edit 'em in a ckeditor 5 environment the embed code can get broken. I think I can "prove" this by editing a gallery embed or two on my live system.

Given the lack of participation in this Juicebox gallery issue queue I wonder if anyone is still using Juicebox Gallery and intends to continue using it through Drupal 11.

I will post back if I can confirm that this is ckeditor 5 related. They are up to 102 posts in that ckeditor issue queue that I listed without a resolution ... and it's not clear if that resolution will fix our Juicebox embed issue.

Aha. After much fussing, including getting xdebug running in ddev (which didn't provide an immediate solution) ...

Here is what you need for embed code on a ddev site:

--START JUICEBOX EMBED--><script src="https://compm.ddev.site/sites/all/libraries/juicebox/juicebox.js"></script><script>
    new juicebox({
        baseUrl : 'https://compm.ddev.site/sites/default/files/jboxgalleries/greylock09',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '110%',
        backgroundColor: '#222222'
    });
    </script>
<div id="juicebox-container">
    &nbsp;
</div>

tailored of course to what you've named your site. This means Juicebox will run under Drupal 11.1.2 and recent changes to Ckeditor are not getting the in way. The Juicebox I'm running is 4.0.0-alpha2. Trying to synchronize the setup of a Juicebox Gallery content type (used as a location for embed code for each gallery) between a test site and a production site is kind of a p.i.t.a. but ultimately it works.

Ultimately I think we need a more robust gallery solution for Drupal going forward. The statistics we get on contrib module usage seem to be highly misleading judging by the lack of participation in the Juicebox issue queue.