From 21e4c3dfe9b439a76782ab86be93298de2878ab9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 16 Jan 2023 09:39:58 +0000
Subject: [PATCH] wip
---
.../src/server/api/endpoints/emojis.ts | 4 +-
.../src/components/MkAutocomplete.vue | 90 +++++++++----------
.../frontend/src/components/MkEmojiPicker.vue | 4 +-
packages/frontend/src/custom-emojis.ts | 18 ++--
packages/frontend/src/pages/about.emojis.vue | 7 +-
.../src/pages/custom-emojis-manager.vue | 8 ++
.../frontend/src/pages/mfm-cheat-sheet.vue | 2 +-
packages/frontend/src/scripts/aiscript/api.ts | 2 +-
8 files changed, 74 insertions(+), 61 deletions(-)
diff --git a/packages/backend/src/server/api/endpoints/emojis.ts b/packages/backend/src/server/api/endpoints/emojis.ts
index 97dcfde596..67538b0bd2 100644
--- a/packages/backend/src/server/api/endpoints/emojis.ts
+++ b/packages/backend/src/server/api/endpoints/emojis.ts
@@ -10,6 +10,8 @@ export const meta = {
tags: ['meta'],
requireCredential: false,
+ allowGet: true,
+ cacheSec: 60,
res: {
type: 'object',
@@ -75,7 +77,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
},
cache: {
id: 'meta_emojis',
- milliseconds: 3600000, // 1 hour
+ milliseconds: 60000, // 1 minute
},
});
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 702fba9796..ab4bf4f793 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -33,7 +33,7 @@
</template>
<script lang="ts">
-import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import sanitizeHtml from 'sanitize-html';
import contains from '@/scripts/contains';
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
@@ -61,59 +61,59 @@ type EmojiDef = {
const lib = emojilist.filter(x => x.category !== 'flags');
-const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+const emojiDb = computed(() => {
+ const char2path = defaultStore.reactiveState.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
-const emjdb: EmojiDef[] = lib.map(x => ({
- emoji: x.char,
- name: x.name,
- url: char2path(x.char),
-}));
-
-for (const x of lib) {
- if (x.keywords) {
- for (const k of x.keywords) {
- emjdb.push({
- emoji: x.char,
- name: k,
- aliasOf: x.name,
- url: char2path(x.char),
- });
- }
- }
-}
-
-emjdb.sort((a, b) => a.name.length - b.name.length);
-
-//#region Construct Emoji DB
-const emojiDefinitions: EmojiDef[] = [];
-
-for (const x of customEmojis) {
- emojiDefinitions.push({
+ const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
+ emoji: x.char,
name: x.name,
- emoji: `:${x.name}:`,
- isCustomEmoji: true,
- });
+ url: char2path(x.char),
+ }));
- if (x.aliases) {
- for (const alias of x.aliases) {
- emojiDefinitions.push({
- name: alias,
- aliasOf: x.name,
- emoji: `:${x.name}:`,
- isCustomEmoji: true,
- });
+ for (const x of lib) {
+ if (x.keywords) {
+ for (const k of x.keywords) {
+ unicodeEmojiDB.push({
+ emoji: x.char,
+ name: k,
+ aliasOf: x.name,
+ url: char2path(x.char),
+ });
+ }
}
}
-}
-emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+ unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
-const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
-//#endregion
+ //#region Construct Emoji DB
+ const customEmojiDB: EmojiDef[] = [];
+
+ for (const x of customEmojis.value) {
+ customEmojiDB.push({
+ name: x.name,
+ emoji: `:${x.name}:`,
+ isCustomEmoji: true,
+ });
+
+ if (x.aliases) {
+ for (const alias of x.aliases) {
+ customEmojiDB.push({
+ name: alias,
+ aliasOf: x.name,
+ emoji: `:${x.name}:`,
+ isCustomEmoji: true,
+ });
+ }
+ }
+ }
+
+ customEmojiDB.sort((a, b) => a.name.length - b.name.length);
+
+ return markRaw([ ...customEmojiDB, ...unicodeEmojiDB ]);
+});
export default {
emojiDb,
- emojiDefinitions,
emojilist,
};
</script>
@@ -230,7 +230,7 @@ function exec() {
} else if (props.type === 'emoji') {
if (!props.q || props.q === '') {
// 最近使った絵文字をサジェスト
- emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+ emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.value.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
return;
}
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 9c6d62ce8b..abb14564fb 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -138,7 +138,7 @@ watch(q, () => {
const searchCustom = () => {
const max = 8;
- const emojis = customEmojis;
+ const emojis = customEmojis.value;
const matches = new Set<Misskey.entities.CustomEmoji>();
const exactMatch = emojis.find(emoji => emoji.name === newQ);
@@ -323,7 +323,7 @@ function done(query?: string): boolean | void {
if (query == null || typeof query !== 'string') return;
const q2 = query.replace(/:/g, '');
- const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+ const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2);
if (exactMatchCustom) {
chosen(exactMatchCustom);
return true;
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 19469999b6..52a1148236 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -1,20 +1,22 @@
-import { api } from './os';
+import { apiGet } from './os';
import { miLocalStorage } from './local-storage';
+import { shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
const storageCache = miLocalStorage.getItem('emojis');
-export let customEmojis = storageCache ? JSON.parse(storageCache) : [];
+export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
fetchCustomEmojis();
export async function fetchCustomEmojis() {
const now = Date.now();
const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
- if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+ if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60) return;
- const res = await api('emojis', {});
+ const res = await apiGet('emojis', {});
- customEmojis = res.emojis;
- miLocalStorage.setItem('emojis', JSON.stringify(customEmojis));
+ customEmojis.value = res.emojis;
+ miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));
miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
}
@@ -23,7 +25,7 @@ export function getCustomEmojiCategories() {
if (cachedCategories) return cachedCategories;
const categories = new Set();
- for (const emoji of customEmojis) {
+ for (const emoji of customEmojis.value) {
categories.add(emoji.category);
}
const res = Array.from(categories);
@@ -36,7 +38,7 @@ export function getCustomEmojiTags() {
if (cachedTags) return cachedTags;
const tags = new Set();
- for (const emoji of customEmojis) {
+ for (const emoji of customEmojis.value) {
for (const tag of emoji.aliases) {
tags.add(tag);
}
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index c0145a5035..7d146d1fdb 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -41,11 +41,12 @@ import MkTab from '@/components/MkTab.vue';
import * as os from '@/os';
import { customEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
import { i18n } from '@/i18n';
+import * as Misskey from 'misskey-js';
const customEmojiCategories = getCustomEmojiCategories();
const customEmojiTags = getCustomEmojiTags();
let q = $ref('');
-let searchEmojis = $ref(null);
+let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
let selectedTags = $ref(new Set());
function search() {
@@ -55,9 +56,9 @@ function search() {
}
if (selectedTags.size === 0) {
- searchEmojis = customEmojis.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
+ searchEmojis = customEmojis.value.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
} else {
- searchEmojis = customEmojis.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
+ searchEmojis = customEmojis.value.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
}
}
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 87d205ed78..e113c38a19 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -79,6 +79,7 @@ import { selectFile, selectFiles } from '@/scripts/select-file';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
+import { fetchCustomEmojis } from '@/custom-emojis';
const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
@@ -130,6 +131,7 @@ const add = async (ev: MouseEvent) => {
})));
promise.then(() => {
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
});
os.promiseDialog(promise);
};
@@ -147,6 +149,7 @@ const edit = (emoji) => {
} else if (result.deleted) {
emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
}
+ fetchCustomEmojis();
},
}, 'closed');
};
@@ -220,6 +223,7 @@ const setCategoryBulk = async () => {
category: result,
});
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
};
const addTagBulk = async () => {
@@ -232,6 +236,7 @@ const addTagBulk = async () => {
aliases: result.split(' '),
});
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
};
const removeTagBulk = async () => {
@@ -244,6 +249,7 @@ const removeTagBulk = async () => {
aliases: result.split(' '),
});
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
};
const setTagBulk = async () => {
@@ -256,6 +262,7 @@ const setTagBulk = async () => {
aliases: result.split(' '),
});
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
};
const delBulk = async () => {
@@ -268,6 +275,7 @@ const delBulk = async () => {
ids: selectedEmojis.value,
});
emojisPaginationComponent.value.reload();
+ fetchCustomEmojis();
};
const headerActions = $computed(() => [{
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index b3932ff7ce..73a5716236 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -313,7 +313,7 @@ let preview_mention = $ref('@example');
let preview_hashtag = $ref('#test');
let preview_url = $ref('https://example.com');
let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(customEmojis.length ? `:${customEmojis[0].name}:` : ':emojiname:');
+let preview_emoji = $ref(customEmojis.value.length ? `:${customEmojis.value[0].name}:` : ':emojiname:');
let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
diff --git a/packages/frontend/src/scripts/aiscript/api.ts b/packages/frontend/src/scripts/aiscript/api.ts
index 29736ac60f..12f00bd32b 100644
--- a/packages/frontend/src/scripts/aiscript/api.ts
+++ b/packages/frontend/src/scripts/aiscript/api.ts
@@ -10,7 +10,7 @@ export function createAiScriptEnv(opts) {
USER_ID: $i ? values.STR($i.id) : values.NULL,
USER_NAME: $i ? values.STR($i.name) : values.NULL,
USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
- CUSTOM_EMOJIS: utils.jsToVal(customEmojis),
+ CUSTOM_EMOJIS: utils.jsToVal(customEmojis.value),
'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
await os.alert({
type: type ? type.value : 'info',