I want to export the contents in the lexical editor to a pdf file. I need a method to do that in client side rendering while preserving formatting and fonts.

I tried to use @react-pdf/renderer and tried to do that. The lexical editor supports conversion to html string or to JSON. I exported them to htmlString. the problem with @react-pdf/renderer is that it needs to register fonts beforehand. But registering all the google fonts (fonts are supplied from google fonts api) along with its bold, italics and bold-italics version is too complex. I tried using other solutions like jsPDF, converting to canvas and exporting as image is not favourable as the text then can’t be copied.

this is a sample html that is extracted from lexical editor.
most of the packages have the following issues:

1. Font issue (needs to pre register all fonts)
2. Styling issue (doesn’t support custom styling)
3. fs error as its client side renderring.

<p class="textPargaraph" dir="ltr">
  <span style="white-space: pre-wrap;"> </span
  ><span style="font-family: Quicksand-Bold; white-space: pre-wrap;"
    >QuickSand</span
  >
</p>
<p class="textPargaraph" dir="ltr">
  <span style="white-space: pre-wrap;">styling</span>
</p>
<ul class="textBlockUnorderedList">
  <li value="1" class="textListItem">
    <b><strong class="textBold" style="white-space: pre-wrap;">bold</strong></b>
  </li>
  <li value="2" class="textListItem textNestedListItem">
    <ul class="textBlockUnorderedList">
      <li value="1" class="textListItem">
        <i
          ><em class="textItalic" style="white-space: pre-wrap;">italics</em></i
        >
      </li>
    </ul>
  </li>
  <li value="2" class="textListItem">
    <u
      ><span class="textUnderline" style="white-space: pre-wrap;"
        >underline</span
      ></u
    >
  </li>
</ul>

Is there anyway to achieve this.

nb: please let me know if any additional clarification is required