qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-11 15:07:05 -05:00
commit 5e4c5cf862
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -61,7 +61,8 @@ class ChatPage extends LitElement {
chatMessageSize: { type: Number}, chatMessageSize: { type: Number},
imageFile: {type: Object}, imageFile: {type: Object},
isUploadingImage: {type: Boolean}, isUploadingImage: {type: Boolean},
caption: { type: String } caption: { type: String },
chatEditor: {type: Object}
} }
} }
@ -533,7 +534,7 @@ class ChatPage extends LitElement {
this.messagesRendered = [] this.messagesRendered = []
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 40 this.iframeHeight = 42
this.chatMessageSize = 0 this.chatMessageSize = 0
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
@ -629,7 +630,7 @@ class ChatPage extends LitElement {
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
</div> </div>
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}"> <div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
<div class="typing-area"> <div class="typing-area">
${this.repliedToMessageObj && html` ${this.repliedToMessageObj && html`
<div class="repliedTo-container"> <div class="repliedTo-container">
@ -688,7 +689,8 @@ class ChatPage extends LitElement {
` `
)} )}
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}> <iframe
id="_chatEditorDOM" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe> </iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -780,6 +782,8 @@ class ChatPage extends LitElement {
parentEpml.request('showSnackBar', get("chatpage.cchange28")) parentEpml.request('showSnackBar', get("chatpage.cchange28"))
} }
async firstUpdated() { async firstUpdated() {
@ -913,7 +917,15 @@ class ChatPage extends LitElement {
} }
calculateIFrameHeight(height) { calculateIFrameHeight(height) {
this.iframeHeight = height;
setTimeout(()=> {
const editorTest = this.shadowRoot.getElementById('_chatEditorDOM').contentWindow.document.getElementById('testingId').scrollHeight
console.log('editor', editorTest)
this.iframeHeight = editorTest + 20
}, 50)
} }
onCaptionChange(e) { onCaptionChange(e) {
@ -1944,7 +1956,7 @@ class ChatPage extends LitElement {
const editor = this; const editor = this;
if (editor.content) { if (editor.content) {
return editor.content.body.innerHTML; return editor.contentDiv.innerHTML;
} }
}; };
@ -1952,7 +1964,7 @@ class ChatPage extends LitElement {
const editor = this; const editor = this;
if (value) { if (value) {
editor.content.body.innerHTML = value; editor.contentDiv.innerHTML = value;
editor.updateMirror(); editor.updateMirror();
} }
@ -1961,9 +1973,10 @@ class ChatPage extends LitElement {
ChatEditor.prototype.resetValue = function () { ChatEditor.prototype.resetValue = function () {
const editor = this; const editor = this;
editor.content.body.innerHTML = ''; editor.contentDiv.innerHTML = '';
editor.updateMirror(); editor.updateMirror();
editor.focus(); editor.focus();
editorConfig.calculateIFrameHeight()
}; };
ChatEditor.prototype.styles = function () { ChatEditor.prototype.styles = function () {
@ -1975,7 +1988,7 @@ class ChatPage extends LitElement {
html { html {
cursor: text; cursor: text;
} }
body { div {
font-size: 1rem; font-size: 1rem;
line-height: 1.38rem; line-height: 1.38rem;
font-weight: 400; font-weight: 400;
@ -1985,8 +1998,9 @@ class ChatPage extends LitElement {
white-space: break-spaces; white-space: break-spaces;
word-break: break-word; word-break: break-word;
outline: none; outline: none;
min-height: 20px;
} }
body[contentEditable=true]:empty:before { div[contentEditable=true]:empty:before {
content: attr(data-placeholder); content: attr(data-placeholder);
display: block; display: block;
color: rgb(103, 107, 113); color: rgb(103, 107, 113);
@ -1995,7 +2009,7 @@ class ChatPage extends LitElement {
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
} }
body[contentEditable=false]{ div[contentEditable=false]{
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
img.emoji { img.emoji {
@ -2011,26 +2025,26 @@ class ChatPage extends LitElement {
ChatEditor.prototype.enable = function () { ChatEditor.prototype.enable = function () {
const editor = this; const editor = this;
editor.content.body.setAttribute('contenteditable', 'true'); editor.contentDiv.setAttribute('contenteditable', 'true');
editor.focus(); editor.focus();
}; };
ChatEditor.prototype.disable = function () { ChatEditor.prototype.disable = function () {
const editor = this; const editor = this;
editor.content.body.setAttribute('contenteditable', 'false'); editor.contentDiv.setAttribute('contenteditable', 'false');
}; };
ChatEditor.prototype.state = function () { ChatEditor.prototype.state = function () {
const editor = this; const editor = this;
return editor.content.body.getAttribute('contenteditable'); return editor.contentDiv.getAttribute('contenteditable');
}; };
ChatEditor.prototype.focus = function () { ChatEditor.prototype.focus = function () {
const editor = this; const editor = this;
editor.content.body.focus(); editor.contentDiv.focus();
}; };
ChatEditor.prototype.clearSelection = function () { ChatEditor.prototype.clearSelection = function () {
@ -2089,6 +2103,7 @@ class ChatPage extends LitElement {
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i] const event = events[i]
editor.content.body.addEventListener(event, async function (e) { editor.content.body.addEventListener(event, async function (e) {
console.log({event})
if (e.type === 'click') { if (e.type === 'click') {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -2201,10 +2216,16 @@ class ChatPage extends LitElement {
editor.mirror = editorConfig.mirrorElement; editor.mirror = editorConfig.mirrorElement;
editor.content = (editor.frame.contentDocument || editor.frame.document); editor.content = (editor.frame.contentDocument || editor.frame.document);
editor.content.body.setAttribute('contenteditable', 'true');
editor.content.body.setAttribute('data-placeholder', editorConfig.placeholder); let elemDiv = document.createElement('div');
editor.content.body.setAttribute('spellcheck', 'false'); elemDiv.setAttribute('contenteditable', 'true');
elemDiv.setAttribute('spellcheck', 'false');
elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
elemDiv.style.cssText = 'width:100%';
elemDiv.id = 'testingId'
editor.content.body.appendChild(elemDiv);
console.log('body', editor.frame.contentDocument.body, 'div', editor.frame.contentDocument.body.firstChild)
editor.contentDiv = editor.frame.contentDocument.body.firstChild
editor.styles(); editor.styles();
editor.listenChanges(); editor.listenChanges();
}; };

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

@ -72,7 +72,6 @@ class ChatScroller extends LitElement {
return messageArray return messageArray
}, []) }, [])
console.log({formattedMessages})
return html` return html`
<ul id="viewElement" class="chat-list clearfix"> <ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div> <div id="upObserver"></div>
@ -248,8 +247,6 @@ class MessageTemplate extends LitElement {
} }
render() { render() {
console.log('isFirst', this.isFirstMessage);
console.log("is single message in group", this.isSingleMessageInGroup);
const hidemsg = this.hideMessages; const hidemsg = this.hideMessages;
let message = ""; let message = "";
let reactions = []; let reactions = [];
@ -277,7 +274,7 @@ class MessageTemplate extends LitElement {
let hideit = hidemsg.includes(this.messageObj.sender); let hideit = hidemsg.includes(this.messageObj.sender);
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`; levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`;
console.log({message})
if (this.messageObj.senderName) { if (this.messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -298,7 +295,6 @@ class MessageTemplate extends LitElement {
this.isImageLoaded = true; this.isImageLoaded = true;
} }
imageHTMLRes.onerror = () => { imageHTMLRes.onerror = () => {
console.log('inputRef', this.imageFetches);
if (this.imageFetches < 4) { if (this.imageFetches < 4) {
setTimeout(() => { setTimeout(() => {
this.imageFetches = this.imageFetches + 1; this.imageFetches = this.imageFetches + 1;
@ -338,8 +334,9 @@ class MessageTemplate extends LitElement {
console.error(error); console.error(error);
} }
} }
const escapedMessage = this.escapeHTML(message)
const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '<br />');
return hideit ? html`<li class="clearfix"></li>` : html` return hideit ? html`<li class="clearfix"></li>` : html`
<li <li
class="clearfix message-parent" class="clearfix message-parent"
@ -408,7 +405,7 @@ class MessageTemplate extends LitElement {
</div> </div>
` : html``} ` : html``}
<div id="messageContent" class="message"> <div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
</div> </div>
</div> </div>
<chat-menu <chat-menu
@ -445,7 +442,6 @@ class MessageTemplate extends LitElement {
</span>` </span>`
})} })}
</div> </div>
</div> </div>
</div> </div>
</div> </div>