Is it possible to displace text around the Mention according to margin?

[p-ackland]

I've seen the solution mentioned in #245, however this doesn't have any affect on unhighlighted text. I understand the highlight effect is achieved by duplicating the content so I'm not particularly hopeful this is possible. Just wondering if I'm missing something simple to get this working.

Essentially I want to have a highlight box surround the mention text and shift the cursor outside of that space according to the defined margin of the Mention.

I've played around with adding styles to try and affect the result but it only seems to modify the visible div behind, not the text area itself.

For instance this is my current behaviour by adding padding and margin to the Mention component:

As you can see even though a Mention has been inserted, the cursor still hugs the text, not the Mention component itself.

Here is a simulation of the desired behaviour:

I could probably hack a solution together by appending spaces in some funky ways but would like to avoid that. If not possible currently, feel free to close this issue.

[vittaljk]

Give only top and bottom padding to highlight and left and right spacing can be given by using displayTransform,

style = {{
  backgroundColor: "rgba(145,213,255, 0.3)",
  padding: 3px 0;
}}

<Mention
          data={data}
          displayTransform={(_, display) => `       @${display}        `}
          ....
 />

[dylanhusted]

FYI if you go down this road of spaces for horizontal padding, do make sure you use the non-breaking space character: https://unicode-explorer.com/c/00A0. Otherwise, your highlighting will wrap on line-breaks.

To do this with this library:

const nonBreakingSpace = String.fromCharCode(160)

<Mention
   ...
   displayTransform={(_, display) => `${nonBreakingSpace}@${display}${nonBreakingSpace}`}
/>

Of course this is all quite hacky, but we're stuck with the limitations of browser textareas here.