From cd28504dd8e4623ed864de2ad76e88e1022b08b1 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 5 Aug 2018 12:33:51 +0900 Subject: [PATCH] Add new MFM syntax --- .../components/misskey-flavored-markdown.ts | 11 ++++++++++ src/mfm/html.ts | 6 ++++++ src/mfm/parse/elements/motion.ts | 20 +++++++++++++++++++ src/mfm/parse/index.ts | 7 +++++-- test/mfm.ts | 8 ++++++++ 5 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 src/mfm/parse/elements/motion.ts diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts index f9c97bd35..683b4e806 100644 --- a/src/client/app/common/views/components/misskey-flavored-markdown.ts +++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts @@ -69,6 +69,17 @@ export default Vue.component('misskey-flavored-markdown', { }] }, token.big); + case 'motion': + return (createElement as any)('span', { + attrs: { + style: 'display: inline-block;' + }, + directives: [this.$store.state.settings.disableAnimatedMfm ? {} : { + name: 'animate-css', + value: { classes: 'rubberBand', iteration: 'infinite' } + }] + }, token.motion); + case 'url': return createElement(MkUrl, { props: { diff --git a/src/mfm/html.ts b/src/mfm/html.ts index dfe291b3a..c11bd55cf 100644 --- a/src/mfm/html.ts +++ b/src/mfm/html.ts @@ -18,6 +18,12 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers: document.body.appendChild(b); }, + motion({ document }, { big }) { + const b = document.createElement('strong'); + b.textContent = big; + document.body.appendChild(b); + }, + code({ document }, { code }) { const pre = document.createElement('pre'); const inner = document.createElement('code'); diff --git a/src/mfm/parse/elements/motion.ts b/src/mfm/parse/elements/motion.ts new file mode 100644 index 000000000..555a98975 --- /dev/null +++ b/src/mfm/parse/elements/motion.ts @@ -0,0 +1,20 @@ +/** + * Motion + */ + +export type TextElementMotion = { + type: 'motion' + content: string + motion: string +}; + +export default function(text: string) { + const match = text.match(/^\(\(\((.+?)\)\)\)/); + if (!match) return null; + const motion = match[0]; + return { + type: 'motion', + content: motion, + motion: match[1] + } as TextElementMotion; +} diff --git a/src/mfm/parse/index.ts b/src/mfm/parse/index.ts index 066c06255..99c00ae64 100644 --- a/src/mfm/parse/index.ts +++ b/src/mfm/parse/index.ts @@ -14,6 +14,7 @@ import { TextElementQuote } from './elements/quote'; import { TextElementSearch } from './elements/search'; import { TextElementTitle } from './elements/title'; import { TextElementUrl } from './elements/url'; +import { TextElementMotion } from './elements/motion'; const elements = [ require('./elements/big'), @@ -27,7 +28,8 @@ const elements = [ require('./elements/inline-code'), require('./elements/quote'), require('./elements/emoji'), - require('./elements/search') + require('./elements/search'), + require('./elements/motion') ].map(element => element.default as TextElementProcessor); export type TextElement = { type: 'text', content: string } @@ -42,7 +44,8 @@ export type TextElement = { type: 'text', content: string } | TextElementQuote | TextElementSearch | TextElementTitle - | TextElementUrl; + | TextElementUrl + | TextElementMotion; export type TextElementProcessor = (text: string, i: number) => TextElement | TextElement[]; export default (source: string): TextElement[] => { diff --git a/test/mfm.ts b/test/mfm.ts index 1a22e1491..fcd5f3f07 100644 --- a/test/mfm.ts +++ b/test/mfm.ts @@ -39,6 +39,14 @@ describe('Text', () => { ], tokens); }); + it('motion', () => { + const tokens = analyze('(((Strawberry))) Pasta'); + assert.deepEqual([ + { type: 'motion', content: '***Strawberry***', motion: 'Strawberry' }, + { type: 'text', content: ' Pasta' } + ], tokens); + }); + it('mention', () => { const tokens = analyze('@himawari お腹ペコい'); assert.deepEqual([