Fix `embed-gist-inline` style and preserve the original link (#3866)

1 files changed, 8 insertions, 7 deletions

diff --git a/source/features/embed-gist-inline.tsx b/source/features/embed-gist-inline.tsx
index 10b9c203..13fc2022 100644
--- a/source/features/embed-gist-inline.tsx
+++ b/source/features/embed-gist-inline.tsx
@@ -19,16 +19,15 @@ async function embedGist(link: HTMLAnchorElement): Promise<void> {
 	link.after(info);
 
 	try {
-		// Get the gist via background.js due to CORB policies introduced in Chrome 73
-		const gistData = await browser.runtime.sendMessage({request: `${link.href}.json`});
-
-		const files = domify.one(JSON.parse(gistData).div)!;
-		const fileCount = files.children.length;
+		// Fetch via background.js due to CORB policies
+		const gistData = await browser.runtime.sendMessage({fetchJSON: `${link.href}.json`});
 
+		const fileCount: number = gistData.files.length;
 		if (fileCount > 1) {
 			info.textContent = ` (${fileCount} files)`;
 		} else {
-			link.parentElement!.attachShadow({mode: 'open'}).append(
+			const container = <div/>;
+			container.attachShadow({mode: 'open'}).append(
 				<style>{`
 					.gist .gist-data {
 						max-height: 16em;
@@ -37,8 +36,10 @@ async function embedGist(link: HTMLAnchorElement): Promise<void> {
 				`}
 				</style>,
 				<link rel="stylesheet" href={gistData.stylesheet}/>,
-				files
+				domify.one(gistData.div)!
 			);
+			link.parentElement!.after(container);
+			info.remove();
 		}
 	} catch {
 		info.remove();