Adding tab character inside code tag (Angular-typescript)

I am using Angular and typescript for this project

I was trying to add the tab character inside of the <code> tag in HTML, for formatting sql code in a page, but I had no luck with that.

HTML code

    <div class="documentationCode" id="documentationContainer-{{nodeToPass.xmlNode.nameId}}">
      <pre class="preCode">
        <code id="editor"
          tabindex="-1"
          contenteditable="true"
          (focusout)="emitDataSave(nodeToPass,$event)"
          [highlight]="codice"
          (keydown)="check($event)"
          class="code">
      </code>
      </pre>
    </div>

typescript code

check(event:any)
  {
    if(event.keyCode === 9) /*catch tab character*/
    {
      event.preventDefault();
      /*REPLACE TAB WITH \t*/
    }
    else
    {
      return
    }
  }

I tried using the same method that works with the <textarea> , but it doesn't work with the <code>, as far as I have seen, mainly because I cannot get the caret position for knowing where to add the tab character

I cannot replace the <code> tag with the <textarea>, since I need it for sql formatting, also it has built-in height resizing, which I need for my project.

I cannot use event.target.selectionStart / event.target.selectionStart since they both return undefined

I have to place the tab character where the caret is

Is there any workaround for formatting html text inside of the <code> tag, with the tab character?

Found the solution:

I used an angular version of 'codejar' which is found at this link https://github.com/julianpoemp/ngx-codejar

I imported the modules and now I am able to add tab without any issues
If you want the graphical thing too (the syntax highlight) you need to import the css into your own program, since, for some reasons, it doesn't work properly (I used highlightjs, the css is found inside the nodemodule folder, under the highlightjs folder - ngx-codejar supports both hljs and prismjs)

Another thing to remember, the module overwrite your style with its own, so, like in my case, need some particular style, you have to add the '!important' attribute in your css

Here is the code:

app.module.ts:

declarations: [ ... ],
imports: [
...
NgxCodejarModule,
...
],
providers: [
      {
        provide: HIGHLIGHT_OPTIONS,
        useValue: <HighlightOptions>{
          coreLibraryLoader: () => import('highlight.js/lib/core'),
          themePath: '/node_modules/highlight.js/styles/github.css',
          languages: {
            sql: () => import('highlight.js/lib/languages/sql'),
          },
        },
      },
    ],

HTML:

<ngx-codejar
  id="editor"
  [highlightMethod]="highlightMethod"
  [(code)]="code"
  (focusout)="emitDataSave(nodeToPass,$event)">
</ngx-codejar>

Typescript:

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

CSS:

.hljs {
  font-size: 12px !important;
  font-family: 'Courier New', Courier, monospace !important;
	min-height: fit-content !important;
  color: #24292e;
  background: #fff
} /*plus the whole css found in highlightjs*/