markdown-notes-engine 1.0.0

package/lib/frontend/index.js

@@ -0,0 +1,665 @@
+/**
+ * Markdown Notes Engine - Frontend Module
+ *
+ * A markdown note-taking editor with GitHub integration
+ */
+
+class NotesEditor {
+  constructor(config) {
+    this.config = {
+      apiEndpoint: config.apiEndpoint || '/api',
+      container: config.container,
+      theme: config.theme || 'light',
+      autoSave: config.autoSave !== false,
+      autoSaveDelay: config.autoSaveDelay || 2000,
+      onSave: config.onSave || null,
+      onLoad: config.onLoad || null,
+      onError: config.onError || null
+    };
+
+    // Check localStorage for saved dark mode preference
+    const savedDarkMode = localStorage.getItem('notesDarkMode');
+    const isDarkMode = savedDarkMode === 'enabled' || (savedDarkMode === null && config.theme === 'dark');
+
+    this.state = {
+      currentNote: null,
+      previewMode: 'editor', // 'editor', 'split', 'preview'
+      structure: [],
+      isDarkMode: isDarkMode
+    };
+
+    this.timers = {
+      autoSave: null,
+      previewUpdate: null
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the editor
+   */
+  init() {
+    const container = document.querySelector(this.config.container);
+    if (!container) {
+      throw new Error(`Container "${this.config.container}" not found`);
+    }
+
+    // Inject HTML structure
+    container.innerHTML = this.getTemplate();
+
+    // Cache DOM elements
+    this.elements = {
+      sidebar: container.querySelector('.notes-sidebar'),
+      editor: container.querySelector('.notes-editor'),
+      preview: container.querySelector('.notes-preview'),
+      fileTree: container.querySelector('.notes-file-tree'),
+      notePath: container.querySelector('.notes-path-input'),
+      editorTextarea: container.querySelector('.notes-editor-textarea'),
+      previewContent: container.querySelector('.notes-preview-content'),
+      searchInput: container.querySelector('.notes-search-input')
+    };
+
+    // Apply theme
+    if (this.state.isDarkMode) {
+      container.classList.add('notes-dark-mode');
+    }
+
+    // Update theme button icon
+    const themeBtn = container.querySelector('[data-action="theme"]');
+    if (themeBtn) {
+      themeBtn.textContent = this.state.isDarkMode ? '☀️' : '🌙';
+    }
+
+    // Setup event listeners
+    this.setupEventListeners();
+
+    // Load structure
+    this.loadStructure();
+
+    // Load marked.js and highlight.js from CDN
+    this.loadDependencies();
+  }
+
+  /**
+   * Get HTML template
+   */
+  getTemplate() {
+    return `
+      <div class="notes-container">
+        <div class="notes-sidebar">
+          <div class="notes-toolbar">
+            <button class="notes-btn" data-action="new">+ New</button>
+            <button class="notes-btn" data-action="folder">+ Folder</button>
+            <button class="notes-btn" data-action="theme">🌙</button>
+          </div>
+          <input type="text" class="notes-search-input" placeholder="Search notes...">
+          <div class="notes-file-tree"></div>
+        </div>
+        <div class="notes-main">
+          <div class="notes-header">
+            <input type="text" class="notes-path-input" placeholder="Note path (e.g., my-note)">
+            <div class="notes-actions">
+              <button class="notes-btn" data-action="save" title="Save (Ctrl+S)">💾 Save</button>
+              <button class="notes-btn" data-action="preview" title="Toggle Preview (Ctrl+P)">👁️ Preview</button>
+              <button class="notes-btn" data-action="upload-image" title="Upload Image (Ctrl+U)">🖼️</button>
+              <button class="notes-btn" data-action="upload-video" title="Upload Video (Ctrl+Shift+U)">🎥</button>
+              <button class="notes-btn notes-btn-danger" data-action="delete">🗑️</button>
+            </div>
+          </div>
+          <div class="notes-content">
+            <div class="notes-editor">
+              <textarea class="notes-editor-textarea" placeholder="Start writing..."></textarea>
+            </div>
+            <div class="notes-preview" style="display: none;">
+              <div class="notes-preview-content"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Setup event listeners
+   */
+  setupEventListeners() {
+    const container = document.querySelector(this.config.container);
+
+    // Button actions
+    container.addEventListener('click', (e) => {
+      const btn = e.target.closest('[data-action]');
+      if (!btn) return;
+
+      const action = btn.dataset.action;
+      const actions = {
+        'new': () => this.createNewNote(),
+        'save': () => this.saveNote(),
+        'delete': () => this.deleteNote(),
+        'preview': () => this.togglePreview(),
+        'folder': () => this.createFolder(),
+        'upload-image': () => this.uploadImage(),
+        'upload-video': () => this.uploadVideo(),
+        'theme': () => this.toggleTheme()
+      };
+
+      if (actions[action]) {
+        actions[action]();
+      }
+    });
+
+    // Auto-save
+    if (this.config.autoSave) {
+      this.elements.editorTextarea.addEventListener('input', () => {
+        clearTimeout(this.timers.autoSave);
+        this.timers.autoSave = setTimeout(() => {
+          if (this.state.currentNote) {
+            this.saveNote(true);
+          }
+        }, this.config.autoSaveDelay);
+
+        // Update preview
+        if (this.state.previewMode !== 'editor') {
+          clearTimeout(this.timers.previewUpdate);
+          this.timers.previewUpdate = setTimeout(() => {
+            this.renderPreview();
+          }, 100);
+        }
+      });
+    }
+
+    // Keyboard shortcuts
+    this.elements.editorTextarea.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        this.saveNote();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
+        e.preventDefault();
+        this.togglePreview();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+        e.preventDefault();
+        this.createNewNote();
+      }
+    });
+
+    // Drag and drop
+    this.elements.editorTextarea.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      const files = Array.from(e.dataTransfer.files);
+      for (const file of files) {
+        if (file.type.startsWith('image/')) {
+          await this.uploadImageFile(file);
+        } else if (file.type.startsWith('video/')) {
+          await this.uploadVideoFile(file);
+        }
+      }
+    });
+
+    this.elements.editorTextarea.addEventListener('dragover', (e) => {
+      e.preventDefault();
+    });
+
+    // Paste images
+    this.elements.editorTextarea.addEventListener('paste', async (e) => {
+      const items = Array.from(e.clipboardData.items);
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          const file = item.getAsFile();
+          if (file) await this.uploadImageFile(file);
+        }
+      }
+    });
+  }
+
+  /**
+   * Load external dependencies
+   */
+  loadDependencies() {
+    if (!window.marked) {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
+      document.head.appendChild(script);
+    }
+    if (!window.hljs) {
+      const script = document.createElement('script');
+      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js';
+      document.head.appendChild(script);
+
+      // Load both light and dark themes
+      const lightTheme = document.createElement('link');
+      lightTheme.rel = 'stylesheet';
+      lightTheme.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
+      lightTheme.id = 'hljs-light-theme';
+      lightTheme.disabled = this.state.isDarkMode; // Disable if dark mode is active
+      document.head.appendChild(lightTheme);
+
+      const darkTheme = document.createElement('link');
+      darkTheme.rel = 'stylesheet';
+      darkTheme.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css';
+      darkTheme.id = 'hljs-dark-theme';
+      darkTheme.disabled = !this.state.isDarkMode; // Disable if light mode is active
+      document.head.appendChild(darkTheme);
+    }
+  }
+
+  /**
+   * API Methods
+   */
+
+  async loadStructure() {
+    try {
+      const response = await fetch(`${this.config.apiEndpoint}/structure`);
+      const data = await response.json();
+      this.state.structure = data.structure || [];
+      this.renderFileTree();
+    } catch (error) {
+      this.state.structure = [];
+      this.handleError('Failed to load file structure', error);
+    }
+  }
+
+  async loadNote(path) {
+    try {
+      const response = await fetch(`${this.config.apiEndpoint}/note?path=${encodeURIComponent(path)}`);
+      const data = await response.json();
+
+      this.state.currentNote = path;
+      this.elements.notePath.value = path;
+      this.elements.editorTextarea.value = data.content;
+
+      if (this.state.previewMode !== 'editor') {
+        this.renderPreview();
+      }
+
+      if (this.config.onLoad) {
+        this.config.onLoad(path, data.content);
+      }
+    } catch (error) {
+      this.handleError('Failed to load note', error);
+    }
+  }
+
+  async saveNote(silent = false) {
+    const path = this.elements.notePath.value.trim();
+    const content = this.elements.editorTextarea.value;
+
+    if (!path) {
+      if (!silent) alert('Please enter a note path');
+      return;
+    }
+
+    try {
+      const response = await fetch(`${this.config.apiEndpoint}/note`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path, content })
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        this.state.currentNote = data.path;
+        this.elements.notePath.value = data.path;
+        if (!silent) this.showNotification('Note saved!', 'success');
+        this.loadStructure();
+
+        if (this.config.onSave) {
+          this.config.onSave(data.path, content);
+        }
+      }
+    } catch (error) {
+      this.handleError('Failed to save note', error);
+    }
+  }
+
+  async deleteNote() {
+    if (!this.state.currentNote) {
+      alert('No note to delete');
+      return;
+    }
+
+    if (!confirm(`Delete "${this.state.currentNote}"?`)) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${this.config.apiEndpoint}/note`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: this.state.currentNote })
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        this.createNewNote();
+        this.loadStructure();
+        this.showNotification('Note deleted!', 'success');
+      }
+    } catch (error) {
+      this.handleError('Failed to delete note', error);
+    }
+  }
+
+  async uploadImageFile(file) {
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const response = await fetch(`${this.config.apiEndpoint}/upload-image`, {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+
+      if (data.imageUrl) {
+        const markdown = `![${file.name}](${data.imageUrl})\n`;
+        this.insertAtCursor(markdown);
+        this.showNotification('Image uploaded!', 'success');
+      }
+    } catch (error) {
+      this.handleError('Failed to upload image', error);
+    }
+  }
+
+  async uploadVideoFile(file) {
+    try {
+      const formData = new FormData();
+      formData.append('video', file);
+
+      const response = await fetch(`${this.config.apiEndpoint}/upload-video`, {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+
+      if (data.videoUrl) {
+        const markdown = `![${file.name}](${data.videoUrl})\n`;
+        this.insertAtCursor(markdown);
+        this.showNotification('Video uploaded!', 'success');
+      }
+    } catch (error) {
+      this.handleError('Failed to upload video', error);
+    }
+  }
+
+  /**
+   * UI Methods
+   */
+
+  createNewNote() {
+    this.state.currentNote = null;
+    this.elements.notePath.value = '';
+    this.elements.editorTextarea.value = '';
+    this.elements.previewContent.innerHTML = '';
+    this.elements.editorTextarea.focus();
+  }
+
+  createFolder() {
+    const path = prompt('Enter folder path:');
+    if (!path) return;
+
+    fetch(`${this.config.apiEndpoint}/folder`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path })
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.success) {
+          this.loadStructure();
+          this.showNotification('Folder created!', 'success');
+        }
+      })
+      .catch(error => this.handleError('Failed to create folder', error));
+  }
+
+  uploadImage() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (file) this.uploadImageFile(file);
+    };
+    input.click();
+  }
+
+  uploadVideo() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'video/*';
+    input.onchange = (e) => {
+      const file = e.target.files[0];
+      if (file) this.uploadVideoFile(file);
+    };
+    input.click();
+  }
+
+  togglePreview() {
+    const modes = ['editor', 'split', 'preview'];
+    const currentIndex = modes.indexOf(this.state.previewMode);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    this.state.previewMode = modes[nextIndex];
+
+    // Use 'flex' instead of 'block' to maintain flex container layout
+    this.elements.editor.style.display =
+      this.state.previewMode === 'preview' ? 'none' : 'flex';
+    this.elements.preview.style.display =
+      this.state.previewMode === 'editor' ? 'none' : 'flex';
+
+    if (this.state.previewMode === 'split') {
+      this.elements.editor.style.width = '50%';
+      this.elements.preview.style.width = '50%';
+    } else {
+      this.elements.editor.style.width = '100%';
+      this.elements.preview.style.width = '100%';
+    }
+
+    if (this.state.previewMode !== 'editor') {
+      this.renderPreview();
+    }
+  }
+
+  toggleTheme() {
+    this.state.isDarkMode = !this.state.isDarkMode;
+    const container = document.querySelector(this.config.container);
+    container.classList.toggle('notes-dark-mode');
+
+    // Save preference to localStorage
+    localStorage.setItem('notesDarkMode', this.state.isDarkMode ? 'enabled' : 'disabled');
+
+    // Update theme button icon
+    const themeBtn = container.querySelector('[data-action="theme"]');
+    if (themeBtn) {
+      themeBtn.textContent = this.state.isDarkMode ? '☀️' : '🌙';
+    }
+
+    // Switch highlight.js theme
+    const lightTheme = document.getElementById('hljs-light-theme');
+    const darkTheme = document.getElementById('hljs-dark-theme');
+    if (lightTheme && darkTheme) {
+      lightTheme.disabled = this.state.isDarkMode;
+      darkTheme.disabled = !this.state.isDarkMode;
+    }
+  }
+
+  renderFileTree() {
+    this.elements.fileTree.innerHTML = '';
+
+    if (!this.state.structure || !Array.isArray(this.state.structure)) {
+      this.elements.fileTree.innerHTML = '<div style="padding: 10px; color: #999;">No notes yet</div>';
+      return;
+    }
+
+    if (this.state.structure.length === 0) {
+      this.elements.fileTree.innerHTML = '<div style="padding: 10px; color: #999;">No notes yet. Create one to get started!</div>';
+      return;
+    }
+
+    // Recursive function to render tree items
+    const renderTreeItems = (items, container, level = 0) => {
+      items.forEach(item => {
+        const itemDiv = document.createElement('div');
+        itemDiv.style.paddingLeft = `${level * 10}px`;
+
+        if (item.type === 'folder') {
+          const folderDiv = document.createElement('div');
+          folderDiv.className = 'notes-tree-item notes-tree-folder';
+          folderDiv.innerHTML = `
+            <span class="notes-tree-toggle">▶</span>
+            <span class="notes-tree-icon">📁</span>
+            <span>${item.name}</span>
+          `;
+
+          const childrenDiv = document.createElement('div');
+          childrenDiv.className = 'notes-tree-children';
+          childrenDiv.style.display = 'none';
+
+          folderDiv.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = childrenDiv.style.display === 'block';
+            childrenDiv.style.display = isOpen ? 'none' : 'block';
+            folderDiv.querySelector('.notes-tree-toggle').textContent = isOpen ? '▶' : '▼';
+          });
+
+          itemDiv.appendChild(folderDiv);
+          itemDiv.appendChild(childrenDiv);
+
+          if (item.children && item.children.length > 0) {
+            renderTreeItems(item.children, childrenDiv, level + 1);
+          }
+        } else {
+          itemDiv.className = 'notes-tree-item notes-tree-file';
+          itemDiv.innerHTML = `
+            <span class="notes-tree-toggle"></span>
+            <span class="notes-tree-icon">📄</span>
+            <span>${item.name}</span>
+          `;
+
+          itemDiv.addEventListener('click', () => {
+            this.loadNote(item.path);
+
+            // Highlight active item
+            container.closest('.notes-file-tree').querySelectorAll('.notes-tree-item').forEach(el => {
+              el.classList.remove('active');
+            });
+            itemDiv.classList.add('active');
+          });
+        }
+
+        container.appendChild(itemDiv);
+      });
+    };
+
+    renderTreeItems(this.state.structure, this.elements.fileTree);
+  }
+
+  renderPreview() {
+    if (!window.marked) {
+      setTimeout(() => this.renderPreview(), 100);
+      return;
+    }
+
+    const markdown = this.elements.editorTextarea.value;
+    const basePath = this.elements.notePath.value;
+
+    // Create a custom renderer for internal links and videos
+    const renderer = {
+      link: (token) => {
+        const href = token.href;
+        const title = token.title || '';
+        const text = token.text;
+
+        // Check if it's an internal markdown link
+        if (href && href.endsWith('.md') && !href.startsWith('http')) {
+          // Resolve relative path based on current note location
+          const parts = basePath.split('/');
+          parts.pop(); // Remove filename
+          const dir = parts.join('/');
+          const linkPath = dir ? `${dir}/${href}`.replace(/\/\.\//g, '/') : href.replace('./', '');
+
+          return `<a href="#" class="internal-link" data-path="${linkPath}" title="${title}">${text}</a>`;
+        }
+
+        return false; // Use default renderer
+      },
+
+      image: (token) => {
+        const href = token.href;
+        const title = token.title || '';
+
+        // Check if it's a video file
+        if (href &&
+            (href.endsWith('.mp4') || href.endsWith('.webm') ||
+             href.endsWith('.mov') || href.endsWith('.avi') ||
+             href.endsWith('.mkv') || href.includes('/videos/'))) {
+          return `<video controls style="max-width: 100%; height: auto;" title="${title}">
+            <source src="${href}" type="video/mp4">
+            Your browser does not support the video tag.
+          </video>`;
+        }
+
+        return false; // Use default renderer
+      }
+    };
+
+    // Use marked with custom renderer
+    marked.use({ renderer });
+    const html = marked.parse(markdown);
+    this.elements.previewContent.innerHTML = html;
+
+    // Highlight code blocks
+    if (window.hljs) {
+      this.elements.previewContent.querySelectorAll('pre code').forEach(block => {
+        hljs.highlightBlock(block);
+      });
+    }
+
+    // Add click handlers for internal links
+    this.elements.previewContent.querySelectorAll('.internal-link').forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const linkPath = link.getAttribute('data-path');
+        if (linkPath) {
+          this.loadNote(linkPath);
+        }
+      });
+    });
+  }
+
+  insertAtCursor(text) {
+    const textarea = this.elements.editorTextarea;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const value = textarea.value;
+
+    textarea.value = value.substring(0, start) + text + value.substring(end);
+    textarea.selectionStart = textarea.selectionEnd = start + text.length;
+    textarea.focus();
+  }
+
+  showNotification(message, type = 'info') {
+    console.log(`[${type.toUpperCase()}] ${message}`);
+    // You can implement a custom notification system here
+  }
+
+  handleError(message, error) {
+    console.error(message, error);
+    if (this.config.onError) {
+      this.config.onError(message, error);
+    } else {
+      alert(message);
+    }
+  }
+}
+
+// Export for different module systems
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { NotesEditor };
+} else {
+  window.NotesEditor = NotesEditor;
+}