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

arnonrdp commented 1 year ago

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 commented 1 year ago

I am facing the same issue

rohitasare7 commented 1 year ago

@arnonrdp were you able to fix this?

arnonrdp commented 1 year ago

No, @rohitasare7.

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

xmow49 commented 1 year ago

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

NitroLine commented 11 months ago

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

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

MiguelAleixo commented 10 months ago

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

justcaliturner / simple-code-editor

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