Spaces:
Running
Running
File size: 3,071 Bytes
3060a8b 29957c9 3060a8b 9af8396 3060a8b 9af8396 29957c9 3060a8b 29957c9 9af8396 29957c9 9af8396 29957c9 3060a8b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!DOCTYPE html>
<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> |