Update index.html

index.html

@@ -575,4 +575,87 @@ function hello() {
 
             const tasksMarkdown = tasks.map(task => `- ${task}`).join('\n');
 
-            input.value +
+            input.value += `\n${tasksMarkdown}`;
+            updatePreview();
+            hideModal('tasks-modal');
+        }
+
+        // Function to insert a horizontal rule
+        function insertHR() {
+            input.value += `\n---\n`;
+            updatePreview();
+            hideModal('hr-modal');
+        }
+
+        // Function to insert an emoji
+        function insertEmoji() {
+            const emoji = document.getElementById('emoji').value;
+            input.value += `\n${emoji}`;
+            updatePreview();
+            hideModal('emoji-modal');
+        }
+
+        // Function to insert a mention
+        function insertMention() {
+            const username = document.getElementById('mention-username').value || 'username';
+            input.value += `\n@${username}`;
+            updatePreview();
+            hideModal('mention-modal');
+        }
+
+        // Event listeners
+        input.addEventListener('input', updatePreview);
+        commandSelect.addEventListener('change', (e) => {
+            const command = e.target.value;
+            if (command === '/badge') {
+                showModal('badge-modal');
+            } else if (command === '/links') {
+                showModal('links-modal');
+            } else if (command === '/blocks') {
+                showModal('blocks-modal');
+            } else if (command === '/lists') {
+                showModal('lists-modal');
+            } else if (command === '/headings') {
+                showModal('headings-modal');
+            } else if (command === '/text') {
+                showModal('text-modal');
+            } else if (command === '/tables') {
+                showModal('tables-modal');
+            } else if (command === '/tasks') {
+                showModal('tasks-modal');
+            } else if (command === '/hr') {
+                showModal('hr-modal');
+            } else if (command === '/emoji') {
+                showModal('emoji-modal');
+            } else if (command === '/mention') {
+                showModal('mention-modal');
+            }
+        });
+
+        // Insert buttons
+        document.getElementById('insert-badge').addEventListener('click', insertBadge);
+        document.getElementById('insert-link').addEventListener('click', insertLink);
+        document.getElementById('insert-image').addEventListener('click', insertImage);
+        document.getElementById('insert-block').addEventListener('click', insertBlock);
+        document.getElementById('insert-list').addEventListener('click', insertList);
+        document.getElementById('insert-heading').addEventListener('click', insertHeading);
+        document.getElementById('insert-text').addEventListener('click', insertText);
+        document.getElementById('insert-table').addEventListener('click', insertTable);
+        document.getElementById('insert-tasks').addEventListener('click', insertTasks);
+        document.getElementById('insert-hr').addEventListener('click', insertHR);
+        document.getElementById('insert-emoji').addEventListener('click', insertEmoji);
+        document.getElementById('insert-mention').addEventListener('click', insertMention);
+
+        // Close modals when clicking outside
+        window.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                e.target.style.display = 'none';
+            }
+        });
+
+        // Initial render
+        updatePreview();
+    </script>
+
+</body>
+</html>