When using @tiptap/extension-bullet-list and @tiptap/extension-text-style is there a way to apply font styles to the containing <li> wrapper?

[vandercloak]

When using @tiptap/extension-bullet-list and @tiptap/extension-text-style is there a way to apply font styles to the containing <li> wrapper?

I am trying to get the font size that I am applying to also apply to the li bullet mark. Is there any good way to do this?

From:

<ul class="list-disc">
  <li>
    <p style="text-align: center">
      <span style="font-size: 80px;">New Text</span>
    </p>
  </li>
</ul>

To:

<ul class="list-disc">
  <li style="font-size: 80px;">
    <p style="text-align: center">
      <span>New Text</span>
    </p>
  </li>
</ul>

[vandercloak]

Actually li style="font-size: 80px;" wont work since the style needs to be applied to the marker in the li (i.e. li::marker{}).

I wonder if my best bet is to add a class of something like list-size-80 (the 80 would be replaced with whatever font size is being used) which I would have predefined to be list-size-80::marker{font-size:80px}.

Would this be a good route? Is there a way I can do this by extending either the text-style or bullet extensions?

[danil321654]

Hello! I created this extension, hope it will help
https://github.com/danil321654/tiptap-font-size-extension-required

You need to use ListItemMatker decorator and FontSize from it. Follow instructions from readme

[vandercloak]

Thanks for the response @danil321654! I will check it out soon!

[jonahallibone]

This continues to be a problem for me as well, would love to know if it was solved

[ritesh-malav]

Does anyone have a solution for this ?