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

94 lines
2.5 KiB
JavaScript
Raw Normal View History

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 append_message(draft) {
let id = await tfrpc.rpc.store_blob(this.blob);
let message = {
type: 'wiki-doc',
key: this.value.id,
parent: this.value.parent,
blob: id,
};
if (draft) {
message.recps = this.value.editors;
print(message);
message = await tfrpc.rpc.encrypt(this.whoami, this.value.editors, JSON.stringify(message));
}
print(message);
await tfrpc.rpc.appendMessage(this.whoami, message);
this.is_editing = false;
}
async on_save_draft() {
return this.append_message(true);
}
async on_publish() {
return this.append_message(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);