[EXP] How to display a component below or above a text selection

[MiniSuperDev]

What is the example you wish to see?

Showing a component above/below a selection is a behavior that many extensions use, for example google translator, dictionary, grammarly, etc.

I would like to see an example of how this behavior should be implemented.

I would also like to know if there is an easy way to do it using something specific to plasmo, since I have seen that it is a common functionality.

Thank you so much.

Is there any context that might help us understand?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[zhangyanling77]

maybe you need @floating-ui/react-dom and there is a repository：translate-ext

[skromez]

bump, also interesting in how this should be implemented using Plasmo, I've created a thread asking the same question in the discord, but didn't really get the proper answer, but maybe it will be useful for you @MiniSuperDev

I've created another thread in discord reposting what you said here, hope you don't mind :)

[Parassharmaa]

This could done using this: https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/plasmo-inline.tsx

• Identify the selected text using window.getSelection()
• Insert a custom HTML element before or after that selected text div/span

<selected-text data-text-selected=""></selected-text>

• Now using Inline Content script you can render components inside <selected-text/>

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`selected-text`)