Can't see cursor at all

I can only get a hint of where it is because of the highlighted brackets but otherwise no cursor at all.
I’ve tried all the CSS in related topics and no luck. I’ve blocked all my custom CSS to see if there’s a conflict but nothing, is there a way to debug this or any recommendations on what to do?

here’s my loading function:

function loadContent(target) {
  let state = EditorState.create({
    doc: JSON.stringify(props.content.value, null, 2),
    extensions: [
      basicSetup,
      history(),
      autocompletion(),
      language.of(json()),
      tabSize.of(EditorState.tabSize.of(8)),
      syntaxHighlighting(defaultHighlightStyle),
      // watch for changes
      EditorView.updateListener.of(function(e) {
        if (props.name == 'validatorMetadata') {
          // console.log('change', e.state.doc.toString())
          store.commit('saveValidationMetadata', {value: e.state.doc.toString()})
        }
      }),
    ],
  });

  editor = new EditorView({
    state,
    parent: document.body.querySelector(target),
  });
  

  // let value = editor.state.doc;
  // console.log(value);
}

No cursor just highlighted brackets:

1 Like

Find the .cm-cursor element in devtools and figure out why it’s not visible, I guess.


Added some height and width to be able to see it, I can see it blink as it should but it’s still not visible no matter what css tricks I try. I can see it changes to d-block when I focus on it but not sure why it’s behaving this way.

I’m also having an issue where the cursor is not showing up and is only alluded to when brackets get highlighted.
I’m using Codemirror 6.1.1 and the example component from https://www.npmjs.com/package/vue-codemirror.

Is it possible that this is a regression after the Codemirror 6 release a few months ago?
Any help is much appreciated! :smiley:

Set up a reduced example without Vue, and I’ll see if I can debug it.