Use custom JSX implementation of GitHub's markdown toolbar that works in IE

[dsevillamartin]

Fixes flarum/framework#1702.
Fixes flarum/framework#1671.
Fixes flarum/framework#1679.

• Created MarkdownToolbar and MarkdownButton elements
  • Replacement for custom HTML elements
• Brought the textarea logic from @github/markdown-toolbar-element into flarum/markdown
  • Wasn't sure how we would want the file structure, I separated the functions into 3 different files
  • Modified some code so that it works in IE, two functions needed pollyfill
    • String#startsWith, String#endsWith
• Buttons that support hotkeys now have the proper meta key in the tooltip
  • macOS: ⌘
  • other: ctrl

---

• Do we want to have the styles or button configurations stored somewhere else ?
• We'll probably need to somehow include the LICENSE as a bunch of code was copied and modified from there.

  • Perhaps in those comments that don't disappear when compiling. Something like this ?

    /*!
     * Includes modified code from GitHub Markdown Toolbar Element
     * https://github.com/github/markdown-toolbar-element/
     * 
     * Original Copyright GitHub, Inc.
     * Released under the MIT license
     * https://github.com/github/markdown-toolbar-element/blob/master/LICENSE
     *
     * Date: 2019-07-10T16:37Z
     */

[franzliedke]

Awesome, nice job!!!

Yes, we definitely need to mention GitHub's license as well. I'd say we definitely need to add the following line to our LICENSE file:

based on code Copyright (c) 2017-2018 GitHub, Inc.

I am unsure about the rules for bundled and minified JS code. Does that need to include license information as well? Especially if the code, like ours, is available open-source...

[franzliedke]

Where are these taken from? Any other licenses we need to mention?

[dsevillamartin]

These are taken from the MDN polyfils @ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#Polyfill & https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith#Polyfill.

However, it looks like they first is taken from https://github.com/mathiasbynens/String.prototype.startsWith, so perhaps we want to use the NPM packages instead to avoid licensing issues. Upon further look though, the code from it is way more complicated compared to these 8 lines

Looks like simply including /*! https://mths.be/startswith v0.2.0 by @mathias */ above it might be sufficient.

[dsevillamartin]

@franzliedke To include the license in the dist file, one uses /*! as compilers do not remove comments declared with /*!.

I'm not sure if what I wrote would suffice. We could most likely simplify it (and probably should, to reduce bundle size), following one of the examples found @ Open source licensing notices in Web Applications.

Most likely use the following format, though only with the ! once instead of 3 times (once for each file, as I separated the code to make it (hopefully) more readable).

/*!
 * Copyright OWNER NAME. Licensed under NAME LICENSE HERE
 * See license text at http://example.com/license
 */

so use something like

/*!
 * Original Copyright GitHub, Inc. Licensed under the MIT License.
 * See license text at https://github.com/github/markdown-toolbar-element/blob/master/LICENSE.
 */

Example with the String.prototype.startsWith polyfill:

[dsevillamartin]

We might want to consider bringing the base implementation into core. That way, other extensions can add buttons for things like BBCode without having flarum/markdown enabled.

Thoughts ?

[luceos]

@datitisev can we update/create an issue so that we keep track of that?

[franzliedke]

Why was this merged without a single copyright notice?

[dsevillamartin]

@franzliedke Oh, I thought I had taken care of it, and mentioned so in the meeting.

The following should be fine (add to all 3 files that use Github code, but only one should use /*!, the rest just /*)

/*!
 * Original Copyright GitHub, Inc. Licensed under the MIT License.
 * See license text at https://github.com/github/markdown-toolbar-element/blob/master/LICENSE.
 */

[franzliedke]

Yes, please add that in master.

[dsevillamartin]

I had to add it to index.js because, for some reason, webpack only keeps comments starting with /*! (or maybe any comment) from the root level... ? Any comment that I put in the js/src/forum/utils folder gets deleted... not sure why.

Also added the line to LICENSE.