Function unfocusedSelectionIndicatorPlugin

Shows a fake selection decoration while the editor is unfocused and restores the previous selection* when the editor gains focus again. It also prevents initial focus in events from changing the selection (when it's a selection and not a single position).

So if the user focuses on something like the search bar or the devtools panel, focusing back to the editor doesn't change the selection.

Focusing other elements inside the editor does not count as blurring the editor.

The plugin will add three classes to the decorations, the main class to all the nodes, then the start and end classes to the start and end nodes respectively. This is so you can style the selection correctly since everything from the start right up to the end will have a little extra padding to the right. Therefore technically the start class is not needed, but it's there if needed.

Some css like this is needed to make it work. The tailwind classes already include some pm-unfocused-selection and pm-unfocused-selection-end utility classes that take care of this. They use the css variable --pmUnfocusedSelectionColor to set the color. They look like this:

.pm-unfocused-selection {
	background-color: var(--pmUnfocusedSelectionColor);
	box-shadow: 5px 0 0 0 var(--pmUnfocusedSelectionColor);
}
.pm-unfocused-selection-end {
	box-shadow: none;
}
Copy

Note regarding styling:

It does not seem possible to get the real default color of selections so the best alternative is probably to use a custom selection color for the real selection. But just setting the same color to both won't work. The real selection gets some transparency added automatically so they will look different, plus the text changes color to indicate focus (which we wouldn't really want).

Other Notes:

• Whenever it restores a selection or the editor loses focus it must dispatch a new transaction which will have the "unfocused-selection" meta if you need to filter it.
• If you want to hide the unfocused selection decorations you can set the hide-unfocused-selection meta on the transaction.
• If you change the selection while the editor is considered unfocused, the saved selection will be changed to the new selection.