Add markdown toolbar buttons and textarea helper

extensions/markdown/extend.php

@@ -12,7 +12,12 @@
 use Flarum\Extend;
 use s9e\TextFormatter\Configurator;
 
-return (new Extend\Formatter)
+return [
-    ->configure(function (Configurator $config) {
+    (new Extend\Frontend('forum'))
-        $config->Litedown;
+        ->js(__DIR__.'/js/dist/forum.js'),
-    });
+
+    (new Extend\Formatter)
+        ->configure(function (Configurator $config) {
+            $config->Litedown;
+        })
+];

extensions/markdown/js/forum.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export * from './src/forum';

extensions/markdown/js/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@flarum/markdown",
+  "version": "0.0.0",
+  "dependencies": {
+    "@github/markdown-toolbar-element": "^0.1.1",
+    "flarum-webpack-config": "0.1.0-beta.9",
+    "mdarea": "0.0.10",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2"
+  },
+  "scripts": {
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch"
+  }
+}

extensions/markdown/js/src/forum/index.js

@@ -0,0 +1,51 @@
+import { extend } from 'flarum/extend';
+import TextEditor from 'flarum/components/TextEditor';
+import icon from 'flarum/helpers/icon';
+
+import '@github/markdown-toolbar-element';
+import MarkdownArea from 'mdarea/mdarea.js';
+
+app.initializers.add('flarum-markdown', function(app) {
+  let index = 1;
+
+  extend(TextEditor.prototype, 'init', function() {
+    this.textareaId = 'textarea'+(index++);
+  });
+
+  extend(TextEditor.prototype, 'view', function(vdom) {
+    vdom.children[0].attrs.id = this.textareaId;
+  });
+
+  extend(TextEditor.prototype, 'configTextarea', function(value, element, isInitialized, context) {
+    if (isInitialized) return;
+
+    const editor = new MarkdownArea(element);
+    editor.disableInline();
+
+    context.onunload = function() {
+      editor.destroy();
+    };
+  });
+
+  extend(TextEditor.prototype, 'toolbarItems', function(items) {
+    const attrs = {
+      className: 'Button Button--icon Button--link',
+      config: elm => $(elm).tooltip()
+    };
+
+    const tooltip = name => app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`);
+
+    items.add('markdown', (
+      <markdown-toolbar for={this.textareaId}>
+        <md-header title={tooltip('header')} {...attrs}>{icon('fas fa-heading')}</md-header>
+        <md-bold title={tooltip('bold')+' <cmd-b>'} {...attrs}>{icon('fas fa-bold')}</md-bold>
+        <md-italic title={tooltip('italic')+' <cmd-i>'} {...attrs}>{icon('fas fa-italic')}</md-italic>
+        <md-quote title={tooltip('quote')} {...attrs}>{icon('fas fa-quote-left')}</md-quote>
+        <md-code title={tooltip('code')} {...attrs}>{icon('fas fa-code')}</md-code>
+        <md-link title={tooltip('link')+' <cmd-k>'} {...attrs}>{icon('fas fa-link')}</md-link>
+        <md-unordered-list title={tooltip('unordered_list')} {...attrs}>{icon('fas fa-list-ul')}</md-unordered-list>
+        <md-ordered-list title={tooltip('ordered_list')} {...attrs}>{icon('fas fa-list-ol')}</md-ordered-list>
+      </markdown-toolbar>
+    ), 100);
+  });
+});

extensions/markdown/js/webpack.config.js

@@ -0,0 +1,3 @@
+const config = require('flarum-webpack-config');
+
+module.exports = config();