Ckeditor 5 Compliant

Hi @emptyvoid

I've opened a new 3.0.x branch https://git.drupalcode.org/project/ckeditor_bootstrap_grid/-/tree/3.0.x?... where I forked https://www.npmjs.com/package/@adnan-haider/two-layout-grid and made it work for Drupal CKeditor5.

I've done some experimentation on it but at very early stages.

To work on it you will need to install the node_modules and do a npm run build everytime you have a change.
I also recommend installing https://www.drupal.org/project/ckeditor5_dev → and having a look at their ckeditor5_plugin_starter_template.

Hopefully we can get a alpha release soon.

Thank you

CK5 efforts are much appreciated on this, as it seems to be one of few contrib solutions to get columns in the body field.

Foxy-vikvik → closed merge request !1

Foxy-vikvik → closed merge request !2

Foxy-vikvik → reopened merge request !1

Foxy-vikvik → closed merge request !1

Hello,
The current proposed plugin does appear to be making progress and provides fixed layouts. But the class names used are not Bootstrap 4/5 compliant.

https://getbootstrap.com/docs/5.0/layout/grid/

So it won't render correctly when a site uses a bootstrap 5 theme.

I'm still struggling with modeling a series of ckeditor 5 plugins to have a more sophisticated feature set. The documentation is truly horrible is not totally lacking.

I've modeled a container > row > column object structure that renders. But I am having a hard time creating attributes and a div class management class to shuffle the column classes from 1-12. The grid plugin can create a new container > row > col placeholder. But editoring the col or row to add properties or classes is proving difficult.

So I started with writing a column focused plugin that makes columns editable objects and now I'm struggling with writing balloon buttons to add and remove columns from the listing.. If I can figure that out the next is attributes for each column and properly adding the multiple col classes for each break point col-xs, col-sm, col-md, col-lg, and the column widths 1 - 12.

As I've been complaining the ckeditor document is non existent and worse it all in type script not native Javascript. I'm considering loading up a converted so I can take examples of key plugin features into javascript so I can learn something. The API documentation has no code examples.. so it requires a lot of trial and error.

No wonder so many of the ckeditor modules are stalled and not upgraded.. this transition is as painful as learning Drupal 8 from Drupal 7.

Anyway I'll keep at it.. just really, really annoyed that the poor documentation on the subject and the abstracted "code samples" which don't seem to compile.

(sigh)

The Battle continues.

Update, made significant progress in the last few weeks.
The key was learning and building my code project using the Ckeditor Package distribution. Utilizing node.js and TypeScript to "build" a editor instance and modeling the classes in TypeScript that auto compiles the source files into JavaScript.

I build out the base structure and now I'm working on the column properties to define one or more breakpoints in the grid. Also going to add commands to insert, edit and delete columns in a row. As well as a menu to add and remove rows and a default container > row > column button.

So Making progress and honestly this was only possible because of the Package repo and node.js compiling along with having the source for CkEditor so that I can audit and use design patterns outlined in the Ckeditor Table plugin.

My goal is to create the core plugin and provide a Git Repo of the raw plugin.
Then I'll work on a new version of the Drupal Module integrating the plugin.
But set your expectations appropriately, this may take me a few more months.

Just in time compile of the plugin so far.

Code Structure (so much more to go)

The battle continues . . .

Note even working, but I've posted a public repo on my work and will check in work thus far as I debug/testing the features as I build it.

Ckeditor 5 - TypeScript Plugin
https://github.com/rfoleyexequt/ckeditor5-bootstrapgrid

Hi guys,
Thank you for your hard work. So, I pull the changes of @lexsoft and @foxy-vik from ckeditor-bootstrap-grid-3356334-3.x.0 branch. The problem is whenever I add a new grid column to the body field, the newly added grid column works but the existing grid columns get affected. Please check differences in class names in the following source code of ckeditor5 -

<div class="simple-grid row ck-widget" data-label="Grid" contenteditable="false">
    <div class="simple-grid-layout col-xs-12" data-label="Column">
        <p>
          content
        </p>
    </div>
    <div class="simple-grid-layout col-xs-12" data-label="Column">
        <p>
           content
        </p>
    </div>
</div>
<div class="simple-grid row type--default two-col ck-widget" data-label="Grid" data-type="default row two-col" contenteditable="false">
    <div class="simple-grid-layout col-xs-12 col-md-6" data-label="Column">
        <p>
         content
        </p>
    </div>
    <div class="simple-grid-layout col-xs-12 col-md-6" data-label="Column">
        <p>
           content
        </p>
    </div>
</div>

When we add new columns, the classes of existing columns get disturbed. I am not sure what's happening at this point and I am still debugging.

Update: When I enable the plugin(toolbar) of ckeditor_bs_grid module, the issue mentioned in #16 seems to be solved.

Not able to apply patch from MR with any version of ckeditor_bootstrap_grid

Hi @imran1217
@foxy-vikvik had committed some changes on top of @lexsoft - ckeditor-bootstrap-grid-3356334-3.x.0. I pull the codebase from that branch in my local and make it a contrib module, FYI.

@niral098 if you have any improvements that you've done on your local, please share them with us in the form of patch. Any help no matter how small it's appreciated.

I've been held up with other work, hopefully will come back to this soon.

@lexsoft The module is working fine with #17 (workaround) so far. However, I believe a better solution is required. I am still debugging #16 whenever I get a chance. I will share my work as soon as I get something concrete. Thanks!

Hello everyone!

After the above changes I was able to configure the CKEditor Widgets Bootstrap Grid for all the text formats. Attaching screenshot for reference. Thanks!

Hi @siddharthjain Thank you for the work so far!
I pulled your changes and tested the feature. It's still not working on my end. Can you please test the following scenario -
1. Create a new node. Put some dummy content in a couple of grids. Save the node. It should work at this point.
2. Re-edit the node by adding a couple of grids with data. Save the node. It breaks.

I was still facing issues with this patch, and observed the console following error I looked at the following problems similar with other Ckeditor plugins

https://www.drupal.org/project/ckeditor_find/issues/3457140 →
https://www.drupal.org/project/ckeditor5_template/issues/3456952 🐛 Updating core to 10.3 breaks CKEditor Fixed

https://www.drupal.org/project/ckeditor_iframe/issues/3462027 🐛 TypeError: t.Model is not a constructor (Drupal 10.3 compatability) Needs work

https://www.drupal.org/project/ckeditor_font/issues/3456088 🐛 Incompatibilidad con Drupal 10.3.0 Postponed: needs info

https://www.drupal.org/project/ckeditor_templates_ui/issues/3457332 🐛 Updating core to 10.3 breaks CKEditor Fixed

Added the changes with the fix

I took from #2 (https://git.drupalcode.org/project/ckeditor_bootstrap_grid/-/merge_reque...) and ported to version 2.0.0 as patch
- added compatibility for existing grid.
- fixed loosing classes after save content
- fixed ckeditor button