Misskey Pages でURLプレビューを表示するように
This commit is contained in:
		
							parent
							
								
									5a4f6b4ada
								
							
						
					
					
						commit
						358bb0fc06
					
				
					 1 changed files with 21 additions and 0 deletions
				
			
		|  | @ -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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue