From dd6cd52cd8353f99c6d30a1d2165336b9c3d3d9e Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Sat, 12 Nov 2022 13:19:31 +0200 Subject: [PATCH 1/3] change input within component --- .../plugins/core/components/ChatPage.js | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index fdfed413..572cc80e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -507,6 +507,7 @@ class ChatPage extends LitElement { constructor() { super() + this.changeMsgInput = this.changeMsgInput.bind(this) this.getOldMessage = this.getOldMessage.bind(this) this._sendMessage = this._sendMessage.bind(this) this.insertImage = this.insertImage.bind(this) @@ -541,6 +542,7 @@ class ChatPage extends LitElement { } render() { + console.log(this.chatMessageInput, 'chatmsginput') return html`
@@ -563,6 +565,7 @@ class ChatPage extends LitElement { id="showDialogPublicKey" ?open=${this.imageFile} @closed=${() => { + this.changeMsgInput('_chatEditorDOM') this.chatEditor.enable(); this.caption = ""; this.imageFile = null; @@ -574,7 +577,10 @@ class ChatPage extends LitElement { `}
- + +
${this.isLoading === false ? html` Date: Sun, 13 Nov 2022 15:23:09 +0200 Subject: [PATCH 2/3] added resuable component --- .../plugins/core/components/ChatPage.js | 611 +---------------- .../plugins/core/components/ChatScroller.js | 25 +- .../plugins/core/components/ChatTextEditor.js | 647 ++++++++++++++++++ 3 files changed, 700 insertions(+), 583 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/ChatTextEditor.js diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 572cc80e..4dd5cf95 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -14,7 +14,7 @@ import './ChatScroller.js' import './LevelFounder.js' import './NameMenu.js' import './TimeAgo.js' -import { EmojiPicker } from 'emoji-picker-js'; +import './ChatTextEditor' import '@polymer/paper-spinner/paper-spinner-lite.js' import '@material/mwc-button' import '@material/mwc-dialog' @@ -347,47 +347,6 @@ class ChatPage extends LitElement { border-radius: 25%; } - .paperclip-icon { - color: #494949; - width: 25px; - } - - .paperclip-icon:hover { - cursor: pointer; - } - - .send-icon { - width: 30px; - margin-left: 5px; - transition: all 0.1s ease-in-out; - cursor: pointer; - } - - .send-icon:hover { - filter: brightness(1.1); - } - - .file-picker-container { - position: relative; - height: 25px; - width: 25px; - } - - .file-picker-input-container { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - z-index: 10; - opacity: 0; - overflow: hidden; - } - - input[type=file]::-webkit-file-upload-button { - cursor: pointer; - } - .dialogCustom { position: fixed; z-index: 10000; @@ -511,9 +470,9 @@ class ChatPage extends LitElement { this.getOldMessage = this.getOldMessage.bind(this) this._sendMessage = this._sendMessage.bind(this) this.insertImage = this.insertImage.bind(this) - this.getMessageSize = this.getMessageSize.bind(this) + // this.getMessageSize = this.getMessageSize.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this) - this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) + // this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) this.selectedAddress = {} this.chatId = '' this.myAddress = '' @@ -542,7 +501,6 @@ class ChatPage extends LitElement { } render() { - console.log(this.chatMessageInput, 'chatmsginput') return html`
@@ -565,7 +523,7 @@ class ChatPage extends LitElement { id="showDialogPublicKey" ?open=${this.imageFile} @closed=${() => { - this.changeMsgInput('_chatEditorDOM') + // this.changeMsgInput('_chatEditorDOM') this.chatEditor.enable(); this.caption = ""; this.imageFile = null; @@ -672,74 +630,21 @@ class ChatPage extends LitElement {
`}
-
-
- this.closeEditMessageContainer()} - > - -
- -
-
- - - - ${this.editedMessageObj ? ( - html` -
- ${this.isLoading === false ? html` - this._sendMessage()} - > - - ` : - html` - - `} -
- ` - ) : - html` -
- ${this.isLoading === false ? html` - send-icon this._sendMessage()} /> - ` : - html` - - `} -
- ` - } -
- ${this.chatMessageSize >= 750 ? - html` -
-
- ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} -
-
- ` : - html``} -
+ this.setChatEditor(editor)} + .chatEditor=${this.chatEditor} + .imageFile=${this.imageFile} + .insertImage=${this.insertImage} + .chatMessageInput=${this.chatMessageInput} + .editedMessageObj=${this.editedMessageObj} + .mirrorChatInput=${this.mirrorChatInput} + ?isLoading=${this.isLoading} + ?isLoadingMessages=${this.isLoadingMessages} + > +
@@ -772,11 +677,16 @@ class ChatPage extends LitElement { ` } + setChatEditor(editor){ + console.log({editor}) + this.chatEditor = editor + } + insertImage(file){ if(file.type.includes('image')){ this.imageFile = file - this.changeMsgInput('newChat') + // this.changeMsgInput('newChat') // this.initChatEditor(); // this.chatEditor.disable(); return @@ -787,7 +697,7 @@ class ChatPage extends LitElement { } changeMsgInput(id){ - console.log({id}) + this.chatEditor.remove() this.chatMessageInput = this.shadowRoot.getElementById(id); this.initChatEditor(); @@ -796,10 +706,7 @@ class ChatPage extends LitElement { async firstUpdated() { // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) - // this.changeLanguage(); - this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); - this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); - this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM'); + document.addEventListener('keydown', (e) => { if (!this.chatEditor.content.body.matches(':focus')) { // WARNING: Deprecated methods from KeyBoard Event @@ -814,24 +721,6 @@ class ChatPage extends LitElement { } }); - // Init EmojiPicker - this.emojiPicker = new EmojiPicker({ - style: "twemoji", - twemojiBaseUrl: '/emoji/', - showPreview: false, - showVariants: false, - showAnimation: false, - position: 'top-start', - boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' - }); - - this.emojiPicker.on('emoji', selection => { - const emojiHtmlString = `${selection.emoji}`; - this.chatEditor.insertEmoji(emojiHtmlString); - }); - - // Attach Event Handler - this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler)); window.addEventListener('storage', () => { const checkLanguage = localStorage.getItem('qortalLanguage') use(checkLanguage) @@ -872,9 +761,9 @@ class ChatPage extends LitElement { this.chatEditorPlaceholder = placeholder; this.isReceipient ? getAddressPublicKey() : this.fetchChatMessages(this._chatId); - + // Init ChatEditor - this.initChatEditor(); + // this.initChatEditor(); }, 100) parentEpml.ready().then(() => { @@ -914,27 +803,13 @@ class ChatPage extends LitElement { if (changedProperties && changedProperties.has('editedMessageObj')) { this.chatEditor.insertText(this.editedMessageObj.message) } - if (changedProperties && changedProperties.has('chatMessageSize')) { - console.log(this.chatMessageSize, "Chat Message Size"); - } + if(changedProperties && changedProperties.has("imageFile")) { this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); this.chatbarCaption.focus(); } } - calculateIFrameHeight(height) { - - setTimeout(()=> { - const editorTest = this.shadowRoot.getElementById('_chatEditorDOM').contentWindow.document.getElementById('testingId').scrollHeight - - console.log('editor', editorTest) - this.iframeHeight = editorTest + 20 - }, 50) - - - } - onCaptionChange(e) { this.caption = e; } @@ -953,7 +828,7 @@ class ChatPage extends LitElement { renderPlaceholder() { const mstring = get("chatpage.cchange8") const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`; - this.chatEditorPlaceholder = placeholder; + return placeholder; } renderChatScroller(initialMessages) { @@ -961,7 +836,6 @@ class ChatPage extends LitElement { this.setRepliedToMessageObj(val)} @@ -969,7 +843,8 @@ class ChatPage extends LitElement { .focusChatEditor=${() => this.focusChatEditor()} .sendMessage=${(val)=> this._sendMessage(val)} > - ` + + ` } async getUpdateComplete() { @@ -1095,55 +970,6 @@ class ChatPage extends LitElement { } } - getMessageSize(message){ - try { - const messageText = message; - // Format and Sanitize Message - const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); - const trimmedMessage = sanitizedMessage.trim(); - let messageObject = {}; - - if (this.repliedToMessageObj) { - let chatReference = this.repliedToMessageObj.reference; - if (this.repliedToMessageObj.chatReference) { - chatReference = this.repliedToMessageObj.chatReference; - } - messageObject = { - messageText: trimmedMessage, - images: [''], - repliedTo: chatReference, - version: 1 - } - } else if (this.editedMessageObj) { - let message = ""; - try { - const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage); - message = parsedMessageObj; - } catch (error) { - message = this.messageObj.decodedMessage - } - messageObject = { - ...message, - messageText: trimmedMessage, - } - } else { - messageObject = { - messageText: trimmedMessage, - images: [''], - repliedTo: '', - version: 1 - }; - } - - const stringified = JSON.stringify(messageObject); - const size = new Blob([stringified]).size; - this.chatMessageSize = size; - - } catch (error) { - console.error(error) - } - - } // set replied to message in chat editor @@ -1182,47 +1008,6 @@ class ChatPage extends LitElement { * @property id or index * @property sender and other info.. */ - chatMessageTemplate(messageObj) { - const hidemsg = this.hideMessages - - let avatarImg = '' - let nameMenu = '' - let levelFounder = '' - let hideit = hidemsg.includes(messageObj.sender) - - levelFounder = `` - - if (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 - const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}` - avatarImg = `` - } - - if (messageObj.sender === this.myAddress) { - nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` - } else { - nameMenu = `` - } - - if (hideit === true) { - return ` -
  • - ` - } else { - return ` -
  • -
    - ${nameMenu} - ${levelFounder} - -
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(escape(messageObj.decodedMessage))}
    -
    • - ` - } - } async renderNewMessage(newMessage) { if(newMessage.chatReference){ @@ -1505,7 +1290,9 @@ class ChatPage extends LitElement { this.isLoading = true; this.chatEditor.disable(); - const messageText = this.mirrorChatInput.value; + const textInput = this.shadowRoot.querySelector('chat-text-editor').shadowRoot.getElementById('messageBox'); + console.log({textInput}) + const messageText = textInput.value; // Format and Sanitize Message const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); const trimmedMessage = sanitizedMessage.trim(); @@ -1853,7 +1640,6 @@ class ChatPage extends LitElement { let nonce = null let chatBytesArray = null await new Promise((res, rej) => { - console.log({chatBytes}) worker.postMessage({chatBytes, path, difficulty}); worker.onmessage = e => { @@ -1951,331 +1737,6 @@ class ChatPage extends LitElement { if (!arr) { return true } return arr.length === 0 } - - - - initChatEditor() { - - const ChatEditor = function (editorConfig) { - - const ChatEditor = function () { - const editor = this; - editor.init(); - }; - - ChatEditor.prototype.getValue = function () { - const editor = this; - - if (editor.content) { - return editor.contentDiv.innerHTML; - } - }; - - ChatEditor.prototype.setValue = function (value) { - const editor = this; - - if (value) { - editor.contentDiv.innerHTML = value; - editor.updateMirror(); - } - - editor.focus(); - }; - - ChatEditor.prototype.resetValue = function () { - const editor = this; - editor.contentDiv.innerHTML = ''; - editor.updateMirror(); - editor.focus(); - editorConfig.calculateIFrameHeight() - }; - - ChatEditor.prototype.styles = function () { - const editor = this; - - editor.styles = document.createElement('style'); - editor.styles.setAttribute('type', 'text/css'); - editor.styles.innerText = ` - html { - cursor: text; - } - div { - font-size: 1rem; - line-height: 1.38rem; - font-weight: 400; - font-family: "Open Sans", helvetica, sans-serif; - padding-right: 3px; - text-align: left; - white-space: break-spaces; - word-break: break-word; - outline: none; - min-height: 20px; - } - div[contentEditable=true]:empty:before { - content: attr(data-placeholder); - display: block; - color: rgb(103, 107, 113); - text-overflow: ellipsis; - overflow: hidden; - user-select: none; - white-space: nowrap; - } - div[contentEditable=false]{ - background: rgba(0,0,0,0.1); - } - img.emoji { - width: 1.7em; - height: 1.5em; - margin-bottom: -2px; - vertical-align: bottom; - } - `; - editor.content.head.appendChild(editor.styles); - }; - - ChatEditor.prototype.enable = function () { - const editor = this; - - editor.contentDiv.setAttribute('contenteditable', 'true'); - editor.focus(); - }; - - ChatEditor.prototype.disable = function () { - const editor = this; - - editor.contentDiv.setAttribute('contenteditable', 'false'); - }; - - ChatEditor.prototype.state = function () { - const editor = this; - - return editor.contentDiv.getAttribute('contenteditable'); - }; - - ChatEditor.prototype.focus = function () { - const editor = this; - - editor.contentDiv.focus(); - }; - - ChatEditor.prototype.clearSelection = function () { - const editor = this; - - let selection = editor.content.getSelection().toString(); - if (!/^\s*$/.test(selection)) editor.content.getSelection().removeAllRanges(); - }; - - ChatEditor.prototype.insertEmoji = function (emojiImg) { - const editor = this; - - const doInsert = () => { - - if (editor.content.queryCommandSupported("InsertHTML")) { - editor.content.execCommand("insertHTML", false, emojiImg); - editor.updateMirror(); - } - }; - - editor.focus(); - return doInsert(); - }; - - ChatEditor.prototype.insertText = function (text) { - const editor = this; - - const parsedText = editorConfig.emojiPicker.parse(text); - const doPaste = () => { - - if (editor.content.queryCommandSupported("InsertHTML")) { - editor.content.execCommand("insertHTML", false, parsedText); - editor.updateMirror(); - } - }; - - editor.focus(); - return doPaste(); - }; - - ChatEditor.prototype.updateMirror = function () { - const editor = this; - - const chatInputValue = editor.getValue(); - const filteredValue = chatInputValue.replace(//g, ''); - - let unescapedValue = editorConfig.unescape(filteredValue); - editor.mirror.value = unescapedValue; - }; - - ChatEditor.prototype.listenChanges = function () { - const editor = this; - - const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] - - 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(); - } - - if (e.type === 'paste') { - e.preventDefault(); - const item_list = await navigator.clipboard.read(); - let image_type; // we will feed this later - const item = item_list.find( item => // choose the one item holding our image - item.types.some( type => { - if (type.startsWith( 'image/')) { - image_type = type; - return true; - } - }) - ); - if(item){ - const blob = item && await item.getType( image_type ); - var file = new File([blob], "name", { - type: image_type - }); - - editorConfig.insertImage(file) - } else { - navigator.clipboard.readText().then(clipboardText => { - let escapedText = editorConfig.escape(clipboardText); - editor.insertText(escapedText); - }).catch(err => { - // Fallback if everything fails... - let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); - editor.insertText(textData); - }) - } - - - return false; - } - - if (e.type === 'contextmenu') { - e.preventDefault(); - e.stopPropagation(); - return false; - } - - if (e.type === 'keydown') { - editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); - editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); - - // Handle Enter - if (e.keyCode === 13 && !e.shiftKey) { - - // Update Mirror - editor.updateMirror(); - - if (editor.state() === 'false') return false; - - editorConfig.sendFunc(); - e.preventDefault(); - return false; - } - - // Handle Commands with CTR or CMD - if (e.ctrlKey || e.metaKey) { - switch (e.keyCode) { - case 66: - case 98: e.preventDefault(); - return false; - case 73: - case 105: e.preventDefault(); - return false; - case 85: - case 117: e.preventDefault(); - return false; - } - - return false; - } - } - - if (e.type === 'blur') { - editor.clearSelection(); - } - - if (e.type === 'drop') { - e.preventDefault(); - - let droppedText = e.dataTransfer.getData('text/plain') - let escapedText = editorConfig.escape(droppedText) - - editor.insertText(escapedText); - return false; - } - - editor.updateMirror(); - }); - } - - editor.content.addEventListener('click', function (event) { - - event.preventDefault(); - editor.focus(); - }); - }; - - ChatEditor.prototype.remove = function () { - const editor = this; - editor.content.body - var old_element = editor.content.body - var new_element = old_element.cloneNode(true); - editor.content.body.parentNode.replaceChild(new_element, old_element); - while (editor.content.body.firstChild) { - editor.content.body.removeChild(editor.content.body.lastChild); - } - }; - - ChatEditor.prototype.init = function () { - const editor = this; - - editor.frame = editorConfig.editableElement; - editor.mirror = editorConfig.mirrorElement; - - editor.content = (editor.frame.contentDocument || editor.frame.document); - - 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(); - }; - - - function doInit() { - return new ChatEditor(); - } - return doInit(); - }; - - const editorConfig = { - getMessageSize: this.getMessageSize, - calculateIFrameHeight: this.calculateIFrameHeight, - mirrorElement: this.mirrorChatInput, - editableElement: this.chatMessageInput, - sendFunc: this._sendMessage, - emojiPicker: this.emojiPicker, - escape: escape, - unescape: unescape, - placeholder: this.chatEditorPlaceholder, - imageFile: this.imageFile, - requestUpdate: this.requestUpdate, - insertImage: this.insertImage, - chatMessageSize: this.chatMessageSize - }; - this.chatEditor = new ChatEditor(editorConfig); - } } window.customElements.define('chat-page', ChatPage) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index fef207de..529cf5c8 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -22,7 +22,6 @@ class ChatScroller extends LitElement { return { getNewMessage: { attribute: false }, getOldMessage: { attribute: false }, - emojiPicker: { attribute: false }, escapeHTML: { attribute: false }, initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props ) messages: { type: Array }, @@ -43,11 +42,19 @@ class ChatScroller extends LitElement { this._downObserverHandler = this._downObserverHandler.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") + this.emojiPicker = new EmojiPicker({ + style: "twemoji", + twemojiBaseUrl: '/emoji/', + showPreview: false, + showVariants: false, + showAnimation: false, + position: 'top-start', + boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' + }); } render() { - console.log({messages: this.messages}) let formattedMessages = this.messages.reduce((messageArray, message)=> { const lastGroupedMessage = messageArray[messageArray.length - 1] @@ -82,9 +89,9 @@ return repeat( (message) => message.reference, (message, indexMessage) => html` `; - 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; @@ -368,7 +376,8 @@ class MessageTemplate extends LitElement {
    ` : html``}
    - ${unsafeHTML(this.emojiPicker.parse(replacedMessage))} + + ${this.emojiPicker && unsafeHTML(this.emojiPicker.parse(replacedMessage))}
    @@ -458,7 +467,7 @@ class ChatMenu extends LitElement { focusChatEditor: { type: Function }, myAddress: { type: Object }, emojiPicker: { attribute: false }, - sendMessage: {type: Function} + sendMessage: {type: Function}, } } @@ -499,12 +508,12 @@ class ChatMenu extends LitElement { this.emojiPicker.on('emoji', selection => { this.sendMessage({ type: 'reaction', - editedMessageObj: this.originalMessage, +editedMessageObj: this.originalMessage, reaction: selection.emoji, }) - + }); } diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js new file mode 100644 index 00000000..09a482f7 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -0,0 +1,647 @@ +import { LitElement, html, css } from "lit" +import { render } from "lit/html.js" +import { escape, unescape } from 'html-escaper'; +import { EmojiPicker } from 'emoji-picker-js'; + + +class ChatTextEditor extends LitElement { + static get properties() { + return { + isLoading: { type: Boolean }, + isLoadingMessages: { type: Boolean }, + _sendMessage: {attribute: false}, + placeholder: {type: String}, + imageFile: {type: Object}, + insertImage: {attribute: false}, + iframeHeight: { type: Number }, + editedMessageObj: {type: Object}, + chatEditor: {type: Object}, + setChatEditor: {attribute: false}, + iframeId: {type: String} + } + } + + static get styles() { + return css` + :host { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: auto; + overflow-y: hidden; + width: 100%; + } + .chatbar-container { + width: 100%; + display: flex; + height: auto; + overflow: hidden; + } + + .emoji-button { + width: 45px; + height: 40px; + padding-top: 4px; + border: none; + outline: none; + background: transparent; + cursor: pointer; + max-height: 40px; + color: var(--black); + } + + .message-size-container { + display: flex; + justify-content: flex-end; + width: 100%; + } + + .message-size { + font-family: Roboto, sans-serif; + font-size: 12px; + color: black; + } + .paperclip-icon { + color: #494949; + width: 25px; + } + + .paperclip-icon:hover { + cursor: pointer; + } + + .send-icon { + width: 30px; + margin-left: 5px; + transition: all 0.1s ease-in-out; + cursor: pointer; + } + + .send-icon:hover { + filter: brightness(1.1); + } + + .file-picker-container { + position: relative; + height: 25px; + width: 25px; + } + + .file-picker-input-container { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 10; + opacity: 0; + overflow: hidden; + } + + input[type=file]::-webkit-file-upload-button { + cursor: pointer; + } + + .chatbar-container textarea { + display: none; + } + + .chatbar-container .chat-editor { + display: flex; + max-height: -webkit-fill-available; + width: 100%; + border-color: transparent; + margin: 0; + padding: 0; + border: none; + } + ` + } + + constructor() { + super() + this.isLoadingMessages = true + this.isLoading = false + this.getMessageSize = this.getMessageSize.bind(this) + this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) + this.iframeHeight = 42 + + } + + render() { + return html` +
    +
    + + +
    + +
    +
    + + + + ${this.editedMessageObj ? ( + html` +
    + ${this.isLoading === false ? html` + this._sendMessage()} + > + + ` : + html` + + `} +
    + ` + ) : + html` +
    + ${this.isLoading === false ? html` + send-icon this._sendMessage()} /> + ` : + html` + + `} +
    + ` + } +
    + ${this.chatMessageSize >= 750 ? + html` +
    +
    + ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} +
    +
    + ` : + html``} +
    + ` + } + + async firstUpdated() { + this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); + this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); + this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); + document.addEventListener('keydown', (e) => { + if (!this.chatEditor.content.body.matches(':focus')) { + // WARNING: Deprecated methods from KeyBoard Event + if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { + this.chatEditor.insertText(' '); + } else if (inputKeyCodes.includes(e.keyCode)) { + this.chatEditor.insertText(e.key); + return this.chatEditor.focus(); + } else { + return this.chatEditor.focus(); + } + } + }); + + this.emojiPicker = new EmojiPicker({ + style: "twemoji", + twemojiBaseUrl: '/emoji/', + showPreview: false, + showVariants: false, + showAnimation: false, + position: 'top-start', + boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' + }); + + this.emojiPicker.on('emoji', selection => { + const emojiHtmlString = `${selection.emoji}`; + this.chatEditor.insertEmoji(emojiHtmlString); + }); + + + this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler)); + + await this.updateComplete; + this.initChatEditor(); + } + + async updated(changedProperties) { + console.log({changedProperties}) + if (changedProperties && changedProperties.has('editedMessageObj')) { + this.chatEditor.insertText(this.editedMessageObj.message) + } + + } + + shouldUpdate(changedProperties) { + // Only update element if prop1 changed. + if(changedProperties.has('setChatEditor') && changedProperties.size === 1) return false + return true + } + + getMessageSize(message){ + try { + const messageText = message; + // Format and Sanitize Message + const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); + const trimmedMessage = sanitizedMessage.trim(); + let messageObject = {}; + + if (this.repliedToMessageObj) { + let chatReference = this.repliedToMessageObj.reference; + if (this.repliedToMessageObj.chatReference) { + chatReference = this.repliedToMessageObj.chatReference; + } + messageObject = { + messageText: trimmedMessage, + images: [''], + repliedTo: chatReference, + version: 1 + } + } else if (this.editedMessageObj) { + let message = ""; + try { + const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage); + message = parsedMessageObj; + } catch (error) { + message = this.messageObj.decodedMessage + } + messageObject = { + ...message, + messageText: trimmedMessage, + } + } else { + messageObject = { + messageText: trimmedMessage, + images: [''], + repliedTo: '', + version: 1 + }; + } + + const stringified = JSON.stringify(messageObject); + const size = new Blob([stringified]).size; + this.chatMessageSize = size; + + } catch (error) { + console.error(error) + } + + } + + calculateIFrameHeight(height) { + + setTimeout(()=> { + const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight + + + this.iframeHeight = editorTest + 20 + }, 50) + + + } + + initChatEditor() { + console.log('hello editor') + const ChatEditor = function (editorConfig) { + + const ChatEditor = function () { + const editor = this; + editor.init(); + }; + + ChatEditor.prototype.getValue = function () { + const editor = this; + + if (editor.content) { + return editor.contentDiv.innerHTML; + } + }; + + ChatEditor.prototype.setValue = function (value) { + const editor = this; + + if (value) { + editor.contentDiv.innerHTML = value; + editor.updateMirror(); + } + + editor.focus(); + }; + + ChatEditor.prototype.resetValue = function () { + const editor = this; + editor.contentDiv.innerHTML = ''; + editor.updateMirror(); + editor.focus(); + editorConfig.calculateIFrameHeight() + }; + + ChatEditor.prototype.styles = function () { + const editor = this; + + editor.styles = document.createElement('style'); + editor.styles.setAttribute('type', 'text/css'); + editor.styles.innerText = ` + html { + cursor: text; + } + div { + font-size: 1rem; + line-height: 1.38rem; + font-weight: 400; + font-family: "Open Sans", helvetica, sans-serif; + padding-right: 3px; + text-align: left; + white-space: break-spaces; + word-break: break-word; + outline: none; + min-height: 20px; + } + div[contentEditable=true]:empty:before { + content: attr(data-placeholder); + display: block; + color: rgb(103, 107, 113); + text-overflow: ellipsis; + overflow: hidden; + user-select: none; + white-space: nowrap; + } + div[contentEditable=false]{ + background: rgba(0,0,0,0.1); + } + img.emoji { + width: 1.7em; + height: 1.5em; + margin-bottom: -2px; + vertical-align: bottom; + } + `; + editor.content.head.appendChild(editor.styles); + }; + + ChatEditor.prototype.enable = function () { + const editor = this; + + editor.contentDiv.setAttribute('contenteditable', 'true'); + editor.focus(); + }; + + ChatEditor.prototype.disable = function () { + const editor = this; + + editor.contentDiv.setAttribute('contenteditable', 'false'); + }; + + ChatEditor.prototype.state = function () { + const editor = this; + + return editor.contentDiv.getAttribute('contenteditable'); + }; + + ChatEditor.prototype.focus = function () { + const editor = this; + + editor.contentDiv.focus(); + }; + + ChatEditor.prototype.clearSelection = function () { + const editor = this; + + let selection = editor.content.getSelection().toString(); + if (!/^\s*$/.test(selection)) editor.content.getSelection().removeAllRanges(); + }; + + ChatEditor.prototype.insertEmoji = function (emojiImg) { + const editor = this; + + const doInsert = () => { + + if (editor.content.queryCommandSupported("InsertHTML")) { + editor.content.execCommand("insertHTML", false, emojiImg); + editor.updateMirror(); + } + }; + + editor.focus(); + return doInsert(); + }; + + ChatEditor.prototype.insertText = function (text) { + const editor = this; + + const parsedText = editorConfig.emojiPicker.parse(text); + const doPaste = () => { + + if (editor.content.queryCommandSupported("InsertHTML")) { + editor.content.execCommand("insertHTML", false, parsedText); + editor.updateMirror(); + } + }; + + editor.focus(); + return doPaste(); + }; + + ChatEditor.prototype.updateMirror = function () { + const editor = this; + + const chatInputValue = editor.getValue(); + const filteredValue = chatInputValue.replace(//g, ''); + + let unescapedValue = editorConfig.unescape(filteredValue); + editor.mirror.value = unescapedValue; + }; + + ChatEditor.prototype.listenChanges = function () { + const editor = this; + + const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] + + for (let i = 0; i < events.length; i++) { + const event = events[i] + editor.content.body.addEventListener(event, async function (e) { + + if (e.type === 'click') { + e.preventDefault(); + e.stopPropagation(); + } + + if (e.type === 'paste') { + e.preventDefault(); + const item_list = await navigator.clipboard.read(); + let image_type; // we will feed this later + const item = item_list.find( item => // choose the one item holding our image + item.types.some( type => { + if (type.startsWith( 'image/')) { + image_type = type; + return true; + } + }) + ); + if(item){ + const blob = item && await item.getType( image_type ); + var file = new File([blob], "name", { + type: image_type + }); + + editorConfig.insertImage(file) + } else { + navigator.clipboard.readText().then(clipboardText => { + let escapedText = editorConfig.escape(clipboardText); + editor.insertText(escapedText); + }).catch(err => { + // Fallback if everything fails... + let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); + editor.insertText(textData); + }) + } + + + return false; + } + + if (e.type === 'contextmenu') { + e.preventDefault(); + e.stopPropagation(); + return false; + } + + if (e.type === 'keydown') { + editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); + editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); + + // Handle Enter + if (e.keyCode === 13 && !e.shiftKey) { + + // Update Mirror + editor.updateMirror(); + + if (editor.state() === 'false') return false; + + editorConfig.sendFunc(); + e.preventDefault(); + return false; + } + + // Handle Commands with CTR or CMD + if (e.ctrlKey || e.metaKey) { + switch (e.keyCode) { + case 66: + case 98: e.preventDefault(); + return false; + case 73: + case 105: e.preventDefault(); + return false; + case 85: + case 117: e.preventDefault(); + return false; + } + + return false; + } + } + + if (e.type === 'blur') { + editor.clearSelection(); + } + + if (e.type === 'drop') { + e.preventDefault(); + + let droppedText = e.dataTransfer.getData('text/plain') + let escapedText = editorConfig.escape(droppedText) + + editor.insertText(escapedText); + return false; + } + + editor.updateMirror(); + }); + } + + editor.content.addEventListener('click', function (event) { + + event.preventDefault(); + editor.focus(); + }); + }; + + ChatEditor.prototype.remove = function () { + const editor = this; + editor.content.body + var old_element = editor.content.body + var new_element = old_element.cloneNode(true); + editor.content.body.parentNode.replaceChild(new_element, old_element); + while (editor.content.body.firstChild) { + editor.content.body.removeChild(editor.content.body.lastChild); + } + }; + + ChatEditor.prototype.init = function () { + const editor = this; + + editor.frame = editorConfig.editableElement; + editor.mirror = editorConfig.mirrorElement; + + editor.content = (editor.frame.contentDocument || editor.frame.document); + + 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); + editor.contentDiv = editor.frame.contentDocument.body.firstChild + editor.styles(); + editor.listenChanges(); + }; + + + function doInit() { + return new ChatEditor(); + } + return doInit(); + }; + + const editorConfig = { + getMessageSize: this.getMessageSize, + calculateIFrameHeight: this.calculateIFrameHeight, + mirrorElement: this.mirrorChatInput, + editableElement: this.chatMessageInput, + sendFunc: this._sendMessage, + emojiPicker: this.emojiPicker, + escape: escape, + unescape: unescape, + placeholder: this.placeholder, + imageFile: this.imageFile, + requestUpdate: this.requestUpdate, + insertImage: this.insertImage, + chatMessageSize: this.chatMessageSize + }; + console.log('after') + const newChat = new ChatEditor(editorConfig) + console.log({newChat}) + this.setChatEditor(newChat) + } +} + +window.customElements.define("chat-text-editor", ChatTextEditor) From 311e902bdcfa43d4600d5c202567216758ec18a8 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Wed, 16 Nov 2022 19:12:22 +0200 Subject: [PATCH 3/3] fix problems --- .../plugins/core/components/ChatPage.js | 125 ++++++++++-------- .../plugins/core/components/ChatTextEditor.js | 84 +++++++++--- 2 files changed, 134 insertions(+), 75 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 4dd5cf95..1aa761af 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -62,7 +62,8 @@ class ChatPage extends LitElement { imageFile: {type: Object}, isUploadingImage: {type: Boolean}, caption: { type: String }, - chatEditor: {type: Object} + chatEditor: {type: Object}, + chatEditorNewChat: {type: Object} } } @@ -72,6 +73,7 @@ class ChatPage extends LitElement { /* Styling mdc dialog native props */ --mdc-dialog-min-width: 300px; --mdc-dialog-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; + --mdc-dialog-z-index: 5 } html { @@ -230,6 +232,9 @@ class ChatPage extends LitElement { height: auto; overflow: hidden; justify-content: center; + background: white; + padding: 5px; + border-radius: 1px; } .chatbar-caption { @@ -520,13 +525,14 @@ class ChatPage extends LitElement { ` : this.renderChatScroller(this._initialMessages)} { - // this.changeMsgInput('_chatEditorDOM') - this.chatEditor.enable(); - this.caption = ""; this.imageFile = null; + this.chatEditor.enable() + }}>
    @@ -535,28 +541,26 @@ class ChatPage extends LitElement { `}
    - + --> -
    - ${this.isLoading === false ? html` - send-icon { - this._sendMessage({ - type: 'image', - imageFile: this.imageFile, - caption: this.caption, - }) - }} /> - ` : - html` - - `} -
    +
    ${this.chatMessageSize >= 750 ? html` @@ -585,7 +589,6 @@ class ChatPage extends LitElement { this._sendMessage({ type: 'image', imageFile: this.imageFile, - caption: this.caption, }) }} > @@ -631,6 +634,7 @@ class ChatPage extends LitElement { `}
    { - if (!this.chatEditor.content.body.matches(':focus')) { - // WARNING: Deprecated methods from KeyBoard Event - if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { - this.chatEditor.insertText(' '); - } else if (inputKeyCodes.includes(e.keyCode)) { - this.chatEditor.insertText(e.key); - return this.chatEditor.focus(); - } else { - return this.chatEditor.focus(); - } - } - }); + // document.addEventListener('keydown', (e) => { + // if (!this.chatEditor.content.body.matches(':focus')) { + // // WARNING: Deprecated methods from KeyBoard Event + // if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { + // this.chatEditor.insertText(' '); + // } else if (inputKeyCodes.includes(e.keyCode)) { + // this.chatEditor.insertText(e.key); + // return this.chatEditor.focus(); + // } else { + // return this.chatEditor.focus(); + // } + // } + // }); window.addEventListener('storage', () => { const checkLanguage = localStorage.getItem('qortalLanguage') @@ -793,21 +802,15 @@ class ChatPage extends LitElement { async updated(changedProperties) { - if (changedProperties.has('messagesRendered')) { - const chatReference1 = this.isReceipient ? 'direct' : 'group'; - const chatReference2 = this._chatId - if (chatReference1 && chatReference2) { - await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered); - } - } + if (changedProperties && changedProperties.has('editedMessageObj')) { this.chatEditor.insertText(this.editedMessageObj.message) } - if(changedProperties && changedProperties.has("imageFile")) { - this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); - this.chatbarCaption.focus(); - } + // if(changedProperties && changedProperties.has("imageFile")) { + // this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); + // this.chatbarCaption.focus(); + // } } onCaptionChange(e) { @@ -1280,6 +1283,7 @@ class ChatPage extends LitElement { } async _sendMessage(outSideMsg) { + // have params to determine if it's a reply or not // have variable to determine if it's a response, holds signature in constructor // need original message signature @@ -1290,9 +1294,8 @@ class ChatPage extends LitElement { this.isLoading = true; this.chatEditor.disable(); - const textInput = this.shadowRoot.querySelector('chat-text-editor').shadowRoot.getElementById('messageBox'); - console.log({textInput}) - const messageText = textInput.value; + this.chatEditorNewChat.disable() + const messageText = this.chatEditor.mirror.value; // Format and Sanitize Message const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); const trimmedMessage = sanitizedMessage.trim(); @@ -1378,6 +1381,7 @@ class ChatPage extends LitElement { console.error(error) this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return } typeMessage = 'edit'; @@ -1411,18 +1415,20 @@ class ChatPage extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange27")); this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return; } + const image = this.imageFile const id = this.uid(); const identifier = `qchat_${id}`; let compressedFile = ''; await new Promise(resolve => { - new Compressor( outSideMsg.imageFile, { + new Compressor( image, { quality: .6, maxWidth: 500, success(result){ const file = new File([result], "name", { - type: outSideMsg.imageFile.type + type: image.type }); compressedFile = file resolve() @@ -1438,6 +1444,7 @@ class ChatPage extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange26")); this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return; } @@ -1459,10 +1466,15 @@ class ChatPage extends LitElement { console.error(error) this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return } + const messageTextWithImage = this.chatEditorNewChat.mirror.value; + // Format and Sanitize Message + const sanitizedMessageWithImage = messageTextWithImage.replace(/ /gi, ' ').replace(//gi, '\n'); + const trimmedMessageWithImage = sanitizedMessageWithImage.trim(); const messageObject = { - messageText: outSideMsg.caption, + messageText: trimmedMessageWithImage, images: [{ service: "IMAGE", name: userName, @@ -1529,9 +1541,11 @@ class ChatPage extends LitElement { } else if (/^\s*$/.test(trimmedMessage)) { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() } else if (this.chatMessageSize >= 1000) { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() let err1string = get("chatpage.cchange29"); parentEpml.request('showSnackBar', `${err1string}`); } else if (this.repliedToMessageObj) { @@ -1675,6 +1689,7 @@ class ChatPage extends LitElement { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() this.closeEditMessageContainer() this.closeRepliedToContainer() }; diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 09a482f7..3641ed6d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit" import { render } from "lit/html.js" import { escape, unescape } from 'html-escaper'; import { EmojiPicker } from 'emoji-picker-js'; +import { inputKeyCodes } from '../../utils/keyCodes.js' class ChatTextEditor extends LitElement { @@ -17,7 +18,8 @@ class ChatTextEditor extends LitElement { editedMessageObj: {type: Object}, chatEditor: {type: Object}, setChatEditor: {attribute: false}, - iframeId: {type: String} + iframeId: {type: String}, + hasGlobalEvents: {type: Boolean} } } @@ -126,6 +128,9 @@ class ChatTextEditor extends LitElement { this.isLoading = false this.getMessageSize = this.getMessageSize.bind(this) this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) + this.addGlobalEventListener = this.addGlobalEventListener.bind(this) + this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) + this.initialChat = this.initialChat.bind(this) this.iframeHeight = 42 } @@ -202,23 +207,40 @@ class ChatTextEditor extends LitElement { ` } + initialChat(e) { + console.log('hello initial', this.chatEditor) + if (!this.chatEditor?.contentDiv.matches(':focus')) { + // WARNING: Deprecated methods from KeyBoard Event + if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { + this.chatEditor.insertText(' '); + } else if (inputKeyCodes.includes(e.keyCode)) { + this.chatEditor.insertText(e.key); + return this.chatEditor.focus(); + } else { + return this.chatEditor.focus(); + } + } + } + + addGlobalEventListener(){ + document.addEventListener('keydown', this.initialChat); + } + + removeGlobalEventListener(){ + document.removeEventListener('keydown', this.initialChat); + } + async firstUpdated() { + console.log('this.hasGlobalEvents', this.hasGlobalEvents) + if(this.hasGlobalEvents){ + this.addGlobalEventListener() + } + this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); - document.addEventListener('keydown', (e) => { - if (!this.chatEditor.content.body.matches(':focus')) { - // WARNING: Deprecated methods from KeyBoard Event - if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { - this.chatEditor.insertText(' '); - } else if (inputKeyCodes.includes(e.keyCode)) { - this.chatEditor.insertText(e.key); - return this.chatEditor.focus(); - } else { - return this.chatEditor.focus(); - } - } - }); + console.log('test', this.chatMessageInput ) + this.emojiPicker = new EmojiPicker({ style: "twemoji", @@ -227,10 +249,13 @@ class ChatTextEditor extends LitElement { showVariants: false, showAnimation: false, position: 'top-start', - boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' + boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px', + zIndex: 100 + }); this.emojiPicker.on('emoji', selection => { + console.log('hello selection') const emojiHtmlString = `${selection.emoji}`; this.chatEditor.insertEmoji(emojiHtmlString); }); @@ -330,7 +355,7 @@ class ChatTextEditor extends LitElement { ChatEditor.prototype.getValue = function () { const editor = this; - if (editor.content) { + if (editor.contentDiv) { return editor.contentDiv.innerHTML; } }; @@ -404,6 +429,10 @@ class ChatTextEditor extends LitElement { editor.focus(); }; + ChatEditor.prototype.getMirrorElement = function (){ + return editor.mirror + } + ChatEditor.prototype.disable = function () { const editor = this; @@ -467,10 +496,12 @@ class ChatTextEditor extends LitElement { const filteredValue = chatInputValue.replace(//g, ''); let unescapedValue = editorConfig.unescape(filteredValue); + console.log({unescapedValue}) editor.mirror.value = unescapedValue; }; ChatEditor.prototype.listenChanges = function () { + const editor = this; const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] @@ -535,8 +566,17 @@ class ChatTextEditor extends LitElement { editor.updateMirror(); if (editor.state() === 'false') return false; - - editorConfig.sendFunc(); + if(editorConfig.iframeId === 'newChat'){ + editorConfig.sendFunc( + { + type: 'image', + imageFile: editorConfig.imageFile, + } + ); + } else { + editorConfig.sendFunc(); + } + e.preventDefault(); return false; } @@ -586,13 +626,13 @@ class ChatTextEditor extends LitElement { ChatEditor.prototype.remove = function () { const editor = this; - editor.content.body var old_element = editor.content.body var new_element = old_element.cloneNode(true); editor.content.body.parentNode.replaceChild(new_element, old_element); while (editor.content.body.firstChild) { editor.content.body.removeChild(editor.content.body.lastChild); } + }; ChatEditor.prototype.init = function () { @@ -613,6 +653,7 @@ editor.content.body.appendChild(elemDiv); editor.contentDiv = editor.frame.contentDocument.body.firstChild editor.styles(); editor.listenChanges(); + }; @@ -635,7 +676,10 @@ editor.content.body.appendChild(elemDiv); imageFile: this.imageFile, requestUpdate: this.requestUpdate, insertImage: this.insertImage, - chatMessageSize: this.chatMessageSize + chatMessageSize: this.chatMessageSize, + addGlobalEventListener: this.addGlobalEventListener, + removeGlobalEventListener: this.removeGlobalEventListener, + iframeId: this.iframeId }; console.log('after') const newChat = new ChatEditor(editorConfig)