(typescript) Highlighting breaks if using ' in a comment word (e.g // don't)

[paladox]

Describe the issue

Which language seems to have the issue? Typescript

Are you using highlight or highlightAuto? highlight

Sample Code to Reproduce You can reproduce with the following on https://highlightjs.org/demo

  private renderHeaderTitle() {
    const changeStatuses = this.computeChangeStatusChips();
    const resolveWeblinks =
      this.revision?.commit?.resolve_conflicts_web_links ?? [];
    return html` <div class="headerTitle">
      <div class="changeStatuses">
        ${changeStatuses.map(
          status => html` <gr-change-status
            .revertedChange=${this.revertingChange}
            .status=${status}
            .resolveWeblinks=${resolveWeblinks}
          ></gr-change-status>`
        )}
      </div>
      ${this.renderCopyLinksDropdown()}
      <gr-button
        flatten
        down-arrow
        class="showCopyLinkDialogButton"
        @click=${(e: MouseEvent) => {
          // We don't want to handle clicks on the star or the <a> link.
          // Calling `stopPropagation()` from the click handler of <a> is not an
          // option, because then the click does not reach the top-level gr-page
          // click handler and would result is a full page reload.
          if ((e.target as HTMLElement)?.nodeName !== 'GR-BUTTON') return;
          this.copyLinksDropdown?.toggleDropdown();
        }}
        ><gr-change-star
          id="changeStar"
          .change=${this.change}
          @toggle-star=${(e: CustomEvent<ChangeStarToggleStarDetail>) =>
            this.handleToggleStar(e)}
          ?hidden=${!this.loggedIn}
        ></gr-change-star>
        <a
          class="changeNumber"
          aria-label=${`Change ${this.change?._number}`}
          href=${ifDefined(this.computeChangeUrl(true))}
          >${this.change?._number}</a
        >
      </gr-button>
      <span class="headerSubject">${this.change?.subject}</span>
      <gr-copy-clipboard
        class="changeCopyClipboard"
        hideInput=""
        text=${this.computeCopyTextForTitle()}
      >
      </gr-copy-clipboard>
    </div>`;
  }

Expected behavior Highlighting not to break after ${(e: MouseEvent) => {

Additional context Happens on https://gerrit-review.googlesource.com/c/gerrit/+/410005/2/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts

[paladox]

Oh... it appears to be due to the use of // within ${(e: MouseEvent) => {

Ah because of ' in don't.

[paladox]

Seems a comment isn't properly highlighted as a comment within ${(e: MouseEvent) => {. As you can see if you do it in private renderHeaderTitle() {, it's grey. But within ${(e: MouseEvent) => { it's red. Highlighting breaks when using a '.

[joshgoebel]

We don't really support JSX/TSX very well - it's quite hard without a real parser. Closing this as a duplicate of #2998.