DEV Community

Ben Halpern Subscriber for The DEV Team

Posted on

Changelog: We have a new beta editor you can try

Hey folks! We have a new editor you can start using! We have no plans on removing the old editor as an option, but you can start playing with a new one now!

The new editor is a bit easier to use. It maintains our wonderful markdown + liquid tag style of writing posts, but removes the "frontmatter" part, which was confusing (and inherently buggy in frustrating ways!)

V2 is still in unfinished beta mode, but it's good to go and should work wonderfully for most use cases! To switch to the new editor, go to https://dev.to/settings/misc and switch to "v2".

Thank you to Derek Hopper for pitching in big-time to help launch this feature. The work can be reflected in this PR.

If you are interested in making any code quality improvements, feel free to take a look at the code here.

If you are interested in pitching in on the ongoing development effort of this feature in any way, let me know in the comments and I'll be in touch. It's principally built in Preact.

If you would like to start playing around with one stretch feature that I think would be really cool, take a look at this issue:

Typeahead liquid tag dropdown in new editor #872

Is your feature request related to a problem? Please describe. As a user, it can be hard to remember what exactly the commands for liquid tags in the editor are. In the way I might use this feature in my code, I'd like to type {% and get a list of options for autocomplete.

Additional context The editor is built in Preact, and ideally this could be done without new dependencies, but if we need to use preact-compat, we could.

I believe the editor will need to be written as a content-editable div, and we'd listen for the typing etc.

Ultimately it should work similarly to how I use typeahead in VSCode etc. 🙂

This is what it might look like:

Happy coding!

Top comments (18)

Collapse
 
derekjhopper profile image
Derek Hopper

Great to see this in beta! Just wanted to say if anyone needs clarification on some of the code around the tags input, I'm happy to help. I tried to be as descriptive as I could when refactoring, but I know a couple of places may not be as clear as I would've liked.

Exciting to see this new editor in the wild. I was able to play with it quite a bit while testing and I think it's great.

Collapse
 
ben profile image
Ben Halpern

Thanks so much for this!

I'm currently aware of some small issues and features which will be needed, but it helps a lot to have great code as a base like what you did with this Derek.

If you'd like to give the issue I linked to some thought, feel free to. 🙂

I'm going to be more focused in the short term with adding the additional config that is available in the current version as an option for this one, and working out any usability issues.

Collapse
 
derekjhopper profile image
Derek Hopper

Sounds good! I don't want to "claim" the issue just yet (in case someone else wants to grab it). In the mean time, I'll start looking into how typeahead works in VSCode. I don't know that I use it that much, so the details aren't coming to mind.

Thread Thread
 
ben profile image
Ben Halpern

Sounds great! To simplify things, it may be more relevant to think in terms of @ mention drop downs in web forms. (We’ll also want @ mentions, backed by Algolia) ☺️

Collapse
 
dandevri profile image
Danny de Vries • Edited

Switched to this version! Will report back if I find anything unusual or think there are improvements to be made.

Collapse
 
ben profile image
Ben Halpern

Awesome!

Collapse
 
joehobot profile image
Joe Hobot

👨‍💻 worked
somealt

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev • Edited

Great work, Ben!

I've found one issue.

Look at the bottom edge of the editor – there is some kind of overlapping.

I wish there could be a remote image upload.

It's terrific simple with CarrierWave which you use.

Collapse
 
ben profile image
Ben Halpern

Yeah, we should probably have a remote upload for cover image. For posts being up right into the article, you can use the plain ![](URL) syntax.

Regarding that overlap, are you using grammarly or another plugin? If so, I'd take suggestions on how to possibly deal with this!

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev

Yes, you're right! I've read about Grammarly in one of your comments and started using it.

Thread Thread
 
ben profile image
Ben Halpern

Yeah, I'm having the same issues. I sort of became blind to it while developing! 😳

Need to get that worked out.

Collapse
 
joelnet profile image
JavaScript Joel

Humans are naturally adverse to change. So providing this as opt-in is a very creative solution.

Collapse
 
ben profile image
Ben Halpern

Definitely. For valid and invalid reasons. We will probably make this the default for new users once we've let it's out of beta.

Collapse
 
ianandhum profile image
Anandhu Manoj

I switched to v2 beta and I feel more modern! Great Improvement overall. Thank you

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

Right on time!

I was just talking about this earlier today with Wilson Reyes 😂

Collapse
 
equiman profile image
Camilo Martinez

It will only work on new post?
Because can't see new editor on edit old post.

Collapse
 
ben profile image
Ben Halpern

It will work on posts that don't use frontmatter. So yeah, you won't be able to get to it on old posts. We could probably make this workaround possible though.