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: String}, 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); } 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.value.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); } 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; return html`
document is private
${unsafeHTML(this.markdown(this.blob))}
`; } } customElements.define('tf-wiki-doc', TfWikiDocElement);