github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Revert "feat: encapsulate markdown buttons in itemlist"

Browse Source 
This reverts commit d4aecfc9e3.
This commit is contained in:
David Wheatley 2021-10-25 19:58:28 +02:00
parent 11f5958dae
commit 1adb9ca553
1 changed files with 38 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@ import { extend } from 'flarum/extend';
import TextEditor from 'flarum/common/components/TextEditor';
import BasicEditorDriver from 'flarum/common/utils/BasicEditorDriver';
import styleSelectedText from 'flarum/common/utils/styleSelectedText';
import ItemList from 'flarum/common/utils/ItemList';
import MarkdownToolbar from './components/MarkdownToolbar';
import MarkdownButton from './components/MarkdownButton';
@ -19,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) {
@ -55,46 +54,28 @@ app.initializers.add('flarum-markdown', function (app) {
});
extend(TextEditor.prototype, 'toolbarItems', function (items) {
items.add(
'markdown',
<MarkdownToolbar for={this.textareaId} setShortcutHandler={(handler) => (shortcutHandler = handler)}>
{markdownToolbarItems().toArray()}
</MarkdownToolbar>,
100
);
const tooltip = (name, hotkey) => {
return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : '');
};
const makeApplyStyle = (id) => {
return () => applyStyle(id);
}
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('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')} />
<MarkdownButton title={tooltip('link')} icon="fas fa-link" onclick={makeApplyStyle('link')} />
<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);
});
});
export function markdownToolbarItems() {
const items = new ItemList();
const tooltip = (name, hotkey) => {
return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : '');
};
const makeApplyStyle = (id) => {
return () => applyStyle(id);
};
items.add('header', <MarkdownButton title={tooltip('header')} icon="fas fa-heading" onclick={makeApplyStyle('header')} />, 1000);
items.add('bold', <MarkdownButton title={tooltip('bold', 'b')} icon="fas fa-bold" onclick={makeApplyStyle('bold')} />, 900);
items.add('italic', <MarkdownButton title={tooltip('italic', 'i')} icon="fas fa-italic" onclick={makeApplyStyle('italic')} />, 800);
items.add(
'strikethrough',
<MarkdownButton title={tooltip('strikethrough')} icon="fas fa-strikethrough" onclick={makeApplyStyle('strikethrough')} />,
700
);
items.add('quote', <MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" onclick={makeApplyStyle('quote')} />, 600);
items.add('spoiler', <MarkdownButton title={tooltip('spoiler')} icon="fas fa-exclamation-triangle" onclick={makeApplyStyle('spoiler')} />, 500);
items.add('code', <MarkdownButton title={tooltip('code')} icon="fas fa-code" onclick={makeApplyStyle('code')} />, 400);
items.add('link', <MarkdownButton title={tooltip('link')} icon="fas fa-link" onclick={makeApplyStyle('link')} />, 300);
items.add('image', <MarkdownButton title={tooltip('image')} icon="fas fa-image" onclick={makeApplyStyle('image')} />, 200);
items.add(
'unordered_list',
<MarkdownButton title={tooltip('unordered_list')} icon="fas fa-list-ul" onclick={makeApplyStyle('unordered_list')} />,
100
);
items.add('ordered_list', <MarkdownButton title={tooltip('ordered_list')} icon="fas fa-list-ol" onclick={makeApplyStyle('ordered_list')} />, 0);
return items;
}