collections -> wiki

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4599 ed5197a5-7fde-0310-b194-c3ffbd925b24
2023-11-02 01:20:15 +00:00
parent da1d686705
commit bf5236e68b
10 changed files with 0 additions and 0 deletions
--- a/apps/wiki/tf-wiki-doc.js
+++ b/apps/wiki/tf-wiki-doc.js
@ -0,0 +1,91 @@
+import {LitElement, html, unsafeHTML} 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},
+			is_editing: {type: Boolean},
+		};
+	}
+
+	constructor() {
+		super();
+	}
+
+	markdown(md) {
+		var reader = new commonmark.Parser({safe: true});
+		var writer = new commonmark.HtmlRenderer();
+		var parsed = reader.parse(md || '');
+		return writer.render(parsed);
+	}
+
+	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;
+	}
+
+	on_discard(event) {
+		this.blob = this.blob_original;
+		this.is_editing = false;
+	}
+
+	async on_save_draft() {
+		let id = await tfrpc.rpc.store_blob(this.blob);
+		this.dispatchEvent(new CustomEvent('publish', {
+			bubbles: true,
+			detail: {
+				id: id,
+				draft: true,
+			},
+		}));
+		this.is_editing = false;
+	}
+
+	async on_publish() {
+		let id = await tfrpc.rpc.store_blob(this.blob);
+		this.dispatchEvent(new CustomEvent('publish', {
+			bubbles: true,
+			detail: {
+				id: id,
+			},
+		}));
+		this.is_editing = false;
+	}
+
+	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();
+		}
+		let self = this;
+		return html`
+			<div style="display: inline-flex; flex-direction: row">
+				<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
+				<button ?disabled=${this.blob == this.blob_original} @click=${this.on_save_draft}>Save Draft</button>
+				<button ?disabled=${this.blob == this.blob_original && !this.value?.draft} @click=${this.on_publish}>Publish</button>
+				<button ?disabled=${!this.is_editing} @click=${this.on_discard}>Discard</button>
+			</div>
+			<div style="display: flex; flex-direction: row">
+				<textarea
+					?hidden=${!this.is_editing}
+					style="flex: 1 1; min-height: 10em"
+					@input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
+				<div style="flex: 1 1">${unsafeHTML(this.markdown(this.blob))}</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define('tf-wiki-doc', TfWikiDocElement);