From f218152840ecb929b1f333a47b5d30894d49dc98 Mon Sep 17 00:00:00 2001
From: Noam Zaks <imnoamzaks@gmail.com>
Date: Wed, 19 Jun 2024 01:16:58 +0300
Subject: [PATCH 1/6] feat: persist webview preview through vscode restarts

---
 addons/frontend/index.html     |  3 +++
 addons/frontend/src/main.js    |  4 ++++
 addons/vscode/package.json     |  4 +++-
 addons/vscode/src/extension.ts | 40 +++++++++++++++++++++++++++++++---
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/addons/frontend/index.html b/addons/frontend/index.html
index d1bac96..c36f16f 100644
--- a/addons/frontend/index.html
+++ b/addons/frontend/index.html
@@ -15,6 +15,9 @@
     <style id="preview-theme-styles"></style>
     <!-- before all of code to avoid rerender by style replacement -->
     <script>
+      // The right side of the equation will be string-replaced later and set in the main.js
+      window.vscode_state = VSCODE_STATE;
+
       /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
       function deltaE(rgbA, rgbB) {
         let labA = rgb2lab(rgbA);
diff --git a/addons/frontend/src/main.js b/addons/frontend/src/main.js
index e950eaa..5643619 100644
--- a/addons/frontend/src/main.js
+++ b/addons/frontend/src/main.js
@@ -92,6 +92,10 @@ function setupVscodeChannel(nextWs) {
     if (vscodeAPI?.postMessage) {
         vscodeAPI.postMessage({ type: 'started' });
     }
+    if (vscodeAPI?.setState && window.vscode_state) {
+        vscodeAPI.setState(window.vscode_state);
+    }
+
 
     // Handle messages sent from the extension to the webview
     window.addEventListener('message', event => {
diff --git a/addons/vscode/package.json b/addons/vscode/package.json
index d095be0..4644c7a 100644
--- a/addons/vscode/package.json
+++ b/addons/vscode/package.json
@@ -16,7 +16,9 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [],
+  "activationEvents": [
+    "onWebviewPanel:typst-preview"
+  ],
   "main": "./out/src/extension.js",
   "contributes": {
     "icons": {
diff --git a/addons/vscode/src/extension.ts b/addons/vscode/src/extension.ts
index fe79d4f..a2552c9 100644
--- a/addons/vscode/src/extension.ts
+++ b/addons/vscode/src/extension.ts
@@ -339,6 +339,7 @@ interface LaunchTask {
 	activeEditor: vscode.TextEditor,
 	bindDocument: vscode.TextDocument,
 	mode: 'doc' | 'slide',
+	webviewPanel?: vscode.WebviewPanel
 }
 
 interface LaunchInBrowserTask extends LaunchTask {
@@ -357,6 +358,7 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 		outputChannel,
 		activeEditor,
 		bindDocument,
+		webviewPanel
 	} = task;
 	const filePath = bindDocument.uri.fsPath;
 
@@ -462,7 +464,7 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 	async function launchPreviewInWebView() {
 		const basename = path.basename(activeEditor.document.fileName);
 		// Create and show a new WebView
-		const panel = vscode.window.createWebviewPanel(
+		const panel = webviewPanel !== undefined ? webviewPanel : vscode.window.createWebviewPanel(
 			'typst-preview', // 标识符
 			`${basename} (Preview)`, // 面板标题
 			getTargetViewColumn(activeEditor.viewColumn),
@@ -493,7 +495,7 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 		html = html.replace(
 			"preview-arg:previewMode:Doc",
 			`preview-arg:previewMode:${previewMode}`
-		);
+		).replace("VSCODE_STATE", JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath }));
 		panel.webview.html = html.replace("ws://127.0.0.1:23625", `ws://127.0.0.1:${dataPlanePort}`);
 		// 虽然配置的是 http，但是如果是桌面客户端，任何 tcp 连接都支持，这也就包括了 ws
 		// https://code.visualstudio.com/api/advanced-topics/remote-extensions#forwarding-localhost
@@ -761,6 +763,37 @@ export class OutlineItem extends vscode.TreeItem {
 	contextValue = 'outline-item';
 }
 
+class TypstPreviewSerializer implements vscode.WebviewPanelSerializer {
+	context: vscode.ExtensionContext;
+	outputChannel: vscode.OutputChannel;
+
+	constructor(context: vscode.ExtensionContext, outputChannel: vscode.OutputChannel) {
+		this.context = context;
+		this.outputChannel = outputChannel;
+	}
+
+	async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
+		const activeEditor = vscode.window.visibleTextEditors.find(editor => editor.document.uri.fsPath === state.fsPath);
+
+		if (!activeEditor) {
+			return;
+		}
+
+		const bindDocument = activeEditor.document;
+		const mode = state.mode;
+
+		launchPreview({
+			kind: "webview",
+			context: this.context,
+			outputChannel: this.outputChannel,
+			activeEditor,
+			bindDocument,
+			mode,
+			webviewPanel
+		});
+	}
+}
+
 let statusBarItem: vscode.StatusBarItem;
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
@@ -854,8 +887,9 @@ export function activate(context: vscode.ExtensionContext) {
 	let showLogDisposable = vscode.commands.registerCommand('typst-preview.showLog', async () => {
 		outputChannel.show();
 	});
+	let serializerDisposable = vscode.window.registerWebviewPanelSerializer('typst-preview', new TypstPreviewSerializer(context, outputChannel));
 
-	context.subscriptions.push(webviewDisposable, browserDisposable, webviewSlideDisposable, browserSlideDisposable, syncDisposable, showLogDisposable, statusBarItem, revealDocumentDisposable, awaitTreeDisposable);
+	context.subscriptions.push(webviewDisposable, browserDisposable, webviewSlideDisposable, browserSlideDisposable, syncDisposable, showLogDisposable, statusBarItem, revealDocumentDisposable, awaitTreeDisposable, serializerDisposable);
 	process.on('SIGINT', () => {
 		for (const serverProcess of serverProcesses) {
 			serverProcess.kill();

From 56af030ddb6c41b128278634e6e3d432af008420 Mon Sep 17 00:00:00 2001
From: Noam Zaks <imnoamzaks@gmail.com>
Date: Thu, 20 Jun 2024 18:00:04 +0300
Subject: [PATCH 2/6] make sure code works without VSCODE_STATE

---
 addons/frontend/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/frontend/index.html b/addons/frontend/index.html
index c36f16f..c9232e1 100644
--- a/addons/frontend/index.html
+++ b/addons/frontend/index.html
@@ -15,8 +15,10 @@
     <style id="preview-theme-styles"></style>
     <!-- before all of code to avoid rerender by style replacement -->
     <script>
-      // The right side of the equation will be string-replaced later and set in the main.js
-      window.vscode_state = VSCODE_STATE;
+      try {
+        // The right side of the equation will be string-replaced later and set in the main.js
+        window.vscode_state = JSON.parse(`VSCODE_STATE`);
+      } catch (ignored) {}
 
       /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
       function deltaE(rgbA, rgbB) {

From a99a8e8e70d38fe9d05c569d9b7a7461109080f1 Mon Sep 17 00:00:00 2001
From: Noam Zaks <imnoamzaks@gmail.com>
Date: Fri, 21 Jun 2024 16:56:08 +0300
Subject: [PATCH 3/6] Apply suggestions from code review

---
 addons/frontend/index.html     | 12 ++++++++----
 addons/vscode/src/extension.ts |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/addons/frontend/index.html b/addons/frontend/index.html
index c9232e1..b307cf9 100644
--- a/addons/frontend/index.html
+++ b/addons/frontend/index.html
@@ -15,10 +15,14 @@
     <style id="preview-theme-styles"></style>
     <!-- before all of code to avoid rerender by style replacement -->
     <script>
-      try {
-        // The right side of the equation will be string-replaced later and set in the main.js
-        window.vscode_state = JSON.parse(`VSCODE_STATE`);
-      } catch (ignored) {}
+      if (typeof acquireVsCodeApi !== "undefined") {
+        /// The string here is a placeholder 
+        /// It will be replaced by the actual preview mode. 
+        let state = `preview-arg:state:{}`;
+        state = state.replace("preview-arg:state:", "");
+        /// Set it later when acquiring the VSCode API
+        window.vscode_state = JSON.parse(state);
+      }
 
       /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
       function deltaE(rgbA, rgbB) {
diff --git a/addons/vscode/src/extension.ts b/addons/vscode/src/extension.ts
index a2552c9..61a64ac 100644
--- a/addons/vscode/src/extension.ts
+++ b/addons/vscode/src/extension.ts
@@ -495,7 +495,7 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 		html = html.replace(
 			"preview-arg:previewMode:Doc",
 			`preview-arg:previewMode:${previewMode}`
-		).replace("VSCODE_STATE", JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath }));
+		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath.replace(/`/g, "").replace(/"/g, "") })}`);
 		panel.webview.html = html.replace("ws://127.0.0.1:23625", `ws://127.0.0.1:${dataPlanePort}`);
 		// 虽然配置的是 http，但是如果是桌面客户端，任何 tcp 连接都支持，这也就包括了 ws
 		// https://code.visualstudio.com/api/advanced-topics/remote-extensions#forwarding-localhost

From 524e6e1e24892ee2d946d9b6bf31e1ac4aad70a6 Mon Sep 17 00:00:00 2001
From: Noam Zaks <imnoamzaks@gmail.com>
Date: Sun, 23 Jun 2024 15:57:20 +0300
Subject: [PATCH 4/6] Comment backtick replacement

---
 addons/vscode/src/extension.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/addons/vscode/src/extension.ts b/addons/vscode/src/extension.ts
index 61a64ac..6bed3b0 100644
--- a/addons/vscode/src/extension.ts
+++ b/addons/vscode/src/extension.ts
@@ -495,7 +495,9 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 		html = html.replace(
 			"preview-arg:previewMode:Doc",
 			`preview-arg:previewMode:${previewMode}`
-		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath.replace(/`/g, "").replace(/"/g, "") })}`);
+		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath.replace(/`/g, "\\`") })}`);
+		// Replace all the backticks here ^ to avoid the backtick "escaping" the string in the JS itself and executing other code.
+
 		panel.webview.html = html.replace("ws://127.0.0.1:23625", `ws://127.0.0.1:${dataPlanePort}`);
 		// 虽然配置的是 http，但是如果是桌面客户端，任何 tcp 连接都支持，这也就包括了 ws
 		// https://code.visualstudio.com/api/advanced-topics/remote-extensions#forwarding-localhost

From 128f6f3e529a806f122c74ca6851b5e4b01f4ea2 Mon Sep 17 00:00:00 2001
From: Noam Zaks <imnoamzaks@gmail.com>
Date: Sun, 23 Jun 2024 16:52:13 +0300
Subject: [PATCH 5/6] Use base64 to solve security stuff

---
 addons/frontend/index.html     | 1 +
 addons/vscode/src/extension.ts | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/frontend/index.html b/addons/frontend/index.html
index b307cf9..ed0531f 100644
--- a/addons/frontend/index.html
+++ b/addons/frontend/index.html
@@ -22,6 +22,7 @@
         state = state.replace("preview-arg:state:", "");
         /// Set it later when acquiring the VSCode API
         window.vscode_state = JSON.parse(state);
+        window.vscode_state.fsPath = atob(window.vscode_state.fsPath);
       }
 
       /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
diff --git a/addons/vscode/src/extension.ts b/addons/vscode/src/extension.ts
index 6bed3b0..b2a9e51 100644
--- a/addons/vscode/src/extension.ts
+++ b/addons/vscode/src/extension.ts
@@ -495,8 +495,7 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 		html = html.replace(
 			"preview-arg:previewMode:Doc",
 			`preview-arg:previewMode:${previewMode}`
-		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: bindDocument.uri.fsPath.replace(/`/g, "\\`") })}`);
-		// Replace all the backticks here ^ to avoid the backtick "escaping" the string in the JS itself and executing other code.
+		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: Buffer.from(bindDocument.uri.fsPath).toString("base64") })}`);
 
 		panel.webview.html = html.replace("ws://127.0.0.1:23625", `ws://127.0.0.1:${dataPlanePort}`);
 		// 虽然配置的是 http，但是如果是桌面客户端，任何 tcp 连接都支持，这也就包括了 ws

From 452290b70fa60a10c6ffe583563f6c71226b6877 Mon Sep 17 00:00:00 2001
From: mgt <mgt@oi-wiki.org>
Date: Sun, 23 Jun 2024 22:21:58 +0800
Subject: [PATCH 6/6] fix: minor fix about non-ascii characters

---
 addons/frontend/index.html     | 16 ++++++++++++----
 addons/vscode/src/extension.ts |  4 +++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/addons/frontend/index.html b/addons/frontend/index.html
index ed0531f..b3302eb 100644
--- a/addons/frontend/index.html
+++ b/addons/frontend/index.html
@@ -16,13 +16,21 @@
     <!-- before all of code to avoid rerender by style replacement -->
     <script>
       if (typeof acquireVsCodeApi !== "undefined") {
+        function base64ToString(base64) {
+          const binString = atob(base64);
+          const arr = Uint8Array.from(binString, (m) => m.codePointAt(0));
+          return new TextDecoder().decode(arr);
+        }
         /// The string here is a placeholder 
         /// It will be replaced by the actual preview mode. 
-        let state = `preview-arg:state:{}`;
+        let state = `preview-arg:state:`;
         state = state.replace("preview-arg:state:", "");
-        /// Set it later when acquiring the VSCode API
-        window.vscode_state = JSON.parse(state);
-        window.vscode_state.fsPath = atob(window.vscode_state.fsPath);
+        console.log("state", state);
+        if (state !== "") {
+          /// Set it later when acquiring the VSCode API
+          window.vscode_state = JSON.parse(base64ToString(state));
+          console.log("vscode_state", window.vscode_state);
+        }
       }
 
       /// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
diff --git a/addons/vscode/src/extension.ts b/addons/vscode/src/extension.ts
index b2a9e51..55d3a34 100644
--- a/addons/vscode/src/extension.ts
+++ b/addons/vscode/src/extension.ts
@@ -492,10 +492,12 @@ const launchPreview = async (task: LaunchInBrowserTask | LaunchInWebViewTask) =>
 				.toString()}/typst-webview-assets`
 		);
 		const previewMode = task.mode === 'doc' ? "Doc" : "Slide";
+		const previewState = { mode: task.mode, fsPath: bindDocument.uri.fsPath };
+		const previewStateEncoded = Buffer.from(JSON.stringify(previewState), 'utf-8').toString('base64');
 		html = html.replace(
 			"preview-arg:previewMode:Doc",
 			`preview-arg:previewMode:${previewMode}`
-		).replace("preview-arg:state:{}", `preview-arg:state:${JSON.stringify({ mode: task.mode, fsPath: Buffer.from(bindDocument.uri.fsPath).toString("base64") })}`);
+		).replace("preview-arg:state:", `preview-arg:state:${previewStateEncoded}`);
 
 		panel.webview.html = html.replace("ws://127.0.0.1:23625", `ws://127.0.0.1:${dataPlanePort}`);
 		// 虽然配置的是 http，但是如果是桌面客户端，任何 tcp 连接都支持，这也就包括了 ws