Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed text editor scroll bug and chat-messages bug

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-30 20:57:10 -05:00
parent 5c292292ea
commit 09b7adff26
3 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
View File

@ -188,7 +188,7 @@ export const chatStyles = css`
.message { .message {
color: var(--chat-bubble-msg-color); color: var(--chat-bubble-msg-color);
line-height: 19px; line-height: 19px;
word-wrap: break-word; overflow-wrap: anywhere;
-webkit-user-select: text; -webkit-user-select: text;
-moz-user-select: text; -moz-user-select: text;
-ms-user-select: text; -ms-user-select: text;

1
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -70,6 +70,7 @@ class ChatScroller extends LitElement {
...message ...message
}); });
} }
console.log(messageArray, 'messages here');
return messageArray; return messageArray;
}, []) }, [])

53
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -140,6 +140,7 @@ class ChatTextEditor extends LitElement {
this.getMessageSize = this.getMessageSize.bind(this) this.getMessageSize = this.getMessageSize.bind(this)
this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
this.addGlobalEventListener = this.addGlobalEventListener.bind(this) this.addGlobalEventListener = this.addGlobalEventListener.bind(this)
this.sendMessageFunc = this.sendMessageFunc.bind(this)
this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this)
this.initialChat = this.initialChat.bind(this) this.initialChat = this.initialChat.bind(this)
this.iframeHeight = 42 this.iframeHeight = 42
@ -152,7 +153,8 @@ class ChatTextEditor extends LitElement {
return html` return html`
<div <div
class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")} class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"> 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"}">
<div class="file-picker-container" @click=${(e) => { <div class="file-picker-container" @click=${(e) => {
this.preventUserSendingImage(e) this.preventUserSendingImage(e)
}}> }}>
@ -187,8 +189,7 @@ class ChatTextEditor extends LitElement {
parentEpml.request('showSnackBar', get("chatpage.cchange29")); parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return; return;
} }
this._sendMessage(); this.sendMessageFunc();
this.chatMessageSize = 0;
}} }}
> >
</vaadin-icon> </vaadin-icon>
@ -211,8 +212,7 @@ class ChatTextEditor extends LitElement {
parentEpml.request('showSnackBar', get("chatpage.cchange29")); parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return; return;
} }
this._sendMessage(); this.sendMessageFunc();
this.chatMessageSize = 0;
}} }}
/> />
` : ` :
@ -319,6 +319,11 @@ class ChatTextEditor extends LitElement {
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId'); const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
captionEditor.setAttribute('data-placeholder', this.placeholder); 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) { shouldUpdate(changedProperties) {
@ -327,6 +332,12 @@ class ChatTextEditor extends LitElement {
return true return true
} }
sendMessageFunc(props) {
console.log("here123");
this.chatMessageSize = 0;
this._sendMessage(props);
}
getMessageSize(message){ getMessageSize(message){
try { try {
const messageText = message; const messageText = message;
@ -574,7 +585,7 @@ class ChatTextEditor extends LitElement {
const editor = this; 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++) { for (let i = 0; i < events.length; i++) {
const event = events[i] const event = events[i]
@ -605,10 +616,15 @@ class ChatTextEditor extends LitElement {
editorConfig.insertImage(file) editorConfig.insertImage(file)
} else { } else {
navigator.clipboard.readText().then(clipboardText => { navigator.clipboard.readText()
.then(clipboardText => {
let escapedText = editorConfig.escape(clipboardText); let escapedText = editorConfig.escape(clipboardText);
editor.insertText(escapedText); editor.insertText(escapedText);
}).catch(err => { })
.then(() => {
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
})
.catch(err => {
// Fallback if everything fails... // Fallback if everything fails...
let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); let textData = (e.originalEvent || e).clipboardData.getData('text/plain');
editor.insertText(textData); editor.insertText(textData);
@ -625,12 +641,15 @@ class ChatTextEditor extends LitElement {
return false; return false;
} }
if (e.type === 'keyup') { if (e.type === 'keydown') {
console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 12"); 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.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML); editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
}, 0);
res();
})
// Handle Enter // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
@ -645,11 +664,11 @@ class ChatTextEditor extends LitElement {
imageFile: editorConfig.imageFile, imageFile: editorConfig.imageFile,
} }
); );
} else { } else if (this.chatMessageSize > 1000) {
if (this.chatMessageSize > 1000 ) { e.preventDefault();
parentEpml.request('showSnackBar', get("chatpage.cchange29")); parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return; return false;
} } else {
editorConfig.sendFunc(); editorConfig.sendFunc();
} }
@ -744,7 +763,7 @@ class ChatTextEditor extends LitElement {
calculateIFrameHeight: this.calculateIFrameHeight, calculateIFrameHeight: this.calculateIFrameHeight,
mirrorElement: this.mirrorChatInput, mirrorElement: this.mirrorChatInput,
editableElement: this.chatMessageInput, editableElement: this.chatMessageInput,
sendFunc: this._sendMessage, sendFunc: this.sendMessageFunc,
emojiPicker: this.emojiPicker, emojiPicker: this.emojiPicker,
escape: escape, escape: escape,
unescape: unescape, unescape: unescape,