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

345 lines
8.4 KiB
JavaScript

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.destination?.startsWith('&')) {
node.destination =
'/' +
node.destination +
'/view?filename=' +
node.firstChild?.literal;
} else if (node.type === 'link') {
if (
node.destination.indexOf(':') == -1 &&
node.destination.indexOf('/') == -1
) {
node.destination = `#${this.wiki?.name}/${node.destination}`;
}
}
}
}
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;
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;
});
}
humanSize(value) {
let units = ['B', 'kB', 'MB', 'GB'];
let i = 0;
while (i < units.length - 1 && value >= 1024) {
value /= 1024;
i++;
}
return `${Math.round(value * 10) / 10} ${units[i]}`;
}
async add_file(editor, file) {
try {
let self = this;
let buffer = await file.arrayBuffer();
let type = file.type;
let insert;
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;
let id = await tfrpc.rpc.store_blob(buffer);
let name = type.split('/')[0] + ':' + file.name;
insert = `\n![${name}](${id})`;
} else {
buffer = Array.from(new Uint8Array(buffer));
let id = await tfrpc.rpc.store_blob(buffer);
let name = file.name;
insert = `\n[${name}](${id}) (${this.humanSize(buffer.length)})`;
}
document.execCommand('insertText', false, insert);
self.on_edit({srcElement: editor});
} catch (e) {
alert(e?.message);
}
}
paste(event) {
let self = this;
for (let item of event.clipboardData.items) {
let file = item.getAsFile();
if (file) {
self.add_file(event.srcElement, file);
event.preventDefault();
}
}
}
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);