mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-14 13:26:23 +02:00
Code Issues Releases Wiki Activity

Use custom JSX implementation of GitHub's markdown toolbar that works in IE 11

Browse Source
This commit is contained in:
David Sevilla Martín
2019-07-10 12:30:35 -04:00
parent a1c00ee5de
commit 50a4530cfc
9 changed files with 469 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,12 @@
import { extend } from 'flarum/extend';
import TextEditor from 'flarum/components/TextEditor';
import icon from 'flarum/helpers/icon';
import MarkdownArea from 'mdarea';
let MarkdownArea;
if (window.Reflect) {
require('@webcomponents/custom-elements');
require('@github/markdown-toolbar-element');
MarkdownArea = require('mdarea/mdarea.js');
}
import './pollyfills';
import MarkdownToolbar from './components/MarkdownToolbar';
import MarkdownButton from './components/MarkdownButton';
app.initializers.add('flarum-markdown', function(app) {
if (!MarkdownArea) return;
let index = 1;
@ -28,6 +23,7 @@ app.initializers.add('flarum-markdown', function(app) {
const editor = new MarkdownArea(element);
editor.disableInline();
editor.ignoreTab();
context.onunload = function() {
editor.destroy();
@ -35,24 +31,19 @@ app.initializers.add('flarum-markdown', function(app) {
});
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>
<MarkdownToolbar for={this.textareaId}>
<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: '](url)', replaceNext: 'url', 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 }} />
</MarkdownToolbar>
), 100);
});
});