nbsp
/
marked-mfm
2
1
Fork 1
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Remove all style and use data-* attributes
ci/woodpecker/tag/woodpecker Pipeline was successful Details
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
Sol Fisher Romanoff 2022-07-08 22:51:10 +03:00
parent 1dde5177ea
commit 3e9141c633
Signed by: nbsp
GPG Key ID: 9D3F2B64F2341B62
5 changed files with 32 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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
View File

@ -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',

2
package.json
View File

@ -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
View File

@ -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)}]`
},
},
{

16
test/index.test.js
View File

@ -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', () => {