herocode/markdown_editor
13
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk
2025-10-26 10:52:27 +04:00
parent d48e25ce90
commit 8750e0af39
10 changed files with 482 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
static/js/editor.js
View File

@@ -10,7 +10,9 @@ class MarkdownEditor {
this.filenameInput = document.getElementById(filenameInputId);
this.currentFile = null;
this.webdavClient = null;
this.macroProcessor = new MacroProcessor(null); // Will be set later
// Initialize macro processor AFTER webdavClient is set
this.macroProcessor = null;
this.initCodeMirror();
this.initMarkdown();
@@ -88,10 +90,8 @@ class MarkdownEditor {
setWebDAVClient(client) {
this.webdavClient = client;
// Update macro processor with client
if (this.macroProcessor) {
this.macroProcessor.webdavClient = client;
}
// NOW initialize macro processor
this.macroProcessor = new MacroProcessor(client);
}
/**
@@ -196,38 +196,29 @@ class MarkdownEditor {
const previewDiv = this.previewElement;
if (!markdown || !markdown.trim()) {
previewDiv.innerHTML = `
<div class="text-muted text-center mt-5">
<p>Start typing to see preview...</p>
</div>
`;
previewDiv.innerHTML = `<div class="text-muted">Start typing...</div>`;
return;
}
try {
// Step 1: Process macros
console.log('[Editor] Processing macros...');
let processedContent = markdown;
if (this.macroProcessor) {
const processingResult = await this.macroProcessor.processMacros(markdown);
processedContent = processingResult.content;
const result = await this.macroProcessor.processMacros(markdown);
processedContent = result.content;
// Log errors if any
if (processingResult.errors.length > 0) {
console.warn('Macro processing errors:', processingResult.errors);
if (result.errors.length > 0) {
console.warn('[Editor] Macro errors:', result.errors);
}
}
// Step 2: Parse markdown to HTML
if (!this.marked) {
console.error("Markdown parser (marked) not initialized.");
previewDiv.innerHTML = `<div class="alert alert-danger">Preview engine not loaded.</div>`;
return;
}
// Step 2: Parse markdown
console.log('[Editor] Parsing markdown...');
let html = this.marked.parse(processedContent);
// Replace mermaid code blocks
// Step 3: Handle mermaid
html = html.replace(
/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
(match, code) => {
@@ -238,35 +229,23 @@ class MarkdownEditor {
previewDiv.innerHTML = html;
// Apply syntax highlighting
// Step 4: Syntax highlighting
const codeBlocks = previewDiv.querySelectorAll('pre code');
codeBlocks.forEach(block => {
const languageClass = Array.from(block.classList)
const lang = Array.from(block.classList)
.find(cls => cls.startsWith('language-'));
if (languageClass && languageClass !== 'language-mermaid') {
if (window.Prism) {
window.Prism.highlightElement(block);
}
if (lang && lang !== 'language-mermaid' && window.Prism) {
window.Prism.highlightElement(block);
}
});
// Render mermaid diagrams
const mermaidElements = previewDiv.querySelectorAll('.mermaid');
if (mermaidElements.length > 0 && window.mermaid) {
try {
window.mermaid.contentLoaded();
} catch (error) {
console.warn('Mermaid rendering error:', error);
}
// Step 5: Render mermaid
if (window.mermaid) {
await window.mermaid.run();
}
} catch (error) {
console.error('Preview rendering error:', error);
previewDiv.innerHTML = `
<div class="alert alert-danger" role="alert">
<strong>Error rendering preview:</strong><br>
${error.message}
</div>
`;
console.error('[Editor] Preview error:', error);
previewDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
}
}