diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 94af6e2f24..41ee239c52 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -178,14 +178,37 @@ const EmojiInput = { this.caret = 0 }, insert ({ insertion, spamMode }) { + const before = this.value.substring(0, this.caret) || '' + const after = this.value.substring(this.caret) || '' + + /* Using a bit more smart approach to padding emojis with spaces: + * - put a space before cursor if there isn't one already, unless we + * are at the beginning of post or in spam mode + * - put a space after emoji if there isn't one already unless we are + * in spam mode + * + * The idea is that when you put a cursor somewhere in between sentence + * inserting just ' :emoji: ' will add more spaces to post which might + * break the flow/spacing, as well as the case where user ends sentence + * with a space before adding emoji. + * + * Spam mode is intended for creating multi-part emojis and overall spamming + * them, masto seem to be rendering :emoji::emoji: correctly now so why not + */ + const isSpaceRegex = /\s/ + const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && !spamMode > 0 ? ' ' : '' + const spaceAfter = !isSpaceRegex.exec(after[0]) && !spamMode ? ' ' : '' + const newValue = [ - this.value.substring(0, this.caret), + before, + spaceBefore, insertion, - this.value.substring(this.caret) + spaceAfter, + after ].join('') this.spamMode = spamMode this.$emit('input', newValue) - const position = this.caret + insertion.length + const position = this.caret + (insertion + spaceAfter + spaceBefore).length this.$nextTick(function () { // Re-focus inputbox after clicking suggestion diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 8c60916b08..cb93f0c184 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -27,7 +27,7 @@ const EmojiPicker = { methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement - this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode }) + this.$emit('emoji', { insertion: value, spamMode: this.spamMode }) }, highlight (key) { const ref = this.$refs['group-' + key] diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 8c07fd2760..0943889878 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -15,7 +15,8 @@ line-height: normal; } .spam-mode-label { - padding: 7px; + padding: 0 7px; + display: flex; } .heading { @@ -104,6 +105,7 @@ flex: 1 1 1px; position: relative; overflow: auto; + user-select: none; mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white); diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 8bc7c38256..b32d08622c 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -83,7 +83,11 @@ v-model="spamMode" type="checkbox" > - +