Can't see cursor at all

[marcodarko]

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:

[marijn]

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

[marcodarko]

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.

[fionabronwen]

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!

[marijn]

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

[WodenWang820118]

I am using the version ^6.0.1. Currently no cursor shows up after applying the basicSetup and with the oneDark theme by @marijn . Therefore, I cannot use indentWithTab since there’s no cursor at all. Is there any updates? Thanks.

my code:

initView() {
    const doc = `if (true) {
      console.log("okay")
    } else {
      console.log("oh no")
    }
    `;

    new EditorView({
      doc: doc,
      extensions: [
        basicSetup,
        javascript(),
        keymap.of([indentWithTab]),
        oneDark,
      ],
      parent: document.querySelector('.cm-content') as HTMLElement,
    });
  }

html

<div class="editor-layout">
  <div class="cm-editor">
    <div tabindex="-1" class="cm-scroller">
      <div
        class="cm-content"
        role="textbox"
        spellcheck="false"
        autocapitalize="off"
        translate="no"
        contenteditable="true"
        style="tab-size: 2"
        aria-multiline="true"
        data-language="javascript"
        aria-autocomplete="list">
        <!-- The actual document content -->
      </div>
      <div class="cm-selectionLayer">
        <!-- Positioned rectangles to draw the selection -->
        <div class="cm-selectionBackground"></div>
      </div>
      <div class="cm-cursorLayer">
        <!-- Positioned elements to draw cursors -->
        <div class="cm-cursor"></div>
      </div>
    </div>
  </div>
</div>

[WodenWang820118]

I accidentally figured out the solution that parent in the EditorView should be .cm-editor instead of .cm-content in the provided HTML template. The cursor shows and indents works.