feat: Comment edit/delete, auto-link URLs, markdown tables, mobile fixes
- Add comment edit/delete functionality (owner or admin can modify) - Add edit/delete buttons to comments in TicketView - Create update_comment.php and delete_comment.php API endpoints - Add updateComment() and deleteComment() methods to CommentModel - Show "(edited)" indicator on modified comments - Add migration script for updated_at column - Auto-link URLs in plain text comments (non-markdown) - Add markdown table support with proper HTML rendering - Preserve code blocks during markdown parsing - Fix mobile UI elements showing on desktop (add display:none defaults) - Add mobile styles for CreateTicketView form elements - Stack status-priority-row on mobile devices - Update cache busters to v20260124e - Update Claude.md and README.md documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -16,11 +16,22 @@ function parseMarkdown(markdown) {
|
||||
// Ticket references (#123456789) - convert to clickable links
|
||||
html = html.replace(/#(\d{9})\b/g, '<a href="/ticket/$1" class="ticket-link-ref">#$1</a>');
|
||||
|
||||
// Code blocks (```code```)
|
||||
html = html.replace(/```([\s\S]*?)```/g, '<pre class="code-block"><code>$1</code></pre>');
|
||||
// Code blocks (```code```) - preserve content and don't process further
|
||||
const codeBlocks = [];
|
||||
html = html.replace(/```([\s\S]*?)```/g, function(match, code) {
|
||||
codeBlocks.push('<pre class="code-block"><code>' + code + '</code></pre>');
|
||||
return '%%CODEBLOCK' + (codeBlocks.length - 1) + '%%';
|
||||
});
|
||||
|
||||
// Inline code (`code`)
|
||||
html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
|
||||
// Inline code (`code`) - preserve and don't process further
|
||||
const inlineCodes = [];
|
||||
html = html.replace(/`([^`]+)`/g, function(match, code) {
|
||||
inlineCodes.push('<code class="inline-code">' + code + '</code>');
|
||||
return '%%INLINECODE' + (inlineCodes.length - 1) + '%%';
|
||||
});
|
||||
|
||||
// Tables (must be processed before other block elements)
|
||||
html = parseMarkdownTables(html);
|
||||
|
||||
// Bold (**text** or __text__)
|
||||
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
@@ -40,6 +51,9 @@ function parseMarkdown(markdown) {
|
||||
return text;
|
||||
});
|
||||
|
||||
// Auto-link bare URLs (http, https, ftp)
|
||||
html = html.replace(/(?<!["\'>])(\bhttps?:\/\/[^\s<>\[\]()]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
|
||||
|
||||
// Headers (# H1, ## H2, etc.)
|
||||
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
|
||||
@@ -54,7 +68,7 @@ function parseMarkdown(markdown) {
|
||||
html = html.replace(/^\s*\d+\.\s+(.+)$/gm, '<li>$1</li>');
|
||||
|
||||
// Blockquotes (> text)
|
||||
html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
|
||||
html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
|
||||
|
||||
// Horizontal rules (--- or ***)
|
||||
html = html.replace(/^(?:---|___|\*\*\*)$/gm, '<hr>');
|
||||
@@ -63,6 +77,14 @@ function parseMarkdown(markdown) {
|
||||
html = html.replace(/ \n/g, '<br>');
|
||||
html = html.replace(/\n\n/g, '</p><p>');
|
||||
|
||||
// Restore code blocks and inline code
|
||||
codeBlocks.forEach((block, i) => {
|
||||
html = html.replace('%%CODEBLOCK' + i + '%%', block);
|
||||
});
|
||||
inlineCodes.forEach((code, i) => {
|
||||
html = html.replace('%%INLINECODE' + i + '%%', code);
|
||||
});
|
||||
|
||||
// Wrap in paragraph if not already wrapped
|
||||
if (!html.startsWith('<')) {
|
||||
html = '<p>' + html + '</p>';
|
||||
@@ -71,6 +93,92 @@ function parseMarkdown(markdown) {
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse markdown tables
|
||||
* Supports: | Header | Header |
|
||||
* |--------|--------|
|
||||
* | Cell | Cell |
|
||||
*/
|
||||
function parseMarkdownTables(html) {
|
||||
const lines = html.split('\n');
|
||||
const result = [];
|
||||
let inTable = false;
|
||||
let tableRows = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
// Check if line is a table row (starts and ends with |, or has | in the middle)
|
||||
if (line.match(/^\|.*\|$/) || line.match(/^[^|]+\|[^|]+/)) {
|
||||
// Check if next line is separator (|---|---|)
|
||||
const nextLine = lines[i + 1] ? lines[i + 1].trim() : '';
|
||||
const isSeparator = line.match(/^\|?[\s-:|]+\|[\s-:|]+\|?$/);
|
||||
|
||||
if (!inTable && !isSeparator) {
|
||||
// Start of table - check if this is a header row
|
||||
if (nextLine.match(/^\|?[\s-:|]+\|[\s-:|]+\|?$/)) {
|
||||
inTable = true;
|
||||
tableRows.push({ type: 'header', content: line });
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (inTable) {
|
||||
if (isSeparator) {
|
||||
// Skip separator line
|
||||
continue;
|
||||
}
|
||||
tableRows.push({ type: 'body', content: line });
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Not a table row - flush any accumulated table
|
||||
if (inTable && tableRows.length > 0) {
|
||||
result.push(buildTable(tableRows));
|
||||
tableRows = [];
|
||||
inTable = false;
|
||||
}
|
||||
result.push(lines[i]);
|
||||
}
|
||||
|
||||
// Flush remaining table
|
||||
if (tableRows.length > 0) {
|
||||
result.push(buildTable(tableRows));
|
||||
}
|
||||
|
||||
return result.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML table from parsed rows
|
||||
*/
|
||||
function buildTable(rows) {
|
||||
if (rows.length === 0) return '';
|
||||
|
||||
let html = '<table class="markdown-table">';
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
const cells = row.content.split('|').filter(cell => cell.trim() !== '');
|
||||
const tag = row.type === 'header' ? 'th' : 'td';
|
||||
const wrapper = row.type === 'header' ? 'thead' : (index === 1 ? 'tbody' : '');
|
||||
|
||||
if (wrapper === 'thead') html += '<thead>';
|
||||
if (wrapper === 'tbody') html += '<tbody>';
|
||||
|
||||
html += '<tr>';
|
||||
cells.forEach(cell => {
|
||||
html += `<${tag}>${cell.trim()}</${tag}>`;
|
||||
});
|
||||
html += '</tr>';
|
||||
|
||||
if (row.type === 'header') html += '</thead>';
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
return html;
|
||||
}
|
||||
|
||||
// Apply markdown rendering to all elements with data-markdown attribute
|
||||
function renderMarkdownElements() {
|
||||
document.querySelectorAll('[data-markdown]').forEach(element => {
|
||||
@@ -273,3 +381,39 @@ window.toolbarQuote = toolbarQuote;
|
||||
window.createEditorToolbar = createEditorToolbar;
|
||||
window.insertMarkdownFormat = insertMarkdownFormat;
|
||||
window.insertMarkdownText = insertMarkdownText;
|
||||
|
||||
// ========================================
|
||||
// Auto-link URLs in plain text (non-markdown)
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Convert plain text URLs to clickable links
|
||||
* Used for non-markdown comments
|
||||
*/
|
||||
function autoLinkUrls(text) {
|
||||
if (!text) return '';
|
||||
// Match URLs that aren't already in an href attribute
|
||||
return text.replace(/(?<!["\'>])(https?:\/\/[^\s<>\[\]()]+)/g,
|
||||
'<a href="$1" target="_blank" rel="noopener noreferrer" class="auto-link">$1</a>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Process all non-markdown comment elements to auto-link URLs
|
||||
*/
|
||||
function processPlainTextComments() {
|
||||
document.querySelectorAll('.comment-text:not([data-markdown])').forEach(element => {
|
||||
// Only process if not already processed
|
||||
if (element.dataset.linksProcessed) return;
|
||||
element.innerHTML = autoLinkUrls(element.innerHTML);
|
||||
element.dataset.linksProcessed = 'true';
|
||||
});
|
||||
}
|
||||
|
||||
// Run on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
processPlainTextComments();
|
||||
});
|
||||
|
||||
// Expose for manual use
|
||||
window.autoLinkUrls = autoLinkUrls;
|
||||
window.processPlainTextComments = processPlainTextComments;
|
||||
|
||||
Reference in New Issue
Block a user