rework embed iframe libs

dist/embed/iframe.html

@@ -39,6 +39,31 @@
 
 		<script type="text/javascript">
 			$(() => {
+				const EmbedProcessor = {
+					Latex:			 0,
+					Mermaid:		 1,
+					Chart:			 2,
+					Youtube:		 3,
+					Vimeo:			 4,
+					Soundcloud:		 5,
+					GoogleMaps:		 6,
+					Miro:			 7,
+					Figma:			 8,
+					Twitter:		 9,
+					OpenStreetMap:	 10,
+					Reddit:			 11,
+					Facebook:		 12,
+					Instagram:		 13,
+					Telegram:		 14,
+					GithubGist:		 15,
+					Codepen:		 16,
+					Bilibili:		 17,
+					Excalidraw:		 18,
+					Kroki:			 19,
+					Graphviz:		 20,
+					Sketchfab:		 21,
+				};
+
 				const win = $(window);
 				const htmlEl = $('html');
 				const head = $('head');
@@ -65,12 +90,25 @@
 						return;
 					};
 
-					const { html, js, libs, className, insertBeforeLoad, allowIframeResize, align } = oe.data;
+					let { html, js, className, insertBeforeLoad, allowIframeResize, align } = oe.data;
 
+					libs = oe.data.libs || [];
 					blockId = oe.data.blockId;
 					processor = oe.data.processor;
 					useRootHeight = oe.data.useRootHeight;
 
+					const envContent = getEnvironmentContent(processor);
+
+					if (envContent.html) {
+						html = envContent.html;
+					};
+
+					if (envContent.libs && envContent.libs.length) {
+						libs = libs.concat(envContent.libs);
+					};
+
+					console.log(JSON.stringify(libs, null, 3));
+
 					scripts.html('');
 					htmlEl.attr({ class: '' });
 
@@ -90,7 +128,7 @@
 					};
 
 					// Github Gist
-					if (processor == 15) {
+					if (processor == EmbedProcessor.GithubGist) {
 						loadGithubGist(html);
 					} else {
 						if (insertBeforeLoad) {
@@ -140,6 +178,8 @@
 					const src = list.shift();
 					const script = document.createElement('script');
 
+					console.log(src);
+
 					scripts.append(script);
 					script.onload = function (e) {
 						if (list.length) {
@@ -186,6 +226,44 @@
 					});
 				};
 
+				function getEnvironmentContent (processor) {
+					const libs = [];
+
+					let html = '';
+					switch (processor) {
+						case EmbedProcessor.Chart: {
+							html = `<canvas id="chart"></canvas>`;
+							libs.push('https://cdn.jsdelivr.net/npm/chart.js');
+							break;
+						};
+
+						case EmbedProcessor.Twitter: {
+							libs.push('https://platform.twitter.com/widgets.js');
+							break;
+						};
+
+						case EmbedProcessor.Reddit: {
+							libs.push('https://embed.reddit.com/widgets.js');
+							break;
+						};
+
+						case EmbedProcessor.Instagram: {
+							libs.push('https://www.instagram.com/embed.js');
+							break;
+						};
+
+						case I.EmbedProcessor.Codepen: {
+							libs.push('https://cpwebassets.codepen.io/assets/embed/ei.js');
+							break;
+						};
+					};
+
+					return { 
+						html, 
+						libs, 
+					};
+				};
+
 			});
 		</script>
 	</body>