Took me a minute to figure out what the pinning feature does. At first, I thought it might make the Tater element unmovable but that didn't seem to be the case. Realized only after revisiting the page that it keeps the comment open. Obviously up to you, but might want to change the wording on that.
Thanks! I labeled the button "Pin" mostly because of space, but I can see how that would be unclear. I don't think "Pin Open" would fit, but I'll keep the idea in mind and see if I can think of a better way of handling it.
- The positioning of the 'taters' isn't relative to the element they're attached to. Put a tater in one of the little circles, then change the width of the page, and it moves out of the circle. That's limits it usefulness a lot because it stops users accurately attaching comments to small features.
- Needing to wrap a component in the <Tater /> component is painful. It'd be better as an external app that's injected in to the page. If it has to be a React thing, I'd much rather use a HoC or better still, a hook. I don't want to have to work out if a bug is in my code or the Tater code. Which leads on to...
- Another React project with no tests. This makes me very sad.
> They're positioned as a percentage of the parent 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.
Apart from the Usage section of the readme, there’s no mention of how annotations are only stored locally, via localStorage, it looks like? Might be helpful to state that explicitly in the readme and on the demo site. Nifty tool — thanks for sharing!
Yeah, the docs are a little sparse at the moment. I really only intended this as a demo, and didn't expect to get much attention, so I didn't document everything. But when I get around to expanding the docs, I'll definitely make a note about local storage.
Oh, interesting. I guess that's because React re-renders the child component. I should think about a way I can prevent it from doing that. Ideas welcome!
Spudtacular demo by the way.