Describe the issue/behavior that seems buggy
❌ when typing it adds the text/code in reverse when typing.
Sample Code or Instructions to Reproduce
when using contendeditable attribute in the <code> HTML tag element.
<pre>
<code contenteditable="true"></code>
</pre>
with an input event listener
and using this js library https://highlightjs.org/ for syntax highlighting
const code = document.querySelector("code");
code.addEventListener("input", () => {
hljs.highlightElement(code); // this came from this js library https://highlightjs.org/
// other code logic (mostly saving to localStorage)
}
like you saw in every typed letter I will add the highlight functionality,
but seems that completely breaks the typing direction
and yes, input events also work for not <input> tags if they have that attribute (contenteditable)
docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
source code:
https://jsfiddle.net/20zpL5bk/
- also another bug is that we can't go down the line break. (only if there is
hljs.highlightElement(code);)
✅ here without hljs.highlightElement(code); is super fluid and can't do everything (but not syntax highlight):
(how can I have fluid, normal writing with also syntax highlighting in real-time (input event)?
is my code wrong for some reason?)
Expected behavior
✅ how should be:
<div></div>orhello world
❌ how it is now:
>vid/<>vid<ordlrow olleh
Additional context
I tried to write the code in reverse myself manually >vid/<dlrow olleh>vid<, and yes the highlighting works.
but the direction is always the wrong way. (also deleting isn't possible)
another interesting thing is if you copy and paste (CTRL+V) the correct code
<div>hello world</div>it works fine. (but still remain in the same line, no multiple lines)also the cursor of the input doesn't move with the text but remains at the start
source code:
https://jsfiddle.net/20zpL5bk/
let inputs = document.querySelectorAll("textarea");
let langs = ["html", "css", "javascript"];
let outputs = document.querySelectorAll("code");
outputs.forEach((code, index) => {
// ✅ make it like input
code.contentEditable = "true";
// ✅ if there is some code from localStorage we add it to the website.
code.innerHTML = localStorage.getItem(`${langs[index]}`) || "";
// ✅ styling of your library (work great when app start)
hljs.highlightElement(code);
code.addEventListener("input", () => {
localStorage.setItem(`${langs[index]}`, code.innerHTML);
// ❌ why the typing is reversed here?
// if the next line isn't there then it work fine, otherwise it will change the values to reversed
hljs.highlightElement(code);
// console.log
// example to type <div></div>
// what I get >vid/<>vid<
});
});body {
--gap: 2vmin;
margin: 0;
height: 100vh;
}
#container {
display: flex;
height: 100%;
gap: var(--gap);
padding: var(--gap);
box-sizing: border-box;
}
#container>* {
flex: 1;
display: grid;
grid-template-rows: auto 1fr;
gap: var(--gap);
}
code {
overflow: auto;
white-space: pre;
border: 0.2rem solid;
border-radius: 0.5rem;
}<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div>
<span>HTML</span>
<code class="language-html" style="border-color: orange;"></code>
</div>
<div>
<span>CSS</span>
<code class="language-css" style="border-color: blue;"></code>
</div>
<div>
<span>JS</span>
<code class="language-js" style="border-color: yellow;"></code>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
