151 lines
4.5 KiB
JavaScript
151 lines
4.5 KiB
JavaScript
export class TopicManager {
|
|
constructor() {
|
|
this.quill = null;
|
|
this.initializeEventListeners();
|
|
}
|
|
|
|
initializeEditor() {
|
|
if (this.quill) return; // Prevent multiple initializations
|
|
|
|
console.log('Initializing Quill editor...'); // Debug log
|
|
|
|
const editorContainer = document.getElementById('quillEditor');
|
|
if (!editorContainer) {
|
|
console.error('Editor container not found');
|
|
return;
|
|
}
|
|
|
|
// Initialize Quill
|
|
this.quill = new Quill('#quillEditor', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['blockquote', 'code-block'],
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
|
['link', 'image', 'formula']
|
|
]
|
|
},
|
|
placeholder: 'Fügen Sie hier Ihren Inhalt ein...'
|
|
});
|
|
|
|
// Set up change handler
|
|
this.quill.on('text-change', () => this.updatePreview());
|
|
|
|
console.log('Quill editor initialized'); // Debug log
|
|
}
|
|
|
|
// ... rest of the methods from your code ...
|
|
|
|
undo() {
|
|
if (this.quill) {
|
|
this.quill.history.undo();
|
|
}
|
|
}
|
|
|
|
redo() {
|
|
if (this.quill) {
|
|
this.quill.history.redo();
|
|
}
|
|
}
|
|
|
|
deleteSelected() {
|
|
if (this.quill) {
|
|
const range = this.quill.getSelection();
|
|
if (range) {
|
|
if (range.length > 0) {
|
|
// Delete selected text/content
|
|
this.quill.deleteText(range.index, range.length);
|
|
} else {
|
|
// Delete current line if no selection
|
|
const [line] = this.quill.getLine(range.index);
|
|
const lineLength = line.length();
|
|
this.quill.deleteText(range.index - lineLength, lineLength);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async loadSubjectsIntoSelect() {
|
|
const select = document.getElementById('topicSubjectSelect');
|
|
if (!select) return;
|
|
|
|
// Clear existing options except the first placeholder
|
|
while (select.options.length > 1) {
|
|
select.remove(1);
|
|
}
|
|
|
|
try {
|
|
const subjects = await this.subjectStorage.getAllSubjects();
|
|
subjects.forEach(subject => {
|
|
const option = document.createElement('option');
|
|
option.value = subject.id;
|
|
option.textContent = subject.name;
|
|
select.appendChild(option);
|
|
});
|
|
} catch (error) {
|
|
console.error('Error loading subjects:', error);
|
|
}
|
|
}
|
|
|
|
initializeEventListeners() {
|
|
const form = document.getElementById('topicForm');
|
|
if (form) {
|
|
form.addEventListener('submit', (e) => this.handleTopicSubmit(e));
|
|
}
|
|
document.addEventListener('openTopicModal', () => {
|
|
this.loadSubjectsIntoSelect();
|
|
if (!this.quill) {
|
|
this.initializeEditor();
|
|
}
|
|
});
|
|
}
|
|
|
|
updatePreview() {
|
|
const content = this.quill.root.innerHTML;
|
|
const preview = document.getElementById('contentPreview');
|
|
const quillContent = document.getElementById('quillContent');
|
|
|
|
if (preview) {
|
|
// Preserve classes for styling while updating content
|
|
preview.innerHTML = content;
|
|
// Update hidden input with content
|
|
if (quillContent) {
|
|
quillContent.value = content;
|
|
}
|
|
// Re-render math if present
|
|
if (window.MathJax) {
|
|
MathJax.typeset([preview]);
|
|
}
|
|
// Highlight code blocks if any
|
|
if (window.Prism) {
|
|
Prism.highlightAllUnder(preview);
|
|
}
|
|
}
|
|
}
|
|
|
|
handleTopicSubmit(e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target);
|
|
const content = this.quill.root.innerHTML;
|
|
const subjectId = formData.get('subject');
|
|
|
|
if (!subjectId) {
|
|
throw new Error('Bitte wählen Sie ein Fach aus');
|
|
}
|
|
|
|
// Add your topic saving logic here
|
|
|
|
closeModal('topicModal');
|
|
}
|
|
|
|
clearEditor() {
|
|
if (this.quill) {
|
|
this.quill.setContents([]);
|
|
this.updatePreview();
|
|
}
|
|
}
|
|
|
|
}
|