From 336f890781ab296cdc26788f4e6c20337e3cffeb Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Fri, 8 Jul 2022 12:59:28 +0300
Subject: [PATCH] Support MFM tag options

---
 src/index.js       | 38 +++++++++++++++++++++++++++++---------
 test/index.test.js | 16 +++++++++++++---
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/index.js b/src/index.js
index e7435e1..045a56c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,14 +5,15 @@ export default {
       level: 'inline',
       start(src) { return src.match(/\$\[/)?.index },
       tokenizer (src, tokens) {
-        const rule = /^\$\[([\w\d]+) (.+)\]$/
+        const rule = /^\$\[(?<markup>[\w\d]+)(?:\.(?<options>\S+))? (?<text>.+)\]$/
         const match = rule.exec(src)
         if (match) {
           const token = {
             type: 'mfm',
             raw: match[0],
-            markup: match[1],
-            text: match[2],
+            markup: match.groups.markup,
+            options: match.groups.options,
+            text: match.groups.text,
             tokens: []
           }
           this.lexer.inline(token.text, token.tokens)
@@ -20,20 +21,39 @@ export default {
         }
       },
       renderer (token) {
-        const el = tokenClass => `<span style="display: inline-block" class="${tokenClass}">${this.parser.parseInline(token.tokens)}</span>`
+        let options = {}
+        if (token.options) {
+          options = token.options.split(',').reduce((i, opt) => {
+            i[opt.split('=')[0]] = opt.split('=')[1] || true
+            return i
+          }, {})
+        }
+        const el = (mfmClass, mfmStyle = "") => `<span style="display: inline-block;${mfmStyle}" class="${mfmClass}">${this.parser.parseInline(token.tokens)}</span>`
         switch (token.markup) {
-        case 'x2':
+        case 'x2': {
           return el('x2')
           break
-        case 'twitch':
-          return el('twitch')
+        }
+        case 'twitch': {
+          const speed = options.speed || '0.5s'
+          return el('twitch', ` animation: mfm-twitch ${speed} ease infinite;`)
           break
-        case 'sparkle':
+        }
+        case 'sparkle': {
           return el('sparkle')
           break
-        default:
+        }
+        case 'spin': {
+          const direction = options.left ? 'reverse' : options.alternate ? 'alternate' : 'normal'
+          const anime = options.x ? 'mfm-spinX' : options.y ? 'mfm-spinY' : 'mfm-spin'
+          const speed = options.speed || '1.5s'
+          return el('spin', ` animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`)
+          break
+        }
+        default: {
           return `$[${token.markup} ${this.parser.parseInline(token.tokens)}]`
         }
+        }
       },
     },
   ]
diff --git a/test/index.test.js b/test/index.test.js
index dc972bb..356a4fb 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -4,16 +4,26 @@ import markedMfm from '../src/index.js'
 describe('marked-mfm', () => {
   test('inline', () => {
     marked.use(markedMfm)
-    expect(marked('$[x2 this text is bigger]')).toBe('<p><span style="display: inline-block" class="x2">this text is bigger</span></p>\n')
+    expect(marked('$[x2 this text is bigger]')).toBe('<p><span style="display: inline-block;" class="x2">this text is bigger</span></p>\n')
   })
 
   test('nested', () => {
     marked.use(markedMfm)
-    expect(marked('$[twitch twitch $[sparkle sparkle]]')).toBe('<p><span style="display: inline-block" class="twitch">twitch <span style="display: inline-block" class="sparkle">sparkle</span></span></p>\n')
+    expect(marked('$[x2 x2 $[sparkle sparkle]]')).toBe('<p><span style="display: inline-block;" class="x2">x2 <span style="display: inline-block;" class="sparkle">sparkle</span></span></p>\n')
   })
 
   test('invalid', () => {
     marked.use(markedMfm)
-    expect(marked('$[invalid $[x2 test]]')).toBe('<p>$[invalid <span style="display: inline-block" class="x2">test</span>]</p>\n')
+    expect(marked('$[invalid $[x2 test]]')).toBe('<p>$[invalid <span style="display: inline-block;" class="x2">test</span>]</p>\n')
+  })
+
+  test('one option', () => {
+    marked.use(markedMfm)
+    expect(marked('$[twitch.speed=2s test]')).toBe('<p><span style="display: inline-block; animation: mfm-twitch 2s ease infinite;" class="twitch">test</span></p>\n')
+  })
+
+  test('multiple options', () => {
+    marked.use(markedMfm)
+    expect(marked('$[spin.alternate,speed=0.5s test]')).toBe('<p><span style="display: inline-block; animation: mfm-spin 0.5s linear infinite; animation-direction: alternate;" class="spin">test</span></p>\n')
   })
 })