github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-01 05:52:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor driver support

Browse Source
This commit is contained in:
Alexander Skvortsov 2021-02-04 23:17:31 -05:00 committed by Alexander Skvortsov
parent 0ea9ef1c48
commit 3bdfbf9349
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/markdown/js/src/forum/components/MarkdownToolbar.js
View File

@ -6,9 +6,7 @@ export default class MarkdownToolbar extends Component {
oncreate(vnode) { oncreate(vnode) {
super.oncreate(vnode); super.oncreate(vnode);
const field = document.getElementById(this.attrs.for); this.attrs.setShortcutHandler(this.shortcut.bind(this));
field.addEventListener('keydown', this.shortcut.bind(this));
} }
view(vnode) { view(vnode) {

36
extensions/markdown/js/src/forum/index.js
View File

@ -7,26 +7,37 @@
* https://github.com/github/markdown-toolbar-element/blob/master/LICENSE * 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 TextEditor from 'flarum/components/TextEditor';
import BasicEditorDriver from 'flarum/utils/BasicEditorDriver';
import MarkdownArea from 'mdarea'; import MarkdownArea from 'mdarea';
import MarkdownToolbar from './components/MarkdownToolbar'; import MarkdownToolbar from './components/MarkdownToolbar';
import MarkdownButton from './components/MarkdownButton'; import MarkdownButton from './components/MarkdownButton';
app.initializers.add('flarum-markdown', function(app) { let shortcutHandler = () => { };
app.initializers.add('flarum-markdown', function (app) {
let index = 1; let index = 1;
extend(TextEditor.prototype, 'oninit', function() { extend(TextEditor.prototype, 'oninit', function () {
this.textareaId = 'textarea'+(index++); this.textareaId = 'textarea' + (index++);
}); });
extend(TextEditor.prototype, 'view', function(vdom) { extend(TextEditor.prototype, 'buildEditorParams', function (params) {
vdom.children[0].attrs.id = this.textareaId; params.textareaId = this.textareaId;
}); });
extend(TextEditor.prototype, 'oncreate', function() { extend(BasicEditorDriver.prototype, 'build', function (_, dom, params) {
this.editor = new MarkdownArea(this.$('textarea')[0], { 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: { keyMap: {
indent: ['Ctrl+m'], indent: ['Ctrl+m'],
outdent: ['Ctrl+M'], outdent: ['Ctrl+M'],
@ -35,15 +46,16 @@ app.initializers.add('flarum-markdown', function(app) {
}); });
}); });
extend(TextEditor.prototype, 'onremove', function () { override(BasicEditorDriver.prototype, 'destroy', function (original) {
this.editor.destroy(); 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`); const tooltip = name => app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`);
items.add('markdown', ( 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('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('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('italic')} icon="fas fa-italic" style={{ prefix: '_', suffix: '_', trimFirst: true }} hotkey="i" />