@matdata/yasqe 5.3.0 → 5.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasqe",
   "description": "Yet Another SPARQL Query Editor",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "main": "build/yasqe.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/__tests__/basicauth-test.ts

@@ -0,0 +1,66 @@
+/**
+ * Basic Authentication Tests
+ */
+
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+describe("Basic Authentication", () => {
+  describe("Base64 Encoding", () => {
+    it("should encode credentials correctly", () => {
+      const username = "testuser";
+      const password = "testpass";
+      const credentials = `${username}:${password}`;
+      const encoded = btoa(credentials);
+      const expected = "dGVzdHVzZXI6dGVzdHBhc3M=";
+
+      expect(encoded).to.equal(expected);
+    });
+
+    it("should handle special characters", () => {
+      const username = "user@example.com";
+      const password = "p@ss:word!";
+      const credentials = `${username}:${password}`;
+      const encoded = btoa(credentials);
+
+      // Verify it can be decoded back
+      const decoded = atob(encoded);
+      expect(decoded).to.equal(credentials);
+    });
+  });
+
+  describe("Authorization Header Format", () => {
+    it("should create proper Basic auth header", () => {
+      const username = "admin";
+      const password = "secret";
+      const credentials = `${username}:${password}`;
+      const encoded = btoa(credentials);
+      const header = `Basic ${encoded}`;
+
+      expect(header).to.equal("Basic YWRtaW46c2VjcmV0");
+      expect(header).to.match(/^Basic [A-Za-z0-9+/=]+$/);
+    });
+  });
+
+  describe("Empty Credentials", () => {
+    it("should handle empty username", () => {
+      const username = "";
+      const password = "password";
+      const credentials = `${username}:${password}`;
+      const encoded = btoa(credentials);
+
+      expect(encoded).to.be.a("string");
+      expect(encoded.length).to.be.greaterThan(0);
+    });
+
+    it("should handle empty password", () => {
+      const username = "user";
+      const password = "";
+      const credentials = `${username}:${password}`;
+      const encoded = btoa(credentials);
+
+      expect(encoded).to.be.a("string");
+      expect(encoded.length).to.be.greaterThan(0);
+    });
+  });
+});

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

@@ -132,6 +132,34 @@ SELECT * WHERE {
     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
@@ -146,6 +174,7 @@ SELECT * WHERE {
     headers: {},
     withCredentials: false,
     adjustQueryBeforeRequest: false,
+    basicAuth: undefined,
   };
   return { ...config, requestConfig };
 }

package/src/imgs.ts

@@ -14,3 +14,7 @@ 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,7 +11,7 @@ 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";
@@ -56,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;
@@ -66,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)
@@ -80,6 +88,7 @@ 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) {
@@ -417,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");
@@ -954,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
    */
@@ -1069,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);
     }
@@ -1164,6 +1361,10 @@ export interface HintConfig {
     ) => void;
   };
 }
+export interface BasicAuthConfig {
+  username: string;
+  password: string;
+}
 export interface RequestConfig<Y> {
   queryArgument: string | ((yasqe: Y) => string) | undefined;
   endpoint: string | ((yasqe: Y) => string);
@@ -1177,6 +1378,7 @@ export interface RequestConfig<Y> {
   headers: { [key: string]: string } | ((yasqe: Y) => { [key: string]: string });
   withCredentials: boolean | ((yasqe: Y) => boolean);
   adjustQueryBeforeRequest: ((yasqe: Y) => string) | false;
+  basicAuth: BasicAuthConfig | ((yasqe: Y) => BasicAuthConfig | undefined) | undefined;
 }
 export type PlainRequestConfig = {
   [K in keyof RequestConfig<any>]: Exclude<RequestConfig<any>[K], Function>;
@@ -1184,6 +1386,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;
@@ -1223,12 +1431,15 @@ export interface Config extends Partial<CodeMirror.EditorConfiguration> {
   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/scss/buttons.scss

@@ -292,4 +292,110 @@
       height: calc(100vh - 150px) !important;
     }
   }
+
+  .yasqe_snippetsBar {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    padding: 5px 10px;
+    background-color: var(--yasgui-bg-primary, #fff);
+    border-bottom: 1px solid var(--yasgui-border-color, #e3e3e3);
+    order: -1; // Place before CodeMirror in flex layout
+
+    .yasqe_snippetButton {
+      padding: 4px 10px;
+      font-size: 12px;
+      border: 1px solid var(--yasgui-border-color, #ccc);
+      background-color: var(--yasgui-bg-primary, #fff);
+      border-radius: 3px;
+      cursor: pointer;
+      white-space: nowrap;
+      color: var(--yasgui-text-primary, #333);
+
+      &:hover {
+        background-color: var(--yasgui-bg-secondary, #f0f0f0);
+        border-color: var(--yasgui-text-muted, #999);
+      }
+
+      &:active {
+        background-color: var(--yasgui-bg-tertiary, #e0e0e0);
+      }
+    }
+
+    .yasqe_snippetDropdown {
+      position: relative;
+      display: inline-block;
+
+      .yasqe_snippetDropdownButton {
+        padding: 4px 10px;
+        font-size: 12px;
+        border: 1px solid var(--yasgui-border-color, #ccc);
+        background-color: var(--yasgui-bg-primary, #fff);
+        border-radius: 3px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: var(--yasgui-text-primary, #333);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .chevronIcon {
+          width: 16px;
+          height: 16px;
+          svg {
+            width: 16px;
+            height: 16px;
+            fill: var(--yasgui-text-secondary, #505050);
+          }
+        }
+
+        &:hover {
+          background-color: var(--yasgui-bg-secondary, #f0f0f0);
+          border-color: var(--yasgui-text-muted, #999);
+        }
+
+        &[aria-expanded="true"] {
+          background-color: var(--yasgui-bg-tertiary, #e0e0e0);
+        }
+      }
+
+      .yasqe_snippetDropdownContent {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: 2px;
+        background-color: var(--yasgui-bg-primary, #fff);
+        border: 1px solid var(--yasgui-border-color, #ccc);
+        border-radius: 3px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        z-index: 100;
+        min-width: 150px;
+        max-height: 300px;
+        overflow-y: auto;
+
+        .yasqe_snippetDropdownItem {
+          display: block;
+          width: 100%;
+          padding: 6px 12px;
+          border: none;
+          background: none;
+          text-align: left;
+          cursor: pointer;
+          font-size: 12px;
+          color: var(--yasgui-text-primary, #333);
+          white-space: nowrap;
+
+          &:hover {
+            background-color: var(--yasgui-bg-secondary, #f0f0f0);
+          }
+
+          &:active {
+            background-color: var(--yasgui-bg-tertiary, #e0e0e0);
+          }
+        }
+      }
+    }
+  }
 }

package/src/sparql.ts

@@ -16,6 +16,47 @@ function getRequestConfigSettings(yasqe: Yasqe, conf?: Partial<Config["requestCo
   }
   return (conf ?? {}) as RequestConfig<Yasqe>;
 }
+
+/**
+ * Create a Basic Authentication header value
+ */
+function createBasicAuthHeader(username: string, password: string): string {
+  const credentials = `${username}:${password}`;
+  const encoded = base64EncodeUnicode(credentials);
+  return `Basic ${encoded}`;
+}
+
+/**
+ * Base64-encode a Unicode string using UTF-8 encoding.
+ * This avoids errors with btoa() and supports all Unicode characters.
+ */
+function base64EncodeUnicode(str: string): string {
+  if (typeof window !== "undefined" && typeof window.TextEncoder !== "undefined") {
+    const utf8Bytes = new window.TextEncoder().encode(str);
+    let binary = "";
+    for (let i = 0; i < utf8Bytes.length; i++) {
+      binary += String.fromCharCode(utf8Bytes[i]);
+    }
+    return btoa(binary);
+  } else if (typeof TextEncoder !== "undefined") {
+    // For environments where TextEncoder is global (e.g., Node.js)
+    const utf8Bytes = new TextEncoder().encode(str);
+    let binary = "";
+    for (let i = 0; i < utf8Bytes.length; i++) {
+      binary += String.fromCharCode(utf8Bytes[i]);
+    }
+    return btoa(binary);
+  } else {
+    // Fallback: try btoa directly, but warn about possible errors
+    try {
+      return btoa(str);
+    } catch (e) {
+      throw new Error(
+        "Basic authentication credentials contain unsupported Unicode characters. Please use a modern browser or restrict credentials to Latin1 characters.",
+      );
+    }
+  }
+}
 // type callback = AjaxConfig.callbacks['complete'];
 export function getAjaxConfig(
   yasqe: Yasqe,
@@ -38,11 +79,30 @@ export function getAjaxConfig(
   const headers = isFunction(config.headers) ? config.headers(yasqe) : config.headers;
   // console.log({headers})
   const withCredentials = isFunction(config.withCredentials) ? config.withCredentials(yasqe) : config.withCredentials;
+
+  // Add Basic Authentication header if configured
+  const finalHeaders = { ...headers };
+  try {
+    const basicAuth = isFunction(config.basicAuth) ? config.basicAuth(yasqe) : config.basicAuth;
+    if (basicAuth && basicAuth.username && basicAuth.password) {
+      if (finalHeaders["Authorization"] !== undefined) {
+        console.warn(
+          "Authorization header already exists in request headers; skipping Basic Auth header to avoid overwrite.",
+        );
+      } else {
+        finalHeaders["Authorization"] = createBasicAuthHeader(basicAuth.username, basicAuth.password);
+      }
+    }
+  } catch (error) {
+    console.warn("Failed to configure basic authentication:", error);
+    // Continue without authentication if there's an error
+  }
+
   return {
     reqMethod,
     url: endpoint,
     args: getUrlArguments(yasqe, config),
-    headers: headers,
+    headers: finalHeaders,
     accept: getAcceptHeader(yasqe, config),
     withCredentials,
   };