Editor Consolidation

extend.php

@@ -11,9 +11,6 @@
 use s9e\TextFormatter\Configurator;
 
 return [
-    (new Extend\Frontend('admin'))
-        ->js(__DIR__.'/js/dist/admin.js'),
-
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
         ->css(__DIR__.'/less/forum.less'),

js/src/forum/components/MarkdownButton.js

@@ -1,8 +1,5 @@
 import Component from 'flarum/Component';
 import icon from 'flarum/helpers/icon';
-import apply from '../util/apply';
-
-const modifierKey = navigator.userAgent.match(/Macintosh/) ? '⌘' : 'ctrl';
 
 export default class MarkdownButton extends Component {
   oncreate(vnode) {
@@ -13,8 +10,8 @@ export default class MarkdownButton extends Component {
 
   view() {
     return (
-      <button className="Button Button--icon Button--link" title={this.title()} data-hotkey={this.attrs.hotkey}
-        onclick={this.click.bind(this)} onkeydown={this.keydown.bind(this)}>
+      <button className="Button Button--icon Button--link" title={this.attrs.title} data-hotkey={this.attrs.hotkey}
+        onkeydown={this.keydown.bind(this)} onclick={this.attrs.onclick}>
         {icon(this.attrs.icon)}
       </button>
     );
@@ -23,19 +20,7 @@ export default class MarkdownButton extends Component {
   keydown(event) {
     if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
-      this.click();
+      this.element.click();
     }
   }
-
-  click() {
-    return apply(this.element, this.attrs.style);
-  }
-
-  title() {
-    let tooltip = this.attrs.title;
-
-    if (this.attrs.hotkey) tooltip += ` <${modifierKey}-${this.attrs.hotkey}>`;
-
-    return tooltip;
-  }
 }

js/src/forum/components/MarkdownToolbar.js

@@ -1,28 +1,9 @@
 import Component from 'flarum/Component';
 
-const modifierKey = navigator.userAgent.match(/Macintosh/) ? 'Meta' : 'Control';
-
 export default class MarkdownToolbar extends Component {
-  oncreate(vnode) {
-    super.oncreate(vnode);
-
-    this.attrs.setShortcutHandler(this.shortcut.bind(this));
-  }
-
   view(vnode) {
-    return <div id="MarkdownToolbar" data-for={this.attrs.for} style={{ display: 'inline-block' }}>
+    return <div class="MarkdownToolbar">
       {vnode.children}
     </div>;
   }
-
-  shortcut(event) {
-    if ((event.metaKey && modifierKey === 'Meta') || (event.ctrlKey && modifierKey === 'Control')) {
-      const button = this.element.querySelector(`[data-hotkey="${event.key}"]`);
-
-      if (button) {
-        button.click();
-        event.preventDefault()
-      }
-    }
-  }
 }

js/src/forum/index.js

@@ -7,45 +7,68 @@
  * https://github.com/github/markdown-toolbar-element/blob/master/LICENSE
  */
 
-import { extend, override } from 'flarum/extend';
+import { extend } from 'flarum/extend';
 import TextEditor from 'flarum/components/TextEditor';
+import BasicEditorDriver from 'flarum/common/utils/BasicEditorDriver';
+import styleSelectedText from 'flarum/common/utils/styleSelectedText';
 
 import MarkdownToolbar from './components/MarkdownToolbar';
 import MarkdownButton from './components/MarkdownButton';
-import MarkdownEditorDriver from './util/MarkdownEditorDriver';
 
-let shortcutHandler = () => { };
+const modifierKey = navigator.userAgent.match(/Macintosh/) ? '⌘' : 'ctrl';
 
-app.initializers.add('flarum-markdown', function (app) {
-  let index = 1;
+const styles = {
+  'header': { prefix: '### ' },
+  'bold': { prefix: '**', suffix: '**', trimFirst: true },
+  'italic': { prefix: '_', suffix: '_', trimFirst: true },
+  'quote': { prefix: '> ', multiline: true, surroundWithNewlines: true },
+  'code': { prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```' },
+  'link': { prefix: '[', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
+  'image': { prefix: '![', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
+  'unordered_list': { prefix: '- ', multiline: true, surroundWithNewlines: true },
+  'ordered_list': { prefix: '1. ', multiline: true, orderedList: true }
+}
 
-  extend(TextEditor.prototype, 'oninit', function () {
-    this.textareaId = 'textarea' + (index++);
-  });
+const applyStyle = (id) => {
+  // This is a nasty hack that breaks encapsulation of the editor.
+  // In future releases, we'll need to tweak the editor driver interface
+  // to support triggering events like this.
+  styleSelectedText(app.composer.editor.el, styles[id]);
+}
 
-  override(TextEditor.prototype, 'buildEditor', function (_, dom) {
-    return new MarkdownEditorDriver(dom, this.buildEditorParams());
-  });
+function makeShortcut(id, key) {
+  return function (e) {
+    if (e.key === key && (e.metaKey && modifierKey === '⌘' || e.ctrlKey && modifierKey === 'ctrl')) {
+      applyStyle(id);
+    }
+  }
+}
 
-  extend(TextEditor.prototype, 'buildEditorParams', function (params) {
-    params.textareaId = this.textareaId;
-    params.shortcutHandler = shortcutHandler;
+app.initializers.add('flarum-markdown', function (app) {
+  extend(BasicEditorDriver.prototype, 'keyHandlers', function (items) {
+    items.add('bold', makeShortcut('bold', 'b'));
+    items.add('italic', makeShortcut('italic', 'i'));
   });
 
   extend(TextEditor.prototype, 'toolbarItems', function (items) {
-    const tooltip = name => app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`);
+    const tooltip = (name, hotkey) => {
+      return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : '');
+    };
+
+    const makeApplyStyle = (id) => {
+      return () => applyStyle(id);
+    }
 
     items.add('markdown', (
       <MarkdownToolbar for={this.textareaId} setShortcutHandler={handler => shortcutHandler = handler}>
-        <MarkdownButton title={tooltip('header')} icon="fas fa-heading" style={{ prefix: '### ' }} />
-        <MarkdownButton title={tooltip('bold')} icon="fas fa-bold" style={{ prefix: '**', suffix: '**', trimFirst: true }} hotkey="b" />
-        <MarkdownButton title={tooltip('italic')} icon="fas fa-italic" style={{ prefix: '_', suffix: '_', trimFirst: true }} hotkey="i" />
-        <MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" style={{ prefix: '> ', multiline: true, surroundWithNewlines: true }} />
-        <MarkdownButton title={tooltip('code')} icon="fas fa-code" style={{ prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```' }} />
-        <MarkdownButton title={tooltip('link')} icon="fas fa-link" style={{ prefix: '[', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' }} />
-        <MarkdownButton title={tooltip('image')} icon="fas fa-image" style={{ prefix: '![', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' }} />
-        <MarkdownButton title={tooltip('unordered_list')} icon="fas fa-list-ul" style={{ prefix: '- ', multiline: true, surroundWithNewlines: true }} />
-        <MarkdownButton title={tooltip('ordered_list')} icon="fas fa-list-ol" style={{ prefix: '1. ', multiline: true, orderedList: true }} />
+        <MarkdownButton title={tooltip('header')} icon="fas fa-heading" onclick={makeApplyStyle('header')} />
+        <MarkdownButton title={tooltip('bold', 'b')} icon="fas fa-bold" onclick={makeApplyStyle('bold')}  />
+        <MarkdownButton title={tooltip('italic', 'i')} icon="fas fa-italic" onclick={makeApplyStyle('italic')}  />
+        <MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" onclick={makeApplyStyle('quote')} />
+        <MarkdownButton title={tooltip('code')} icon="fas fa-code" onclick={makeApplyStyle('code')} />
+        <MarkdownButton title={tooltip('image')} icon="fas fa-image" onclick={makeApplyStyle('image')} />
+        <MarkdownButton title={tooltip('unordered_list')} icon="fas fa-list-ul" onclick={makeApplyStyle('unordered_list')} />
+        <MarkdownButton title={tooltip('ordered_list')} icon="fas fa-list-ol" onclick={makeApplyStyle('ordered_list')} />
       </MarkdownToolbar>
     ), 100);
   });