TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

2 pointsby escotalmost 3 years ago
I&#x27;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&#x27;m trying to find another library, or tips on rolling my own, for simple link creation so I don&#x27;t have to pull in code for all the other fancy things prosemirror does.<p>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.<p>[0] https:&#x2F;&#x2F;github.com&#x2F;prosemirror

3 comments

escotalmost 3 years ago
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.
IceMetalPunkalmost 3 years ago
I mean... a simple `renderedHTML = inputValue.replace(&#x2F;(https?:\&#x2F;\&#x2F;\S<i>?\.\S</i>)&#x2F;ig, &#x27;&lt;a href=&quot;$1&quot;&gt;$1&lt;&#x2F;a&gt;&#x27;)` should be fine for client-side rendering and <i>extremely basic</i> http(s) URL replacement, no?
评论 #32361803 未加载
butzalmost 3 years ago
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.
评论 #32361795 未加载