Allow align classes to be configured

[adellibovi]

Hi,

I think it would be nice if AlignLeft, AlignRight, AlignCenter could have a custom class instead of the default ones. Mainly because one could have already defined its own classes for alignments and in case of using CSS frameworks they could have a different name for the same purpose: for example, in Bootstrap 4 they removed non responsive text alignment classes (text-center, text-left etc...) https://github.com/twbs/bootstrap/pull/18317

Also, I would like to ask if there is any particular reason why the editing of "settings" (i.e DEFAULT_TOOLS) are made by modifying the source. This is the only way to edit it, right? And, as an example, why it was preferred to an alternative solution as an options parameter of Editor init method. I am asking this since, if default tools properties are decided to be implemented, then probably it will change the structure of DEFAULT_TOOLS.

In the end, one way to achieve the custom class (without directly modify the source code) would be to:

• Fetch the tool
• Set the apply method of it. Is that correct? Is there any other way?

Thank you very much, and congrats for this great piece of software!

[anthonyjb]

Hi @adellibovi - thanks for your question and kind words,

Re. setting custom text align classes, you can currently configure these against their associated static Tool classes, like so:

// Set custom CSS class names for text alignment tools 
ContentTools.Tools.AlignCenter.className = 'my-align-center';
ContentTools.Tools.AlignLeft.className = 'my-align-left';
ContentTools.Tools.AlignRight. className = 'my-align-right';

Having said that the same can't be said for the CSS alignment classes for drag aligned classes like images and videos, these are hard coded in ContentEdit and I think it would make sense to make them configurable against the library.

Re. the DEFAULT_TOOLS settng, since there's only ever one instance of the editor app typically you might configure the tools initially using:

// Configure the initial set of tools
ContentTools.DEFAULT_TOOLS = [...tools...];

// Init the editor
var editor = ContentTools.EditorApp.get();
editor.init(...);

...or (and this is how you'd change it post init also)...

editor.init(...);
editor.toolbox().tools([...tools...]);

But this approach is due to change a bit moving forward as I'm currently working on a new feature that allows you to define the tools that are displayed in the toolbo for individual fields (as well as providing a fallback). I'll be posting some additional information as well as release notes for this over the weekend and I'm expecting to deliver it in the next 2 weeks, this stems from issue https://github.com/GetmeUK/ContentTools/issues/79 which also discuss some of the features we're looking to implement.

[adellibovi]

Perfect the solution about the alignments classes. I didn't thought about that. But I have to say that is buggy since in ContentTools.Tools.AlignLeft

        # Remove any existing text alignment classes applied
        for className in ['text-center', 'text-left', 'text-right']
            if element.hasCSSClass(className)
                element.removeCSSClass(className)

ContentTools is checking for hardcoded classes.

Thanks for pointing me out to toolbox tools method. I look forward to read more about this new request you are talking about.

[anthonyjb]

Ahh... good point - I'll make a note to update those at the same time so that they use the className variable too, these aren't big changes so I should get the update in this weekend - thanks for highlighting.

[adellibovi]

Ah okay, I was going to make a PR for that (forget about the commit), but I guess it's too little. I will wait for your update :) Thanks

[anthonyjb]

@adellibovi have pushed a version with the fix (just a straight copy of what put in your commit), will look at the image alignment side of things next.

[anthonyjb]

Hi @adellibovi just to let you know you can now configure the alignment CSS class names used when editable elements are dragged left / right of another element, the settings are against the ContentEdit.ALIGMENT_CLASS_NAMES setting, see here: https://github.com/GetmeUK/ContentEdit/blob/master/src/scripts/namespace.coffee#L7

I'm just about to update the API docs now, thanks again for your help with these.

[adellibovi]

Thank you and keep going with the good work!