Implements file-upload via dropzone

[jacargentina]

Fixes #2071

Now integrates with octicons!

Depends on elementalui/elemental#146

[jacargentina]

I think the heading, and H1...H4 should look better, but i could'nt find a better option in the octicons 3.5.0 font

[mxstbr]

We sadly cannot upgrade Elemental to [email protected] because they removed icons in 3.2.0 and 3.4.0 which breaks some of our sites. That means we need to stay on 3.1.0 for now.

I copied your changes locally and tried to drag-n-drop an image onto the Markdown field but that didn't work – what did I understand wrong, I thought that was the functionality this PR adds?

I think the heading, and H1...H4 should look better, but i could'nt find a better option in the octicons 3.5.0 font

Why not just take H character from your keyboard like we do now?

[JedWatson]

Why not just take H character from your keyboard like we do now?

I agree, that's a clearer UI in my opinion

[jacargentina]

My idea was not doing something already "built-in", which is yet possible. But first how it works right now: in every markdown field, you can, on the options, pass the option with key dropZoneOptions which is directly used by boostrap-markddown. The docs are here: http://www.codingdrama.com/bootstrap-markdown/ under Usage look at the last option.

Here you can configure an endpoint which would receive the uploads, example from my own keystone website code:

Doc.add({
  title: {
    type: Types.Text,
    required: true
  },
  content: {
    type: Types.Markdown,
    markedOptions: {
      renderer: docRenderer,
      gfm: true
    },
    dropZoneOptions: {
      disablePreview: true,
      url: '/services/upload/doc/'
    },
    height: 600
  }, ...

The /services/upload/doc is the customized endpoint that i've implemented on the very same website to receive the upload, and return the url which references it, which is later embedded on the markdown text itself.

Also you have the option to upload to external hosting services.

Anyway, if a "just works" (tm) implementation is wanted, i can with some direction (@JedWatson i'm looking at you) to write that code. I'm thinking about having a fixed location where put those uploads, and a global option to enable that on all markdown fields?

[jacargentina]

In any case, if the elemental octicons 3.5.0 update is not accepted, do you want i replace the non existing on 3.1.0 icons with just text?

[mxstbr]

Ah I see, thanks for the clarification - let me try again when I'm up and awake.

Yes, please replace the non-existing icons with suitable alternatives and/or characters. Thanks!

[jacargentina]

A new PR on elemental: elementalui/elemental#147

@mxstbr I did use just text, as i dont see any alternative on octicons for bold, italic, and headings (or text-size)

Hope this is accepted (i choose not to make the changes on the boostrap-markdown editor, as somebody can use that project with current v3.5.0 just fine)

The current look is like this:

[mxstbr]

Why don't we just leave the menu bar icons as they are? It looks perfectly fine imo:

[jacargentina]

Yes, i know. But mi idea looking at the future, was at some point being able to use bootstrap-markdown as a dependency, and not a copy local to keystone as it is now, including the "customized buttons" its using right now.

So my take was to improve bootstrap-markdown in two ways: the dropzone integration, and lately, the octicons support.

If there is no intention on using upstream boostrap-markdown, u can leave the buttons like they are right now, they will work.

Anyway, the update is needed anyway for the dropzone thing.

Hope there is nothing else to discuss and let keystone go go go!!!

[mxstbr]

Lets stick with the old buttons for now, and take a look at using upstream bootstrap-markdown in another PR! Can you update this to use the old buttons and then we can finally land this 👍

Thank so much for taking the time to implement this!

[jacargentina]

I just looked how the icons are right now on master, and i really really think the new option is better: the current icons depend on a nasty hack on boostrap-markdown where gryph icons are changed to mce icons css styles. I know my solution is also a hacky one, but i think its not so "ugly"

Anyway now i'm looking into making them just look better, as much as possible as before my PR

[jacargentina]

This is my take for a better look.

[jacargentina]

@JedWatson @mxstbr Any chance to merge this ?

[jacargentina]

I'm closing as i'm now using my fork for my own keystone "with features" :)

[tmaclean-LV]

@jacargentina would you mind if I pick up on this PR where you left off? I'd really love to see this happen, and I have the time to spend on it.

[jacargentina]

@tmaclean-LV you' re welcome.