mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages
This commit is contained in:
Justin Ferrari
commit
5e4c5cf862
@ -61,7 +61,8 @@ class ChatPage extends LitElement {
|
||||
chatMessageSize: { type: Number},
|
||||
imageFile: {type: Object},
|
||||
isUploadingImage: {type: Boolean},
|
||||
caption: { type: String }
|
||||
caption: { type: String },
|
||||
chatEditor: {type: Object}
|
||||
}
|
||||
}
|
||||
|
||||
@ -533,7 +534,7 @@ class ChatPage extends LitElement {
|
||||
this.messagesRendered = []
|
||||
this.repliedToMessageObj = null
|
||||
this.editedMessageObj = null
|
||||
this.iframeHeight = 40
|
||||
this.iframeHeight = 42
|
||||
this.chatMessageSize = 0
|
||||
this.imageFile = null
|
||||
this.uid = new ShortUniqueId()
|
||||
@ -629,7 +630,7 @@ class ChatPage extends LitElement {
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
</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">
|
||||
${this.repliedToMessageObj && html`
|
||||
<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>
|
||||
<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>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${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"))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async firstUpdated() {
|
||||
|
||||
@ -913,7 +917,15 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
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) {
|
||||
@ -1944,7 +1956,7 @@ class ChatPage extends LitElement {
|
||||
const editor = this;
|
||||
|
||||
if (editor.content) {
|
||||
return editor.content.body.innerHTML;
|
||||
return editor.contentDiv.innerHTML;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1952,7 +1964,7 @@ class ChatPage extends LitElement {
|
||||
const editor = this;
|
||||
|
||||
if (value) {
|
||||
editor.content.body.innerHTML = value;
|
||||
editor.contentDiv.innerHTML = value;
|
||||
editor.updateMirror();
|
||||
}
|
||||
|
||||
@ -1961,9 +1973,10 @@ class ChatPage extends LitElement {
|
||||
|
||||
ChatEditor.prototype.resetValue = function () {
|
||||
const editor = this;
|
||||
editor.content.body.innerHTML = '';
|
||||
editor.contentDiv.innerHTML = '';
|
||||
editor.updateMirror();
|
||||
editor.focus();
|
||||
editorConfig.calculateIFrameHeight()
|
||||
};
|
||||
|
||||
ChatEditor.prototype.styles = function () {
|
||||
@ -1975,7 +1988,7 @@ class ChatPage extends LitElement {
|
||||
html {
|
||||
cursor: text;
|
||||
}
|
||||
body {
|
||||
div {
|
||||
font-size: 1rem;
|
||||
line-height: 1.38rem;
|
||||
font-weight: 400;
|
||||
@ -1985,8 +1998,9 @@ class ChatPage extends LitElement {
|
||||
white-space: break-spaces;
|
||||
word-break: break-word;
|
||||
outline: none;
|
||||
min-height: 20px;
|
||||
}
|
||||
body[contentEditable=true]:empty:before {
|
||||
div[contentEditable=true]:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
display: block;
|
||||
color: rgb(103, 107, 113);
|
||||
@ -1995,7 +2009,7 @@ class ChatPage extends LitElement {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body[contentEditable=false]{
|
||||
div[contentEditable=false]{
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
img.emoji {
|
||||
@ -2011,26 +2025,26 @@ class ChatPage extends LitElement {
|
||||
ChatEditor.prototype.enable = function () {
|
||||
const editor = this;
|
||||
|
||||
editor.content.body.setAttribute('contenteditable', 'true');
|
||||
editor.contentDiv.setAttribute('contenteditable', 'true');
|
||||
editor.focus();
|
||||
};
|
||||
|
||||
ChatEditor.prototype.disable = function () {
|
||||
const editor = this;
|
||||
|
||||
editor.content.body.setAttribute('contenteditable', 'false');
|
||||
editor.contentDiv.setAttribute('contenteditable', 'false');
|
||||
};
|
||||
|
||||
ChatEditor.prototype.state = function () {
|
||||
const editor = this;
|
||||
|
||||
return editor.content.body.getAttribute('contenteditable');
|
||||
return editor.contentDiv.getAttribute('contenteditable');
|
||||
};
|
||||
|
||||
ChatEditor.prototype.focus = function () {
|
||||
const editor = this;
|
||||
|
||||
editor.content.body.focus();
|
||||
editor.contentDiv.focus();
|
||||
};
|
||||
|
||||
ChatEditor.prototype.clearSelection = function () {
|
||||
@ -2089,6 +2103,7 @@ class ChatPage extends LitElement {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const event = events[i]
|
||||
editor.content.body.addEventListener(event, async function (e) {
|
||||
console.log({event})
|
||||
if (e.type === 'click') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -2201,10 +2216,16 @@ class ChatPage extends LitElement {
|
||||
editor.mirror = editorConfig.mirrorElement;
|
||||
|
||||
editor.content = (editor.frame.contentDocument || editor.frame.document);
|
||||
editor.content.body.setAttribute('contenteditable', 'true');
|
||||
editor.content.body.setAttribute('data-placeholder', editorConfig.placeholder);
|
||||
editor.content.body.setAttribute('spellcheck', 'false');
|
||||
|
||||
|
||||
let elemDiv = document.createElement('div');
|
||||
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.listenChanges();
|
||||
};
|
||||
|
||||
@ -72,7 +72,6 @@ class ChatScroller extends LitElement {
|
||||
return messageArray
|
||||
}, [])
|
||||
|
||||
console.log({formattedMessages})
|
||||
return html`
|
||||
<ul id="viewElement" class="chat-list clearfix">
|
||||
<div id="upObserver"></div>
|
||||
@ -248,8 +247,6 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('isFirst', this.isFirstMessage);
|
||||
console.log("is single message in group", this.isSingleMessageInGroup);
|
||||
const hidemsg = this.hideMessages;
|
||||
let message = "";
|
||||
let reactions = [];
|
||||
@ -277,7 +274,7 @@ class MessageTemplate extends LitElement {
|
||||
let hideit = hidemsg.includes(this.messageObj.sender);
|
||||
|
||||
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`;
|
||||
|
||||
console.log({message})
|
||||
if (this.messageObj.senderName) {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
|
||||
@ -298,7 +295,6 @@ class MessageTemplate extends LitElement {
|
||||
this.isImageLoaded = true;
|
||||
}
|
||||
imageHTMLRes.onerror = () => {
|
||||
console.log('inputRef', this.imageFetches);
|
||||
if (this.imageFetches < 4) {
|
||||
setTimeout(() => {
|
||||
this.imageFetches = this.imageFetches + 1;
|
||||
@ -338,8 +334,9 @@ class MessageTemplate extends LitElement {
|
||||
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`
|
||||
<li
|
||||
class="clearfix message-parent"
|
||||
@ -408,7 +405,7 @@ class MessageTemplate extends LitElement {
|
||||
</div>
|
||||
` : html``}
|
||||
<div id="messageContent" class="message">
|
||||
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
|
||||
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
|
||||
</div>
|
||||
</div>
|
||||
<chat-menu
|
||||
@ -445,7 +442,6 @@ class MessageTemplate extends LitElement {
|
||||
</span>`
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user