How to get reference to overlay anchor
Hello!
I want to position an icon on the bottom-right of every contexteditable=true or textarea element that is currently focused. To do that, I was thinking on getting the element via getOverlayAnchor with a querySelector.
However, to accomplish it I need to get a reference to said element in order to get its bounding rect and calculate the position accordingly.
I tried the custom render function but I always get the "html" element inside the "anchor" prop.
Is there a way to accomplish this? Is my approach correct or does anyone already know how to do this?
Thank you!
20 Replies
The only way I found how to reference this is in the
getRootContainer function. It has a "mountState" prop that gives you the list of elements that the anchor is related to.
Seems like the anchor is passed down to the default exported component as a anchor prop. The docs are not really clear on this so might be good if they could be updated @louisgv !yeah I haven't gotten around to update the docs on this lol - you are the first person to dug this deep into the CSUI feature :p
docs updated
you're the best!
https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#anchor <- added this at the bottom
Plasmo Docs
Life Cycle of Plasmo CSUI – Plasmo
Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.
and the example for using existing overlay also added a comment about passing an anchor to it
hEY, sorry to bother you again, but the docs do not specify how to customize the mutation osberer in the renderer fuction, any insights?
oh you just spawn your own mutation observer basically
Maybe I'm dumb but I can't get my head around this lol. I'm trying to set the current anchor to the currently focused element with some checks and the getOverlayAnchor function does not update as often as I like so I wanna create my own observer
You will need to remove the getOverlayAnchor to have your mutationObserver run independenty <- otherwise it would spawn twice
Yep. Commented it out
The mutation observer should also be inside the render function I think - it's basically just watching over something
technically - you can implement these check within your react component via a mutationObserver inside an useEffect that watch over the anchor instead
that would reduce the surface of observation
(could be anchor or could be something you query)
Then based on condition, hide/unhide your csui component
Yep. As far as I can see, the render function receives a default anchor. I'm trying to spawn a observer that modifies the anchor and sends it down the compoennt tree, but nothing gets rendered. Maybe I'm doing something wrong.
I swear if I get this working I'll add it as an example so future generations know how to do it lol
Thanks for your help btw
Try something like this example instead: https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/plasmo-root-container.tsx
right now, you are still limited by the default rootContainer (it spawns a shadowDOM, you can reimplement it or wrap it)
I still want a shadow DOM tho
@maelfunes has reached level 3. GG!
what kind of condition are you looking for to re-render your overlay CSUI?
I want to render the overlay only on the element that has focus at the moment and it's a textarea/div[contenteditable]
checkout this repo:
https://github.com/louisgv/linkedin-copy-paste
There's a couple great idea in there that implement something like that
Specifically, it uses this paradigm: https://github.com/louisgv/linkedin-copy-paste/blob/main/src/content.tsx#L98-L99
So you listen to the focus event across the entire page
and whenever there's an input/text-area that should be focused, it grab that element and calculate the overlay anchor position
Was meaning to refactor it into a reusable utils package within plasmo but haven't found time to do so lol xD...............
That's really helpful