feat: add prettier formatting

extensions/markdown/js/.prettierignore

@@ -0,0 +1,2 @@
+.yarn
+dist

extensions/markdown/js/package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "name": "@flarum/markdown",
+  "prettier": "@flarum/prettier-config",
   "dependencies": {
     "flarum-webpack-config": "^1.0.0",
     "webpack": "^4.46.0",
@@ -8,7 +9,13 @@
   },
   "scripts": {
     "dev": "webpack --mode development --watch",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "format": "prettier --write src",
+    "format-check": "prettier --check src"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@3.1.1",
+  "devDependencies": {
+    "@flarum/prettier-config": "^1.0.0",
+    "prettier": "^2.5.1"
+  }
 }

extensions/markdown/js/src/forum/components/MarkdownToolbar.js

@@ -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>;
   }
 }

extensions/markdown/js/src/forum/index.js

@@ -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
+    );
   });
 });

extensions/markdown/js/yarn.lock

@@ -1381,12 +1381,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@flarum/markdown@workspace:."
   dependencies:
+    "@flarum/prettier-config": ^1.0.0
     flarum-webpack-config: ^1.0.0
+    prettier: ^2.5.1
     webpack: ^4.46.0
     webpack-cli: ^4.9.1
   languageName: unknown
   linkType: soft
 
+"@flarum/prettier-config@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@flarum/prettier-config@npm:1.0.0"
+  checksum: 2035b97dcd02f2ebcb9f0f88111adbf176fbb31132c4e0a2a5387cec14619ef0f8ac3418c14a0730de1d14765b2bc7c53aa3eea6b28949da93ceb3c1c229195a
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.2
   resolution: "@gar/promisify@npm:1.1.2"
@@ -4753,6 +4762,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "prettier@npm:2.5.1"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 21b9408476ea1c544b0e45d51ceb94a84789ff92095abb710942d780c862d0daebdb29972d47f6b4d0f7ebbfb0ffbf56cc2cfa3e3e9d1cca54864af185b15b66
+  languageName: node
+  linkType: hard
+
 "process-nextick-args@npm:~2.0.0":
   version: 2.0.1
   resolution: "process-nextick-args@npm:2.0.1"