@tfw.in/structura-lib 0.2.0 → 0.2.2

package/README.md

@@ -1,15 +1,15 @@
-# Structura Library
+# @tfw.in/structura-lib
 
-A React component library for viewing and editing structured documents with PDF rendering and persistent storage.
+A React component library for PDF document viewing with structured data extraction and rendering.
 
 ## Features
 
-- 📄 **PDF Viewer** - Side-by-side PDF and structured content view
-- ✏️ **Inline Editing** - Double-click to edit any text element
-- 💾 **Persistent Storage** - Automatic save to SQLite database
-- 🔄 **Version History** - Track all edits with timestamps
-- 🎯 **Bidirectional Mapping** - Click highlighting between PDF and content
-- 📦 **Production Ready** - Zero configuration, auto-initialization
+- **PDF & JSON Side-by-Side Viewing** - View original PDF alongside extracted structured content
+- **Edit Mode** - Inline editing of extracted content
+- **Math Rendering** - LaTeX math expressions rendered via KaTeX (`$...$` inline, `$$...$$` display)
+- **Semantic Tags** - Visual highlighting for corrections, additions, and deletions
+- **Header/Footer Detection** - Automatic badges for header and footer content
+- **Table Support** - Rich table rendering with cell-level editing
 
 ## Installation
 
@@ -17,363 +17,112 @@ A React component library for viewing and editing structured documents with PDF
 npm install @tfw.in/structura-lib
 ```
 
-## Quick Start
+## Usage
 
-### 1. Basic Usage
-
-```tsx
+```jsx
 import { Structura } from '@tfw.in/structura-lib';
 import '@tfw.in/structura-lib/dist/esm/styles.css';
 
 function App() {
   return (
     <Structura
-      initialPdfPath="/document.pdf"
-      initialJsonData={jsonData}
-      props={{
-        APIKey: "your-api-key",
-        onSave: (editedData) => {
-          console.log('Document saved:', editedData);
-        }
-      }}
+      apiKey="your-api-key"
+      baseUrl="https://api.example.com"
     />
   );
 }
 ```
 
-### 2. With Backend Storage
+## Props
 
-```tsx
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | **required** | API key for authentication |
+| `baseUrl` | `string` | `undefined` | Optional API base URL |
+| `initialPdfPath` | `string \| null` | `null` | Initial PDF file path to load |
+| `initialJsonData` | `any` | `null` | Initial JSON data to display |
+| `editMode` | `boolean` | `true` | Enable/disable edit mode toggle |
+| `jsonMode` | `boolean` | `true` | Enable/disable JSON view mode toggle |
+| `mathRendering` | `boolean` | `true` | Enable LaTeX math rendering |
+| `semanticTags` | `boolean` | `true` | Enable/disable semantic tags toggle |
+| `headerFooterBadges` | `boolean` | `true` | Show header/footer badges |
+| `defaultViewMode` | `'read' \| 'edit' \| 'json'` | `'read'` | Initial view mode |
+| `onContentChange` | `function` | `undefined` | Callback when content is edited |
+| `onExport` | `function` | `undefined` | Callback when data is exported |
+
+## Full Example
+
+```jsx
 import { Structura } from '@tfw.in/structura-lib';
 import '@tfw.in/structura-lib/dist/esm/styles.css';
 
 function App() {
-  const [jsonData, setJsonData] = useState(null);
-
-  const handleSave = async (editedData) => {
-    const response = await fetch('http://localhost:3002/api/save', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        pdfName: 'document.pdf',
-        editedJson: editedData,
-        originalJson: jsonData // Only on first save
-      })
-    });
+  const handleContentChange = (blockId, oldContent, newContent) => {
+    console.log(`Block ${blockId} changed`);
+    console.log('Old:', oldContent);
+    console.log('New:', newContent);
+  };
 
-    const result = await response.json();
-    console.log('Saved:', result);
+  const handleExport = (data) => {
+    console.log('Exported data:', data);
+    // Save to your backend, etc.
   };
 
   return (
     <Structura
-      initialPdfPath="/document.pdf"
-      initialJsonData={jsonData}
-      props={{
-        APIKey: "your-api-key",
-        onSave: handleSave
-      }}
+      apiKey="your-api-key"
+      baseUrl="https://api.example.com"
+      editMode={true}
+      jsonMode={true}
+      mathRendering={true}
+      semanticTags={true}
+      headerFooterBadges={true}
+      defaultViewMode="read"
+      onContentChange={handleContentChange}
+      onExport={handleExport}
     />
   );
 }
 ```
 
-## Props
-
-### `Structura` Component
+## Math Rendering
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `initialPdfPath` | `string \| null` | No | URL or path to PDF file |
-| `initialJsonData` | `any \| null` | No | Pre-loaded JSON data (bypasses API call) |
-| `props.APIKey` | `string` | Yes | Structura API key for processing |
-| `props.baseUrl` | `string` | No | Custom API base URL |
-| `props.onSave` | `(data: any) => void \| Promise<void>` | No | Callback when user saves edits |
-
-## Backend Server (Optional)
-
-The library includes an Express server for persistent storage.
-
-### Start the Server
-
-```bash
-cd node_modules/@tfw.in/structura-lib
-npm run server
-```
+The library automatically renders LaTeX math expressions in content:
 
-Server runs on `http://localhost:3002`
+- Inline math: `$x^2 + y^2 = z^2$`
+- Display math: `$$\sum_{i=1}^{n} x_i$$`
 
-### API Endpoints
+You can also use the math utilities directly:
 
-#### POST /api/save
-Save edited document.
-
-```bash
-curl -X POST http://localhost:3002/api/save \
-  -H "Content-Type: application/json" \
-  -d '{
-    "pdfName": "document.pdf",
-    "editedJson": {...},
-    "originalJson": {...}
-  }'
-```
-
-#### GET /api/load/:pdfName
-Load document with latest edit.
-
-```bash
-curl http://localhost:3002/api/load/document.pdf
-```
-
-#### GET /api/history/:pdfName
-Get full edit history.
-
-```bash
-curl http://localhost:3002/api/history/document.pdf
-```
+```jsx
+import { MathContent, renderMathInHtml, containsMath } from '@tfw.in/structura-lib';
 
-## Usage Patterns
+// React component
+<MathContent html="The formula is $E = mc^2$" />
 
-### Pattern 1: Database-First Loading
+// Utility function
+const rendered = renderMathInHtml("Price is $20$ dollars");
 
-```tsx
-useEffect(() => {
-  const pdfName = 'document.pdf';
-
-  // Try database first
-  fetch(`http://localhost:3002/api/load/${pdfName}`)
-    .then(res => res.json())
-    .then(result => {
-      setJsonData(result.document.currentJson);
-    })
-    .catch(() => {
-      // Fallback to file
-      fetch('/data.json')
-        .then(res => res.json())
-        .then(data => setJsonData(data));
-    });
-}, []);
-```
-
-### Pattern 2: Auto-Save on Edit
-
-```tsx
-const handleSave = async (editedData) => {
-  await fetch('http://localhost:3002/api/save', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      pdfName: pdfUrl.split('/').pop(),
-      editedJson: editedData
-    })
-  });
-
-  // Reload from database to verify
-  const response = await fetch(`http://localhost:3002/api/load/${pdfName}`);
-  const result = await response.json();
-  setJsonData(result.document.currentJson);
-};
-```
-
-### Pattern 3: URL Parameters
-
-```tsx
-// Load from URL: ?pdf=/doc.pdf&json=/data.json
-useEffect(() => {
-  const params = new URLSearchParams(window.location.search);
-  const pdf = params.get('pdf');
-  const json = params.get('json');
-
-  if (pdf && json) {
-    setPdfUrl(pdf);
-    fetch(json)
-      .then(res => res.json())
-      .then(data => setJsonData(data));
-  }
-}, []);
-```
-
-## Features
-
-### Inline Editing
-
-Double-click any text to edit:
-- Edits are tracked automatically
-- Green **Save** button appears when changes are made
-- Yellow highlight indicates edited content
-
-### Version History
-
-Every save creates a new version:
-- Full edit history preserved
-- Timestamps for each edit
-- Can restore any previous version
-
-### Bidirectional Mapping
-
-Click elements to highlight corresponding content:
-- PDF → HTML viewer
-- HTML viewer → PDF location
-- Smooth scrolling and highlighting
-
-## Development
-
-### Build the Library
-
-```bash
-npm run build
-```
-
-### Run Test App
-
-```bash
-cd test-app
-npm install
-npm run dev
-```
-
-Open: `http://localhost:5175`
-
-### Run with Backend
-
-Terminal 1:
-```bash
-npm run server
-```
-
-Terminal 2:
-```bash
-cd test-app
-npm run dev
-```
-
-## Database Schema
-
-### documents table
-```sql
-CREATE TABLE documents (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  pdf_name TEXT NOT NULL,
-  original_json TEXT NOT NULL,
-  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-```
-
-### edits table
-```sql
-CREATE TABLE edits (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  document_id INTEGER NOT NULL,
-  edited_json TEXT NOT NULL,
-  edit_summary TEXT,
-  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-  FOREIGN KEY (document_id) REFERENCES documents(id)
-);
-```
-
-## Architecture
-
-```
-┌──────────────────┐
-│  React Component │
-│   (Structura)    │
-└────────┬─────────┘
-         │
-         ├─── PDF Viewer (Left)
-         │    - Render PDF pages
-         │    - Click to highlight
-         │
-         └─── HTML Viewer (Right)
-              - Structured content
-              - Inline editing
-              - Save button
-                     │
-                     ▼
-              ┌──────────────┐
-              │ Express API  │
-              │ (port 3002)  │
-              └──────┬───────┘
-                     │
-                     ▼
-              ┌──────────────┐
-              │   SQLite DB  │
-              │  (edits.db)  │
-              └──────────────┘
-```
-
-## Production Deployment
-
-### Using PM2
-
-```bash
-npm install -g pm2
-pm2 start server/server.js --name structura-server
-pm2 save
-pm2 startup
-```
-
-### Docker
-
-```dockerfile
-FROM node:18
-WORKDIR /app
-COPY package*.json ./
-RUN npm install --production
-COPY . .
-EXPOSE 3002
-CMD ["node", "server/server.js"]
-```
-
-### Nginx
-
-```nginx
-location /api/ {
-  proxy_pass http://localhost:3002;
-  client_max_body_size 50M;
+// Check for math content
+if (containsMath(text)) {
+  // handle math
 }
 ```
 
-## Configuration
-
-### Environment Variables
-
-```bash
-PORT=3002                    # Server port
-NODE_ENV=production          # Environment
-DATABASE_PATH=./edits.db     # SQLite path
-MAX_JSON_SIZE=50mb          # Request limit
-```
-
-## Troubleshooting
-
-### Save button not appearing
-
-1. Check `onSave` prop is provided
-2. Make an edit (double-click text)
-3. Rebuild library: `npm run build`
+## Semantic Tags
 
-### Database not persisting
+Parse and render semantic tags for document corrections:
 
-1. Check server is running: `curl http://localhost:3002/health`
-2. Check database file exists: `ls -la server/edits.db`
-3. Check browser console for errors
+```jsx
+import { SemanticTagRenderer, parseSemanticTags } from '@tfw.in/structura-lib';
 
-### PDF not loading
+// Render with visual highlighting
+<SemanticTagRenderer content="Text with <add>additions</add> and <del>deletions</del>" />
 
-1. Check CORS settings on PDF server
-2. Verify PDF path is correct
-3. Check browser console for errors
+// Parse tags programmatically
+const parsed = parseSemanticTags(content);
+```
 
 ## License
 
 MIT
-
-## Author
-
-TFW
-
-## Support
-
-For issues and questions:
-- GitHub: https://github.com/ChakshuGautam/structura-lib
-- Documentation: See `/server/README.md` for API details

package/dist/cjs/EditableContent.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var SemanticTagRenderer = require('./SemanticTagRenderer.js');
+var SemanticTagParser = require('./SemanticTagParser.js');
+var MathRenderer = require('./MathRenderer.js');
 
 // Helper function to extract text content while preserving structure
 const extractTextPreservingStructure = html => {
@@ -25,7 +28,13 @@ function EditableContent({
   content,
   onContentChange,
   isHeading = false,
-  onNodeClick
+  isEditMode = false,
+  isJsonMode = false,
+  onNodeClick,
+  onJsonClick,
+  enableSemanticTags = true,
+  onSemanticTagClick,
+  enableMathRendering = true
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editedContent, setEditedContent] = React.useState(content);
@@ -55,24 +64,22 @@ function EditableContent({
   const getHeadingStyles = level => {
     switch (level) {
       case 1:
-        return "text-2xl font-bold";
-      case 2:
         return "text-xl font-bold";
-      case 3:
+      case 2:
         return "text-lg font-bold";
-      case 4:
+      case 3:
         return "text-base font-bold";
-      case 5:
+      case 4:
         return "text-sm font-bold";
-      case 6:
+      case 5:
         return "text-xs font-bold";
+      case 6:
+        return "text-xs font-semibold";
       default:
-        return "text-base";
+        return "text-sm";
     }
   };
-  const handleDoubleClick = e => {
-    // Stop propagation to prevent parent click handlers from firing
-    e.stopPropagation();
+  const startEditing = () => {
     if (onContentChange) {
       // Extract text content for textarea while preserving structure
       setTextAreaContent(extractTextPreservingStructure(editedContent));
@@ -111,6 +118,18 @@ function EditableContent({
       e.stopPropagation();
       return;
     }
+    // In JSON mode, show JSON on click
+    if (isJsonMode && onJsonClick) {
+      e.stopPropagation();
+      onJsonClick();
+      return;
+    }
+    // In edit mode, single click activates editing
+    if (isEditMode && onContentChange) {
+      e.stopPropagation();
+      startEditing();
+      return;
+    }
     // If there's an onNodeClick handler, call it
     if (onNodeClick) {
       e.stopPropagation(); // Prevent click from reaching parent containers
@@ -124,25 +143,34 @@ function EditableContent({
       handleBlur();
     }
   };
+  // Render math expressions in content (conditionally)
+  const renderedContent = React.useMemo(() => {
+    return enableMathRendering ? MathRenderer.renderMathInHtml(editedContent) : editedContent;
+  }, [editedContent, enableMathRendering]);
   return jsxRuntime.jsx("div", {
-    className: `w-full ${isEdited ? "bg-yellow-100" : ""} ${onNodeClick && !isEditing ? "cursor-pointer" : ""}`,
+    className: `w-full ${isEdited ? "bg-yellow-100" : ""} ${isJsonMode ? "cursor-pointer hover:bg-purple-50 border border-transparent hover:border-purple-300 rounded" : ""} ${isEditMode && !isEditing ? "cursor-pointer hover:bg-blue-50 border border-transparent hover:border-blue-300 rounded" : ""} ${onNodeClick && !isEditing && !isEditMode && !isJsonMode ? "cursor-pointer" : ""}`,
     onClick: handleClick,
-    onDoubleClick: handleDoubleClick,
     children: isEditing ? jsxRuntime.jsx("textarea", {
       value: textAreaContent,
       onChange: handleChange,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       autoFocus: true,
-      className: "w-full p-1 border border-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900",
+      className: "w-full p-1 border border-blue-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
       onClick: e => e.stopPropagation(),
       rows: 3
     }) : jsxRuntime.jsx("div", {
       ref: contentRef,
-      className: `prose max-w-none ${isHeading ? getHeadingStyles(headingLevel) : ""}`,
-      dangerouslySetInnerHTML: {
-        __html: editedContent
-      }
+      className: `prose prose-sm max-w-none ${isHeading ? getHeadingStyles(headingLevel) : "text-sm"}`,
+      children: enableSemanticTags && SemanticTagParser.hasSemanticTags(editedContent) ? jsxRuntime.jsx(SemanticTagRenderer.default, {
+        content: editedContent,
+        showTooltips: true,
+        onTagClick: onSemanticTagClick
+      }) : jsxRuntime.jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: renderedContent
+        }
+      })
     })
   });
 }