I am working on an inline formatting tool for the editorjs opensource component. The objective is to mark portions of text as input or output. The challenge in making such a tool is that we need to deal with the nested nature of html. For our objective it is clear that text cannot be input and output nor we can have output inside input.
We already have a base control that works, but it does not handle nesting properly. We need to come up with a process that can be implemented with the surround(range: Range) API call. And we need to describe the different cases that we need to support, considering the user experience. For example, the user right clicks and sees the tool menu with the specific tool highlighted or not. Then the user presses the button. At that point it is up to the code to decide what the behavior's should be.
Taking all of this in mind lets start with the use cases, followed by any useful API that is available and is relevant to out task. Then we can describe logically but as concise as pos