Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 09:45:52 +00:00
Code Issues Projects Releases Wiki Activity

added features editor

Browse Source
This commit is contained in:
Phillip 2023-01-11 22:41:58 -05:00
parent 9e5f630cb2
commit 005e7bb89f
9 changed files with 141 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc.json Normal file
View File

@ -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
}
}

6
package.json
View File

@ -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"
}
}
}

1
qortal-ui-plugins/package.json
View File

@ -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",

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

@ -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) {

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

@ -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;

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

@ -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} -->

75
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -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 ) {
// parentEpml.request('showSnackBar', get("chatpage.cchange29"));
// return;
// };
// this.chatMessageSize = 0;
if(this.editor.isEmpty) return
this.getMessageSize(this.editor.getJSON())
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.chatMessageSize = 0;
this._sendMessage(props, this.editor.getJSON());
}
getMessageSize(message){
console.log({message})
try {
const messageText = message;
// Format and Sanitize Message
const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
const trimmedMessage = sanitizedMessage.trim();
const trimmedMessage = message
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
};
}

7
qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
View File

@ -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 = "";

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

@ -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 …',
}),