fix: re-use of texteditor with markdown ext breaks markdown toolbar items (#34)

* fix: re-use of texteditor with markdown ext breaks markdown toolbar items

* code review
This commit is contained in:
David Wheatley 2021-12-29 21:41:19 +01:00 committed by GitHub
parent 05af2ddf39
commit ac83e9b667

View File

@ -7,7 +7,8 @@
* https://github.com/github/markdown-toolbar-element/blob/master/LICENSE
*/
import { extend } from 'flarum/extend';
import app from 'flarum/forum/app';
import { extend } from 'flarum/common/extend';
import TextEditor from 'flarum/common/components/TextEditor';
import BasicEditorDriver from 'flarum/common/utils/BasicEditorDriver';
import styleSelectedText from 'flarum/common/utils/styleSelectedText';
@ -31,26 +32,26 @@ const styles = {
spoiler: { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true },
};
const applyStyle = (id) => {
const applyStyle = (id, editorDriver) => {
// 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]);
styleSelectedText(editorDriver.el, styles[id]);
};
function makeShortcut(id, key) {
function makeShortcut(id, key, editorDriver) {
return function (e) {
if (e.key === key && ((e.metaKey && modifierKey === '⌘') || (e.ctrlKey && modifierKey === 'ctrl'))) {
e.preventDefault();
applyStyle(id);
applyStyle(id, editorDriver);
}
};
}
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'));
items.add('bold', makeShortcut('bold', 'b', this));
items.add('italic', makeShortcut('italic', 'i', this));
});
extend(TextEditor.prototype, 'toolbarItems', function (items) {
@ -59,7 +60,7 @@ app.initializers.add('flarum-markdown', function (app) {
};
const makeApplyStyle = (id) => {
return () => applyStyle(id);
return () => applyStyle(id, this.attrs.composer.editor);
};
items.add(