cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 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",
"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) {
let edit = this.renderRoot.getElementById('edit');
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_preview = this.renderRoot.getElementById(
'content_warning_preview'
@ -82,6 +82,10 @@ class TfComposeElement extends LitElement {
if (content_warning && content_warning_preview) {
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) {
@ -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) {
return new Promise(function (resolve, reject) {
let img = new Image();
@ -171,7 +167,7 @@ class TfComposeElement extends LitElement {
size: buffer.length ?? buffer.byteLength,
};
let edit = self.renderRoot.getElementById('edit');
edit.value += `\n![${name}](${id})`;
edit.innerText += `\n![${name}](${id})`;
self.change();
self.input();
} catch (e) {
@ -199,7 +195,7 @@ class TfComposeElement extends LitElement {
let edit = this.renderRoot.getElementById('edit');
let message = {
type: 'post',
text: edit.value,
text: edit.innerText,
};
if (this.root || this.branch) {
message.root = this.root;
@ -227,7 +223,7 @@ class TfComposeElement extends LitElement {
}
try {
await tfrpc.rpc.appendMessage(this.whoami, message).then(function () {
edit.value = '';
edit.innerText = '';
self.change();
self.notify(undefined);
self.requestUpdate();
@ -239,8 +235,8 @@ class TfComposeElement extends LitElement {
discard() {
let edit = this.renderRoot.getElementById('edit');
edit.value = '';
this.change();
edit.innerText = '';
this.input();
let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = '';
this.notify(undefined);
@ -324,10 +320,10 @@ class TfComposeElement extends LitElement {
updated() {
super.updated();
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');
preview.innerHTML = this.process_text(edit.value);
this.last_updated_text = edit.value;
preview.innerHTML = this.process_text(edit.innerText);
this.last_updated_text = edit.innerText;
}
let encrypt = this.renderRoot.getElementById('encrypt_to');
if (encrypt) {
@ -541,27 +537,23 @@ class TfComposeElement extends LitElement {
</button>`;
let result = html`
<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"
>
${this.render_encrypt()}
<div style="display: flex; flex-direction: row; width: 100%; gap: 4px">
<div style="flex: 1 0 50%">
<p>
<textarea
<div class="w3-container w3-padding-small">
<div class="w3-half">
<span
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."
id="edit"
@input=${this.input}
@change=${this.change}
@paste=${this.paste}
>
${draft.text}</textarea
>
</p>
contenteditable
>${draft.text}</span>
</div>
<div style="flex: 1 0 50%">
<div class="w3-half w3-padding">
${content_warning}
<div id="preview"></div>
</div>