send message: prevent insertion of formatted text; send text on CTRL+Enter / CMD+Enter

This commit is contained in:
schlagmichdoch 2023-01-14 01:43:44 +01:00
parent 57851902f9
commit 5c5fb2db0d
2 changed files with 18 additions and 16 deletions

View file

@ -152,7 +152,7 @@
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h3>Send a Message</h3> <h3>Send a Message</h3>
<div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div> <input id="textInput" class="textarea w100" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" type="submit" close>Send</button> <button class="button" type="submit" close>Send</button>
<a class="button" close>Cancel</a> <a class="button" close>Cancel</a>

View file

@ -226,19 +226,19 @@ class PeerUI {
html() { html() {
let title; let title;
let textInput; let input;
if (window.pasteMode.activated) { if (window.pasteMode.activated) {
title = `Click to send ${window.pasteMode.descriptor} directly`; title = `Click to send ${window.pasteMode.descriptor} directly`;
textInput = ''; input = '';
} else { } else {
title = 'Click to send files or right click to send a message'; title = 'Click to send files or right click to send a message';
textInput = '<input type="file" multiple>'; input = '<input type="file" multiple>';
} }
return ` return `
<label class="column center" title="${title}"> <label class="column center" title="${title}">
${textInput} ${input}
<x-icon shadow="1"> <x-icon shadow="1">
<svg class="icon"><use xlink:href="#"/></svg> <svg class="icon"><use xlink:href="#"/></svg>
</x-icon> </x-icon>
@ -757,13 +757,18 @@ class SendTextDialog extends Dialog {
Events.on('text-recipient', e => this._onRecipient(e.detail)); Events.on('text-recipient', e => this._onRecipient(e.detail));
this.$text = this.$el.querySelector('#textInput'); this.$text = this.$el.querySelector('#textInput');
const button = this.$el.querySelector('form'); const button = this.$el.querySelector('form');
button.addEventListener('submit', e => this._send(e)); button.addEventListener('submit', _ => this._send());
Events.on("keydown", e => this._onKeyDown(e)) Events.on("keydown", e => this._onKeyDown(e))
} }
async _onKeyDown(e) { async _onKeyDown(e) {
if (this.$el.attributes["show"] && e.code === "Escape") { if (this.$el.attributes["show"]) {
this.hide(); if (e.code === "Escape") {
this.hide();
}
if (e.code === "Enter" && (!e.ctrlKey && !e.metaKey)) {
e.preventDefault();
}
} }
} }
@ -775,10 +780,8 @@ class SendTextDialog extends Dialog {
const range = document.createRange(); const range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
range.selectNodeContents(this.$text); this.$text.focus();
sel.removeAllRanges(); this.$text.select();
sel.addRange(range);
} }
_handleShareTargetText() { _handleShareTargetText() {
@ -787,13 +790,12 @@ class SendTextDialog extends Dialog {
window.shareTargetText = ''; window.shareTargetText = '';
} }
_send(e) { _send() {
e.preventDefault();
Events.fire('send-text', { Events.fire('send-text', {
to: this._recipient, to: this._recipient,
text: this.$text.innerText text: this.$text.value
}); });
this.$text.innerText = ""; this.$text.value = "";
} }
} }