${contentHtml}
`;
viewActions.classList.remove('hidden');
switchMode('view');
renderArticleList(searchInput.value);
}
function showWelcomeMessage() {
currentArticleId = null;
articleViewContent.innerHTML = `
Welcome to your Knowledge Base
Select an article from the left to read, or create a new one.
`;
viewActions.classList.add('hidden');
lucide.createIcons();
renderArticleList();
}
// --- MODE SWITCHING ---
function switchMode(mode) {
currentMode = mode;
if (mode === 'edit') {
viewPanel.classList.add('hidden');
editorPanel.classList.remove('hidden');
} else { // view
editorPanel.classList.add('hidden');
viewPanel.classList.remove('hidden');
}
}
// --- EVENT LISTENERS ---
searchInput.addEventListener('input', () => renderArticleList(searchInput.value));
addNewBtn.addEventListener('click', () => {
editorTitle.textContent = 'Create New Article';
articleIdInput.value = '';
articleTitleInput.value = '';
articleCategoryInput.value = '';
articleContentInput.value = '';
switchMode('edit');
});
cancelBtn.addEventListener('click', () => {
if (currentArticleId) {
displayArticle(currentArticleId);
} else {
showWelcomeMessage();
}
switchMode('view');
});
saveBtn.addEventListener('click', () => {
const id = articleIdInput.value ? parseInt(articleIdInput.value) : null;
const title = articleTitleInput.value.trim();
const category = articleCategoryInput.value.trim();
const content = articleContentInput.value.trim();
if (!title || !content) {
// IV. C. No alert(), use a more subtle error indication
articleTitleInput.classList.toggle('border-red-500', !title);
articleContentInput.classList.toggle('border-red-500', !content);
return;
}
// Remove error states
articleTitleInput.classList.remove('border-red-500');
articleContentInput.classList.remove('border-red-500');
if (id) { // Update existing
const index = knowledgeBase.findIndex(a => a.id === id);
knowledgeBase[index] = { id, title, category, content };
} else { // Create new
const newId = knowledgeBase.length > 0 ? Math.max(...knowledgeBase.map(a => a.id)) + 1 : 1;
knowledgeBase.push({ id: newId, title, category, content });
currentArticleId = newId;
}
displayArticle(currentArticleId);
});
editBtn.addEventListener('click', () => {
const article = knowledgeBase.find(a => a.id === currentArticleId);
if (!article) return;
editorTitle.textContent = 'Edit Article';
articleIdInput.value = article.id;
articleTitleInput.value = article.title;
articleCategoryInput.value = article.category;
articleContentInput.value = article.content;
switchMode('edit');
});
deleteBtn.addEventListener('click', () => {
// No window.confirm(), directly delete
if (currentArticleId) {
knowledgeBase = knowledgeBase.filter(a => a.id !== currentArticleId);
showWelcomeMessage();
}
});
// --- PDF DOWNLOAD LOGIC ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const content = document.getElementById('article-view-content');
const article = knowledgeBase.find(a => a.id === currentArticleId);
html2canvas(content, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'pt',
format: 'a4'
});
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const ratio = canvasWidth / canvasHeight;
const widthInPdf = pdfWidth - 80; // Margin
const heightInPdf = widthInPdf / ratio;
pdf.addImage(imgData, 'PNG', 40, 40, widthInPdf, heightInPdf);
pdf.save(`${article.title.replace(/\s/g, '-')}.pdf`);
});
});
// --- INITIALIZATION ---
showWelcomeMessage();
lucide.createIcons();
});
