Fix TipTap editor: formatting toolbar buttons don't visibly render - #29
Conversation
Tailwind's preflight reset strips default browser styling from h1-h6, ul/ol, blockquote, pre/code, hr, etc. Bold/Italic were the only toolbar buttons that visibly worked because <strong>/<em> render bold/italic natively with no CSS. Every other button (headings, lists, blockquote, code block, horizontal rule, highlight, task list) correctly changed the underlying HTML tag, but it rendered identically to plain text in the editor, so it looked broken. Added typography rules scoped to .lh-rich-editor-content .ProseMirror. This is the single shared TipTap instance (RichEditorTiptap, wired through FormRenderer's richtext widget) used for every content_html / description field across content types (blog_article, podcast_episode, landing_page, and the home_page hero), so one fix covers all of them.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c2d2e11b6e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
|
|
||
| .lh-rich-editor-content .ProseMirror { | ||
| outline: none; |
There was a problem hiding this comment.
Keep a visible focus indicator on the editor
When users tab into the TipTap contenteditable, this rule removes the browser outline and the wrapper/editor CSS doesn't add any :focus/:focus-visible ring, leaving no visible indication that the editor has focus. This is an accessibility regression for keyboard users; either retain the outline or replace it with a scoped focus style.
Useful? React with 👍 / 👎.
Summary
On the Home Page hero (and every other content_html/description field — blog, podcast, landing page — since they all share the one
RichEditorTiptapcomponent viaFormRenderer's richtext widget), only Bold and Italic visibly did anything in the editor. Every other toolbar button (H1-H6, lists, blockquote, code block, horizontal rule, highlight, task list) correctly toggled the underlying HTML tag, but nothing changed on screen.Root cause: Tailwind's preflight reset strips default browser styling from
h1-h6,ul/ol,blockquote,pre/code,hr, etc. Bold/Italic worked by accident —<strong>/<em>render bold/italic natively with zero CSS. Nothing compensated for the reset inside the editor's contenteditable area (.lh-rich-editor-content), so those tags rendered as plain text.Fix
Added typography rules scoped to
.lh-rich-editor-content .ProseMirrorinclient-src/common/admin_styles.css— headings, lists (incl. task list checkboxes), blockquote, code block, hr, highlight/mark, links, images, underline/strike. One shared component, one CSS fix, covers every content type's rich text field.Test plan
yarn test— 69/69 suites, 412/412 tests pass locally.vars.toml/Cloudflare secrets in this worktree) to visually confirm in-browser — please verify the editor toolbar (headings/lists/blockquote/etc.) renders visibly after deploying via your GitHub Actions pipeline.