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

262 lines
7.7 KiB
JavaScript
Raw Normal View History

import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import * as commonmark from './commonmark.min.js';
class TfWikiDocElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
wiki: {type: Object},
value: {type: Object},
blob: {type: String},
blob_original: {type: String},
blob_for_value: {type: String},
is_editing: {type: Boolean},
};
}
constructor() {
super();
}
markdown(md) {
let reader = new commonmark.Parser({safe: true});
let writer = new commonmark.HtmlRenderer();
let parsed = reader.parse(md || '');
let walker = parsed.walker();
let event;
while ((event = walker.next())) {
let node = event.node;
if (event.entering) {
if (node.type === 'link') {
if (node.destination.indexOf(':') == -1 &&
node.destination.indexOf('/') == -1) {
node.destination = `#${this.wiki?.name}/${node.destination}`;
}
} else if (node.type == 'image') {
if (node.destination.startsWith('&')) {
node.destination = '/' + node.destination + '/view';
}
}
}
}
return writer.render(parsed);
}
title(md) {
let lines = (md || '').split('\n');
for (let line of lines) {
let m = line.match(/#+ (.*)/);
if (m) {
return m[1];
}
}
}
summary(md) {
let lines = (md || '').split('\n');
let result = [];
let have_content = false;
for (let line of lines) {
if (have_content && !line.trim().length) {
return result.join('\n');
}
if (!line.startsWith('#') && line.trim().length) {
have_content = true;
}
if (!line.startsWith('#')) {
result.push(line);
}
}
return result.join('\n');
}
thumbnail(md) {
let m = md ? md.match(/\!\[image:[^\]]+\]\((\&.{44}\.sha256)\).*/) : undefined;
console.log('thumb', m);
return m ? m[1] : undefined;
}
async load_blob() {
let blob = await tfrpc.rpc.get_blob(this.value?.blob);
if (blob.endsWith('.box')) {
let d = await tfrpc.rpc.try_decrypt(this.whoami, blob);
if (d) {
blob = d;
}
}
this.blob = blob;
this.blob_original = 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 blob = this.blob;
if (draft || this.value?.private) {
blob = await tfrpc.rpc.encrypt(this.whoami, this.wiki.editors, blob);
}
let id = await tfrpc.rpc.store_blob(blob);
let message = {
type: 'wiki-doc',
key: this.value.id,
parent: this.value.parent,
blob: id,
mentions: this.blob.match(/(&.{44}.sha256)/g)?.map(x => ({link: x})),
private: this.value?.private,
};
if (draft) {
message.recps = this.value.editors;
message = await tfrpc.rpc.encrypt(this.whoami, this.value.editors, JSON.stringify(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);
}
async on_blog_publish() {
let blob = this.blob;
let id = await tfrpc.rpc.store_blob(blob);
let message = {
type: 'blog',
key: this.value.id,
parent: this.value.parent,
title: this.title(blob),
summary: this.summary(blob),
thumbnail: this.thumbnail(blob),
blog: id,
mentions: this.blob.match(/(&.{44}.sha256)/g)?.map(x => ({link: x})),
};
await tfrpc.rpc.appendMessage(this.whoami, message);
this.is_editing = false;
}
convert_to_format(buffer, type, mime_type) {
return new Promise(function(resolve, reject) {
let img = new Image();
img.onload = function() {
let canvas = document.createElement('canvas');
let width_scale = Math.min(img.width, 1024) / img.width;
let height_scale = Math.min(img.height, 1024) / img.height;
let scale = Math.min(width_scale, height_scale);
canvas.width = img.width * scale;
canvas.height = img.height * scale;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
let data_url = canvas.toDataURL(mime_type);
let result = atob(data_url.split(',')[1]).split('').map(x => x.charCodeAt(0));
resolve(result);
};
img.onerror = function(event) {
reject(new Error('Failed to load image.'));
};
let raw = Array.from(new Uint8Array(buffer)).map(b => String.fromCharCode(b)).join('');
let original = `data:${type};base64,${btoa(raw)}`;
img.src = original;
});
}
async add_file(editor, file) {
try {
let self = this;
let buffer = await file.arrayBuffer();
let type = file.type;
if (type.startsWith('image/')) {
let best_buffer;
let best_type;
for (let format of ['image/png', 'image/jpeg', 'image/webp']) {
let test_buffer = await self.convert_to_format(buffer, file.type, format);
if (!best_buffer || test_buffer.length < best_buffer.length) {
best_buffer = test_buffer;
best_type = format;
}
}
buffer = best_buffer;
type = best_type;
} else {
buffer = Array.from(new Uint8Array(buffer));
}
let id = await tfrpc.rpc.store_blob(buffer);
let name = type.split('/')[0] + ':' + file.name;
editor.value += `\n![${name}](${id})`;
self.on_edit({srcElement: editor});
} catch(e) {
alert(e?.message);
}
}
paste(event) {
let self = this;
for (let item of event.clipboardData.items) {
if (item.type?.startsWith('image/')) {
let file = item.getAsFile();
if (!file) {
continue;
}
self.add_file(event.srcElement, file);
break;
}
}
}
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;
let thumbnail_ref = this.thumbnail(this.blob);
return html`
<style>
a:link { color: #268bd2 }
a:visited { color: #6c71c4 }
a:hover { color: #859900 }
a:active { color: #2aa198 }
</style>
<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>
<button ?disabled=${!this.is_editing} @click=${() => self.value = Object.assign({}, self.value, {private: !self.value.private})}>${this.value?.private ? 'Make Public' : 'Make Private'}</button>
<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>Publish Blog</button>
</div>
<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
<div style="display: flex; flex-direction: row; ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<textarea
?hidden=${!this.is_editing}
style="flex: 1 1; min-height: 10em; ${this.value?.private ? 'border: 4px solid #800' : ''}"
@input=${this.on_edit}
@paste=${this.paste}
.value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1">
<div ?hidden=${!this.is_editing} style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em">
<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
<h1 ?hidden=${!this.title(this.blob)}>${unsafeHTML(this.markdown(this.title(this.blob)))}</h1>
${unsafeHTML(this.markdown(this.summary(this.blob)))}
</div>
${unsafeHTML(this.markdown(this.blob))}
</div>
</div>
`;
}
}
customElements.define('tf-wiki-doc', TfWikiDocElement);