Feature: Show non-printing characters

[levensta]

Description

Inspired from #8519

Now that a generalized DOMSlot has been added to lexical and a powerful example of VisibleLineBreakExtension is available in the playground, it makes sense to expand its scope and implement a feature to display non-printing characters. This mode can be enabled in Google Docs and Word via a menu or keyboard shortcut, and certain whitespace characters will become visible. These mainly include:

• Line break ↵ (Shift + Enter)
• Paragraph mark ¶ (Enter)
• Space ·
• Tab →

How it looks in Docs and Word

In this mode, it is also useful to display ZWSP and WJ, which can be helpful for Asian languages but are also used in typography for other languages. The characters NBSP and SHY are also commonly used in typography, although they are no longer displayed in popular text editors

Impact

This is a particularly useful feature for visually distinguishing line breaks from blank paragraphs. Displaying the other characters is necessary for professional typography, when precise control over word breaks is required.

The most likely solution would be to create an extension in the playground and a button in the interface, since styling the characters requires CSS, which cannot be universal across all user editors

[mayrang]

Working on extending the existing VisibleLineBreakExtension to a VisibleNonPrintingExtension (playground extension with a Settings toggle, off by default) — covers ↵ on LineBreakNode, → on TabNode, and ¶ on ParagraphNode / HeadingNode / ListItemNode / QuoteNode via a shared data- attribute + CSS ::after. Ran into a layout snag on the trailing line-break case.

When the last child of a block is a LineBreakNode (Shift+Enter at the bottom), $reconcileElementTerminatingLineBreak adds a placeholder <br> so the caret has a line to sit on. The ::after renders one line below that placeholder instead of on the empty line itself, which doesn't match Word.

Tried:

• > br:last-child { display: none } — removes the line, caret loses its placeholder
• > br:last-child { visibility: hidden; height: 0 } — same; also bleeds into the empty <p><br></p> path
• pseudo-element repositioning — ::after can't share the trailing <br>'s line via CSS alone
• wrapping the __lexicalLineBreak <br> from the override's $updateDOM — fights the reconciler each turn

Any approach you'd suggest here? The other paths (empty block, text, text+Shift+Enter+text, tab, line-break, placeholder overlap) are all fine.

[etrepum]

What about something like this (obviously with a more specific selector so it's not always enabled):

.PlaygroundEditorTheme__paragraph::after {
  content: "¶";
  color: blue;
  position: absolute;
}
.PlaygroundEditorTheme__paragraph:has(br:last-child)::after {
  bottom: 0;
}
.PlaygroundEditorTheme__paragraph:last-child::after {
  display: none;
}

[mayrang]

Thanks — that pattern works. Added one tweak: narrowed :has(br:last-child) to :has(> br:last-child) since the LineBreakNode wrapper span's inner <br> is also :last-child of the wrapper and was matching when text followed the line break.