Allow pasting non-image files into the wiki editor.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4789 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/wiki.json

@@ -1,5 +1,5 @@
 {
   "type": "tildefriends-app",
   "emoji": "📝",
-  "previous": "&w+d5glrC/yHNrj1b6nihHNn4rpNZG5R4GuThkZ/XT6w=.sha256"
+  "previous": "&qrcrBeaWg89ikgql9hXdr68krkg+5NZkmwTbpodEW4U=.sha256"
 }

apps/wiki/tf-wiki-app.js

@@ -292,7 +292,7 @@ class TfCollectionsAppElement extends LitElement {
 						<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
 						<ul>
 							${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).sort((x, y) => x.name.localeCompare(y.name)).map(doc => html`
-								<li class="toc ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc.name}</li>
+								<li class="toc ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer; list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
 							`)}
 						</ul>
 					`)}

apps/wiki/tf-wiki-doc.js

@@ -73,7 +73,6 @@ class TfWikiDocElement extends LitElement {
 
 	thumbnail(md) {
 		let m = md ? md.match(/\!\[image:[^\]]+\]\((\&.{44}\.sha256)\).*/) : undefined;
-		console.log('thumb', m);
 		return m ? m[1] : undefined;
 	}
 
@@ -170,11 +169,22 @@ class TfWikiDocElement extends LitElement {
 		});
 	}
 
+	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;
@@ -187,12 +197,16 @@ class TfWikiDocElement extends LitElement {
 				}
 				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)})`;
 			}
-			let id = await tfrpc.rpc.store_blob(buffer);
-			let name = type.split('/')[0] + ':' + file.name;
-			editor.value += `\n![${name}](${id})`;
+			document.execCommand('insertText', false, insert);
 			self.on_edit({srcElement: editor});
 		} catch(e) {
 			alert(e?.message);
@@ -202,13 +216,10 @@ class TfWikiDocElement extends LitElement {
 	paste(event) {
 		let self = this;
 		for (let item of event.clipboardData.items) {
-			if (item.type?.startsWith('image/')) {
-				let file = item.getAsFile();
-				if (!file) {
-					continue;
-				}
+			let file = item.getAsFile();
+			if (file) {
 				self.add_file(event.srcElement, file);
-				break;
+				event.preventDefault();
 			}
 		}
 	}