5 ms·
Ask HN: Best way to let a user create a link inside a text input
I'm developing a flowcharting tool which lets users enter text inside each node. I want to allow you to highlight a bit of text and make it a link, by entering a url. Much like google docs and most other popular text editors. For a v1 I implemented this using prosemirror [0] which is pretty straight forward. The downside is that prosemirror is highly complex and introduces a large dependency. It also requires you to store data in their custom format. I'm trying to find another library, or tips on rolling my own, for simple link creation so I don't have to pull in code for all the other fancy things prosemirror does.
Eventually I may add other rich text editing features, like hash tags, @ mentions, etc. But I would rather start simple and resort to prosemirror when I really need it.
[0] https://github.com/prosemirror
- butz 4y agoDo you need URLs working while user is editing content, or only when text is saved? You might get away with simple URL detection script during text render. Of course, that might lead to some false positives, depending on supported URL format.
- escot 4y agoYes I’d like it to work while editing
- IceMetalPunk 4y agoI mean... a simple `renderedHTML = inputValue.replace(/(https?:\/\/\S?\.\S)/ig, '<a href="$1">$1</a>')` should be fine for client-side rendering and extremely basic http(s) URL replacement, no?
- escot 4y agoI want the user to be able to highlight some text and add a url to it, like you would with cmd-k in gdocs, sheets, etc. Not just linkifying any detected urls in the text.
- IceMetalPunk 4y agoAh, okay, I misunderstood. Ignore me :D
- escot 4y agoTo clarify — Id like this to feel like rich text editing. I just dont need all the other rich text editing features like colors, bold, lists, etc. I just want to support highlighting some text, cmd-k to add a url, click to edit the url, etc. Like how adding links to text in gdocs works.