From 470a6bdbf877bdc0297261082f800b5f21e3d6eb Mon Sep 17 00:00:00 2001
From: Andrew Simachev <andrew.simachev@gmail.com>
Date: Sun, 31 Dec 2023 21:22:41 +0100
Subject: [PATCH] JS-3649: Reddit

---
 dist/embed/iframe.html           | 39 +++++++++++++++++++++-----------
 electron/json/cors.json          | 19 ++++++++++++----
 src/scss/block/embed.scss        |  3 ++-
 src/ts/component/block/embed.tsx | 17 ++++++++++----
 src/ts/interface/block/embed.ts  |  1 +
 src/ts/lib/util/embed.ts         | 14 +++++++-----
 src/ts/lib/util/menu.ts          |  1 +
 7 files changed, 66 insertions(+), 28 deletions(-)
diff --git a/dist/embed/iframe.html b/dist/embed/iframe.html
index 441ee60cff..3a9a5e34dd 100644
--- a/dist/embed/iframe.html
+++ b/dist/embed/iframe.html
@@ -12,7 +12,7 @@
 			body.align1 { text-align: center; }
 			body.align2 { text-align: right; }
 
-			body:not(.isTwitter) {
+			body:not(.isTwitter):not(.isReddit) {
 				iframe { width: 100% !important; height: 100% !important; border: 0px !important; }
 			}
 
@@ -24,6 +24,8 @@
 	</head>
 	<body>
 		<div id="root"></div>
+		<div id="scripts"></div>
+
 		<script type="text/javascript">
 			let cachedHtml = '';
 			let scrollHeight = 0;
@@ -31,34 +33,38 @@
 			const param = getParam();
 			const body = document.body;
 			const root = document.getElementById('root');
+			const scripts = document.getElementById('scripts');
 			const allowedOrigins = [
 				'//localhost:',
 				'file://',
 			];
 
-			body.className = '';
-
-			if (param.theme) {
-				body.classList.add(param.theme);
-			};
-
 			window.addEventListener('message', e => {
 				if (!allowedOrigins.some(it => e.origin.match(it))) {
 					return;
 				};
 
-				const { html, js, libs, className, allowResize, align } = e.data;
+				const { html, js, libs, className, allowResize, align, processor } = e.data;
+				const insertBeforeLoad = [ 9, 11 ].includes(processor);
 
+				scripts.innerHTML = '';
+				body.className = '';
+
+				if (param.theme) {
+					body.classList.add(param.theme);
+				};
 				if (className) {
 					body.classList.add(className);
 				};
-
 				body.classList.add(`align${align}`);
 
+				if (insertBeforeLoad) {
+					insertHtml(html);
+				};
+
 				loadLibs(libs, () => {
-					if (cachedHtml !== html) {
-						root.innerHTML = html;
-						cachedHtml = html;
+					if (!insertBeforeLoad) {
+						insertHtml(html);
 					};
 
 					if (js) {
@@ -86,6 +92,13 @@
 				window.parent.postMessage({ height: document.documentElement.scrollHeight }, '*');
 			};
 
+			function insertHtml (html) {
+				if (cachedHtml !== html) {
+					root.innerHTML = html;
+					cachedHtml = html;
+				};
+			};
+
 			function loadLibs (list, callBack) {
 				if (!list.length) {
 					if (callBack) {
@@ -97,7 +110,7 @@
 				const src = list.shift();
 				const script = document.createElement('script');
 
-				document.body.appendChild(script);
+				scripts.appendChild(script);
 
 				script.onload = function (e) {
 					if (list.length) {
diff --git a/electron/json/cors.json b/electron/json/cors.json
index c759ce2750..eb55aa4b7a 100644
--- a/electron/json/cors.json
+++ b/electron/json/cors.json
@@ -38,7 +38,8 @@
 		"https://miro.com",
 		"https://*.google.com",
 		"https://*.figma.com/",
-		"https://*.openstreetmap.org"
+		"https://*.openstreetmap.org",
+		"https://www.redditstatic.com"
 	],
 
 	"font-src": [ 
@@ -83,7 +84,8 @@
 		"https://*.figma.com/",
 		"wss://*.figma.com/",
 		"https://*.twitter.com",
-		"https://*.twimg.com"
+		"https://*.twimg.com",
+		"https://*.reddit.com"
 	],
 
 	"script-src-elem": [
@@ -104,7 +106,9 @@
 		"https://*.figma.com/",
 		"https://cdn.jsdelivr.net",
 		"https://platform.twitter.com",
-		"https://*.openstreetmap.org"
+		"https://*.openstreetmap.org",
+		"https://embed.reddit.com",
+		"https://www.redditstatic.com"
 	],
 
 	"frame-src": [
@@ -119,7 +123,8 @@
 		"https://*.figma.com/",
 		"file://*",
 		"https://platform.twitter.com",
-		"https://*.openstreetmap.org"
+		"https://*.openstreetmap.org",
+		"https://embed.reddit.com"
 	],
 
 	"worker-src": [ 
@@ -127,5 +132,11 @@
 		"'unsafe-eval'", 
 		"blob:", 
 		"http://localhost:*" 
+	],
+
+	"manifest-src": [ 
+		"'self'", 
+		"http://localhost:*",
+		"https://*.redditstatic.com"
 	]
 }
diff --git a/src/scss/block/embed.scss b/src/scss/block/embed.scss
index c59e0c7111..40b14cf9ff 100644
--- a/src/scss/block/embed.scss
+++ b/src/scss/block/embed.scss
@@ -76,7 +76,8 @@
 	.block.blockEmbed.isMiro .preview { background-image: url('~img/icon/block/embed/miro.svg'); }
 	.block.blockEmbed.isFigma .preview { background-image: url('~img/icon/block/embed/figma.svg'); }
 
-	.block.blockEmbed.isTwitter {
+	.block.blockEmbed.isTwitter,
+	.block.blockEmbed.isReddit {
 		iframe { width: 100%; aspect-ratio: unset; }
 	}
 
diff --git a/src/ts/component/block/embed.tsx b/src/ts/component/block/embed.tsx
index 764e50b033..dd1056dca6 100644
--- a/src/ts/component/block/embed.tsx
+++ b/src/ts/component/block/embed.tsx
@@ -509,12 +509,12 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
 		};
 	};
 
-	getEnvironmentContent (): { html: string; libs: string[], className: string } {
+	getEnvironmentContent (): { html: string; libs: string[]} {
 		const { block } = this.props;
 		const { processor } = block.content;
+		const libs = [];
 
 		let html = '';
-		let libs = [];
 
 		switch (processor) {
 			case I.EmbedProcessor.Chart: {
@@ -528,12 +528,15 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
 				break;
 			};
 
+			case I.EmbedProcessor.Reddit: {
+				libs.push('https://embed.reddit.com/widgets.js');
+				break;
+			};
 		};
 
 		return { 
 			html, 
 			libs, 
-			className: UtilData.blockEmbedClass(processor),
 		};
 	};
 
@@ -596,7 +599,13 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
 				const onLoad = () => {
 					const iw = (iframe[0] as HTMLIFrameElement).contentWindow;
 					const env = this.getEnvironmentContent();
-					const data: any = { ...env, allowResize, align: block.hAlign };
+					const data: any = { 
+						...env, 
+						allowResize, 
+						align: block.hAlign, 
+						processor,
+						className: UtilData.blockEmbedClass(processor),
+					};
 
 					if (UtilEmbed.allowEmbedUrl(processor) && !text.match(/<iframe/)) {
 						text = UtilEmbed.getHtml(processor, UtilEmbed.getParsedUrl(text));
diff --git a/src/ts/interface/block/embed.ts b/src/ts/interface/block/embed.ts
index 2c52b46c42..5833efd164 100644
--- a/src/ts/interface/block/embed.ts
+++ b/src/ts/interface/block/embed.ts
@@ -13,6 +13,7 @@ export enum EmbedProcessor {
 
 	Twitter			 = 9,
 	OpenStreetMap	 = 10,
+	Reddit			 = 11,
 };
 
 export interface ContentEmbed {
diff --git a/src/ts/lib/util/embed.ts b/src/ts/lib/util/embed.ts
index 0ed9b64ef9..7e326b4231 100644
--- a/src/ts/lib/util/embed.ts
+++ b/src/ts/lib/util/embed.ts
@@ -51,16 +51,12 @@ class UtilEmbed {
 				break;
 			};
 		};
-
-		console.log('getProcessorByUrl', url, p);
 		return p;
 	};
 
 	getParsedUrl (url: string): string {
 		const processor = this.getProcessorByUrl(url);
 
-		console.log('getParsedUrl', url, processor);
-
 		switch (processor) {
 			case I.EmbedProcessor.Youtube: {
 				url = `https://www.youtube.com/embed/${this.getYoutubeId(url)}`;
@@ -145,6 +141,7 @@ class UtilEmbed {
 			I.EmbedProcessor.Miro, 
 			I.EmbedProcessor.Figma,
 			I.EmbedProcessor.Twitter,
+			I.EmbedProcessor.Reddit,
 		].includes(p);
 	};
 
@@ -167,7 +164,9 @@ class UtilEmbed {
 	};
 
 	allowJs (p: I.EmbedProcessor) {
-		return [ I.EmbedProcessor.Chart ].includes(p);
+		return [ 
+			I.EmbedProcessor.Chart,
+		].includes(p);
 	};
 
 	allowPopup (p: I.EmbedProcessor) {
@@ -175,7 +174,10 @@ class UtilEmbed {
 	};
 
 	allowResize (p: I.EmbedProcessor) {
-		return [ I.EmbedProcessor.Twitter ].includes(p);
+		return [ 
+			I.EmbedProcessor.Twitter,
+			I.EmbedProcessor.Reddit,
+		].includes(p);
 	};
 
 };
diff --git a/src/ts/lib/util/menu.ts b/src/ts/lib/util/menu.ts
index ddf9503746..cebc10b7b1 100644
--- a/src/ts/lib/util/menu.ts
+++ b/src/ts/lib/util/menu.ts
@@ -72,6 +72,7 @@ class UtilMenu {
 
 				{ id: I.EmbedProcessor.Twitter, icon: 'twitter', name: 'X (Twitter)' },
 				{ id: I.EmbedProcessor.OpenStreetMap, icon: 'openStreetMap', name: 'Open Street Map' },
+				{ id: I.EmbedProcessor.Reddit, icon: 'reddit', name: 'Reddit' },
 			]);
 		};
 
