legal-markdown-js 2.6.3 → 2.7.0

package/dist/web/index.html

@@ -72,6 +72,7 @@ Your content with {{variable}} substitutions..."></textarea>
             <div class="example-dropdown">
               <select class="css-example-select">
                 <option value="">🎨 CSS Examples</option>
+                <option value="default">Default Legal Styles</option>
                 <option value="modern">Modern Style</option>
                 <option value="classic">Classic Legal</option>
                 <option value="minimal">Minimal</option>
@@ -176,7 +177,7 @@ p {
                 </span>
               </label>
               <label class="checkbox-item">
-                <input type="checkbox" id="enableFieldTracking"> Field tracking
+                <input type="checkbox" id="enableFieldTracking" checked> Field tracking
                 <span class="tooltip">
                   <span class="tooltip-icon">ℹ️</span>
                   <span class="tooltip-text">Adds HTML spans around template variables and headers for debugging and styling. When disabled, maintains compatibility with Ruby version.</span>
@@ -273,6 +274,7 @@ p {
     <div id="messageArea"></div>
   </div>
 
+  <script src="https://cdn.jsdelivr.net/npm/marked@16.1.1/marked.min.js"></script>
   <script src="./legal-markdown.umd.min.js"></script>
   <script>
     class LegalMarkdownApp {
@@ -288,6 +290,7 @@ p {
         this.initializePreviewResizer();
         this.updateBaseStyles(); // Initialize base styles
         this.loadExample('service-agreement');
+        this.loadCSSExample('default'); // Load default CSS by default
       }
 
       initializeTheme() {
@@ -485,19 +488,28 @@ p {
       }
 
       formatMarkdownForDisplay(content) {
-        // Basic markdown to HTML conversion for display
-        return content
-          .replace(/^# (.*$)/gm, '<h1>$1</h1>')
-          .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-          .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-          .replace(/\*(.*?)\*/g, '<em>$1</em>')
-          .replace(/\n\n/g, '</p><p>')
-          .replace(/^(.+)$/gm, '<p>$1</p>')
-          .replace(/<p><\/p>/g, '')
-          .replace(/<p>(<h[1-6]>.*<\/h[1-6]>)<\/p>/g, '$1');
+        // IMPORTANT: This content has already been processed by our Legal Markdown pipeline
+        // in processContent(). Here we just need to convert the final markdown to HTML.
+        if (typeof marked === 'undefined') {
+          console.error('Marked library is not available. Ensure it is loaded correctly.');
+          return `<p>Error: Markdown parser unavailable. Please check your setup.</p>
+                  <pre>${this.escapeHtml(content)}</pre>`;
+        }
+
+        try {
+          return marked.parse(content, {
+            breaks: true,
+            gfm: true
+          });
+        } catch (error) {
+          console.error('Markdown parsing failed:', error);
+          return `<p>Error: Failed to process Markdown content.</p>
+                  <pre>${this.escapeHtml(content)}</pre>`;
+        }
       }
 
+
+
       downloadDocument() {
         if (!this.processedResult) {
           this.showMessage('Please process a document first.', 'error');
@@ -1357,7 +1369,7 @@ Signature: ___________________________ Date: ___________`
           stats.push(`${yamlKeys} YAML variables`);
         }
 
-        if (result.fieldReport) {
+        if (result.fieldReport && Array.isArray(result.fieldReport)) {
           stats.push(`${result.fieldReport.length} field substitutions`);
         }
 
@@ -1585,6 +1597,471 @@ Your content with {{variable}} substitutions...
 
       getCSSExamples() {
         return {
+          'default': `/**
+ * Default Legal Markdown Styles
+ *
+ * Professional stylesheet for legal documents, optimized for both screen and print media.
+ * Features modern typography, clean design, and comprehensive print optimizations.
+ */
+
+/**
+ * Default Legal Markdown Styles
+ *
+ * Professional stylesheet for legal documents, optimized for both screen and print media.
+ * Features modern typography, clean design, and comprehensive print optimizations.
+ *
+ * Structure:
+ * 1. Variables and base configuration
+ * 2. Typography and visual hierarchy
+ * 3. Content elements
+ * 4. Tables and signatures
+ * 5. Print optimizations
+ * 6. Utilities and special classes
+ */
+
+/* Variables and base configuration
+   ========================================================================== */
+:root {
+  /* Colors - Professional slate and teal palette */
+  --color-primary: #1e293b;    /* Slate 800 */
+  --color-accent: #0891b2;     /* Cyan 600 */
+  --color-link: #0891b2;       /* Cyan 600 */
+  --color-text: #334155;       /* Slate 700 */
+  --color-error: #dc2626;      /* Red 600 */
+  --color-bg: #ffffff;         /* White */
+  --color-muted: #64748b;      /* Slate 500 */
+
+  /* Typography */
+  --font-primary: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
+
+  /* Assets - Default logo placeholder */
+  --logo-filename: https://placehold.co/120x40/2563eb/ffffff.png?text=LOGO;
+
+  /* Spacing */
+  --spacing-xsmall: 4px;
+  --spacing-small: 8px;
+  --spacing-medium: 16px;
+  --spacing-large: 32px;
+  --spacing-xlarge: 48px;
+
+  /* Sizes */
+  --font-size-base: 12pt;
+  --font-size-h1: 1.8em;
+  --font-size-h2: 1.4em;
+  --font-size-h3: 1.2em;
+  --font-size-h4: 1.1em;
+
+  /* Layout */
+  --max-width: 210mm; /* A4 width */
+  --border-radius: 6px;
+  --border-width: 1px;
+}
+
+/* Base document configuration
+   ========================================================================== */
+body {
+  font-family: var(--font-primary);
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+  color: var(--color-text);
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 20mm 15mm;
+  background-color: var(--color-bg);
+}
+
+/* Typography hierarchy
+   ========================================================================== */
+/* Prevent page breaks in headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  page-break-after: avoid;
+  page-break-inside: avoid;
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+/* Main document title */
+h1,
+.legal-header-level-1 {
+  font-size: var(--font-size-h1);
+  line-height: 1.3;
+  margin: var(--spacing-medium) 0 var(--spacing-large);
+  text-align: center;
+  border-bottom: 3px solid var(--color-accent);
+  padding-bottom: var(--spacing-medium);
+  color: var(--color-primary);
+}
+
+/* Section headings */
+h2,
+.legal-header-level-2 {
+  font-size: var(--font-size-h2);
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-medium);
+  border-bottom: 2px solid var(--color-accent);
+  padding-bottom: var(--spacing-small);
+  color: var(--color-primary);
+}
+
+/* Subsection headings */
+h3,
+.legal-header-level-3 {
+  font-size: var(--font-size-h3);
+  font-weight: 600;
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-medium);
+  border-bottom: 1px solid var(--color-accent);
+  padding-bottom: var(--spacing-xsmall);
+  color: var(--color-primary);
+}
+
+/* Minor headings */
+h4,
+.legal-header-level-4 {
+  font-size: var(--font-size-h4);
+  font-weight: 600;
+  margin-top: var(--spacing-medium);
+  margin-bottom: var(--spacing-small);
+  color: var(--color-primary);
+}
+
+/* Legal headers */
+h5,
+h6,
+.legal-header-level-5,
+.legal-header-level-6 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: var(--spacing-medium);
+  margin-bottom: var(--spacing-small);
+  color: var(--color-primary);
+}
+
+/* Content elements
+   ========================================================================== */
+/* Paragraphs */
+p {
+  margin-bottom: var(--spacing-medium);
+  text-align: justify;
+  orphans: 3; /* Minimum lines at start of page */
+  widows: 3; /* Minimum lines at end of page */
+  page-break-inside: avoid;
+}
+
+/* Links */
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--color-accent);
+}
+
+/* Lists */
+ul,
+ol {
+  margin: var(--spacing-medium) 0;
+  padding-left: var(--spacing-large);
+  page-break-inside: auto;
+}
+
+li {
+  margin-bottom: var(--spacing-small);
+  page-break-inside: auto;
+}
+
+/* Code blocks */
+pre {
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-medium) 0;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+
+code {
+  background-color: #f1f5f9;
+  color: var(--color-primary);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+/* Horizontal separators */
+hr {
+  border: none;
+  border-top: 2px solid var(--color-accent);
+  margin: var(--spacing-large) 0;
+}
+
+/* Empty fields and missing values */
+.missing-value {
+  background-color: #fef2f2;
+  color: var(--color-error);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  border-radius: 4px;
+  border: var(--border-width) dashed var(--color-error);
+  font-style: italic;
+}
+
+/* Tables
+   ========================================================================== */
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: var(--spacing-medium) 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--spacing-medium) 0;
+  table-layout: fixed;
+  background-color: var(--color-bg);
+}
+
+th,
+td {
+  border: var(--border-width) solid #e2e8f0;
+  padding: var(--spacing-small) var(--spacing-medium);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  background-color: #f8fafc;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+/* Signature table
+   ========================================================================== */
+.signatures {
+  page-break-inside: avoid;
+  margin-top: var(--spacing-xlarge);
+  border: none;
+}
+
+.signatures th {
+  display: none; /* Hide headers while maintaining structure */
+}
+
+.signatures th,
+.signatures td {
+  padding: var(--spacing-medium);
+  text-align: left;
+  border: none;
+  border-bottom: 2px solid var(--color-primary);
+}
+
+/* Two-column layout: 1/3 for labels, 2/3 for signatures */
+.signatures th:first-child,
+.signatures td:first-child {
+  width: 33.33%;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.signatures th:last-child,
+.signatures td:last-child {
+  width: 66.67%;
+}
+
+.signatures td:last-child {
+  height: 6em;
+  vertical-align: bottom;
+  font-weight: normal;
+}
+
+/* Table of contents
+   ========================================================================== */
+.table-of-contents {
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-large) 0;
+}
+
+.table-of-contents li {
+  margin-bottom: var(--spacing-small);
+  list-style-type: none;
+}
+
+/* Confidential section
+   ========================================================================== */
+.confidential {
+  width: 100%;
+  background-color: var(--color-accent) !important;
+  color: white !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  padding: var(--spacing-medium) 0 !important;
+  margin: var(--spacing-large) 0 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 1px !important;
+  display: block !important;
+  border-radius: var(--border-radius) !important;
+  -webkit-print-color-adjust: exact !important;
+  print-color-adjust: exact !important;
+}
+
+/* Separator section
+   ========================================================================== */
+.separator {
+  width: 100%;
+  background-color: var(--color-primary) !important;
+  color: white !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  padding: var(--spacing-small) 0 !important;
+  margin: var(--spacing-large) 0 var(--spacing-medium) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 1px !important;
+  display: block !important;
+  border-radius: var(--border-radius) !important;
+  -webkit-print-color-adjust: exact !important;
+  print-color-adjust: exact !important;
+}
+
+/* Algorithm blocks
+   ========================================================================== */
+.algorithm {
+  background-color: #f8fafc;
+  border: var(--border-width) solid #e2e8f0;
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-medium);
+  margin: var(--spacing-medium) 0;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+
+.algorithm pre {
+  margin: 0;
+  white-space: pre-wrap;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+/* Utilities
+   ========================================================================== */
+.no-break {
+  page-break-inside: avoid !important;
+}
+
+.page-break-before {
+  page-break-before: always !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-muted {
+  color: var(--color-muted) !important;
+}
+
+/* Print optimizations
+   ========================================================================== */
+@media print {
+  /* Page setup */
+  @page {
+    size: A4;
+    margin: 20mm 15mm 15mm 15mm;
+  }
+
+  body {
+    font-size: 11pt;
+    color: black;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Links */
+  a {
+    text-decoration: none;
+    color: var(--color-link);
+  }
+
+  /* Internal links */
+  a[href^='#'] {
+    color: var(--color-link);
+    text-decoration: none;
+  }
+
+  a[data-internal-link='true'] {
+    color: var(--color-link) !important;
+    text-decoration: none !important;
+  }
+
+  /* Show URLs after external links */
+  a[href^='http']:after {
+    content: ' (' attr(href) ')';
+    font-size: 90%;
+    color: var(--color-muted);
+  }
+
+  /* Page break control */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  p, li {
+    page-break-inside: avoid;
+  }
+
+  ul, ol {
+    page-break-inside: auto;
+  }
+
+  img {
+    page-break-inside: avoid;
+    max-width: 100%;
+  }
+
+  /* Maintain colors in print */
+  .confidential,
+  .separator {
+    background-color: var(--color-accent) !important;
+    color: white !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  .algorithm {
+    break-inside: avoid;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  /* Remove backgrounds for better printing */
+  pre,
+  code {
+    background-color: transparent !important;
+    border: 1px solid #ccc !important;
+  }
+}
+`,
+
+          
           'modern': `/* Modern Clean Style */
 .preview-container {
   font-family: 'Segoe UI', system-ui, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "legal-markdown-js",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "Node.js implementation of LegalMarkdown for processing legal documents with markdown and YAML - Complete feature parity with Ruby version",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "build:ts": "tsc && tsc-alias",
     "build:styles": "mkdir -p dist/styles && cp -r $(node scripts/build-paths.js styles)/* dist/styles/ 2>/dev/null || true",
     "build:assets": "mkdir -p dist/assets && cp -r $(node scripts/build-paths.js images)/* dist/assets/ 2>/dev/null || true",
-    "build:web": "cp -r src/web dist/",
+    "build:web": "node scripts/build-web.js",
     "build:copy-umd": "cp dist/legal-markdown.umd.min.js dist/web/",
     "build:umd": "webpack --mode production --config webpack.config.js",
     "build:watch": "tsc --watch",