Add markdown toolbar

[onukura]

Before submitting a pull-request to GitBucket I have first:

• read the contribution guidelines
• rebased my branch over master
• verified that project is compiling
• verified that tests are passing
• squashed my commits as appropriate (keep several commits if it is relevant to understand the PR)
• marked as closed using commit message all issue ID that this PR should correct

About this PR

This PR add markdown toolbar to resolve #1793
I didn't use any markdown editor such as simpleMDE because of integration with GitBucket dropzone and parsing for preview by renderer.

[SIkebe]

I think it needs some design discussion (e.g. where to insert new characters, where to focus after the event occurred ...), but overall it looks nice!

I didn't any markdown editor library because of integration with GitBucket dropzone and parsing for preview by renderer.

You wrote these new functions without transpile or polyfill, which other libraries usually do, so they do not work in some browsers (e.g. IE11, Firefox for Android). However I think you don't have to care about such cases as most users uses modern browsers on their PC and you can write markdown by hand in the same manner as before.
Even Microsoft will stop supporting IE on their web services 😄
https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

[onukura]

@SIkebe Thank you for your review! I fixed doc for js functions first as you suggested!

[onukura]

@SIkebe

I think it needs some design discussion (e.g. where to insert new characters, where to focus after the event occurred ...),

Actually I configured how those symbols such as ###, **** will be inserted in text and where to focus after event referring to GitHub. (but not completely...).
But still I agree with you opinion that we need discuss about design, like what button we want. where, in what order, etc.
I would appreciate If you guys would have any suggestion.

[onukura]

For reference, I will put gif of each button's behavior.

Heading ###

Bold **** and Italic __ and Code ``

Quote > and lists -, 1. and task list - []

Link [](url)

[SIkebe]

I configured how those symbols such as ###, **** will be inserted in text and where to focus after event referring to GitHub. (but not completely...).

I don't think it's necessary to copy all behaviors.
I just want to make sure, are these intended difference?

[SIkebe]

If it's an empty textarea, extra lines are inserted.

[onukura]

@SIkebe

I configured how those symbols such as ###, **** will be inserted in text and where to focus after event referring to GitHub. (but not completely...).

I don't think it's necessary to copy all behaviors.
I just want to make sure, are these intended difference?

This one is yes. I just didn't support range selector...

If it's an empty textarea, extra lines are inserted.

This one is yes too. I know it works like this. But maybe at least this one should be like GitHub...? This is not useful. I will change this at least.

[onukura]

Fixed behavior for list insert when textarea is empty.

[aadrian]

IMHO it looks very good.

Another possibility is that we declare this a "feature preview": we included it in the distribution, to get more feedback from the end-users, so we might improve it later if required.

[onukura]

@aadrian

Thank you for your feedback!

Another possibility is that we declare this a "feature preview": we included it in the distribution, to get more feedback from the end-users, so we might improve it later if required.

Is that mean we implement notification in html to tell users this is "feature preview" and ask feedback?

[aadrian]

@onukura

Another possibility is that we declare this a "feature preview": we included it in the distribution, to get more feedback from the end-users, so we might improve it later if required.

Is that mean we implement notification in html to tell users this is "feature preview" and ask feedback?

I don't think we that that much. Just in the Announcement Text like this https://gitbucket.github.io/gitbucket-news/gitbucket/2020/07/26/gitbucket-4.34.0.html (but for the next version), we make a special Section where we say instead of "New Feature xyz" - "Feature Preview xyz", and ask the users to try it and give us feedback so that we can change it in the final form.

[onukura]

@aadrian That’s sounds good to me!

[onukura]

Behavior updated. I guess now it's GitHub compatible.

[takezoe]

What do Dec stand for? Decorate?

[onukura]

Yes. Decorate. I fixed these unclear function names 933cf5a

[takezoe]

I tested this with Chrome on MacOS and some behaviors were weird.

• New lines are inserted after the current line when I decorate a word
• In some cases, new line is inserted even before the selected line or - is inserted to another line
• Undo doesn't work after modifying text using toolbar
• It would be nice if it could make a list from multiple lines

At least, inserting unnecessary new lines and inserting prefixes to wrong location must be fixed.

[onukura]

I will revise this PR as new PR because it got messy...