cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

An experiment in improving ssb text entry.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-21 18:24:57 -04:00
parent 53b4cbbf8c
commit d6bb9d311a
2 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&ZzbNtP8BDZn8NVjZEdmzD+D9cqZRUSEDg40zm7JQZ6o=.sha256" "previous": "&26lpldEsyITn9DFPO9NvdU534QCvF9HIER1EE3w1C74=.sha256"
} }

50
apps/ssb/tf-compose.js
View File

@ -74,7 +74,7 @@ class TfComposeElement extends LitElement {
input(event) { input(event) {
let edit = this.renderRoot.getElementById('edit'); let edit = this.renderRoot.getElementById('edit');
let preview = this.renderRoot.getElementById('preview'); let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = this.process_text(edit.value); preview.innerHTML = this.process_text(edit.innerText);
let content_warning = this.renderRoot.getElementById('content_warning'); let content_warning = this.renderRoot.getElementById('content_warning');
let content_warning_preview = this.renderRoot.getElementById( let content_warning_preview = this.renderRoot.getElementById(
'content_warning_preview' 'content_warning_preview'
@ -82,6 +82,10 @@ class TfComposeElement extends LitElement {
if (content_warning && content_warning_preview) { if (content_warning && content_warning_preview) {
content_warning_preview.innerText = content_warning.value; content_warning_preview.innerText = content_warning.value;
} }
let draft = this.get_draft();
draft.text = edit.innerText;
draft.content_warning = content_warning?.innerText;
setTimeout(() => this.notify(draft), 0);
} }
notify(draft) { notify(draft) {
@ -97,14 +101,6 @@ class TfComposeElement extends LitElement {
); );
} }
change() {
let draft = this.get_draft();
draft.text = this.renderRoot.getElementById('edit')?.value;
draft.content_warning =
this.renderRoot.getElementById('content_warning')?.value;
this.notify(draft);
}
convert_to_format(buffer, type, mime_type) { convert_to_format(buffer, type, mime_type) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
let img = new Image(); let img = new Image();
@ -171,7 +167,7 @@ class TfComposeElement extends LitElement {
size: buffer.length ?? buffer.byteLength, size: buffer.length ?? buffer.byteLength,
}; };
let edit = self.renderRoot.getElementById('edit'); let edit = self.renderRoot.getElementById('edit');
edit.value += `\n![${name}](${id})`; edit.innerText += `\n![${name}](${id})`;
self.change(); self.change();
self.input(); self.input();
} catch (e) { } catch (e) {
@ -199,7 +195,7 @@ class TfComposeElement extends LitElement {
let edit = this.renderRoot.getElementById('edit'); let edit = this.renderRoot.getElementById('edit');
let message = { let message = {
type: 'post', type: 'post',
text: edit.value, text: edit.innerText,
}; };
if (this.root || this.branch) { if (this.root || this.branch) {
message.root = this.root; message.root = this.root;
@ -227,7 +223,7 @@ class TfComposeElement extends LitElement {
} }
try { try {
await tfrpc.rpc.appendMessage(this.whoami, message).then(function () { await tfrpc.rpc.appendMessage(this.whoami, message).then(function () {
edit.value = ''; edit.innerText = '';
self.change(); self.change();
self.notify(undefined); self.notify(undefined);
self.requestUpdate(); self.requestUpdate();
@ -239,8 +235,8 @@ class TfComposeElement extends LitElement {
discard() { discard() {
let edit = this.renderRoot.getElementById('edit'); let edit = this.renderRoot.getElementById('edit');
edit.value = ''; edit.innerText = '';
this.change(); this.input();
let preview = this.renderRoot.getElementById('preview'); let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = ''; preview.innerHTML = '';
this.notify(undefined); this.notify(undefined);
@ -324,10 +320,10 @@ class TfComposeElement extends LitElement {
updated() { updated() {
super.updated(); super.updated();
let edit = this.renderRoot.getElementById('edit'); let edit = this.renderRoot.getElementById('edit');
if (this.last_updated_text !== edit.value) { if (this.last_updated_text !== edit.innerText) {
let preview = this.renderRoot.getElementById('preview'); let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = this.process_text(edit.value); preview.innerHTML = this.process_text(edit.innerText);
this.last_updated_text = edit.value; this.last_updated_text = edit.innerText;
} }
let encrypt = this.renderRoot.getElementById('encrypt_to'); let encrypt = this.renderRoot.getElementById('encrypt_to');
if (encrypt) { if (encrypt) {
@ -541,27 +537,23 @@ class TfComposeElement extends LitElement {
</button>`; </button>`;
let result = html` let result = html`
<div <div
class="w3-card-4 w3-theme-d4 w3-padding" class="w3-card-4 w3-theme-d4 w3-padding-small"
style="box-sizing: border-box" style="box-sizing: border-box"
> >
${this.render_encrypt()} ${this.render_encrypt()}
<div style="display: flex; flex-direction: row; width: 100%; gap: 4px"> <div class="w3-container w3-padding-small">
<div style="flex: 1 0 50%"> <div class="w3-half">
<p> <span
<textarea
class="w3-input w3-theme-d1 w3-border" class="w3-input w3-theme-d1 w3-border"
style="resize: vertical" style="resize: vertical; width: 100%; overflow: hidden; white-space: pre-wrap"
placeholder="Write a post here." placeholder="Write a post here."
id="edit" id="edit"
@input=${this.input} @input=${this.input}
@change=${this.change}
@paste=${this.paste} @paste=${this.paste}
> contenteditable
${draft.text}</textarea >${draft.text}</span>
>
</p>
</div> </div>
<div style="flex: 1 0 50%"> <div class="w3-half w3-padding">
${content_warning} ${content_warning}
<div id="preview"></div> <div id="preview"></div>
</div> </div>