Research how to add plugins for CKEditor5 and implement it for this module

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ozin created an issue. See original summary.

ozin’s picture

Issue summary: View changes

Luckie Joe made their first commit to this issue’s fork.

emptyvoid’s picture

It's not clear to me how I would generate a patch to the current release or integrate the two very different branches.

emptyvoid’s picture

StatusFileSize
new1.04 MB

I compared the two branches to 8.x-dev and the 3310866-ckeditor-5-support branch is identical to the current dev branch.
I then manually merged the ckeditor5-support branch into 8.x-dev.

Patch attached.

I'm attempting to test this using Ckeditor5 on Drupal 9.5.5.. we'll see if it loads.

emptyvoid’s picture

So, this patch registers the icon into the editor configuration for a given input type in Drupal.
And when in edit mode for the body of a page it provide dialog inline in the editor to specify a tab set name and the number of tabs to include.

And that's when it fails.
It doesn't appear to load the templated structure into the DOM in the editor and simply paces two tab titles in a paragraph tag.

CSS fails, Javascript fails.

Though inspecting the code the bootstrapTabs plugin code does appear to be in place for legacy ckeditor4 as well as the new ckeditor5_plugins sub directory with code for a ck5 plugin. I'm not all that up on understanding the SDK and API integration between custom ckeditor5 plugins and the Drupal Plugin SDK and classes for integration.

Sure wish there was some articles and or example code for us to review.

So this is maybe 35% complete?

ozin’s picture

Hi @emptyvoid, thanks for your work.
We have a new dev branch 2.0.x, in this branch, we plan to implement CKEditor5.
Your patch is a good starting point, I hope development will move further faster now

s7434’s picture

Is the dev branch 2.0.x inluded ckeditor5 support?

Dylan Donkersgoed made their first commit to this issue’s fork.

dylan donkersgoed’s picture

I've expanded this patch to handle upcasting/downcasting bootstrap tabs. You can now load an existing page with tabs on it, edit the tabs, and save it and have everything work (at least from some cursory testing).

There's still a bit of work to do (e.g. the button isn't working correctly to add/expand tables at the moment and you can't change the active tab) but I hope to have that done within the next couple days.

dylan donkersgoed’s picture

StatusFileSize
new1.37 MB

MR seems to be in a fully functional state now, attaching a patch.

There's probably room for some code cleanup, I'm not sure some of the separate upcast/downcast methods are still necessary, though they work fine.

dylan donkersgoed’s picture

Status: Active » Needs review
dylan donkersgoed’s picture

StatusFileSize
new1.38 MB

Few more fixes. Notably there was an error when trying to edit source with my last few changes and there was a conflict with the core list plugin.

dylan donkersgoed’s picture

StatusFileSize
new1.38 MB

Forgot to actually build the plugin after the last change, new patch.

dylan donkersgoed’s picture

StatusFileSize
new1.38 MB

Apparently I forgot to push so that was just the same patch as before. Here's the rebuilt patch for real.

ozin’s picture

Assigned: Unassigned » ozin

Hi Dylan!
Thanks for the patch, I will take a look as soon as possible.

Jaspreet.gill’s picture

Hi

I applied #16 patch but it is breaking HTML layout in ckeditor editor side.

robloach’s picture

Hi Mykhailo! Been using this on a site, and it has been working well :) ... Thanks so much for pushing this forwards, DylanDonkersgoed. Happy to help out with git pushes and the release if you need another co-maintainer.

robloach’s picture

@DylanDonkersgoed I see your latest changes! Nice work. Could you add a basic composer.json in there? Something like this could be sufficient...

{
    "name": "drupal/ckeditor_bootstrap_tabs",
    "type": "drupal-module",
    "license": "GPL-2.0-or-later",
    "require": {}
}
dylan donkersgoed’s picture

I pushed up a few more fixes for issues we ran into:

  • When adding a new tab set it adds paragraphs by default. Without it it's quite tricky to select and edit text inside the tab after first adding tabs. Also, with just raw text CKE5 overwrites this with a paragraph when saving anyway (or at least something about Drupal's full html format does), so this keeps things more consistent.
  • I fixed an issue where changing the number of tabs would sometimes add too many new tabs.
  • I fixed an issue where the heading plugin (and maybe others, though that was the only one I could find with the issue) was not usable inside tabs. I don't fully understand why, but splitting the tab content and tab pane into multiple elements seems to have fixed it.

@RobLoach I also added a rudimentary composer.json. Please feel free to push to the MR if you need to,

dylan donkersgoed’s picture

StatusFileSize
new1.37 MB

Also, attaching a new patch file from the latest MR.

Status: Needs review » Needs work

The last submitted patch, 22: 3310866-22-ckeditor-5-support.patch, failed testing. View results

ozin’s picture

Status: Needs work » Fixed

New release 2.0.0 with CKEditor 5 support has been released, thanks everyone for the great work!

dimitrihokonmoy’s picture

Thanks for working on this.
Works for me.Thank You

dimitrihokonmoy’s picture

robloach’s picture

This is fantastic. Congrats on the release!

emptyvoid’s picture

Awesome work!

I'm gonna review your work as it's really unclear where to define GUI elements in the Drupal API verses the CkEditor 5 API.
I burned about a month attempting to help the management team for this module with some success.

https://www.drupal.org/project/ckeditor_bootstrap_grid

We'll see if your work can provide some light at the end of the tunnel.

Status: Fixed » Closed (fixed)

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