Add rotate DEG

mei23 · May 12, 2019 · 85719e7 · 85719e7
1 parent 428be0b
commit 85719e7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 0 deletions.
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
@@ -177,6 +177,17 @@ export default Vue.component('misskey-flavored-markdown', {
 					}, genEl(token.children));
 				}
 
+				case 'rotate': {
+					const isLong = sumTextsLength(token.children) > 100 || countNodesF(token.children) > 20;
+					const deg = token.node.props.attr;
+
+					return (createElement as any)('span', {
+						attrs: {
+							style: isLong ? '' : `display: inline-block; transform: rotate(${deg}deg);`
+						},
+					}, genEl(token.children));
+				}
+
 				case 'url': {
 					return [createElement(MkUrl, {
 						key: Math.random(),

diff --git a/src/mfm/language.ts b/src/mfm/language.ts
@@ -77,6 +77,7 @@ export const mfmLanguage = P.createLanguage({
 		r.jump,
 		r.flip,
 		r.vflip,
+		r.rotate,
 		r.inlineCode,
 		r.mathInline,
 		r.mention,
@@ -133,6 +134,20 @@ export const mfmLanguage = P.createLanguage({
 	jump: r => P.alt(P.regexp(/<jump>(.+?)<\/jump>/, 1), P.regexp(/\{\{\{([\s\S]+?)\}\}\}/, 1)).map(x => createTree('jump', r.inline.atLeast(1).tryParse(x), {})),
 	flip: r => P.regexp(/<flip>(.+?)<\/flip>/, 1).map(x => createTree('flip', r.inline.atLeast(1).tryParse(x), {})),
 	vflip: r => P.regexp(/<vflip>(.+?)<\/vflip>/, 1).map(x => createTree('vflip', r.inline.atLeast(1).tryParse(x), {})),
+	rotate: r => {
+		return P((input, i) => {
+			const text = input.substr(i);
+			const match = text.match(/^<rotate\s+([+-]?\d+)>(.+?)<\/rotate>/i);
+
+			if (match) {
+				return P.makeSuccess(i + match[0].length, {
+					content: match[2], attr: match[1]
+				});
+			} else {
+				return P.makeFailure(i, 'not a rotate');
+			}
+		}).map(x => createTree('rotate', r.inline.atLeast(1).tryParse(x.content), { attr: x.attr }));
+	},
 	center: r => r.startOfLine.then(P.regexp(/<center>([\s\S]+?)<\/center>/, 1).map(x => createTree('center', r.inline.atLeast(1).tryParse(x), {}))),
 	inlineCode: () => P.regexp(/`([^´\n]+?)`/, 1).map(x => createLeaf('inlineCode', { code: x })),
 	mathBlock: r => r.startOfLine.then(P.regexp(/\\\[([\s\S]+?)\\\]/, 1).map(x => createLeaf('mathBlock', { formula: x.trim() }))),

diff --git a/src/mfm/toHtml.ts b/src/mfm/toHtml.ts
@@ -78,6 +78,12 @@ export function toHtml(tokens: MfmForest, mentionedRemoteUsers: INote['mentioned
 			return el;
 		},
 
+		rotate(token) {
+			const el = doc.createElement('span');
+			appendChildren(token.children, el);
+			return el;
+		},
+
 		blockCode(token) {
 			const pre = doc.createElement('pre');
 			const inner = doc.createElement('code');

diff --git a/test/mfm.ts b/test/mfm.ts
@@ -263,6 +263,17 @@ describe('MFM', () => {
 			]);
 		});
 
+		it('rotate', () => {
+			const tokens = parse('<rotate 90>foo</rotate>');
+			assert.deepStrictEqual(tokens, [
+				tree('rotate', [
+					text('foo')
+				], {
+					attr: '90'
+				}),
+			]);
+		});
+
 		describe('spin', () => {
 			it('text', () => {
 				const tokens = parse('<spin>foo</spin>');