From d6bb9d311a28e2871b359821d5c1176b32e0b150 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
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 {
 					</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>