#299 add toolbar for markdown formatting

[Mavrin]

Solution for #299
It work the same way as it works on github.
Underhood we use package from github team.

How it looks:

[Mavrin]

Could anyone review it? @Guria, @umputun, @igoradamenko

[Reeywhaar]

Why silence here? Good job. Though I don't like that you store icons as react components. Better store them as plain svg and take advantage of https://www.npmjs.com/package/svg-inline-react

[Mavrin]

@Reeywhaar I see only one advantage, that you can open icon in some image viewer.
if I use real react component, I can change icon by props. e. g. size, className, fill.
And I don't need add dependencies.
I think for current case svg-inline-react is over-engineering

[Reeywhaar]

Yep, this way it can be not only opened in viewer, but edited in redactor, given to designer, reused in some other place, etc.

size, classname, and fill (via css) all can be set on top element. I understand that sometimes loading this way can be handy if svg is highly dynamic. But this is not the case, it just icon.

I think better to load images as require(!raw-loader!some-image.svg) and make tiny functional component

function SVG(props) {
return <span className={"icon "+props.className} dangerouslysetinnerhtml={{_html: props.svgstringorsomething }}></span>
}

or something. I agree that svg-inline-react can be overload, but there lot of alternatives, for example https://www.npmjs.com/package/react-svg-loader which is bundle time thing.

[Mavrin]

How is often this project change icons? For me, It is not problem covert 8 raw icons to svg manually.
react-svg-loader looks better. But It need add one more loader.

[umputun]

with an extra toolbar the edit field looks too small. I'd suggest to make it 1 or even 2 lines higher

[Mavrin]

4 lilines looks enough:

5 lines:

[umputun]

4 lilines looks enough

agree

[Mavrin]

Could you merge this request?

[umputun]

I have merged, and it is live on https://remark42.com/demo/

However, it looks kind of strange to me. This new toolbar makes the edit section visually unbalanced. Before the spaces on right, left and on the top were the same and it looked nice, but now it is not that nice anymore.

I'm not sure how to fix it, open for suggestions/ideas.

[Reeywhaar]

Not going far with design, but how about this? Considering mobile, and all things.

[umputun]

an interesting idea, but formatting toolbar on the bottom is unusual. Maybe the same but on top?

[Reeywhaar]

Same on top

Unusual, but I think it's convenient as with long message you will have to drag cursor more to top than to bottom.

[umputun]

still odd. I may have a better idea - how about removing the additional toolbar completeley and move it to the bottom instead of the current text, i.e.

Subscription action can go to some new "subscribe" button (with a dropdown) and the same for MD help.

[Reeywhaar]

Unfortunately, on mobile it looks ugly then, conflicts with buttons on the left.

[umputun]

maybe just collapse them all to a single button on mobile?

[umputun]

another possibility is to hide this part on mobile, like github does

[Reeywhaar]

Well, let's hide it then, I think burger button is too clumsy to use, and too close to "send button". But still I'm unsure about removing guide text, it contains useful info

[Reeywhaar]

Well, I tried, and it seems there is too many "if". I think buttons look like they unrelated to text area.

bad

bad

fine

passes

[Reeywhaar]

Hmm, I guess swapping is better.