Reveal classes on hover on masked chars

Hi,

I like the extension alot and it saves alot of space on the editor. Thanks for such a great extension @moalamri.

I think hovering on the masked chars revealing all the classes inside a popover can be a great feature to have. This will help us with some few extra clicks.

Moreover, conditional masking can be applied on the basis of number of classes crossing certain threshold.

This scenario won’t hurt since only 2 classes are used.

<div className="rounded p-4"></div>

But this would be great scenario of masking.

<button className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"></button>

Hope you also find these feature helpful.

Thanks.

[moalamri]

Hey @androizer Glad you found it useful 😃 Regarding your first suggestion, it’s already there and hovering on unfolded text, it show a popover with full text, but regarding hovering on folded text it’s impossible (The code is there also) but hovering on it won’t trigger the popover. The reason is because this is not a built-in API, it’s a hacky way I used to achieve this which goes as the following:

• Text get matched.
• A custom decorator is used for the matched text which set the letterspacing to -1 ch (ch = character)
• Since letters are overlapping each other into -1 ch there’s nothing to show.
• I used a decorator option (before) which insert text at the beginning as a “mask”.
• I exposed the other decorator option (after) so the user can append any custom text. So, in this case there’s no text to hover 😄 it’s only possible when hovering unfolded content.

Regarding your second question, it is possible using the regex. instead of using * which indicate (0 - unlimited) you can replace it with {10,100} which indicate (10 - 100) any matched content that is less than 10 characters won’t be folded.

[moalamri]

@androizer I made some fixes in the recent two updates, please be sure to have the latest version.

You are right about documentation, it lacks some extra details. I will leave it to the contributors👍