Add jump syntax (#4007)

* Add jump syntax

* Fix typo: spin -> jump

* Fix typo
This commit is contained in:
Aya Morisawa 2019-01-27 19:12:45 +09:00 committed by syuilo
parent 5fac7c1718
commit 62d41023e1
5 changed files with 50 additions and 0 deletions

View File

@ -31,3 +31,11 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes jump {
0% { transform: translateY(0); }
25% { transform: translateY(-16px); }
50% { transform: translateY(0); }
75% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}

View File

@ -135,6 +135,17 @@ export default Vue.component('misskey-flavored-markdown', {
}, genEl(token.children));
}
case 'jump': {
motionCount++;
const isLong = sumTextsLength(token.children) > 5 || countNodesF(token.children) > 3;
const isMany = motionCount > 3;
return (createElement as any)('span', {
attrs: {
style: (this.$store.state.settings.disableAnimatedMfm || isLong || isMany) ? 'display: inline-block;' : 'display: inline-block; animation: jump 0.75s linear infinite;'
},
}, genEl(token.children));
}
case 'flip': {
return (createElement as any)('span', {
attrs: {

View File

@ -61,6 +61,12 @@ export default (tokens: MfmForest, mentionedRemoteUsers: INote['mentionedRemoteU
return el;
},
jump(token) {
const el = doc.createElement('i');
appendChildren(token.children, el);
return el;
},
flip(token) {
const el = doc.createElement('span');
appendChildren(token.children, el);

View File

@ -92,6 +92,7 @@ const mfm = P.createLanguage({
r.big,
r.small,
r.spin,
r.jump,
r.bold,
r.strike,
r.italic,
@ -126,6 +127,7 @@ const mfm = P.createLanguage({
r.emoji,
r.mathInline,
r.spin,
r.jump,
r.text
).atLeast(1).tryParse(x), {})),
//#endregion
@ -154,6 +156,15 @@ const mfm = P.createLanguage({
).atLeast(1).tryParse(x), {})),
//#endregion
//#region Jump
jump: r =>
P.regexp(/<jump>(.+?)<\/jump>/, 1)
.map(x => createTree('jump', P.alt(
r.emoji,
r.text
).atLeast(1).tryParse(x), {})),
//#endregion
//#region Block code
blockCode: r =>
newline.then(
@ -189,6 +200,7 @@ const mfm = P.createLanguage({
r.big,
r.small,
r.spin,
r.jump,
r.bold,
r.strike,
r.italic,
@ -240,6 +252,7 @@ const mfm = P.createLanguage({
r.big,
r.small,
r.spin,
r.jump,
r.bold,
r.strike,
r.link,
@ -297,6 +310,7 @@ const mfm = P.createLanguage({
r.big,
r.small,
r.spin,
r.jump,
r.bold,
r.strike,
r.italic,
@ -347,6 +361,7 @@ const mfm = P.createLanguage({
r.bold,
r.small,
r.spin,
r.jump,
r.strike,
r.italic,
r.mention,
@ -410,6 +425,7 @@ const mfm = P.createLanguage({
r.big,
r.small,
r.spin,
r.jump,
r.bold,
r.strike,
r.italic,

View File

@ -262,6 +262,15 @@ describe('MFM', () => {
]);
});
it('jump', () => {
const tokens = analyze('<jump>:foo:</jump>');
assert.deepStrictEqual(tokens, [
tree('jump', [
leaf('emoji', { name: 'foo' })
], {}),
]);
});
describe('motion', () => {
it('by triple brackets', () => {
const tokens = analyze('(((foo)))');