add enter disabled enabled

This commit is contained in:
Phillip 2023-01-13 00:03:40 -05:00
parent a3b326243b
commit 20b31d577c
3 changed files with 59 additions and 22 deletions

View File

@ -565,7 +565,9 @@
"cchange56": "Transaction Failed!", "cchange56": "Transaction Failed!",
"cchange57": "User Info", "cchange57": "User Info",
"cchange58": "SEND MESSAGE", "cchange58": "SEND MESSAGE",
"cchange59": "TIP USER" "cchange59": "TIP USER",
"cchange60": "Enter Enabled",
"cchange61": "Enter Disabled"
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

View File

@ -96,7 +96,8 @@ class ChatPage extends LitElement {
webWorkerImage: { type: Object }, webWorkerImage: { type: Object },
myTrimmedMeassage: { type: String }, myTrimmedMeassage: { type: String },
editor: {type: Object}, editor: {type: Object},
currentEditor: {type: String} currentEditor: {type: String},
isEnabledChatEnter: {type: Boolean}
} }
} }
@ -824,6 +825,7 @@ class ChatPage extends LitElement {
this.getOldMessage = this.getOldMessage.bind(this) this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this) this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this) this.insertImage = this.insertImage.bind(this)
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this)
this.selectedAddress = {} this.selectedAddress = {}
this.chatId = '' this.chatId = ''
@ -877,6 +879,7 @@ class ChatPage extends LitElement {
this.webWorkerImage = null; this.webWorkerImage = null;
this.currentEditor = '_chatEditorDOM' this.currentEditor = '_chatEditorDOM'
this.initialChat = this.initialChat.bind(this) this.initialChat = this.initialChat.bind(this)
this.isEnabledChatEnter = true
} }
_toggle(value) { _toggle(value) {
@ -884,6 +887,11 @@ class ChatPage extends LitElement {
this.requestUpdate() this.requestUpdate()
} }
toggleEnableChatEnter(){
localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter )
this.isEnabledChatEnter = !this.isEnabledChatEnter
}
render() { render() {
return html` return html`
<div class="main-container"> <div class="main-container">
@ -998,6 +1006,8 @@ class ChatPage extends LitElement {
.updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)} .updatePlaceholder=${(editor, value)=> this.updatePlaceholder(editor, value)}
id="_chatEditorDOM" id="_chatEditorDOM"
.repliedToMessageObj=${this.repliedToMessageObj} .repliedToMessageObj=${this.repliedToMessageObj}
.toggleEnableChatEnter=${this.toggleEnableChatEnter}
?isEnabledChatEnter=${this.isEnabledChatEnter}
> >
</chat-text-editor> </chat-text-editor>
</div> </div>
@ -1277,18 +1287,27 @@ class ChatPage extends LitElement {
placeholder: 'Write something …', placeholder: 'Write something …',
}), }),
Extension.create({ Extension.create({
name: 'shortcuts',
addKeyboardShortcuts:()=> { addKeyboardShortcuts:()=> {
return { return {
'Enter': ()=> { 'Enter': ()=> {
const chatTextEditor = this.shadowRoot.getElementById('_chatEditorDOM') if(this.isEnabledChatEnter){
chatTextEditor.sendMessageFunc({ const chatTextEditor = this.shadowRoot.getElementById('_chatEditorDOM')
}) chatTextEditor.sendMessageFunc({
return true })
return true
}
}, },
"Shift-Enter": () => "Shift-Enter": () => {
this.editor.commands.first(() => [ if(this.isEnabledChatEnter){
this.editor.commands.newlineInCode() this.editor.commands.first(() => [
]), this.editor.commands.newlineInCode()
])
}
}
} }
}}) }})
@ -1561,7 +1580,11 @@ class ChatPage extends LitElement {
}) })
parentEpml.imReady(); parentEpml.imReady();
const isEnabledChatEnter = localStorage.getItem('isEnabledChatEnter')
if(isEnabledChatEnter){
this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true
}
await this.initUpdate() await this.initUpdate()
} }

View File

@ -1,5 +1,5 @@
import { LitElement, html, css } from "lit"; import { LitElement, html, css } from "lit";
import { get } from 'lit-translate'; import { get, translate } from 'lit-translate';
import { EmojiPicker } from 'emoji-picker-js'; import { EmojiPicker } from 'emoji-picker-js';
import { Epml } from '../../../epml.js'; import { Epml } from '../../../epml.js';
@ -27,7 +27,9 @@ class ChatTextEditor extends LitElement {
theme: { theme: {
type: String, type: String,
reflect: true reflect: true
} },
toggleEnableChatEnter: {attribute: false},
isEnabledChatEnter: {type: Boolean}
} }
} }
@ -387,30 +389,40 @@ class ChatTextEditor extends LitElement {
} }
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('italic') ? 'is-active' : ''].join(' ')} class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('italic') ? 'is-active' : ''].join(' ')}
> >
<!-- <mwc-icon>format_italic</mwc-icon> -->
<span class="material-symbols-outlined">&#xe23f;</span> <span class="material-symbols-outlined">&#xe23f;</span>
</button> </button>
<button
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
<!-- <mwc-icon>code_blocks</mwc-icon> -->
<span class="material-symbols-outlined">&#xf84d;</span>
</button>
<button <button
@click=${() => this.editor.chain().focus().toggleUnderline().run()} @click=${() => this.editor.chain().focus().toggleUnderline().run()}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')} class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')}
> >
<!-- <mwc-icon>format_underlined</mwc-icon> -->
<span class="material-symbols-outlined">&#xe249;</span> <span class="material-symbols-outlined">&#xe249;</span>
</button> </button>
<button <button
@click=${() => this.editor.chain().focus().toggleHighlight().run()} @click=${() => this.editor.chain().focus().toggleHighlight().run()}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')} class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')}
> >
<!-- <mwc-icon>format_ink_highlighter</mwc-icon> -->
<span class="material-symbols-outlined">&#xf82b;</span> <span class="material-symbols-outlined">&#xf82b;</span>
</button> </button>
<button
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
<span class="material-symbols-outlined">&#xf84d;</span>
</button>
<button
@click=${()=> this.toggleEnableChatEnter() }
style="height: 26px; box-sizing: border-box;"
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
>
${this.isEnabledChatEnter ? html`
${translate("chatpage.cchange60")}
` : html`
${translate("chatpage.cchange61")}
`}
</button>
</div> </div>
<div <div
class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")} class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")}