@matdata/yasqe 5.2.0 → 5.4.0

package/grammar/_tokenizer-table.d.ts

@@ -0,0 +1,9 @@
+export interface TokenizerTable {
+  [key: string]: any;
+}
+
+export const table: TokenizerTable;
+export const keywords: any;
+export const punct: any;
+export const acceptEmpty: any;
+export const startSymbol: string;

package/grammar/tokenizer.ts

@@ -36,6 +36,10 @@ export interface State {
   lastPredicateOffset: number;
   currentPnameNs: string | undefined;
   possibleFullIri: boolean;
+  inConstructTemplate: boolean;
+  seenWhereClause: boolean;
+  constructVariables: { [varName: string]: string };
+  whereVariables: { [varName: string]: string };
 }
 export interface Token {
   quotePos: "end" | "start" | "content" | undefined;
@@ -467,6 +471,13 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
         case "storeProperty":
           state.storeProperty = true;
           break;
+        case "constructTemplate":
+          state.inConstructTemplate = true;
+          break;
+        case "whereClause":
+          state.inConstructTemplate = false;
+          state.seenWhereClause = true;
+          break;
       }
     }
 
@@ -517,7 +528,18 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
       // Incremental LL1 parse
       while (state.stack.length > 0 && tokenCat && state.OK && !finished) {
         topSymbol = state.stack.pop();
-        if (topSymbol === "var" && tokenOb.string) state.variables[tokenOb.string] = tokenOb.string;
+        if (topSymbol === "var" && tokenOb.string) {
+          state.variables[tokenOb.string] = tokenOb.string;
+          // Track variables separately for CONSTRUCT template validation
+          if (state.queryType === "CONSTRUCT") {
+            if (state.inConstructTemplate) {
+              state.constructVariables[tokenOb.string] = tokenOb.string;
+            } else if (state.seenWhereClause) {
+              // Only track as WHERE variable if we've actually entered the WHERE clause
+              state.whereVariables[tokenOb.string] = tokenOb.string;
+            }
+          }
+        }
         if (!ll1_table[topSymbol]) {
           // Top symbol is a terminal
           if (topSymbol == tokenCat) {
@@ -721,6 +743,10 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
         errorMsg: undefined,
         inPrefixDecl: false,
         possibleFullIri: false,
+        inConstructTemplate: false,
+        seenWhereClause: false,
+        constructVariables: {},
+        whereVariables: {},
       };
     },
     indent: indent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasqe",
   "description": "Yet Another SPARQL Query Editor",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "main": "build/yasqe.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "@matdata/yasgui-utils": "^4.6.1",
     "codemirror": "^5.51.0",
     "lodash-es": "^4.17.15",
-    "query-string": "^6.10.1"
+    "query-string": "^6.10.1",
+    "sparql-formatter": "^1.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "0.0.100",

package/src/autocompleters/show-hint.scss

@@ -17,8 +17,7 @@
 
   background: white;
   font-size: 90%;
-  font-family: monospace;
-
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   max-height: 20em;
   overflow-y: auto;
 }

package/src/defaults.ts

@@ -27,7 +27,7 @@ SELECT * WHERE {
       rangeFinder: new (<any>CodeMirror).fold.combine((<any>CodeMirror).fold.brace, (<any>CodeMirror).fold.prefix),
     },
     collapsePrefixesOnLoad: false,
-    gutters: ["gutterErrorBar", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    gutters: ["gutterErrorBar", "gutterConstructWarning", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
     matchBrackets: true,
     fixedGutter: true,
     syntaxErrorCheck: true,
@@ -68,7 +68,7 @@ SELECT * WHERE {
       },
       "Shift-Ctrl-F": function (_yasqe: any) {
         const yasqe: Yasqe = _yasqe;
-        yasqe.autoformat();
+        yasqe.format();
       },
       "Ctrl-S": function (_yasqe: any) {
         const yasqe: Yasqe = _yasqe;
@@ -130,6 +130,36 @@ SELECT * WHERE {
     editorHeight: "300px",
     queryingDisabled: undefined,
     prefixCcApi: prefixCcApi,
+    showFormatButton: true,
+    checkConstructVariables: true,
+    snippets: [
+      {
+        label: "SELECT",
+        code: "SELECT * WHERE {\n  ?s ?p ?o .\n} LIMIT 10",
+        group: "Query Types",
+      },
+      {
+        label: "CONSTRUCT",
+        code: "CONSTRUCT {\n  ?s ?p ?o .\n} WHERE {\n  ?s ?p ?o .\n} LIMIT 10",
+        group: "Query Types",
+      },
+      {
+        label: "ASK",
+        code: "ASK {\n  ?s ?p ?o .\n}",
+        group: "Query Types",
+      },
+      {
+        label: "FILTER",
+        code: "FILTER (?var > 100)",
+        group: "Patterns",
+      },
+      {
+        label: "OPTIONAL",
+        code: "OPTIONAL {\n  ?s ?p ?o .\n}",
+        group: "Patterns",
+      },
+    ],
+    showSnippetsBar: true,
   };
   const requestConfig: PlainRequestConfig = {
     queryArgument: undefined, //undefined means: get query argument based on query mode

package/src/imgs.ts

@@ -12,3 +12,9 @@ export var fullscreen =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
 export var fullscreenExit =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
+export var format =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3v18h18v-2H5V3H3zm14 4V5l-4 4 4 4V9h4V7h-4zM7 9v2h10V9H7zm0 4v2h10v-2H7zm0 4v2h10v-2H7z"/></svg>';
+export var snippet =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>';
+export var chevronDown =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>';

package/src/index.ts

@@ -11,11 +11,12 @@ import { drawSvgStringAsElement, addClass, removeClass } from "@matdata/yasgui-u
 import * as Sparql from "./sparql";
 import * as imgs from "./imgs";
 import * as Autocompleter from "./autocompleters";
-import { merge, escape } from "lodash-es";
+import { merge, mergeWith, escape } from "lodash-es";
 
 import getDefaults from "./defaults";
 import CodeMirror from "./CodeMirror";
 import { YasqeAjaxConfig } from "./sparql";
+import { spfmt } from "sparql-formatter";
 
 export interface Yasqe {
   on(eventName: "query", handler: (instance: Yasqe, req: Request, abortController?: AbortController) => void): void;
@@ -55,6 +56,8 @@ export class Yasqe extends CodeMirror {
   private fullscreenBtn: HTMLButtonElement | undefined;
   private isFullscreen: boolean = false;
   private resizeWrapper?: HTMLDivElement;
+  private snippetsBar?: HTMLDivElement;
+  private snippetsClickHandler?: (e: MouseEvent) => void;
   public rootEl: HTMLDivElement;
   public storage: YStorage;
   public config: Config;
@@ -65,7 +68,13 @@ export class Yasqe extends CodeMirror {
     this.rootEl = document.createElement("div");
     this.rootEl.className = "yasqe";
     parent.appendChild(this.rootEl);
-    this.config = merge({}, Yasqe.defaults, conf);
+    // Use mergeWith to replace arrays instead of merging them by index
+    // This ensures that snippets: [] properly overrides default snippets
+    this.config = mergeWith({}, Yasqe.defaults, conf, (objValue: any, srcValue: any) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
     //inherit codemirror props
     const cm = (CodeMirror as any)(this.rootEl, this.config);
     //Assign our functions to the cm object. This is needed, as some functions (like the ctrl-enter callback)
@@ -79,18 +88,36 @@ export class Yasqe extends CodeMirror {
     //Do some post processing
     this.storage = new YStorage(Yasqe.storageNamespace);
     this.drawButtons();
+    this.drawSnippetsBar();
     const storageId = this.getStorageId();
     // this.getWrapperElement
     if (storageId) {
       const persConf = this.storage.get<any>(storageId);
       if (persConf && typeof persConf === "string") {
-        this.persistentConfig = { query: persConf, editorHeight: this.config.editorHeight }; // Migrate to object based localstorage
+        this.persistentConfig = { query: persConf, editorHeight: this.config.editorHeight };
       } else {
         this.persistentConfig = persConf;
       }
       if (!this.persistentConfig)
         this.persistentConfig = { query: this.getValue(), editorHeight: this.config.editorHeight };
+
+      // Ensure autoformatOnQuery is true by default
+      if (this.persistentConfig && typeof this.persistentConfig.autoformatOnQuery === "undefined") {
+        this.persistentConfig.autoformatOnQuery = true;
+      }
+
       if (this.persistentConfig && this.persistentConfig.query) this.setValue(this.persistentConfig.query);
+    } else {
+      // If no storage, ensure persistentConfig exists and autoformatOnQuery is true
+      if (!this.persistentConfig) {
+        this.persistentConfig = {
+          query: this.getValue(),
+          editorHeight: this.config.editorHeight,
+          autoformatOnQuery: true,
+        };
+      } else if (typeof this.persistentConfig.autoformatOnQuery === "undefined") {
+        this.persistentConfig.autoformatOnQuery = true;
+      }
     }
     this.config.autocompleters.forEach((c) => this.enableCompleter(c).then(() => {}, console.warn));
     if (this.config.consumeShareLink) {
@@ -99,6 +126,7 @@ export class Yasqe extends CodeMirror {
       window.addEventListener("hashchange", this.handleHashChange);
     }
     this.checkSyntax();
+    this.checkConstructVariables();
     // Size codemirror to the
     if (this.persistentConfig && this.persistentConfig.editorHeight) {
       this.getWrapperElement().style.height = this.persistentConfig.editorHeight;
@@ -115,6 +143,7 @@ export class Yasqe extends CodeMirror {
   };
   private handleChange() {
     this.checkSyntax();
+    this.checkConstructVariables();
     this.updateQueryButton();
   }
   private handleBlur() {
@@ -123,6 +152,7 @@ export class Yasqe extends CodeMirror {
   private handleChanges() {
     // e.g. handle blur
     this.checkSyntax();
+    this.checkConstructVariables();
     this.updateQueryButton();
   }
   private handleCursorActivity() {
@@ -347,6 +377,23 @@ export class Yasqe extends CodeMirror {
       this.updateQueryButton();
     }
 
+    /**
+     * Draw format btn
+     */
+    if (this.config.showFormatButton) {
+      const formatBtn = document.createElement("button");
+      addClass(formatBtn, "yasqe_formatButton");
+      const formatIcon = drawSvgStringAsElement(imgs.format);
+      addClass(formatIcon, "formatIcon");
+      formatBtn.appendChild(formatIcon);
+      formatBtn.onclick = () => {
+        this.format();
+      };
+      formatBtn.title = "Format query (Shift+Ctrl+F)";
+      formatBtn.setAttribute("aria-label", "Format query");
+      buttons.appendChild(formatBtn);
+    }
+
     /**
      * Draw fullscreen btn
      */
@@ -379,6 +426,165 @@ export class Yasqe extends CodeMirror {
   public getIsFullscreen() {
     return this.isFullscreen;
   }
+
+  private insertSnippet(code: string) {
+    const doc = this.getDoc();
+    const cursor = doc.getCursor();
+    doc.replaceRange(code, cursor);
+    // Move cursor to end of inserted code
+    const lines = code.split("\n");
+    const lastLine = lines[lines.length - 1];
+    doc.setCursor({
+      line: cursor.line + lines.length - 1,
+      ch: lines.length === 1 ? cursor.ch + lastLine.length : lastLine.length,
+    });
+    this.focus();
+  }
+
+  private drawSnippetsBar() {
+    // Check if snippets bar should be shown
+    const shouldShow =
+      this.config.showSnippetsBar &&
+      (this.persistentConfig?.showSnippetsBar === undefined || this.persistentConfig.showSnippetsBar) &&
+      this.config.snippets.length > 0;
+
+    if (!shouldShow) {
+      // Remove existing bar if present
+      if (this.snippetsBar) {
+        this.snippetsBar.remove();
+        this.snippetsBar = undefined;
+      }
+      return;
+    }
+
+    // Create snippets bar if it doesn't exist
+    if (!this.snippetsBar) {
+      this.snippetsBar = document.createElement("div");
+      addClass(this.snippetsBar, "yasqe_snippetsBar");
+      // Insert before the CodeMirror wrapper element
+      const cmWrapper = this.getWrapperElement();
+      cmWrapper.parentElement?.insertBefore(this.snippetsBar, cmWrapper);
+    }
+
+    // Clear existing content
+    this.snippetsBar.innerHTML = "";
+
+    const snippets = this.config.snippets;
+
+    // If 10 or fewer snippets, show all as buttons
+    if (snippets.length <= 10) {
+      snippets.forEach((snippet) => {
+        const btn = document.createElement("button");
+        addClass(btn, "yasqe_snippetButton");
+        btn.textContent = snippet.label;
+        btn.title = snippet.code;
+        btn.setAttribute("aria-label", `Insert ${snippet.label} snippet`);
+        btn.onclick = () => this.insertSnippet(snippet.code);
+        this.snippetsBar!.appendChild(btn);
+      });
+    } else {
+      // Group snippets by group property
+      const grouped: { [group: string]: Snippet[] } = {};
+      const ungrouped: Snippet[] = [];
+
+      snippets.forEach((snippet) => {
+        if (snippet.group) {
+          if (!grouped[snippet.group]) grouped[snippet.group] = [];
+          grouped[snippet.group].push(snippet);
+        } else {
+          ungrouped.push(snippet);
+        }
+      });
+
+      // Create dropdown for each group
+      Object.keys(grouped).forEach((groupName) => {
+        const dropdown = document.createElement("div");
+        addClass(dropdown, "yasqe_snippetDropdown");
+
+        const dropdownBtn = document.createElement("button");
+        addClass(dropdownBtn, "yasqe_snippetDropdownButton");
+        dropdownBtn.textContent = groupName + " ";
+        const chevron = drawSvgStringAsElement(imgs.chevronDown);
+        addClass(chevron, "chevronIcon");
+        dropdownBtn.appendChild(chevron);
+        dropdownBtn.setAttribute("aria-label", `${groupName} snippets`);
+        dropdownBtn.setAttribute("aria-expanded", "false");
+
+        const dropdownContent = document.createElement("div");
+        addClass(dropdownContent, "yasqe_snippetDropdownContent");
+        dropdownContent.setAttribute("role", "menu");
+
+        grouped[groupName].forEach((snippet) => {
+          const item = document.createElement("button");
+          addClass(item, "yasqe_snippetDropdownItem");
+          item.textContent = snippet.label;
+          item.title = snippet.code;
+          item.setAttribute("role", "menuitem");
+          item.onclick = () => {
+            this.insertSnippet(snippet.code);
+            dropdownContent.style.display = "none";
+            dropdownBtn.setAttribute("aria-expanded", "false");
+          };
+          dropdownContent.appendChild(item);
+        });
+
+        dropdownBtn.onclick = (e) => {
+          e.stopPropagation();
+          const isOpen = dropdownContent.style.display === "block";
+          // Close all other dropdowns
+          const allDropdowns = this.snippetsBar!.querySelectorAll(".yasqe_snippetDropdownContent");
+          allDropdowns.forEach((dd) => {
+            (dd as HTMLElement).style.display = "none";
+          });
+          const allButtons = this.snippetsBar!.querySelectorAll(".yasqe_snippetDropdownButton");
+          allButtons.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
+
+          // Toggle this dropdown
+          if (!isOpen) {
+            dropdownContent.style.display = "block";
+            dropdownBtn.setAttribute("aria-expanded", "true");
+          }
+        };
+
+        dropdown.appendChild(dropdownBtn);
+        dropdown.appendChild(dropdownContent);
+        this.snippetsBar!.appendChild(dropdown);
+      });
+
+      // Add ungrouped snippets as individual buttons
+      ungrouped.forEach((snippet) => {
+        const btn = document.createElement("button");
+        addClass(btn, "yasqe_snippetButton");
+        btn.textContent = snippet.label;
+        btn.title = snippet.code;
+        btn.setAttribute("aria-label", `Insert ${snippet.label} snippet`);
+        btn.onclick = () => this.insertSnippet(snippet.code);
+        this.snippetsBar!.appendChild(btn);
+      });
+    }
+
+    // Set up click handler for closing dropdowns when clicking outside
+    // Remove any existing handler first
+    if (this.snippetsClickHandler) {
+      document.removeEventListener("click", this.snippetsClickHandler);
+    }
+
+    // Create and store the handler
+    this.snippetsClickHandler = (e: MouseEvent) => {
+      if (this.snippetsBar && !this.snippetsBar.contains(e.target as Node)) {
+        const allDropdowns = this.snippetsBar.querySelectorAll(".yasqe_snippetDropdownContent");
+        allDropdowns.forEach((dd) => {
+          (dd as HTMLElement).style.display = "none";
+        });
+        const allButtons = this.snippetsBar.querySelectorAll(".yasqe_snippetDropdownButton");
+        allButtons.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
+      }
+    };
+
+    // Add the handler
+    document.addEventListener("click", this.snippetsClickHandler);
+  }
+
   private drawResizer() {
     if (this.resizeWrapper) return;
     this.resizeWrapper = document.createElement("div");
@@ -643,6 +849,32 @@ export class Yasqe extends CodeMirror {
       }
     });
   }
+
+  public formatQuery() {
+    try {
+      const currentQuery = this.getValue();
+      const formatted = spfmt.format(currentQuery);
+      this.setValue(formatted);
+      // Collapse prefixes after formatting
+      this.collapsePrefixes(true);
+    } catch (error) {
+      console.warn(
+        "Failed to format SPARQL query using sparql-formatter. This may be due to syntax errors in the query. Falling back to legacy formatter.",
+        error,
+      );
+      // If formatting fails, fall back to the built-in autoformat
+      this.autoformat();
+    }
+  }
+
+  public format() {
+    const formatterType = this.persistentConfig?.formatterType || "sparql-formatter";
+    if (formatterType === "legacy") {
+      this.autoformat();
+    } else {
+      this.formatQuery();
+    }
+  }
   //values in the form of {?var: 'value'}, or [{?var: 'value'}]
   public getQueryWithValues(values: string | { [varName: string]: string } | Array<{ [varName: string]: string }>) {
     if (!values) return this.getValue();
@@ -709,6 +941,7 @@ export class Yasqe extends CodeMirror {
   public setCheckSyntaxErrors(isEnabled: boolean) {
     this.config.syntaxErrorCheck = isEnabled;
     this.checkSyntax();
+    this.checkConstructVariables();
   }
   public checkSyntax() {
     this.queryValid = true;
@@ -765,6 +998,77 @@ export class Yasqe extends CodeMirror {
       }
     }
   }
+
+  public setCheckConstructVariables(isEnabled: boolean) {
+    this.config.checkConstructVariables = isEnabled;
+    if (!isEnabled) {
+      // Clear any existing warnings when disabled
+      this.clearGutter("gutterConstructWarning");
+    } else {
+      this.checkConstructVariables();
+    }
+  }
+
+  public checkConstructVariables() {
+    // Clear any existing warnings first
+    this.clearGutter("gutterConstructWarning");
+
+    // Only check if enabled, query is valid, and it's a CONSTRUCT query
+    if (!this.config.checkConstructVariables || !this.queryValid || this.getQueryType() !== "CONSTRUCT") {
+      return;
+    }
+
+    // Get the final state after parsing the entire query
+    const lastLine = this.getDoc().lastLine();
+    const token: Token = this.getTokenAt({ line: lastLine, ch: this.getDoc().getLine(lastLine).length }, true);
+
+    const state = token.state as TokenizerState;
+
+    // Check for undefined variables in CONSTRUCT template
+    const undefinedVars: string[] = [];
+    for (const varName in state.constructVariables) {
+      if (!state.whereVariables[varName]) {
+        undefinedVars.push(varName);
+      }
+    }
+
+    if (undefinedVars.length === 0) {
+      return;
+    }
+
+    // Find lines where undefined variables are used in CONSTRUCT template
+    // Note: This iterates through all lines but filters by inConstructTemplate flag
+    // For large queries, this could be optimized by tracking line ranges during tokenization
+    for (let l = 0; l < this.getDoc().lineCount(); ++l) {
+      const lineToken: Token = this.getTokenAt({ line: l, ch: this.getDoc().getLine(l).length }, true);
+      const lineState = lineToken.state as TokenizerState;
+
+      // Only mark variables in the CONSTRUCT template
+      if (lineState.queryType === "CONSTRUCT" && lineState.inConstructTemplate) {
+        const line = this.getDoc().getLine(l);
+        // Check if this line contains any undefined variable (use word boundary to avoid partial matches)
+        for (const undefinedVar of undefinedVars) {
+          // Escape special regex characters in variable name
+          // Use negative lookbehind/lookahead to ensure we match the full variable name
+          // Variables can be followed by whitespace, punctuation, or end of line
+          const escapedVar = undefinedVar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          const varRegex = new RegExp(`${escapedVar}(?![a-zA-Z0-9_])`);
+          if (varRegex.test(line)) {
+            const warningEl = drawSvgStringAsElement(imgs.warning);
+            warningEl.className = "constructVariableWarning";
+            tooltip(
+              this,
+              warningEl,
+              escape(`Variable ${undefinedVar} is used in CONSTRUCT but not defined in WHERE clause`),
+            );
+            this.setGutterMarker(l, "gutterConstructWarning", warningEl);
+            break; // Only one marker per line
+          }
+        }
+      }
+    }
+  }
+
   /**
    * Token management
    */
@@ -818,6 +1122,31 @@ export class Yasqe extends CodeMirror {
     }
   }
 
+  /**
+   * Snippets management
+   */
+  public setSnippetsBarVisible(visible: boolean) {
+    if (!this.persistentConfig) {
+      this.persistentConfig = {
+        query: this.getValue(),
+        editorHeight: this.config.editorHeight,
+        showSnippetsBar: visible,
+      };
+    } else {
+      this.persistentConfig.showSnippetsBar = visible;
+    }
+    this.saveQuery();
+    this.drawSnippetsBar();
+  }
+
+  public getSnippetsBarVisible(): boolean {
+    return (
+      this.config.showSnippetsBar &&
+      (this.persistentConfig?.showSnippetsBar === undefined || this.persistentConfig.showSnippetsBar) &&
+      this.config.snippets.length > 0
+    );
+  }
+
   /**
    * Autocompleter management
    */
@@ -875,6 +1204,10 @@ export class Yasqe extends CodeMirror {
    */
   public query(config?: Sparql.YasqeAjaxConfig) {
     if (this.config.queryingDisabled) return Promise.reject("Querying is disabled.");
+    // Auto-format query before execution if enabled in persistent config
+    if (this.persistentConfig?.autoformatOnQuery) {
+      this.format();
+    }
     // Abort previous request
     this.abortQuery();
     return Sparql.executeQuery(this, config);
@@ -929,6 +1262,10 @@ export class Yasqe extends CodeMirror {
     this.unregisterEventListeners();
     this.resizeWrapper?.removeEventListener("mousedown", this.initDrag, false);
     this.resizeWrapper?.removeEventListener("dblclick", this.expandEditor);
+    if (this.snippetsClickHandler) {
+      document.removeEventListener("click", this.snippetsClickHandler);
+      this.snippetsClickHandler = undefined;
+    }
     for (const autocompleter in this.autocompleters) {
       this.disableCompleter(autocompleter);
     }
@@ -1044,6 +1381,12 @@ export type PlainRequestConfig = {
 export type PartialConfig = {
   [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];
 };
+
+export interface Snippet {
+  label: string;
+  code: string;
+  group?: string;
+}
 export interface Config extends Partial<CodeMirror.EditorConfiguration> {
   mode: string;
   collapsePrefixesOnLoad: boolean;
@@ -1081,10 +1424,17 @@ export interface Config extends Partial<CodeMirror.EditorConfiguration> {
   editorHeight: string;
   queryingDisabled: string | undefined; // The string will be the message displayed when hovered
   prefixCcApi: string; // the suggested default prefixes URL API getter
+  showFormatButton: boolean; // Show a button to format the query
+  checkConstructVariables: boolean; // Check for undefined variables in CONSTRUCT queries
+  snippets: Snippet[]; // Code snippets to show in the snippets bar
+  showSnippetsBar: boolean; // Show the snippets bar
 }
 export interface PersistentConfig {
   query: string;
   editorHeight: string;
+  formatterType?: "sparql-formatter" | "legacy"; // Which formatter to use
+  autoformatOnQuery?: boolean; // Auto-format query on execution
+  showSnippetsBar?: boolean; // User preference for snippets bar visibility
 }
 // export var _Yasqe = _Yasqe;
 

package/src/prefixFold.ts

@@ -15,6 +15,7 @@ export function findFirstPrefixLine(yasqe: Yasqe) {
 
 export function findFirstPrefix(yasqe: Yasqe, line: number, startFromCharIndex = 0, lineText?: string) {
   if (!lineText) lineText = yasqe.getDoc().getLine(line);
+  if (!lineText) return undefined;
   lineText = lineText.toUpperCase();
   const charIndex = lineText.indexOf(PREFIX_KEYWORD, startFromCharIndex);
   if (charIndex >= 0) {

package/src/prefixUtils.ts

@@ -30,7 +30,10 @@ export function removePrefixes(yasqe: Yasqe, prefixes: Prefixes) {
     yasqe.setValue(
       yasqe
         .getValue()
-        .replace(new RegExp("PREFIX\\s*" + pref + ":\\s*" + escapeRegex("<" + prefixes[pref] + ">") + "\\s*", "ig"), "")
+        .replace(
+          new RegExp("PREFIX\\s*" + pref + ":\\s*" + escapeRegex("<" + prefixes[pref] + ">") + "\\s*", "ig"),
+          "",
+        ),
     );
   }
   yasqe.collapsePrefixes(false);
@@ -48,7 +51,7 @@ export function getPrefixesFromQuery(yasqe: Yasqe): Token["state"]["prefixes"] {
   //as https://github.com/TriplyDB/YASGUI/issues/84)
   return yasqe.getTokenAt(
     { line: yasqe.getDoc().lastLine(), ch: yasqe.getDoc().getLine(yasqe.getDoc().lastLine()).length },
-    true
+    true,
   ).state.prefixes;
 }