New line issue in Firefox about codejar

[sirkadirov]

@antonmedv Hi! I'm working on a free software project for educational institutions, where students learn programming - [Overtest]. I don't use Ace, CodeMirror and other similarities because of their congestion and poor support of mobile browsers. In my opinion, CodeJar is the best alternative for those projects, so I'm using it in Overtest's web application as a default code editor. Want to say thanks for your work on this project!

---

I have the same issue, and I'll try to fix it. If I succeed, I will open a pull request. Firefox is painful these days 😂...

[antonmedv]

For me, in the latest Firefox, everything is working. Firefox is a pain in the ass, a lot of unresolved bugs in it what you have to go around.

[gawlk]

I understand. Would you like a quick gif to show you the problem ?

[tiffany352]

I'm trying out CodeJar and immediately ran into this. I develop in and primarily use Firefox...

I tried out the linked PR and it looks like it only sort of fixes the issue. The cursor still visually appears on the previous line until I type more after hitting enter.

[antonmedv]

Can you show some gif/mov with your case?

[radinParsaei]

Hi, Thanks for your project.
I have gotten the same issue in Firefox 83.0.
Note, If the beginning word in the line in the HTML tag highlights, the cursor moves to the upper line, elsewheres the cursor will locate in the right place.

[antonmedv]

I hope Firefox eventually will catch up with other browsers (even mobile browsers have better support bow) and add plaintext-only as others do.

[zamfofex]

Hello. Firstly, thank you for working on this project! I really appreciate your efforts. 🎉

This issue was affecting me severely, so I decided to make a patch! The patch is applicable to commit d906127.

patch

41d40
<   let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
43c42
<   editor.setAttribute('contentEditable', isFirefox ? 'true' : 'plaintext-only')
---
>   editor.setAttribute('contenteditable', 'plaintext-only')
50a50,51
>   let isLegacy = false // true if plaintext-only is not supported
> 
51a53,54
>   if (editor.contentEditable !== "plaintext-only") isLegacy = true
>   if (isLegacy) editor.setAttribute('contenteditable', 'true')
84c87
<     else firefoxNewLineFix(event)
---
>     else legacyNewLineFix(event)
93a97,98
>     
>     restore(save())
123a129,143
>     let {anchorNode, anchorOffset, focusNode, focusOffset} = s
>     // selection anchor and focus are expected to be text nodes, so normalize them
>     if (anchorNode.nodeType === Node.ELEMENT_NODE) {
>       const node = document.createTextNode("")
>       anchorNode.insertBefore(node, anchorNode.childNodes[anchorOffset])
>       anchorNode = node
>       anchorOffset = 0
>     }
>     if (focusNode.nodeType === Node.ELEMENT_NODE) {
>       const node = document.createTextNode("")
>       focusNode.insertBefore(node, focusNode.childNodes[focusOffset])
>       focusNode = node
>       focusOffset = 0
>     }
> 
125,128c145,148
<       if (el === s.anchorNode && el === s.focusNode) {
<         pos.start += s.anchorOffset
<         pos.end += s.focusOffset
<         pos.dir = s.anchorOffset <= s.focusOffset ? '->' : '<-'
---
>       if (el === anchorNode && el === focusNode) {
>         pos.start += anchorOffset
>         pos.end += focusOffset
>         pos.dir = anchorOffset <= focusOffset ? '->' : '<-'
132,133c152,153
<       if (el === s.anchorNode) {
<         pos.start += s.anchorOffset
---
>       if (el === anchorNode) {
>         pos.start += anchorOffset
139,140c159,160
<       } else if (el === s.focusNode) {
<         pos.end += s.focusOffset
---
>       } else if (el === focusNode) {
>         pos.end += focusOffset
153a174,176
>     // collapse empty text nodes
>     editor.normalize()
> 
179c202
<       if (current + len >= pos.start) {
---
>       if (current + len > pos.start) {
184c207
<         if (current + len >= pos.end) {
---
>         if (current + len > pos.end) {
193,195c216,217
<     // If everything deleted place cursor at editor
<     if (!startNode) startNode = editor
<     if (!endNode) endNode = editor
---
>     if (!startNode) startNode = editor, startOffset = editor.childNodes.length
>     if (!endNode) endNode = editor, endOffset = editor.childNodes.length
243c265
<         firefoxNewLineFix(event)
---
>         legacyNewLineFix(event)
255c277
<   function firefoxNewLineFix(event: KeyboardEvent) {
---
>   function legacyNewLineFix(event: KeyboardEvent) {
258c280
<     if (isFirefox && event.key === 'Enter') {
---
>     if (isLegacy && event.key === 'Enter') {

I’m currently using GNU IceCat (which is basically just Firefox), and after applying the patch, I couldn’t find any more issues whatsoever at all!

I hope that this can be applied eventually (hopefully soon). If there are any issues with the patch, please feel free to let me know!

P.S. In case the whole patched file is useful to anyone, I have decided to embed it as an attachment. Just rename it from codejar.txt to codejar.ts (since GitHub limits file uploads by extension).

[antonmedv]

Please, create a PR with patch and please explain what is your patch doing.

[antonmedv]

Also, I recently uploaded v3.3.0. It should fix the newline issue. Please verify.

[zamfofex]

Also, I recently uploaded v3.3.0. It should fix the newline issue. Please verify.

I did verify it with the latest version, 3.3.0, and it did not really seem to fix the issue. Overall, besides this issue, I ran into others where the cursor would occasionally move around in unexpected ways, most oftentimes to the end of the editing area.

Please, create a PR with patch and please explain what is your patch doing.

Fair enough, I will! I’m sorry if this seemed like a thoughtless effort. I was just really hoping to be able to help solve an issue that was affecting me and other people.