New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "linkify" feature #62

Open
thibaudcolas opened this Issue Apr 30, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@thibaudcolas
Copy link
Collaborator

thibaudcolas commented Apr 30, 2017

There are two scenarios here.

Pasting a URL on selected text adds a link to the given URL on the selected text

Wordpress / Dropbox Paper do this and it feels very pleasant to use. See https://github.com/ianstormtaylor/slate-paste-linkify/blob/master/lib/index.js

  1. Highlight some text
  2. Paste a URL
  3. Auto-links it

Pasting / typing a URL in text converts it into a link

This is the usual "linkify". Lots of editors do this.

@thibaudcolas thibaudcolas added this to the v1.0.0 milestone Apr 30, 2017

@thibaudcolas thibaudcolas modified the milestones: Post v1.0.0, v1.0.0 May 2, 2017

@thibaudcolas thibaudcolas changed the title Implement "linkify on paste" feature Implement "linkify" feature Dec 1, 2017

@thibaudcolas thibaudcolas changed the title Implement "linkify" feature Add "linkify" feature Dec 1, 2017

@thibaudcolas thibaudcolas modified the milestones: Post v1.0.0, v1.0.0 Dec 1, 2017

@thibaudcolas thibaudcolas modified the milestones: v1.0.0, Post v1.0.0 Jan 30, 2018

@THook

This comment has been minimized.

Copy link

THook commented Oct 1, 2018

Hey @thibaudcolas,

I created a simple gist to get you started:
https://gist.github.com/THook/db08b9297be5b556240b8f1f0363e33d

Hope it helps 🙌

@thibaudcolas

This comment has been minimized.

Copy link
Collaborator Author

thibaudcolas commented Oct 1, 2018

Nice! Can you explain what the regex does or point me to where you got it from? It's my main concern with those things – that it picks up URLs well enough.

@THook

This comment has been minimized.

Copy link

THook commented Oct 2, 2018

Sure!

I believe I got it from https://www.npmjs.com/package/draft-js-linkify-plugin.
If you need a more complete solution, consider using https://soapbox.github.io/linkifyjs

You can do a lot more from this starting point:

  • check if a link is relative to your website and use a Link when it is
  • query website metadata and display it in a tooltip
  • store links somewhere and display them (like LinkedIn does)

Let me know if you need more help

@thibaudcolas thibaudcolas modified the milestones: v1.1.0, v1.2.0 Feb 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment