From c58bfeb10937cf34a01603074b17fdf433ef178a Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 20 Jan 2025 14:56:25 -0800
Subject: [PATCH] Use less sessionStorage for editor state

---
 package-lock.json                             |  9 ++++-
 src-web/components/core/Editor/Editor.tsx     | 35 ++++++++++++++-----
 .../responseViewers/HTMLOrTextViewer.tsx      |  1 -
 src-web/package.json                          |  1 +
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1598323..dbdce182 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8475,6 +8475,12 @@
       "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
       "license": "MIT"
     },
+    "node_modules/js-md5": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
+      "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15413,7 +15419,7 @@
     },
     "packages/plugin-runtime-types": {
       "name": "@yaakapp/api",
-      "version": "0.3.3",
+      "version": "0.3.4",
       "dependencies": {
         "@types/node": "^22.5.4"
       },
@@ -15573,6 +15579,7 @@
         "fuzzbunny": "^1.0.1",
         "history": "^5.3.0",
         "jotai": "^2.9.3",
+        "js-md5": "^0.8.3",
         "lucide-react": "^0.439.0",
         "mime": "^4.0.4",
         "nanoid": "^5.0.9",
diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx
index e37f9164..24d72e9f 100644
--- a/src-web/components/core/Editor/Editor.tsx
+++ b/src-web/components/core/Editor/Editor.tsx
@@ -10,6 +10,7 @@ import type { EditorKeymap, EnvironmentVariable } from '@yaakapp-internal/models
 import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
+import { md5 } from 'js-md5';
 import type { MutableRefObject, ReactNode } from 'react';
 import {
   Children,
@@ -583,7 +584,7 @@ const placeholderElFromText = (text: string, type: EditorProps['type']) => {
   const el = document.createElement('div');
   if (type === 'password') {
     // Will be obscured (dots) so just needs to be something to take up space
-    el.innerHTML = 'aaaaaaaaaa';
+    el.innerHTML = 'something-cool';
     el.setAttribute('aria-hidden', 'true');
   } else {
     el.innerHTML = text ? text.replaceAll('\n', '<br/>') : ' ';
@@ -593,22 +594,38 @@ const placeholderElFromText = (text: string, type: EditorProps['type']) => {
 
 function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
   if (!stateKey || state == null) return;
-  sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(state.toJSON(stateFields)));
+  const stateObj = state.toJSON(stateFields);
+
+  // Save state in sessionStorage by removing doc and saving the hash of it instead
+  // This will be checked on restore and put back in if it matches
+  stateObj.docHash = md5(stateObj.doc);
+  delete stateObj.doc;
+
+  try {
+    sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(stateObj));
+  } catch (err) {
+    console.log('Failed to save to editor state', stateKey, err);
+  }
 }
 
 function getCachedEditorState(doc: string, stateKey: string | null) {
   if (stateKey == null) return;
 
-  const stateStr = sessionStorage.getItem(computeFullStateKey(stateKey));
-  if (stateStr == null) return null;
-
   try {
-    const state = JSON.parse(stateStr);
-    if (state.doc !== doc) return null;
+    const stateStr = sessionStorage.getItem(computeFullStateKey(stateKey));
+    if (stateStr == null) return null;
 
+    const { docHash, ...state } = JSON.parse(stateStr);
+
+    // Ensure the doc matches the one that was used to save the state
+    if (docHash !== md5(doc)) {
+      return null;
+    }
+
+    state.doc = doc;
     return state;
-  } catch {
-    // Nothing
+  } catch (err) {
+    console.log('Failed to restore editor storage', stateKey, err);
   }
 
   return null;
diff --git a/src-web/components/responseViewers/HTMLOrTextViewer.tsx b/src-web/components/responseViewers/HTMLOrTextViewer.tsx
index 4e84cc73..75a78ba9 100644
--- a/src-web/components/responseViewers/HTMLOrTextViewer.tsx
+++ b/src-web/components/responseViewers/HTMLOrTextViewer.tsx
@@ -23,7 +23,6 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
     return null;
   }
 
-  console.log("HELLO", rawTextBody.data, response);
   // Wasn't able to decode as text, so it must be binary
   if (rawTextBody.data == null) {
     return <BinaryViewer response={response} />;
diff --git a/src-web/package.json b/src-web/package.json
index 45413ddb..69b0d542 100644
--- a/src-web/package.json
+++ b/src-web/package.json
@@ -47,6 +47,7 @@
     "fuzzbunny": "^1.0.1",
     "history": "^5.3.0",
     "jotai": "^2.9.3",
+    "js-md5": "^0.8.3",
     "lucide-react": "^0.439.0",
     "mime": "^4.0.4",
     "nanoid": "^5.0.9",