plugin-editor: implement saving changes to gist

blurymind · Aug 10, 2024 · d654159 · d654159
1 parent c404e0b
commit d654159
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 21 deletions.
diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js
@@ -8,10 +8,10 @@ async function importModuleWeb(
   modulePath,
   { forceUpdate } = { forceUpdate: false }
 ) {
-  if(!script.startsWith("export.module")) return Promise.reject( `${modulePath} Not a module`);
+  if (!script.startsWith("export.module")) return Promise.reject(`${modulePath} Not a module`);
 
   const { AsyncFunction, cache } = globalThis.__import__ || {
-    AsyncFunction: Object.getPrototypeOf(async function() {}).constructor,
+    AsyncFunction: Object.getPrototypeOf(async function () { }).constructor,
     cache: new Map(),
   };
   // Build new AsyncFunction and evaluate it
@@ -23,7 +23,7 @@ async function importModuleWeb(
   return module.exports;
 }
 
-export var Plugins = function(app) {
+export var Plugins = function (app) {
   const self = this;
   const registerPlugin = plugin => {
     app.plugins[plugin.name] = plugin;
@@ -73,7 +73,7 @@ export var Plugins = function(app) {
       .extend({ persist: valueKey });
 
     app.ui[optionsKey] = options;
-    app[setterKey] = function(value, e) {
+    app[setterKey] = function (value, e) {
       const newValue = e ? e.target.value : value;
       app.settings[valueKey](newValue);
     };
@@ -83,8 +83,7 @@ export var Plugins = function(app) {
       const options = app.ui[optionsKey]
         .map(
           option =>
-            `<option value="${option.id}" ${
-              option.id === app.settings[valueKey]() ? 'selected="true"' : ''
+            `<option value="${option.id}" ${option.id === app.settings[valueKey]() ? 'selected="true"' : ''
             }>${option.name}</option>`
         )
         .join('');
@@ -127,19 +126,16 @@ export var Plugins = function(app) {
     const button = document.createElement('span');
     button.id = id || name || title || iconName;
     button.innerHTML = `
-      <span class="item ${className || ''}" title="${title || ''}" ${
-      onClick ? `onclick="click: app.plugins.${pluginName}.${onClick}"` : ''
-    }
-       ${
-         onPointerDown
-           ? ` onpointerdown="app.plugins.${pluginName}.${onPointerDown}"`
-           : ''
-       }
-              ${
-                onDoubleClick
-                  ? `ondblclick="app.plugins.${pluginName}.${onDoubleClick}"`
-                  : ''
-              }
+      <span class="item ${className || ''}" title="${title || ''}" ${onClick ? `onclick="click: app.plugins.${pluginName}.${onClick}"` : ''
+      }
+       ${onPointerDown
+        ? ` onpointerdown="app.plugins.${pluginName}.${onPointerDown}"`
+        : ''
+      }
+              ${onDoubleClick
+        ? `ondblclick="app.plugins.${pluginName}.${onDoubleClick}"`
+        : ''
+      }
        >
         <svg class="icon menu-icon icon-file-${iconName} icon-lg icon-fw" style="color:currentColor;"><use xlink:href="public/icons.svg#icon-${iconName}"></use></svg>
         <span class="hide-when-narrow">&nbsp;</span>
@@ -268,6 +264,11 @@ export var Plugins = function(app) {
     });
   };
 
+  const saveGistPlugin = (fileName, contents) => {
+    console.log({gistId: app.settings.gistPluginsFile(), fileName, contents})
+    return app.data.storage.editGist(app.settings.gistPluginsFile(), fileName, contents)
+  }
+
   const pluginApiMethods = {
     app,
     createButton,
@@ -289,7 +290,8 @@ export var Plugins = function(app) {
     getVloatilePlugins,
     setVloatilePlugin,
     setVloatilePlugins,
-    getGistPluginFiles
+    getGistPluginFiles,
+    saveGistPlugin
   };
 
   // built in plugin initiation

diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js
@@ -90,6 +90,7 @@ export var PluginEditor = function ({
   setVloatilePlugin,
   setVloatilePlugins,
   getGistPluginFiles,
+  saveGistPlugin
 }) {
   const self = this;
   this.name = 'PluginEditor';
@@ -101,6 +102,12 @@ export var PluginEditor = function ({
   this.mode = 'edit';
   this.theme = app.settings.theme() === 'dracula' ? 'ace/theme/monokai' : undefined;
 
+  this.onCommitChanges = () => {
+    const contents = this.differ.getEditors().right.getValue();
+    saveGistPlugin(this.editingFile, contents).then(data=>{
+      this.differ.getEditors().left.setValue(contents)
+    });
+  }
   this.onDownloadPreview = () => {
     app.data.storage.downloadContent(document.getElementById('plugin-output-previewer').srcdoc, 'output.html');
   }
@@ -116,6 +123,8 @@ export var PluginEditor = function ({
     document.getElementById('js-editor').style.display =
       mode === 'edit' ? 'block' : 'none';
     document.getElementById('diff-editor').style.display =
+      mode === 'commit' && app.settings.gistPluginsFile() ? 'block' : 'none';
+    document.getElementById('plugin-differ-commit').style.display =
       mode === 'commit' ? 'block' : 'none';
     document.getElementById('plugin-output-previewer').style.display =
       mode === 'test' ? 'block' : 'none';
@@ -157,7 +166,7 @@ export var PluginEditor = function ({
               .getEditors()
               .right.getSession()
               .setValue(gistPluginFile ? gistPluginFile.content : `//${fileName}\n\n//Gist with this filename is missing.\n// Have you deleted/renamed it?`);
-            this.differ.getEditors().right.setReadOnly(this.mode === 'commit');
+            // this.differ.getEditors().right.setReadOnly(this.mode === 'commit');
           });
         }
         if (this.mode === 'test') {
@@ -225,6 +234,18 @@ export var PluginEditor = function ({
 
         <div style="position: relative;">
             <div id="diff-editor" class="diff-editor" style="height: 70vh; width: 100%;"></div>
+            <button id="plugin-differ-commit" style="position: absolute;
+            right: 9px;
+            bottom: 17px;
+            padding-left: 9px;
+            padding-right: 9px;
+            border-radius: 0.9rem;
+            display: block;"
+            onclick="app.plugins.${self.name
+        }.onCommitChanges()"
+          >
+            Save to Gist
+          </button>
         </div>
         
         <div>
@@ -307,6 +328,14 @@ export var PluginEditor = function ({
           .on('change', function () {
             onChangeFromDiffDebounced();
           });
+        //plugin-differ-commit button
+        this.differ
+          .getEditors()
+          .right.getSession()
+          .on('change', () => {
+            // const contentChanged = this.differ.getEditors().left.getValue() !== this.differ.getEditors().right.getValue()
+            // document.getElementById('plugin-differ-commit').className = contentChanged ? "" : "disabled"
+          });
 
         // initialize data on both editor and differ
         this.onSetEditingFile();