$1

')\n .replace(/^# (.*$)/gim, '

$1

')\n .replace(/\\*\\*(.*)\\*\\*/gim, '$1')\n .replace(/\\*(.*)\\*/gim, '$1')\n .replace(/\\n/gim, '
');\n } catch (error) {\n console.error('Markdown conversion failed:', error);\n return markdown.replace(/\\n/g, '
');\n }\n }, []);\n\n // Update HTML content when markdown changes\n useEffect(() => {\n const updateHtml = async () => {\n const html = await convertMarkdownToHtml(content);\n setHtmlContent(html);\n };\n \n updateHtml();\n }, [content, convertMarkdownToHtml]);\n\n // Synchronized scrolling\n const handleEditorScroll = useCallback(() => {\n if (isScrolling || !editorRef.current || !previewRef.current) return;\n \n setIsScrolling(true);\n \n const editor = editorRef.current;\n const preview = previewRef.current;\n \n const scrollPercentage = editor.scrollTop / (editor.scrollHeight - editor.clientHeight);\n const targetScrollTop = scrollPercentage * (preview.scrollHeight - preview.clientHeight);\n \n preview.scrollTop = targetScrollTop;\n \n clearTimeout(scrollTimeoutRef.current);\n scrollTimeoutRef.current = setTimeout(() => {\n setIsScrolling(false);\n }, 100);\n }, [isScrolling]);\n\n const handlePreviewScroll = useCallback(() => {\n if (isScrolling || !editorRef.current || !previewRef.current) return;\n \n setIsScrolling(true);\n \n const editor = editorRef.current;\n const preview = previewRef.current;\n \n const scrollPercentage = preview.scrollTop / (preview.scrollHeight - preview.clientHeight);\n const targetScrollTop = scrollPercentage * (editor.scrollHeight - editor.clientHeight);\n \n editor.scrollTop = targetScrollTop;\n \n clearTimeout(scrollTimeoutRef.current);\n scrollTimeoutRef.current = setTimeout(() => {\n setIsScrolling(false);\n }, 100);\n }, [isScrolling]);\n\n // Handle keyboard shortcuts\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'b':\n e.preventDefault();\n insertMarkdown('**', '**');\n break;\n case 'i':\n e.preventDefault();\n insertMarkdown('*', '*');\n break;\n case 'k':\n e.preventDefault();\n insertMarkdown('[', '](url)');\n break;\n }\n }\n \n // Handle tab for indentation\n if (e.key === 'Tab') {\n e.preventDefault();\n insertMarkdown(' ', '');\n }\n }, []);\n\n const insertMarkdown = (before: string, after: string) => {\n const textarea = editorRef.current;\n if (!textarea) return;\n \n const start = textarea.selectionStart;\n const end = textarea.selectionEnd;\n const selectedText = content.substring(start, end);\n \n const newContent = \n content.substring(0, start) + \n before + selectedText + after + \n content.substring(end);\n \n onChange(newContent);\n \n // Restore cursor position\n setTimeout(() => {\n textarea.focus();\n textarea.setSelectionRange(\n start + before.length,\n start + before.length + selectedText.length\n );\n }, 0);\n };\n\n return (\n

\n {/* Markdown Editor */}\n

📝 Markdown

\n Ctrl+B: Bold, Ctrl+I: Italic, Ctrl+K: Link, Tab: Indent\n

\n onChange(e.target.value)}\n onScroll={handleEditorScroll}\n onKeyDown={handleKeyDown}\n className={`flex-1 p-4 border-none resize-none focus:outline-none markdown-textarea split-pane ${direction}`}\n placeholder=\"Start typing your markdown here...\"\n spellCheck={false}\n />\n

\n\n {/* Divider */}\n

\n\n {/* Preview */}\n

👁️ Preview

\n Live preview with synchronized scrolling\n

\n \n

\n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/elnaddar/online-md/code/frontend/components/SplitEditor.tsx","extension","actionData","errors"]