dispute-protocol/builder-prototype
2
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Added Markdown support

Browse Source
This commit is contained in:
Nathan Schneider
2025-05-07 15:00:20 -06:00
parent 8d54875c6d
commit 9450eeb817
4 changed files with 158 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
static/css/main.css
View File

@ -1356,4 +1356,105 @@ textarea {
box-shadow: none;
margin-top: 5px;
}
}
/* Markdown styles for preview content */
.preview-content {
line-height: 1.5;
word-wrap: break-word;
}
.preview-content a {
color: #0066cc;
text-decoration: underline;
}
.preview-content strong, .preview-content b {
font-weight: bold;
}
.preview-content em, .preview-content i {
font-style: italic;
}
.preview-content ul, .preview-content ol {
margin: 0.5em 0;
padding-left: 2em;
}
.preview-content ul li {
list-style-type: disc;
}
.preview-content ol li {
list-style-type: decimal;
}
.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
margin: 0.5em 0;
line-height: 1.2;
}
.preview-content h1 { font-size: 1.5em; }
.preview-content h2 { font-size: 1.3em; }
.preview-content h3 { font-size: 1.2em; }
.preview-content h4 { font-size: 1.1em; }
.preview-content h5, .preview-content h6 { font-size: 1em; }
.preview-content blockquote {
margin: 0.5em 0;
padding-left: 1em;
border-left: 3px solid #ccc;
color: #555;
}
.preview-content code {
font-family: monospace;
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
}
.preview-content pre {
background-color: #f0f0f0;
padding: 0.5em;
border-radius: 3px;
overflow-x: auto;
margin: 0.5em 0;
}
.preview-content pre code {
background-color: transparent;
padding: 0;
}
.preview-content p {
margin: 0.5em 0;
}
/* Markdown help section styles */
.markdown-help {
font-size: 0.85rem;
line-height: 1.6;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
background-color: #f8f8f8;
}
.markdown-help p {
margin: 0.5em 0;
}
.markdown-help code {
font-family: monospace;
background-color: #eee;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.9em;
}

45
static/js/builder.js
View File

@ -803,8 +803,39 @@ document.addEventListener('DOMContentLoaded', function() {
// Format field content with larger font size (12)
doc.setFontSize(12);
// Process markdown to plaintext for PDF
let processedContent = fieldValue;
try {
// Strip HTML tags from rendered markdown to get clean text
const temp = document.createElement('div');
temp.innerHTML = marked.parse(fieldValue);
// Convert links to format: text (url)
const links = temp.querySelectorAll('a');
links.forEach(link => {
const linkText = link.textContent;
const href = link.getAttribute('href');
// Only modify if href is different from text
if (href && href !== linkText) {
const replacement = `${linkText} (${href})`;
link.textContent = replacement;
}
});
// Bold text handling
const boldElements = temp.querySelectorAll('strong, b');
boldElements.forEach(el => {
el.textContent = `*${el.textContent}*`; // Surround with asterisks
});
// Get plain text content
processedContent = temp.textContent;
} catch (error) {
console.error('Error processing Markdown for PDF:', error);
}
// Use consistent width for all text
const textLines = doc.splitTextToSize(fieldValue, margins.width);
const textLines = doc.splitTextToSize(processedContent, margins.width);
doc.text(textLines, margins.left, yPos);
yPos += textLines.length * 6 + 8; // Slightly increase spacing for larger font
}
@ -933,7 +964,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// Function to update preview content
// Function to update preview content with Markdown support
function updatePreviewContent() {
// First, clear any existing preview divs
document.querySelectorAll('.preview-content').forEach(div => {
@ -951,7 +982,15 @@ document.addEventListener('DOMContentLoaded', function() {
// Create a div to replace the textarea for preview
const previewDiv = document.createElement('div');
previewDiv.className = 'preview-content';
previewDiv.textContent = textarea.value;
// Parse Markdown and set as HTML content
try {
previewDiv.innerHTML = marked.parse(textarea.value);
} catch (error) {
console.error('Error parsing Markdown:', error);
previewDiv.textContent = textarea.value;
}
previewDiv.dataset.forTextarea = textarea.id;
// Hide the textarea and insert the div

13
themes/dispute-protocol-theme/layouts/_default/builder.html
View File

@ -106,6 +106,7 @@
</div>
<div class="sidebar-info">
<p>Preview mode shows only completed elements.</p>
<p>Markdown is supported for formatting text, links, and lists.</p>
</div>
</div>
@ -119,6 +120,18 @@
<input type="file" id="import-json" accept=".json" style="display: none;">
</div>
</div>
<div class="sidebar-section">
<h3>Markdown Help</h3>
<div class="sidebar-info markdown-help">
<p><strong>Bold text:</strong> **bold** or __bold__</p>
<p><em>Italic text:</em> *italic* or _italic_</p>
<p><strong>Links:</strong> [text](url)</p>
<p><strong>Lists:</strong> Start lines with - or 1.</p>
<p><strong>Headings:</strong> # Heading or ## Subheading</p>
<p><strong>Quotes:</strong> > Your quoted text</p>
</div>
</div>
</div>
</div>
</div>

3
themes/dispute-protocol-theme/layouts/partials/head.html
View File

@ -8,9 +8,10 @@
<link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
<!-- JS libraries for PDF export -->
<!-- JS libraries for PDF export and Markdown -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Custom JS for the builder -->
{{ if eq .Layout "builder" }}