client: add Markdown component

packages/client/package.json

@@ -33,12 +33,14 @@
 		"insert-text-at-cursor": "0.3.0",
 		"json5": "2.2.1",
 		"katex": "0.16.0",
+		"marked": "4.0.8",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.3",
 		"photoswipe": "5.2.8",
 		"prismjs": "1.28.0",
 		"punycode": "2.1.1",
 		"sass": "1.53.0",
+		"sanitize-html": "2.8.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
 		"talisman": "^1.1.4",
@@ -57,8 +59,10 @@
 	},
 	"devDependencies": {
 		"@types/katex": "0.14.0",
+		"@types/marked": "4.0.8",
 		"@types/matter-js": "0.17.7",
 		"@types/punycode": "2.1.0",
+		"@types/sanitize-html": "2.8.0",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "8.3.4",

packages/client/src/components/markdown.vue

@@ -0,0 +1,31 @@
+<template>
+<!-- eslint-disable-next-line vue/no-v-html -->
+<span v-html="rendered"></span>
+</template>
+
+<script lang="ts" setup>
+import { marked } from 'marked'
+import sanitizeHtml from 'sanitize-html';
+import * as foundkey from 'foundkey-js';
+
+const props = defineProps<{
+	text: string;
+	author?: foundkey.entities.User;
+	customEmojis?: foundkey.entities.CustomEmoji[];
+	isNote?: boolean;
+}>();
+
+// TODO use extensions
+// marked.use(...);
+
+const rendered = sanitizeHtml(marked(props.text), {
+	allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]),
+	allowedAttributes: {
+		a: [ 'href', 'name', 'target' ],
+		img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
+		span: [ 'class', 'data-*' ],
+	},
+	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
+	disallowedTagsMode: 'escape',
+});
+</script>

packages/client/src/pages/page.vue

@@ -9,7 +9,7 @@
 						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
 					<div class="content" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-						<Mfm :text="page.text" :is-note="false"/>
+						<Markdown :text="page.text" :is-note="false"/>
 					</div>
 					<div class="actions">
 						<div class="like">
@@ -65,6 +65,7 @@ import MkFollowButton from '@/components/follow-button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkPagePreview from '@/components/page-preview.vue';
+import Markdown from '@/components/markdown.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';