JM: Make rich-text editor previews match the published page (WYSIWYG) - #2226
Open
maebeale wants to merge 4 commits into
Open
JM: Make rich-text editor previews match the published page (WYSIWYG)#2226maebeale wants to merge 4 commits into
maebeale wants to merge 4 commits into
Conversation
maebeale
changed the title
The rhino-editor's bundled trix.css zeroes out block margins inside .trix-content, so while editing, paragraphs and other blocks jammed together with no separation — yet the published story (wrapped in Tailwind `prose`) spaces them normally. That mismatch made the editor hard to read and non-WYSIWYG. Restore prose's block spacing in the editor so what you type matches what readers see. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
maebeale
force-pushed
the
maebeale/reorder-featured-stories
branch
from
August 17, 2026 05:50
236e9d1 to
8ab2c71
Compare
jmilljr24
approved these changes
Aug 17, 2026
jmilljr24
left a comment
jmilljr24
left a comment
Collaborator
There was a problem hiding this comment.
No required, but some screenshot would be nice. I pulled this down quick and tried to find an example of what that changes but I didn't notice anything.
Collaborator
Author
|
@jmilljr24 Before and after, where spacing looks in Edit more like how it will look on Show. 
|
maebeale
changed the title
maebeale
marked this pull request as ready for review
August 18, 2026 09:53
Beyond block spacing, the editor diverged from the show page in ways that made rich content (event header/description) look nothing like it renders: the show page wraps rhino content in per-field prose classes the editor didn't share (full-width + centered images), and borderless grid cells ballooned in the editor from padding plus restored block margins. Parameterize rhino_editor with centered/full_width_images so each form can wrap its editor in the same prose classes its show page uses, and opt the event header/description in to match events/show. Keep the dashed grid-cell outline for editing structure but drop its padding and inner block spacing so cells preview at the published size. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
maebeale
changed the title
jmilljr24
reviewed
Aug 18, 2026
|
|
||
| <div class="form-group <%= 'has-error' if f.object.errors[:rhino_header].present? %>"> | ||
| <%= rhino_editor(f, :header, label: "Header content") %> | ||
| <%= rhino_editor(f, :header, label: "Header content", centered: true, full_width_images: true) %> |
Collaborator
There was a problem hiding this comment.
I know there isn't really any risk with this because it's just the editor but I don't love the idea of setting different styling for editors in different places. This is making the assumption that every Event will have the header section as a full width image.
I understand the slight discrepancy from the editor to the view, but every editor on the entire internet displays things differently from edit to show.
Review feedback: the rhino_editor `centered:`/`full_width_images:` options set different styling per form and baked in the assumption that every event header is a full-width, centered image. Centering already comes from the content's own inline `text-align` (the toolbar writes it), so it renders the same in edit and show without the frame forcing it — the option was redundant. Drop both options and the per-form calls; keep the universal block-spacing and dashed-cell tweaks, which aren't per-form. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The first pass only covered a handful of block margins, so lists, tables and grid cells still previewed at sizes the published page never renders. trix.css's blanket `.trix-content *` reset outranks the `prose` wrapper the editor already sits in, so every value prose supplies has to be restated at that weight: list indents and item spacing, blockquote, h1-h4, figure, hr, prose's table font-size and cell padding, and the grid cell's own `p-3`. Drop the editor-only table padding and zeroed cell margins for the same reason — the published page gives paragraphs inside a cell full prose margins, so zeroing them here made the editor the odd one out. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤖 suggested review level: 1 Skim 👀 CSS-only; no Ruby, JS, or markup changes
What is the goal of this PR and why is this important?
prose(app/views/layouts/action_text/contents/_content.html.erb). The editor sits in the sameprosewrapper, buttrix.css's blanket.trix-content *reset zeroes every margin and padding — so the editor showed collapsed blocks, unindented lists, and oversized tables.How did you approach the change?
custom-rhino-editor .trix-content, every value the reset strips: paragraph/list margins, list indent and item spacing, blockquote,h1–h4,figure,hr,tablefont-size + cell padding, and the grid cell's ownp-3.@tailwindcss/typography's em defaults, so the two stay in step..trix-content *is required, hence the repetition rather than leaning onprose.tablepadding and zeroed cell margins — the published page gives paragraphs inside a cell full prose margins.h1's font-size:trix.cssshrinks it to1.2em, which would halve the em-based margin below it.UI Testing Checklist
Anything else to add?
centered:/full_width_images:options onrhino_editorwere dropped — centering already comes from the content's own inlinetext-align, so no per-form styling is needed. This PR is now CSS-only.