In a ReactJS project using React Quill, how can the name of a title be changed in a dropdown?

Question

Objective

In my rich text editor we have "Heading x", i want those to have customized text. As an example, lets call it "Subtitle"

---

Current Work

Current UI

Current code

In my .tsx file for the toolbar i have this

[{ header: [2, 3, 5, false] }],

So wondering if there is a way to either add a corresponding key and text to that key. For example a number 7 means Subtitle? or actually type that in and be able to have something like

[{ header: [2, 3, 5, false, "subtitle"] }],

Issues

I looked in the documentation for the toolbar and I don't see a mention of being able to customize the titles.

https://quilljs.com/docs/modules/toolbar/

Answer 1

I was in a hurry so instead of adding a new option in the dropdown I just assigned a heading to have it's name replaced. The options in this library really only allow you to add more of the standard headings like <h2>, <h3>, <h4>, etc.

I saw that you can change the text via CSS. And those corresponded from heading like <h1> to corresponding data-value="1"

Keep in mind here the amount of specificity that these are nested under, like 3 levels. So in your own project you will have to override this under multiple levels as well.

Make sure to target both the label .ql-picker-label and the item itself in the dropdown with .ql-picker-item.

This method allows you to rename the available headings h1 - h6.

On the frontend of your app, you can style with css or replace the heading elements with javascript into whatever you want.

For example, if you wanted to replace the <h5> with <p class="example"><strong>