Every keypress resets caret to bottom

[mattduffield]

Hi, I am trying to use this library but whenever I type and then move back in the document to edit, any keypress resets the cursor to the bottom of the document.

I am using the most basic example provided using HighlightJS.

I don't see anything that could be causing the cursor to jump to the bottom and don't see any settings in the demo that handles for this.

Any help would be most appreciated!

[antonmedv]

What browser?

[mattduffield]

In Chrome.

[mattduffield]

However when I play with the demo on the CodeJar website it works.
It only happens in my own code which is why I was thinking I might need some custom code...

[antonmedv]

Please show code.

[mattduffield]

Okay, I am uploading two screen shots....The first one will be when I click on the editor and try to add a line.....and then after....

[mattduffield]

It is a little hard to see but the cursor goes from the middle to the bottom....

[mattduffield]

    const editor = this.element.querySelector(".editor");
    const options = {tab: ' '.repeat(2)}
    const highlight = (editor) => {
      editor.textContent = editor.textContent
      hljs.highlightBlock(editor)
    }
    this.codejar = new CodeJar(editor, highlight, options);

    if (this.content) {
      this.codejar.updateCode(this.content);
    }

[mattduffield]

This is the code that sets up the editor....I am using HighlightJS.

[mattduffield]

Here is the HTML:

<div class="editor ${language}" contenteditable="true" spellcheck="false"></div>

The ${language} is rendered as language-html, etc.

[antonmedv]

Take a look at https://github.com/antonmedv/codejar/blob/master/index.html#L51-L56
And try:

  const highlight = editor => {
    // highlight.js does not trim old tags,
    // let's do it by this hack.
    editor.textContent = editor.textContent
    hljs.highlightBlock(editor)
  }

[mattduffield]

I am already doing that from code I provided.

[antonmedv]

Try to debug. Place debug point before restore call.

[mattduffield]

Okay, where is the restore call?
Is it this?

editor.textContent = editor.textContent

[mattduffield]

Okay, I have created a working example for you to look at. Try and interact with the editor and you will see the behavior I am talking about.

https://gist.dumber.app/?gist=2d92b9a716610764fe4d4a9210b5c388

[mattduffield]

The code to look at is in code-editor.js in the attached function. You will see that is where I am setting up CodeJar....

[mattduffield]

Okay, it appears that CodeJar doesn't support ShadowDOM. I have been testing by building web components with ShadowDOM turned on and the moment I turned it off, it seems to work fine.

It would be really nice to support this. It is very easy to detect this on an element checking for shadowRoot.

I would love to see this support get added!

[antonmedv]

Nice!

[mattduffield]

So, do you plan on supporting ShadowDOM?

[mattduffield]

I was able to modify the source code slightly to support ShadowDOM.

[antonmedv]

Please send PR.

[mattduffield]

Done. I updated the .gitignore in my version. Sorry about that.

[claudebarde]

I am running into the same issue myself with the editor inside a web component using the Shadow DOM. I hope the PR will be merged soon 😊