diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/web/app/common/views/components/autocomplete.vue | 49 | ||||
| -rw-r--r-- | src/web/app/common/views/components/post-html.ts | 4 | ||||
| -rw-r--r-- | src/web/app/common/views/directives/autocomplete.ts | 2 | ||||
| -rw-r--r-- | webpack/webpack.config.ts | 2 |
5 files changed, 42 insertions, 17 deletions
diff --git a/package.json b/package.json index 828435e228..d20a46c4d3 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "deepcopy": "0.6.3", "diskusage": "0.2.4", "elasticsearch": "14.1.0", + "emojilib": "^2.2.12", "escape-regexp": "0.0.1", "eslint": "4.18.0", "eslint-plugin-vue": "4.2.2", @@ -137,7 +138,6 @@ "multer": "1.3.0", "nprogress": "0.2.0", "os-utils": "0.0.14", - "pictograph": "2.2.0", "progress-bar-webpack-plugin": "^1.11.0", "prominence": "0.2.0", "proxy-addr": "2.0.3", diff --git a/src/web/app/common/views/components/autocomplete.vue b/src/web/app/common/views/components/autocomplete.vue index b068ecc4fa..f31a624746 100644 --- a/src/web/app/common/views/components/autocomplete.vue +++ b/src/web/app/common/views/components/autocomplete.vue @@ -8,9 +8,10 @@ </li> </ol> <ol class="emojis" ref="suggests" v-if="emojis.length > 0"> - <li v-for="emoji in emojis" @click="complete(type, pictograph.dic[emoji])" @keydown="onKeydown" tabindex="-1"> - <span class="emoji">{{ pictograph.dic[emoji] }}</span> - <span class="name" v-html="emoji.replace(q, `<b>${q}</b>`)"></span> + <li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1"> + <span class="emoji">{{ emoji.emoji }}</span> + <span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span> + <span class="alias" v-if="emoji.alias">({{ emoji.alias }})</span> </li> </ol> </div> @@ -18,9 +19,30 @@ <script lang="ts"> import Vue from 'vue'; -import * as pictograph from 'pictograph'; +import * as emojilib from 'emojilib'; import contains from '../../../common/scripts/contains'; +const lib = Object.entries(emojilib.lib).filter((x: any) => { + return x[1].category != 'flags'; +}); +const emjdb = lib.map((x: any) => ({ + emoji: x[1].char, + name: x[0], + alias: null +})); +lib.forEach((x: any) => { + if (x[1].keywords) { + x[1].keywords.forEach(k => { + emjdb.push({ + emoji: x[1].char, + name: k, + alias: x[0] + }); + }); + } +}); +emjdb.sort((a, b) => a.name.length - b.name.length); + export default Vue.extend({ props: ['type', 'q', 'textarea', 'complete', 'close', 'x', 'y'], data() { @@ -29,7 +51,7 @@ export default Vue.extend({ users: [], emojis: [], select: -1, - pictograph + emojilib } }, computed: { @@ -74,9 +96,12 @@ export default Vue.extend({ this.fetching = false; }); } else if (this.type == 'emoji') { - const emojis = Object.keys(pictograph.dic).sort((a, b) => a.length - b.length); - const matched = emojis.filter(e => e.indexOf(this.q) > -1); - this.emojis = matched.filter((x, i) => i <= 30); + const matched = []; + emjdb.some(x => { + if (x.name.indexOf(this.q) > -1 && !matched.some(y => y.emoji == x.emoji)) matched.push(x); + return matched.length == 30; + }); + this.emojis = matched; } }, beforeDestroy() { @@ -212,12 +237,9 @@ export default Vue.extend({ .name margin 0 8px 0 0 - /*font-weight bold*/ - font-weight normal color rgba(0, 0, 0, 0.8) .username - font-weight normal color rgba(0, 0, 0, 0.3) > .emojis > li @@ -228,7 +250,10 @@ export default Vue.extend({ width 24px .name - font-weight normal color rgba(0, 0, 0, 0.8) + .alias + margin 0 0 0 8px + color rgba(0, 0, 0, 0.3) + </style> diff --git a/src/web/app/common/views/components/post-html.ts b/src/web/app/common/views/components/post-html.ts index adb025589d..37f60bd080 100644 --- a/src/web/app/common/views/components/post-html.ts +++ b/src/web/app/common/views/components/post-html.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; -import * as pictograph from 'pictograph'; +import * as emojilib from 'emojilib'; import { url } from '../../../config'; import MkUrl from './url.vue'; @@ -92,7 +92,7 @@ export default Vue.component('mk-post-html', { return createElement('code', token.html); case 'emoji': - return createElement('span', pictograph.dic[token.emoji] || token.content); + return createElement('span', emojilib.lib[token.emoji] || token.content); } })); diff --git a/src/web/app/common/views/directives/autocomplete.ts b/src/web/app/common/views/directives/autocomplete.ts index 8a33b4e595..e221cce71e 100644 --- a/src/web/app/common/views/directives/autocomplete.ts +++ b/src/web/app/common/views/directives/autocomplete.ts @@ -83,7 +83,7 @@ class Autocomplete { if (emojiIndex != -1 && emojiIndex > mentionIndex) { const emoji = text.substr(emojiIndex + 1); - if (!emoji.match(/^[\+\-a-z_]+$/)) return; + if (!emoji.match(/^[\+\-a-z0-9_]+$/)) return; this.open('emoji', emoji); } } diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts index 76d2980788..69e05dc8c6 100644 --- a/webpack/webpack.config.ts +++ b/webpack/webpack.config.ts @@ -145,7 +145,7 @@ module.exports = Object.keys(langs).map(lang => { output, resolve: { extensions: [ - '.js', '.ts' + '.js', '.ts', '.json' ] }, resolveLoader: { |