Editor driver support

flarum · Feb 27, 2021 · ba3e1fb · ba3e1fb
1 parent 5a1c0b2
commit ba3e1fb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/js/src/forum/components/MarkdownToolbar.js b/js/src/forum/components/MarkdownToolbar.js
@@ -6,9 +6,7 @@ export default class MarkdownToolbar extends Component {
   oncreate(vnode) {
     super.oncreate(vnode);
 
-    const field = document.getElementById(this.attrs.for);
-
-    field.addEventListener('keydown', this.shortcut.bind(this));
+    this.attrs.setShortcutHandler(this.shortcut.bind(this));
   }
 
   view(vnode) {

diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -7,26 +7,37 @@
  * https://github.com/github/markdown-toolbar-element/blob/master/LICENSE
  */
 
-import { extend } from 'flarum/extend';
+import { extend, override } from 'flarum/extend';
 import TextEditor from 'flarum/components/TextEditor';
+import BasicEditorDriver from 'flarum/utils/BasicEditorDriver';
 import MarkdownArea from 'mdarea';
 
 import MarkdownToolbar from './components/MarkdownToolbar';
 import MarkdownButton from './components/MarkdownButton';
 
-app.initializers.add('flarum-markdown', function(app) {
+let shortcutHandler = () => { };
+
+app.initializers.add('flarum-markdown', function (app) {
   let index = 1;
 
-  extend(TextEditor.prototype, 'oninit', function() {
-    this.textareaId = 'textarea'+(index++);
+  extend(TextEditor.prototype, 'oninit', function () {
+    this.textareaId = 'textarea' + (index++);
   });
 
-  extend(TextEditor.prototype, 'view', function(vdom) {
-    vdom.children[0].attrs.id = this.textareaId;
+  extend(TextEditor.prototype, 'buildEditorParams', function (params) {
+    params.textareaId = this.textareaId;
   });
 
-  extend(TextEditor.prototype, 'oncreate', function() {
-    this.editor = new MarkdownArea(this.$('textarea')[0], {
+  extend(BasicEditorDriver.prototype, 'build', function (_, dom, params) {
+    this.el.id = params.textareaId;
+
+    // We can't bind shortcutHandler directly in case `build`
+    // runs before MarkdownToolbar's `oninit`.
+    this.el.addEventListener('keydown', function (e) {
+      return shortcutHandler(...arguments);
+    });
+
+    this.mdarea = new MarkdownArea(this.el, {
       keyMap: {
         indent: ['Ctrl+m'],
         outdent: ['Ctrl+M'],
@@ -35,15 +46,16 @@ app.initializers.add('flarum-markdown', function(app) {
     });
   });
 
-  extend(TextEditor.prototype, 'onremove', function () {
-    this.editor.destroy();
+  override(BasicEditorDriver.prototype, 'destroy', function (original) {
+    this.mdarea.destroy();
+    original();
   });
 
-  extend(TextEditor.prototype, 'toolbarItems', function(items) {
+  extend(TextEditor.prototype, 'toolbarItems', function (items) {
     const tooltip = name => app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`);
 
     items.add('markdown', (
-      <MarkdownToolbar for={this.textareaId}>
+      <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" />