Editor.js: Strange caret behavior

[grimalschi]

Hello! When I press "Down" many times, I'm getting strange caret behavior.

What i expect:

What I get:

Any plans to fix this?

[hadrysmateusz]

Any progress on this? It's one of the things that keeps me from using the library as it's super un-intuitive.

[alexanderisora]

Any updates on this issue? Thanks.

[hata6502]

Absolutely, this issue is valid to improve UI.
But I have no idea to resolve it.
It may need a DOM hacking.

[grimalschi]

In my project I have solved this problem for another block editor.

I am checking every possible caret position and detect closest one for jump.

On picture red is current caret, blue is candidates and green is a closest position for caret.

There is also some optimisation like line break detection, because there may be 2000 lines and its too much to check every possible caret position.

So it is a solution, it works fast enough and I am ready to share some production code and explain this more.

If you (EditorJS team) are interested, write me https://t.me/grimalschi

[hata6502]

Great!
By using Range and getBoundingClientRect(), it may be able to resolve this behavior.

[hata6502]

Determining caret position when DOWN key pressed:

[neSpecc]

Awesome! We'll check it

[hata6502]

@grimalschi
@neSpecc
Sorry! I gave up this PR: https://github.com/codex-team/editor.js/pull/1453

Is there anyone who can resolve this good feature?
I think it is a good feature request.

[hata6502]

https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

[hata6502]

Are force options in Caret.navigateNext(force = false) and Caret.navigatePrevious(force = false) used?
I couldn't find where using force options.

$ git grep "navigateNext(" src/
src/components/modules/blockEvents.ts:    const isNavigated = navigateNext ? this.Editor.Caret.navigateNext() : this.Editor.Caret.navigatePrevious();
src/components/modules/blockEvents.ts:    const isNavigated = navigatePrevious ? this.Editor.Caret.navigatePrevious() : this.Editor.Caret.navigateNext();
src/components/modules/caret.ts:  public navigateNext(force = false): boolean {

$ git grep "navigatePrevious(" src/
src/components/modules/blockEvents.ts:      if (Caret.navigatePrevious()) {
src/components/modules/blockEvents.ts:    const isNavigated = navigateNext ? this.Editor.Caret.navigateNext() : this.Editor.Caret.navigatePrevious();
src/components/modules/blockEvents.ts:    const isNavigated = navigatePrevious ? this.Editor.Caret.navigatePrevious() : this.Editor.Caret.navigateNext();
src/components/modules/caret.ts:  public navigatePrevious(force = false): boolean {

If force options are not used, Caret.navigateNext() and Caret.navigatePrevious() should be simplified by removing force options first of all.

[hata6502]

I did it! 🎉
Please check this PR:
https://github.com/codex-team/editor.js/pull/1526
https://deploy-preview-1526--editor-js.netlify.app/