Add small syntax (#3506)

src/client/app/common/views/components/mfm.ts

@@ -123,6 +123,10 @@ export default Vue.component('misskey-flavored-markdown', {
 					}, genEl(token.children));
 				}
 
+				case 'small': {
+					return [createElement('small', genEl(token.children))];
+				}
+
 				case 'center': {
 					return [createElement('div', {
 						attrs: {

src/mfm/html.ts

@@ -31,6 +31,12 @@ export default (tokens: Node[], mentionedRemoteUsers: INote['mentionedRemoteUser
 			return el;
 		},
 
+		small(token) {
+			const el = doc.createElement('small');
+			dive(token.children).forEach(child => el.appendChild(child));
+			return el;
+		},
+
 		strike(token) {
 			const el = doc.createElement('del');
 			dive(token.children).forEach(child => el.appendChild(child));

src/mfm/parser.ts

@@ -67,6 +67,7 @@ const newline = P((input, i) => {
 const mfm = P.createLanguage({
 	root: r => P.alt(
 		r.big,
+		r.small,
 		r.bold,
 		r.strike,
 		r.italic,
@@ -102,6 +103,20 @@ const mfm = P.createLanguage({
 		).atLeast(1).tryParse(x))),
 	//#endregion
 
+	//#region Small
+	small: r =>
+		P.regexp(/<small>([\s\S]+?)<\/small>/, 1)
+		.map(x => makeNodeWithChildren('small', P.alt(
+			r.strike,
+			r.italic,
+			r.mention,
+			r.hashtag,
+			r.emoji,
+			r.math,
+			r.text
+		).atLeast(1).tryParse(x))),
+	//#endregion
+
 	//#region Block code
 	blockCode: r =>
 		newline.then(
@@ -134,6 +149,7 @@ const mfm = P.createLanguage({
 		P.regexp(/<center>([\s\S]+?)<\/center>/, 1)
 		.map(x => makeNodeWithChildren('center', P.alt(
 			r.big,
+			r.small,
 			r.bold,
 			r.strike,
 			r.italic,
@@ -211,6 +227,7 @@ const mfm = P.createLanguage({
 		.map((x: any) => {
 			return makeNodeWithChildren('link', P.alt(
 				r.big,
+				r.small,
 				r.bold,
 				r.strike,
 				r.italic,
@@ -253,6 +270,7 @@ const mfm = P.createLanguage({
 		P.alt(P.regexp(/\(\(\(([\s\S]+?)\)\)\)/, 1), P.regexp(/<motion>(.+?)<\/motion>/, 1))
 		.map(x => makeNodeWithChildren('motion', P.alt(
 			r.bold,
+			r.small,
 			r.strike,
 			r.italic,
 			r.mention,
@@ -312,6 +330,7 @@ const mfm = P.createLanguage({
 			const q = match[1].trim().substring(1, match[1].length - 1);
 			const contents = P.alt(
 				r.big,
+				r.small,
 				r.bold,
 				r.strike,
 				r.italic,

test/mfm.ts

@@ -70,6 +70,15 @@ describe('Text', () => {
 			], tokens);
 		});
 
+		it('small', () => {
+			const tokens = analyze('<small>smaller</small>');
+			assert.deepEqual([
+				nodeWithChildren('small', [
+					text('smaller')
+				]),
+			], tokens);
+		});
+
 		describe('motion', () => {
 			it('by triple brackets', () => {
 				const tokens = analyze('(((foo)))');