qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests 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 {
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;

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

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

59
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.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`
<div
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) => {
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();
}}
>
</vaadin-icon>
@ -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,