Add inline editable text

[tuliren]

Context

Thank you for this amazing UI library. When I tried to find an inline text editing library for React, I could not find one that works well with Mantine. So I build this one. Hope that it is helpful to others as well.

Summary

• The text looks normal, but is editable inline.

  

• When the text is hovered on, its background will become gray and the cursor will become text, to indicate that it is editable.

  

• Click on the text will enter the editing mode. There will be a popover showing a submit and a cancel button.

  

Discussion

• Many of the inline editing libraries use different elements for showing and editing the text. However, using that pattern, when switching between the view and editing mode, I found it very hard to keep the text at the exact same place without introducing any pixel shift. That's why in this example, I used TextInput to present the text directly to avoid such trouble.
• An extra feature is to add hotkey (Esc) to quit the editing mode. I think that this is not essential to this example. But I can implement that as well if needed.

[netlify[bot]]

✅ Deploy Preview for zesty-dragon-10e479 ready!

Name	Link
🔨 Latest commit	592175f96b2d0e5e763bf4b3aa5096911f062fd3
🔍 Latest deploy log	https://app.netlify.com/sites/zesty-dragon-10e479/deploys/62d3e38ef9d0aa0009468b0f
😎 Deploy Preview	https://deploy-preview-22--zesty-dragon-10e479.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.