Misskey Pages でURLプレビューを表示するように

1 files changed, 21 insertions, 0 deletions

diff --git a/src/client/app/common/views/pages/page/page.text.vue b/src/client/app/common/views/pages/page/page.text.vue
index ca2565c8d4..326fd39050 100644
--- a/src/client/app/common/views/pages/page/page.text.vue
+++ b/src/client/app/common/views/pages/page/page.text.vue
@@ -1,11 +1,15 @@
 <template>
 <div class="mrdgzndn">
 	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
+
+	<mk-url-preview v-for="url in urls" :url="url" :key="url" class="url"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { parse } from '../../../../../../mfm/parse';
+import { unique } from '../../../../../../prelude/array';
 
 export default Vue.extend({
 	props: {
@@ -23,6 +27,20 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				const ast = parse(this.text);
+				// TODO: 再帰的にURL要素がないか調べる
+				return unique(ast
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
+			} else {
+				return [];
+			}
+		}
+	},
+
 	created() {
 		this.$watch('script.vars', () => {
 			this.text = this.script.interpolate(this.value.text);
@@ -38,4 +56,7 @@ export default Vue.extend({
 
 	&:not(:last-child)
 		margin-bottom 0.5em
+
+	> .url
+		margin 0.5em 0
 </style>