add border mfm

packages/client/src/components/mfm.ts

@@ -14,6 +14,7 @@ import MkA from "@/components/global/MkA.vue";
 import { host } from "@/config";
 import { reducedMotion } from "@/scripts/reduced-motion";
 import { defaultStore } from "@/store";
+import { safeParseFloat } from "@/scripts/safe-parse";
 
 export default defineComponent({
 	props: {
@@ -70,6 +71,11 @@ export default defineComponent({
 		// 		: null
 		// }
 
+		const validColor = (c: unknown): string | null => {
+			if (typeof c !== 'string') return null;
+			return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
+		};
+
 		const genEl = (ast: mfm.MfmNode[]) =>
 			concat(
 				ast.map((token, index): VNode[] => {
@@ -300,6 +306,20 @@ export default defineComponent({
 									style = `background-color: #${color};`;
 									break;
 								}
+								case 'border': {
+									let color = validColor(token.props.args.color);
+									color = color ? `#${color}` : 'var(--accent)';
+									let b_style = token.props.args.style;
+									if (
+										typeof b_style !== 'string' ||
+										!['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
+											.includes(b_style)
+									) b_style = 'solid';
+									const width = safeParseFloat(token.props.args.width) ?? 1;
+									const radius = safeParseFloat(token.props.args.radius) ?? 0;
+									style = `border: ${width}px ${b_style} ${color}; border-radius: ${radius}px;${token.props.args.noclip ? '' : ' overflow: clip;'}`;
+									break;
+								}
 								case "small": {
 									return h(
 										"small",

packages/client/src/scripts/safe-parse.ts

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function safeParseFloat(str: unknown): number | null {
+	if (typeof str !== 'string' || str === '') return null;
+	const num = parseFloat(str);
+	if (isNaN(num)) return null;
+	return num;
+}