1517 lines
49 KiB
JavaScript
1517 lines
49 KiB
JavaScript
// Main application
|
|
class ConceptionAssistant {
|
|
constructor() {
|
|
this.currentJournalId = null;
|
|
this.editor = null;
|
|
this.undoStack = [];
|
|
this.redoStack = [];
|
|
this.tocTimer = null;
|
|
this.isPreviewMode = false;
|
|
this.originalContent = '';
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.setupEditor();
|
|
this.setupEventListeners();
|
|
await this.loadJournalList();
|
|
this.generateTOC();
|
|
this.updateStatistics();
|
|
}
|
|
|
|
setupEditor() {
|
|
this.editor = document.getElementById('journal-editor');
|
|
|
|
// Generate TOC with debounce to avoid interrupting typing
|
|
this.editor.addEventListener('input', () => {
|
|
this.debounceTOC();
|
|
this.updateStatistics();
|
|
});
|
|
|
|
// Keyboard shortcut handling
|
|
this.editor.addEventListener('keydown', (e) => {
|
|
// Ctrl+S to save
|
|
if (e.ctrlKey && e.key === 's') {
|
|
e.preventDefault();
|
|
this.saveJournal();
|
|
}
|
|
|
|
// Ctrl+Z to undo
|
|
if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
this.undo();
|
|
}
|
|
|
|
// Ctrl+Y or Ctrl+Shift+Z to redo
|
|
if (e.ctrlKey && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
|
|
e.preventDefault();
|
|
this.redo();
|
|
}
|
|
|
|
// Tab for indentation
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
document.execCommand('insertText', false, ' ');
|
|
}
|
|
});
|
|
|
|
// Save state for undo/redo before important modifications
|
|
this.editor.addEventListener('input', () => {
|
|
this.saveState();
|
|
});
|
|
}
|
|
|
|
showEditorPlaceholder() {
|
|
// Placeholder is now managed via CSS ::before
|
|
// This function can be removed or left empty for compatibility
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Journal control buttons
|
|
document.getElementById('save-journal')?.addEventListener('click', () => this.saveJournal());
|
|
document.getElementById('load-journal')?.addEventListener('click', () => this.showJournalSelector());
|
|
document.getElementById('preview-toggle')?.addEventListener('click', async () => await this.togglePreview());
|
|
document.getElementById('new-blank-document')?.addEventListener('click', () => this.createBlankDocument());
|
|
|
|
// Table of contents
|
|
document.getElementById('refresh-toc')?.addEventListener('click', () => this.generateTOC());
|
|
|
|
// Export/Import
|
|
document.getElementById('export-md')?.addEventListener('click', () => this.exportMarkdown());
|
|
document.getElementById('export-web')?.addEventListener('click', () => this.exportWeb());
|
|
document.getElementById('import-md')?.addEventListener('change', (e) => this.importMarkdown(e));
|
|
|
|
// Theme
|
|
document.getElementById('theme-toggle')?.addEventListener('click', () => this.toggleTheme());
|
|
|
|
// AI Assistant
|
|
document.getElementById('activate-rephrase')?.addEventListener('click', () => this.handleAI('rephrase'));
|
|
document.getElementById('check-inconsistencies')?.addEventListener('click', () => this.handleAI('inconsistencies'));
|
|
document.getElementById('check-duplications')?.addEventListener('click', () => this.handleAI('duplications'));
|
|
document.getElementById('give-advice')?.addEventListener('click', () => this.handleAI('advice'));
|
|
document.getElementById('liberty-mode')?.addEventListener('click', () => this.handleAI('liberty'));
|
|
|
|
// Present mode
|
|
document.getElementById('present-mode')?.addEventListener('click', () => this.openPresentMode());
|
|
|
|
// Shortcuts help
|
|
document.getElementById('show-shortcuts')?.addEventListener('click', () => this.showShortcutsModal());
|
|
|
|
// Loading modal
|
|
document.getElementById('close-journal-modal')?.addEventListener('click', () => this.closeModal());
|
|
|
|
// Close modal by clicking on overlay
|
|
document.getElementById('journal-modal')?.addEventListener('click', (e) => {
|
|
if (e.target.id === 'journal-modal') {
|
|
this.closeModal();
|
|
}
|
|
});
|
|
|
|
// Scroll to top button
|
|
document.getElementById('scroll-to-top')?.addEventListener('click', () => this.scrollToTop());
|
|
|
|
// Manage scroll to top button display
|
|
this.setupScrollToTop();
|
|
}
|
|
|
|
setupScrollToTop() {
|
|
const scrollButton = document.getElementById('scroll-to-top');
|
|
if (!scrollButton) return;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 300) {
|
|
scrollButton.classList.add('visible');
|
|
} else {
|
|
scrollButton.classList.remove('visible');
|
|
}
|
|
});
|
|
}
|
|
|
|
scrollToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
this.showNotification('Back to top', 'success');
|
|
}
|
|
|
|
saveState(immediate = false) {
|
|
// If immediate is true, save immediately without debounce
|
|
if (immediate) {
|
|
this.performSaveState();
|
|
return;
|
|
}
|
|
|
|
// Avoid saving too often (debounce)
|
|
if (this.saveStateTimer) {
|
|
clearTimeout(this.saveStateTimer);
|
|
}
|
|
|
|
this.saveStateTimer = setTimeout(() => {
|
|
this.performSaveState();
|
|
}, 1000); // Save after 1 second of inactivity
|
|
}
|
|
|
|
performSaveState() {
|
|
const currentContent = this.editor.innerText;
|
|
|
|
// Don't save if content hasn't changed
|
|
if (this.undoStack.length > 0 && this.undoStack[this.undoStack.length - 1] === currentContent) {
|
|
return;
|
|
}
|
|
|
|
this.undoStack.push(currentContent);
|
|
|
|
// Limit undo stack to 50 elements
|
|
if (this.undoStack.length > 50) {
|
|
this.undoStack.shift();
|
|
}
|
|
|
|
// Clear redo stack because we've done a new action
|
|
this.redoStack = [];
|
|
}
|
|
|
|
undo() {
|
|
if (this.undoStack.length > 1) {
|
|
const currentContent = this.undoStack.pop();
|
|
this.redoStack.push(currentContent);
|
|
|
|
const previousContent = this.undoStack[this.undoStack.length - 1];
|
|
this.editor.innerText = previousContent;
|
|
|
|
// Regenerate table of contents
|
|
this.generateTOC();
|
|
|
|
this.showNotification('Undo completed', 'success');
|
|
} else {
|
|
this.showNotification('Nothing to undo', 'warning');
|
|
}
|
|
}
|
|
|
|
redo() {
|
|
if (this.redoStack.length > 0) {
|
|
const nextContent = this.redoStack.pop();
|
|
this.undoStack.push(nextContent);
|
|
|
|
this.editor.innerText = nextContent;
|
|
|
|
// Regenerate table of contents
|
|
this.generateTOC();
|
|
|
|
this.showNotification('Redo completed', 'success');
|
|
} else {
|
|
this.showNotification('Nothing to redo', 'warning');
|
|
}
|
|
}
|
|
|
|
|
|
async saveJournal() {
|
|
const content = this.editor.innerText;
|
|
if (!content) return;
|
|
|
|
const statusEl = document.getElementById('save-status');
|
|
const saveBtn = document.getElementById('save-journal');
|
|
|
|
saveBtn.classList.add('loading');
|
|
statusEl.textContent = 'Saving...';
|
|
|
|
try {
|
|
let response;
|
|
|
|
if (this.currentJournalId) {
|
|
// Update
|
|
response = await fetch(`/api/journals/${this.currentJournalId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content })
|
|
});
|
|
} else {
|
|
// Create
|
|
response = await fetch('/api/journals', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content })
|
|
});
|
|
}
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
if (!this.currentJournalId) {
|
|
this.currentJournalId = result.data.id;
|
|
}
|
|
|
|
statusEl.textContent = 'Saved';
|
|
this.showNotification('Journal saved successfully', 'success');
|
|
setTimeout(() => statusEl.textContent = '', 3000);
|
|
} else {
|
|
throw new Error(result.error || 'Save error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
statusEl.textContent = 'Error';
|
|
this.showNotification('Error while saving: ' + error.message, 'error');
|
|
setTimeout(() => statusEl.textContent = '', 3000);
|
|
} finally {
|
|
saveBtn.classList.remove('loading');
|
|
}
|
|
}
|
|
|
|
async loadJournalList() {
|
|
try {
|
|
const response = await fetch('/api/journals');
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.data.length > 0) {
|
|
// Load the last journal automatically
|
|
const lastJournal = result.data[result.data.length - 1];
|
|
await this.loadJournal(lastJournal.id);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading list:', error);
|
|
}
|
|
}
|
|
|
|
async loadJournal(id) {
|
|
try {
|
|
const response = await fetch(`/api/journals/${id}`);
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.data.length > 0) {
|
|
const journal = result.data[0];
|
|
this.currentJournalId = id;
|
|
this.editor.innerText = journal.markdownContent;
|
|
this.generateTOC();
|
|
|
|
// Reset history for the new journal
|
|
this.undoStack = [journal.markdownContent];
|
|
this.redoStack = [];
|
|
|
|
// Ensure editor is in edit mode
|
|
this.ensureEditMode();
|
|
|
|
this.showNotification('Journal loaded', 'success');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading journal:', error);
|
|
this.showNotification('Error while loading', 'error');
|
|
}
|
|
}
|
|
|
|
async showJournalSelector() {
|
|
try {
|
|
const response = await fetch('/api/journals');
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
const journalList = result.data.map(journal => {
|
|
// Extract first lines for preview
|
|
const lines = journal.markdownContent.split('\n');
|
|
const firstLines = lines.slice(0, 3).join('\n');
|
|
const preview = firstLines.length > 150 ? firstLines.substring(0, 150) + '...' : firstLines;
|
|
|
|
return `
|
|
<div class="journal-item-container">
|
|
<button class="journal-item btn secondary" data-id="${journal.id}">
|
|
<div class="journal-preview">
|
|
<strong>Journal ${journal.id}</strong>
|
|
<div>${preview}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const modalBody = document.getElementById('journal-modal-body');
|
|
modalBody.innerHTML = `
|
|
<div class="journal-list">
|
|
<button class="btn success mb-2" onclick="app.createNewJournal(); app.closeModal();" style="width: 100%;">
|
|
+ New Journal
|
|
</button>
|
|
${journalList}
|
|
</div>
|
|
`;
|
|
|
|
// Show modal with animation
|
|
const modal = document.getElementById('journal-modal');
|
|
modal.style.display = 'flex';
|
|
setTimeout(() => modal.classList.add('show'), 10);
|
|
|
|
// Add event listeners
|
|
document.querySelectorAll('.journal-item').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.loadJournal(btn.dataset.id);
|
|
this.closeModal();
|
|
});
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
this.showNotification('Error loading list', 'error');
|
|
}
|
|
}
|
|
|
|
closeModal() {
|
|
const modal = document.getElementById('journal-modal');
|
|
modal.classList.remove('show');
|
|
setTimeout(() => {
|
|
modal.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
|
|
createNewJournal() {
|
|
this.currentJournalId = null;
|
|
this.editor.innerText = '';
|
|
this.generateTOC();
|
|
this.clearFeedback();
|
|
|
|
// Reset history for new journal
|
|
this.undoStack = [''];
|
|
this.redoStack = [];
|
|
|
|
// Ensure editor is in edit mode
|
|
this.ensureEditMode();
|
|
|
|
this.showNotification('New journal created', 'success');
|
|
}
|
|
|
|
createBlankDocument() {
|
|
// Clear the editor completely
|
|
this.editor.innerText = '';
|
|
|
|
// Reset currentJournalId to null
|
|
this.currentJournalId = null;
|
|
|
|
// Reset undo/redo stacks
|
|
this.undoStack = [''];
|
|
this.redoStack = [];
|
|
|
|
// Generate TOC
|
|
this.generateTOC();
|
|
|
|
// Update statistics
|
|
this.updateStatistics();
|
|
|
|
// Show notification
|
|
this.showNotification('New blank document created', 'success');
|
|
|
|
// Close all panels
|
|
closeAllPanels();
|
|
|
|
// Ensure editor is in edit mode
|
|
this.ensureEditMode();
|
|
}
|
|
|
|
debounceTOC() {
|
|
if (this.tocTimer) {
|
|
clearTimeout(this.tocTimer);
|
|
}
|
|
this.tocTimer = setTimeout(() => {
|
|
this.generateTOC();
|
|
}, 500); // Wait 500ms after last keystroke
|
|
}
|
|
|
|
saveSelection() {
|
|
const selection = window.getSelection();
|
|
if (selection.rangeCount > 0) {
|
|
return selection.getRangeAt(0).cloneRange();
|
|
}
|
|
return null;
|
|
}
|
|
|
|
restoreSelection(range) {
|
|
if (range) {
|
|
const selection = window.getSelection();
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
}
|
|
}
|
|
|
|
generateTOC() {
|
|
// Save cursor position
|
|
const savedRange = this.saveSelection();
|
|
|
|
const content = this.editor.innerText;
|
|
const lines = content.split('\n');
|
|
const toc = [];
|
|
let tocHtml = '';
|
|
|
|
// Remove existing anchors
|
|
const existingAnchors = this.editor.querySelectorAll('.heading-anchor');
|
|
existingAnchors.forEach(anchor => anchor.remove());
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i].trim();
|
|
if (line.startsWith('#')) {
|
|
const level = line.match(/^#+/)[0].length;
|
|
const title = line.replace(/^#+\s*/, '');
|
|
const id = 'heading-' + i;
|
|
|
|
toc.push({ level, title, id, lineIndex: i });
|
|
}
|
|
}
|
|
|
|
// Temporarily disabled to avoid disrupting typing
|
|
// this.addHeadingAnchors(lines, toc);
|
|
|
|
if (toc.length > 0) {
|
|
tocHtml = '<ul>';
|
|
let currentLevel = 0;
|
|
|
|
for (const item of toc) {
|
|
if (item.level > currentLevel) {
|
|
for (let i = currentLevel; i < item.level - 1; i++) {
|
|
tocHtml += '<ul>';
|
|
}
|
|
} else if (item.level < currentLevel) {
|
|
for (let i = item.level; i < currentLevel; i++) {
|
|
tocHtml += '</ul>';
|
|
}
|
|
}
|
|
|
|
tocHtml += `<li><a href="#${item.id}" onclick="app.scrollToHeading('${item.title}'); return false;">${item.title}</a></li>`;
|
|
currentLevel = item.level;
|
|
}
|
|
|
|
tocHtml += '</ul>';
|
|
} else {
|
|
tocHtml = '<div class="toc-placeholder"><p>Add headings (# ## ###) to your journal to generate the table of contents.</p></div>';
|
|
}
|
|
|
|
document.getElementById('toc-nav').innerHTML = tocHtml;
|
|
|
|
// Restore cursor position
|
|
this.restoreSelection(savedRange);
|
|
}
|
|
|
|
addHeadingAnchors(lines, toc) {
|
|
const editorLines = this.editor.innerHTML.split('<br>');
|
|
let newContent = '';
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i];
|
|
const tocItem = toc.find(item => item.lineIndex === i);
|
|
|
|
if (tocItem) {
|
|
newContent += `<span class="heading-anchor" id="${tocItem.id}" style="position: absolute; margin-top: -100px; visibility: hidden;"></span>`;
|
|
}
|
|
|
|
newContent += line;
|
|
if (i < lines.length - 1) newContent += '<br>';
|
|
}
|
|
|
|
this.editor.innerHTML = newContent;
|
|
}
|
|
|
|
scrollToHeading(title) {
|
|
try {
|
|
// Simpler and more robust method: search text directly in editor
|
|
const content = this.editor.innerText;
|
|
const lines = content.split('\n');
|
|
|
|
// Find the line index corresponding to the title
|
|
let targetLineIndex = -1;
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i].trim();
|
|
if (line.startsWith('#') && line.replace(/^#+\s*/, '') === title) {
|
|
targetLineIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (targetLineIndex === -1) {
|
|
this.showNotification('Section not found', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Calculate approximate line position
|
|
const editorStyles = window.getComputedStyle(this.editor);
|
|
const lineHeight = parseFloat(editorStyles.lineHeight) || 20;
|
|
const paddingTop = parseFloat(editorStyles.paddingTop) || 0;
|
|
|
|
// Calculate scroll position based on line number
|
|
const targetScrollPosition = (targetLineIndex * lineHeight) + paddingTop;
|
|
|
|
// Determine if editor or window should be scrolled
|
|
const editorRect = this.editor.getBoundingClientRect();
|
|
const editorHasScroll = this.editor.scrollHeight > this.editor.clientHeight;
|
|
|
|
if (editorHasScroll) {
|
|
// Scroll within editor
|
|
this.editor.scrollTo({
|
|
top: Math.max(0, targetScrollPosition - 60),
|
|
behavior: 'smooth'
|
|
});
|
|
} else {
|
|
// Scroll entire page
|
|
const editorTop = this.editor.offsetTop;
|
|
const windowScrollTarget = editorTop + targetScrollPosition - 100;
|
|
|
|
window.scrollTo({
|
|
top: Math.max(0, windowScrollTarget),
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
|
|
// Optional: temporarily highlight the title
|
|
this.highlightHeading(title);
|
|
|
|
this.showNotification(`Navigating to: ${title}`, 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Scroll error:', error);
|
|
this.showNotification('Error during navigation', 'error');
|
|
}
|
|
}
|
|
|
|
highlightHeading(title) {
|
|
// Function to temporarily highlight the found title
|
|
try {
|
|
const content = this.editor.innerText;
|
|
const lines = content.split('\n');
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i].trim();
|
|
if (line.startsWith('#') && line.replace(/^#+\s*/, '') === title) {
|
|
// Create a range to select the line
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
|
|
// Find the text node and position
|
|
const walker = document.createTreeWalker(
|
|
this.editor,
|
|
NodeFilter.SHOW_TEXT,
|
|
null,
|
|
false
|
|
);
|
|
|
|
let currentLine = 0;
|
|
let textNode = walker.nextNode();
|
|
|
|
while (textNode && currentLine < i) {
|
|
const nodeText = textNode.textContent;
|
|
const newLines = (nodeText.match(/\n/g) || []).length;
|
|
currentLine += newLines;
|
|
|
|
if (currentLine < i) {
|
|
textNode = walker.nextNode();
|
|
}
|
|
}
|
|
|
|
if (textNode) {
|
|
// Find the start of the line in this node
|
|
const nodeText = textNode.textContent;
|
|
const linesInNode = nodeText.split('\n');
|
|
const targetLineInNode = i - (currentLine - linesInNode.length + 1);
|
|
|
|
if (targetLineInNode >= 0 && targetLineInNode < linesInNode.length) {
|
|
let startPos = 0;
|
|
for (let j = 0; j < targetLineInNode; j++) {
|
|
startPos += linesInNode[j].length + 1;
|
|
}
|
|
|
|
const endPos = startPos + linesInNode[targetLineInNode].length;
|
|
|
|
range.setStart(textNode, startPos);
|
|
range.setEnd(textNode, endPos);
|
|
|
|
// Select temporarily
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
|
|
// Remove selection after a short delay
|
|
setTimeout(() => {
|
|
selection.removeAllRanges();
|
|
}, 1000);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// Ignore highlight errors, not critical
|
|
console.log('Highlight error:', error);
|
|
}
|
|
}
|
|
|
|
exportMarkdown() {
|
|
const content = this.editor.innerText;
|
|
if (!content.trim()) {
|
|
this.showNotification('No content to export', 'warning');
|
|
return;
|
|
}
|
|
|
|
const blob = new Blob([content], { type: 'text/markdown' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'design-journal.md';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
this.showNotification('Markdown file exported', 'success');
|
|
}
|
|
|
|
async exportWeb() {
|
|
const content = this.editor.innerText;
|
|
if (!content.trim()) {
|
|
this.showNotification('No content to export', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.showNotification('Generating web export...', 'success');
|
|
|
|
const response = await fetch('/api/export/web', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content, title: 'Design Journal' })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Export failed');
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'design-journal-web.zip';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
this.showNotification('Web export (ZIP) downloaded', 'success');
|
|
} catch (error) {
|
|
console.error('Export error:', error);
|
|
this.showNotification('Error exporting web: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
importMarkdown(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const importedContent = e.target.result;
|
|
this.editor.innerText = importedContent;
|
|
this.generateTOC();
|
|
this.currentJournalId = null; // New journal
|
|
|
|
// Reset history for imported file
|
|
this.undoStack = [importedContent];
|
|
this.redoStack = [];
|
|
|
|
// Ensure editor is in edit mode
|
|
this.ensureEditMode();
|
|
|
|
this.showNotification('Markdown file imported', 'success');
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
toggleTheme() {
|
|
document.body.classList.toggle('dark-theme');
|
|
const isDark = document.body.classList.contains('dark-theme');
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
this.showNotification(`${isDark ? 'Dark' : 'Light'} mode activated`, 'success');
|
|
}
|
|
|
|
updateStatistics() {
|
|
const content = this.editor.innerText.trim();
|
|
|
|
// Count words
|
|
const words = content.split(/\s+/).filter(word => word.length > 0);
|
|
const wordCount = words.length;
|
|
|
|
// Count characters
|
|
const charCount = content.length;
|
|
|
|
// Calculate reading time (200 words per minute)
|
|
const readingTime = Math.ceil(wordCount / 200);
|
|
|
|
// Update DOM elements
|
|
const wordCountEl = document.getElementById('word-count');
|
|
const charCountEl = document.getElementById('char-count');
|
|
const readingTimeEl = document.getElementById('reading-time');
|
|
|
|
if (wordCountEl) wordCountEl.textContent = wordCount;
|
|
if (charCountEl) charCountEl.textContent = charCount;
|
|
if (readingTimeEl) readingTimeEl.textContent = `${readingTime} min`;
|
|
}
|
|
|
|
async openPresentMode() {
|
|
const content = this.editor.innerText;
|
|
|
|
if (!content.trim()) {
|
|
this.showNotification('No content to present', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.showNotification('Opening presentation mode...', 'success');
|
|
|
|
// Create a form to POST the content
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = '/present';
|
|
form.target = '_blank';
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'content';
|
|
input.value = content;
|
|
|
|
form.appendChild(input);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
|
|
} catch (error) {
|
|
console.error('Present mode error:', error);
|
|
this.showNotification('Error opening presentation mode', 'error');
|
|
}
|
|
}
|
|
|
|
showShortcutsModal() {
|
|
const modalBody = document.getElementById('journal-modal-body');
|
|
const modalHeader = document.querySelector('#journal-modal .modal-header h3');
|
|
|
|
if (modalHeader) {
|
|
modalHeader.textContent = 'Keyboard Shortcuts';
|
|
}
|
|
|
|
modalBody.innerHTML = `
|
|
<div style="padding: 1rem;">
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 0.75rem;">Document Management</h4>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-weight: bold;">Ctrl+S</td>
|
|
<td style="padding: 0.5rem;">Save journal</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-weight: bold;">Ctrl+Z</td>
|
|
<td style="padding: 0.5rem;">Undo</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-weight: bold;">Ctrl+Y</td>
|
|
<td style="padding: 0.5rem;">Redo</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-weight: bold;">Tab</td>
|
|
<td style="padding: 0.5rem;">Indent text</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 0.5rem; font-weight: bold;">Esc</td>
|
|
<td style="padding: 0.5rem;">Close side panels</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-top: 1.5rem;">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 0.75rem;">Markdown Formatting</h4>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-family: monospace;"># Title</td>
|
|
<td style="padding: 0.5rem;">Heading level 1</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-family: monospace;">## Title</td>
|
|
<td style="padding: 0.5rem;">Heading level 2</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-family: monospace;">**bold**</td>
|
|
<td style="padding: 0.5rem;">Bold text</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-family: monospace;">*italic*</td>
|
|
<td style="padding: 0.5rem;">Italic text</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 0.5rem; font-family: monospace;">- item</td>
|
|
<td style="padding: 0.5rem;">Bullet list</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 0.5rem; font-family: monospace;">\`code\`</td>
|
|
<td style="padding: 0.5rem;">Inline code</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
<button class="btn primary" onclick="app.closeModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Show modal
|
|
const modal = document.getElementById('journal-modal');
|
|
modal.style.display = 'flex';
|
|
setTimeout(() => modal.classList.add('show'), 10);
|
|
}
|
|
|
|
async handleAI(action) {
|
|
const selection = window.getSelection().toString().trim();
|
|
const fullContent = this.editor.innerText;
|
|
|
|
// Check conditions based on action
|
|
if (action === 'rephrase' && !selection) {
|
|
this.showAIFeedback('Please select text to rephrase');
|
|
return;
|
|
}
|
|
|
|
// Determine content to use based on action
|
|
let contentToUse;
|
|
switch (action) {
|
|
case 'rephrase':
|
|
contentToUse = selection;
|
|
break;
|
|
case 'inconsistencies':
|
|
case 'duplications':
|
|
case 'advice':
|
|
case 'liberty':
|
|
contentToUse = selection || fullContent;
|
|
break;
|
|
default:
|
|
contentToUse = fullContent;
|
|
}
|
|
|
|
// Show loading message
|
|
this.showAIFeedback('<div class="feedback-message loading">Processing...</div>');
|
|
|
|
try {
|
|
let result;
|
|
|
|
switch (action) {
|
|
case 'rephrase':
|
|
result = await this.callAI('/api/ai/rephrase', { text: selection.trim(), context: fullContent.substring(0, 500) });
|
|
|
|
// Get rephrased text directly
|
|
const rephrasedText = result.rephrased || result.data || result;
|
|
|
|
// Store suggestion for validation
|
|
this.lastRephraseData = {
|
|
original: selection.trim(),
|
|
rephrased: rephrasedText,
|
|
selection: window.getSelection()
|
|
};
|
|
|
|
this.showAIFeedback(`
|
|
<strong>Rephrasing</strong><br><br>
|
|
|
|
<div style="background: var(--background-color); padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
|
|
<strong>Original text:</strong><br>
|
|
<em style="color: var(--text-light);">${selection.substring(0, 200)}${selection.length > 200 ? '...' : ''}</em>
|
|
</div>
|
|
|
|
<div style="background: var(--surface-color); border: 2px solid var(--success-color); padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
|
|
<strong>Improved version:</strong><br>
|
|
${rephrasedText}
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<button id="validate-rephrase" class="btn success" style="margin-right: 0.5rem;">
|
|
Apply rephrasing
|
|
</button>
|
|
<button id="cancel-rephrase" class="btn secondary">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
`);
|
|
|
|
// Add event listeners for buttons
|
|
document.getElementById('validate-rephrase')?.addEventListener('click', () => this.validateRephrase());
|
|
document.getElementById('cancel-rephrase')?.addEventListener('click', () => this.clearFeedback());
|
|
break;
|
|
|
|
case 'inconsistencies':
|
|
result = await this.callAI('/api/ai/check-inconsistencies', { content: contentToUse });
|
|
this.showAIFeedback(`<strong>Inconsistency Analysis</strong><br><br>${this.formatAIResponse(result.analysis)}`);
|
|
break;
|
|
|
|
case 'duplications':
|
|
result = await this.callAI('/api/ai/check-duplications', { content: contentToUse });
|
|
this.showAIFeedback(`<strong>Duplication Check</strong><br><br>${this.formatAIResponse(result.analysis)}`);
|
|
break;
|
|
|
|
case 'advice':
|
|
result = await this.callAI('/api/ai/give-advice', { content: contentToUse, domain: 'design' });
|
|
this.showAIFeedback(`<strong>Improvement Advice</strong><br><br>${this.formatAIResponse(result.advice)}`);
|
|
break;
|
|
|
|
case 'liberty':
|
|
// Save state before AI modifications
|
|
this.saveState(true);
|
|
|
|
const count = document.getElementById('liberty-repeat-count')?.value || 3;
|
|
const precision = document.getElementById('liberty-precision')?.value || 70;
|
|
|
|
// Initialize progress display
|
|
this.showAIFeedback(`
|
|
<div id="liberty-progress">
|
|
<strong>Enhanced Mode</strong><br>
|
|
<div style="margin: 0.5rem 0; font-size: 0.9rem; color: var(--text-light);">
|
|
${count} iterations - Precision: ${precision}% - Focus: design
|
|
</div>
|
|
<div class="progress-bar" style="width: 100%; height: 4px; background: var(--background-color); border-radius: 2px; margin: 1rem 0;">
|
|
<div id="liberty-progress-fill" style="height: 100%; background: var(--primary-color); border-radius: 2px; width: 0%; transition: width 0.3s ease;"></div>
|
|
</div>
|
|
<div id="liberty-iterations"></div>
|
|
</div>
|
|
`);
|
|
|
|
// Use EventSource for streaming
|
|
await this.handleLibertyModeStreaming(fullContent, count, precision);
|
|
break;
|
|
}
|
|
} catch (error) {
|
|
console.error('AI Error:', error);
|
|
this.showAIFeedback(`<strong>Error</strong><br><br>An error occurred: ${error.message}<br><br>Check your connection and API configuration.`);
|
|
}
|
|
}
|
|
|
|
async handleLibertyModeStreaming(content, iterations, precision) {
|
|
return new Promise((resolve, reject) => {
|
|
// Prepare data to send
|
|
const requestData = {
|
|
content: content,
|
|
iterations: iterations,
|
|
precision: precision,
|
|
focus: 'design'
|
|
};
|
|
|
|
// Create fetch request for streaming
|
|
fetch('/api/ai/liberty-mode', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(requestData)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Error: ${response.status}`);
|
|
}
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
|
|
const processStream = () => {
|
|
return reader.read().then(({ done, value }) => {
|
|
if (done) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
// Decode received data
|
|
buffer += decoder.decode(value, { stream: true });
|
|
|
|
// Process each received line
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || ''; // Keep incomplete last line
|
|
|
|
for (const line of lines) {
|
|
if (line.trim().startsWith('data: ')) {
|
|
try {
|
|
const data = JSON.parse(line.slice(6)); // Remove "data: "
|
|
this.handleLibertyStreamData(data);
|
|
} catch (e) {
|
|
console.error('JSON parsing error:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
return processStream();
|
|
});
|
|
};
|
|
|
|
return processStream();
|
|
})
|
|
.catch(error => {
|
|
console.error('Streaming error:', error);
|
|
this.showAIFeedback(`<strong>Error</strong><br><br>Streaming error: ${error.message}`);
|
|
reject(error);
|
|
});
|
|
});
|
|
}
|
|
|
|
handleLibertyStreamData(data) {
|
|
const progressFill = document.getElementById('liberty-progress-fill');
|
|
const iterationsDiv = document.getElementById('liberty-iterations');
|
|
|
|
if (data.error) {
|
|
// Display error
|
|
const errorHTML = `
|
|
<div style="background: var(--danger-color); color: white; padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
|
|
<strong>Error:</strong> ${data.error}
|
|
</div>
|
|
`;
|
|
iterationsDiv.innerHTML += errorHTML;
|
|
return;
|
|
}
|
|
|
|
if (data.iteration) {
|
|
// Update progress bar
|
|
const totalIterations = parseInt(document.getElementById('liberty-repeat-count')?.value || 3);
|
|
const progressPercent = (data.iteration / totalIterations) * 100;
|
|
|
|
if (progressFill) {
|
|
progressFill.style.width = `${progressPercent}%`;
|
|
}
|
|
|
|
// Display this iteration's explanation
|
|
const iterationHTML = `
|
|
<div style="background: var(--surface-color); border-left: 4px solid var(--primary-color); padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
|
|
<strong>Iteration ${data.iteration}</strong><br><br>
|
|
${this.formatAIResponse(data.explanation)}
|
|
</div>
|
|
`;
|
|
|
|
iterationsDiv.innerHTML += iterationHTML;
|
|
|
|
// Update editor with new markdown if available
|
|
if (data.markdown && data.markdown !== this.editor.innerText) {
|
|
this.editor.innerText = data.markdown;
|
|
this.generateTOC();
|
|
}
|
|
|
|
// Scroll to bottom of feedback to see new iteration
|
|
const feedback = document.getElementById('ai-assistant-feedback');
|
|
feedback.scrollTop = feedback.scrollHeight;
|
|
}
|
|
|
|
if (data.completed) {
|
|
// Finalize display
|
|
if (progressFill) {
|
|
progressFill.style.width = '100%';
|
|
}
|
|
|
|
if (data.finalMarkdown) {
|
|
// Ensure final content is in editor
|
|
this.editor.innerText = data.finalMarkdown;
|
|
this.generateTOC();
|
|
// Save final state
|
|
this.saveState(true);
|
|
}
|
|
|
|
// Completion message
|
|
const completedHTML = `
|
|
<div style="background: var(--success-color); color: white; padding: 1rem; border-radius: 8px; margin: 1rem 0; text-align: center;">
|
|
<strong>Enhanced Mode completed!</strong><br>
|
|
${data.totalIterations || 'All'} iteration(s) completed
|
|
</div>
|
|
`;
|
|
|
|
iterationsDiv.innerHTML += completedHTML;
|
|
|
|
this.showNotification('Enhanced Mode completed', 'success');
|
|
}
|
|
}
|
|
|
|
async callAI(endpoint, data) {
|
|
const response = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!result.success) {
|
|
throw new Error(result.error || 'Unknown error');
|
|
}
|
|
|
|
return result.data;
|
|
}
|
|
|
|
formatAIResponse(text) {
|
|
if (!text) return '';
|
|
|
|
// Parser la réponse pour séparer le raisonnement du contenu principal
|
|
const sections = text.split('##');
|
|
let formattedHTML = '';
|
|
|
|
const self = this;
|
|
sections.forEach((section, index) => {
|
|
if (index === 0 && section.trim()) {
|
|
// Première section sans titre
|
|
formattedHTML += `<div style="margin-bottom: 1rem;">${self.parseMarkdown(section.trim())}</div>`;
|
|
} else if (section.trim()) {
|
|
const lines = section.split('\n');
|
|
const title = lines[0].trim();
|
|
const content = lines.slice(1).join('\n').trim();
|
|
|
|
// Sections normales - avec markdown
|
|
formattedHTML += `
|
|
<div style="margin: 1rem 0;">
|
|
<strong style="color: var(--primary-color); font-size: 1.1em;">${title}</strong><br><br>
|
|
<div style="margin-top: 0.5rem;">${self.parseMarkdown(content)}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
return formattedHTML || text;
|
|
}
|
|
|
|
parseMarkdown(text) {
|
|
if (!text) return '';
|
|
|
|
return text
|
|
// Titres H1-H6 (#, ##, ###, etc.)
|
|
.replace(/^(#{1,6})\s+(.+)$/gm, (match, hashes, title) => {
|
|
const level = hashes.length;
|
|
return `<h${level} style="color: var(--primary-color); margin: 1rem 0 0.5rem 0; font-weight: bold;">${title}</h${level}>`;
|
|
})
|
|
// Listes à puces (- ou *)
|
|
.replace(/^[\s]*[-\*]\s+(.+)$/gm, '<li style="margin: 0.25rem 0;">$1</li>')
|
|
// Listes numérotées
|
|
.replace(/^[\s]*\d+\.\s+(.+)$/gm, '<li style="margin: 0.25rem 0;">$1</li>')
|
|
// Code blocks avec ```
|
|
.replace(/```([\s\S]*?)```/g, '<pre style="background: var(--background-color); padding: 1rem; border-radius: 6px; border-left: 4px solid var(--primary-color); margin: 1rem 0; overflow-x: auto;"><code>$1</code></pre>')
|
|
// Citations avec >
|
|
.replace(/^>\s+(.+)$/gm, '<blockquote style="border-left: 4px solid var(--primary-color); padding-left: 1rem; margin: 1rem 0; font-style: italic; color: var(--text-light);">$1</blockquote>')
|
|
// Gras **texte**
|
|
.replace(/\*\*(.*?)\*\*/g, '<strong style="color: var(--primary-color);">$1</strong>')
|
|
// Italique *texte*
|
|
.replace(/\*(.*?)\*/g, '<em style="color: var(--text-light);">$1</em>')
|
|
// Code inline `code`
|
|
.replace(/`([^`]+)`/g, '<code style="background: var(--surface-color); padding: 0.2rem 0.4rem; border-radius: 3px; font-family: monospace; font-size: 0.9em;">$1</code>')
|
|
// Liens [texte](url)
|
|
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color: var(--primary-color); text-decoration: underline;">$1</a>')
|
|
// Séparer les listes en blocs <ul> ou <ol>
|
|
.replace(/(<li[^>]*>.*<\/li>)/gs, (match) => {
|
|
if (match.includes('<li')) {
|
|
return `<ul style="margin: 0.5rem 0; padding-left: 1.5rem;">${match}</ul>`;
|
|
}
|
|
return match;
|
|
})
|
|
// Sauts de ligne doubles pour paragraphes
|
|
.replace(/\n\n+/g, '\n\n')
|
|
.replace(/\n\n/g, '</p><p style="margin: 0.75rem 0; line-height: 1.6;">')
|
|
// Sauts de ligne simples
|
|
.replace(/\n/g, '<br>')
|
|
// Encapsuler dans un paragraphe si pas déjà fait
|
|
.replace(/^(?!<[h1-6|ul|ol|pre|blockquote])/i, '<p style="margin: 0.75rem 0; line-height: 1.6;">')
|
|
.replace(/$/i, '</p>');
|
|
}
|
|
|
|
showAIFeedback(message) {
|
|
const feedback = document.getElementById('ai-assistant-feedback');
|
|
feedback.innerHTML = `<div class="feedback-message">${message}</div>`;
|
|
// Scroll to top of feedback to see result
|
|
feedback.scrollTop = 0;
|
|
}
|
|
|
|
validateRephrase() {
|
|
if (!this.lastRephraseData) return;
|
|
|
|
try {
|
|
// Save state before rephrasing to allow undo
|
|
this.saveState(true);
|
|
|
|
// Replace text in editor
|
|
const range = this.lastRephraseData.selection.getRangeAt(0);
|
|
range.deleteContents();
|
|
range.insertNode(document.createTextNode(this.lastRephraseData.rephrased));
|
|
|
|
// Clear selection and regenerate TOC
|
|
window.getSelection().removeAllRanges();
|
|
this.generateTOC();
|
|
|
|
// Save state after rephrasing
|
|
this.saveState(true);
|
|
|
|
// Show success message
|
|
this.showNotification('Rephrasing applied successfully', 'success');
|
|
this.clearFeedback();
|
|
|
|
// Clean up data
|
|
this.lastRephraseData = null;
|
|
} catch (error) {
|
|
console.error('Error applying rephrasing:', error);
|
|
this.showNotification('Error applying rephrasing', 'error');
|
|
}
|
|
}
|
|
|
|
clearFeedback() {
|
|
const feedback = document.getElementById('ai-assistant-feedback');
|
|
feedback.innerHTML = `
|
|
<div class="feedback-message" style="text-align: center; color: var(--text-light);">
|
|
<strong>AI Assistant ready</strong><br>
|
|
Select text in the editor and click an action to begin.
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
ensureEditMode() {
|
|
// If in preview mode, force return to edit mode
|
|
if (this.isPreviewMode) {
|
|
const previewBtn = document.getElementById('preview-toggle');
|
|
|
|
// Return to edit mode without using originalContent because we want new content
|
|
this.editor.contentEditable = true;
|
|
this.editor.style.background = '';
|
|
this.editor.style.border = '';
|
|
this.editor.style.borderRadius = '';
|
|
|
|
// Change button
|
|
if (previewBtn) {
|
|
previewBtn.innerHTML = 'Preview';
|
|
previewBtn.classList.remove('secondary');
|
|
previewBtn.classList.add('primary');
|
|
}
|
|
|
|
this.isPreviewMode = false;
|
|
}
|
|
|
|
// Ensure editor is always editable
|
|
this.editor.contentEditable = true;
|
|
}
|
|
|
|
showNotification(message, type = 'success') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification ${type}`;
|
|
notification.textContent = message;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => notification.classList.add('show'), 100);
|
|
setTimeout(() => {
|
|
notification.classList.remove('show');
|
|
setTimeout(() => document.body.removeChild(notification), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
async togglePreview() {
|
|
const previewBtn = document.getElementById('preview-toggle');
|
|
const mainElement = document.querySelector('main');
|
|
|
|
if (!this.isPreviewMode) {
|
|
// Switch to preview mode
|
|
this.originalContent = this.editor.innerHTML;
|
|
const markdownContent = this.editor.innerText;
|
|
|
|
// Add preview-mode class to main to adjust grid layout
|
|
if (mainElement) {
|
|
mainElement.classList.add('preview-mode');
|
|
}
|
|
|
|
// Configure Marked for GitHub-compatible rendering
|
|
if (typeof marked !== 'undefined') {
|
|
marked.setOptions({
|
|
breaks: true,
|
|
gfm: true,
|
|
headerIds: true,
|
|
sanitize: false,
|
|
smartypants: false
|
|
});
|
|
}
|
|
|
|
// Convert Markdown to HTML with Marked (GitHub-compatible)
|
|
let previewHTML = '';
|
|
if (typeof marked !== 'undefined') {
|
|
previewHTML = marked.parse(markdownContent);
|
|
} else {
|
|
// Fallback to our custom parser if Marked is not loaded
|
|
previewHTML = this.parseMarkdown(markdownContent);
|
|
}
|
|
|
|
// Disable editing and apply GitHub preview style
|
|
this.editor.contentEditable = false;
|
|
this.editor.innerHTML = `<div class="markdown-preview">${previewHTML}</div>`;
|
|
this.editor.style.background = '';
|
|
this.editor.style.border = '';
|
|
this.editor.style.borderRadius = '';
|
|
|
|
// Process Mermaid diagrams after rendering
|
|
if (typeof mermaid !== 'undefined') {
|
|
try {
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: document.body.classList.contains('dark-theme') ? 'dark' : 'default',
|
|
securityLevel: 'loose',
|
|
fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
|
|
});
|
|
|
|
// Wait for DOM to be ready to process Mermaid diagrams
|
|
setTimeout(() => {
|
|
const preview = this.editor.querySelector('.markdown-preview');
|
|
if (preview) {
|
|
// Find all code blocks with 'mermaid' language
|
|
const mermaidBlocks = preview.querySelectorAll('code.language-mermaid, pre code.language-mermaid');
|
|
|
|
mermaidBlocks.forEach((block, index) => {
|
|
try {
|
|
const mermaidCode = block.textContent;
|
|
const uniqueId = `mermaid-${Date.now()}-${index}`;
|
|
|
|
// Create div with unique ID for Mermaid
|
|
const mermaidDiv = document.createElement('div');
|
|
mermaidDiv.id = uniqueId;
|
|
mermaidDiv.className = 'mermaid';
|
|
mermaidDiv.textContent = mermaidCode;
|
|
|
|
// Replace code block with Mermaid div
|
|
const pre = block.closest('pre') || block;
|
|
pre.parentNode.replaceChild(mermaidDiv, pre);
|
|
|
|
// Render diagram
|
|
mermaid.render(uniqueId + '-svg', mermaidCode).then(({ svg }) => {
|
|
mermaidDiv.innerHTML = svg;
|
|
}).catch(err => {
|
|
console.warn('Mermaid rendering error:', err);
|
|
mermaidDiv.innerHTML = `<pre style="color: var(--accent-color); padding: 1rem; background: var(--background-color); border-radius: 6px;">Mermaid rendering error: ${err.message}</pre>`;
|
|
});
|
|
} catch (error) {
|
|
console.warn('Mermaid processing error:', error);
|
|
}
|
|
});
|
|
}
|
|
}, 200);
|
|
} catch (error) {
|
|
console.warn('Mermaid initialization error:', error);
|
|
}
|
|
}
|
|
|
|
// Change button
|
|
previewBtn.innerHTML = 'Edit';
|
|
previewBtn.classList.remove('primary');
|
|
previewBtn.classList.add('secondary');
|
|
|
|
this.isPreviewMode = true;
|
|
this.showNotification('Preview mode activated', 'success');
|
|
|
|
} else {
|
|
// Return to edit mode
|
|
this.editor.contentEditable = true;
|
|
this.editor.innerHTML = this.originalContent;
|
|
this.editor.style.background = '';
|
|
this.editor.style.border = '';
|
|
this.editor.style.borderRadius = '';
|
|
|
|
// Remove preview-mode class to restore normal grid layout
|
|
if (mainElement) {
|
|
mainElement.classList.remove('preview-mode');
|
|
}
|
|
|
|
// Change button
|
|
previewBtn.innerHTML = 'Preview';
|
|
previewBtn.classList.remove('secondary');
|
|
previewBtn.classList.add('primary');
|
|
|
|
this.isPreviewMode = false;
|
|
this.showNotification('Edit mode activated', 'success');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Side panel management
|
|
function togglePanel(side) {
|
|
const panel = document.getElementById(`${side}-panel`);
|
|
const overlay = document.getElementById('panel-overlay');
|
|
const otherPanel = document.getElementById(side === 'left' ? 'right-panel' : 'left-panel');
|
|
|
|
// Close the other panel if it's open
|
|
if (otherPanel && otherPanel.classList.contains('open')) {
|
|
otherPanel.classList.remove('open');
|
|
}
|
|
|
|
// Toggle current panel
|
|
if (panel.classList.contains('open')) {
|
|
panel.classList.remove('open');
|
|
overlay.classList.remove('active');
|
|
} else {
|
|
panel.classList.add('open');
|
|
overlay.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function closeAllPanels() {
|
|
const leftPanel = document.getElementById('left-panel');
|
|
const rightPanel = document.getElementById('right-panel');
|
|
const overlay = document.getElementById('panel-overlay');
|
|
|
|
if (leftPanel) leftPanel.classList.remove('open');
|
|
if (rightPanel) rightPanel.classList.remove('open');
|
|
if (overlay) overlay.classList.remove('active');
|
|
}
|
|
|
|
// Close panels with Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeAllPanels();
|
|
}
|
|
});
|
|
|
|
// Application initialization
|
|
let app;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
app = new ConceptionAssistant();
|
|
|
|
// Load saved theme
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark') {
|
|
document.body.classList.add('dark-theme');
|
|
}
|
|
|
|
// Initialize panels
|
|
initializePanels();
|
|
});
|
|
|
|
function initializePanels() {
|
|
// Initialize template management
|
|
initializeTemplateForm();
|
|
}
|
|
|
|
function initializeTemplateForm() {
|
|
const loadTemplateBtn = document.getElementById('load-template');
|
|
|
|
// Handle template loading
|
|
if (loadTemplateBtn) {
|
|
loadTemplateBtn.addEventListener('click', async () => {
|
|
try {
|
|
loadTemplateBtn.classList.add('loading');
|
|
|
|
const response = await fetch('/api/templates/default');
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Load template into editor
|
|
app.editor.innerText = result.data.content;
|
|
app.generateTOC();
|
|
app.currentJournalId = null; // New journal
|
|
|
|
// Reset history for new template
|
|
app.undoStack = [result.data.content];
|
|
app.redoStack = [];
|
|
|
|
// Ensure editor is in edit mode
|
|
app.ensureEditMode();
|
|
|
|
app.showNotification('Template loaded successfully', 'success');
|
|
closeAllPanels();
|
|
} else {
|
|
app.showNotification('Error loading template', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
app.showNotification('Error loading template', 'error');
|
|
} finally {
|
|
loadTemplateBtn.classList.remove('loading');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Ensure togglePanel is globally accessible
|
|
window.togglePanel = togglePanel; |