Every keypress resets caret to bottom about codejar

[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 😊