${this.imageFile && html`
@@ -1000,20 +1021,20 @@ class ChatPage extends LitElement {
?hasGlobalEvents=${false}
placeholder=${this.chatEditorPlaceholder}
._sendMessage=${this._sendMessage}
- .setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
- .chatEditor=${this.chatEditorNewChat}
.imageFile=${this.imageFile}
.insertImage=${this.insertImage}
.editedMessageObj=${this.editedMessageObj}
?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages}
id="chatTextCaption"
+ .editor=${this.editorImage}
+ .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
>
`}
@@ -501,7 +516,8 @@ class MessageTemplate extends LitElement {
id="messageContent"
class="message"
style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}>
- ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+
+ ${unsafeHTML(messageVersion2)}
@@ -783,7 +796,6 @@ class ChatMenu extends LitElement {
return
}
this.setEditedMessageObj(this.originalMessage);
- this.focusChatEditor();
}}>
+
+ ${this.chatMessageSize >= 750 ?
+ html`
+
+ ` :
+ html``}
+
+ `
+ }
+
+ preventUserSendingImage(e) {
+ if (!this.userName) {
+ e.preventDefault();
+ parentEpml.request('showSnackBar', get("chatpage.cchange27"));
+ };
+ }
+
+ initialChat(e) {
+ 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() {
+ if (this.hasGlobalEvents) {
+ this.addGlobalEventListener();
+ }
+
+ window.addEventListener('storage', () => {
+ const checkTheme = localStorage.getItem('qortalTheme');
+ const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
+ if (checkTheme === 'dark') {
+ this.theme = 'dark';
+ chatbar.style.cssText = "color:#ffffff;"
+ } else {
+ this.theme = 'light';
+ chatbar.style.cssText = "color:#080808;"
+ }
+ })
+
+ this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
+ this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
+ this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId);
+
+ 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',
+ zIndex: 100
+
+ });
+
+ this.emojiPicker.on('emoji', selection => {
+ const emojiHtmlString = ` {
+ this.preventUserSendingImage(e)
+ }}>
+
+
+
+
+
+
+ ${this.editedMessageObj ? (
+ html`
+
+
+
+
+ ${this.isLoading === false ? html`
+ {
+ this.sendMessageFunc();
+ }}
+ >
+
+ ` :
+ html`
+
+ `
+ ) :
+ html`
+
+ ${this.isLoading === false ? html`
+ 
{
+ this.sendMessageFunc();
+ }}
+ />
+ ` :
+ html`
+
+ `
+ }
+ {
+ this.sendMessageFunc();
+ }}
+ />
+ ` :
+ html`
+
+ style="align-items: flex-end; position: relative">
+
-
+
+
${this.editedMessageObj ? (
html`
-
+
${this.isLoading === false ? html`
@@ -271,17 +446,17 @@ class ChatTextEditor extends LitElement {
}
initialChat(e) {
- 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();
- }
- }
+ // 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(){
@@ -294,24 +469,38 @@ class ChatTextEditor extends LitElement {
async firstUpdated() {
if (this.hasGlobalEvents) {
- this.addGlobalEventListener();
+ // this.addGlobalEventListener();
}
-
+ Image.configure({
+ inline: true,
+ })
+ // this.editor = new Editor({
+ // element: this.shadowRoot.querySelector('.element'),
+ // extensions: [
+ // StarterKit,
+ // Underline,
+ // Image
+ // ],
+ // content: '
`;
- this.chatEditor.insertEmoji(emojiHtmlString);
+ console.log('hello insert 6', selection)
+ this.editor.commands.insertContent(selection.emoji, {
+ parseOptions: {
+ preserveWhitespace: false
+ }
+ })
});
this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
await this.updateComplete;
- this.initChatEditor();
+ // this.initChatEditor();
}
async updated(changedProperties) {
if (changedProperties && changedProperties.has('editedMessageObj')) {
if (this.editedMessageObj) {
- this.chatEditor.insertText(this.editedMessageObj.message);
+ this.editor.commands.setContent(this.editedMessageObj.message)
this.getMessageSize(this.editedMessageObj.message);
} else {
- this.chatEditor.insertText("");
this.chatMessageSize = 0;
}
}
if (changedProperties && changedProperties.has('placeholder')) {
- const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
- captionEditor.setAttribute('data-placeholder', this.placeholder);
+ this.updatePlaceholder(this.editor, this.placeholder )
}
if (changedProperties && changedProperties.has("imageFile")) {
@@ -364,13 +556,12 @@ class ChatTextEditor extends LitElement {
}
sendMessageFunc(props) {
- if (this.chatMessageSize > 1000 ) {
- parentEpml.request('showSnackBar', get("chatpage.cchange29"));
- return;
- };
- this.chatMessageSize = 0;
- this.chatEditor.updateMirror();
- this._sendMessage(props);
+ // if (this.chatMessageSize > 1000 ) {
+ // parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+ // return;
+ // };
+ // this.chatMessageSize = 0;
+ this._sendMessage(props, this.editor.getJSON());
}
getMessageSize(message){
@@ -442,387 +633,7 @@ class ChatTextEditor extends LitElement {
resetIFrameHeight(height) {
this.iframeHeight = 42;
}
- initChatEditor() {
- const ChatEditor = function (editorConfig) {
- const ChatEditor = function () {
- const editor = this;
- editor.init();
- };
-
- ChatEditor.prototype.getValue = function () {
- const editor = this;
-
- if (editor.contentDiv) {
- 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.resetIFrameHeight()
- };
-
- ChatEditor.prototype.styles = function () {
- const editor = this;
-
- editor.styles = document.createElement('style');
- editor.styles.setAttribute('type', 'text/css');
- editor.styles.innerText = `
- html {
- cursor: text;
- }
-
- .chatbar-body {
- display: flex;
- align-items: center;
- }
-
- .chatbar-body::-webkit-scrollbar-track {
- background-color: whitesmoke;
- border-radius: 7px;
- }
-
- .chatbar-body::-webkit-scrollbar {
- width: 6px;
- border-radius: 7px;
- background-color: whitesmoke;
- }
-
- .chatbar-body::-webkit-scrollbar-thumb {
- background-color: rgb(180, 176, 176);
- border-radius: 7px;
- transition: all 0.3s ease-in-out;
- }
-
- .chatbar-body::-webkit-scrollbar-thumb:hover {
- background-color: rgb(148, 146, 146);
- cursor: pointer;
- }
-
- 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;
- width: 100%;
- }
-
- div[contentEditable=true]:empty:before {
- content: attr(data-placeholder);
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- user-select: none;
- white-space: nowrap;
- opacity: 0.7;
- }
-
- div[contentEditable=false]{
- background: rgba(0,0,0,0.1);
- width: 100%;
- }
-
- 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.getMirrorElement = function (){
- return editor.mirror
- }
-
- 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);
- })
- .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);
- })
- }
-
-
- return false;
- }
-
- if (e.type === 'contextmenu') {
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
-
- if (e.type === 'keydown') {
- await new Promise((res, rej) => {
- setTimeout(() => {
- 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) {
-
-
- if (editor.state() === 'false') return false;
- if (editorConfig.iframeId === 'newChat') {
- editorConfig.sendFunc(
- {
- type: 'image',
- imageFile: editorConfig.imageFile,
- }
- );
- } else {
- 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;
- 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);
- editor.content.body.classList.add("chatbar-body");
-
- let elemDiv = document.createElement('div');
- elemDiv.setAttribute('contenteditable', 'true');
- elemDiv.setAttribute('spellcheck', 'false');
- elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
- elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`;
- elemDiv.id = 'chatbarId';
- 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.sendMessageFunc,
- emojiPicker: this.emojiPicker,
- escape: escape,
- unescape: unescape,
- placeholder: this.placeholder,
- imageFile: this.imageFile,
- requestUpdate: this.requestUpdate,
- insertImage: this.insertImage,
- chatMessageSize: this.chatMessageSize,
- addGlobalEventListener: this.addGlobalEventListener,
- removeGlobalEventListener: this.removeGlobalEventListener,
- iframeId: this.iframeId,
- theme: this.theme,
- resetIFrameHeight: this.resetIFrameHeight
- };
- const newChat = new ChatEditor(editorConfig);
- this.setChatEditor(newChat);
- }
+
}
window.customElements.define("chat-text-editor", ChatTextEditor)
diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
index 18cec93b..86e43929 100644
--- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
+++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
@@ -22,6 +22,10 @@ import '@material/mwc-dialog'
import '@material/mwc-icon'
import '@material/mwc-snackbar'
import '@vaadin/grid'
+import StarterKit from '@tiptap/starter-kit'
+import Underline from '@tiptap/extension-underline';
+import Placeholder from '@tiptap/extension-placeholder'
+import { Editor, Extension } from '@tiptap/core'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@@ -47,7 +51,8 @@ class Chat extends LitElement {
openPrivateMessage: { type: Boolean },
userFound: { type: Array},
userFoundModalOpen: { type: Boolean },
- userSelected: { type: Object }
+ userSelected: { type: Object },
+ editor: {type: Object}
}
}
@@ -94,6 +99,66 @@ class Chat extends LitElement {
this.activeChatHeadUrl = url
}
+ resetChatEditor(){
+
+ this.editor.commands.setContent('')
+
+ }
+ async getUpdateCompleteTextEditor() {
+ await super.getUpdateComplete();
+ const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-text-editor'));
+ await Promise.all(marginElements.map(el => el.updateComplete));
+ const marginElements2 = Array.from(this.shadowRoot.querySelectorAll('wrapper-modal'));
+ await Promise.all(marginElements2.map(el => el.updateComplete));
+ return true;
+ }
+
+ async connectedCallback() {
+ super.connectedCallback();
+ await this.getUpdateCompleteTextEditor();
+
+ const elementChatId = this.shadowRoot.getElementById('messageBox').shadowRoot.getElementById('privateMessage')
+ console.log({elementChatId})
+ this.editor = new Editor({
+ element: elementChatId,
+ extensions: [
+ StarterKit,
+ Underline,
+ Placeholder.configure({
+ placeholder: 'Write something …',
+ }),
+ Extension.create({
+ addKeyboardShortcuts:()=> {
+ return {
+ 'Enter': ()=> {
+ const chatTextEditor = this.shadowRoot.getElementById('messageBox')
+ chatTextEditor.sendMessageFunc({
+ })
+ return true
+ }
+ }
+ }})
+ ]
+ })
+
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ this.editor.destroy()
+
+ }
+
+ updatePlaceholder(editor, text){
+ editor.extensionManager.extensions.forEach((extension) => {
+ if (extension.name === "placeholder") {
+
+ extension.options["placeholder"] = text
+ editor.commands.focus('end')
+ }
+ })
+ }
+
render() {
return html`
Hello World!
', + // }) + window.addEventListener('storage', () => { const checkTheme = localStorage.getItem('qortalTheme'); - const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId'); + const chatbar = this.shadowRoot.querySelector('.element') if (checkTheme === 'dark') { this.theme = 'dark'; chatbar.style.cssText = "color:#ffffff;" + } else { this.theme = 'light'; chatbar.style.cssText = "color:#080808;" + } }) this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); - this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); + this.chatMessageInput = this.shadowRoot.querySelector('.element') this.emojiPicker = new EmojiPicker({ style: "twemoji", @@ -327,29 +516,32 @@ class ChatTextEditor extends LitElement { this.emojiPicker.on('emoji', selection => { const emojiHtmlString = `
@@ -127,13 +192,13 @@ class Chat extends LitElement {
{
- this.chatEditor.resetValue();
+ this.resetChatEditor();
this.openPrivateMessage = false;
this.shadowRoot.getElementById('sendTo').value = "";
this.userFoundModalOpen = false;
this.userFound = [];
} }
- style=${this.openPrivateMessage ? "display: block" : "display: none"}>
+ style=${this.openPrivateMessage ? "visibility:visible;z-index:50" : "visibility: hidden;z-index:-100;position: relative"}>
@@ -177,21 +242,21 @@ class Chat extends LitElement {
iframeId="privateMessage"
?hasGlobalEvents=${false}
placeholder="${translate("chatpage.cchange8")}"
- .setChatEditor=${(editor)=> this.setChatEditor(editor)}
- .chatEditor=${this.chatEditor}
.imageFile=${this.imageFile}
._sendMessage=${this._sendMessage}
.insertImage=${this.insertImage}
?isLoading=${this.isLoading}
.isLoadingMessages=${false}
id="messageBox"
+ .editor=${this.editor}
+ .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
>