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

PlasmoHQ / plasmo

🧩 The Browser Extension Framework

https://www.plasmo.com

MIT License

10.53k stars 366 forks source link

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

Open MiniSuperDev opened 1 year ago

MiniSuperDev commented 1 year ago

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 commented 1 year ago

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

skromez commented 1 year ago

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 commented 10 months ago

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`)