Style text in ql-editor

[ArtemisGraphic]

Hello,
I'm using Svelte, I've made a component where the text is displayed in a div, and when I click on it the Quill toolbar appears and it becomes editable, the problem is that when I click, the formatting of the text changes, it becomes smaller and aligned left

 <div class="flex  flex-col grow justify-center items-center">
      <div class="relative flex bg-red-500/50 w-full h-full items-center text-black-1 font-candara text-[33px] text-shadow-cw-2 text-center leading-[1.20em] mb-[30px]">
        <EdtitableText
          id="sbText"
          content="my custom text"
        />
      </div>
    </div>

in my component

<span
  class="relative inline-flex cursor-pointer rounded-md transition-all {classNames}"
  class:group={!editing.value || editing.value === id}
  class:cursor-pointer={!editing.value}
  onclick={(e) => {
    if (editing.value && editing.value !== id) {
      e.stopPropagation();
      return;
    }
    if (editing.value !== id) startEditing(e);
  }}
>
  {#if editing.value === id}
    <!-- Floating Quill toolbar with custom buttons -->
    <div
      id="toolbar-{id}"
      class="absolute flex justify-center gap-x-4 -bottom-[112px] left-1/2 -translate-x-1/2 z-50 pointer-events-auto"
    >
      <!-- Formatting buttons -->
      <button class="ql-bold">B</button>
      <button class="ql-italic">I</button>
      <button class="ql-underline">U</button>

      <!-- Header / list example -->
      <select class="ql-header">
        <option selected></option>
        <option value="1">H1</option>
        <option value="2">H2</option>
      </select>
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>

      <!-- Custom action buttons -->
      <button
        class="bg-gray-900 text-white rounded-lg w-[84px] h-[96px] text-[40pt] font-lato"
          onclick={(e) => {
    e.stopPropagation();
    cancelEdit();
  }}
      >
        X
      </button>
      <button
        class="bg-gray-900 text-white rounded-lg w-[84px] h-[96px] text-[40pt] font-lato"
          onclick={(e) => {
    e.stopPropagation();
    confirmEdit();
  }}
      >
        V
      </button>
    </div>

    <!-- Quill editor -->
    <div
      bind:this={editableEl}
      class="inline outline-none focus:outline-none font-itc-franklin-gothic text-shadow-cw-3 tracking-wide text-center text-[2rem]"
      style="min-height:1em;"
    ></div>
  {:else}
    <span>{@html savedHtml}</span>
  {/if}

  <!-- Outline hover -->
  <span
    class="absolute -inset-6 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity gradient-outline rounded-3xl z-40"
    class:opacity-100={editing.value === id}
  ></span>
</span>

Is there a way to keep the formatting the same of the pre-edit div?