diff --git a/extensions/markdown/extend.php b/extensions/markdown/extend.php index 3828e0aaa..07a0a33a6 100644 --- a/extensions/markdown/extend.php +++ b/extensions/markdown/extend.php @@ -13,7 +13,11 @@ use s9e\TextFormatter\Configurator; return [ (new Extend\Frontend('forum')) ->js(__DIR__.'/js/dist/forum.js') - ->css(__DIR__.'/less/forum.less'), + ->css(__DIR__.'/less/common.less'), + + (new Extend\Frontend('admin')) + ->js(__DIR__.'/js/dist/admin.js') + ->css(__DIR__.'/less/common.less'), (new Extend\Formatter) ->configure(function (Configurator $config) { diff --git a/extensions/markdown/js/admin.js b/extensions/markdown/js/admin.js new file mode 100644 index 000000000..3e69ff3b9 --- /dev/null +++ b/extensions/markdown/js/admin.js @@ -0,0 +1 @@ +export * from './src/admin'; diff --git a/extensions/markdown/js/src/admin/index.js b/extensions/markdown/js/src/admin/index.js new file mode 100644 index 000000000..e655c3e4c --- /dev/null +++ b/extensions/markdown/js/src/admin/index.js @@ -0,0 +1,4 @@ +import app from 'flarum/admin/app'; +import { initialize } from '../common/index'; + +app.initializers.add('flarum-markdown', initialize); diff --git a/extensions/markdown/js/src/forum/components/MarkdownButton.js b/extensions/markdown/js/src/common/components/MarkdownButton.js similarity index 100% rename from extensions/markdown/js/src/forum/components/MarkdownButton.js rename to extensions/markdown/js/src/common/components/MarkdownButton.js diff --git a/extensions/markdown/js/src/forum/components/MarkdownToolbar.js b/extensions/markdown/js/src/common/components/MarkdownToolbar.js similarity index 100% rename from extensions/markdown/js/src/forum/components/MarkdownToolbar.js rename to extensions/markdown/js/src/common/components/MarkdownToolbar.js diff --git a/extensions/markdown/js/src/common/index.js b/extensions/markdown/js/src/common/index.js new file mode 100644 index 000000000..6e3bbdf13 --- /dev/null +++ b/extensions/markdown/js/src/common/index.js @@ -0,0 +1,107 @@ +/*! + * Includes modified code from GitHub Markdown Toolbar Element + * https://github.com/github/markdown-toolbar-element/ + * + * Original Copyright GitHub, Inc. + * Released under the MIT license + * https://github.com/github/markdown-toolbar-element/blob/master/LICENSE + */ + +import app from 'flarum/common/app'; +import { extend, override } 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'; + +import MarkdownToolbar from './components/MarkdownToolbar'; +import MarkdownButton from './components/MarkdownButton'; +import ItemList from 'flarum/common/utils/ItemList'; + +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 }, +}; + +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(editorDriver.el, styles[id]); +}; + +function makeShortcut(id, key, editorDriver) { + return function (e) { + if (e.key === key && ((e.metaKey && modifierKey === '⌘') || (e.ctrlKey && modifierKey === 'ctrl'))) { + e.preventDefault(); + applyStyle(id, editorDriver); + } + }; +} + +function markdownToolbarItems(oldFunc) { + const items = typeof oldFunc === 'function' ? oldFunc() : new ItemList(); + + function tooltip(name, hotkey) { + return app.translator.trans(`flarum-markdown.lib.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : ''); + } + + const makeApplyStyle = (id) => { + return () => applyStyle(id, this.attrs.composer.editor); + }; + + items.add('header', , 1000); + items.add('bold', , 900); + items.add('italic', , 800); + items.add( + 'strikethrough', + , + 700 + ); + items.add('quote', , 600); + items.add('spoiler', , 500); + items.add('code', , 400); + items.add('link', , 300); + items.add('image', , 200); + items.add( + 'unordered_list', + , + 100 + ); + items.add('ordered_list', , 0); + + return items; +} + +export function initialize(app) { + extend(BasicEditorDriver.prototype, 'keyHandlers', function (items) { + items.add('bold', makeShortcut('bold', 'b', this)); + items.add('italic', makeShortcut('italic', 'i', this)); + }); + + if (TextEditor.prototype.markdownToolbarItems) { + override(TextEditor.prototype, 'markdownToolbarItems', markdownToolbarItems); + } else { + TextEditor.prototype.markdownToolbarItems = markdownToolbarItems; + } + + extend(TextEditor.prototype, 'toolbarItems', function (items) { + items.add( + 'markdown', + (shortcutHandler = handler)}> + {this.markdownToolbarItems().toArray()} + , + 100 + ); + }); +} diff --git a/extensions/markdown/js/src/forum/index.js b/extensions/markdown/js/src/forum/index.js index 1cb9a8f46..b38d9916e 100644 --- a/extensions/markdown/js/src/forum/index.js +++ b/extensions/markdown/js/src/forum/index.js @@ -1,107 +1,4 @@ -/*! - * Includes modified code from GitHub Markdown Toolbar Element - * https://github.com/github/markdown-toolbar-element/ - * - * Original Copyright GitHub, Inc. - * Released under the MIT license - * https://github.com/github/markdown-toolbar-element/blob/master/LICENSE - */ - import app from 'flarum/forum/app'; -import { extend, override } 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'; +import { initialize } from '../common/index'; -import MarkdownToolbar from './components/MarkdownToolbar'; -import MarkdownButton from './components/MarkdownButton'; -import ItemList from 'flarum/common/utils/ItemList'; - -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 }, -}; - -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(editorDriver.el, styles[id]); -}; - -function makeShortcut(id, key, editorDriver) { - return function (e) { - if (e.key === key && ((e.metaKey && modifierKey === '⌘') || (e.ctrlKey && modifierKey === 'ctrl'))) { - e.preventDefault(); - applyStyle(id, editorDriver); - } - }; -} - -function markdownToolbarItems(oldFunc) { - const items = typeof oldFunc === 'function' ? oldFunc() : new ItemList(); - - function tooltip(name, hotkey) { - return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : ''); - } - - const makeApplyStyle = (id) => { - return () => applyStyle(id, this.attrs.composer.editor); - }; - - items.add('header', , 1000); - items.add('bold', , 900); - items.add('italic', , 800); - items.add( - 'strikethrough', - , - 700 - ); - items.add('quote', , 600); - items.add('spoiler', , 500); - items.add('code', , 400); - items.add('link', , 300); - items.add('image', , 200); - items.add( - 'unordered_list', - , - 100 - ); - items.add('ordered_list', , 0); - - return items; -} - -app.initializers.add('flarum-markdown', function (app) { - extend(BasicEditorDriver.prototype, 'keyHandlers', function (items) { - items.add('bold', makeShortcut('bold', 'b', this)); - items.add('italic', makeShortcut('italic', 'i', this)); - }); - - if (TextEditor.prototype.markdownToolbarItems) { - override(TextEditor.prototype, 'markdownToolbarItems', markdownToolbarItems); - } else { - TextEditor.prototype.markdownToolbarItems = markdownToolbarItems; - } - - extend(TextEditor.prototype, 'toolbarItems', function (items) { - items.add( - 'markdown', - (shortcutHandler = handler)}> - {this.markdownToolbarItems().toArray()} - , - 100 - ); - }); -}); +app.initializers.add('flarum-markdown', initialize); diff --git a/extensions/markdown/less/forum.less b/extensions/markdown/less/common.less similarity index 100% rename from extensions/markdown/less/forum.less rename to extensions/markdown/less/common.less diff --git a/extensions/markdown/locale/en.yml b/extensions/markdown/locale/en.yml index 1f1d37303..30f6783e6 100644 --- a/extensions/markdown/locale/en.yml +++ b/extensions/markdown/locale/en.yml @@ -1,5 +1,5 @@ flarum-markdown: - forum: + lib: composer: bold_tooltip: Add bold text code_tooltip: Insert code