Enhance Show Slur Metadata Feature

[aatmanvaidya]

In the current implementation of the show slur metadata feature, we are inserting a svg icon next to a slur and when a user hovers over it, some metadata is displayed.

The Issue

Since we are inserting the icon in a span tag (for the icon) after the slur word, this is breaking the formatting and structure of text on many websites like Reddit, Instagram, etc.

Proposed Solution

Instead of having the svg icon we can fill the slur world with a feather blur, and when user hovers over it, metadata should be shown.
@dennyabrain has created a demo image of how the feature should look here - #607 (comment)

Code Changes

• All the core logic code for the feature is present at plugin/src/transform-general.js - here
• The documentation for each function can be found here - https://github.com/tattle-made/Uli/wiki/Show-Slur-Metadata-Feature

locateSlur() function identifies all the slur words in the page and inserts the icon in a span tag next to the word.

addMetaData() function helps show the metadata when we hover over it.

Code changes would mostly be required in these two functions only.

[dennyabrain]

@maanasb01 I had prototyped the css to achieve something like the effect I drew in that image. Sharing it if its helpful

background-color: #ffde2155;
box-shadow: 0px 0px 5px #ffde21;

You can achieve the look however you want in CSS. The only thing to note is don't use a style that affects the layout in any way. For instance, adding padding or margin etc. As long as its something that the browser's CSS renderer can handle without affecting the layout of the webpage, we are good.

[maanasb01]

Hey @dennyabrain Thanks for the information! I will keep that in mind.