The highlight ceases to exist when the input field is edited.

[arnonrdp]

The highlight ceases to exist when the input field is edited. It also stops working when I change the language.

When this occurs, I receive the following message in the browser console:

Element previously highlighted. To highlight again, first unset `dataset.highlighted`.
<code class=​"hljs language-json" style=​"top:​ 0px;​ left:​ 0px;​ font-size:​ 13px;​ padding:​ 0px 20px 20px;​" data-highlighted=​"yes">​{ "Hello": "World" } ​</code>​

https://github.com/justcaliturner/simple-code-editor/assets/26576201/40e646f8-f615-4fce-b392-a3cd99e2c8d3

Here is the snippet of my code:

<CodeEditor
  :class="hljs"
  font-size="13px"
  :languages="[
    ['json', 'JSON'],
    ['yml', 'YAML']
  ]"
  v-model="value"
  width="100%"
  @lang="getLanguage"
/>

// <script setup> // Composition API
import hljs from 'highlight.js'
import CodeEditor from 'simple-code-editor'

Could anyone tell me if I'm missing something? @justcaliturner, any ideas?

[rohitasare7]

I am facing the same issue

[rohitasare7]

@arnonrdp were you able to fix this?

[arnonrdp]

No, @rohitasare7.

I replaced this lib with this one: https://github.surmon.me/vue-codemirror

[xmow49]

same problem. But I rolled back to highlight.js 11.8.0 and it worked.

[NitroLine]

Fixed by adding this in your package.json and reinstall simple-code-editor

  "overrides": {
    "simple-code-editor": {
      "highlight.js": "~11.8.0"
    }
  },

[MiguelAleixo]

Same problem here, I changing my dependencies on package.json to:

   "highlight.js": "11.8.0",
   "simple-code-editor": "^2.0.8"

Then just delete my yarn.lock (package.lock) and the node_modules and finally install again the dependencies with yarn or npm! Works perfectly and doesn't give any more errors in the console.

To more details see this: https://github.com/justcaliturner/simple-code-editor/pull/45