Highlight/Render current selection

1

A bit of a weird one, but we got customers asking why their selection is disappearing when they interact with other pieces in our application.

Turns out, they’re talking about the text selection no longer being visible, but afaik that’s normal browser behavior (like when you were in a text editor, and then switch to a different one, text input, etc…).

However, I looked at Word (on Windows 10) and Google Docs and they do keep it visible, each in their own way:

  1. Google Docs’ selection is usually blue, but when you interact with anything else (e.g. the find and replace modal), it turns gray. Same when you switch windows on your computer (and the tab looses focus).

  2. Word does something similar, but: there’s no color change, it’s all gray, and moving focus away from the Word window it makes the selection disappear, until you refocus.

Is there a way to show this in a way that’s similar to how Google Docs handles it?

Only way I can see this work is via a custom Decoration plugin, but that seems a bit overkill (e.g. have spans with a class “editor–focus-item” or something) in terms of node changes during selection.

Thanks in advance!

2

As you mention, you’d have to use a plugin that decorates the selection. Browsers will move the native selection when you move focus out of a field, so though ProseMirror still tracks it in its state.selection, it doesn’t exist in the DOM anymore.

3

damn - any ideas on how hard the performance issues might get on things like “CTRL+A” or larger selections across many, many paragraphs and custom nodes? It feels like a redraw nightmare.

Edit: I think I found a possible alternative, using the CSS Custom Highlight API. Maybe I can keep track of that via a per-editor ID or something…

1 Like
4

Okay, so quick update on this - a really bare-bones prototype of a plugin that uses the Custom Highlight API does seem to work just fine!

  1. When the editor gets created, I generate a unique editor ID
  2. It then creates a new style tag that styles the custom highlight (since they need to be unique across the app
  3. On selection updates, I use the highlights API.

Here’s how it looks so far (on the left, i got another editor, on the right the manuscript, with its selection grayed out):

image
image735×284 35.4 KB

5

Nice! That looks like a much better approach than decorations.

2 Likes