Skip to content

JM: Make rich-text editor previews match the published page (WYSIWYG) #2226

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

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

JM: Make rich-text editor previews match the published page (WYSIWYG) #2226

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ab2c71
Match story editor block spacing to the published page
maebeale Aug 16, 2026
e73583d
Make rhino editor previews match the published page (WYSIWYG)
maebeale Aug 18, 2026
f321619
Drop per-form editor styling; centering is content-driven
maebeale Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 55 additions & 3 deletions app/frontend/javascript/rhino/custom-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,50 @@ custom-rhino-editor table .column-resize-handle {
top: 0;
width: 4px;
}
custom-rhino-editor table p {
/* WYSIWYG: trix.css zeroes block margins inside .trix-content, so the editor jams
blocks together while the rendered `prose` page spaces them. Restore prose's
spacing (values mirror @tailwindcss/typography's em defaults). */
custom-rhino-editor .trix-content > :first-child {
margin-top: 0;
}
custom-rhino-editor .trix-content > :last-child {
margin-bottom: 0;
}
custom-rhino-editor .trix-content p,
custom-rhino-editor .trix-content ul,
custom-rhino-editor .trix-content ol {
margin: 1.25em 0;
}
custom-rhino-editor .trix-content li {
margin: 0.5em 0;
}
/* The editor wraps each list item's text in a <p>; the rendered page doesn't.
Zero it so the <li> margin (not the paragraph rule) controls list spacing. */
custom-rhino-editor .trix-content li > p {
margin: 0;
}
custom-rhino-editor .trix-content blockquote {
margin: 1.6em 0;
}
custom-rhino-editor .trix-content h1 {
margin: 0 0 0.889em;
}
custom-rhino-editor .trix-content h2 {
margin: 2em 0 1em;
}
custom-rhino-editor .trix-content h3 {
margin: 1.6em 0 0.6em;
}
custom-rhino-editor .trix-content h4 {
margin: 1.5em 0 0.5em;
}
custom-rhino-editor .trix-content figure {
margin: 2em 0;
}
custom-rhino-editor .trix-content hr {
margin: 3em 0;
}
custom-rhino-editor .trix-content table p {
margin: 0;
}
custom-rhino-editor a {
Expand All @@ -53,9 +96,18 @@ custom-rhino-editor a:hover {
color: #1e40af; /* Tailwind blue-800 */
}

/* Dashed border for grid cells that have hasBorder=false (editor only) */
/* Dashed border for grid cells that have hasBorder=false (editor only). Keep the
outline so the grid structure stays visible/editable, but strip the padding and
inner block spacing so the cell doesn't balloon — it previews at the size the
published page renders. */
custom-rhino-editor .grid-cell-editor[hasborder="false"] {
border: 2px dashed #ced4da; }
border: 2px dashed #ced4da;
padding: 0;
}
custom-rhino-editor .grid-cell-editor[hasborder="false"] > * {
margin-top: 0;
margin-bottom: 0;
}

custom-rhino-editor span.mention {
border: 1px solid #000;
Expand Down