script.js

let isEditMode = false;
let isDarkMode = false;
let markdownContent = `# Welcome to Lightweight Markdown

这是一个轻量级的 Markdown 编辑器，支持预览和编辑模式切换。

## 功能特性

- ✨ **预览模式**：查看渲染后的 Markdown 内容
- 📝 **编辑模式**：实时编辑 Markdown 文本
- 📁 **文件上传**：支持点击上传和拖放导入
- 💾 **文件下载**：一键下载当前编辑的文件
- 🔗 **导入链接**：从网络链接导入 Markdown 文件
- 🎨 **语法高亮**：代码块支持高亮显示
- 🌙 **深色模式**：支持深色/亮色主题切换
- 📱 **响应式设计**：在各种设备上完美展示

## 使用示例

### 文本样式

这是**加粗文本**，这是*斜体文本*，这是~~删除线~~。

### 列表

#### 无序列表
- 项目一
- 项目二
  - 子项目 A
  - 子项目 B

#### 有序列表
1. 第一步
2. 第二步
3. 第三步

### 代码

行内代码：\`console.log('Hello World')\`

代码块：
\`\`\`javascript
function greet(name) {
    return \`Hello, \${name}!\`;
}

console.log(greet('Markdown'));
\`\`\`

### 引用

> 这是一段引用文字。
> 
> —— 佚名

### 链接和图片

[访问 GitHub](https://github.com)

### 表格

| 功能 | 状态 |
|------|------|
| 预览模式 | ✅ 完成 |
| 编辑模式 | ✅ 完成 |
| 文件上传 | ✅ 完成 |
| 文件下载 | ✅ 完成 |
| 导入链接 | ✅ 完成 |
| 深色模式 | ✅ 完成 |

---

开始使用吧！点击右上角的功能按钮查看所有功能。
`;

const editor = document.getElementById('editor');
const previewContent = document.getElementById('previewContent');
const settingsBtn = document.getElementById('settingsBtn');
const dropdownMenu = document.getElementById('dropdownMenu');
const fileInput = document.getElementById('fileInput');
const dropZone = document.getElementById('dropZone');
const editorContainer = document.getElementById('editorContainer');
const loadingOverlay = document.getElementById('loadingOverlay');
const toast = document.getElementById('toast');
const toolbar = document.getElementById('toolbar');
const linkModal = document.getElementById('linkModal');
const linkInput = document.getElementById('linkInput');
const modalClose = document.getElementById('modalClose');
const modalCancel = document.getElementById('modalCancel');
const modalConfirm = document.getElementById('modalConfirm');

marked.setOptions({
    highlight: function(code, lang) {
        if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value;
        }
        return hljs.highlightAuto(code).value;
    },
    breaks: true,
    gfm: true
});

function renderMarkdown() {
    previewContent.innerHTML = marked.parse(markdownContent);
}

function updateEditor() {
    editor.value = markdownContent;
}

function switchMode(isEdit) {
    isEditMode = isEdit;
    const toolbarEl = document.getElementById('toolbar');
    const previewEl = document.getElementById('preview');
    
    if (isEdit) {
        toolbarEl.style.display = 'flex';
        editor.style.display = 'block';
        previewEl.style.display = 'none';
        editor.focus();
    } else {
        toolbarEl.style.display = 'none';
        editor.style.display = 'none';
        previewEl.style.display = 'block';
        renderMarkdown();
    }
}

function toggleDarkMode(isDark) {
    isDarkMode = isDark;
    if (isDark) {
        document.body.classList.add('dark-mode');
    } else {
        document.body.classList.remove('dark-mode');
    }
}

function showToast(message, type = 'info') {
    toast.textContent = message;
    toast.className = 'toast ' + type;
    toast.classList.add('active');
    
    setTimeout(() => {
        toast.classList.remove('active');
    }, 3000);
}

function showLoading(show) {
    if (show) {
        loadingOverlay.classList.add('active');
    } else {
        loadingOverlay.classList.remove('active');
    }
}

function loadFile(file) {
    if (!file.name.endsWith('.md')) {
        showToast('请上传 .md 格式的文件', 'error');
        return;
    }

    showLoading(true);

    const reader = new FileReader();
    reader.onload = function(e) {
        markdownContent = e.target.result;
        updateEditor();
        renderMarkdown();
        showLoading(false);
        showToast('文件加载成功！', 'success');
    };

    reader.onerror = function() {
        showLoading(false);
        showToast('文件加载失败，请重试', 'error');
    };

    reader.readAsText(file);
}

function downloadFile() {
    const blob = new Blob([markdownContent], { 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);
    showToast('文件下载成功！', 'success');
}

async function importFromLink(url) {
    if (!url) {
        showToast('请输入有效的链接', 'error');
        return;
    }

    showLoading(true);

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('网络请求失败');
        }
        const text = await response.text();
        markdownContent = text;
        updateEditor();
        renderMarkdown();
        showToast('链接导入成功！', 'success');
    } catch (error) {
        showToast('链接导入失败：' + error.message, 'error');
    } finally {
        showLoading(false);
    }
}

function openModal() {
    linkModal.classList.add('active');
    linkInput.value = '';
    linkInput.focus();
}

function closeModal() {
    linkModal.classList.remove('active');
}

function toggleDropdown() {
    dropdownMenu.classList.toggle('active');
}

function closeDropdown(event) {
    if (!settingsBtn.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('active');
    }
}

function insertText(before, after = '') {
    const start = editor.selectionStart;
    const end = editor.selectionEnd;
    const selectedText = editor.value.substring(start, end);
    const textToInsert = before + (selectedText || '此处输入文字') + after;
    
    editor.value = editor.value.substring(0, start) + textToInsert + editor.value.substring(end);
    markdownContent = editor.value;
    
    if (selectedText) {
        editor.setSelectionRange(start + before.length, start + textToInsert.length - after.length);
    } else {
        editor.setSelectionRange(start + before.length, start + textToInsert.length - after.length);
    }
    
    editor.focus();
}

const toolbarActions = {
    bold: () => insertText('**', '**'),
    italic: () => insertText('*', '*'),
    strikethrough: () => insertText('~~', '~~'),
    h1: () => insertText('# '),
    h2: () => insertText('## '),
    h3: () => insertText('### '),
    ul: () => insertText('- '),
    ol: () => insertText('1. '),
    link: () => insertText('[链接文字](', ')'),
    image: () => insertText('![图片描述](', ')'),
    code: () => insertText('`', '`'),
    quote: () => insertText('> ')
};

settingsBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    toggleDropdown();
});

document.addEventListener('click', closeDropdown);

dropdownMenu.addEventListener('click', function(e) {
    const item = e.target.closest('.dropdown-item');
    if (item && item.dataset.action) {
        const action = item.dataset.action;
        switch(action) {
            case 'upload':
                fileInput.click();
                break;
            case 'download':
                downloadFile();
                break;
            case 'import-link':
                openModal();
                break;
            case 'preview':
                switchMode(false);
                showToast('已切换到预览模式', 'success');
                break;
            case 'edit':
                switchMode(true);
                showToast('已切换到编辑模式', 'success');
                break;
            case 'light':
                toggleDarkMode(false);
                showToast('已切换到亮色模式', 'success');
                break;
            case 'dark':
                toggleDarkMode(true);
                showToast('已切换到深色模式', 'success');
                break;
        }
        dropdownMenu.classList.remove('active');
    }
});

fileInput.addEventListener('change', function(e) {
    if (e.target.files && e.target.files[0]) {
        loadFile(e.target.files[0]);
        fileInput.value = '';
    }
});

editorContainer.addEventListener('dragenter', function(e) {
    e.preventDefault();
    dropZone.classList.add('active');
});

dropZone.addEventListener('dragover', function(e) {
    e.preventDefault();
});

dropZone.addEventListener('dragleave', function(e) {
    if (!dropZone.contains(e.relatedTarget)) {
        dropZone.classList.remove('active');
    }
});

dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    dropZone.classList.remove('active');
    
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
        loadFile(e.dataTransfer.files[0]);
    }
});

editor.addEventListener('input', function() {
    markdownContent = this.value;
});

editor.addEventListener('keydown', function(e) {
    if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
            case 'b':
                e.preventDefault();
                toolbarActions.bold();
                break;
            case 'i':
                e.preventDefault();
                toolbarActions.italic();
                break;
        }
    }
});

toolbar.addEventListener('click', function(e) {
    const btn = e.target.closest('.toolbar-btn');
    if (btn && btn.dataset.action) {
        const action = toolbarActions[btn.dataset.action];
        if (action) {
            action();
        }
    }
});

modalClose.addEventListener('click', closeModal);
modalCancel.addEventListener('click', closeModal);

modalConfirm.addEventListener('click', function() {
    importFromLink(linkInput.value);
    closeModal();
});

linkInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        importFromLink(linkInput.value);
        closeModal();
    }
});

linkModal.addEventListener('click', function(e) {
    if (e.target === linkModal) {
        closeModal();
    }
});

function init() {
    updateEditor();
    renderMarkdown();
    switchMode(false);
}

init();