Fix theme settings

airflow_code_editor/VERSION

@@ -1 +1 @@
-7.1.0
+7.1.1

airflow_code_editor/templates/index_tail.html

@@ -7,7 +7,8 @@
 jQuery(document).ready(function() {
     // Init
     var csrfToken = "{{ csrf_token() }}";
-    init(csrfToken);
+    var themesPath = "{{ url_for('static', filename='code_editor/css/theme') }}";
+    init(csrfToken, themesPath);
 });
 
 </script>

changelog.txt

@@ -426,3 +426,11 @@
 
 - Send git api result in JSON format
 - CodeMirror upgrade
+
+## 7.1.1
+
+2022-10-29
+
+### Fix
+
+- Fix theme settings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "airflow-code-editor",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "A plugin for [Apache Airflow](https://github.com/apache/airflow) that allows you to edit DAGs in browser. It provides a file managing interface within specified directories and it can be used to edit and download your files. If git support is enabled, the DAGs are stored in a Git repository. You may use it to view Git history, review local changes and commit.",
   "private": true,
   "repository": {

src/commons.js

@@ -19,6 +19,7 @@ export const COLORS = [
 
 var csrfToken = null;
 var vueApp = null;
+var themesPath = null;
 
 export function showError(message) {
     if (vueApp) {
@@ -105,7 +106,20 @@ export function git(args, callback) {
          });
 }
 
-export function initApp(app, target, teleportTarget, csrfTokenParam) {
+export function importTheme(theme) {
+    // Import an editor theme
+    return new Promise((resolve, reject) => {
+        let link = document.createElement('link');
+        link.onload = () => resolve(true);
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = themesPath + '/' + theme + '.css';
+        document.getElementsByTagName('head')[0].appendChild(link);
+    });
+}
+
+export function initApp(app, target, teleportTarget, csrfTokenParam, themesPathParam) {
+    themesPath = themesPathParam;
     // CSRF Token setup
     initCsrfToken(csrfTokenParam);
     // Add VueUniversalModal

src/components/Editor.vue

@@ -46,7 +46,7 @@
 <script>
 import axios from 'axios';
 import { defineComponent, markRaw } from 'vue';
-import { normalize, prepareHref, git, showError } from '../commons';
+import { normalize, prepareHref, git, showError, importTheme } from '../commons';
 import Breadcrumb from './Breadcrumb.vue';
 import Icon from './Icon.vue';
 import SettingsDialog from './dialogs/SettingsDialog.vue';
@@ -169,31 +169,23 @@ export default defineComponent({
             if (this.editor) {
                 this.editor.setOption(option, value);
             }
-            // Store settings in localStorage
-            if (option == 'keyMap') {
-                option = 'mode';
-            }
-            localStorage.setItem('airflow_code_editor_' + option, value);
         },
         setTheme(theme) {
             // Set editor theme
             if (theme == 'default') {
                 this.setOption('theme', theme);
             } else {
-                let link = document.createElement('link');
-                link.onload = () => this.setOption('theme', theme);
-                let baseUrl = jQuery('link[rel=stylesheet]').filter((i, e) => e.href.match(/gitweb.css/) !== null)[0].href.split('/gitweb.css')[0];;
-                link.rel = 'stylesheet';
-                link.type = 'text/css';
-                link.href = baseUrl + '/theme/' + theme + '.css';
-                document.getElementsByTagName('head')[0].appendChild(link);
+                importTheme(theme).then(() => this.setOption('theme', theme));
             }
         },
         updateSettings(config) {
             this.config.theme = config.theme;
             this.config.mode = config.mode;
-            this.setTheme(this.config.theme);
-            this.setOption('keyMap', this.config.mode);
+            this.setTheme(this.config.theme); // Set theme
+            this.setOption('keyMap', this.config.mode); // Set editor mode
+            // Save setting on the local storage
+            localStorage.setItem('airflow_code_editor_theme', config.theme);
+            localStorage.setItem('airflow_code_editor_mode', config.mode);
         },
         saveAction() {
             // Save button action

src/main.js

@@ -2,13 +2,13 @@ import { createApp } from 'vue';
 import App from './components/App.vue';
 import { initApp } from './commons';
 
-window.init = function(csrfTokenParam) {
+window.init = function(csrfTokenParam, themesPath) {
     const target = '#global-container';
     const teleportTarget = '#airflow-code-editor-modals';
     // CodeMirror
     window.CodeMirror.modeURL = '/static/code_editor/mode/%N/%N.js';
     // Init app
     jQuery(target).appendTo(jQuery('body'));
     const app = createApp(App);
-    window.app = initApp(app, target, teleportTarget, csrfTokenParam);
+    window.app = initApp(app, target, teleportTarget, csrfTokenParam, themesPath);
 }