- Slatejs is a rich texteditor using the "contenteditable" param - very similar to any other text editor like TinyMCE. - Slatejs is extremely extensible - adding your own ability of items to do. - In the slatejs demo - [https://www.slatejs.org/examples/richtext](https://www.slatejs.org/examples/richtext) you can see how it works. - Pretty much like a free text editor - any bold. italic. - It also supports markdown shortcuts - [https://www.slatejs.org/examples/markdown-shortcuts](https://www.slatejs.org/examples/markdown-shortcuts) - If you type ">", "-", or "#"s., it automatically expands to those shortcuts. ([see code](https://github.com/ianstormtaylor/slate/blob/main/site/examples/markdown-shortcuts.tsx))
Problem Statement:
- Slatejs doesn't support autolinking by default. - There is manual linking - [https://www.slatejs.org/examples/links](https://www.slatejs.org/examples/links) , you can select a text and make it a link. - All modern editors, when you type a link, it autolinks. If you type google.com and type space, it makes it a link. But slatejs doesn't out of box. - This is exactly what we want to do. When someone types a valid link and presses space, it should automatically make it a clickable link. i.e when i type [www.google.com](http://www.google.com) - You can use this code to find out whether it is a valid url - [https://gist.github.com/alagu/b5355685aace148607bcda84264a9ff2](https://gist.github.com/alagu/b5355685aace148607bcda84264a9ff2) - Pointers: - Read through the markdown shortcuts code, you'll find a lot of similarities in how you want to add your linking as well. - But it will not exactly work, because markdown uses shortcuts, here you want evaluate whether it is a valid link after a space and convert it into space. - Slatejs has a data representation format in json (scroll to bottom of the code in this [markdown shortcuts](https://github.com/ianstormtaylor/slate/blob/main/site/examples/markdown-shortcuts.tsx)), there is a initialvalue that is set that gets rendered. -
- So to update the content, you have to update the json and each type item in json has a corresponding rendering function called "Element" -
- As bonus, - if you are able to understand how Slatejs Transforms are working, it would help you to understand better.
### Output
- Share a codesandbox link with a working code of the autolinking. - How to test: - Try typing `[google.com](http://google.com)` and hit space, [google.com](http://google.com) should have become a link. `[www.twitter.com](http://www.twitter.com)` and hit a space, [www.twitter.com](http://www.twitter.com) should become a link.
