updated logic for padding with spaces, improved spam mode

This commit is contained in:
Henry Jameson 2019-09-15 12:09:19 +03:00
parent d2fe797821
commit e366adbb6c
5 changed files with 36 additions and 7 deletions

View file

@ -178,14 +178,37 @@ const EmojiInput = {
this.caret = 0 this.caret = 0
}, },
insert ({ insertion, spamMode }) { 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 = [ const newValue = [
this.value.substring(0, this.caret), before,
spaceBefore,
insertion, insertion,
this.value.substring(this.caret) spaceAfter,
after
].join('') ].join('')
this.spamMode = spamMode this.spamMode = spamMode
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + insertion.length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion

View file

@ -27,7 +27,7 @@ const EmojiPicker = {
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement 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) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]

View file

@ -15,7 +15,8 @@
line-height: normal; line-height: normal;
} }
.spam-mode-label { .spam-mode-label {
padding: 7px; padding: 0 7px;
display: flex;
} }
.heading { .heading {
@ -104,6 +105,7 @@
flex: 1 1 1px; flex: 1 1 1px;
position: relative; position: relative;
overflow: auto; overflow: auto;
user-select: none;
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, 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 bottom, white 0, transparent 100%) top no-repeat,
linear-gradient(to top, white, white); linear-gradient(to top, white, white);

View file

@ -83,7 +83,11 @@
v-model="spamMode" v-model="spamMode"
type="checkbox" type="checkbox"
> >
<label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label> <label class="spam-mode-label" :for="labelKey + 'spam-mode'">
<div class="spam-mode-label-text">
{{ $t('emoji.spam') }}
</div>
</label>
</div> </div>
</div> </div>
<div <div

View file

@ -109,7 +109,7 @@
"emoji": { "emoji": {
"stickers": "Stickers", "stickers": "Stickers",
"emoji": "Emoji", "emoji": "Emoji",
"spam": "Keep open after adding emoji", "spam": "Keep picker open, don't separate emoji with spaces",
"search_emoji": "Search for an emoji", "search_emoji": "Search for an emoji",
"add_emoji": "Insert emoji", "add_emoji": "Insert emoji",
"custom": "Custom emoji", "custom": "Custom emoji",