added features editor

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": ["eslint:recommended", "plugin:lit/recommended", "plugin:wc/recommended"],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-mixed-spaces-and-tabs": 0
+    }
+}

package.json

@@ -37,13 +37,15 @@
     "os-locale": "3.0.0"
   },
   "devDependencies": {
+    "@electron/notarize": "1.2.3",
     "electron": "22.0.0",
     "electron-builder": "23.6.0",
     "electron-packager": "17.1.1",
-    "@electron/notarize": "1.2.3",
+    "eslint-plugin-lit": "1.8.0",
+    "eslint-plugin-wc": "1.4.0",
     "shelljs": "0.8.5"
   },
   "engines": {
     "node": ">=16.17.1"
   }
-}
+}

qortal-ui-plugins/package.json

@@ -24,6 +24,7 @@
 		"@tiptap/extension-image": "2.0.0-beta.209",
 		"@tiptap/extension-placeholder": "2.0.0-beta.209",
 		"@tiptap/extension-underline": "2.0.0-beta.209",
+		"@tiptap/extension-highlight": "2.0.0-beta.209",
 		"@tiptap/html": "2.0.0-beta.209",
 		"@tiptap/starter-kit": "2.0.0-beta.209",
 		"asmcrypto.js": "2.3.2",

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -8,6 +8,7 @@ import { generateHTML } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline';
 import Placeholder from '@tiptap/extension-placeholder'
+import Highlight from '@tiptap/extension-highlight'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import { Editor, Extension } from '@tiptap/core'
 
@@ -161,7 +162,6 @@ class ChatPage extends LitElement {
         align-items: center;
         height: auto;
         padding: 5px 5px 5px 7px;
-        overflow-y: hidden;
     }
 
     .chat-text-area .typing-area .emoji-button {
@@ -305,7 +305,6 @@ class ChatPage extends LitElement {
       justify-content: center;
       min-height: 60px;
       max-height: 100%;
-      overflow: hidden;
   }
 
   .chat-text-area .typing-area {
@@ -360,6 +359,13 @@ class ChatPage extends LitElement {
     padding: 0px;
   }
 
+  .repliedTo-message p mark {
+	background-color: #ffe066;
+  border-radius: 0.25em;
+  box-decoration-break: clone;
+  padding: 0.125em 0;
+  }
+
   .reply-icon {
       width: 20px;
       color: var(--mdc-theme-primary);
@@ -863,6 +869,7 @@ class ChatPage extends LitElement {
         this.webWorker = null;
         this.webWorkerImage = null;
         this.currentEditor = '_chatEditorDOM'
+        this.initialChat = this.initialChat.bind(this)
     }
 
     _toggle(value) {
@@ -932,7 +939,8 @@ class ChatPage extends LitElement {
                                             <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
                                             ${unsafeHTML(generateHTML(this.repliedToMessageObj.message, [
                     StarterKit,
-                    Underline
+                    Underline,
+                    Highlight
                     // other extensions …
                   ]))}
                                         </div>
@@ -953,7 +961,8 @@ class ChatPage extends LitElement {
                                             <p class="senderName">${translate("chatpage.cchange25")}</p>
                                             ${unsafeHTML(generateHTML(this.editedMessageObj.message, [
                     StarterKit,
-                    Underline
+                    Underline,
+                    Highlight
                     // other extensions …
                   ]))}
                                         </div>
@@ -1249,10 +1258,14 @@ class ChatPage extends LitElement {
         const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat')
         console.log({elementChatId, elementChatImageId })
         this.editor = new Editor({
+              onUpdate: ()=> {
+                this.shadowRoot.getElementById('_chatEditorDOM').getMessageSize(this.editor.getJSON())
+              },
             element: elementChatId,
             extensions: [
               StarterKit,
               Underline,
+              Highlight,
               Placeholder.configure({
                 placeholder: 'Write something …',
               }),
@@ -1271,10 +1284,14 @@ class ChatPage extends LitElement {
           })
          
           this.editorImage = new Editor({
+            onUpdate: ()=> {
+                this.shadowRoot.getElementById('chatTextCaption').getMessageSize(this.editorImage.getJSON())
+              },
             element: elementChatImageId,
             extensions: [
               StarterKit,
               Underline,
+              Highlight,
               Placeholder.configure({
                 placeholder: 'Write something …',
               }),
@@ -1293,6 +1310,7 @@ class ChatPage extends LitElement {
                 }})
             ]
           })
+          document.addEventListener('keydown', this.initialChat);
       }
 
     disconnectedCallback() {
@@ -1302,8 +1320,29 @@ class ChatPage extends LitElement {
         this.webWorkerImage.terminate();
         this.editor.destroy()
         this.editorImage.destroy()
+        document.removeEventListener('keydown', this.initialChat);
       }
 
+      initialChat(e) {
+        console.log('hello1', this.editor)
+        if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM') {
+            console.log('hello2')
+            // WARNING: Deprecated methods from KeyBoard Event
+            if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
+                // this.chatEditor.insertText('&nbsp;');
+            } else if (inputKeyCodes.includes(e.keyCode)) {
+                console.log('hello3')
+                this.editor.commands.insertContent(e.key)
+                // this.chatEditor.insertText(e.key);
+                this.editor.commands.focus('end')
+            } else {
+               this.editor.commands.focus('end')
+            }
+        }
+
+        
+    }
+
     async userSearch() {
         const nameValue = this.shadowRoot.getElementById('sendTo').value;
             if (!nameValue) {
@@ -1543,6 +1582,15 @@ class ChatPage extends LitElement {
             if (this.openForwardOpen === true) {
             }
         }
+        if (changedProperties && changedProperties.has('isLoading')) {
+            if (this.isLoading === true && this.currentEditor === '_chatEditorDOM') {
+                this.editor.setEditable(false)
+            }
+            if (this.isLoading === false && this.currentEditor === '_chatEditorDOM') {
+                this.editor.setEditable(true)
+            }
+        }
+        
     }
 
 async getName (recipient) {

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -511,6 +511,13 @@ export const chatStyles = css`
 	padding: 0px;
   }
 
+  #messageContent p mark {
+	background-color: #ffe066;
+  border-radius: 0.25em;
+  box-decoration-break: clone;
+  padding: 0.125em 0;
+  }
+
   #messageContent > * + * {
     margin-top: 0.75em;
     outline: none;

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -21,6 +21,7 @@ import { EmojiPicker } from 'emoji-picker-js';
 import { generateHTML } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline';
+import Highlight from '@tiptap/extension-highlight'
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 let toggledMessage = {}
@@ -386,7 +387,8 @@ class MessageTemplate extends LitElement {
 
                 messageVersion2 = generateHTML(parsedMessageObj.messageText, [
                     StarterKit,
-                    Underline
+                    Underline,
+                    Highlight
                     // other extensions …
                   ])
             }
@@ -576,7 +578,8 @@ class MessageTemplate extends LitElement {
                                         <p class="replied-message">
                                         ${unsafeHTML(generateHTML(repliedToData.decodedMessage.messageText, [
                     StarterKit,
-                    Underline
+                    Underline,
+                    Highlight
                     // other extensions …
                   ]))}
                                             <!-- ${repliedToData.decodedMessage.messageText} -->

qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

@@ -44,13 +44,12 @@ class ChatTextEditor extends LitElement {
             align-items: center;
             height: auto;
             width: 100%;
-            overflow-y: hidden;
+
       }
         .chatbar-container {
             width: 100%;
             display: flex;
             height: auto;
-            overflow: hidden;
         }
 
         .chatbar-caption {
@@ -263,7 +262,7 @@ class ChatTextEditor extends LitElement {
   }
   .chatbar-buttons {
     visibility: hidden;
-    transition: all .2s;
+    transition: all 0.2s;
   }
   .chatbar-container:hover .chatbar-buttons {
     visibility: visible;
@@ -279,11 +278,35 @@ class ChatTextEditor extends LitElement {
     font-size: 18px;
     margin-block-start: 0px;
     margin-block-end: 0px;
+    overflow-wrap: anywhere;
 }
 
 .ProseMirror {
     width: 100%;
     box-sizing: border-box;
+}
+
+.ProseMirror mark {
+  background-color: #ffe066;
+  border-radius: 0.25em;
+  box-decoration-break: clone;
+  padding: 0.125em 0;
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
 }
   
 		`
@@ -308,7 +331,7 @@ class ChatTextEditor extends LitElement {
 	}
 
 	render() {
-        console.log('this.editor', this.editor)
+        console.log('this.editor', this.chatMessageSize)
         let scrollHeightBool = false;
         try {
             console.log('this.chatMessageInput', this.chatMessageInput)
@@ -319,13 +342,14 @@ class ChatTextEditor extends LitElement {
             scrollHeightBool = false;
         }
 		return html`
-          
+            
             <div 
              class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")}
              style="align-items: flex-end; position: relative">
              <div 
              class=${["chatbar-container", "chatbar-buttons"].join(" ")}
              style="align-items: center; position:absolute; top: -20px">
+            
              <button
         @click=${() => this.editor.chain().focus().toggleBold().run()}
         ?disabled=${
@@ -338,7 +362,7 @@ class ChatTextEditor extends LitElement {
         }
         class=${["chatbar-button-single",this.editor && this.editor.isActive('bold') ? 'is-active' : ''].join(" ")}
       >
-        bold
+      <span class="material-icons">&#xe238;</span>
       </button>
       <button
         @click=${() => this.editor.chain().focus().toggleItalic().run()}
@@ -351,19 +375,25 @@ class ChatTextEditor extends LitElement {
         }
         class=${["chatbar-button-single",this.editor &&  this.editor.isActive('italic') ? 'is-active' : ''].join(' ')}
       >
-        italic
+      <span class="material-icons">&#xe23f;</span>
       </button>
       <button
         @click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
         class=${["chatbar-button-single",this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
       >
-        code block
+      <span class="material-icons">&#xf84d;</span>
       </button>
       <button
         @click=${() => this.editor.chain().focus().toggleUnderline().run()}
         class=${["chatbar-button-single", this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')}
       >
-        underline
+      <span class="material-icons">&#xe249;</span>
+      </button>
+      <button
+        @click=${() => this.editor.chain().focus().toggleHighlight().run()}
+        class=${["chatbar-button-single", this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')}
+      >
+      <span class="material-icons">&#xf82b;</span>
       </button>
             </div>
                 <div 
@@ -460,7 +490,7 @@ class ChatTextEditor extends LitElement {
             if (!this.userName) {
                 e.preventDefault();
                 parentEpml.request('showSnackBar', get("chatpage.cchange27"));
-           };
+           }
 	}
 
     initialChat(e) {
@@ -574,20 +604,21 @@ class ChatTextEditor extends LitElement {
       }
 
     sendMessageFunc(props) {
-        // if (this.chatMessageSize > 1000 ) {
+        if(this.editor.isEmpty) return
-        //     parentEpml.request('showSnackBar', get("chatpage.cchange29"));
+        this.getMessageSize(this.editor.getJSON())
-        //     return;
+        if (this.chatMessageSize > 1000 ) {
-        // };
+            parentEpml.request('showSnackBar', get("chatpage.cchange29"));
-        // this.chatMessageSize = 0;
+            return;
+        }
+        this.chatMessageSize = 0;
         this._sendMessage(props, this.editor.getJSON());
     }
 
     getMessageSize(message){
+        console.log({message})
         try {
-         const messageText = message;
+
-        // Format and Sanitize Message
+        const trimmedMessage = message
-        const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
-        const trimmedMessage = sanitizedMessage.trim();
             let messageObject = {};
 
             if (this.repliedToMessageObj) {
@@ -599,7 +630,7 @@ class ChatTextEditor extends LitElement {
                     messageText: trimmedMessage,
                     images: [''],
                     repliedTo: chatReference,
-                    version: 1
+                    version: 2
                 }
             } else if (this.editedMessageObj) {
                 let message = "";
@@ -622,14 +653,14 @@ class ChatTextEditor extends LitElement {
                         identifier: '123456'
                 }],
                     repliedTo: '',
-                    version: 1
+                    version: 2
                 };
             } else {
                 messageObject = {
                       messageText: trimmedMessage,
                       images: [''],
                       repliedTo: '',
-                      version: 1
+                      version: 2
                   };
               }
 

qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js

@@ -52,13 +52,6 @@ export class UserInfo extends LitElement {
     return imageHTMLRes;
   }
 
-   updated(changedProperties) {
-    if (changedProperties && changedProperties.has('selectedHead')) {
-      if (this.selectedHead) {
-        console.log(this.selectedHead, "selected head")
-      }
-      }
-    }
 
   render() {
     let avatarImg = "";

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -119,10 +119,15 @@ class Chat extends LitElement {
         const elementChatId = this.shadowRoot.getElementById('messageBox').shadowRoot.getElementById('privateMessage')
         console.log({elementChatId})
         this.editor = new Editor({
+            onUpdate: ()=> {
+                console.log('q-chat editor', this.editor)
+                this.shadowRoot.getElementById('messageBox').getMessageSize(this.editor.getJSON())
+              },
             element: elementChatId,
             extensions: [
               StarterKit,
               Underline,
+              Highlight,
               Placeholder.configure({
                 placeholder: 'Write something …',
               }),