Update lit element. Better drafts. Compose content warnings.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4157 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssb.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&XKgdRySJuiZeZvchNFGjVWn0XOVhQFmG7/HTWYQ8s68=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&lA9iFp1YbqSndxXZuwtgmrj7NDMkN71nJITbtjWL3VA=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&F0fyawIO410YFidrzFjlHeY++sZy6ledf6CAXB+45U4=.sha256","tf-message.js":"&HToh+7UCoanBzlr/TEsy/JG4OS2IBU1tMuzjuNmUkAo=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&7HZLHf5NB5hE6FW0hiXNvM17ekGBn5BBle1bvnjVjyo=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&tOkUocccQWBzkNzSEf9VMltkTSHcUALYSPYVWmJMoBc=.sha256","tf-styles.js":"&LFeL/vWgrv4N8q/mBrQAnhbaOI+dXNJYvH9bn1bXSqQ=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&fY+thANurOKU2/RhDt411ZtkxW0nV24+hLEf00Z1sTY=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&Zn+vxLUqVJbo/q6RcW8ezvbdilzllvXhZRyXk8kYwL0=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&fudY0YdvcMjVCSZ0oiCqUt0+bVT0a06j5TcjWaCDO8E=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&FjJo4WtPgPmzEeF6Uhkhzv1FA7tyYfYSRuQz5zwc4fU=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&H9HlMb6gIKYsWSNd+Kp0HwwpPwnlagEgi8B583aOEQQ=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&F0fyawIO410YFidrzFjlHeY++sZy6ledf6CAXB+45U4=.sha256","tf-message.js":"&WYh0KTqqtlZF7ahldWokUt1yLdlThO5j1g2xlpfqI3U=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&AA04w0u0erTaBbJdMmnm1mukslXzCqozpv6UQPLZszE=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&tOkUocccQWBzkNzSEf9VMltkTSHcUALYSPYVWmJMoBc=.sha256","tf-styles.js":"&2Za+CmlZKGhUnWvGQdZBe8Plxv59WZ3nX5u5rbfwwkY=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&fY+thANurOKU2/RhDt411ZtkxW0nV24+hLEf00Z1sTY=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&Zn+vxLUqVJbo/q6RcW8ezvbdilzllvXhZRyXk8kYwL0=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&fudY0YdvcMjVCSZ0oiCqUt0+bVT0a06j5TcjWaCDO8E=.sha256"}}

apps/cory/ssb/tf-compose.js

@@ -11,7 +11,6 @@ class TfComposeElement extends LitElement {
 			users: {type: Object},
 			root: {type: String},
 			branch: {type: String},
-			mentions: {type: Object},
 			apps: {type: Object},
 			drafts: {type: Object},
 		}
@@ -24,7 +23,6 @@ class TfComposeElement extends LitElement {
 		this.users = {};
 		this.root = undefined;
 		this.branch = undefined;
-		this.mentions = {};
 		this.apps = undefined;
 		this.drafts = {};
 	}
@@ -34,6 +32,8 @@ class TfComposeElement extends LitElement {
 			return '';
 		}
 		/* Update mentions. */
+		let draft = this.get_draft();
+		let updated = false;
 		for (let match of text.matchAll(/\[([^\[]+)]\(([@&%][^\)]+)/g)) {
 			let name = match[1];
 			let link = match[2];
@@ -50,14 +50,19 @@ class TfComposeElement extends LitElement {
 					break;
 				}
 			}
-			if (!this.mentions[link]) {
+			if (!draft.mentions) {
-				this.mentions[link] = {
+				draft.mentions = {};
+			}
+			if (!draft.mentions[link]) {
+				draft.mentions[link] = {
 					link: link,
 				}
 			}
-			this.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
+			draft.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
-			this.mentions = Object.assign({}, this.mentions);
+			updated = true;
-			console.log(this.mentions);
+		}
+		if (updated) {
+			this.requestUpdate();
 		}
 		return tfutils.markdown(text);
 	}
@@ -66,6 +71,11 @@ class TfComposeElement extends LitElement {
 		let edit = this.renderRoot.getElementById('edit');
 		let preview = this.renderRoot.getElementById('preview');
 		preview.innerHTML = this.process_text(edit.value);
+		let content_warning = this.renderRoot.getElementById('content_warning');
+		let content_warning_preview = this.renderRoot.getElementById('content_warning_preview');
+		if (content_warning && content_warning_preview) {
+			content_warning_preview.innerText = content_warning.value;
+		}
 	}
 
 	notify(draft) {
@@ -79,9 +89,11 @@ class TfComposeElement extends LitElement {
 		}));
 	}
 
-	change(event) {
+	change() {
-		let edit = this.renderRoot.getElementById('edit');
+		let draft = this.get_draft();
-		this.notify(edit.value);
+		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) {
@@ -111,6 +123,7 @@ class TfComposeElement extends LitElement {
 
 	async add_file(file) {
 		try {
+			let draft = this.get_draft();
 			let self = this;
 			let buffer = await file.arrayBuffer();
 			let type = file.type;
@@ -131,16 +144,19 @@ class TfComposeElement extends LitElement {
 			}
 			let id = await tfrpc.rpc.store_blob(buffer);
 			let name = type.split('/')[0] + ':' + file.name;
-			self.mentions[id] = {
+			if (!draft.mentions) {
+				draft.mentions = {};
+			}
+			draft.mentions[id] = {
 				link: id,
 				name: name,
 				type: type,
 				size: buffer.length ?? buffer.byteLength,
 			};
-			self.mentions = Object.assign({}, self.mentions);
 			let edit = self.renderRoot.getElementById('edit');
 			edit.value += `\n![${name}](${id})`;
 			self.change();
+			self.input();
 		} catch(e) {
 			alert(e?.message);
 		}
@@ -162,6 +178,7 @@ class TfComposeElement extends LitElement {
 
 	submit() {
 		let self = this;
+		let draft = this.get_draft();
 		let edit = this.renderRoot.getElementById('edit');
 		let message = {
 			type: 'post',
@@ -171,15 +188,18 @@ class TfComposeElement extends LitElement {
 			message.root = this.root;
 			message.branch = this.branch;
 		}
-		if (Object.values(this.mentions).length) {
+		if (Object.values(draft.mentions || {}).length) {
-			message.mentions = Object.values(this.mentions);
+			message.mentions = Object.values(draft.mentions);
+		}
+		if (draft.content_warning !== undefined) {
+			message.contentWarning = draft.content_warning;
 		}
 		console.log('Would post:', message);
 		tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
 			edit.value = '';
-			self.mentions = {};
 			self.change();
 			self.notify(undefined);
+			self.requestUpdate();
 		}).catch(function(error) {
 			alert(error.message);
 		});
@@ -216,9 +236,21 @@ class TfComposeElement extends LitElement {
 		tribute.attach(this.renderRoot.getElementById('edit'));
 	}
 
+	updated() {
+		super.updated();
+		let edit = this.renderRoot.getElementById('edit');
+		if (this.last_updated_text !== edit.value) {
+			let preview = this.renderRoot.getElementById('preview');
+			preview.innerHTML = this.process_text(edit.value);
+			this.last_updated_text = edit.value;
+		}
+	}
+
 	remove_mention(id) {
-		delete this.mentions[id];
+		let draft = this.get_draft();
-		this.mentions = Object.assign({}, this.mentions);
+		delete draft.mentions[id];
+		this.notify(draft);
+		this.requestUpdate();
 	}
 
 	render_mention(mention) {
@@ -251,7 +283,10 @@ class TfComposeElement extends LitElement {
 					};
 				}
 			}
-			this.mentions = Object.assign(this.mentions || {}, mentions);
+			let draft = this.get_draft();
+			draft.mentions = Object.assign(draft.mentions || {}, mentions);
+			this.requestUpdate();
+			this.notify(draft);
 			this.apps = null;
 		}
 
@@ -279,14 +314,53 @@ class TfComposeElement extends LitElement {
 		}
 	}
 
+	set_content_warning(value) {
+		let draft = this.get_draft();
+		draft.content_warning = value;
+		this.notify(draft);
+		this.requestUpdate();
+	}
+
+	render_content_warning() {
+		let self = this;
+		let draft = this.get_draft();
+		if (draft.content_warning !== undefined) {
+			return html`
+				<div>
+					<input type="checkbox" id="cw" @change=${() => self.set_content_warning(undefined)} checked></input>
+					<label for="cw">CW</label>
+					<input type="text" id="content_warning" @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
+				</div>
+			`;
+		} else {
+			return html`
+				<input type="checkbox" id="cw" @change=${() => self.set_content_warning('')}></input>
+				<label for="cw">CW</label>
+			`;
+		}
+	}
+
+	get_draft() {
+		return this.drafts[this.branch || ''] || {};
+	}
+
 	render() {
 		let self = this;
+		let draft = self.get_draft();
+		let content_warning =
+			draft.content_warning !== undefined ?
+			html`<div id="content_warning_preview" class="content_warning">${draft.content_warning}</div>` :
+			undefined;
 		let result = html`
 			<div style="display: flex; flex-direction: row; width: 100%">
-				<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${this.drafts[this.branch || '']}</textarea>
+				<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${draft.text}</textarea>
-				<div id="preview" style="flex: 1 0 50%"></div>
+				<div style="flex: 1 0 50%">
+					${content_warning}
+					<div id="preview"></div>
 				</div>
-			${Object.values(this.mentions).map(x => self.render_mention(x))}
+			</div>
+			${Object.values(draft.mentions || {}).map(x => self.render_mention(x))}
+			${this.render_content_warning()}
 			${this.render_attach_app()}
 			<input type="button" value="Submit" @click=${this.submit}></input>
 			<input type="button" value="Attach" @click=${this.attach}></input>

apps/cory/ssb/tf-message.js

@@ -300,7 +300,7 @@ class TfMessageElement extends LitElement {
 					this.render_raw() :
 					unsafeHTML(tfutils.markdown(content.text));
 				let content_warning = html`
-					<div style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
+					<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
 					`;
 				let content_html =
 					html`

apps/cory/ssb/tf-styles.js

@@ -29,4 +29,11 @@ img {
 	color: #088;
 	background-color: #fff;
 }
+
+.content_warning {
+	border: 1px solid #fff;
+	border-radius: 1em;
+	padding: 8px;
+	margin: 4px;
+}
 `;