Ask HN: Best way to let a user create a link inside a text input

[escot]

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

[escot]

To 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.

[IceMetalPunk]

I 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 → IceMetalPunk]

I 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 → escot]

Ah, okay, I misunderstood. Ignore me :D

[butz]

Do 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 → butz]

Yes I’d like it to work while editing