From e35e2dd7d38cdfe5f9dcb609dd43b106947dd8ef Mon Sep 17 00:00:00 2001 From: iamakashtechie Date: Tue, 15 Apr 2025 23:15:43 +0530 Subject: [PATCH] UI Changes --- editor.html | 627 ++++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 171 +++++++++++++- 2 files changed, 747 insertions(+), 51 deletions(-) diff --git a/editor.html b/editor.html index 2b6a89c..a4cd66a 100644 --- a/editor.html +++ b/editor.html @@ -4,39 +4,246 @@ Live markdown editor based on MathJax and Marked + + + + + + +// Enhanced functionality +document.addEventListener('DOMContentLoaded', function() { + // Dark mode toggle + const darkModeToggle = document.getElementById('darkModeToggle'); + const themeLabel = document.getElementById('themeLabel'); + + // Check for saved theme preference or prefer-color-scheme + const savedTheme = localStorage.getItem('theme'); + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (savedTheme === 'dark' || (!savedTheme && prefersDark)) { + document.body.classList.add('dark-mode'); + darkModeToggle.checked = true; + themeLabel.textContent = 'Light Mode'; + } + + darkModeToggle.addEventListener('change', function() { + if (this.checked) { + document.body.classList.add('dark-mode'); + localStorage.setItem('theme', 'dark'); + themeLabel.textContent = 'Light Mode'; + } else { + document.body.classList.remove('dark-mode'); + localStorage.setItem('theme', 'light'); + themeLabel.textContent = 'Dark Mode'; + } + }); + + // Save to markdown file + document.getElementById('saveBtn').addEventListener('click', function() { + const content = document.getElementById('marked-mathjax-input').value; + const blob = new Blob([content], { type: 'text/markdown' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'document.md'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }); + + // Copy HTML + document.getElementById('copyBtn').addEventListener('click', function() { + const htmlContent = document.getElementById('marked-mathjax-preview').innerHTML; + + // Create temporary textarea for copying + const textarea = document.createElement('textarea'); + textarea.value = htmlContent; + document.body.appendChild(textarea); + textarea.select(); + + try { + document.execCommand('copy'); + alert('HTML copied to clipboard!'); + } catch (err) { + console.error('Failed to copy: ', err); + alert('Failed to copy HTML to clipboard'); + } + + document.body.removeChild(textarea); + }); + + // Clear editor + document.getElementById('clearBtn').addEventListener('click', function() { + if (confirm('Are you sure you want to clear the editor?')) { + document.getElementById('marked-mathjax-input').value = ''; + Preview.Update(); + } + }); + + // Fullscreen mode for editor + document.getElementById('editorFullscreen').addEventListener('click', function() { + const editorSection = document.querySelector('.editor-section'); + editorSection.classList.toggle('fullscreen'); + const icon = this.querySelector('i'); + + if (editorSection.classList.contains('fullscreen')) { + icon.classList.remove('fa-expand'); + icon.classList.add('fa-compress'); + } else { + icon.classList.remove('fa-compress'); + icon.classList.add('fa-expand'); + } + }); + + // Fullscreen mode for preview + document.getElementById('previewFullscreen').addEventListener('click', function() { + const previewSection = document.querySelector('.preview-section'); + previewSection.classList.toggle('fullscreen'); + const icon = this.querySelector('i'); + + if (previewSection.classList.contains('fullscreen')) { + icon.classList.remove('fa-expand'); + icon.classList.add('fa-compress'); + } else { + icon.classList.remove('fa-compress'); + icon.classList.add('fa-expand'); + } + }); + + // Tab switching for mobile view + const editorTab = document.getElementById('editorTab'); + const previewTab = document.getElementById('previewTab'); + const editorSection = document.querySelector('.editor-section'); + const previewSection = document.querySelector('.preview-section'); + + editorTab.addEventListener('click', function() { + editorTab.classList.add('active'); + previewTab.classList.remove('active'); + editorSection.classList.add('active'); + previewSection.classList.remove('active'); + }); + + previewTab.addEventListener('click', function() { + previewTab.classList.add('active'); + editorTab.classList.remove('active'); + previewSection.classList.add('active'); + editorSection.classList.remove('active'); + }); +}); + +// Function to insert markdown syntax +function insertMarkdown(before, after) { + const textarea = document.getElementById('marked-mathjax-input'); + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const selectedText = textarea.value.substring(start, end); + const replacement = before + selectedText + after; + + textarea.value = textarea.value.substring(0, start) + replacement + textarea.value.substring(end); + + // Set cursor position based on whether text was selected + if (selectedText.length > 0) { + textarea.selectionStart = start; + textarea.selectionEnd = start + replacement.length; + } else { + textarea.selectionStart = start + before.length; + textarea.selectionEnd = start + before.length; + } + + textarea.focus(); + Preview.Update(); +} + +// Function to insert a markdown table template +function insertTable() { + const tableTemplate = ` +| Header 1 | Header 2 | Header 3 | +|----------|----------|----------| +| Row 1 | Data | Data | +| Row 2 | Data | Data | +`; + + insertMarkdown(tableTemplate, ''); +} + +// Auto-save functionality +let autoSaveInterval = setInterval(function() { + const content = document.getElementById('marked-mathjax-input').value; + localStorage.setItem('markdown-content', content); +}, 5000); + +// Load saved content on page load +window.addEventListener('load', function() { + const savedContent = localStorage.getItem('markdown-content'); + if (savedContent && document.getElementById('marked-mathjax-input').value.trim() === '') { + document.getElementById('marked-mathjax-input').value = savedContent; + Preview.Update(); + } +}); + +// Debounce function for smoother preview updates +function debounce(func, wait) { + let timeout; + return function() { + const context = this; + const args = arguments; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), wait); + }; +} + +// Override the Update method with debounced version for smoother preview +const originalUpdate = Preview.Update; +Preview.Update = debounce(originalUpdate.bind(Preview), 300); + diff --git a/index.html b/index.html index c5d0662..e04f549 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,163 @@ - -

markdown+mathjax

-Live markdown editor based on MathJax and Marked - -
-Go to demo. -
-Or see the source. + + + + + + + Markdown + MathJax Viewer + + + + + + + + + +
+

Markdown + MathJax

+

A live markdown editor with MathJax support for mathematical formulas

+ +
+ + Open Editor + + + View Source + +
+ +
+
+ +

Markdown

+

Format text using simple Markdown syntax

+
+
+ +

Math Formulas

+

Render complex mathematical expressions with LaTeX

+
+
+ +

Dark Mode

+

Switch between light and dark themes

+
+
+ +

Save & Export

+

Download your documents or copy HTML

+
+
+ + +
+ +