diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 63ca362f..d37a2d92 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -188,7 +188,7 @@ export const chatStyles = css` .message { color: var(--chat-bubble-msg-color); line-height: 19px; - word-wrap: break-word; + overflow-wrap: anywhere; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 85347864..e479caed 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -70,6 +70,7 @@ class ChatScroller extends LitElement { ...message }); } + console.log(messageArray, 'messages here'); return messageArray; }, []) diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index aa52602e..7c81f28b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -140,6 +140,7 @@ class ChatTextEditor extends LitElement { this.getMessageSize = this.getMessageSize.bind(this) this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) this.addGlobalEventListener = this.addGlobalEventListener.bind(this) + this.sendMessageFunc = this.sendMessageFunc.bind(this) this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) this.initialChat = this.initialChat.bind(this) this.iframeHeight = 42 @@ -152,7 +153,8 @@ class ChatTextEditor extends LitElement { return html`
+ style="${(this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 + && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") ? 'align-items: flex-end' : "align-items: center"}">
{ this.preventUserSendingImage(e) }}> @@ -187,8 +189,7 @@ class ChatTextEditor extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange29")); return; } - this._sendMessage(); - this.chatMessageSize = 0; + this.sendMessageFunc(); }} > @@ -211,8 +212,7 @@ class ChatTextEditor extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange29")); return; } - this._sendMessage(); - this.chatMessageSize = 0; + this.sendMessageFunc(); }} /> ` : @@ -319,6 +319,11 @@ class ChatTextEditor extends LitElement { const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId'); captionEditor.setAttribute('data-placeholder', this.placeholder); } + if (changedProperties && changedProperties.has("chatMessageSize")) { + console.log(this.chatMessageInput, "chat message input"); + console.log(this.chatMessageInput.contentDocument.body.scrollHeight > 60, "scroll height > 60"); + console.log( this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML !== "", "content body text"); + } } shouldUpdate(changedProperties) { @@ -327,6 +332,12 @@ class ChatTextEditor extends LitElement { return true } + sendMessageFunc(props) { + console.log("here123"); + this.chatMessageSize = 0; + this._sendMessage(props); + } + getMessageSize(message){ try { const messageText = message; @@ -574,7 +585,7 @@ class ChatTextEditor extends LitElement { const editor = this; - const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keyup', 'blur', 'paste'] + const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] for (let i = 0; i < events.length; i++) { const event = events[i] @@ -605,10 +616,15 @@ class ChatTextEditor extends LitElement { editorConfig.insertImage(file) } else { - navigator.clipboard.readText().then(clipboardText => { + navigator.clipboard.readText() + .then(clipboardText => { let escapedText = editorConfig.escape(clipboardText); editor.insertText(escapedText); - }).catch(err => { + }) + .then(() => { + editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML); + }) + .catch(err => { // Fallback if everything fails... let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); editor.insertText(textData); @@ -625,12 +641,15 @@ class ChatTextEditor extends LitElement { return false; } - if (e.type === 'keyup') { - console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 12"); - - editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); - editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML); - + if (e.type === 'keydown') { + await new Promise((res, rej) => { + setTimeout(() => { + console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 18"); + editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); + editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML); + }, 0); + res(); + }) // Handle Enter if (e.keyCode === 13 && !e.shiftKey) { @@ -645,14 +664,14 @@ class ChatTextEditor extends LitElement { imageFile: editorConfig.imageFile, } ); + } else if (this.chatMessageSize > 1000) { + e.preventDefault(); + parentEpml.request('showSnackBar', get("chatpage.cchange29")); + return false; } else { - if (this.chatMessageSize > 1000 ) { - parentEpml.request('showSnackBar', get("chatpage.cchange29")); - return; - } editorConfig.sendFunc(); } - + e.preventDefault(); return false; } @@ -744,7 +763,7 @@ class ChatTextEditor extends LitElement { calculateIFrameHeight: this.calculateIFrameHeight, mirrorElement: this.mirrorChatInput, editableElement: this.chatMessageInput, - sendFunc: this._sendMessage, + sendFunc: this.sendMessageFunc, emojiPicker: this.emojiPicker, escape: escape, unescape: unescape,