The new Editor

[habryka]

Look

at

this

glorious

table

Celebrations! The new editor is finally here!

Starting from today, all desktop users will by-default use the new visual editor that we’ve been testing for a while. While the primary goal of this is to have a better foundation on which to build future editor features, here are a number of things you can do starting from today:

• Insert tables! A heavily requested feature.

• Copy-paste LaTeX without everything breaking!

• Nest bullet lists and other block elements in blockquotes! (still no nested blockquotes though, though if enough people want that, it would be easy to change)

• Image Uploads! (Just drag-and-drop images into the editor, and things should work out naturally. You can also copy-paste, though beware that copy-pasting from other websites means we link to the copies of those images from other websites, and won’t reupload them.)

• Much less jankyness and brokenness!

Let us know what you think about the new editor. We’ve been testing it for a while and have been pretty happy with it (and users who had opted into beta features also had predominantly positive feedback). You can also use the old editor if you run into any problems by checking the “Restore the previous WYSIWYG editor” checkbox in your user settings.

[Adam Zerner]

There’s a small bug I’ve noticed. Steps to reproduce:

1. Type.

2. Delete everything you’ve typed. The placeholder text will appear.

3. Type again. The new text will overlap with the placeholder text for a few seconds.

Here’s what it looks like when the text overlaps the placeholder text:

In the past I think I recall it taking longer than a few seconds for the overlap to go away.

[habryka]

Yeah, I also noticed this. Should be easy to fix. The previous placeholder text implementation was a hack to deal with the old editor, but the new editor actually allows us to do this much more elegantly, so I will see when I get around to fixing this.

[Adam Zerner]

Awesome!

[ozziegooen]

I’m excited to see this, and have been enjoying using it.

I’m curious though; is it interoperable with other methods, or are there any projects on the horizon to convert this to Markdown if needed? I would like to have backups or possibly later post some of my LW content to other platforms.

I realize that probably couldn’t keep all the functionality (no fully isomorphic translation), but even some of it could be handy.

[habryka]

Yep, we have markdown translation for all documents, and it should be basically fully interoperable (LaTeX is a bit janky, but I think everything else should work).

You can get it either via the API, or you can activate the markdown editor in your user profile, and then edit any post that you edited in a non-markdown format. It will offer you to display the content in Markdown instead.

[ozziegooen]

Good to know, thanks!

[NunoSempere]

For a hackier approach, you can also feed html (which you can get from the graphQL API) to a utility like pandoc in order to obtain the markdown.

[habryka]

We do directly expose a markdown export via the graphQL API, so that sure would be a sad roundtrip :P

[Joe Rocca]

A markdown version of the body doesn’t to be in any of the possible fields of the `Post` type. Am I looking in the wrong place? I’m using this:

https://​​www.lesswrong.com/​​graphiql

[habryka]

Should be part of the contents field:

{
  post(input: {selector: {slug: "the-new-editor"}}) {
		result {
      contents {
        markdown
      }
    }
  }
}

[Joe Rocca]

Ah, thanks!

[Maxwell Peterson]

Love it. Never tried the old editor, but had tried writing posts a couple times in the past, on other sites. I’d always get stuck screwing with the editor settings and trying to figure it out, or losing my work, or whatever. This current LW editor makes it so easy that I finally finished a post (and then two more)! The editor isn’t the whole reason for that, but it’s definitely a factor.

[lsusr]

Is it possible to insert tables via the Markdown editor?

[Rafael Harth]

!	Yes	!
it	certainly	is

Syntax guide here. Alternatively, click on ‘FAQ’ in the left panel and CTRL+F for ‘Markdown’; that’s how I found it.

[Dagon]

Awesome! Would it be possible to put an easy link to https://​​www.markdownguide.org/​​cheat-sheet/​​ or some other reminder of syntax somewhere easy-to-find while actually entering/​​editing comments?

[habryka]

Yeah, I agree we should add that somewhere. But don’t want to clutter up the new-comment form. But I think we can make something work (currently the bottom left corner is basically completely empty, so seems like a cheap option).

[Adam Zerner]

Embedding screenshots would be really cool as a future feature IMO.

[Raemon]

Could you go into more of what you mean by this? (You can copy-paste images directly into the editor, and I’m not sure what else you would mean by screenshots)

[Adam Zerner]

I didn’t realize that you can copy-paste images. Whoops! In this comment I initially got a link for the image because I didn’t know you could copy-paste.

[riceissa]

I just tried doing this in a post, and while the images look fine in the editor, they come out huge once the post is published. Any ideas on what I can do to fix this? (I don’t see any option in the editor to resize the images, and I’m scared of converting the post to markdown.)

[Raemon]

I just fixed some of them (left a couple more for you to fiddle around with). This is pretty silly and we should fix it at some point, but the issue is that until you’ve manually fiddled with the size of the images slightly, they default to max-size.

You can resize them by click the corner of the image and dragging.

[riceissa]

Thanks, that worked and I was able to fix the rest of the images.

[gilch]

LessWrong will host our images now? How do we add images using markdown? It didn’t work when I tried drag and drop or pasting.

[habryka]

Yeah, sorry, the image uploader is currently connected to the WYSIWYG editor, so for markdown you still have to host them somewhere else. The markdown editor is currently really a very minimal HTML textfield with nothing fancy happening, so it’s not super obvious how to make image-upload work without a bunch of additional work.