From 8f8deaa1f030d756b519dda3ab385e4e0a98e96e Mon Sep 17 00:00:00 2001 From: Lukas Lipp Date: Wed, 11 Nov 2020 19:42:43 +0100 Subject: [PATCH 1/4] allow emojis to by inserted into the userinput field --- src/ChatWindow.vue | 5 +++++ src/Launcher.vue | 7 ++++++- src/UserInput.vue | 51 +++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 61 insertions(+), 2 deletions(-) diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue index 21e992dc..5702cfc6 100644 --- a/src/ChatWindow.vue +++ b/src/ChatWindow.vue @@ -49,6 +49,7 @@ false + }, + sendEmojisDirectly: { + type: Boolean, + default: () => true }, showEdition: { type: Boolean, diff --git a/src/UserInput.vue b/src/UserInput.vue index c73b3989..aa7e5986 100644 --- a/src/UserInput.vue +++ b/src/UserInput.vue @@ -121,6 +121,10 @@ export default { type: Boolean, default: () => false }, + sendEmojisDirectly: { + type: Boolean, + default: () => true + }, suggestions: { type: Array, default: () => [] @@ -145,7 +149,8 @@ export default { data() { return { file: null, - inputActive: false + inputActive: false, + previousSelectionRange: null } }, computed: { @@ -172,6 +177,22 @@ export default { this.focusUserInput() } }) + + document.addEventListener('selectionchange', () => { + var selection = document.getSelection() + if ( + selection.anchorNode != this.$refs.userInput && + selection.anchorNode.parentNode != this.$refs.userInput + ) { + return + } + + if (selection.rangeCount) { + this.previousSelectionRange = selection.getRangeAt(0).cloneRange() + } else { + this.previousSelectionRange = null + } + }) }, methods: { cancelFile() { @@ -268,6 +289,13 @@ export default { } }, _handleEmojiPicked(emoji) { + if (this.sendEmojisDirectly) { + this._submitEmoji(emoji) + } else { + this._insertEmoji(emoji) + } + }, + _submitEmoji(emoji) { this._checkSubmitSuccess( this.onSubmit({ author: 'me', @@ -276,6 +304,27 @@ export default { }) ) }, + _insertEmoji(emoji) { + var range = this.previousSelectionRange + if (!range) { + console.log('First child: ' + this.$refs.userInput.firstChild) + range = document.createRange() + range.setStart(this.$refs.userInput.firstChild, this.$refs.userInput.textContent.length) + range.collapse(true) + } + + var selection = window.getSelection() + selection.removeAllRanges() + selection.addRange(range) + + var textNode = document.createTextNode(emoji) + + range.deleteContents() + range.insertNode(textNode) + range.collapse(false) + + this.$refs.userInput.focus() + }, _handleFileSubmit(file) { this.file = file }, From 816f4dab0b4e0b54fa0539d8f06a60424cd91455 Mon Sep 17 00:00:00 2001 From: Lukas Lipp Date: Wed, 11 Nov 2020 19:46:28 +0100 Subject: [PATCH 2/4] updated README to explain the new sendEmojisDirectly property --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 65473b7a..fb057736 100644 --- a/README.md +++ b/README.md @@ -178,6 +178,7 @@ For more detailed examples see the demo folder. | *close | Function | The function passed to the component that mutates the above mentioned bool toggle for closing the chat | | messageList | [message] | An array of message objects to be rendered as a conversation. | | showEmoji | Boolean | A bool indicating whether or not to show the emoji button +| sendEmojisDirectly | Boolean | A bool indicating whether or not to send emojis directly as a message as opposed to inserting them into the user input | showFile | Boolean | A bool indicating whether or not to show the file chooser button | showDeletion | Boolean | A bool indicating whether or not to show the edit button for a message | showConfirmationDeletion | Boolean | A bool indicating whether or not to show the confirmation text when we remove a message From 8bc59cd4308392f29a4e108efef5cba2a9ae9bc5 Mon Sep 17 00:00:00 2001 From: Lukas Lipp Date: Wed, 18 Nov 2020 22:23:49 +0100 Subject: [PATCH 3/4] fixed null errors and empty input div --- src/UserInput.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/UserInput.vue b/src/UserInput.vue index aa7e5986..bf24ea5e 100644 --- a/src/UserInput.vue +++ b/src/UserInput.vue @@ -181,6 +181,7 @@ export default { document.addEventListener('selectionchange', () => { var selection = document.getSelection() if ( + selection.anchorNode && selection.anchorNode != this.$refs.userInput && selection.anchorNode.parentNode != this.$refs.userInput ) { @@ -307,7 +308,9 @@ export default { _insertEmoji(emoji) { var range = this.previousSelectionRange if (!range) { - console.log('First child: ' + this.$refs.userInput.firstChild) + if (!this.$refs.userInput.firstChild) { + this.$refs.userInput.append(document.createTextNode('')) + } range = document.createRange() range.setStart(this.$refs.userInput.firstChild, this.$refs.userInput.textContent.length) range.collapse(true) From 0c9c9c91754114a78eefd7a9b9a10f66d627e9ae Mon Sep 17 00:00:00 2001 From: Lukas Lipp Date: Thu, 19 Nov 2020 08:52:15 +0100 Subject: [PATCH 4/4] prevent null error on selection change --- .gitignore | 1 + src/UserInput.vue | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 1c751e9d..00a257af 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ yarn-error.log* # Misc .ghnpmpkgtoken +package-lock.json diff --git a/src/UserInput.vue b/src/UserInput.vue index bf24ea5e..6558563e 100644 --- a/src/UserInput.vue +++ b/src/UserInput.vue @@ -181,9 +181,10 @@ export default { document.addEventListener('selectionchange', () => { var selection = document.getSelection() if ( - selection.anchorNode && - selection.anchorNode != this.$refs.userInput && - selection.anchorNode.parentNode != this.$refs.userInput + !selection || + !selection.anchorNode || + (selection.anchorNode != this.$refs.userInput && + selection.anchorNode.parentNode != this.$refs.userInput) ) { return }