When using React Quill I am trying to keep the elements in a specific order so that we can can handle clicks on the annoations accordingly (along with things like hover effects etc)
Currently, we highlight text in strings. This is currently how Quill will format the HTML.
[abc]this could [def][abc]be one[/abc][/def] of the strings[/abc]
The problem with this format is that hover/click's on [def] cause issues because it's a child of [abc], the [abc] will trigger the click/hover listeners.
I would like quill to instead format as HTML like this:
[abc]this could [/abc][def][abc]be one[/abc][/def][abc] of the strings[/abc]
As you can see, [def] is now an equal level whilst still possessing [abc] as a child.
I've tried using quill to register extensions of block and inline components as shown here: But unfortunately, neither have provided the solution that I would like. Maybe i'm trying to achieve this the wrong way. I also have a different SuggestionBlock for each type of highlight (Same content inside) so the content removed.
class SuggestionBlock extends Block {
static create(suggestion) {
let node = super.create()
// Add the suggestion attributes.
node.setAttribute("data-id", suggestion.id)
node.classList.add("highlight")
node.classList.add(suggestion.name)
return node
}
static formats(domNode) {
const id = domNode.getAttribute("data-id")
return id
}
}
Any ideas on how I could implement this would be incredible! Thank you.
