Show HN: React-tater – A React component to add annotations to any element

Why annotate percentages instead of elements? When you go to add an annotation, it should highlight the element like chrome dev tools ("select an element in the page to inspect it"), and then add the annotation to the ::before selector of the selected element. Then you'd have real DOM annotation software.

EDIT: and you don't have to get rid of the code you have. you should still position the tater wherever the mouse is clicked, but insert the tater at the deepest DOM level so that it moves where the elements move.

EDIT 2: you won't be able to use position: absolute; to position the elements. You'll have to calculate the position by subtracting the element offset from the position of the mouse at the time of click. It will be sort of tricky to position the annotations properly, but it's definitely doable.

EDIT 3: you probably want a relatively positioned container around each annotation, and then use position: absolute; inside of that. The position of the annotation will be "absolutely" positioned relative to the container, and then you can just use arithmetic to set the `left` and `top` styles.

EDIT 4: the annotations will interfere with CSS's "nth-child" and similar selectors. I think there's a way you can leverage the shadow dom to keep the annotations separate from the user's markup: https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

EDIT 5: rendering annotations this way opens the door for all sorts of quick-win features, like highlighting or listing all the elements that have been annotated and saving/sharing this as a file.

EDIT 6: this should really just be a script you include in <head />, for the testing environment only. it's poor design to mix view logic with testing/feedback.