DEV Community

Supun Kavinda
Supun Kavinda

Posted on

Is document.execCommand() obsolete?

I'm currently working on a rich text editor (WYSIWYG). I went through several articles and all of them explained how to do that using document.execCommand. All the libraries out there does the same.

However, MDN says this 😱

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Is it true? Then, what should I use?

Or, is this statement wrong?

Top comments (10)

Collapse
 
daviddalbusco profile image
David Dal Busco • Edited

If you are starting from scratch I would say the safest bet is to not use document.execCommand().

We've developed and open sourced ours WYSIWYG inline editor before noticing the deprecation, therefore it still use execCommand but we've got an issue about it to keep this in mind.

Honestly I would also be curious to know what's the timeframe for the deprecation and if it will be a big bang or a smooth transitions. I guess many apps and libs are still using execCommand, but only my guess.

Collapse
 
supunkavinda profile image
Supun Kavinda

David,

Thanks for the comment. It's quite frustrating that execCommand is deprecated and there's no alternative at the moment. Is it suggesting that we have to code our own execCommand? And, as I see draft.js (React library for content editable doesn't use execCommand). So, do you think it's better to use a library like that for this case?

And, yes, I'm creating from scratch. I'm not happy with the things out there. I need it to be in my way ;)

Collapse
 
daviddalbusco profile image
David Dal Busco

I don't know what's the best path for your project. In our case, we were and are often looking to develop from scratch, it's fun but on the other side in was quite challenging. draft.js or other if fits can ease the process.

The big advantages from execCommand in comparison to manipulating the DOM is that it handle "undo" without the need of developing anything, so yep, a pity that is is marked as deprecated (except if of course there would be a clear replacement).

Thread Thread
 
supunkavinda profile image
Supun Kavinda

Thanks for the comment, David.

After posting this, I checked Medium's source code and it seems like they are not using execCommand.

There are undo options in draft.js. Wanna try it as the project is already written in React.

Thanks for the thoughts!

Thread Thread
 
nsharma1396 profile image
Neeraj Sharma

Hey, draft.js is an exceptional rich text editor framework in my view. But I can say that it lacked detailed documentation when I used it which made it harder to find solutions for simpler problems. You can also consider Slate.js which shares a lot of similarities with Draft.js. I personally used Draft.js and can say that it was quite good too.

Thread Thread
 
supunkavinda profile image
Supun Kavinda

Neeraj,

Thanks for the comment. We started creating the app with draft.js and it's pretty amazing. Yes, the documentation isn't very good. I cloned the medium-draft repo and learned how he has used draft JS and then started coding. That's easier than going through the documentation ;) Never knew about slate.js. Will check that out.

Thanks.

Thread Thread
 
nsharma1396 profile image
Neeraj Sharma

Glad to know that! All the best with draft. If you haven't already, I would also recommend you to check out Draft.js Plugins. Excellent package covering lots of interesting use cases like mention/suggestion box, etc., created by Nik Graf.

Thread Thread
 
daviddalbusco profile image
David Dal Busco • Edited

So, I have re-implemented our WYSIWYG component to replace the obsolete document.execCommand

I just published a blog post to introduce the solution.

Any feedback or contributions are more than welcomed!

Thread Thread
 
aorcsik profile image
Antal Orcsik

The link to your blog post is broken.

daviddalbusco.com/blog/reimplement...

Collapse
 
xgqfrms profile image
xgqfrms • Edited

Try this alternative solution.
developer.mozilla.org/en-US/docs/W...