client: add MFM functions `position`, `scale`, `fg`, `bg`

Changelog: Added

packages/backend/package.json

@@ -67,7 +67,7 @@
 		"koa-send": "5.0.1",
 		"koa-slow": "2.1.0",
 		"koa-views": "7.0.2",
-		"mfm-js": "0.22.1",
+		"mfm-js": "0.23.3",
 		"mime-types": "2.1.35",
 		"mocha": "10.2.0",
 		"multer": "1.4.5-lts.1",

packages/backend/src/server/api/endpoints/i/update.ts

@@ -178,7 +178,7 @@ export default define(meta, paramDef, async (ps, _user, token) => {
 	const newDescription = profileUpdates.description === undefined ? profile.description : profileUpdates.description;
 
 	if (newName != null) {
-		const tokens = mfm.parsePlain(newName);
+		const tokens = mfm.parseSimple(newName);
 		emojis = emojis.concat(extractCustomEmojisFromMfm(tokens!));
 	}
 

packages/client/package.json

@@ -34,7 +34,7 @@
 		"json5": "2.2.1",
 		"katex": "0.16.0",
 		"matter-js": "0.18.0",
-		"mfm-js": "0.22.1",
+		"mfm-js": "0.23.3",
 		"photoswipe": "5.2.8",
 		"prismjs": "1.28.0",
 		"punycode": "2.1.1",

packages/client/src/components/mfm.ts

@@ -10,7 +10,6 @@ import MkSearch from '@/components/mfm-search.vue';
 import MkSparkle from '@/components/sparkle.vue';
 import MkA from '@/components/global/a.vue';
 import { host } from '@/config';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
 
 export default defineComponent({
 	props: {
@@ -42,7 +41,7 @@ export default defineComponent({
 	render() {
 		if (this.text == null || this.text === '') return;
 
-		const ast = (this.plain ? mfm.parsePlain : mfm.parse)(this.text, { fnNameList: MFM_TAGS });
+		const ast = (this.plain ? mfm.parseSimple : mfm.parse)(this.text);
 
 		const validTime = (t: string | true) => {
 			if (typeof t !== 'string') return null;
@@ -139,17 +138,17 @@ export default defineComponent({
 						}
 						case 'x2': {
 							return h('span', {
-								class: 'mfm-x2',
+								class: 'mfm-x2'
 							}, genEl(token.children));
 						}
 						case 'x3': {
 							return h('span', {
-								class: 'mfm-x3',
+								class: 'mfm-x3'
 							}, genEl(token.children));
 						}
 						case 'x4': {
 							return h('span', {
-								class: 'mfm-x4',
+								class: 'mfm-x4'
 							}, genEl(token.children));
 						}
 						case 'font': {
@@ -185,6 +184,30 @@ export default defineComponent({
 							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
 							break;
 						}
+						case 'position': {
+							const x = parseFloat(token.props.args.x ?? '0');
+							const y = parseFloat(token.props.args.y ?? '0');
+							style = `transform: translate(${x}em, ${y}em);`;
+							break;
+						}
+						case 'scale': {
+							const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
+							const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
+							style = `transform: scale(${x}, ${y});`;
+							break;
+						}
+						case 'fg': {
+							let color = token.props.args.color ?? 'f00';
+							if (!/^([0-9a-f]{3}){1,2}$/i.test(color)) color = 'f00';
+							style = `color: #${color};`;
+							break;
+						}
+						case 'bg': {
+							let color = token.props.args.color ?? '0f0';
+							if (!/^([0-9a-f]{3}){1,2}$/i.test(color)) color = '0f0';
+							style = `background-color: #${color};`;
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);

packages/client/src/scripts/mfm-tags.ts

@@ -1 +1 @@
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'position', 'scale', 'fg', 'bg'];

yarn.lock

@@ -3750,7 +3750,7 @@ __metadata:
     koa-send: 5.0.1
     koa-slow: 2.1.0
     koa-views: 7.0.2
-    mfm-js: 0.22.1
+    mfm-js: 0.23.3
     mime-types: 2.1.35
     mocha: 10.2.0
     multer: 1.4.5-lts.1
@@ -4720,7 +4720,7 @@ __metadata:
     json5: 2.2.1
     katex: 0.16.0
     matter-js: 0.18.0
-    mfm-js: 0.22.1
+    mfm-js: 0.23.3
     photoswipe: 5.2.8
     prismjs: 1.28.0
     punycode: 2.1.1
@@ -11671,12 +11671,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mfm-js@npm:0.22.1":
-  version: 0.22.1
-  resolution: "mfm-js@npm:0.22.1"
+"mfm-js@npm:0.23.3":
+  version: 0.23.3
+  resolution: "mfm-js@npm:0.23.3"
   dependencies:
-    twemoji-parser: 14.0.x
-  checksum: 6d9756c7bd8abf6462fb6403de4656f607a83839eb6b66a05b10eddcd201b5f78f5fe3d0df029936546143fd9cbf112e8369287aed32026e50bb03ce89b4c4f8
+    twemoji-parser: 14.0.0
+  checksum: 7079f80a53a9afc8599333f3256fb18a6bf7c01102a2f8f2be657843726a34835e2af34e26bc5b27e45b217fb2f120c0d3006e9fab2a972c845e9f7361e3cc1b
   languageName: node
   linkType: hard
 
@@ -16723,7 +16723,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"twemoji-parser@npm:14.0.0, twemoji-parser@npm:14.0.x":
+"twemoji-parser@npm:14.0.0":
   version: 14.0.0
   resolution: "twemoji-parser@npm:14.0.0"
   checksum: 8eede69cf71f94735de7b6fddf5dfbfe3cb2e01baefc3201360984ccc97cfc659f206c8f73bd1405a2282779af3b79a8c9bed3864c672e15e2dc6f8ce4810452