Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Note Editor</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css"> | |
| <style> | |
| .editor-container { | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .editor-toolbar { | |
| border: none; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .editor-content { | |
| flex-grow: 1; | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="editor-container"> | |
| <div class="p-2 border-bottom d-flex justify-content-between align-items-center"> | |
| <input type="text" class="form-control form-control-sm border-0 shadow-none" value="Welcome Note" style="max-width: 300px;"> | |
| <div> | |
| <button class="btn btn-sm btn-outline-secondary me-1"> | |
| <i class="bi bi-share"></i> Share | |
| </button> | |
| <button class="btn btn-sm btn-outline-success"> | |
| <i class="bi bi-check"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| <textarea id="editor"></textarea> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script> | |
| <script> | |
| // Set default title and content | |
| document.querySelector('input[type="text"]').value = 'Untitled Note'; | |
| // Initialize editor with note content | |
| const editor = new EasyMDE({ | |
| element: document.getElementById('editor'), | |
| initialValue: '# New Note\n\nStart writing here...', | |
| autoDownloadFontAwesome: false, | |
| toolbar: [ | |
| 'bold', 'italic', 'heading', '|', | |
| 'quote', 'unordered-list', 'ordered-list', '|', | |
| 'link', 'image', '|', | |
| 'preview', 'side-by-side', 'fullscreen', '|', | |
| 'guide' | |
| ], | |
| status: false | |
| }); | |
| // Save button functionality | |
| document.querySelector('.btn-outline-success').addEventListener('click', function() { | |
| const content = editor.value(); | |
| const title = document.querySelector('input[type="text"]').value; | |
| // Here you would save the content to your backend | |
| alert(`Note "${title}" saved!`); | |
| }); | |
| // Update title when section changes (communicate with parent) | |
| window.addEventListener('message', function(e) { | |
| if (e.data.type === 'sectionChange') { | |
| document.querySelector('input[type="text"]').value = e.data.sectionName; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |