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 4 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
4 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
e9bc450
Restate the whole prose block model inside the editor
maebeale Aug 23, 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
95 changes: 87 additions & 8 deletions app/frontend/javascript/rhino/custom-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
custom-rhino-editor table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
Expand All @@ -9,13 +8,9 @@ custom-rhino-editor table td, custom-rhino-editor table th {
border: 2px solid #ced4da;
box-sizing: border-box;
min-width: 1em;
padding: 3px 5px;
position: relative;
vertical-align: top;
}
custom-rhino-editor table td > *, custom-rhino-editor table th > * {
margin-bottom: 0;
}
custom-rhino-editor table th {
background-color: #f1f3f5;
font-weight: bold;
Expand All @@ -41,8 +36,85 @@ custom-rhino-editor table .column-resize-handle {
top: 0;
width: 4px;
}
custom-rhino-editor table p {
margin: 0;
/* WYSIWYG: the editor already sits inside a `prose` wrapper, but trix.css's blanket
`.trix-content *` reset outranks it, so every value prose would supply has to be
restated at that weight. 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;
}
/* The reset also strips prose's list indent, which trix.css only partly replaces
with `li { margin-inline-start: 1em }` — restate both so bullets line up. */
custom-rhino-editor .trix-content ul,
custom-rhino-editor .trix-content ol {
padding-inline-start: 1.625em;
}
custom-rhino-editor .trix-content ul ul,
custom-rhino-editor .trix-content ul ol,
custom-rhino-editor .trix-content ol ul,
custom-rhino-editor .trix-content ol ol {
margin: 0.75em 0;
}
custom-rhino-editor .trix-content li {
margin: 0.5em 0;
padding-inline-start: 0.375em;
}
custom-rhino-editor .trix-content > ul > li p {
margin: 0.75em 0;
}
custom-rhino-editor .trix-content > ul > li > p:first-child,
custom-rhino-editor .trix-content > ol > li > p:first-child {
margin-top: 1.25em;
}
custom-rhino-editor .trix-content > ul > li > p:last-child,
custom-rhino-editor .trix-content > ol > li > p:last-child {
margin-bottom: 1.25em;
}
custom-rhino-editor .trix-content blockquote {
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
margin: 1.6em 0;
padding-inline-start: 1em;
}
/* trix.css shrinks h1 to 1.2em, which would leave the em-based margin below at
roughly half the published gap. */
custom-rhino-editor .trix-content h1 {
font-size: 2.25em;
line-height: 1.1111111;
margin: 0 0 0.8888889em;
}
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 :is(h2, h3, h4, hr) + * {
margin-top: 0;
}
custom-rhino-editor .trix-content table {
font-size: 0.875em;
line-height: 1.7142857;
margin: 2em 0;
}
custom-rhino-editor .trix-content table :is(td, th) {
padding: 0.5714286em;
}
custom-rhino-editor a {
text-decoration: underline;
Expand All @@ -53,9 +125,16 @@ custom-rhino-editor a:hover {
color: #1e40af; /* Tailwind blue-800 */
}

/* The reset strips the cell's `p-3`; restate it so the cell previews at the size
the published page renders. */
custom-rhino-editor .trix-content .grid-cell-editor {
padding: 0.75rem;
}

/* Dashed border for grid cells that have hasBorder=false (editor only) */
custom-rhino-editor .grid-cell-editor[hasborder="false"] {
border: 2px dashed #ced4da; }
border: 2px dashed #ced4da;
}

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