1
0
mirror of https://github.com/flarum/core.git synced 2025-08-08 01:16:52 +02:00

feat: add prettier formatting

This commit is contained in:
David Wheatley
2021-12-29 13:17:02 +01:00
parent 252cd8455b
commit 81b27ede28
8 changed files with 112 additions and 65 deletions

View File

@@ -2,8 +2,6 @@ import Component from 'flarum/common/Component';
export default class MarkdownToolbar extends Component {
view(vnode) {
return <div class="MarkdownToolbar">
{vnode.children}
</div>;
return <div class="MarkdownToolbar">{vnode.children}</div>;
}
}

View File

@@ -18,33 +18,33 @@ import MarkdownButton from './components/MarkdownButton';
const modifierKey = navigator.userAgent.match(/Macintosh/) ? '⌘' : 'ctrl';
const styles = {
'header': { prefix: '### ' },
'bold': { prefix: '**', suffix: '**', trimFirst: true },
'italic': { prefix: '_', suffix: '_', trimFirst: true },
'strikethrough': { 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 },
'spoiler': { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true }
}
header: { prefix: '### ' },
bold: { prefix: '**', suffix: '**', trimFirst: true },
italic: { prefix: '_', suffix: '_', trimFirst: true },
strikethrough: { 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 },
spoiler: { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true },
};
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]);
}
};
function makeShortcut(id, key) {
return function (e) {
if (e.key === key && (e.metaKey && modifierKey === '⌘' || e.ctrlKey && modifierKey === 'ctrl')) {
if (e.key === key && ((e.metaKey && modifierKey === '⌘') || (e.ctrlKey && modifierKey === 'ctrl'))) {
e.preventDefault();
applyStyle(id);
}
}
};
}
app.initializers.add('flarum-markdown', function (app) {
@@ -60,14 +60,15 @@ app.initializers.add('flarum-markdown', function (app) {
const makeApplyStyle = (id) => {
return () => applyStyle(id);
}
};
items.add('markdown', (
<MarkdownToolbar for={this.textareaId} setShortcutHandler={handler => shortcutHandler = handler}>
items.add(
'markdown',
<MarkdownToolbar for={this.textareaId} setShortcutHandler={(handler) => (shortcutHandler = handler)}>
<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('strikethrough')} icon="fas fa-strikethrough" onclick={makeApplyStyle('strikethrough')} />
<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('strikethrough')} icon="fas fa-strikethrough" onclick={makeApplyStyle('strikethrough')} />
<MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" onclick={makeApplyStyle('quote')} />
<MarkdownButton title={tooltip('spoiler')} icon="fas fa-exclamation-triangle" onclick={makeApplyStyle('spoiler')} />
<MarkdownButton title={tooltip('code')} icon="fas fa-code" onclick={makeApplyStyle('code')} />
@@ -75,7 +76,8 @@ app.initializers.add('flarum-markdown', function (app) {
<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);
</MarkdownToolbar>,
100
);
});
});