DEV Community

SlateJS: Adding Images and Links

Karl Castillo on April 11, 2021

In the previous, we talked about setting up a simple SlateJS text editor. Now, we're going to add two new features to our text editor -- inserting ...
Collapse
 
phongluudn1997 profile image
phongluudn1997

Thank you, you save my life.
Btw, Range.isCollapsed(selection) should replace to selection.isCollapsed according to the latest version of SlateJS

Collapse
 
aagamjain113 profile image
Aagam Jain

I tried the same method which you have applied above but it shows an error of createParagraphNode not defined which is neither exported from slate or slate-react.
So what is this createParagraphNode actually and what does it do?

Collapse
 
tbrzycki profile image
Brzycki, Trevor

If you click "Open Sandbox" in the demo listed above the comments, you can find all of the code used to produce that demo. This includes the createParagraphNode function (which is located in /editor/utils/paragraph.js).

Before I checked that sandbox I was able to infer what that would do (its just creating an object with the type "paragraph" and populating the children).

Any other code you may have been wondering about would also be located in the files of that sandbox.

Collapse
 
viktorb98611515 profile image
Viktor Borisov • Edited

Thank you very useful!
Do you have an idea how to have a link from image ?
Having a node with structure like this, does not work for me:
{
type: 'link',
url: 'google.com',
children: [{type:'image', url: 'srcOfImg', children:[]}]
}
When I insert it the 'image' child is removed.

Collapse
 
mahadevans87 profile image
Mahadevan Sreenivasan

Hey cool tutorial.

Is it possible to resize an image?

Collapse
 
koralarts profile image
Karl Castillo

At this point, you cannot resize the image but that could be another feature that I can think about adding to the editor.

Collapse
 
cormacncheese profile image
Cormac

Super helpful, but createParagraphNode and Element.isElement are giving me type errors.

@phongluudn1997's comment solved the third error.

Collapse
 
aagamjain113 profile image
Aagam Jain

Did u find a way around for createParagraphNode type Error or at least a way to insert links?? I am facing the same issue.

Collapse
 
masumluf profile image
Md.Rezaul Karim

How Can I add a paragraph after uploading an image ? So user can easily type anything after the image.

Collapse
 
onlyayep profile image
Arif Rahman

Nice article! I wonder is there a way to upload local images instead or pasting a link?

Collapse
 
babatunde50 profile image
Babatunde Ololade

Can you please share the github repo