tildefriends/apps/collections/tf-wiki-doc.js

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';

class TfWikiDocElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			value: {type: Object},
			blob: {type: String},
			blob_original: {type: String},
			blob_for_value: {type: String},
		};
	}

	constructor() {
		super();
	}

	async load_blob() {
		this.blob = await tfrpc.rpc.get_blob(this.value?.blob);
		this.blob_original = this.blob;
	}

	on_edit(event) {
		this.blob = event.srcElement.value;
	}

	async publish() {
		let id = await tfrpc.rpc.store_blob(this.blob);
		this.dispatchEvent(new CustomEvent('publish', {
			bubbles: true,
			detail: {
				id: id,
			},
		}));
	}

	render() {
		let value = JSON.stringify(this.value);
		if (this.blob_for_value != value) {
			this.blob_for_value = value;
			this.blob = undefined;
			this.blob_original = undefined;
			this.load_blob();
		}
		return html`
			<div style="display: flex; flex-direction: row">
				<textarea
					style="flex: 1 1; min-height: 10em"
					@input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
				<div style="flex: 1 1">${this.blob}</div>
			</div>
			<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
		`;
	}
}

customElements.define('tf-wiki-doc', TfWikiDocElement);