diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue index 3660861c..8573f471 100644 --- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue +++ b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue @@ -28,7 +28,7 @@ {{ $t('cards.toot.hide')}} -
+
@@ -110,6 +110,7 @@ import { shell, clipboard } from 'electron' import { mapState } from 'vuex' import { findAccount, findLink, isTag } from '../../../utils/link' import DisplayStyle from '~/src/constants/displayStyle' +import emojify from '~/src/renderer/utils/emojify' export default { name: 'toot', @@ -339,6 +340,10 @@ export default { }, locked (message) { return message.visibility === 'private' || message.visibility === 'direct' + }, + status (message) { + const original = this.originalMessage(message) + return emojify(original.content, original.emojis) } } } @@ -399,9 +404,14 @@ export default { font-size: var(--base-font-size); color: var(--theme-primary-color); - .content { + .content /deep/ { margin: 4px 0 8px; word-wrap: break-word; + + .emojione { + width: 20px; + height: 20px; + } } } diff --git a/src/renderer/utils/emojify.js b/src/renderer/utils/emojify.js new file mode 100644 index 00000000..478eeace --- /dev/null +++ b/src/renderer/utils/emojify.js @@ -0,0 +1,14 @@ +const emojify = (str, customEmoji = []) => { + let result = str + customEmoji.map((emoji) => { + const reg = new RegExp(`:${emoji.shortcode}:`, 'g') + const match = result.match(reg) + if (!match) return emoji + const replaceTag = `${emoji.shortcode}` + result = result.replace(reg, replaceTag) + return emoji + }) + return result +} + +export default emojify diff --git a/test/mocha/emojify.spec.js b/test/mocha/emojify.spec.js new file mode 100644 index 00000000..a0d670ee --- /dev/null +++ b/test/mocha/emojify.spec.js @@ -0,0 +1,59 @@ +import assert from 'assert' +import emojify from '../../src/renderer/utils/emojify' + +describe('emojify', () => { + const emoji = [ + { + shortcode: 'python', + url: 'https://example.com/python' + }, + { + shortcode: 'nodejs', + url: 'https://example.com/nodejs' + }, + { + shortcode: 'slack', + url: 'https://example.com/slack' + } + ] + context('Does not contain shortcode', () => { + const str = 'I have a pen.' + it('should not change', () => { + const result = emojify(str, emoji) + assert.strictEqual( + result, + str + ) + }) + }) + context('Contain a shortcode', () => { + const str = 'I like :python:' + it('should replace', () => { + const result = emojify(str, emoji) + assert.strictEqual( + result, + 'I like python' + ) + }) + }) + context('Contain some shortcodes', () => { + const str = 'I like :python: , :nodejs: and :slack:' + it('should replace', () => { + const result = emojify(str, emoji) + assert.strictEqual( + result, + 'I like python , nodejs and slack' + ) + }) + }) + context('Contain same shortcodes', () => { + const str = 'I like :python: , I love :python:' + it('should replace', () => { + const result = emojify(str, emoji) + assert.strictEqual( + result, + 'I like python , I love python' + ) + }) + }) +})