@zzish/math-rich-input 0.1.58 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,9 +13,13 @@
   },
   "main": "dist/index.js",
   "scripts": {
-    "test": "playwright test tests/caret-regression.spec.js tests/math-only-caret.spec.js tests/math-only-caret-react19.spec.js tests/studio-equation.spec.js tests/release-regression.spec.js --workers=1",
+    "pretest": "node scripts/build-katex-stylesheet.js",
+    "test": "playwright test tests/caret-regression.spec.js tests/math-only-caret.spec.js tests/math-only-caret-react19.spec.js tests/studio-equation.spec.js tests/release-regression.spec.js tests/first-render.spec.js --workers=1",
+    "prebuild": "node scripts/build-katex-stylesheet.js",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
+    "prebuild:legacy": "node scripts/build-katex-stylesheet.js",
     "build:legacy": "rollup --config",
+    "prebuild:standalone": "node scripts/build-katex-stylesheet.js",
     "build:standalone": "webpack --config webpack.standalone.config.js",
     "prepublishOnly": "npm test && npm run build"
   },
@@ -43,6 +47,7 @@
     "@rollup/plugin-node-resolve": "^11.2.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.7.1",
+    "katex-0.11.1": "npm:katex@0.11.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^6.2.1",
     "postcss-nested": "^6.0.1",

package/scripts/build-katex-stylesheet.js

@@ -0,0 +1,40 @@
+/**
+ * Build the KaTeX stylesheet the field carries inside itself, so it never fetches one from a CDN.
+ *
+ * Up to 0.1.58 the field appended `katex@0.11.1`'s stylesheet from jsdelivr on its first mount. Every
+ * host's formulas in and around the field have looked the way that stylesheet draws them ever since —
+ * Classic's own KaTeX is 0.3.0, two examples have none — so the SAME stylesheet is kept, byte for byte,
+ * and only its delivery changes: read from the pinned `katex-0.11.1` dev dependency, with each font face's
+ * woff2 inlined as a data URI. A data URI needs no bundler, public path or server in any consumer
+ * (webpack 3 and 5, Vite, SvelteKit, plain script tags). The woff and ttf fallbacks are dropped: every
+ * browser the hosts support reads woff2 (KaTeX docs, "Kinds of fonts used").
+ *
+ * Output: `src/katexStylesheet.generated.js` (ignored by git; `prebuild` and `pretest` recreate it).
+ */
+const fs = require("node:fs");
+const path = require("node:path");
+
+const root = path.resolve(__dirname, "..");
+const dist = path.join(root, "node_modules", "katex-0.11.1", "dist");
+const version = require(path.join(root, "node_modules", "katex-0.11.1", "package.json")).version;
+if (version !== "0.11.1") throw new Error(`expected katex 0.11.1 for the bundled stylesheet, found ${version}`);
+
+let missing = 0;
+const css = fs
+  .readFileSync(path.join(dist, "katex.min.css"), "utf8")
+  .replace(/src:url\(fonts\/([^)]+)\.woff2\) format\("woff2"\)(,url\([^)]*\) format\("[^"]*"\))*/g, (_, name) => {
+    const file = path.join(dist, "fonts", `${name}.woff2`);
+    if (!fs.existsSync(file)) missing += 1;
+    const data = fs.readFileSync(file).toString("base64");
+    return `src:url(data:font/woff2;base64,${data}) format("woff2")`;
+  });
+if (missing || /url\(fonts\//.test(css)) throw new Error("a KaTeX font was left pointing at a relative URL");
+
+const out = path.join(root, "src", "katexStylesheet.generated.js");
+fs.writeFileSync(
+  out,
+  `// Generated by scripts/build-katex-stylesheet.js from katex@${version}; do not edit.\n` +
+    `export const KATEX_VERSION = ${JSON.stringify(version)};\n` +
+    `export const KATEX_CSS = ${JSON.stringify(css)};\n`
+);
+console.log(`katex ${version} stylesheet: ${css.length} characters, written to ${path.relative(root, out)}`);

package/src/katexHelper.js

@@ -1,39 +1,21 @@
-// This function adds the katex css stylesheet to the document head
-export const setupKatex = () => {
-  let links = document.getElementsByTagName("link")
-  for (let i = 0; i < links.length; i++) {
-    if (links[i].id === "katex-css")
-      return
-  }
-  
-  let link = document.createElement("link")
-  link.id = "katex-css"
-  link.rel = "stylesheet"
-  link.href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" 
-  // link.integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
-  link.crossorigin="anonymous"
-  document.head.appendChild(link);
-  console.log("Added katex css to document head")
-
-  // The following two scripts are required to have pages auto-render embedded latex.
-  // We don't need to do this as we render everything programatically.
-  // These are inlcuded here only for reference in case of future need.
+import { KATEX_CSS } from "./katexStylesheet.generated.js";
 
-  // let script = document.createElement("script");
-  // script.id = "katex-js"
-  // script.defer = true;
-  // script.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
-  // // script.integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" 
-  // script.crossorigin="anonymous"
-  // document.head.appendChild(script);
-  // console.log("Added script")
-
-  // script = document.createElement("script");
-  // script.id = "katex-js-auto-render"
-  // script.defer = true;
-  // script.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
-  // // script.integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 
-  // script.crossorigin="anonymous"
-  // document.head.appendChild(script);
-  // console.log("Added script")
-}
+/**
+ * Put KaTeX's stylesheet on the page, once, from inside the package.
+ *
+ * The field draws formulas with KaTeX and every host has looked the way `katex@0.11.1`'s stylesheet draws
+ * them, because up to 0.1.58 this appended that stylesheet from jsdelivr. It is the same stylesheet now,
+ * appended at the same moments under the same id, but carried in the bundle with its fonts inlined
+ * (`scripts/build-katex-stylesheet.js`): no request leaves the page, nothing waits on a third party, and
+ * there is no late arrival to resize a field that was already drawn.
+ *
+ * A host that already provides its own KaTeX stylesheet under the id `katex-css` keeps it: this adds
+ * nothing then, as before.
+ */
+export const setupKatex = () => {
+  if (typeof document === "undefined" || document.getElementById("katex-css")) return;
+  const style = document.createElement("style");
+  style.id = "katex-css";
+  style.textContent = KATEX_CSS;
+  document.head.appendChild(style);
+};