Discourse unformatted code detector

Django Internals Website
4

(@ChathuraGH your deleted post raised a valid concern.)

On devices that support touch input—including a lot of Windows laptops—Discourse’s editor toolbar makes it hard to find the Preformatted text button that inserts a code block:

Discourse editor toolbar on touch device. Buttons left to right: quote, bold, italic, link, block quote, emoji, insert date, gear/cog.
Discourse editor toolbar on touch device. Buttons left to right: quote, bold, italic, link, block quote, emoji, insert date, gear/cog.736×182 7.97 KB

The code button is hidden inside the gear menu.[1] (But Insert date/time is included in the main toolbar :face_with_raised_eyebrow:.)

Screen recording of Discourse editor panel on touch device. Tap the gear/cog button in the editor toolbar and a menu appears. Tap "Preformatted text" in the menu. The menu closes, and a fenced code block is inserted in the compose area containing the text "type or paste code here" selected for editing.

Discourse decides toolbar contents based on presence of a touch input device, rather than responsive layout (it just wraps wide toolbars). On non-touch devices, Discourse includes the code button early in the editor toolbar, no need to dig around:

Discourse editor toolbar on non-touch device. Buttons left to right: quote, bold, italic, link, block quote, preformatted text, insert picture, bullet list, numbered list, emoji, (wrap to next line) insert date, gear/cog.
Discourse editor toolbar on non-touch device. Buttons left to right: quote, bold, italic, link, block quote, preformatted text, insert picture, bullet list, numbered list, emoji, (wrap to next line) insert date, gear/cog.708×286 8.72 KB

To fix this, we could customize Discourse’s CSS+JS (thread starting here) or add a theme component that shows the code button in all toolbar layouts.

(Also, it might be helpful to call this button “Code” rather than “Preformatted text.” I think that’s configured in Discourse under Admin > Customize > Text > js.composer.code_title.)

  1. The gear/cog button has its own usability problems: a gear usually means “settings” or “preferences” (including elsewhere in Discourse itself!), not “more toolbar commands.” And nothing about it suggests it will pop up a menu. ↩︎

2 Likes