rajdeep / proton

Purely native and extensible rich text editor for iOS and macOS Catalyst apps
Other
1.25k stars 81 forks source link

Is it possible to give padding to a range of text like html inline block? #302

Open 07akioni opened 4 months ago

07akioni commented 4 months ago

I find an app that uses native rendering to display a markdown code block:

image

But I've no idea how they implement it.

It has both:

  1. round corner
  2. background color
  3. no extra space
07akioni commented 4 months ago

I noticed selection range at edge looks a bit wider than the char itself:

CleanShot 2024-03-27 at 20 24 33@2x

rajdeep commented 4 months ago

You can use insets on BackgroundStyle to add additional padding on any of the sides of the background. Have a look at the documentation here.

In the screenshot that you have shared in your comment, it seems that there is likely a half-space or no-break-space character used that is what is showing you additional padding in selection. You can use no-break-space like this:

let noBreakSpace = "\u{00a0}"
let text = "\(noBreakSpace)Test\(noBreakSpace)"

If you use noBreakSpace, you would not need to use insets on BackgroundStyle.