In many text editors there are line numbers, and a possibility for visual line end indication; for instance in Scite, you can do View/End of Line, and you get something like this:
As the screenshot image shows, Scite can correctly indicate on each line if the line ending is CRLF (\r\n), LF (\n) or CR (\r).
I would like the same functionality but for JavaScript – something that I can use for basis of further development for an online code editor; the crucial functionality being:
- Shows line numbers for text (correctly when long lines are soft-wrapped by the editor)
- Text and line numbers shown in monospace font by default (possibility to change monospace font is nice, but not crucial)
- Possibility to indicate line endings CRLF (
\r\n), LF (\n) or CR (\r) visually; - Preserves original line endings, regardless of what they are, when copy-pasting text
- Possibility to react with a handler on keyboard key press, and process the existing text based on the text cursor position, before the character corresponding to the keyboard key is actually inserted in the text
I’ve tried looking up for some libraries or components online that can do all of this out of the box, but haven’t found much; for instance, I’ve found https://quilljs.com/, but since it is a rich text editor, line numbering seems to be tricky, I’ve only found this discussion Is it possible to show line numbering next to editor? · Issue #2756 · slab/quill which seems to be unresolved.
So, is there a JavaScript library/component that has the above mentioned features out of the box?
