Annotate the word "generally" in useEffect()

[JSerZANP]

[JSerZANP]

This is challenging

1. How to create the command
2. How to locate the word by the command
3. How to modify the DOM
4. How to make it idempotent

[JSerZANP]

1. How to create the command

Need a dev mode, once turned on

1. easily annotate parts of the pate by interactive UI
2. generate the command automatically
3. follow the instruction and create PR

2. How to locate the word by the command

We can locate the words by

1. container DOM path
2. startIndex
3. endIndex
4. selection

https://developer.mozilla.org/en-US/docs/Web/API/Selection

3. How to modify the DOM

The words might span across different child nodes. We can use BFS to wrap the word parts in <span> to apply styles.

If words are within same container node, https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents this API could be useful.

Example modification could be

1. highlight
2. underline
3. popover
4. insert (*)

4. How to make it idempotent

Once DOM is modified, next time when we locate the words, we can check if the child nodes detected are already wrapped with classes prefixed with .ddi.

5. What if the path doesn't work

selection in the data model works like a checksum, if it doesn't match the detected words, it means DOM has changed.
just ignore it.

#4 this crob job is to validate the command periodically.

[JSerZANP]

sth like this, let's first try to add just add a link to it.