persist plugin editor state more via url parameters

blurymind · Aug 20, 2024 · aad4ad8 · aad4ad8
1 parent 4eed16d
commit aad4ad8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js
@@ -267,6 +267,15 @@ export var Plugins = function (app) {
   const gistPluginsFileUrl = urlParams.get('pluginFile');
   const pluginModeUrl = urlParams.get('mode');
 
+  const updateUrlParams = (key, value) => {
+    const url = new URL(window.location.href);
+    if (value) {
+      url.searchParams.set(key, value);
+    } else {
+      url.searchParams.delete(key);
+    }
+    window.history.replaceState(null, null, url); // or pushState
+  }
   this.rawUrls = {};
   const getGistPluginFiles = () => {
     return new Promise((resolve) => {
@@ -417,6 +426,7 @@ const getFunctionBody = (func = ()=>{}) => {
     saveGistPlugin,
     isGistTokenInvalid,
     urlParams,
+    updateUrlParams,
     gistPluginsFileUrl,
     pluginModeUrl,
     getPluginsList,

diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js
@@ -120,6 +120,7 @@ export var PluginEditor = function ({
   gistPluginsFileUrl,
   pluginModeUrl,
   urlParams,
+  updateUrlParams,
   getPluginsList,
   deleteGistPlugin,
   deleteVolatilePlugin, 
@@ -215,6 +216,9 @@ export var PluginEditor = function ({
       mode === 'test' ? 'block' : 'none';
     document.getElementById('plugin-output-downloader').style.display = 'none';
 
+    updateUrlParams('mode', mode);
+
+    console.log({urlParams})
     this.onSetEditingFile();
   };
   // ace-editor
@@ -242,6 +246,7 @@ export var PluginEditor = function ({
         let fileContents = this.volatilePlugins[this.editingFile].content;
         this.editor.setValue(fileContents);
         this.editor.clearSelection();
+        updateUrlParams('pluginFile', this.editingFile);
 
         if (this.mode === 'commit') {
           fileContents = this.editor.getValue();
@@ -291,6 +296,7 @@ export var PluginEditor = function ({
       });
     };
 
+    const HEIGHT = '80vh';
     const { value: formValues } = await Swal.fire({
       showCloseButton: false,
       showCancelButton: false,
@@ -329,11 +335,11 @@ export var PluginEditor = function ({
       html: `
       <div style="overflow:hidden;">
         <div id="js-editor-wrapper">
-          <div id="js-editor" style="height: 70vh; width: 100%;"></div>        
+          <div id="js-editor" style="height: ${HEIGHT}; width: 100%;"></div>        
         </div>
 
         <div style="position: relative;">
-            <div id="diff-editor" class="diff-editor" style="height: 70vh; width: 100%;"></div>
+            <div id="diff-editor" class="diff-editor" style="height: ${HEIGHT}; width: 100%;"></div>
             <button id="plugin-differ-commit" style="position: absolute;
             right: 17px;
             bottom: 17px;
@@ -360,7 +366,7 @@ export var PluginEditor = function ({
           >
             Download
           </button>
-          <iframe id="plugin-output-previewer" style="height: 70vh; width: 100%; border: none;">
+          <iframe id="plugin-output-previewer" style="height: ${HEIGHT}; width: 100%; border: none;">
         </div>
       </div>
      
@@ -384,6 +390,7 @@ export var PluginEditor = function ({
 
       },
       onAfterClose: () => {
+        updateUrlParams('pluginFile', '');
         // removeStyleSheet('public/plugins/ace-diff/ace-diff-dark.min.css');
         // removeStyleSheet('public/plugins/ace-diff/ace-diff.min.css');
       },