Add every MFM tag
apparently sparkle isn't a thing in mfm-js but i added it because it definitely does exist
This commit is contained in:
Sol Fisher Romanoff
parent
3e53ff92c0
commit
95b9912755
GPG Key ID:
9D3F2B64F2341B62
70
src/index.js
70
src/index.js
|
|
@ -30,21 +30,73 @@ export default {
|
|||
}
|
||||
const el = (mfmClass, mfmStyle = '') => `<span style="display: inline-block;${mfmStyle}" class="${mfmClass}">${this.parser.parseInline(token.tokens)}</span>`
|
||||
switch (token.markup) {
|
||||
case 'x2': {
|
||||
return el('x2')
|
||||
case 'blur': {
|
||||
return el('_mfm_blur_')
|
||||
}
|
||||
case 'twitch': {
|
||||
case 'bounce': {
|
||||
return el('_mfm_bounce_')
|
||||
}
|
||||
case 'flip': {
|
||||
const transform = (options.x && options.v) ? 'scale(-1, -1)' : options.v ? 'scaleY(-1)' : 'scaleX(-1)'
|
||||
return el('_mfm_flip_', ` transform: ${transform};`)
|
||||
}
|
||||
case 'font': {
|
||||
const family =
|
||||
options.serif
|
||||
? 'serif'
|
||||
: options.monospace
|
||||
? 'monospace'
|
||||
: options.cursive
|
||||
? 'cursive'
|
||||
: options.fantasy
|
||||
? 'fantasy'
|
||||
: options.emoji
|
||||
? 'emoji'
|
||||
: options.math ? 'math' : 'inherit'
|
||||
return el('_mfm_font_', ` font-family: ${family};`)
|
||||
}
|
||||
case 'jelly': {
|
||||
const speed = options.speed || '1s'
|
||||
return el('_mfm_jelly_', ` animation: mfm-rubberBand ${speed} linear infinite both;`)
|
||||
}
|
||||
case 'jump': {
|
||||
return el('_mfm_jump_')
|
||||
}
|
||||
case 'rainbow': {
|
||||
return el('_mfm_rainbow_')
|
||||
}
|
||||
case 'rotate': {
|
||||
const degrees = options.deg || '90'
|
||||
return el('_mfm_rotate_', ` transform: rotate(${degrees}deg); transform-origin: center center;`)
|
||||
}
|
||||
case 'shake': {
|
||||
const speed = options.speed || '0.5s'
|
||||
return el('twitch', ` animation: mfm-twitch ${speed} ease infinite;`)
|
||||
}
|
||||
case 'sparkle': {
|
||||
return el('sparkle')
|
||||
return el('_mfm_shake_', ` animation: mfm-shake ${speed} ease infinite;`)
|
||||
}
|
||||
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};`)
|
||||
return el('_mfm_spin_', ` animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`)
|
||||
}
|
||||
case 'tada': {
|
||||
return el('_mfm_tada_')
|
||||
}
|
||||
case 'twitch': {
|
||||
const speed = options.speed || '0.5s'
|
||||
return el('_mfm_twitch_', ` animation: mfm-twitch ${speed} ease infinite;`)
|
||||
}
|
||||
case 'sparkle': {
|
||||
return el('_mfm_sparkle_')
|
||||
}
|
||||
case 'x2': {
|
||||
return el('_mfm_x2_')
|
||||
}
|
||||
case 'x3': {
|
||||
return el('_mfm_x3_')
|
||||
}
|
||||
case 'x4': {
|
||||
return el('_mfm_x4_')
|
||||
}
|
||||
default: {
|
||||
return `$[${token.markup} ${this.parser.parseInline(token.tokens)}]`
|
||||
|
|
@ -71,7 +123,7 @@ export default {
|
|||
}
|
||||
},
|
||||
renderer (token) {
|
||||
return `<a href="https://google.com/search?q=${token.query}">${token.raw}</a>`
|
||||
return `<a href="https://google.com/search?q=${token.query}" class="_mfm_search_">${token.raw}</a>`
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -4,31 +4,31 @@ 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="_mfm_x2_">this text is bigger</span></p>\n')
|
||||
})
|
||||
|
||||
test('nested', () => {
|
||||
marked.use(markedMfm)
|
||||
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')
|
||||
expect(marked('$[x2 x2 $[sparkle sparkle]]')).toBe('<p><span style="display: inline-block;" class="_mfm_x2_">x2 <span style="display: inline-block;" class="_mfm_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="_mfm_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')
|
||||
expect(marked('$[twitch.speed=2s test]')).toBe('<p><span style="display: inline-block; animation: mfm-twitch 2s ease infinite;" class="_mfm_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')
|
||||
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="_mfm_spin_">test</span></p>\n')
|
||||
})
|
||||
|
||||
test('search', () => {
|
||||
marked.use(markedMfm)
|
||||
expect(marked('syuilo thighs search')).toBe('<a href="https://google.com/search?q=syuilo thighs">syuilo thighs search</a>')
|
||||
expect(marked('syuilo thighs search')).toBe('<a href="https://google.com/search?q=syuilo thighs" class="_mfm_search_">syuilo thighs search</a>')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue