From 3e9141c633edbbaa8ed3176556741e960bc7fa7c Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Fri, 8 Jul 2022 22:51:10 +0300 Subject: [PATCH] Remove all style and use data-* attributes --- README.md | 2 +- lib/index.umd.js | 127 +++++---------------------------------------- package.json | 2 +- src/index.js | 92 ++++---------------------------- test/index.test.js | 16 +++--- 5 files changed, 32 insertions(+), 207 deletions(-) diff --git a/README.md b/README.md index 07ac937..407589c 100644 --- a/README.md +++ b/README.md @@ -11,5 +11,5 @@ const markedMfm = require('marked-mfm') marked.use(markedMfm) marked.parse('$[x2 beeg text]') -//

beeg text

+//

beeg text

``` diff --git a/lib/index.umd.js b/lib/index.umd.js index 7ea7019..4d2f59b 100644 --- a/lib/index.umd.js +++ b/lib/index.umd.js @@ -106,7 +106,7 @@ var rule = /*#__PURE__*/_wrapRegExp(/^\$\[([\w\d]+)(?:\.(\S+))? ([\S\s]+)\]/, { - markup: 1, + tag: 1, options: 2, text: 3 }); @@ -117,7 +117,7 @@ var token = { type: 'mfm', raw: match[0], - markup: match.groups.markup, + tag: match.groups.tag, options: match.groups.options, text: match.groups.text, tokens: [] @@ -127,124 +127,21 @@ } }, renderer: function renderer(token) { - var _this = this; + var MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'rotate', 'sparkle']; - var options = {}; + if (MFM_TAGS.includes(token.tag)) { + var options = []; - if (token.options) { - options = token.options.split(',').reduce(function (i, opt) { - i[opt.split('=')[0]] = opt.split('=')[1] || true; - return i; - }, {}); - } - - var el = function el(mfmClass, mfmStyle) { - if (mfmStyle === void 0) { - mfmStyle = ''; + if (token.options) { + options = token.options.split(',').map(function (opt) { + return opt.split('=').length === 2 ? "data-" + opt.split('=')[0] + "=\"" + opt.split('=')[1] + "\"" : "data-" + opt; + }); } - return "" + _this.parser.parseInline(token.tokens) + ""; - }; - - switch (token.markup) { - case 'blur': - { - return el('_mfm_blur_'); - } - - case 'bounce': - { - return el('_mfm_bounce_'); - } - - case 'flip': - { - var transform = options.x && options.v ? 'scale(-1, -1)' : options.v ? 'scaleY(-1)' : 'scaleX(-1)'; - return el('_mfm_flip_', " transform: " + transform + ";"); - } - - case 'font': - { - var 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': - { - var 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': - { - var degrees = options.deg || '90'; - return el('_mfm_rotate_', " transform: rotate(" + degrees + "deg); transform-origin: center center;"); - } - - case 'shake': - { - var _speed = options.speed || '0.5s'; - - return el('_mfm_shake_', " animation: mfm-shake " + _speed + " ease infinite;"); - } - - case 'spin': - { - var direction = options.left ? 'reverse' : options.alternate ? 'alternate' : 'normal'; - var anime = options.x ? 'mfm-spinX' : options.y ? 'mfm-spinY' : 'mfm-spin'; - - var _speed2 = options.speed || '1.5s'; - - return el('_mfm_spin_', " animation: " + anime + " " + _speed2 + " linear infinite; animation-direction: " + direction + ";"); - } - - case 'tada': - { - return el('_mfm_tada_'); - } - - case 'twitch': - { - var _speed3 = options.speed || '0.5s'; - - return el('_mfm_twitch_', " animation: mfm-twitch " + _speed3 + " 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) + "]"; - } + return "" + this.parser.parseInline(token.tokens) + ""; } + + return "$[" + token.tag + " " + this.parser.parseInline(token.tokens) + "]"; } }, { name: 'mfmSearch', diff --git a/package.json b/package.json index 1977e6f..52f8c37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "marked-mfm", - "version": "0.1.1", + "version": "0.2.0", "description": "Marked.js extension for Misskey-flavored Markdown", "main": "./src/index.js", "browser": "./lib/index.umd.js", diff --git a/src/index.js b/src/index.js index 3888c67..9ec23b3 100644 --- a/src/index.js +++ b/src/index.js @@ -20,13 +20,13 @@ export default { } // original regex, now definitely on the correct tag - const rule = /^\$\[(?[\w\d]+)(?:\.(?\S+))? (?[\S\s]+)\]/ + const rule = /^\$\[(?[\w\d]+)(?:\.(?\S+))? (?[\S\s]+)\]/ const match = rule.exec(src.slice(0, walk)) if (match) { const token = { type: 'mfm', raw: match[0], - markup: match.groups.markup, + tag: match.groups.tag, options: match.groups.options, text: match.groups.text, tokens: [], @@ -36,87 +36,15 @@ export default { } }, renderer (token) { - 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 = '') => `${this.parser.parseInline(token.tokens)}` - switch (token.markup) { - case 'blur': { - return el('_mfm_blur_') - } - 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('_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('_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)}]` - } + const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'rotate', 'sparkle'] + if (MFM_TAGS.includes(token.tag)) { + let options = [] + if (token.options) { + options = token.options.split(',').map((opt) => (opt.split('=').length === 2 ? `data-${opt.split('=')[0]}="${opt.split('=')[1]}"` : `data-${opt}`)) + } + return `${this.parser.parseInline(token.tokens)}` } + return `$[${token.tag} ${this.parser.parseInline(token.tokens)}]` }, }, { diff --git a/test/index.test.js b/test/index.test.js index 8189d7d..6a10bb3 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -4,42 +4,42 @@ import markedMfm from '../src/index.js' describe('marked-mfm', () => { test('inline', () => { marked.use(markedMfm) - expect(marked('$[x2 this text is bigger]')).toBe('

this text is bigger

\n') + expect(marked('$[x2 this text is bigger]')).toBe('

this text is bigger

\n') }) test('multiline', () => { marked.use(markedMfm) - expect(marked('$[x2 line1\nline2]')).toBe('

line1\nline2

\n') + expect(marked('$[x2 line1\nline2]')).toBe('

line1\nline2

\n') }) test('nested', () => { marked.use(markedMfm) - expect(marked('$[x2 x2 $[sparkle sparkle]]')).toBe('

x2 sparkle

\n') + expect(marked('$[x2 x2 $[sparkle sparkle]]')).toBe('

x2 sparkle

\n') }) test('lazy matching', () => { marked.use(markedMfm) - expect(marked('$[x2 one] $[x2 two]')).toBe('

one two

\n') + expect(marked('$[x2 one] $[x2 two]')).toBe('

one two

\n') }) test('nested & lazy matching', () => { marked.use(markedMfm) - expect(marked('$[x2 one $[x2 two]] $[x2 three]')).toBe('

one two three

\n') + expect(marked('$[x2 one $[x2 two]] $[x2 three]')).toBe('

one two three

\n') }) test('invalid', () => { marked.use(markedMfm) - expect(marked('$[invalid $[x2 test]]')).toBe('

$[invalid test]

\n') + expect(marked('$[invalid $[x2 test]]')).toBe('

$[invalid test]

\n') }) test('one option', () => { marked.use(markedMfm) - expect(marked('$[twitch.speed=2s test]')).toBe('

test

\n') + expect(marked('$[twitch.speed=2s test]')).toBe('

test

\n') }) test('multiple options', () => { marked.use(markedMfm) - expect(marked('$[spin.alternate,speed=0.5s test]')).toBe('

test

\n') + expect(marked('$[spin.alternate,speed=0.5s test]')).toBe('

test

\n') }) test('search', () => {