Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for HTML className for Block objects #791

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

SergeyBurtsev
Copy link

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
Copy link

tbcooney commented Jun 2, 2020

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
Copy link

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

@SergeyBurtsev
Copy link
Author

SergeyBurtsev commented Jul 10, 2020

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
Copy link

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
Copy link

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
Copy link

Any updates on this?

Base automatically changed from master to main January 20, 2021 18:30
@Shelob9
Copy link

Shelob9 commented Feb 9, 2021

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
Copy link

@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
Copy link
Author

SergeyBurtsev commented Feb 22, 2021

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

@richlarcombe
Copy link

richlarcombe commented Feb 25, 2021

@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 #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
Copy link

@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
Copy link
Author

@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
Copy link

@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
Copy link

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
Copy link

artisr commented Jun 16, 2021

@SergeyBurtsev thank you for this! :)

@Mth0158
Copy link

Mth0158 commented Feb 27, 2022

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

@Eric-Guo
Copy link

Eric-Guo commented Mar 6, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.