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 ca2565c8d..326fd3905 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>