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

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);