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)
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.
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.
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.
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) ☺️
Switched to this version! Will report back if I find anything unusual or think there are improvements to be made.
Awesome!
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.
Yeah, we should probably have a remote upload for cover image. For posts being up right into the article, you can use the plain
syntax.Regarding that overlap, are you using grammarly or another plugin? If so, I'd take suggestions on how to possibly deal with this!
Yes, you're right! I've read about Grammarly in one of your comments and started using it.
Yeah, I'm having the same issues. I sort of became blind to it while developing! 😳
Need to get that worked out.
👨💻 worked
Humans are naturally adverse to change. So providing this as opt-in is a very creative solution.
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.
I switched to v2 beta and I feel more modern! Great Improvement overall. Thank you
Right on time!
I was just talking about this earlier today with Wilson Reyes 😂
So happy to see this! When I first joined Dev (few days before this post), I thought the editor was rather unfinished (no offense)
It will only work on new post?
Because can't see new editor on edit old post.
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.