Skip to content

input_code_editor(): fix caret drift caused by prism theme font-family override#1304

Merged
gadenbuie merged 3 commits intomainfrom
fix/1303-input-code-editor-caret
Apr 29, 2026
Merged

input_code_editor(): fix caret drift caused by prism theme font-family override#1304
gadenbuie merged 3 commits intomainfrom
fix/1303-input-code-editor-caret

Conversation

@gadenbuie
Copy link
Copy Markdown
Member

Closes #1303

Summary

Prism Code Editor themes (e.g. prism-okaidia) hardcode a font-family declaration directly on .prism-code-editor. Because bslib's code-editor.css only set font-family on bslib-code-editor .code-editor and its textarea/pre/code children — not on .prism-code-editor itself — the theme's font won the cascade and caused the caret to visually drift to the right of the actual text insertion point.

The fix adds .prism-code-editor to the existing font selector in inst/components/dist/code-editor.css, ensuring bslib's monospace font overrides whatever the theme injects.

Verification

Open input_code_editor() with any non-default theme and type a long line of code. The caret should stay visually aligned with the insertion point throughout.

library(shiny)
library(bslib)

ui <- page_fillable(
  input_code_editor("code", value = "f <- function(x) x + 1\nf(42)", language = "r", theme = "prism-okaidia")
)

shinyApp(ui, \(i, o, s) {})

@gadenbuie gadenbuie marked this pull request as ready for review April 27, 2026 17:23
@cpsievert
Copy link
Copy Markdown
Collaborator

Looks like 7c3b7d3 undid the intended fix, maybe since it's a "distributed file"?

Comment thread inst/components/dist/code-editor.css
…ret drift

Prism themes hardcode `font-family` directly on `.prism-code-editor`,
which wins over bslib's monospace font override and causes the caret to
visually drift from the actual insertion point.

Closes #1303
@gadenbuie gadenbuie force-pushed the fix/1303-input-code-editor-caret branch from 720e12e to 7ae18b9 Compare April 28, 2026 17:15
@gadenbuie gadenbuie merged commit 65b50da into main Apr 29, 2026
12 checks passed
@gadenbuie gadenbuie deleted the fix/1303-input-code-editor-caret branch April 29, 2026 12:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

input_code_editor(): caret drifts right of actual insertion point while typing

3 participants