+++
${highlightedCode}${highlightedCode}Error parsing markdown
'; + return "Error parsing markdown
"; } }; @@ -141,119 +153,49 @@ const MarkdownEditor = () => { } const words = markdownText.trim().split(/\s+/).length; const characters = markdownText.length; - const lines = markdownText.split('\n').length; + const lines = markdownText.split("\n").length; const readingTime = Math.ceil(words / 200); return { words, characters, lines, readingTime }; }; const stats = calculateStats(); - // Add event delegation for copy buttons and close dropdown on outside click useEffect(() => { const handleClick = (e) => { - // Handle copy button clicks - const button = e.target.closest('.code-block-copy'); + // Handle copy button clicks in Read mode + const button = e.target.closest(".code-block-copy"); if (button) { - const codeId = button.getAttribute('data-code-id'); + const codeId = button.getAttribute("data-code-id"); const codeElement = document.getElementById(codeId); - + if (codeElement) { const code = codeElement.textContent; - navigator.clipboard.writeText(code).then(() => { - const originalText = button.textContent; - button.textContent = 'Copied!'; - setTimeout(() => { - button.textContent = originalText; - }, 2000); - }).catch(err => { - // Failed to copy - }); + navigator.clipboard + .writeText(code) + .then(() => { + const originalText = button.innerHTML; + button.innerHTML = "Copied!"; + setTimeout(() => { + button.innerHTML = originalText; + }, 2000); + }) + .catch((err) => { + // Failed to copy + }); } return; } // Close heading dropdown if clicking outside - if (showHeadingDropdown && !e.target.closest('.relative')) { + if (showHeadingDropdown && !e.target.closest(".relative")) { setShowHeadingDropdown(false); } }; - document.addEventListener('click', handleClick); - return () => document.removeEventListener('click', handleClick); + document.addEventListener("click", handleClick); + return () => document.removeEventListener("click", handleClick); }, [showHeadingDropdown]); - // Toolbar formatting functions - proper CodeMirror integration with toggle support - const insertMarkdown = (before, after = '', placeholder = 'text', skipPlaceholder = false) => { - // Get CodeMirror view from the DOM - const editorElement = document.querySelector('.cm-editor'); - if (!editorElement) return; - - const view = editorElement.cmView?.view; - if (!view) return; - - const state = view.state; - const selection = state.selection.main; - - // Get selected text or use placeholder (unless skipPlaceholder is true) - const selectedText = state.doc.sliceString(selection.from, selection.to) || (skipPlaceholder ? '' : placeholder); - - // Check if text is already formatted (toggle support) - const beforeLen = before.length; - const afterLen = after.length; - const expandedFrom = Math.max(0, selection.from - beforeLen); - const expandedTo = Math.min(state.doc.length, selection.to + afterLen); - const expandedText = state.doc.sliceString(expandedFrom, expandedTo); - - // Check if already formatted - const isFormatted = expandedText.startsWith(before) && expandedText.endsWith(after); - - if (isFormatted && selectedText) { - // Remove formatting - view.dispatch({ - changes: { from: expandedFrom, to: expandedTo, insert: selectedText }, - selection: { - anchor: expandedFrom, - head: expandedFrom + selectedText.length - } - }); - } else { - // Add formatting - const formatted = `${before}${selectedText}${after}`; - view.dispatch({ - changes: { from: selection.from, to: selection.to, insert: formatted }, - selection: { - anchor: selection.from + before.length, - head: selection.from + before.length + selectedText.length - } - }); - } - - // Focus back to editor - view.focus(); - }; - - // Heading insertion helper - const insertHeading = (level) => { - const prefix = '#'.repeat(level) + ' '; - insertMarkdown(prefix, '', 'Heading'); - setShowHeadingDropdown(false); - }; - - const toolbarButtons = [ - { icon: Heading, label: 'Heading', action: () => setShowHeadingDropdown(!showHeadingDropdown), isDropdown: true, group: 'formatter' }, - { icon: Bold, label: 'Bold', action: () => insertMarkdown('**', '**', 'bold text'), group: 'formatter' }, - { icon: Italic, label: 'Italic', action: () => insertMarkdown('*', '*', 'italic text'), group: 'formatter' }, - { icon: Underline, label: 'Underline', action: () => insertMarkdown('__', '__', 'underlined text'), group: 'formatter' }, - { icon: Quote, label: 'Quote', action: () => insertMarkdown('> ', '', 'quote'), group: 'formatter' }, - { icon: Code, label: 'Code Block', action: () => insertMarkdown('\n```\n', '\n```\n', 'code'), group: 'formatter' }, - { icon: Link2, label: 'Link', action: () => insertMarkdown('[', '](url)', 'link text'), group: 'formatter' }, - { icon: List, label: 'Bullet List', action: () => insertMarkdown('- ', '', 'list item'), group: 'list' }, - { icon: ListOrdered, label: 'Numbered List', action: () => insertMarkdown('1. ', '', 'list item'), group: 'list' }, - { icon: CheckSquare, label: 'Task List', action: () => insertMarkdown('- [ ] ', '', 'task'), group: 'list' }, - { icon: Minus, label: 'Divider', action: () => insertMarkdown('\n---\n', '', '', true), group: 'element' }, - { icon: Table, label: 'Table', action: () => insertMarkdown('\n| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |', '', '', true), group: 'element' }, - ]; - // Sample markdown const sampleMarkdown = `# Welcome to Markdown Editor @@ -380,8 +322,8 @@ MIT License - see LICENSE file for details blog: `# Blog Post Title -**Published:** ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} -**Author:** Your Name +**Published:** ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })} +**Author:** Your Name **Tags:** #tag1 #tag2 #tag3 --- @@ -516,8 +458,8 @@ For support, email support@example.com or visit our [Help Center](https://help.e meeting: `# Meeting Notes -**Date:** ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} -**Time:** [Start Time] - [End Time] +**Date:** ${new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })} +**Time:** [Start Time] - [End Time] **Location:** [Location/Video Call Link] ## Attendees @@ -563,7 +505,7 @@ For support, email support@example.com or visit our [Help Center](https://help.e | Task 3 | Person C | 2025-01-10 | ✅ Complete | ## Next Meeting -**Date:** [Next Meeting Date] +**Date:** [Next Meeting Date] **Agenda Items:** - Follow up on action items - [Other topics] @@ -599,7 +541,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Security - Security improvements -## [1.0.0] - ${new Date().toISOString().split('T')[0]} +## [1.0.0] - ${new Date().toISOString().split("T")[0]} ### Added - Initial release @@ -641,10 +583,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [Unreleased]: https://github.com/username/repo/compare/v1.0.0...HEAD [1.0.0]: https://github.com/username/repo/compare/v0.2.0...v1.0.0 [0.2.0]: https://github.com/username/repo/compare/v0.1.0...v0.2.0 -[0.1.0]: https://github.com/username/repo/releases/tag/v0.1.0` +[0.1.0]: https://github.com/username/repo/releases/tag/v0.1.0`, }; - const [selectedTemplate, setSelectedTemplate] = useState('sample'); + const [selectedTemplate, setSelectedTemplate] = useState("sample"); // Helper function to check if user has data that would be lost const hasUserData = () => { @@ -660,7 +602,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 // Handle tab change with confirmation if data exists const handleTabChange = (newTab) => { - if (newTab === 'create' && activeTab !== 'create') { + if (newTab === "create" && activeTab !== "create") { if (hasModifiedData()) { setPendingTabChange(newTab); setShowInputChangeModal(true); @@ -673,7 +615,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 setShowInputChangeModal(true); } else { setActiveTab(newTab); - if (newTab === 'create' && createNewCompleted) { + if (newTab === "create" && createNewCompleted) { setCreateNewCompleted(false); } } @@ -681,9 +623,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 // Clear all data function const clearAllData = () => { - setMarkdownText(''); - setInputText(''); - setError(''); + setMarkdownText(""); + setHtmlText(""); // Also clear HTML text to force re-render + setInputText(""); + setError(""); setCreateNewCompleted(false); setPasteCollapsed(false); setPasteDataSummary(null); @@ -693,22 +636,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 // Confirm input method change and clear data const confirmInputChange = () => { - if (pendingTabChange === 'create_empty') { + if (pendingTabChange === "create_empty") { clearAllData(); - setMarkdownText(''); + setMarkdownText(""); + setHtmlText(""); setCreateNewCompleted(true); - } else if (pendingTabChange === 'create_sample') { + } else if (pendingTabChange === "create_sample") { clearAllData(); setMarkdownText(templates[selectedTemplate]); + setHtmlText(""); setCreateNewCompleted(true); } else { clearAllData(); setActiveTab(pendingTabChange); - if (pendingTabChange === 'create') { + if (pendingTabChange === "create") { setCreateNewCompleted(false); } } - + setShowInputChangeModal(false); setPendingTabChange(null); }; @@ -722,18 +667,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 // Handle Parse Markdown button click const handleParseMarkdown = () => { if (!inputText.trim()) { - setError('Please enter some markdown text'); + setError("Please enter some markdown text"); setPasteCollapsed(false); return; } setMarkdownText(inputText); - setError(''); + setHtmlText(""); // Clear html text to force the fallback to parse the new markdown immediately + setError(""); setCreateNewCompleted(true); setPasteDataSummary({ - format: 'Markdown', + format: "Markdown", size: inputText.length, - lines: inputText.split('\n').length + lines: inputText.split("\n").length, }); setPasteCollapsed(true); }; @@ -747,10 +693,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 reader.onload = (e) => { let content = e.target.result; - let format = 'Markdown'; + let format = "Markdown"; // Detect file type and convert if needed - if (file.name.endsWith('.html') || file.name.endsWith('.htm')) { + if (file.name.endsWith(".html") || file.name.endsWith(".htm")) { // Extract content from HTML body if it's a full HTML document const bodyMatch = content.match(/- 💡 Tip: You can always import markdown later using the URL, Paste, or Open tabs. + 💡 Tip: You can always import + markdown later using the URL, Paste, or Open tabs.
Preview will appear here
-- Download your markdown in different formats -
-Export Information
-📝 Input Methods:
-+ Download your markdown in different formats +
+Export Information
+📝 Input Methods:
+- {(newMethod === 'create_empty' || newMethod === 'create_sample') ? ( - <>Using {getMethodName(newMethod)} will clear all current markdown. + {newMethod === "create_empty" || newMethod === "create_sample" ? ( + <> + Using {getMethodName(newMethod)} will clear all + current markdown. + ) : ( - <>Switching from {getMethodName(currentMethod)} to {getMethodName(newMethod)} will clear all current markdown. + <> + Switching from {getMethodName(currentMethod)}{" "} + to {getMethodName(newMethod)} will clear all + current markdown. + )}
- +- Tip: Consider downloading your current markdown before switching methods to avoid losing your work. + Tip: Consider downloading your current markdown + before switching methods to avoid losing your work.