Line returns being stripped while typing

[jackmparker]

This issue occurs on the demo page (https://julianpoemp.github.io/ngx-codejar/) as well as when implemented. Version information wasn't provided as it doesn't seem to matter. Steps to reproduce:

1. Go to the demo page: https://julianpoemp.github.io/ngx-codejar/
2. Using either code block, delete all text
3. Type anything (gibberish or code)
4. Hit the return (enter) key once or twice to move down one or two lines
5. Type something else and notice that the line breaks are removed.

Expected result: Line breaks, tabs, etc., should all stay exactly as typed.

This doesn't happen using CodeJar itself, only when using this wrapper. Thanks!

[julianpoemp]

@jackmparker thanks for reporting this. What web browser do you use? I tried it on Firefox and wasn't able to reproduce it. Trying Chrome next.

[julianpoemp]

@jackmparker I was able to repoduce it With Chrome. I'll look for a solution

[julianpoemp]

@jackmparker please try v6.1.3 and make sure that you are using codejar ^4.2.0. Codejar 4.1.2 had an issue that produced the bug you have described.

[jackmparker]

Versions used when I encountered the bug:

codejar: ^4.2.0,
codejar-linenumbers: ^1.0.1,
ngx-codejar: ^6.1.2

And yes, you figured it out, but I'm using Chrome version 122.0.6261.112

I'll try v6.1.3. Thanks!

[julianpoemp]

@jackmparker are you sure you were using codejar 4.2.0 when facing this bug? I updated CodeJar to 4.2.0 and that solved this issue for me

[jackmparker]

Yes, I'm positive. I haven't touched the package.json file since I first installed this (yesterday) so that's definitely the version I was using.

I just updated to v6.1.3 and am still encountering the issue in a brand new Angular project.

[julianpoemp]

"brand new Angular project" means Angular 17, am I right? Do you use SSR?

[jackmparker]

I created the Angular app yesterday just to test this out so I thought it was the latest but it appears it's still verison 16:

Angular CLI: 16.2.12
Node: 18.10.0
Package Manager: npm 8.19.2
OS: darwin arm64

Angular: 16.2.12
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.12
@angular-devkit/build-angular   16.2.12
@angular-devkit/core            16.2.12
@angular-devkit/schematics      16.2.12
@schematics/angular             16.2.12
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

[julianpoemp]

@jackmparker I was able to reproduce this issue with Angular 17. I assume that it's an issue with Angular >= 16 (version of this repository is 15). I'll look for a solution tomorrow (~ 12 hours)

[jackmparker]

Ok, no problem, this isn't urgent. I reported this primarily so you were aware. Take your time if needed.

[julianpoemp]

@jackmparker updgrading the library to Angular 16 (see v7.0.0) didn't work either. I was able to find the source of the problem: In the highlightingMethod we use a code like this:

  highlightMethod(editor: CodeJarContainer) {
    if (editor.textContent !== null && editor.textContent !== undefined) {
      editor.innerHTML = hljs.highlight(editor.textContent, {
        language: 'typescript',
      }).value;
    }
  }

The problem is here that somehow editor.textContent does remove the newline as soon as we type any character after the newline. Strangely this error doesn't appear on the demo app here. But if I use it in another project the issue exists again.

Using "editor.innerText" distracts the cursor position.

Do you know a solution? More strangely this error doesn't appear on the CodeJar demo page even it's using the same code using editor.textContent

[julianpoemp]

finally found the error: It's because I'm using contenteditable="true" instead of "contenteditable="plaintext-only"`. This took me several hours and at the end it was this little code piece... I'll update v6 and v7 next.

[julianpoemp]

@jackmparker fixed in version 7.0.2 and 6.1.4. Please use 7.0.2 for Angular 15. Thank you for reporting this issue!

[jackmparker]

I've confirmed on my end that the fix is working – glad you were able to find a fix! Sorry it took a few hours for such a small thing but that's how it goes, right? Thanks again!