>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3316376. --> Reported by: [mark_fullmer](https://www.drupal.org/user/2612816) Related to !10 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>CKEditor 4 is marked as deprecated in Drupal 9.5 (<a href="https://www.drupal.org/project/drupal/issues/3304326">https://www.drupal.org/project/drupal/issues/3304326</a>) and will be removed in Drupal 10. We should provide a CKEditor 5-compatible version of this plugin.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Add a CKEditor 5 plugin to the existing module (alongside the CKEditor 4 plugin) to simplify the migration path. </p> <p>Integration within Drupal should follow documentation provided below:</p> <ul> <li>Drupal's CKEditor 5 architecture: <a href="https://api.drupal.org/api/drupal/core!modules!ckeditor5!ckeditor5.api.php/group/ckeditor5_architecture/10.0.x">https://api.drupal.org/api/drupal/core!modules!ckeditor5!ckeditor5.api.php/group/ckeditor5_architecture/10.0.x</a></li> <li>Drupal's API for working with CKEditor 5: <a href="https://www.drupal.org/docs/drupal-apis/ckeditor-5-api/overview">https://www.drupal.org/docs/drupal-apis/ckeditor-5-api/overview</a></li> <li>"CKEditor 5 Dev Tools" (<a href="https://www.drupal.org/project/ckeditor5_dev/">https://www.drupal.org/project/ckeditor5_dev/</a>) includes a starter template with useful inline comments about naming.</li> </ul> <h3>Summary of functional requirements</h3> <p>1. A CKEditor toolbar icon called "URL Embed" will be available for placement in CKEditor 5 Editors.<br> 2. When the button is clicked, a modal with a form for entering a URL will be shown.<br> 3. User input into this form will be validated against the Embed library's discovery of a suitable provider (if no suitable provider is found, the form will display a validation error).<br> 4. Upon successful submission of a supported URL, the plugin will provide a <strong>data-downcast</strong> version of markup in the following format:</p> <pre>&lt;drupal-url data-embed-url="[URL as supplied by user]" data-url-provider="[Provider as discovered by Embed"&gt;&lt;/drupal-url&gt;</pre><p>5. An <strong>editing-downcast</strong> version of markup will be provided, as retrieved from the Embed library, via an asynchronous request.<br> 6. To edit an already embedded URL embed, the user may click once on the embed in the CKEditor editing area and then click the toolbar button. The form in modal will populate the input with the existing URL.<br> 7. If the selection in the CKEditor editing window matches an attribute that is not a <code>drupalUrl</code> attribute, the URL Embed toolbar button will be disabled (this is achieved by implementing a <code>refresh()</code> method in the CKEditor command.<br> 8. The module will simultaneously support CKEditor 4 and CKEditor 5 implementations.</p> <h3>Architecture design</h3> <p>The architecture of the CKEditor 5 Model plugin should follow the design of Drupal core's drupalImage plugin, as well as contrib module Entity Embed's implementation (<span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/entity_embed/issues/3272732" title="Status: Closed (fixed)">#3272732: Drupal 10 &amp; CKEditor 5 readiness</a></span>). The actual form logic should be located in a Drupal form, rather than a CKEditor5 balloon, so that current and future patches that seek to modify the Form can be maintained by Drupal-centric developers.</p> <h3>Architecture change callout</h3> <p>The CKEditor 4 version of this plugin supports multiple buttons for the URL Embed button, implementing the design proferred by the Drupal module "Embed." Multiple buttons make sense for other implementers, such as "Entity Embed" (where you might want different buttons for embedding a Drupal node vs a Drupal block, etc.). But multiple buttons does not make sense for "URL Embed," where there is only one input variation (a URL) and only one output variation (oEmbed's). If this conclusion is erroneous, I welcome correction. If not, I propose simplifying the implementation to be designed around a single button.</p> <h3 id="testing">Suggesting testing</h3> <p>Code changes to be evaluated are in <a href="https://git.drupalcode.org/project/url_embed/-/merge_requests/10">https://git.drupalcode.org/project/url_embed/-/merge_requests/10</a></p> <p>Beyond a normal code review for logic and syntax correctness:</p> <p>1. Review the new FunctionalJavascript test coverage for sufficiency: it demonstrates that unsupported URLs will trigger a validation warning and that supported URLs will be inserted into the editing area with the same format as the existing text format filter expects.<br> 2. Functionally test this in the context of a plain Drupal 9.5.x and Drupal 10.x site following the "Installation" section on the project homepage, <a href="https://www.drupal.org/project/url_embed">https://www.drupal.org/project/url_embed</a><br> 3. Read the instructions in js/ckeditor5_plugins/urlembed/README.md and verify that you can introduce a nominal change to the Javascript and complete the build process (<code>yarn run build</code>).<br> 4. Note that CKEditor 5 requires an SVG icon; this module previously only had a PNG. Confirm that the SVG Icon, generated by IcoMoon, complies with Drupal policy on 3rd-party assets (<a href="https://www.drupal.org/node/422996">https://www.drupal.org/node/422996</a>).</p> > Related issue: [Issue #3304326](https://www.drupal.org/node/3304326)