[lexical-list] Bullet item color matches text color

[ivailop7]

Most text editors do bullet lists with the marker color matching the font color in that list item. Investigated a few editors and how they handle different colors in the same list item.
They do differ in behaviour quite a bit apparently.

One of the popular editors, follows the color of the last text node. As displayed below:

Screen.Recording.2025-01-07.at.21.43.48.mov

Another editor, follows the color only if all the text nodes inside the bullet have the same font color.

A third one doesn't support it at all.

In the end, I decided to go with the first one, it's kind of the standard behaviour most people expect. Also because it's easiest to reason about and implement. I'm also unsure if we should do first node or last node. Personally, I think the first text node makes more sense vs the last.

Before:

Screen.Recording.2025-01-07.at.23.31.29.mov

After:

Screen.Recording.2025-01-07.at.23.30.25.mov

Open to better implementaion ideas

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	❌ Failed (Inspect)			Jan 7, 2025 11:35pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 7, 2025 11:35pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	31.39 KB (0%)
lexical - esm	31.19 KB (0%)
@lexical/rich-text - cjs	40.47 KB (0%)
@lexical/rich-text - esm	33.12 KB (0%)
@lexical/plain-text - cjs	39.04 KB (0%)
@lexical/plain-text - esm	30.37 KB (0%)
@lexical/react - cjs	42.3 KB (0%)
@lexical/react - esm	34.42 KB (0%)

[ivailop7]

There is the pseudoclass '::marker' that can isolate the color change to the marker only, but I didn't find a nice way to set this via javascript.

[ivailop7]

@etrepum @zurfyx for ideas and comments

[etrepum]

This strategy is easy to implement but I don't think it's correct, IIRC updateDOM for parent nodes happens before the child nodes.

You couldn't do this with CSS and something like color: var(--marker-color) and set that from js (possibly from a mutation listener I guess, that would happen after everything is reconciled including children)?

[ivailop7]

This strategy is easy to implement but I don't think it's correct, IIRC updateDOM for parent nodes happens before the child nodes.

You couldn't do this with CSS and something like color: var(--marker-color) and set that from js (possibly from a mutation listener I guess, that would happen after everything is reconciled including children)?

This sounds like a better idea. I wanted to avoid another listener just for this, but I guess even updateDom itself is just another listener implementation. Will give it a go.

[etrepum]

You may also want to use getComputedStyle since the text could be colored by means other than setting the style attribute directly (although of course that's not how the playground works today, it may be a bit more robust in other settings).

[fantactuka]

Curious why lastChild vs firstChild (given it's closer to the marker)

[etrepum]

In Google Docs it like the marker color is based on what the text color was when the marker was created, but you can change it if you apply a color to its entire contents at once (e.g. changing the left half from black to blue, then changing the right half to blue, will not change the marker to blue, but selecting all of the text and changing it to blue at once will). This would mean storing the color on the list item itself and updating it accordingly, rather than just doing DOM stuff.

[ivailop7]

Curious why lastChild vs firstChild (given it's closer to the marker)

I agree it should be the first node, other editors opted for last one, thus I went with this. Probably because of their design. Will polish this sometime over the weekend.