Interface for Markdown support of NcRichContenteditable

[nickvergessen]

Mock-up for Markdown support of richtext

The popup should be shown after finishing the selection of some text (mouse button release) and should hide as soon as selecting one option. Also [ESC] should be able to close it.

Originally posted by @szaimen in nextcloud/spreed#1027 (comment)

[nickvergessen]

Comments

Copied from nextcloud/spreed#1027

• @szaimen When selecting the formatting, markdown syntax should be used to directly add characters around the marked text and adjust the look of it.

  • @nickvergessen That would be on rightclick?
    But that is something the vue library should handle anyway, so that when an app uses the input component it can say "yes markdown please" (like NcRichText afterwards for the posted messages already does for the post rendering)

    • @szaimen I would say it should rather be shown directly as soon as you select some text. (e.g. after the mouse click is done and text was selected)

      • @nickvergessen After a mouse select it might be okay, but I can see how keyboard users are annoyed. Like most of the time I have to fix my text selection with the keyboard because I failed with the mouse. I can see how it could be annoying then if arrow up/down are "captured" by the dropdown instead of adjusting the text selection.

• @ShGKme It's a bit unclear to me, how "remove formatting" is supposed to work

  • @nickvergessen I guess that only would be available work, when the same style-marker (e.g. ** in the screenshot) is to the left and right of the selection. But I agree that the removing thing looks very complicated.

    • @szaimen Indeed that looks complicated. So lets for now not offer this.

• @nickvergessen Syntax is Markdown, so it can be rendered by NcRichText. Nothing to discuss there really.

[nickvergessen]

Also when selecting text and hitting BackSpace or Delete, the text should vanish and not the special key being killed/ignored because of the Formatting option popup

[szaimen]

So maybe only show this if selecting text with the mouse? Not sure if we can seperate between these...

[marcoambrosini]

I think that the menu upon selecting the text would be useful (yes only on mouse and tap), but I would prefer to have a buttons bar with just the icons in line, just like in Nextcloud text's top-bar. I think it would be much less obtrusive.

[nickvergessen]

Ref screenshot from Text: