UX: revamp the "Edit comment" screen

[ShalokShalom]

How is this supposed to work out?
https://pictshare.net/5gig2v2zug.png

[machour]

If you scroll down, you should see a green submit button (well, more like a link). Is it there?

[ShalokShalom]

Ah yeah.

Is there a way to make it more obvious?

The scrolling also doesnt work well, its kinda tricky to get down.
🙂

[machour]

This screen needs a lot of love indeed, updating this issue title to remember that.

[ShalokShalom]

When I edit a long comment: https://pictshare.net/p3x47c8g31.png

[machour]

😅

Started looking at solutions for this issue yesterday. My plan is to integrate a nice Markdown editor while revamping the screen. Came across https://github.com/wix/react-native-zss-rich-text-editor which seems really nice (but not actively maintained).

What do you think about this? Any suggestions for this screen ?

[ShalokShalom]

There is this, maintained by Facebook: https://draftjs.org/

[machour]

Looks slick, but it's meant for React, not React Native.
Maybe https://github.com/globocom/react-native-draftjs-render could help

[ShalokShalom]

Oh I see. I was too hurry xD

Yes, this looks nice ^-^

[housseindjirdeh]

Thanks so much @ShalokShalom, echoing @machour - this screen definitely needs a ton of love. 😅

A markdown editor for this would be amazing - but poses a few questions. Should we allow the user to do that when they also create a new comment? How would that work from a UX perspective, I guess we can have navigation to a separate screen but that adds an extra layer to the stack for posting a new comment 🤔

Another alternative (for the meantime if we're still exploring whether we should have something like draftjs) is having a button fixed on the bottom right Submit of the edit comment screen. That way users can always see the button?

Definitely open to thinking how we can use something like draftjs however, I think that could be so nice for the user.

[ShalokShalom]

I always hate it, when Facebook gives me ten different editors with different features in the different clients and modes.

Its confusing and inconsistent, so I vote for a unified editor, yes also for creating issues of course.

Otherwise do you have to initially write something and edit then in order to get into the markdown editor.

What is that for a workflow? :D

I would embed the editor, an extra layer is also distracting, while still preferred compared to two editors.

The fixed button is nice, since probably quickly implemented and a nice feature for the new version.

Thanks a ton 😃

[LeeteqXV]

The best Markdown example I have seen so far, is how thevAndroid app "Markor" handles the combination of markdown syntax, live highlighting/coloring and final output. Even if this might not be a suitable code base for this platform, it is well worth a look just for the impression. Attaching 2 screenshots with an example edit moment. (Notice that it automatically formats and colors the text as you are writing, while keeping the editable markdown syntax, and offers a preview button to see the result without the coloring effects.) (Edit: attaching missing files + removing clutter from replying via Gmail on Android.)  

[ShalokShalom]

So we can also use it for syntax highlighting?
I see no screenshots and you can delete the quotes in your answer, in order to prevent clutter, thanks. 🙂