@glossarist/concept-browser 0.2.10 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {
@@ -19,12 +19,12 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@plurimath/plurimath": "^0.2.2",
     "@vitejs/plugin-vue": "^5.2.3",
     "autoprefixer": "^10.4.21",
     "d3": "^7.9.0",
     "glossarist": "^0.2.0",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.45",
     "pinia": "^2.3.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",

package/src/__tests__/math.test.ts

@@ -1,4 +1,22 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock @plurimath/plurimath for test environment
+vi.mock('@plurimath/plurimath', () => {
+  return {
+    default: class MockPlurimath {
+      private data: string;
+      private format: string;
+      constructor(data: string, format: string) {
+        this.data = data;
+        this.format = format;
+      }
+      toMathml() {
+        return `<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>${this.data}</mi></math>`;
+      }
+    },
+  };
+});
+
 import { renderMath, cleanContent } from '../utils/math';
 
 describe('renderMath', () => {
@@ -6,10 +24,10 @@ describe('renderMath', () => {
     expect(renderMath('hello world')).toBe('hello world');
   });
 
-  it('renders stem:[x^2] to KaTeX span', () => {
+  it('renders stem:[x^2] to MathML span', () => {
     const result = renderMath('the value stem:[x^2]');
     expect(result).toContain('math-inline');
-    expect(result).toContain('katex');
+    expect(result).toContain('<math');
     expect(result).not.toContain('math-bold');
   });
 
@@ -19,6 +37,14 @@ describe('renderMath', () => {
     expect(result).toContain('math-bold');
   });
 
+  it('renders latexmath:[...] with nested brackets', () => {
+    const result = renderMath('coords latexmath:[[u_0, u_1] \\leq 1.0] here');
+    expect(result).toContain('math-inline');
+    expect(result).toContain('<math');
+    expect(result).toContain('u_0');
+    expect(result).not.toContain('latexmath:');
+  });
+
   it('converts bullet lines to <ul><li>', () => {
     const result = renderMath('* first item\n\n* second item');
     expect(result).toContain('<ul class="concept-list">');
@@ -110,6 +136,10 @@ describe('cleanContent', () => {
     expect(cleanContent('value *stem:[x]* here')).toBe('value x here');
   });
 
+  it('strips latexmath:[...] with nested brackets', () => {
+    expect(cleanContent('coords latexmath:[[u_0, u_1] \\leq 1.0] end')).toBe('coords [u_0, u_1] \\leq 1.0 end');
+  });
+
   it('strips *text* to plain text', () => {
     expect(cleanContent('some *italic* text')).toBe('some italic text');
   });

package/src/main.ts

@@ -2,7 +2,6 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
-import 'katex/dist/katex.min.css';
 import './style.css';
 
 const app = createApp(App);

package/src/style.css

@@ -158,13 +158,16 @@
     font-family: var(--font-body);
   }
 
-  /* Math */
-  .math-inline .katex {
+  /* Math (Plurimath MathML output) */
+  .math-inline {
+    display: inline;
+  }
+  .math-inline math {
     font-size: 1.05em;
   }
-  .math-bold .katex .mord,
-  .math-bold .katex .mbin,
-  .math-bold .katex .mrel {
+  .math-bold math mi,
+  .math-bold math mn,
+  .math-bold math mo {
     font-weight: bold;
   }
   .math-fallback {

package/src/utils/math.ts

@@ -1,4 +1,16 @@
-import katex from 'katex';
+import Plurimath from '@plurimath/plurimath';
+
+type MathFormat = 'asciimath' | 'latex' | 'mathml' | 'html' | 'mahtml' | 'omml';
+
+function renderMathSpan(math: string, format: MathFormat, bold: boolean): string {
+  try {
+    const p = new Plurimath(math, format);
+    const mathml = p.toMathml();
+    return `<span class="math-inline${bold ? ' math-bold' : ''}">${mathml}</span>`;
+  } catch {
+    return `<code class="math-fallback">${escapeHtml(math)}</code>`;
+  }
+}
 
 export type XrefResolver = (uri: string, term: string) => string;
 export type BibResolver = (refId: string, title: string) => string;
@@ -45,6 +57,59 @@ function convertLists(text: string): string {
   return result;
 }
 
+/**
+ * Replace `prefix:[content]` where content may contain nested brackets.
+ * Handles `*prefix:[content]*` (bold) too.
+ */
+function replaceBracketed(
+  text: string,
+  prefix: string,
+  render: (math: string, bold: boolean) => string,
+): string {
+  let result = '';
+  let i = 0;
+  const boldPrefix = '*' + prefix;
+  while (i < text.length) {
+    // Check for bold variant: *prefix:[...]
+    if (text.startsWith(boldPrefix + '[', i)) {
+      const start = i;
+      i += boldPrefix.length + 1; // skip *prefix:[
+      const depth = 1;
+      let j = i;
+      let d = 1;
+      while (j < text.length && d > 0) {
+        if (text[j] === '[') d++;
+        else if (text[j] === ']') d--;
+        j++;
+      }
+      const content = text.slice(i, j - 1);
+      // Check for closing *
+      let end = j;
+      if (end < text.length && text[end] === '*') end++;
+      result += render(content, true);
+      i = end;
+    }
+    // Check for normal variant: prefix:[...]
+    else if (text.startsWith(prefix + '[', i)) {
+      i += prefix.length + 1;
+      let j = i;
+      let d = 1;
+      while (j < text.length && d > 0) {
+        if (text[j] === '[') d++;
+        else if (text[j] === ']') d--;
+        j++;
+      }
+      const content = text.slice(i, j - 1);
+      result += render(content, false);
+      i = j;
+    } else {
+      result += text[i];
+      i++;
+    }
+  }
+  return result;
+}
+
 /**
  * Render stem:[...] math notation to KaTeX HTML.
  * Also handles cross-reference inline patterns (URN refs, bibliography, figures).
@@ -57,13 +122,8 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
     ? { xrefResolver: xrefResolverOrOpts }
     : (xrefResolverOrOpts ?? {});
 
-  result = result.replace(/\*stem:\[([^\]]*)\]\*/g, (_, math) => {
-    return renderKatexSpan(math, true);
-  });
-
-  result = result.replace(/stem:\[([^\]]*)\]/g, (_, math) => {
-    return renderKatexSpan(math, false);
-  });
+  result = replaceBracketed(result, 'stem:', (math, bold) => renderMathSpan(math, 'asciimath', bold));
+  result = replaceBracketed(result, 'latexmath:', (math, bold) => renderMathSpan(math, 'latex', bold));
 
   result = convertLists(result);
 
@@ -110,19 +170,6 @@ export function renderMath(text: string, xrefResolverOrOpts?: XrefResolver | Ren
   return result;
 }
 
-function renderKatexSpan(math: string, bold: boolean): string {
-  try {
-    const html = katex.renderToString(math, {
-      throwOnError: false,
-      displayMode: false,
-      output: 'html',
-    });
-    return `<span class="math-inline${bold ? ' math-bold' : ''}">${html}</span>`;
-  } catch {
-    return `<code class="math-fallback">${escapeHtml(math)}</code>`;
-  }
-}
-
 function escapeHtml(text: string): string {
   return text
     .replace(/&/g, '&amp;')
@@ -135,9 +182,7 @@ function escapeHtml(text: string): string {
  */
 export function cleanContent(text: string): string {
   if (!text) return '';
-  return text
-    .replace(/\*stem:\[([^\]]*)\]\*/g, '$1')
-    .replace(/stem:\[([^\]]*)\]/g, '$1')
+  let result = text
     .replace(/\*([^*]+)\*/g, '$1')
     .replace(/~([^~]+)~/g, '_$1')
     .replace(/\n[ \t]*\* /g, '; ')
@@ -146,4 +191,7 @@ export function cleanContent(text: string): string {
     .replace(/\{\{urn:[^,}]+,([^,}]+)(?:,[^}]+)?\}\}/g, '$1')
     .replace(/\{urn:[^,}]+,([^,}]+)(?:,[^}]+)?\}/g, '$1')
     .replace(/\{\{([^,}]+)(?:,\s*[^}]+)?\}\}/g, '$1');
+  result = replaceBracketed(result, 'stem:', (math) => math);
+  result = replaceBracketed(result, 'latexmath:', (math) => math);
+  return result;
 }

package/vite.config.ts

@@ -20,6 +20,9 @@ export default defineConfig({
       '@': resolve(__dirname, 'src'),
     },
   },
+  optimizeDeps: {
+    include: ['@plurimath/plurimath'],
+  },
   test: {
     environment: 'happy-dom',
     globals: true,