search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
320 stars 44 forks source link

How to refine behavior? #244

Closed antonio-bluco closed 4 months ago

antonio-bluco commented 4 months ago

Hi,

This is a great library, which I am enjoying for its ease of use!

However, I am having some trouble understanding how to modify things when needed.

I am facing two main issues:

  1. The bulleted list and numbered list are mutually exclusive. If I click the ordered list button () the Bullet list button () is greyed out and not available. I would like instead to simply be able to switch from one to the other, instead of having to go to normal, then go to the other.
  2. For some reason, I am getting no indentation by default on my lists, and they fall outside of the text editor.
Screenshot 2024-07-11 at 11 38 17

I am following pretty closely the official code here, but let's say that the main issue is that it's really hard to find any information online about how to modify the behavior of even why some things are happening. Which options / configuration do each component allow, etc . Perhaps I am looking in the wrong place?

(A smaller, separate issue is that indentation does not seem to work - pressing tab just goes to another button on the page (i.e. it's not intercepted by the rich text editor) and the indent / unindent button seem to do nothing. However I care less about that and for now I simply disabled it).

Would be grateful for any help!

sjdemartini commented 4 months ago

For (1), that sort of issue is directly from Tiptap functionality, not specific to mui-tiptap. (mui-tiptap's logic disables the menu button if Tiptap's API returns that the given command, in this case switching list type, is not allowed.) In general, as far as where to find information, I would recommend looking at Tiptap's documentation to know how Tiptap's extensions behave, how to modify Tiptap behavior when possible, etc. (for instance https://tiptap.dev/docs/editor/extensions/nodes/bullet-list). And also searching their Github for issues and discussions that pertain to your questions/issues (https://github.com/ueberdosis/tiptap/issues).

For (2), I'm not sure what your setup is, but the mui-tiptap default styles and demos do not have this issue. I'd recommend looking in your web inspector dev tools to see why the CSS is moving your list items. Perhaps you have some global CSS on your page that affect list items.

I'm going to close this out, but please let me know if there's something that you think is still an issue within mui-tiptap.