From d6bb9d311a28e2871b359821d5c1176b32e0b150 Mon Sep 17 00:00:00 2001 From: Cory McWilliams Date: Sun, 21 Apr 2024 18:24:57 -0400 Subject: [PATCH] An experiment in improving ssb text entry. --- apps/ssb.json | 2 +- apps/ssb/tf-compose.js | 50 ++++++++++++++++++------------------------ 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/apps/ssb.json b/apps/ssb.json index 07c4744b..7e2cfd15 100644 --- a/apps/ssb.json +++ b/apps/ssb.json @@ -1,5 +1,5 @@ { "type": "tildefriends-app", "emoji": "🐌", - "previous": "&ZzbNtP8BDZn8NVjZEdmzD+D9cqZRUSEDg40zm7JQZ6o=.sha256" + "previous": "&26lpldEsyITn9DFPO9NvdU534QCvF9HIER1EE3w1C74=.sha256" } diff --git a/apps/ssb/tf-compose.js b/apps/ssb/tf-compose.js index ef91f46f..ee95b6cc 100644 --- a/apps/ssb/tf-compose.js +++ b/apps/ssb/tf-compose.js @@ -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 { `; let result = html`
${this.render_encrypt()} -
-
-

- -

+ contenteditable + >${draft.text}
-
+
${content_warning}