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.

Sign up for GitHub

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

Jump to bottom

Render sanitized Trix Editor text with proper styling #223

Merged
merged 4 commits into from
Aug 9, 2023
Merged

Render sanitized Trix Editor text with proper styling #223

merged 4 commits into from
Aug 9, 2023

Conversation

gazayas
Copy link
Contributor

@gazayas gazayas commented Mar 31, 2023 •
edited
Loading

Continuation of #207.

The problem

Ordered list bullet points and ordered list numbers were showing up in the form for trix editors, but they weren't being displayed on the show page.

Details

By default, Rails adds a .trix-content to rich text records. According to the docs,

By default, Action Text will render rich text content inside an element with the .trix-content class:

<%# app/views/layouts/action_text/contents/_content.html.erb %>
<div class="trix-content">
  <%= yield %>
</div>

I confirmed this via the Rails console:

pry(#<#<Class:0x00007f9ad3d05e60>>)> object.send(attribute).to_s
  Rendered /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/action_text/contents/_content.html.erb within layouts/action_text/contents/_content (Duration: 5.9ms | Allocations: 468)
=> "<!-- BEGIN /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/layouts/action_text/contents/_content.html.erb --><div class=\"trix-content\">\n  <!-- BEGIN /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/action_text/contents/_content.html.erb --><ol><li>Ordered</li></ol><ul><li>Unordered</li></ul>\n<!-- END /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/action_text/contents/_content.html.erb --></div>\n<!-- END /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/layouts/action_text/contents/_content.html.erb -->"

However, since we're sanitizing the text, the .trix-content class gets lost when rendering it:

pry(#<#<Class:0x00007f9ad3d05e60>>)> html_sanitize(object.send(attribute).to_s)
  Rendered /home/gazayas/.rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/actiontext-7.0.4.3/app/views/action_text/contents/_content.html.erb within layouts/action_text/contents/_content (Duration: 4.0ms | Allocations: 468)
=> "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<div>\n  <ol><li>Ordered</li></ol>\n<ul><li>Unordered</li></ul>\n</div>\n</body></html>\n"

The fix here ensures we render the text with .trix-content while still using html_sanitize. Since there was already some CSS for .trix-content in the actiontext.css stylesheet, I added the styles there.

cc/ @kitebuggy

@jagthedrummer jagthedrummer merged commit ce7d358 into main Aug 9, 2023
@jagthedrummer jagthedrummer deleted the fixes/rendered-trix-editor branch August 9, 2023 21:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@gazayas @jagthedrummer