Continue to display a solid or custom cursor when focus is lost

[bitsoflogic]

I'd like the ability to set the style of the cursor when the editor loses focus.

It'd be similar to this, with "none" added as an option:
[optional] cursorStyleUnfocused : "none" | "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin"

By default, the unfocused cursor would stop blinking to indicate that the editor is no longer focused.

My use cases:

When interacting with other elements on the page, it'd be great to know where the cursor is.

I'd love to be able to display the AST of the code in the editor in a visual tree. Then, as you select various nodes, the editor's cursor highlights the code being viewed.

Likewise, I'd like to create a range slider that represents the steps the code will run in. Then, the user can drag the range slider to see the cursor move from one statement/expression to the next.

Another use case:

The goal is similar to what you'll see here: #2318. Their underlying issue wasn't the focus being lost, so much as it was the cursor disappearing when the focus was lost.

[alexdima]

@bitsoflogic You can use decorations to add a visual indicator to the editor that is very similar to the cursor.

[kuldeepkeshwar]

@bitsoflogic @alexdima Another option can be changing the visibility of cursor node over the time giving it blinking effect.

// on blur event of editor
const animationName = "blinkCursor";
const cursorNode = editor
  .getDomNode()
  ?.getElementsByClassName("cursor monaco-mouse-cursor-text")[0];
cursorNode.animate(
  [
    {
      visibility: "hidden",
      opacity: 0,
    },
    {
      visibility: "inherit",
      opacity: 1,
    },
    {
      visibility: "hidden",
      opacity: 0,
    },
  ],
  { id: animationName, duration: 1250, iterations: Infinity }
);


// on focus event of editor
cursorNode.getAnimations().forEach((animation) => {
  if (animation.id === animationName) {
    animation.cancel();
  }
});