rapidoc 11.0.0 → 12.0.0

package/src/templates/server-template.js

@@ -0,0 +1,152 @@
+/**
+ * Renders the API server selector dropdown and server variable configuration form.
+ */
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { sanitizeHTML } from "../utils/sanitize.js";
+import { marked } from "marked";
+
+export function setApiServer(serverUrl) {
+  const serverObj = this.resolvedSpec?.servers.find((s) => s.url === serverUrl);
+  if (!serverObj) {
+    return false;
+  }
+  this.selectedServer = serverObj;
+  this.requestUpdate();
+  this.dispatchEvent(
+    new CustomEvent("api-server-change", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        selectedServer: serverObj,
+      },
+    }),
+  );
+  return true;
+}
+
+function onApiServerVarChange(e, serverObj) {
+  const inputEls = [...e.currentTarget.closest("table").querySelectorAll("input, select")];
+  let tempUrl = serverObj.url;
+  inputEls.forEach((v) => {
+    const regex = new RegExp(`{${v.dataset.var}}`, "g");
+    tempUrl = tempUrl.replace(regex, v.value);
+  });
+  serverObj.computedUrl = tempUrl;
+  this.requestUpdate();
+}
+
+function serverVarsTemplate() {
+  // const selectedServerObj = this.resolvedSpec.servers.find((v) => (v.url === this.selectedServer));
+  return this.selectedServer && this.selectedServer.variables
+    ? html`
+        <h3 class="rapidoc-heading label-heading table-title" part="heading heading-3">Server variables</h3>
+        <div class="param-list-container">
+          <ul class="param-list server-vars" part="param-list" role="list">
+            ${Object.entries(this.selectedServer.variables).map(
+              (kv) => html`
+                <li class="param" part="param">
+                  <div class="param-label" part="param-label">
+                    <div class="param-name" part="param-name">${kv[0]}</div>
+                  </div>
+                  <div class="param-input" part="param-input">
+                    ${
+                      kv[1].enum
+                        ? html` <select
+                            data-var="${kv[0]}"
+                            @input=${(e) => {
+                              onApiServerVarChange.call(this, e, this.selectedServer);
+                            }}
+                          >
+                            ${Object.entries(kv[1].enum).map((e) =>
+                              kv[1].default === e[1]
+                                ? html`<option selected label=${e[1]} value=${e[1]}></option>`
+                                : html`<option label=${e[1]} value=${e[1]}></option>`,
+                            )}
+                          </select>`
+                        : html` <input
+                            type="text"
+                            part="textbox textbox-server-var"
+                            spellcheck="false"
+                            data-var="${kv[0]}"
+                            value="${kv[1].default}"
+                            @input=${(e) => {
+                              onApiServerVarChange.call(this, e, this.selectedServer);
+                            }}
+                          />`
+                    }
+                  </div>
+                  ${
+                    kv[1].description
+                      ? html`<div class="param-details" part="param-details">
+                          <div class="m-markdown-small">${unsafeHTML(sanitizeHTML(marked(kv[1].description)))}</div>
+                        </div>`
+                      : ""
+                  }
+                </li>
+              `,
+            )}
+          </ul>
+        </div>
+      `
+    : "";
+}
+
+export default function serverTemplate() {
+  if (!this.resolvedSpec || this.resolvedSpec.specLoadError) {
+    return "";
+  }
+  return html`<section
+    id="servers"
+    part="section-servers"
+    style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;"
+    class="regular-font observe-me ${"read focused".includes(this.renderStyle) ? "section-gap--read-mode" : "section-gap"}"
+  >
+    <h2 part="section-servers-title heading heading-2" class="rapidoc-heading sub-title" style="display:flex; align-items:center; gap:8px;">
+      API Server
+      ${
+        this.mockServer === "true"
+          ? html`<span
+              style="font-size:var(--font-size-small); font-weight:bold; color:var(--green); border:1px solid var(--green); border-radius:var(--radius); padding:1px 6px; letter-spacing:0.5px;"
+              title="In-browser mock server is active"
+            >
+              MOCK ACTIVE
+            </span>`
+          : ""
+      }
+    </h2>
+    <div class="mono-font" style="margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);">
+      ${
+        !this.resolvedSpec.servers || this.resolvedSpec.servers?.length === 0
+          ? ""
+          : html`
+              ${this.resolvedSpec?.servers.map(
+                (server, i) => html`
+                  <div class="server-opt-row">
+                    <input
+                      type="radio"
+                      name="api_server"
+                      id="srvr-opt-${i}"
+                      value="${server.url}"
+                      @change=${() => {
+                        setApiServer.call(this, server.url);
+                      }}
+                      .checked="${this.selectedServer.url === server.url}"
+                    />
+                    <label for="srvr-opt-${i}">
+                      ${server.url} ${server.description ? html`- <span class="regular-font">${server.description} </span>` : ""}
+                    </label>
+                  </div>
+                `,
+              )}
+            `
+      }
+      <div class="table-title primary-text" part="label-selected-server">
+        SELECTED: ${this.selectedServer?.computedUrl || "none"}
+        ${this.mockServer === "true" ? html`<span style="color:var(--green); margin-left:6px;">(Mocked)</span>` : ""}
+      </div>
+    </div>
+    <slot name="servers"></slot>
+    ${serverVarsTemplate.call(this)}
+  </section>`;
+}

package/src/utils/auto-color-scheme.js

@@ -0,0 +1,99 @@
+/**
+ * Lit reactive controller behind color-scheme="auto" on <rapi-doc> and <rapi-doc-mini>.
+ *
+ * "auto" follows the host page: it reads the page's CSS `color-scheme` (as set by Starlight and most
+ * theme toggles, e.g. `:root[data-theme='light'] { color-scheme: light }`), or the OS preference when
+ * the page declares none or both. The resolved 'dark' / 'light' is written to the element's
+ * color-scheme property and attribute, which drive the styles, and is re-resolved when attributes
+ * on <html> or <body> change (data-theme, class, style) or the OS preference changes.
+ *
+ * Setting color-scheme to any other value later turns auto mode off.
+ */
+export class AutoColorSchemeController {
+  constructor(host) {
+    this.host = host;
+    this.active = false;
+    this.resolved = "";
+    this.observer = null;
+    this.media = null;
+    this.onPageChange = () => this.apply();
+    host.addController(this);
+  }
+
+  hostConnected() {
+    if (this.host.colorScheme === "auto") {
+      this.enable();
+    } else if (this.active) {
+      this.watch(true);
+      this.apply();
+    }
+  }
+
+  hostDisconnected() {
+    this.watch(false);
+  }
+
+  hostUpdate() {
+    const value = this.host.colorScheme;
+    if (value === "auto") {
+      this.enable();
+    } else if (this.active && value !== this.resolved) {
+      // An explicit value from the page or a script
+      this.active = false;
+      this.watch(false);
+    }
+  }
+
+  enable() {
+    this.active = true;
+    this.watch(true);
+    this.apply();
+  }
+
+  apply() {
+    if (!this.active || typeof window === "undefined") {
+      return;
+    }
+    const scheme = resolvePageColorScheme(this.host);
+    this.resolved = scheme;
+    if (this.host.colorScheme !== scheme) {
+      this.host.colorScheme = scheme;
+    }
+    // Set the attribute now (property reflection is async) so the styles switch immediately.
+    if (this.host.getAttribute("color-scheme") !== scheme) {
+      this.host.setAttribute("color-scheme", scheme);
+    }
+  }
+
+  watch(enable) {
+    this.observer?.disconnect();
+    this.observer = null;
+    this.media?.removeEventListener("change", this.onPageChange);
+    this.media = null;
+    if (!enable || typeof window === "undefined") {
+      return;
+    }
+    this.observer = new MutationObserver(this.onPageChange);
+    this.observer.observe(document.documentElement, { attributes: true });
+    if (document.body) {
+      this.observer.observe(document.body, { attributes: true });
+    }
+    this.media = window.matchMedia("(prefers-color-scheme: light)");
+    this.media.addEventListener("change", this.onPageChange);
+  }
+}
+
+/**
+ * 'dark' or 'light' for the page around `el`. Reads the parent's CSS color-scheme: the element sets
+ * color-scheme on itself from its own attribute.
+ */
+export function resolvePageColorScheme(el) {
+  const pageEl = el.parentElement || el.getRootNode().host || document.documentElement;
+  const pageScheme = getComputedStyle(pageEl).colorScheme || "";
+  const hasDark = /\bdark\b/.test(pageScheme);
+  const hasLight = /\blight\b/.test(pageScheme);
+  if (hasDark !== hasLight) {
+    return hasDark ? "dark" : "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}

package/src/utils/bind-navbar.js

@@ -0,0 +1,175 @@
+import {
+  expandCollapseNavBarTag,
+  expandCollapseNavBarTagGroup,
+  expandParentNavContainers,
+} from "../templates/navbar-template.js";
+
+/**
+ * Connects an external navigation bar (e.g. in Astro, Next.js, or Starlight portals)
+ * to a <rapi-doc> component, reusing RapiDoc's internal accordion mechanics,
+ * scroll controller, and active item tracking.
+ *
+ * @param {HTMLElement|string} sidebar - Sidebar element or selector
+ * @param {HTMLElement|string} rapiDoc - <rapi-doc> element or selector
+ * @param {object} [options]
+ * @param {string} [options.activeClass='active'] - Class applied to active navigation item
+ * @param {boolean} [options.updateHistory=true] - Whether to sync window history
+ * @returns {() => void} Cleanup unbind function
+ */
+export function bindNavBar(sidebar, rapiDoc, options = {}) {
+  const sidebarEl = typeof sidebar === "string" ? document.querySelector(sidebar) : sidebar;
+  const rapiDocEl = typeof rapiDoc === "string" ? document.querySelector(rapiDoc) : rapiDoc;
+
+  if (!sidebarEl || typeof window === "undefined") {
+    return () => {};
+  }
+
+  const activeClass = options.activeClass || "active";
+  const updateHistory = options.updateHistory !== false;
+
+  // 1. Resolve matching navigation link in sidebar
+  function findMatchingLink(targetId) {
+    if (!targetId) return null;
+    return (
+      sidebarEl.querySelector(`#link-${CSS.escape(targetId)}`) ||
+      sidebarEl.querySelector(`.nav-bar-path[data-content-id="${CSS.escape(targetId)}"]`) ||
+      sidebarEl.querySelector(`.nav-bar-path[data-op-slug="${CSS.escape(targetId)}"]`) ||
+      sidebarEl.querySelector(`#link-${CSS.escape(targetId.replace(/^[a-z0-9_-]+--/, ""))}`) ||
+      (targetId === "overview" ? sidebarEl.querySelector("#link-overview, .nav-bar-info") : null)
+    );
+  }
+
+  // 2. Set active navigation link and auto-expand parent containers
+  function setActiveNavId(targetId, shouldUpdateHistory = true) {
+    const link = findMatchingLink(targetId);
+    if (!link || link.classList.contains(activeClass)) return;
+
+    sidebarEl.querySelectorAll("." + activeClass).forEach((el) => el.classList.remove(activeClass));
+    link.classList.add(activeClass);
+
+    // Reuse RapiDoc's native hierarchy expander
+    expandParentNavContainers(link);
+
+    if (shouldUpdateHistory && updateHistory) {
+      const href = link.getAttribute("href");
+      if (href) window.history.replaceState(null, "", href);
+    }
+
+    // Scroll active item into view inside the sidebar container
+    const navScroll = link.closest(".nav-scroll");
+    if (navScroll) {
+      const itemRect = link.getBoundingClientRect();
+      const scrollRect = navScroll.getBoundingClientRect();
+      if (itemRect.top < scrollRect.top + 20 || itemRect.bottom > scrollRect.bottom - 40) {
+        const targetTop = itemRect.top - scrollRect.top + navScroll.scrollTop - 40;
+        navScroll.scrollTo({ top: targetTop, behavior: "smooth" });
+      }
+    }
+  }
+
+  // 3. Delegated Click Listener (reusing RapiDoc's accordion handlers)
+  const handleClick = (e) => {
+    const navEl =
+      e.target.closest("[data-action]") || e.target.closest(".nav-bar-path, .nav-bar-info");
+    if (!navEl) return;
+
+    const action = navEl.dataset?.action;
+    if (action === "expand-collapse-tag") {
+      expandCollapseNavBarTag(navEl, "toggle");
+    } else if (action === "expand-collapse-tag-group") {
+      expandCollapseNavBarTagGroup(navEl, "toggle");
+    } else if (
+      action === "navigate" ||
+      navEl.classList.contains("nav-bar-path") ||
+      navEl.classList.contains("nav-bar-info")
+    ) {
+      const href = navEl.getAttribute("href") || navEl.getAttribute("data-tag-href");
+      const hashIdx = href ? href.indexOf("#") : -1;
+      const elementId =
+        (hashIdx !== -1 ? href.substring(hashIdx + 1) : href) ||
+        navEl.getAttribute("data-content-id") ||
+        navEl.getAttribute("data-op-slug") ||
+        navEl.id?.replace(/^link-/, "");
+
+      if (elementId && rapiDocEl && typeof rapiDocEl.scrollToPath === "function") {
+        e.preventDefault();
+        setActiveNavId(elementId, false);
+        rapiDocEl.scrollToPath(elementId);
+        if (updateHistory && href) {
+          window.history.pushState(null, "", href);
+        }
+      }
+    }
+  };
+  sidebarEl.addEventListener("click", handleClick);
+
+  // 4. Sidebar Search Filter
+  const filterInput = sidebarEl.querySelector(".portal-filter-input, .nav-bar-search-input");
+  let handleFilter = null;
+  if (filterInput) {
+    handleFilter = (e) => {
+      const query = (e.target.value || "").toLowerCase().trim();
+      sidebarEl.querySelectorAll(".nav-bar-path, .portal-sidebar-op-item").forEach((item) => {
+        item.style.display = item.textContent.toLowerCase().includes(query) ? "flex" : "none";
+      });
+      sidebarEl.querySelectorAll(".nav-bar-tag-and-paths").forEach((tag) => {
+        const hasVisible = tag.querySelector(
+          '.nav-bar-path:not([style*="display: none"]), .portal-sidebar-op-item:not([style*="display: none"])',
+        );
+        tag.style.display = hasVisible || !query ? "" : "none";
+        if (query && hasVisible) expandCollapseNavBarTag(tag, "expand");
+      });
+      sidebarEl.querySelectorAll(".nav-bar-tag-group").forEach((group) => {
+        const hasVisible = group.querySelector(
+          '.nav-bar-path:not([style*="display: none"]), .portal-sidebar-op-item:not([style*="display: none"])',
+        );
+        group.style.display = hasVisible || !query ? "" : "none";
+        if (query && hasVisible) expandCollapseNavBarTagGroup(group, "expand");
+      });
+    };
+    filterInput.addEventListener("input", handleFilter);
+  }
+
+  // 5. Native rapi-doc nav-active-change event listener
+  const handleNavActiveChange = (e) => {
+    const targetId = e.detail?.operationId || e.detail?.id || e.detail?.elementId;
+    if (targetId) setActiveNavId(targetId, true);
+  };
+  if (rapiDocEl) {
+    rapiDocEl.addEventListener("nav-active-change", handleNavActiveChange);
+  }
+
+  // 6. Popstate / hash sync
+  const handleHashSync = () => {
+    if (window.location.hash) {
+      const hash = window.location.hash.replace(/^#/, "");
+      if (hash) {
+        setActiveNavId(hash, false);
+        if (rapiDocEl && typeof rapiDocEl.scrollToPath === "function") {
+          rapiDocEl.scrollToPath(hash);
+        }
+      }
+    }
+  };
+  window.addEventListener("popstate", handleHashSync);
+  window.addEventListener("hashchange", handleHashSync);
+
+  // Initial sync on load and spec load
+  if (rapiDocEl) {
+    rapiDocEl.addEventListener("spec-loaded", () => setTimeout(handleHashSync, 80));
+    if (typeof rapiDocEl.updateComplete?.then === "function") {
+      rapiDocEl.updateComplete.then(() => setTimeout(handleHashSync, 50));
+    }
+  }
+  setTimeout(handleHashSync, 150);
+
+  return () => {
+    sidebarEl.removeEventListener("click", handleClick);
+    if (filterInput && handleFilter) filterInput.removeEventListener("input", handleFilter);
+    if (rapiDocEl) rapiDocEl.removeEventListener("nav-active-change", handleNavActiveChange);
+    window.removeEventListener("popstate", handleHashSync);
+    window.removeEventListener("hashchange", handleHashSync);
+  };
+}
+
+export default bindNavBar;

package/src/utils/color-utils.js

@@ -0,0 +1,59 @@
+export default {
+  color: {
+    inputReverseFg: "#fff",
+    inputReverseBg: "#333",
+    headerBg: "#444",
+    getRgb(hex) {
+      if (hex.indexOf("#") === 0) {
+        hex = hex.slice(1, 7);
+      }
+      // convert 3-digit hex to 6-digits.
+      if (hex.length === 3 || hex.length === 4) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      }
+      if (hex.length !== 6) {
+        throw new Error("Invalid HEX color.");
+      }
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+      };
+    },
+    luminanace(hexColorCode) {
+      const rgb = this.getRgb(hexColorCode);
+      return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+    },
+    invert(hexColorCode) {
+      return this.luminanace(hexColorCode) > 135 ? "#000" : "#fff"; // compare with `>=128`, but giving little more preference to white over black
+    },
+    opacity(hex, opacity) {
+      const rgb = this.getRgb(hex);
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+    },
+    brightness(hex, amt) {
+      const rgb = this.getRgb(hex);
+      rgb.r += amt;
+      rgb.g += amt;
+      rgb.b += amt;
+      if (rgb.r > 255) rgb.r = 255;
+      else if (rgb.r < 0) rgb.r = 0;
+
+      if (rgb.g > 255) rgb.g = 255;
+      else if (rgb.g < 0) rgb.g = 0;
+
+      if (rgb.b > 255) rgb.b = 255;
+      else if (rgb.b < 0) rgb.b = 0;
+      return `#${rgb.r.toString(16).padStart(2, "0")}${rgb.g.toString(16).padStart(2, "0")}${rgb.b.toString(16).padStart(2, "0")}`;
+    },
+    hasGoodContrast(hexColorCode1, hexColorCode2) {
+      const lum1 = this.luminanace(hexColorCode1);
+      const lum2 = this.luminanace(hexColorCode2);
+      return lum1 - lum2;
+    },
+  },
+};
+
+export function isValidHexColor(colorCode) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
+}

package/src/utils/common-utils.js

@@ -0,0 +1,191 @@
+/* For Delayed Event Handler Execution */
+export function debounce(fn, delay) {
+  let timeoutID = null;
+  return (...args) => {
+    clearTimeout(timeoutID);
+    const that = this;
+    timeoutID = setTimeout(() => {
+      fn.apply(that, args);
+    }, delay);
+  };
+}
+
+export const invalidCharsRegEx = /[\s#:?&={}]/g; // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
+export const rapidocApiKey = "_rapidoc_api_key";
+
+export function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function copyToClipboard(data, e) {
+  const btnEl = e.target;
+  const textArea = document.createElement("textarea");
+  textArea.value = data;
+  textArea.style.position = "fixed"; // avoid scrolling to bottom
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    btnEl.innerText = "Copied";
+    setTimeout(() => {
+      btnEl.innerText = "Copy";
+    }, 5000);
+  } catch (err) {
+    console.error("Unable to copy", err);
+  }
+  document.body.removeChild(textArea);
+}
+
+export function getBaseUrlFromUrl(url) {
+  const pathArray = url.split("/");
+  return `${pathArray[0]}//${pathArray[2]}`;
+}
+
+export async function wait(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export function getMatchedComponents(searchVal, component) {
+  return component.name.toLowerCase().includes(searchVal.toLowerCase());
+}
+
+export function getMatchedPaths(searchVal = "", path, tagName = "") {
+  if (!searchVal) {
+    return true;
+  }
+  const stringToSearch =
+    `${path.method} ${path.path} ${path.summary || ""} ${path.description || ""} ${path.operationId || ""} ${tagName}`.toLowerCase();
+  return stringToSearch.includes(searchVal.toLowerCase());
+}
+
+export function isInternalOrHidden(item) {
+  if (!item || typeof item !== "object") return false;
+  return (
+    item.xInternal === true ||
+    item.xInternal === "true" ||
+    item.xHidden === true ||
+    item.xHidden === "true" ||
+    item["x-internal"] === true ||
+    item["x-internal"] === "true" ||
+    item["x-hidden"] === true ||
+    item["x-hidden"] === "true" ||
+    item.rawOperation?.["x-internal"] === true ||
+    item.rawOperation?.["x-internal"] === "true" ||
+    item.rawOperation?.["x-hidden"] === true ||
+    item.rawOperation?.["x-hidden"] === "true"
+  );
+}
+
+export function schemaKeys(schemaProps, result = new Set()) {
+  if (!schemaProps) {
+    return result;
+  }
+  Object.keys(schemaProps).forEach((key) => {
+    result.add(key);
+    if (schemaProps[key].properties) {
+      schemaKeys(schemaProps[key].properties, result);
+    } else if (schemaProps[key].items?.properties) {
+      schemaKeys(schemaProps[key].items?.properties, result);
+    }
+  });
+  return result;
+}
+
+export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
+  if (!searchVal.trim() || searchOptions.length === 0) {
+    return;
+  }
+
+  const pathsMatched = [];
+  allSpecTags.forEach((tag) => {
+    tag.paths.forEach((path) => {
+      let stringToSearch = "";
+      if (searchOptions.includes("search-api-path")) {
+        stringToSearch = path.path;
+      }
+      if (searchOptions.includes("search-api-descr")) {
+        stringToSearch = `${stringToSearch} ${(path.summary || "") + (path.description || "")}`;
+      }
+      if (searchOptions.includes("search-api-params")) {
+        stringToSearch = `${stringToSearch} ${path.parameters?.map((v) => v.name).join(" ") || ""}`;
+      }
+
+      if (searchOptions.includes("search-api-request-body") && path.requestBody) {
+        let schemaKeySet = new Set();
+        for (const contentType in path.requestBody?.content) {
+          if (path.requestBody.content[contentType].schema?.properties) {
+            schemaKeySet = schemaKeys(path.requestBody.content[contentType].schema?.properties);
+          }
+          stringToSearch = `${stringToSearch} ${[...schemaKeySet].join(" ")}`;
+        }
+      }
+
+      if (searchOptions.includes("search-api-resp-descr")) {
+        stringToSearch = `${stringToSearch} ${Object.values(path.responses)
+          .map((v) => v.description || "")
+          .join(" ")}`;
+      }
+
+      if (stringToSearch.toLowerCase().includes(searchVal.trim().toLowerCase())) {
+        pathsMatched.push({
+          elementId: path.elementId,
+          method: path.method,
+          path: path.path,
+          summary: path.summary || path.description || "",
+          deprecated: path.deprecated,
+        });
+      }
+    });
+  });
+  return pathsMatched;
+}
+
+/*
+export function prettyXml(sourceXmlString) {
+  const xmlDoc = new DOMParser().parseFromString(sourceXmlString, 'text/xml');
+  const xsltDoc = new DOMParser().parseFromString([
+    // describes how we want to modify the XML - indent everything
+    `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+      <xsl:strip-space elements="*"/>
+        <xsl:template match="para[content-style][not(text())]">
+          <xsl:value-of select="normalize-space(.)"/>
+        </xsl:template>
+        <xsl:template match="node()|@*">
+          <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>
+        </xsl:template>
+        <xsl:output indent="yes"/>
+      </xsl:stylesheet>`,
+  ].join('\n'), 'application/xml');
+  const xsltProcessor = new XSLTProcessor();
+  xsltProcessor.importStylesheet(xsltDoc);
+  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+  return new XMLSerializer().serializeToString(resultDoc);
+}
+*/
+
+export function downloadResource(url, fileName) {
+  if (url) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style = "display: none";
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    a.remove();
+  }
+}
+
+export function viewResource(url) {
+  if (url) {
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.style = "display: none";
+    a.href = url;
+    a.target = "_blank";
+    a.click();
+    a.remove();
+  }
+}