Title: Port to CKEditor 5 and support Drupal 10, 11 and 12

Problem/Motivation

Boxout is a CKEditor 4 plugin, and CKEditor 4 was removed from Drupal core in
10. The module declares drupal:ckeditor as a dependency, so it
cannot be installed on 10, 11 or 12 at all — this is not a deprecation to
clean up, the whole editor integration is gone:

  • src/Plugin/CKEditorPlugin/Boxout.php extends
    CKEditorPluginBase and uses the @CKEditorPlugin
    annotation. Neither exists any more.
  • js/plugins/boxout/plugin.js is a CKEditor 4 plugin and calls
    Drupal.ckeditor.openDialog().
  • boxout_ckeditor_css_alter() is a CKEditor 4 hook.
  • drupal_get_path() was removed in Drupal 10.
  • The dialog route requires access in-place editing, a permission
    that left core with Quick Edit in Drupal 10.

Worth noting that
#3286334 is
RTBC and claims Drupal 10 compatibility. Upgrade Status only looks for
deprecated API calls — it cannot see that the module depends on a module that
no longer ships, so that patch does not make Boxout installable.

Proposed resolution

Rebuild the editor integration as a CKEditor 5 block widget on a new
2.0.x branch, requiring ^10.3 || ^11 || ^12. Drupal
8 and 9 are end of life and stay on 8.x-1.x.

The box becomes a widget that is edited in place rather than through a dialog:
the header and body are editable regions inside it, and the style and header
element type are dropdowns on the widget's balloon toolbar.

The markup does not change:

<div class="boxout default">
  <h2 class="boxout-header">Header</h2>
  <p>Body</p>
</div>

The upcast converter matches what 8.x-1.2 produced, so existing content keeps
working and nobody has to migrate anything.

Added:

  • boxout.ckeditor5.yml
  • src/Plugin/CKEditor5Plugin/Boxout.php
  • js/ckeditor5_plugins/boxout/src/
  • js/build/boxout.js, committed — the drupal.org pipeline does
    not run a JavaScript build
  • package.json and webpack.config.js

Removed:

  • src/Plugin/CKEditorPlugin/Boxout.php
  • src/Form/BoxoutDialog.php and boxout.routing.yml
  • js/plugins/boxout/
  • boxout_ckeditor_css_alter()

Remaining tasks

  • Build the CKEditor 5 plugin.
  • Rewrite the functional test — it is still written against CKEditor 4 and
    uses assertResponse(), assertOption() and
    assertRaw() — and add a functional JavaScript test that drives
    the widget in a real browser.
  • Fix composer.json. It has a duplicate require key,
    so the empty second one wins and the PHP constraint is silently dropped. It
    also sets minimum-stability: dev and points at the retired cgit
    URL.
  • Add .gitlab-ci.yml. There is none — only a CircleCI config
    pinned to the Drupal 8 image.
  • Test on 10.3, 11 and 12.

Comments

marcelovani created an issue. See original summary.

  • marcelovani committed ac79ba07 on 3619574-ckeditor5-port
    Issue #3619574: Fix the lint jobs the new pipeline turned on
    
    Adding ....

  • marcelovani committed 8723dcf7 on 3619574-ckeditor5-port
    Issue #3619574: Satisfy eslint and stylelint
    
    Prettier formatting on the...

  • marcelovani committed 172e8735 on 3619574-ckeditor5-port
    Issue #3619574: Stop eslint tripping over the webpack config
    
    terser-...

  • marcelovani committed c1fd353b on 2.0.x
    Issue #3619574: Port to CKEditor 5 and support Drupal 10, 11 and 12
    
marcelovani’s picture

Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.