antonmedv/codejar

🐛 The Input cursor

babur001 opened this issue · 3 comments

babur001 commented

The Input cursor is not staying on its place whenever i start typing.

Here is an easy mock:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cody</title>
  </head>
  <body>

    <div class="editor language-js"></div>

    <script src="./node_modules/prismjs/prism.js"></script>
    <script type="module">
      import { CodeJar } from "https://medv.io/codejar/codejar.js";

      const editor = document.querySelector(".editor");

      const jar = CodeJar(editor, Prism.highlightElement);
    </script>
  </body>
</html>
SaburovBabur commented

I will be able to solve the issue by looking up at your examples:

  <script type="module">
      import { CodeJar } from "https://medv.io/codejar/codejar.js";

      const editor = document.querySelector(".editor");

      const jar = CodeJar(editor, (editor) => {
        // highlight.js does not trims old tags,
        // let's do it by this hack.

        editor.textContent = editor.textContent;
        Prism.highlightElement(editor);
      });
    </script>

However, I have no Idea of what it means or does the replacement of a function and doing editor.textContent = editor.textContent. Could you provide more explanation here?!

  • 👍1
antonmedv commented

It’s to ocercome prism restrictions

maxvanceffer commented

I have the same problem with highlight js and Prism