v1 of the editor

[burtonator]

Link to Issue

Closes: #9144

Description of Changes

All the v1 issues documented here:

#8937

But here are the highlights.

• better drag/upload indicators
• mobile/desktop layouts now work
• bugs from v0 fixed
• /editor has a desktop and mobile version you can use.

"How We Fixed It"

Test Plan

• There's a test plan in the README.md

You can just load /editor in the UI and play with it.

Deployment Plan

Other Considerations

[masvelio]

1. I have the same image. When I drop it, I am getting an error. When I use upload image icon, it works.

Kapture.2024-09-09.at.13.46.59.mp4

2. Loader indicator takes up the whole page but I think it should take either the body or maximum the editor space. Also I think it should be semi-transparent as now it is all gray.

[mzparacha]

1. Image modal isn't responsive on small sizes (supported min screen size is 320px per this) - same with URL modal

2. Uploaded image management icons are a bit misaligned

3. Not sure if this is expected behavior but I think we shouldn't be allowing images to be inline

Screen.Recording.2024-09-09.at.6.35.18.PM.mov

4. If the uploaded image is selected and dragged over, the editor enters drag/drop mode

Screen.Recording.2024-09-09.at.6.35.18.PM.mov

5. Any URL (even non-image ones) works when uploading an image through a link

Screen.Recording.2024-09-09.at.6.38.59.PM.mov

[mzparacha]

Found some minor issues above, generally works. Thanks!

[burtonator]

@masvelio on your issue with inline images, I think we have to support that.

I agree that it can be kind of annoying, but:

1. I'm not sure how we would block that. I think I'd have to really hack the MDXEditor internals to do that.

2. It's actually valid HTML and there are reasons to do this like if you want a little image inline in your text.

I agree it's rare though but the downside is you just undo the operation.

[burtonator]

@masvelio Your comment about "If the uploaded image is selected and dragged over, the editor enters drag/drop mode"

... I think this is resize mode. Where you can resize the image.

This is expected.

[burtonator]

@masvelio "Loader indicator takes up the whole page but I think it should take either the body or maximum the editor space. Also I think it should be semi-transparent as now it is all gray."

You have a stale build or something. That's from v0... I've fixed that. You could probably pull my new branch and test again. Not sure how that happened.

[burtonator]

@masvelio

Uploaded image management icons are a bit misaligned

They're aligned to the right but your image has some white background area, correct?

You can see them better here.

PS. Sorry about the Putin image!

[masvelio]

@burtonator you should mention @mzparacha in post of this cases, not me. Anyways, let me answer some of them.

They're aligned to the right but your image has some white background area, correct?

You can see them better here.

PS. Sorry about the Putin image!

They are not aligned horizontally. Trash icon is above the cog icon, they should be on the same level.

5. Any URL (even non-image ones) works when uploading an image through a link

@burtonator this is not fixed ☝️