What, How And When To Use Static Formats, Formats And Format On Custom Blot?

DESCRIPTION I am trying to create an inline blot for text highlighting. I know this feature is already present in quill. But in my implementation I would like to assign a different

Solution 1:

EDIT (Dec 18, 2019)

So... After hours of research, I was finally able to make the editor a little more correct. In this whole story I ended up creating a blot that is capable of formatting text with different styles depending on the value passed to formatting. You can even remove formatting by providing or omitting a value.

I was finally able to get an answer for item 2 and, as I thought, found it within the toolbar module. Regarding the formats methods and their differences, I think I could better understand it. I still don't understand why formats are called so often. I think I'll find the answer looking at quill core, but... The quill source code is very large as it involves multiple files.

I am putting here a more updated version of the code shown earlier. It is all commented, favoring anyone who wants to learn more about how to:

1. Define custom blots/formats,
2. Define blots that accept values, and behave in different ways depending on the configured value.
3. Define custom toolbar buttons that respond and reflect the state of the editor content.

I hope that this will enable people to better understand how this tool can be used, and to create greater interest and contribution with it.

Full Example on GitHub

ORIGINAL ANSWER

It seems that I somehow managed to get the desired result. I am putting an answer here, but I do not consider it correct yet, as it is not complete. The desired result is obtained, but I'm still unable to understood how or why things work. Understanding the process becomes something fundamental, especially if and when the code needs to be changed in the future. Below you can check the code of the whole project. To test, just run it.

My remaining questions are:

1. What are the differences between formats and static formats(domNode)? If you observe code execution, they are called a few times, and static formats(domNode) are called twice. Is this normal? I do not know, that's why I am asking.
2. Within function highlightSelectedText(hl), why does hl appear with a false value? How does this happen?
3. When formatting is applied, the create is used. When it is removed, format(format, value) is called. There are snippets of code (inside format) that are never reached. Shouldn't applying and removing formats be a format-only job? Why do I have to change the DOM element in two different locations?

I think I can find the answer to number 2 by looking at the toolbar module source code. But I'm not quite sure. If I can figure it all out, I'll be back here to edit this answer, okay? I know others may also have the same questions.