last day (20 days later) » 

1:18 AM
@RokoC.Buljan HI. First of all I want to thank you for the answers to several of my questions. You are very kind and I appreciate your help. I also want to apologize for that question in which I opened a bounty in which you ask yourself more things than you should.
 
@Nodigap no worries
 
Anyway I'm using your code. I replaced contenteditable="true" with contenteditable="plaintext-only". I'm using the same CSS as yours. I tried changing the size of the numbers and text, but it breaks the alignment. You say it shouldn't break, so I'd like to try to understand why it breaks for me
 
I modified the CSS in that answer since. Perhaps you'll have to adjust. Or use Inspect Element, explore the styles, computed styles, and you'll figure out if you need to adjust something on your side
 
For example I set 15px for both numbers and text. I get this (screenshot): https://ibb.co/7nRV5g5
Now I'm trying to investigate. I hope to wait 5-10 minutes
* I hope you will wait 5-10 minutes
 
Open this jsFiddle demo. What happens if you change from 14 to 20?
https://jsfiddle.net/RokoCB/m70dswob/
So, you'll have to investigate on your side and make sure all those three elements, the colors, editable and number elements have all the needed and SAME font styles appllied
 
1:24 AM
Yours works. Maybe I understood what I'm doing wrong. I'll be in touch in 5-10 minutes
 
@Nodigap After taking a look at your snapshot... it seems that it all works perfectly fine regarding the font size. Maybe your "numbers" element does not have the same padding as the code ones.
and therefore looks like it's not aligned well. Not sure exactly. But yes, take also a second look at those paddings or margins. THe easiest way is to (in dev tools) under Style look at the computed styles for one and the other elements and take a look for padding and font-*
they MUST match.
otherwise will be misaligned.
 
I found the problem. All your edits (and I thank you for making them) have me confused. In my code there was the font in .hilite-colors code, .hilite-editor and then also in .hilite-numbers. I changed the size from these two. I didn't agree with .hilite-colors code, .hilite-editor, .hilite-numbers

You told me in the comment first, but I thought you were referring to something else. Now I'll try to fix my code.
 
Yeah, seems like a huge project with a lots of code so it's understandable to get confused easily trying to find the difference
sorry if that caused any problems. Sometimes I post an answer and later I improve it - so by the time the code might drastically change.
Specially after agreed edits.
 
@RokoC.Buljan Yes, I've noticed that you edit and improve an answer several times. My brain explodes (in an ironic and joking sense) and I get confused, because at the same time I'm also happy. I noticed that you are a very patient and helpful user, so I really appreciate it. Most of all...you truly mean to help people. Many instead pretend to help, responding only for personal glory. So thank you so much
Now the code works correctly. Thanks to you I am happy. Thank you :)
 
@Nodigap you're very welcome any time. And happy coding!
 
1:36 AM
I had already voted on the question. Now I have accepted it
I would like to ask you about another question you answered
I noticed that you used the same Javascript code, but you added some things (while in the question just voted, they are not there)
 
@Nodigap Sure (though it's kind of late here so I hope it's a short question)
 
Yes
 
Yes, I took another approach on the other question regarding JS
It's similar, uses data attributes more nicely I think
 
Yep. It's more streamlined this way using

// Init for multiple .editor elements!
document.querySelectorAll("[data-editor]").forEach(makeEditor);
 
1:40 AM
Javascript code with updateLineNumbers, tabToSpaces, etc etc. It should be the same as the question I just accepted, but instead I saw that you added some things to it. You added updateTextareaHeight and makeEditor to it
So in my project (which I think you understand by now, because it's a code editor) should I use the JS of this question or should I use the JS of the question I just accepted?
 
yes since I like that when I type inside a textarea with PRE-wrap that the textarea acts like a regular DIV, and that's to increase in height. That way I can calculate its scrollHeight eetc all the necessary for calculating the needed SPANS for the numbers
I don't know. It's up to you to decide. First of, you should not just plain copy/paste code without understanding. So I even encourage you to use your own version or a remake. If you're not that fluent in JS... maybe I'd suggest you rewrite it with the last one that uses forEach(makeEditor) - this code does not needs any predefined elHTML, elCSS elJS like in the other example. But really - the most important in the end is that it should all work, so it's up to you to decide.
@Nodigap also, you'll notice that the answer you accepted stackoverflow.com/a/77810299/383904 does not work. Paste in the textarea lots of code. Now scroll the textarea... see? the numbers do not scroll along. That's why I created the code I posted. and the calculation for the textarea height was necessary to make it all work (prevent the textarea from having its own scrollbar)
it's almost 3AM here, I'll need to go now @Nodigap
 
@RokoC.Buljan I understand. However, now I'm studying your two codes a bit. I don't want to disturb you given the late hour. I will certainly then want to ask you some little curiosity. I'll chat with you tomorrow if it doesn't bother you
 
Sure, study the code and I'll be happy to clear some mist around the parts that you don't understand - again as time avails :)
 
Goodnight and thanks again
 
 
2 hours later…
4:11 AM
@RokoC.Buljan HI. Sorry to bother you. I compared and studied your codes (always assuming that I'm new to Javascript and I'm just starting out). The code in the question stackoverflow.com/questions/77810280/… is certainly nicer, as you also said. I'll call it "new code" for better understanding. There are only 2 unclear things.
...
1. In the previous question code stackoverflow.com/questions/77818222/… , you used const hilite. What would? What did this code do? All these code updates are confusing me a bit. How can I add it into the new code?
...
2. I tried to use your new code and add the Preview code to it as written in stackoverflow.com/questions/77818222/… js-code-area/77823006?noredirect=1#comment137220870_77823006 doesn't work though. How can I integrate Preview into your new code?
...
@RokoC.Buljan
If you can help me with these two doubts I will be very happy :)

Also, tomorrow calmly, I will ACCEPT your answer in the question https://stackoverflow.com/questions/77810280/update-textarea-line-numbers. Only after I had accepted the other user's answer, I noticed (you pointed out to me) that if you write a lot of numbers then they don't flow
 
 
7 hours later…
10:49 AM
@Nodigap hilite() function encompasses the work that needs to be done to highlight with highlight.js - which the other ("new code") answer has not since it was not required by the question.
also your question used textarea - and therefore I tried to provide an answer that respects that - and used a textarea. Which solution is better to use with the underlying PRE>CODE (for highlight.js) for the highlighted markup I'm not yet sure. Seems like both are a good fit - the only caveat is that by using a TEXTAREA element, you also need to resort to the auto-height hack in order to remove default textarea scrollbars. It's on you to decide.
The downside of using DIV[contenteditable] is that contenteditable can be tricky to handle (disallow) things like making things italic, bold etc (i
 
11:02 AM
As you can see there are other ways to increment a textarea height (besides the JS trick I used): css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
 
 
9 hours later…
7:35 PM
@RokoC.Buljan I'm confused. Not because I don't understand, but I'm confused because first we talk about the latest code and then we talk about the old code trying to improve the old. In the end I'm not understanding what code he should use. I'll try to clarify.
Initially, in the old code ( stackoverflow.com/questions/77810280/… ) I used the textarea, then they pointed it out to me (it seems to me that you pointed it out to me or maybe not you , I don't remember) that it is better to use a div and not a textarea.
So in the new question (stackoverflow.com/questions/77818222/…) I use the div and not a textarea. You answered this question and I was happy to finally solve it and use this code.
Then you answered the code of my old question ( stackoverflow.com/questions/77810280/… ) and now I'm confused, because you said that the JS code of this old question is written in better way than the last recent answer (which you wrote).
...
WHAT CAUSES ME CONFUSION: #1? I don't know what code I should use. I thought the best code was the one in the last question because I don't use textarea. Instead you told me that the JS code of the old question (the one where I use textarea) is better.
WHAT CAUSES ME CONFUSION: #2? If I use the old question's JS code with textarea, that code will not be applicable to the new question ( stackoverflow.com/questions/77818222/… js-code-area ) because it doesn't use textarea.
...
@RokoC.Buljan QUESTION: The most recent question code ( stackoverflow.com/questions/77818222/… ) has problems or deficiencies compared to the previous code? In this newer code (with the div), does the number bar scroll when I write many lines?
 
8:25 PM
From my knowledge (at least from the time I was also trying to create a code editor of my own) there were slight problems in perfectly aligning the textarea caret with the underlying DIV for the highlight. Perhaps today that's no longer an issue. You can try it out.
Therefore my suggestion to use contenteditable.
I'll try to summarize my concerns:

CONTENTEDITABLE:
- Not sure how to prevent the user from bolding and italicizing the selected text portions i.e: using the keyboard combos. That's perhaps easily fixable.
hmm.

after re-reading the above perhaps textarea is a winner? Still you have to test that assumption. @Nodigap
Yeah, if you manage to perfectly align the caret in the textarea... go for it and use textarea. There's not much code to change. Just remove the contenteditable DIV, add the textarea on its place, try to align perfectly the caret with the transparent text to overlay the colored highlighted text in the PRE>CODE element below.
Add the auto-height hack and you're done I guess.
@Nodigap Also, the code from the "newer question"'s answer is really not that bad at all. You can use it freely. One day when your JS knowledge will be great you can always revise the logic, improve it , simplify it etc.
 
@RokoC.Buljan Let me start by saying that I don't need the code editor I'm building to use like Codepen or similar. I will need it to integrate it as an exercise in some free online lessons (for example like Freecodecamp or Codeacademy). So a lot of features, like keyboard combos or other things, I don't need
Did you mean above that Firefox doesn't support "plaintext-only" in contenteditable?
 
8:41 PM
seems like. I've posted a link to the MDN docs. Check the Browser support for that value.
@Nodigap I don't understand your last comment... so you're not building a code editor? What are you building than? CodePen IS a amall code editor per-se. Just like jsFiddle, jsBin, etc
 
@RokoC.Buljan If you find grammatical errors, I am translating with Google translator which is sometimes not accurate. I'm building a code editor, but to use it like CodePen or jsFiddle. I'm building a free interactive platform where the user registers and can take lessons. The code editor is only used for practice, therefore to move on to the next lesson. For example I'm doing this (photo taken from google image)
 
@Nodigap if you really want... I could try to edit this answer stackoverflow.com/a/77823006/383904 to also add an example that uses textarea. Also, don't hesitate (since you're taking inspiration from existing websites) to inspect their page and figure out what tools and markup are they using in order to create those elements. So far I think you're on the right track.
 
I gave you a little gift :D
If you edit that question and add a version also with the textarea, you would do me a great pleasure (later I will also accept your answer in the old question with textarea) :). Will the version with the textarea that you add have the same functionality + the ability to also scroll the vertical bar of numbers?
 
8:58 PM
@Nodigap yes obviously I would not miss such an important feature. Wish me luck. I'm editing it right away.
 
@RokoC.Buljan A thousand thanks. However now I accept your answer on the old question. I will have to remove the acceptance of the other user's answer, because I didn't realize that his solution didn't work well.
 
@Nodigap I'm sure he will not downvote your question without reason. I have already upvoted that question of yours ages ago :) and seems like I'm the only one to give upvotes to good questions :\
 
Ah OK. Thank you. I have now voted and accepted your answer. Honestly, that old code is of little use to me, but you deserve it, you deserve it for the kindness you are showing me. I appreciate it so much
 
To be honest I don't care much about votes - I just like to keep my head busy, learn new stuff, and help someone on the way - but if you find the answer useful it's always a nice gesture to receive some kudos in the form of virtual points :)
 
Thanks also for editing the question with the new version with the textarea. By the way: I didn't use the textarea, because hightlight.js couldn't apply colored text on the textarea, but I needed a div
 
9:08 PM
that's why we use textarea as the user-editing zone. As a source-of-truth - with transparent text, so that we can easily copy the contents and highlight it in an underlying element instead. That's all the trick.
 
Maybe I didn't understand: are you saying that I can apply the Highlight colors also on the textarea?
 
@Nodigap no. That's not possible
 
Stop then
 
Therefore we use transparent text bot in textarea or in the other variant in which we use DIV[contenteditable]
@Nodigap no... you did not understand
all the solutions use TWO elements

DIV[contenteditable] Transparent input text with visible caret
PRE>CODE Highlight.js markup

and the other solution:

TEXTAREA Transparent input text with visible caret
PRE>CODE Highlight.js markup
 
You said that if I use the text area, I can't apply colors with Hightlight. If so, then it makes no sense to write the version with textarea. What? I do not understand?
 
9:12 PM
@Nodigap both solutions use exactly the same trick
I just said that TEXTAREA (as the DOM element) does not accepts highlighting.
 
So using this trick, is it possible to apply colored text in the textarea?
(with Hightlight)
 
I repeat the textarea CANNOT have colors and highlights
Also a contenteditable DIV cannot have colors and highlights.

Both solutions use a trick in where the value is copyied on the fly into another element (the CODE Element) that is than highlighted by highlight.js
so yes. We need to achieve colors and we'll do so also with the textarea solution - but technically speaking it's not the <TEXTAREA> element to have the colored highlight - but the CODE elements that is underneath it!
Don't be afraid. You'll see soon the solution. There WILL be highlighted text as well. :)
 
Yes, I understood. I just wanted to make sure I understood correctly. Thank you
I am so appreciative of your help. Really. I do not work. Dark moment. I was actually thinking of starting a small project for interactive lessons. I know, it will take some time. So I really appreciate your help, because for me it's life
Now I'm going to go to the bathroom for a moment. Talk to you in 1 hour. Good continuation and good luck with the textarea version. Thank you
 
 
1 hour later…
10:19 PM
@Nodigap done. Test test test. Happy coding!
 
@RokoC.Buljan Wow. Thank you! :) Now I'll look
@RokoC.Buljan However, I believed that you would have used a Javascript code similar to the old question ( stackoverflow.com/questions/77810280/… ), therefore with const makeEditor and generally written in a better way
 
10:57 PM
It's on you to improve the code as you see fit.
@Nodigap you can make your own makeEditor function and move the forEach's code into it. It's that simple
 
11:50 PM
@RokoC.Buljan I did some tests and your solution seems to work (i had no doubts). Now I go to sleep. Tomorrow I will try to improve the code. If I have something to ask you, I will write to you here in chat, but I hope not, because I don't want to bother you. I thank you for all the kindness you have shown me. Even if it's just a code, you made me happy. Thank you
 
@Nodigap here's a jsFiddle demo with a really improved code, classNames. jsfiddle.net/RokoCB/8qbr953m not going to add that into the question because improvement of syntax is not in the scope for this website.
Have a nice night. See ya around!
 

  last day (20 days later) »