@matdata/yasgui 5.11.0 → 5.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/PersistentConfig.ts

@@ -19,6 +19,8 @@ export interface PersistedJson {
   orientation?: "vertical" | "horizontal";
   showSnippetsBar?: boolean;
   disabledDevButtons?: string[]; // Endpoints of developer-configured buttons that are disabled by user
+  codeMirrorThemeLight?: string; // User-selected CodeMirror theme for light mode
+  codeMirrorThemeDark?: string; // User-selected CodeMirror theme for dark mode
 }
 function getDefaults(): PersistedJson {
   return {
@@ -182,6 +184,19 @@ export default class PersistentConfig {
     this.toStorage();
   }
 
+  public getCodeMirrorTheme(mode: "light" | "dark"): string | undefined {
+    return mode === "dark" ? this.persistedJson.codeMirrorThemeDark : this.persistedJson.codeMirrorThemeLight;
+  }
+
+  public setCodeMirrorTheme(mode: "light" | "dark", theme: string) {
+    if (mode === "dark") {
+      this.persistedJson.codeMirrorThemeDark = theme;
+    } else {
+      this.persistedJson.codeMirrorThemeLight = theme;
+    }
+    this.toStorage();
+  }
+
   // New endpoint configuration methods
   public getEndpointConfigs(): EndpointConfig[] {
     return this.persistedJson.endpointConfigs || [];

package/src/Tab.ts

@@ -1216,9 +1216,10 @@ export class Tab extends EventEmitter {
   }
 
   private initYasqe() {
-    // Set theme based on current yasgui theme
+    // Set theme based on stored preference for current mode
     const currentTheme = this.yasgui.getTheme();
-    const cmTheme = currentTheme === "dark" ? "material-palenight" : "default";
+    const storedCmTheme = this.yasgui.persistentConfig.getCodeMirrorTheme(currentTheme);
+    const cmTheme = storedCmTheme || (currentTheme === "dark" ? "github-dark" : "default");
 
     const yasqeConf: Partial<YasqeConfig> = {
       ...this.yasgui.config.yasqe,

package/src/TabSettingsModal.ts

@@ -358,6 +358,123 @@ export default class TabSettingsModal {
       return;
     }
 
+    // Available CodeMirror themes
+    const themes = [
+      { value: "default", label: "Default" },
+      { value: "github-dark", label: "GitHub Dark Default" },
+      { value: "material-palenight", label: "Material Palenight" },
+      { value: "monokai", label: "Monokai" },
+      { value: "dracula", label: "Dracula" },
+      { value: "nord", label: "Nord" },
+      { value: "solarized dark", label: "Solarized Dark" },
+      { value: "solarized light", label: "Solarized Light" },
+      { value: "twilight", label: "Twilight" },
+      { value: "material", label: "Material" },
+      { value: "cobalt", label: "Cobalt" },
+      { value: "darcula", label: "Darcula" },
+      { value: "gruvbox-dark", label: "Gruvbox Dark" },
+      { value: "oceanic-next", label: "Oceanic Next" },
+      { value: "material-darker", label: "Material Darker" },
+      { value: "blackboard", label: "Blackboard" },
+      { value: "base16-dark", label: "Base16 Dark" },
+      { value: "base16-light", label: "Base16 Light" },
+      { value: "eclipse", label: "Eclipse" },
+      { value: "elegant", label: "Elegant" },
+      { value: "idea", label: "IntelliJ IDEA" },
+      { value: "mbo", label: "MBO" },
+      { value: "neat", label: "Neat" },
+      { value: "neo", label: "Neo" },
+      { value: "night", label: "Night" },
+      { value: "paraiso-dark", label: "Paraiso Dark" },
+      { value: "paraiso-light", label: "Paraiso Light" },
+      { value: "pastel-on-dark", label: "Pastel on Dark" },
+      { value: "rubyblue", label: "Ruby Blue" },
+      { value: "the-matrix", label: "The Matrix" },
+      { value: "tomorrow-night-bright", label: "Tomorrow Night Bright" },
+      { value: "tomorrow-night-eighties", label: "Tomorrow Night 80s" },
+      { value: "vibrant-ink", label: "Vibrant Ink" },
+      { value: "xq-dark", label: "XQ Dark" },
+      { value: "xq-light", label: "XQ Light" },
+    ];
+
+    // Light Mode Theme Section
+    const themeLightSection = document.createElement("div");
+    addClass(themeLightSection, "settingsSection");
+
+    const themeLightLabel = document.createElement("label");
+    themeLightLabel.textContent = "Editor Theme (Light Mode)";
+    addClass(themeLightLabel, "settingsLabel");
+
+    const themeLightHelp = document.createElement("div");
+    themeLightHelp.textContent = "Syntax highlighting theme when using light mode.";
+    addClass(themeLightHelp, "settingsHelp");
+
+    const themeLightSelect = document.createElement("select");
+    themeLightSelect.id = "codeMirrorThemeLightSelect";
+    addClass(themeLightSelect, "settingsSelect");
+
+    themes.forEach((theme) => {
+      const option = document.createElement("option");
+      option.value = theme.value;
+      option.textContent = theme.label;
+      themeLightSelect.appendChild(option);
+    });
+
+    const storedLightTheme = this.tab.yasgui.persistentConfig.getCodeMirrorTheme("light");
+    themeLightSelect.value = storedLightTheme || "default";
+
+    themeLightSection.appendChild(themeLightLabel);
+    themeLightSection.appendChild(themeLightHelp);
+    themeLightSection.appendChild(themeLightSelect);
+    container.appendChild(themeLightSection);
+
+    // Dark Mode Theme Section
+    const themeDarkSection = document.createElement("div");
+    addClass(themeDarkSection, "settingsSection");
+
+    const themeDarkLabel = document.createElement("label");
+    themeDarkLabel.textContent = "Editor Theme (Dark Mode)";
+    addClass(themeDarkLabel, "settingsLabel");
+
+    const themeDarkHelp = document.createElement("div");
+    themeDarkHelp.textContent = "Syntax highlighting theme when using dark mode.";
+    addClass(themeDarkHelp, "settingsHelp");
+
+    const themeDarkSelect = document.createElement("select");
+    themeDarkSelect.id = "codeMirrorThemeDarkSelect";
+    addClass(themeDarkSelect, "settingsSelect");
+
+    themes.forEach((theme) => {
+      const option = document.createElement("option");
+      option.value = theme.value;
+      option.textContent = theme.label;
+      themeDarkSelect.appendChild(option);
+    });
+
+    const storedDarkTheme = this.tab.yasgui.persistentConfig.getCodeMirrorTheme("dark");
+    themeDarkSelect.value = storedDarkTheme || "material-palenight";
+
+    themeDarkSection.appendChild(themeDarkLabel);
+    themeDarkSection.appendChild(themeDarkHelp);
+    themeDarkSection.appendChild(themeDarkSelect);
+    container.appendChild(themeDarkSection);
+
+    // Theme reference link
+    const themeReferenceSection = document.createElement("div");
+    addClass(themeReferenceSection, "settingsSection");
+
+    const themeReferenceLink = document.createElement("a");
+    themeReferenceLink.href = "https://codemirror.net/5/demo/theme.html";
+    themeReferenceLink.target = "_blank";
+    themeReferenceLink.rel = "noopener noreferrer";
+    themeReferenceLink.textContent = "Preview CodeMirror themes →";
+    themeReferenceLink.style.display = "inline-block";
+    themeReferenceLink.style.marginTop = "5px";
+    themeReferenceLink.style.fontSize = "13px";
+
+    themeReferenceSection.appendChild(themeReferenceLink);
+    container.appendChild(themeReferenceSection);
+
     // Formatter Type Section
     const formatterSection = document.createElement("div");
     addClass(formatterSection, "settingsSection");
@@ -1355,10 +1472,39 @@ export default class TabSettingsModal {
     // Save editor settings
     const yasqe = this.tab.getYasqe();
     if (yasqe && yasqe.persistentConfig) {
+      const codeMirrorThemeLightSelect = document.getElementById("codeMirrorThemeLightSelect") as HTMLSelectElement;
+      const codeMirrorThemeDarkSelect = document.getElementById("codeMirrorThemeDarkSelect") as HTMLSelectElement;
       const formatterSelect = document.getElementById("formatterTypeSelect") as HTMLSelectElement;
       const autoformatCheckbox = document.getElementById("autoformatOnQuery") as HTMLInputElement;
       const constructValidationCheckbox = document.getElementById("checkConstructVariables") as HTMLInputElement;
 
+      // Save CodeMirror themes for both light and dark modes
+      if (codeMirrorThemeLightSelect) {
+        const selectedTheme = codeMirrorThemeLightSelect.value;
+        this.tab.yasgui.persistentConfig.setCodeMirrorTheme("light", selectedTheme);
+      }
+
+      if (codeMirrorThemeDarkSelect) {
+        const selectedTheme = codeMirrorThemeDarkSelect.value;
+        this.tab.yasgui.persistentConfig.setCodeMirrorTheme("dark", selectedTheme);
+      }
+
+      // Apply the appropriate theme based on current mode
+      const currentMode = this.tab.yasgui.getTheme();
+      const themeToApply =
+        currentMode === "dark"
+          ? codeMirrorThemeDarkSelect?.value || "material-palenight"
+          : codeMirrorThemeLightSelect?.value || "default";
+
+      // Apply theme to all CodeMirror instances
+      const cmElements = document.querySelectorAll(".CodeMirror");
+      cmElements.forEach((element) => {
+        const cm = (element as any).CodeMirror;
+        if (cm && cm.setOption) {
+          cm.setOption("theme", themeToApply);
+        }
+      });
+
       if (formatterSelect) {
         yasqe.persistentConfig.formatterType = formatterSelect.value as "sparql-formatter" | "legacy";
       }

package/src/ThemeManager.ts

@@ -1,4 +1,5 @@
 import { Storage as YStorage } from "@matdata/yasgui-utils";
+import PersistentConfig from "./PersistentConfig";
 
 export type Theme = "light" | "dark";
 
@@ -7,6 +8,7 @@ export class ThemeManager {
   private storage: YStorage;
   private currentTheme: Theme;
   private rootElement: HTMLElement;
+  private persistentConfig?: PersistentConfig;
 
   constructor(rootElement: HTMLElement) {
     this.storage = new YStorage("yasgui");
@@ -15,6 +17,13 @@ export class ThemeManager {
     this.applyTheme(this.currentTheme);
   }
 
+  /**
+   * Set PersistentConfig for accessing CodeMirror theme preference
+   */
+  public setPersistentConfig(persistentConfig: PersistentConfig): void {
+    this.persistentConfig = persistentConfig;
+  }
+
   /**
    * Get the currently active theme
    */
@@ -61,7 +70,15 @@ export class ThemeManager {
    * Update CodeMirror theme for all Yasqe editors
    */
   private updateCodeMirrorTheme(theme: Theme): void {
-    const cmTheme = theme === "dark" ? "material-palenight" : "default";
+    // Get user's stored CodeMirror theme preference for the current mode, or use default
+    let cmTheme: string;
+    if (this.persistentConfig) {
+      const storedTheme = this.persistentConfig.getCodeMirrorTheme(theme);
+      cmTheme = storedTheme || (theme === "dark" ? "material-palenight" : "default");
+    } else {
+      // Fallback if persistentConfig not yet available
+      cmTheme = theme === "dark" ? "material-palenight" : "default";
+    }
 
     // Find all CodeMirror instances within the root element
     const cmElements = this.rootElement.querySelectorAll(".CodeMirror");

package/src/github-dark-theme.scss

@@ -0,0 +1,167 @@
+// GitHub Dark Default CodeMirror Theme
+// Based on GitHub's dark default color scheme
+
+.cm-s-github-dark.CodeMirror {
+  background-color: #0d1117;
+  color: #c9d1d9;
+}
+
+// Selection styles - using GitHub's subtle blue highlight
+.cm-s-github-dark div.CodeMirror-selected {
+  background: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark.CodeMirror ::selection {
+  background: rgba(56, 138, 253, 0.308) !important;
+}
+
+.cm-s-github-dark.CodeMirror ::-moz-selection {
+  background: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark .CodeMirror-line::selection,
+.cm-s-github-dark .CodeMirror-line > span::selection,
+.cm-s-github-dark .CodeMirror-line > span > span::selection {
+  background: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark .CodeMirror-line::-moz-selection,
+.cm-s-github-dark .CodeMirror-line > span::-moz-selection,
+.cm-s-github-dark .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark .CodeMirror-gutters {
+  background: #0d1117;
+  border-right: 1px solid #30363d;
+}
+
+.cm-s-github-dark .CodeMirror-guttermarker {
+  color: #c9d1d9;
+}
+
+.cm-s-github-dark .CodeMirror-guttermarker-subtle {
+  color: #6e7681;
+}
+
+.cm-s-github-dark .CodeMirror-linenumber {
+  color: #6e7681;
+}
+
+.cm-s-github-dark .CodeMirror-cursor {
+  border-left: 1px solid #c9d1d9;
+}
+
+// SPARQL syntax highlighting - GitHub Dark Default colors
+.cm-s-github-dark span.cm-keyword {
+  color: #ff7b72; // Keywords (SELECT, WHERE, PREFIX, etc.)
+}
+
+.cm-s-github-dark span.cm-atom {
+  color: #79c0ff; // Variables (?var, $var)
+}
+
+.cm-s-github-dark span.cm-string {
+  color: #a5d6ff; // Literals in quotes
+}
+
+.cm-s-github-dark span.cm-string-2 {
+  color: #ffa657; // Prefixed names (rdf:type, foaf:name)
+}
+
+.cm-s-github-dark span.cm-variable-3 {
+  color: #d2a8ff; // URIs in angle brackets
+}
+
+.cm-s-github-dark span.cm-number {
+  color: #79c0ff; // Numbers
+}
+
+.cm-s-github-dark span.cm-comment {
+  color: #8b949e; // Comments
+  font-style: italic;
+}
+
+.cm-s-github-dark span.cm-meta {
+  color: #ffa657; // Metadata
+}
+
+.cm-s-github-dark span.cm-operator {
+  color: #ff7b72; // Operators
+}
+
+.cm-s-github-dark span.cm-qualifier {
+  color: #79c0ff; // Qualifiers
+}
+
+.cm-s-github-dark span.cm-property {
+  color: #79c0ff; // Properties
+}
+
+.cm-s-github-dark span.cm-variable {
+  color: #c9d1d9; // Default variables
+}
+
+.cm-s-github-dark span.cm-variable-2 {
+  color: #79c0ff;
+}
+
+.cm-s-github-dark span.cm-def {
+  color: #d2a8ff; // Definitions
+}
+
+.cm-s-github-dark span.cm-tag {
+  color: #7ee787; // Tags
+}
+
+.cm-s-github-dark span.cm-attribute {
+  color: #79c0ff; // Attributes
+}
+
+.cm-s-github-dark span.cm-builtin {
+  color: #ffa657; // Built-in functions
+}
+
+.cm-s-github-dark span.cm-bracket {
+  color: #c9d1d9; // Brackets
+}
+
+.cm-s-github-dark span.cm-error {
+  color: #f85149;
+  border-bottom: 2px dotted #f85149;
+}
+
+// Active line
+.cm-s-github-dark .CodeMirror-activeline-background {
+  background: rgba(110, 118, 129, 0.1);
+}
+
+// Matching brackets
+.cm-s-github-dark .CodeMirror-matchingbracket {
+  color: #7ee787 !important;
+  background-color: rgba(46, 160, 67, 0.15);
+  text-decoration: underline;
+}
+
+.cm-s-github-dark .CodeMirror-nonmatchingbracket {
+  color: #ff7b72 !important;
+  background-color: rgba(248, 81, 73, 0.15);
+}
+
+// Search highlighting
+.cm-s-github-dark .CodeMirror-searching {
+  background-color: rgba(255, 206, 0, 0.4);
+}
+
+// Override match highlight to use subtle selection color
+.cm-s-github-dark .cm-matchhighlight {
+  background-color: rgba(56, 138, 253, 0.5) !important;
+}
+
+.cm-s-github-dark .CodeMirror-focused .CodeMirror-selected {
+  background: rgba(56, 138, 253, 0.5) !important;
+}

package/src/index.ts

@@ -19,6 +19,7 @@ import { ThemeManager, Theme } from "./ThemeManager";
 import QueryBrowser from "./queryManagement/QueryBrowser";
 import "./index.scss";
 import "./themes.scss";
+import "./github-dark-theme.scss";
 import "../../yasr/src/scss/global.scss";
 import "codemirror/theme/material-palenight.css";
 
@@ -171,6 +172,9 @@ export class Yasgui extends EventEmitter {
     this.themeManager.listenToSystemTheme();
     this.persistentConfig = new PersistentConfig(this);
 
+    // Set persistentConfig reference in ThemeManager so it can access CodeMirror theme preference
+    this.themeManager.setPersistentConfig(this.persistentConfig);
+
     // Load persisted showSnippetsBar if available
     const persistedShowSnippetsBar = this.persistentConfig.getShowSnippetsBar();
     if (persistedShowSnippetsBar !== undefined) {

package/src/themes.scss

@@ -52,49 +52,49 @@
 }
 
 [data-theme="dark"] {
-  // Dark theme colors
-  --yasgui-bg-primary: #1e1e1e;
-  --yasgui-bg-secondary: #252526;
-  --yasgui-bg-tertiary: #2d2d30;
-  --yasgui-bg-quaternary: #3e3e42;
-  --yasgui-text-primary: #d4d4d4;
-  --yasgui-text-secondary: #cccccc;
-  --yasgui-text-muted: #858585;
-  --yasgui-border-color: #3e3e42;
-  --yasgui-border-color-secondary: rgba(255, 255, 255, 0.15);
-  --yasgui-border-color-light: #3e3e42;
-  --yasgui-link-color: #4fc3f7;
-  --yasgui-link-hover: #81d4fa;
-  --yasgui-accent-color: #4fc3f7;
-  --yasgui-button-text: #cccccc;
-  --yasgui-button-hover: #ffffff;
-  --yasgui-chip-bg: #2d2d30;
-  --yasgui-chip-text: #cccccc;
-  --yasgui-tab-bg: #2d2d30;
-  --yasgui-tab-bg-active: #1e1e1e;
-  --yasgui-tab-border: #3e3e42;
-  --yasgui-tab-managed: #2b3c4b;
-  --yasgui-input-border: rgba(255, 255, 255, 0.15);
-  --yasgui-input-focus: #4fc3f7;
-  --yasgui-label-color: rgba(255, 255, 255, 0.6);
-  --yasgui-tooltip-bg: rgba(0, 0, 0, 1);
-  --yasgui-tooltip-text: #d4d4d4;
-  --yasgui-error-color: #f48771;
-  --yasgui-notification-bg: #2d2d30;
-  --yasgui-notification-text: #858585;
-  --yasgui-help-bg: #1a4d5e;
-  --yasgui-help-text: #4fc3f7;
-  --yasgui-fallback-bg: #252526;
-  --yasgui-fallback-border: #3e3e42;
-  --yasgui-resize-handle: #3e3e42;
-  --yasgui-nav-bg: #2d2d30;
-  --yasgui-match-highlight-bg: #3a4a5a;
-  --yasgui-endpoint-button-bg: #4fc3f7;
-  --yasgui-endpoint-button-border: #4fc3f7;
-  --yasgui-endpoint-button-text: #1e1e1e;
-  --yasgui-endpoint-button-hover-bg: #81d4fa;
-  --yasgui-endpoint-button-hover-border: #81d4fa;
-  --yasgui-endpoint-button-focus: #81d4fa;
+  // Dark theme colors - GitHub Dark Default inspired
+  --yasgui-bg-primary: #0d1117;
+  --yasgui-bg-secondary: #161b22;
+  --yasgui-bg-tertiary: #21262d;
+  --yasgui-bg-quaternary: #30363d;
+  --yasgui-text-primary: #c9d1d9;
+  --yasgui-text-secondary: #b1bac4;
+  --yasgui-text-muted: #8b949e;
+  --yasgui-border-color: #30363d;
+  --yasgui-border-color-secondary: rgba(240, 246, 252, 0.1);
+  --yasgui-border-color-light: #30363d;
+  --yasgui-link-color: #58a6ff;
+  --yasgui-link-hover: #79c0ff;
+  --yasgui-accent-color: #58a6ff;
+  --yasgui-button-text: #c9d1d9;
+  --yasgui-button-hover: #f0f6fc;
+  --yasgui-chip-bg: #21262d;
+  --yasgui-chip-text: #c9d1d9;
+  --yasgui-tab-bg: #0d1117;
+  --yasgui-tab-bg-active: #161b22;
+  --yasgui-tab-border: #30363d;
+  --yasgui-tab-managed: #1c2d41;
+  --yasgui-input-border: #30363d;
+  --yasgui-input-focus: #58a6ff;
+  --yasgui-label-color: #8b949e;
+  --yasgui-tooltip-bg: #161b22;
+  --yasgui-tooltip-text: #c9d1d9;
+  --yasgui-error-color: #f85149;
+  --yasgui-notification-bg: #21262d;
+  --yasgui-notification-text: #8b949e;
+  --yasgui-help-bg: #1c2d41;
+  --yasgui-help-text: #58a6ff;
+  --yasgui-fallback-bg: #161b22;
+  --yasgui-fallback-border: #30363d;
+  --yasgui-resize-handle: #30363d;
+  --yasgui-nav-bg: #161b22;
+  --yasgui-match-highlight-bg: #1f6feb;
+  --yasgui-endpoint-button-bg: #238636;
+  --yasgui-endpoint-button-border: #238636;
+  --yasgui-endpoint-button-text: #ffffff;
+  --yasgui-endpoint-button-hover-bg: #2ea043;
+  --yasgui-endpoint-button-hover-border: #2ea043;
+  --yasgui-endpoint-button-focus: #58a6ff;
 }
 
 // Apply theme colors to Yasgui components

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "5.11.0";
+export const VERSION = "5.12.0";