1 files changed, 68 insertions, 0 deletions
diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue
new file mode 100644
index 0000000000..689c484521
--- /dev/null
+++ b/packages/frontend/src/components/page/page.text.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="mrdgzndn">
+	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
+	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
+</div>
+</template>
+
+<script lang="ts">
+import { TextBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import * as mfm from 'mfm-js';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+
+export default defineComponent({
+	components: {
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			text: this.hpml.interpolate(this.block.text),
+		};
+	},
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				return extractUrlFromMfm(mfm.parse(this.text));
+			} else {
+				return [];
+			}
+		},
+	},
+	watch: {
+		'hpml.vars': {
+			handler() {
+				this.text = this.hpml.interpolate(this.block.text);
+			},
+			deep: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.mrdgzndn {
+	&:not(:first-child) {
+		margin-top: 0.5em;
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 0.5em;
+	}
+
+	> .url {
+		margin: 0.5em 0;
+	}
+}
+</style>