@tfw.in/structura-lib 0.2.5 → 0.2.6

package/README.md

@@ -121,28 +121,49 @@ function App() {
 
 ## Math Rendering
 
-The library automatically renders LaTeX math expressions in content:
+The Structura component automatically renders LaTeX math expressions (`$m^2$`, `$L/m^2$`, etc.) when `mathRendering={true}` (the default).
 
-- Inline math: `$x^2 + y^2 = z^2$`
-- Display math: `$$\sum_{i=1}^{n} x_i$$`
+If you extract text from the response structure (e.g. Gemini corrected output) and render it in your own components, the raw LaTeX delimiters will appear as plain text. Use `renderMathInHtml` to convert them to rendered math:
 
-You can also use the math utilities directly:
+```jsx
+import { renderMathInHtml } from '@tfw.in/structura-lib';
+
+// Convert LaTeX delimiters to rendered HTML
+const rawText = "Total membrane area required 0.02$m^2$";
+const rendered = renderMathInHtml(rawText);
+// Use with dangerouslySetInnerHTML
+<div dangerouslySetInnerHTML={{ __html: rendered }} />
+```
+
+### Utilities
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `renderMathInHtml(html)` | `function` | Converts `$...$` (inline) and `$$...$$` (display) math to KaTeX HTML. Use this when rendering extracted text in your own components. |
+| `containsMath(html)` | `function` | Returns `true` if the string contains math delimiters. |
+| `MathContent` | `React component` | Renders HTML with math expressions. Props: `html`, `className`, `as` (element type). |
+| `useMathHtml(html)` | `React hook` | Returns rendered math HTML string via `useMemo`. |
 
 ```jsx
-import { MathContent, renderMathInHtml, containsMath } from '@tfw.in/structura-lib';
+import { MathContent, renderMathInHtml, containsMath, useMathHtml } from '@tfw.in/structura-lib';
 
-// React component
+// As a React component
 <MathContent html="The formula is $E = mc^2$" />
 
-// Utility function
-const rendered = renderMathInHtml("Price is $20$ dollars");
+// As a hook
+function MyComponent({ text }) {
+  const rendered = useMathHtml(text);
+  return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
+}
 
-// Check for math content
+// Check before processing
 if (containsMath(text)) {
-  // handle math
+  const html = renderMathInHtml(text);
 }
 ```
 
+> **Note:** Ensure you import the library styles (`@tfw.in/structura-lib/styles.css`) — this loads the KaTeX CSS required for proper math rendering.
+
 ## Semantic Tags
 
 Parse and render semantic tags for document corrections:

package/dist/cjs/HtmlViewer.js

@@ -8,6 +8,7 @@ var vsc = require('react-icons/vsc');
 var index_esm = require('./node_modules/react-icons/fa/index.esm.js');
 var Table = require('./Table.js');
 var EditableContent = require('./EditableContent.js');
+var MathRenderer = require('./MathRenderer.js');
 var accuracyMetrics = require('./accuracyMetrics.js');
 var SemanticTagParser = require('./SemanticTagParser.js');
 
@@ -248,19 +249,19 @@ const FaTagsIcon = index_esm.FaTags;
 function GeminiCorrectedBlock({
   html,
   isEditMode,
-  onContentChange
+  onContentChange,
+  enableMathRendering = true
 }) {
   const ref = React.useRef(null);
-  console.log('[GeminiCorrectedBlock] render — isEditMode:', isEditMode, 'htmlLength:', html === null || html === void 0 ? void 0 : html.length, 'ref.current:', !!ref.current);
+  const processedHtml = React.useMemo(() => {
+    return enableMathRendering ? MathRenderer.renderMathInHtml(html) : html;
+  }, [html, enableMathRendering]);
   // Set initial HTML only once via ref — never via dangerouslySetInnerHTML on a contentEditable
   React.useEffect(() => {
-    var _a;
-    console.log('[GeminiCorrectedBlock] useEffect — ref.current:', !!ref.current, 'html matches:', ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML) === html);
-    if (ref.current && ref.current.innerHTML !== html) {
-      ref.current.innerHTML = html;
-      console.log('[GeminiCorrectedBlock] innerHTML set, length:', ref.current.innerHTML.length);
+    if (ref.current && ref.current.innerHTML !== processedHtml) {
+      ref.current.innerHTML = processedHtml;
     }
-  }, [html]);
+  }, [processedHtml]);
   React.useEffect(() => {
     var _a;
     console.log('[GeminiCorrectedBlock] isEditMode changed to:', isEditMode, '— contentEditable on div:', (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentEditable);
@@ -665,7 +666,8 @@ function HtmlViewer({
       }) : ((_b = node.id) === null || _b === void 0 ? void 0 : _b.endsWith('/GeminiCorrected')) ? jsxRuntime.jsx(GeminiCorrectedBlock, {
         html: node.html || '',
         isEditMode: viewMode === 'edit',
-        onContentChange: newHtml => handleContentChange(node.id, newHtml)
+        onContentChange: newHtml => handleContentChange(node.id, newHtml),
+        enableMathRendering: enableMathRendering
       }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(EditableContent.default, {
           id: node.id,

package/dist/esm/HtmlViewer.js

@@ -5,6 +5,7 @@ import { VscJson } from 'react-icons/vsc';
 import { FaEdit, FaTags, FaFileDownload, FaChartBar } from './node_modules/react-icons/fa/index.esm.js';
 import Table from './Table.js';
 import EditableContent from './EditableContent.js';
+import { renderMathInHtml } from './MathRenderer.js';
 import { calculateDifferences } from './accuracyMetrics.js';
 import { getTagTypeInfo } from './SemanticTagParser.js';
 
@@ -247,18 +248,19 @@ var FaTagsIcon = FaTags;
 function GeminiCorrectedBlock(_ref6) {
   var html = _ref6.html,
     isEditMode = _ref6.isEditMode,
-    onContentChange = _ref6.onContentChange;
+    onContentChange = _ref6.onContentChange,
+    _ref6$enableMathRende = _ref6.enableMathRendering,
+    enableMathRendering = _ref6$enableMathRende === void 0 ? true : _ref6$enableMathRende;
   var ref = useRef(null);
-  console.log('[GeminiCorrectedBlock] render — isEditMode:', isEditMode, 'htmlLength:', html === null || html === void 0 ? void 0 : html.length, 'ref.current:', !!ref.current);
+  var processedHtml = useMemo(function () {
+    return enableMathRendering ? renderMathInHtml(html) : html;
+  }, [html, enableMathRendering]);
   // Set initial HTML only once via ref — never via dangerouslySetInnerHTML on a contentEditable
   useEffect(function () {
-    var _a;
-    console.log('[GeminiCorrectedBlock] useEffect — ref.current:', !!ref.current, 'html matches:', ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML) === html);
-    if (ref.current && ref.current.innerHTML !== html) {
-      ref.current.innerHTML = html;
-      console.log('[GeminiCorrectedBlock] innerHTML set, length:', ref.current.innerHTML.length);
+    if (ref.current && ref.current.innerHTML !== processedHtml) {
+      ref.current.innerHTML = processedHtml;
     }
-  }, [html]);
+  }, [processedHtml]);
   useEffect(function () {
     var _a;
     console.log('[GeminiCorrectedBlock] isEditMode changed to:', isEditMode, '— contentEditable on div:', (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentEditable);
@@ -748,7 +750,8 @@ function HtmlViewer(_ref7) {
         isEditMode: viewMode === 'edit',
         onContentChange: function onContentChange(newHtml) {
           return handleContentChange(node.id, newHtml);
-        }
+        },
+        enableMathRendering: enableMathRendering
       }) : jsxs(Fragment, {
         children: [jsx(EditableContent, {
           id: node.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfw.in/structura-lib",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Structura Library Components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,8 +29,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
     "tailwindcss": "^3.3.0"
   },
   "dependencies": {
@@ -44,7 +44,7 @@
     "class-variance-authority": "^0.7.0",
     "katex": "^0.16.27",
     "lucide-react": "^0.509.0",
-    "pdfjs-dist": "4.8.69",
+    "pdfjs-dist": "^4.8.69",
     "postcss-cli": "^11.0.1",
     "react-icons": "^4.12.0",
     "react-pdf": "^9.2.1",