Is there a built in way to enable a little text or something to indicate to press escape to tab out?

1

So, I’m using the non-default tab-capturing for indenting text with tab.
But! I’d like to display some text in the bottom-right corner of the editor when the editor is focused (small, subtle) saying “press esc to tab out” or something like that.

Is there a built in way to show such a message?

thanks!

2

There’s showDialog but it sounds like that’s already heavier than what you’re looking for. You can have a view plugin add an element to view.dom and style it to look the way you need it to look.

1 Like
3

is there an example of that?

also, I was poking around the docs CodeMirror Reference Manual, and found this for a way to run code on focus change, but how is this static method used?

4

It’s a facet. You call .of on it and add the result to your configuration. But it is not what you want here—that’s not a generic way to run code on a change, that just sends effects to the state.

Instead, you can use domEventHandlers or, probably even better, just use a style that targets .cm-focused to only show the element when the editor is focused.

1 Like
5

ah yeah, just using this is perfect! thank you

I used this CSS:

.limber__editor {
  position: relative;

  .limber__editor__tab-help {
    position: absolute;
    bottom: 0.25rem;
    right: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 1rem;
    text-shadow: 0 1px 2px black;
    kbd {
      text-shadow: none;
    }
  }

  &:has(.cm-focused) {
    .limber__editor__tab-help {
      opacity: 1;
    }
  }
}