using getInlineAnchorList with Mantine
I'm trying to inject a Mantine button into multiple components at the same time using
getInlineAnchorList() using document.querySelectorAll() and only the first button is rendering properly, the rest are unstyled mantine buttons
21 Replies
for example^
can you try inspecting the button and see if the style tag is appended
it is yeah
this is what the unstyled button looks like^
and the styled button
hehhhh
that's a bug in CSUI inline anchor imo
I think so
it should inejct the style for each one of those shadowDOM
I wonder why it's not doing that :d........
1 hypothesis I can think of is....
did you create a single style element at the top of your CSUI?
yeah
shoudl I be creating more than 1
yeah, I think it references the exact same one and thus the getStyle just apply each other
so only the last getStyle call can get the style element hmmm
but taht means they should both inherit the styles no?
interesting
I think that's not the case bc getStyle works with the style element itself
and element in DOM are referenced like pointer, not by value
what would be the solution?
or temporary solution
yeah I'm thinking
working on something atm btw mb if I'm slow xd
nono plz dw at all
you're super qucik to responding to all my issues
you're awesome
this is interesting
I think the getInlineAnchorList API is incompatible with getStyle atm for this edge case lol - thanks a lot for bringing it up
this is a flaw within the design decision of the inlineAnchorList itself imo, and on top of my head I couldn't come up with a quick solution xd
CSUI is a single instance iife script, thus the style element created at the top will be referenced thorough and will not spawn new one
and because emotion is a run-time css-in-js solution, it needs an anchor to mount the provider
Tho
I think the temporary solution for now (atleast for my use-case, which probably isn't super translatable to other people) is to just have the currently focused emailbox to be the element to inject the react component into
but the issue I run into when I try to do that: if I focus one email, it will have the proper button rendered, then when I focus on a different email, the first email goes from the properly rendered button to an unstyled button, and the new email receives the proper button
Try this idea:
try spawning a new style tag for each anchor so first construct 2 arrays then whenever getStyle get called, you create a new style elemetn and a cache, and push it to this array then, in your component, reference an item in this array by an ID or something from the anchorSo instead of a single cache, every time getStyle is invoked, push a tag inside the array
For anyone who runs into this issue in the future, this is how I solved it: https://discord.com/channels/946290204443025438/946290204904390693/1065038700855185429
Mantine example added with multiple inline: https://github.com/PlasmoHQ/examples/blob/main/with-mantine/contents/multiple.tsx
GitHub
examples/multiple.tsx at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/multiple.tsx at main · PlasmoHQ/examples