Added support for HTML className for Block objects

[SergeyBurtsev]

This PR allows to use HTML class attribute (className) for Block level objects and that allows to add extended functionality like text alignment adding and toggling those classes for the nearest block object.

[tbcooney]

If this is going to be eventually supported I would love to see this extended to textAttributes as well, for inline elements. I know @rafaelfranca closed an feature request that was disguised as an Issue, @javan would Sergey's PR be sufficient to mark as a solution to the issue?

[clarkcode]

Awesome work @SergeyBurtsev! This will make adding classes to block objects way easier.

[SergeyBurtsev]

Thank you @clarkcode ! Maybe I did this patch too hastly without discussing with anyone here and only then realized that it can violate Trix philisophy and long-term plans. I am less professional than others here, so I am not surprised if I missed the point :)

[vitality82]

When will this be resolved? I been thinking all the time that TRIX can be extended with custom toolbar items, but apparently there's no way I can extend it to support a block level element like "textAlign: center" in a clean way without className support. This is a dealbreaker since I have to support existing rich text content and I've lost a fair amount of time on researching this. I'm very happy with TRIX but can you please give an update on this matter?

[mguidetti]

Hoping there's some movement on merging this soon as well.

I need to wrap some text in a div with a class in a project I'm working on. Is there any workaround for this currently until this is merged?

[davissp14]

Any updates on this?

[Shelob9]

I am currently attempting to impliment mentions in a Trix editor. I am attempting to do something like editor.insertHTML(<strong class="mention-${userId}>${userName} ); but can not add class attribute or any other way to target that with CSS. This PR would help very much.

[richlarcombe]

@SergeyBurtsev was hoping you might be able to help advise. I'm adding a block object with tags successfully from a custom button on the toolbar, but was thinking an addition like this would allow your changes to also append a class, alas ave tried a few things but unable to get them to show.

 Trix.config.blockAttributes.smallbox = { 
      tagName: 'small-box', 
      className: 'class-name-test',
      };

[SergeyBurtsev]

@richlarcombe I've refactored the fork, so now it should work the way you suggested.

[richlarcombe]

@SergeyBurtsev, this is a great help, many thanks. There is one related issue that is holding this back being usable though. When you initially load the trix editor and add the block object, the class is applied and block appears as intended and also when the page is viewed on the front end, all appears well. The problem arises when you reopen the trix editor the className (and tagName if you have one) appears to be stripped on load. I'm not suggesting that your change is introducing this problem, it's just impacted by this existing issue, so i'm not sure where to go from here? The issue https://github.com/basecamp/trix/issues/864 is similar, but for me the other block objects i have on the same page without classNames added, still render ok (tags remain intact) - so don't believe the same solution with the ordering of the sanitising is applicable. Frustratingly close to nice solution.

[richlarcombe]

@SergeyBurtsev actually after further testing have found that this issue only occurs for multiple strings in the class field. So using just a single class name does render ok fine upon re-edit, although not sure how useful this will be in it's current form as the main use case i would of thought would be to add multiple class names - as in "col-md-4" & "col-sm-6" etc with bootstrap styling for example. Any chance you could amend to facilitate a list of classes?

[SergeyBurtsev]

@richlarcombe You are right about multiple classes. I've updated the HTMLParser, so it now compares full className string of the element, so you could use it like: Trix.config.blockAttributes.smallbox = { tagName: 'small-box', className: 'class-name-1 class-name-2', };

But I still don't know if this addon is valuable for the core Trix editor. Maybe I should close this PR and implement it as a separate patch, which can by applied over the official release if needed.

[richlarcombe]

@SergeyBurtsev thanks for that, works great. I think there'll be a fair few people keen to see this go into the mainline, but guess that's not our call. I'm a +1.

[petebytes]

But I still don't know if this addon is valuable for the core Trix editor. Maybe I should close this PR and implement it as a separate patch, which can by applied over the official release if needed.

@SergeyBurtsev I would donate towards this patch.

[artisr]

@SergeyBurtsev thank you for this! :)

[Mth0158]

Is this ever be implemented? It would be such a game-breaker feature for Trix usage... @dhh

[Eric-Guo]

@Mth0158 I already published adding this PR custom trix version, including the align center and right button in toolbar also, you can check the code if you having my similar requirement.