Load css file for editor theme when provided fix #235

Author: oliemansm

graphiql-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/graphiql/boot/GraphiQLAutoConfiguration.java

@@ -3,6 +3,7 @@
 import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
+import org.springframework.boot.context.properties.EnableConfigurationProperties;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.DispatcherServlet;
@@ -13,10 +14,13 @@
 @Configuration
 @ConditionalOnWebApplication
 @ConditionalOnClass(DispatcherServlet.class)
+@EnableConfigurationProperties(GraphiQLProperties.class)
 public class GraphiQLAutoConfiguration {
+
     @Bean
     @ConditionalOnProperty(value = "graphiql.enabled", havingValue = "true", matchIfMissing = true)
     GraphiQLController graphiQLController() {
         return new GraphiQLController();
     }
+
 }

graphiql-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/graphiql/boot/GraphiQLController.java

@@ -63,6 +63,9 @@ public class GraphiQLController {
     @Autowired
     private Environment environment;
 
+    @Autowired
+    private GraphiQLProperties graphiQLProperties;
+
     private String template;
     private String props;
     private String headers;
@@ -141,9 +144,22 @@ private Map<String, String> getReplacements(String graphqlEndpoint, String subsc
         replacements.put("headers", headers);
         replacements.put("subscriptionClientTimeout", String.valueOf(subscriptionsTimeout * 1000));
         replacements.put("subscriptionClientReconnect", String.valueOf(subscriptionsReconnect));
+        replacements.put("editorThemeCss", getEditorThemeCssURL());
         return replacements;
     }
 
+    private String getEditorThemeCssURL() {
+        String theme = graphiQLProperties.getProps().getVariables().getEditorTheme();
+        if (theme != null) {
+            return String.format(
+                    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/%s/theme/%s.min.css",
+                    graphiQLProperties.getCodeMirror().getVersion(),
+                    theme.split("\\s")[0]
+            );
+        }
+        return "";
+    }
+
     private String getResourceUrl(String staticBasePath, String staticFileName, String cdnUrl) {
         if (graphiqlCdnEnabled && StringUtils.isNotBlank(cdnUrl)) {
             return cdnUrl;

graphiql-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/graphiql/boot/GraphiQLProperties.java

@@ -0,0 +1,28 @@
+package com.oembedler.moon.graphiql.boot;
+
+import lombok.Data;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+
+@Data
+@ConfigurationProperties("graphiql")
+class GraphiQLProperties {
+
+    private CodeMirror codeMirror = new CodeMirror();
+    private Props props = new Props();
+
+    @Data
+    static class CodeMirror {
+        private String version = "5.47.0";
+    }
+
+    @Data
+    static class Props {
+
+        private Variables variables = new Variables();
+
+        @Data
+        static class Variables {
+            private String editorTheme;
+        }
+    }
+}

graphiql-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/graphiql/boot/PropsLoader.java

@@ -16,7 +16,7 @@ class PropsLoader {
 
     private static final String GRAPHIQL_PROPS_PREFIX = "graphiql.props.";
     private static final String GRAPHIQL_PROPS_RESOURCES_PREFIX = GRAPHIQL_PROPS_PREFIX + "resources.";
-    private static final String GRAPHIQL_PROPS_VALUES_PREFIX = GRAPHIQL_PROPS_PREFIX + "values.";
+    private static final String GRAPHIQL_PROPS_VALUES_PREFIX = GRAPHIQL_PROPS_PREFIX + "variables.";
 
     private Environment environment;
 

graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html

@@ -41,6 +41,17 @@
     Loading…
 </div>
 <script>
+    var editorThemeCss = '${editorThemeCss}'
+    if (editorThemeCss !== '') {
+        var link = document.createElement( "link" );
+        link.href = editorThemeCss;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+        link.media = "screen,print";
+
+        document.getElementsByTagName( "head" )[0].appendChild( link );
+    }
+
     // Parse the search string to get url parameters.
     var search = window.location.search;
     var parameters = {};
@@ -55,8 +66,7 @@
     // if variables was provided, try to format it.
     if (parameters.variables) {
         try {
-            parameters.variables =
-                JSON.stringify(JSON.parse(parameters.variables), null, 2);
+            parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2);
         } catch (e) {
             // Do nothing, we want to display the invalid JSON as a string, rather
             // than present an error.
@@ -84,8 +94,7 @@
         var newSearch = '?' + Object.keys(parameters).filter(function (key) {
             return Boolean(parameters[key]);
         }).map(function (key) {
-            return encodeURIComponent(key) + '=' +
-                encodeURIComponent(parameters[key]);
+            return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]);
         }).join('&');
         history.replaceState(null, null, newSearch);
     }
@@ -114,8 +123,7 @@
         });
     }
 
-    var loc = window.location,
-        newUri;
+    var loc = window.location, newUri;
 
     if (loc.protocol === "https:") {
         newUri = "wss:";
@@ -149,7 +157,7 @@
     // Render <GraphiQL /> into the body.
     ReactDOM.render(
         React.createElement(GraphiQL, props),
-        document.body
+        document.getElementById("splash")
     );
 
 </script>