akkoma-fe/src/components/emoji_input/emoji_input.js

507 lines
16 KiB
JavaScript
Raw Normal View History

2019-03-26 02:38:15 +00:00
import Completion from '../../services/completion/completion.js'
2019-08-12 10:18:37 +00:00
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { take } from 'lodash'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
2019-03-29 15:49:32 +00:00
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faSmileBeam
} from '@fortawesome/free-regular-svg-icons'
library.add(
faSmileBeam
)
2019-06-10 15:57:53 +00:00
/**
* EmojiInput - augmented inputs for emoji and autocomplete support in inputs
* without having to give up the comfort of <input/> and <textarea/> elements
*
* Intended usage is:
2019-06-18 19:13:03 +00:00
* <EmojiInput v-model="something">
2019-06-10 15:57:53 +00:00
* <input v-model="something"/>
2019-06-18 18:30:35 +00:00
* </EmojiInput>
2019-06-10 15:57:53 +00:00
*
* Works only with <input> and <textarea>. Intended to use with only one nested
* input. It will find first input or textarea and work with that, multiple
* nested children not tested. You HAVE TO duplicate v-model for both
* <emoji-input> and <input>/<textarea> otherwise it will not work.
*
* Be prepared for CSS troubles though because it still wraps component in a div
* while TRYING to make it look like nothing happened, but it could break stuff.
*/
2019-03-26 02:38:15 +00:00
const EmojiInput = {
2019-06-10 15:57:53 +00:00
props: {
suggest: {
/**
* suggest: function (input: String) => Suggestion[]
*
* Function that takes input string which takes string (textAtCaret)
* and returns an array of Suggestions
*
* Suggestion is an object containing following properties:
* displayText: string. Main display text, what actual suggestion
* represents (user's screen name/emoji shortcode)
* replacement: string. Text that should replace the textAtCaret
2019-06-10 15:57:53 +00:00
* detailText: string, optional. Subtitle text, providing additional info
* if present (user's nickname)
* imageUrl: string, optional. Image to display alongside with suggestion,
* currently if no image is provided, replacement will be used (for
2019-06-10 15:57:53 +00:00
* unicode emojis)
*
* TODO: make it asynchronous when adding proper server-provided user
* suggestions
*
* For commonly used suggestors (emoji, users, both) use suggestor.js
*/
required: true,
type: Function
},
// TODO VUE3: change to modelValue, change 'input' event to 'input'
2019-06-10 15:57:53 +00:00
value: {
/**
* Used for v-model
*/
required: true,
type: String
},
2019-09-12 17:36:43 +00:00
enableEmojiPicker: {
/**
* Enables emoji picker support, this implies that custom emoji are supported
*/
required: false,
type: Boolean,
default: false
},
2019-09-12 17:36:43 +00:00
hideEmojiButton: {
/**
* intended to use with external picker trigger, i.e. you have a button outside
* input that will open up the picker, see triggerShowPicker()
*/
required: false,
type: Boolean,
default: false
},
2019-09-12 17:36:43 +00:00
enableStickerPicker: {
/**
* Enables sticker picker support, only makes sense when enableEmojiPicker=true
*/
required: false,
type: Boolean,
default: false
2020-05-07 13:10:53 +00:00
},
placement: {
/**
* Forces the panel to take a specific position relative to the input element.
* The 'auto' placement chooses either bottom or top depending on which has the available space (when both have available space, bottom is preferred).
*/
required: false,
type: String, // 'auto', 'top', 'bottom'
default: 'auto'
},
newlineOnCtrlEnter: {
required: false,
type: Boolean,
default: false
2019-06-10 15:57:53 +00:00
}
2019-07-05 07:02:14 +00:00
},
2019-03-26 02:38:15 +00:00
data () {
return {
input: undefined,
2019-03-26 02:38:15 +00:00
highlighted: 0,
caret: 0,
focused: false,
blurTimeout: null,
showPicker: false,
temporarilyHideSuggestions: false,
keepOpen: false,
2020-11-17 15:46:26 +00:00
disableClickOutside: false,
suggestions: []
2019-03-26 02:38:15 +00:00
}
},
2019-03-29 15:49:32 +00:00
components: {
2019-07-28 10:56:08 +00:00
EmojiPicker
2019-03-29 15:49:32 +00:00
},
2019-03-26 02:38:15 +00:00
computed: {
padEmoji () {
return this.$store.getters.mergedConfig.padEmoji
},
showSuggestions () {
return this.focused &&
this.suggestions &&
this.suggestions.length > 0 &&
!this.showPicker &&
!this.temporarilyHideSuggestions
2019-03-26 02:38:15 +00:00
},
textAtCaret () {
return (this.wordAtCaret || {}).word || ''
},
wordAtCaret () {
if (this.value && this.caret) {
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
return word
}
}
},
mounted () {
const { root } = this.$refs
const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
if (!input) return
this.input = input
this.resize()
input.addEventListener('blur', this.onBlur)
input.addEventListener('focus', this.onFocus)
input.addEventListener('paste', this.onPaste)
input.addEventListener('keyup', this.onKeyUp)
input.addEventListener('keydown', this.onKeyDown)
input.addEventListener('click', this.onClickInput)
input.addEventListener('transitionend', this.onTransition)
input.addEventListener('input', this.onInput)
},
unmounted () {
const { input } = this
if (input) {
input.removeEventListener('blur', this.onBlur)
input.removeEventListener('focus', this.onFocus)
input.removeEventListener('paste', this.onPaste)
input.removeEventListener('keyup', this.onKeyUp)
input.removeEventListener('keydown', this.onKeyDown)
input.removeEventListener('click', this.onClickInput)
input.removeEventListener('transitionend', this.onTransition)
input.removeEventListener('input', this.onInput)
2019-03-26 02:38:15 +00:00
}
},
2020-05-07 13:10:53 +00:00
watch: {
showSuggestions: function (newValue) {
this.$emit('shown', newValue)
2020-11-17 15:46:26 +00:00
},
2020-11-19 10:35:21 +00:00
textAtCaret: async function (newWord) {
const firstchar = newWord.charAt(0)
2020-11-17 15:46:26 +00:00
this.suggestions = []
2020-11-19 10:35:21 +00:00
if (newWord === firstchar) return
const matchedSuggestions = await this.suggest(newWord)
// Async: cancel if textAtCaret has changed during wait
if (this.textAtCaret !== newWord) return
2020-11-17 15:46:26 +00:00
if (matchedSuggestions.length <= 0) return
2020-11-18 16:43:24 +00:00
this.suggestions = take(matchedSuggestions, 5)
2020-11-19 09:37:06 +00:00
.map(({ imageUrl, ...rest }) => ({
2020-11-17 15:46:26 +00:00
...rest,
2020-11-19 09:37:06 +00:00
img: imageUrl || ''
2020-11-17 15:46:26 +00:00
}))
2020-11-18 16:43:24 +00:00
},
suggestions (newValue) {
this.$nextTick(this.resize)
2020-05-07 13:10:53 +00:00
}
},
2019-03-26 02:38:15 +00:00
methods: {
focusPickerInput () {
const pickerEl = this.$refs.picker.$el
if (!pickerEl) return
const pickerInput = pickerEl.querySelector('input')
if (pickerInput) pickerInput.focus()
},
triggerShowPicker () {
this.showPicker = true
this.$refs.picker.startEmojiLoad()
this.$nextTick(() => {
this.scrollIntoView()
this.focusPickerInput()
})
// This temporarily disables "click outside" handler
// since external trigger also means click originates
// from outside, thus preventing picker from opening
this.disableClickOutside = true
setTimeout(() => {
this.disableClickOutside = false
}, 0)
},
togglePicker () {
this.input.focus()
this.showPicker = !this.showPicker
if (this.showPicker) {
this.scrollIntoView()
this.$refs.picker.startEmojiLoad()
2021-02-25 15:32:54 +00:00
this.$nextTick(this.focusPickerInput)
}
},
2019-03-26 02:38:15 +00:00
replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.caret = 0
},
insert ({ insertion, keepOpen, surroundingSpace = true }) {
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 = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''
const newValue = [
before,
spaceBefore,
insertion,
spaceAfter,
after
].join('')
this.keepOpen = keepOpen
this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) {
this.input.focus()
}
this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion
// Set selection right after the replacement instead of the very end
2021-05-31 10:59:44 +00:00
this.input.setSelectionRange(position, position)
this.caret = position
})
},
replaceText (e, suggestion) {
2019-03-26 02:38:15 +00:00
const len = this.suggestions.length || 0
if (this.textAtCaret.length === 1) { return }
if (len > 0 || suggestion) {
const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
const replacement = chosenSuggestion.replacement
2019-03-26 02:38:15 +00:00
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.highlighted = 0
const position = this.wordAtCaret.start + replacement.length
this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion
this.input.focus()
// Set selection right after the replacement instead of the very end
this.input.setSelectionRange(position, position)
this.caret = position
})
2019-06-09 17:40:46 +00:00
e.preventDefault()
2019-03-26 02:38:15 +00:00
}
},
cycleBackward (e) {
const len = this.suggestions.length || 0
if (len > 1) {
2019-03-26 02:38:15 +00:00
this.highlighted -= 1
if (this.highlighted < 0) {
this.highlighted = this.suggestions.length - 1
}
e.preventDefault()
2019-03-26 02:38:15 +00:00
} else {
this.highlighted = 0
}
},
cycleForward (e) {
const len = this.suggestions.length || 0
if (len > 1) {
2019-03-26 02:38:15 +00:00
this.highlighted += 1
if (this.highlighted >= len) {
this.highlighted = 0
}
e.preventDefault()
2019-03-26 02:38:15 +00:00
} else {
this.highlighted = 0
}
},
scrollIntoView () {
const rootRef = this.$refs['picker'].$el
/* Scroller is either `window` (replies in TL), sidebar (main post form,
* replies in notifs) or mobile post form. Note that getting and setting
* scroll is different for `Window` and `Element`s
*/
const scrollerRef = this.$el.closest('.sidebar-scroller') ||
this.$el.closest('.post-form-modal-view') ||
window
const currentScroll = scrollerRef === window
? scrollerRef.scrollY
: scrollerRef.scrollTop
const scrollerHeight = scrollerRef === window
? scrollerRef.innerHeight
: scrollerRef.offsetHeight
const scrollerBottomBorder = currentScroll + scrollerHeight
// We check where the bottom border of root element is, this uses findOffset
// to find offset relative to scrollable container (scroller)
const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
// could also check top delta but there's no case for it
const targetScroll = currentScroll + bottomDelta
if (scrollerRef === window) {
scrollerRef.scroll(0, targetScroll)
} else {
scrollerRef.scrollTop = targetScroll
}
this.$nextTick(() => {
const { offsetHeight } = this.input
const { picker } = this.$refs
const pickerBottom = picker.$el.getBoundingClientRect().bottom
if (pickerBottom > window.innerHeight) {
picker.$el.style.top = 'auto'
picker.$el.style.bottom = offsetHeight + 'px'
}
})
},
2019-06-09 17:40:46 +00:00
onTransition (e) {
2019-06-18 17:49:43 +00:00
this.resize()
2019-03-26 02:38:15 +00:00
},
onBlur (e) {
// Clicking on any suggestion removes focus from autocomplete,
// preventing click handler ever executing.
this.blurTimeout = setTimeout(() => {
this.focused = false
this.setCaret(e)
2019-06-18 17:49:43 +00:00
this.resize()
}, 200)
2019-03-26 02:38:15 +00:00
},
onClick (e, suggestion) {
this.replaceText(e, suggestion)
},
onFocus (e) {
if (this.blurTimeout) {
clearTimeout(this.blurTimeout)
2019-06-25 21:34:09 +00:00
this.blurTimeout = null
}
if (!this.keepOpen) {
this.showPicker = false
}
this.focused = true
this.setCaret(e)
2019-06-18 17:49:43 +00:00
this.resize()
this.temporarilyHideSuggestions = false
},
onKeyUp (e) {
const { key } = e
this.setCaret(e)
2019-06-18 17:49:43 +00:00
this.resize()
// Setting hider in keyUp to prevent suggestions from blinking
// when moving away from suggested spot
if (key === 'Escape') {
this.temporarilyHideSuggestions = true
} else {
this.temporarilyHideSuggestions = false
}
},
onPaste (e) {
this.setCaret(e)
2019-06-18 17:49:43 +00:00
this.resize()
},
onKeyDown (e) {
const { ctrlKey, shiftKey, key } = e
if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
this.insert({ insertion: '\n', surroundingSpace: false })
// Ensure only one new line is added on macos
e.stopPropagation()
e.preventDefault()
// Scroll the input element to the position of the cursor
this.$nextTick(() => {
this.input.blur()
this.input.focus()
})
}
// Disable suggestions hotkeys if suggestions are hidden
if (!this.temporarilyHideSuggestions) {
if (key === 'Tab') {
if (shiftKey) {
this.cycleBackward(e)
} else {
this.cycleForward(e)
}
}
if (key === 'ArrowUp') {
2019-06-09 17:40:46 +00:00
this.cycleBackward(e)
} else if (key === 'ArrowDown') {
2019-06-09 17:40:46 +00:00
this.cycleForward(e)
}
if (key === 'Enter') {
if (!ctrlKey) {
this.replaceText(e)
}
}
}
// Probably add optional keyboard controls for emoji picker?
// Escape hides suggestions, if suggestions are hidden it
// de-focuses the element (i.e. default browser behavior)
if (key === 'Escape') {
if (!this.temporarilyHideSuggestions) {
this.input.focus()
}
}
this.showPicker = false
this.resize()
2019-03-26 02:38:15 +00:00
},
onInput (e) {
this.showPicker = false
this.setCaret(e)
this.resize()
this.$emit('input', e.target.value)
},
onClickInput (e) {
2019-09-25 17:23:55 +00:00
this.showPicker = false
},
onClickOutside (e) {
if (this.disableClickOutside) return
this.showPicker = false
},
onStickerUploaded (e) {
this.showPicker = false
this.$emit('sticker-uploaded', e)
},
onStickerUploadFailed (e) {
this.showPicker = false
this.$emit('sticker-upload-Failed', e)
},
2019-06-10 15:57:53 +00:00
setCaret ({ target: { selectionStart } }) {
2019-03-26 02:38:15 +00:00
this.caret = selectionStart
},
resize () {
2020-05-07 13:10:53 +00:00
const panel = this.$refs.panel
if (!panel) return
2020-05-07 13:10:53 +00:00
const picker = this.$refs.picker.$el
const panelBody = this.$refs['panel-body']
const { offsetHeight, offsetTop } = this.input
const offsetBottom = offsetTop + offsetHeight
2020-05-07 13:10:53 +00:00
this.setPlacement(panelBody, panel, offsetBottom)
this.setPlacement(picker, picker, offsetBottom)
},
setPlacement (container, target, offsetBottom) {
if (!container || !target) return
target.style.top = offsetBottom + 'px'
target.style.bottom = 'auto'
if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
target.style.top = 'auto'
target.style.bottom = this.input.offsetHeight + 'px'
2020-05-07 13:10:53 +00:00
}
},
overflowsBottom (el) {
return el.getBoundingClientRect().bottom > window.innerHeight
2019-03-26 02:38:15 +00:00
}
}
}
export default EmojiInput