Remove all style and use data-* attributes
This commit is contained in:
parent
1dde5177ea
commit
3e9141c633
5 changed files with 32 additions and 207 deletions
|
@ -11,5 +11,5 @@ const markedMfm = require('marked-mfm')
|
|||
|
||||
marked.use(markedMfm)
|
||||
marked.parse('$[x2 beeg text]')
|
||||
// <p><span style="display: inline-block" class="_mfm_x2_">beeg text</span></p>
|
||||
// <p><span class="_mfm_x2_" >beeg text</span></p>
|
||||
```
|
||||
|
|
127
lib/index.umd.js
127
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 "<span style=\"display: inline-block;" + mfmStyle + "\" class=\"" + mfmClass + "\">" + _this.parser.parseInline(token.tokens) + "</span>";
|
||||
};
|
||||
|
||||
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 "<span class=\"_mfm_" + token.tag + "_\" " + options.join(' ') + ">" + this.parser.parseInline(token.tokens) + "</span>";
|
||||
}
|
||||
|
||||
return "$[" + token.tag + " " + this.parser.parseInline(token.tokens) + "]";
|
||||
}
|
||||
}, {
|
||||
name: 'mfmSearch',
|
||||
|
|
|
@ -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",
|
||||
|
|
92
src/index.js
92
src/index.js
|
@ -20,13 +20,13 @@ export default {
|
|||
}
|
||||
|
||||
// original regex, now definitely on the correct tag
|
||||
const rule = /^\$\[(?<markup>[\w\d]+)(?:\.(?<options>\S+))? (?<text>[\S\s]+)\]/
|
||||
const rule = /^\$\[(?<tag>[\w\d]+)(?:\.(?<options>\S+))? (?<text>[\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 = '') => `<span style="display: inline-block;${mfmStyle}" class="${mfmClass}">${this.parser.parseInline(token.tokens)}</span>`
|
||||
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 `<span class="_mfm_${token.tag}_" ${options.join(' ')}>${this.parser.parseInline(token.tokens)}</span>`
|
||||
}
|
||||
return `$[${token.tag} ${this.parser.parseInline(token.tokens)}]`
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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('<p><span style="display: inline-block;" class="_mfm_x2_">this text is bigger</span></p>\n')
|
||||
expect(marked('$[x2 this text is bigger]')).toBe('<p><span class="_mfm_x2_" >this text is bigger</span></p>\n')
|
||||
})
|
||||
|
||||
test('multiline', () => {
|
||||
marked.use(markedMfm)
|
||||
expect(marked('$[x2 line1\nline2]')).toBe('<p><span style="display: inline-block;" class="_mfm_x2_">line1\nline2</span></p>\n')
|
||||
expect(marked('$[x2 line1\nline2]')).toBe('<p><span class="_mfm_x2_" >line1\nline2</span></p>\n')
|
||||
})
|
||||
|
||||
test('nested', () => {
|
||||
marked.use(markedMfm)
|
||||
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')
|
||||
expect(marked('$[x2 x2 $[sparkle sparkle]]')).toBe('<p><span class="_mfm_x2_" >x2 <span class="_mfm_sparkle_" >sparkle</span></span></p>\n')
|
||||
})
|
||||
|
||||
test('lazy matching', () => {
|
||||
marked.use(markedMfm)
|
||||
expect(marked('$[x2 one] $[x2 two]')).toBe('<p><span style="display: inline-block;" class="_mfm_x2_">one</span> <span style="display: inline-block;" class="_mfm_x2_">two</span></p>\n')
|
||||
expect(marked('$[x2 one] $[x2 two]')).toBe('<p><span class="_mfm_x2_" >one</span> <span class="_mfm_x2_" >two</span></p>\n')
|
||||
})
|
||||
|
||||
test('nested & lazy matching', () => {
|
||||
marked.use(markedMfm)
|
||||
expect(marked('$[x2 one $[x2 two]] $[x2 three]')).toBe('<p><span style="display: inline-block;" class="_mfm_x2_">one <span style="display: inline-block;" class="_mfm_x2_">two</span></span> <span style="display: inline-block;" class="_mfm_x2_">three</span></p>\n')
|
||||
expect(marked('$[x2 one $[x2 two]] $[x2 three]')).toBe('<p><span class="_mfm_x2_" >one <span class="_mfm_x2_" >two</span></span> <span class="_mfm_x2_" >three</span></p>\n')
|
||||
})
|
||||
|
||||
test('invalid', () => {
|
||||
marked.use(markedMfm)
|
||||
expect(marked('$[invalid $[x2 test]]')).toBe('<p>$[invalid <span style="display: inline-block;" class="_mfm_x2_">test</span>]</p>\n')
|
||||
expect(marked('$[invalid $[x2 test]]')).toBe('<p>$[invalid <span 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="_mfm_twitch_">test</span></p>\n')
|
||||
expect(marked('$[twitch.speed=2s test]')).toBe('<p><span class="_mfm_twitch_" data-speed="2s">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="_mfm_spin_">test</span></p>\n')
|
||||
expect(marked('$[spin.alternate,speed=0.5s test]')).toBe('<p><span class="_mfm_spin_" data-alternate data-speed="0.5s">test</span></p>\n')
|
||||
})
|
||||
|
||||
test('search', () => {
|
||||
|
|
Loading…
Reference in a new issue