I am using the library highlight.js with editablecontent in order to create a mini-code editor. I know that highlightjs and editable content is not suitable for a code editor, but I do it because I need to render multiple code blocks and non-code text like an input, and using Monaco for example multiple times in the same page is not efficient performance-wise.
I managed to get the highlighting to work, deleting characters to work and fix cursor position, however, when I select an area in the code block and press the delete button, it will only delete one character.
I’ve created a stackblitz version here
You can see in the example that I added some code in the code-block.
When I use window.getSelection() after I selected this line:
templateUrl: './basic-session.component.html' it actually only shows me this text from the selection value: './basic-session.component.html' and ignores the highlighted text (templateUrl:).
I can’t find anything related to this, hope to get some support with it.
Thank you!