oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat(client): MFM関数構文のサジェストを実装

Browse source
This commit is contained in:
syuilo 2021-09-26 02:55:11 +09:00
parent a75f3fb87c
commit a70dbb7e74
3 changed files with 58 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/client/components/autocomplete.vue
View file

@ -10,12 +10,12 @@
</li>
<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $ts.selectUser }}</li>
</ol>
<ol class="hashtags" ref="suggests" v-if="hashtags.length > 0">
<ol class="hashtags" ref="suggests" v-else-if="hashtags.length > 0">
<li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
<ol class="emojis" ref="suggests" v-else-if="emojis.length > 0">
<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else-if="!$store.state.useOsNativeEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
@ -24,6 +24,11 @@
<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
</li>
</ol>
<ol class="mfmTags" ref="suggests" v-else-if="mfmTags.length > 0">
<li v-for="tag in mfmTags" @click="complete(type, tag)" @keydown="onKeydown" tabindex="-1">
<span class="tag">{{ tag }}</span>
</li>
</ol>
</div>
</template>
@ -106,6 +111,8 @@ emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
//#endregion
const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle'];
export default defineComponent({
props: {
type: {
@ -137,11 +144,6 @@ export default defineComponent({
type: Number,
required: true,
},
showing: {
type: Boolean,
required: true
},
},
emits: ['done', 'closed'],
@ -154,18 +156,11 @@ export default defineComponent({
hashtags: [],
emojis: [],
items: [],
mfmTags: [],
select: -1,
}
},
watch: {
showing() {
if (!this.showing) {
this.$emit('closed');
}
}
},
updated() {
this.setPosition();
this.items = (this.$refs.suggests as Element | undefined)?.children || [];
@ -236,7 +231,9 @@ export default defineComponent({
}
}
if (this.type == 'user') {
console.log(this.type);
if (this.type === 'user') {
if (this.q == null) {
this.users = [];
this.fetching = false;
@ -262,7 +259,7 @@ export default defineComponent({
sessionStorage.setItem(cacheKey, JSON.stringify(users));
});
}
} else if (this.type == 'hashtag') {
} else if (this.type === 'hashtag') {
if (this.q == null || this.q == '') {
this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]');
this.fetching = false;
@ -286,7 +283,7 @@ export default defineComponent({
});
}
}
} else if (this.type == 'emoji') {
} else if (this.type === 'emoji') {
if (this.q == null || this.q == '') {
// 最近使った絵文字をサジェスト
this.emojis = this.$store.state.recentlyUsedEmojis.map(emoji => emojiDb.find(e => e.emoji == emoji)).filter(x => x != null);
@ -314,6 +311,14 @@ export default defineComponent({
}
this.emojis = matched;
} else if (this.type === 'mfmTag') {
console.log(this.q);
if (this.q == null || this.q == '') {
this.mfmTags = MFM_TAGS;
return;
}
this.mfmTags = MFM_TAGS.filter(tag => tag.startsWith(this.q));
}
},
@ -490,5 +495,11 @@ export default defineComponent({
margin: 0 0 0 8px;
}
}
> .mfmTags > li {
.name {
}
}
}
</style>