0ed6bcf1f2
- Extract UI components into separate JS files - Centralize configuration values in config.js - Introduce a dedicated logger module - Improve file tree drag-and-drop and undo functionality - Refactor modal handling to a single manager - Add URL routing support for SPA navigation - Implement view mode for read-only access
218 lines
10 KiB
HTML
218 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Markdown Editor</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- CodeMirror CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/theme/monokai.min.css">
|
|
|
|
<!-- Prism CSS for syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
|
|
|
|
<!-- Modular CSS -->
|
|
<link rel="stylesheet" href="/static/css/variables.css">
|
|
<link rel="stylesheet" href="/static/css/layout.css">
|
|
<link rel="stylesheet" href="/static/css/file-tree.css">
|
|
<link rel="stylesheet" href="/static/css/editor.css">
|
|
<link rel="stylesheet" href="/static/css/components.css">
|
|
<link rel="stylesheet" href="/static/css/modal.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container-fluid">
|
|
<!-- Left: Logo and Title -->
|
|
<span class="navbar-brand mb-0">
|
|
<i class="bi bi-markdown"></i> Markdown Editor
|
|
</span>
|
|
|
|
<!-- Center: Edit Mode Buttons -->
|
|
<div class="navbar-center d-flex gap-2">
|
|
<button id="newBtn" class="btn btn-success btn-sm">
|
|
<i class="bi bi-file-plus"></i> New
|
|
</button>
|
|
<button id="saveBtn" class="btn btn-primary btn-sm">
|
|
<i class="bi bi-save"></i> Save
|
|
</button>
|
|
<button id="deleteBtn" class="btn btn-danger btn-sm">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Right: Dark Mode Toggle -->
|
|
<div class="navbar-right">
|
|
<button id="darkModeBtn" class="btn btn-secondary btn-sm">
|
|
<i class="bi bi-moon-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container-fluid">
|
|
<div class="row h-100">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-2 sidebar" id="sidebarPane">
|
|
<!-- Collection Selector -->
|
|
<div class="collection-selector">
|
|
<label class="form-label small">Collection:</label>
|
|
<select id="collectionSelect" class="form-select form-select-sm"></select>
|
|
</div>
|
|
<!-- File Tree -->
|
|
<div id="fileTree" class="file-tree"></div>
|
|
</div>
|
|
|
|
<!-- Resizer between sidebar and editor -->
|
|
<div class="column-resizer" id="resizer1"></div>
|
|
|
|
<!-- Editor Pane -->
|
|
<div class="col editor-pane" id="editorPane">
|
|
<div class="editor-header">
|
|
<input type="text" id="filenameInput" placeholder="filename.md"
|
|
class="form-control form-control-sm">
|
|
</div>
|
|
<div class="editor-container">
|
|
<div id="editor"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resizer between editor and preview -->
|
|
<div class="column-resizer" id="resizer2"></div>
|
|
|
|
<!-- Preview Pane -->
|
|
<div class="col preview-pane" id="previewPane">
|
|
<div id="preview">
|
|
<p class="text-muted">Start typing in the editor to see the preview</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Context Menu -->
|
|
<div id="contextMenu" class="context-menu">
|
|
<div class="context-menu-item" data-action="open">
|
|
<i class="bi bi-folder2-open"></i> Open
|
|
</div>
|
|
<div class="context-menu-divider"></div>
|
|
<div class="context-menu-item" data-action="new-file">
|
|
<i class="bi bi-file-plus"></i> New File
|
|
</div>
|
|
<div class="context-menu-item" data-action="new-folder">
|
|
<i class="bi bi-folder-plus"></i> New Folder
|
|
</div>
|
|
<div class="context-menu-item" data-action="upload">
|
|
<i class="bi bi-upload"></i> Upload File
|
|
</div>
|
|
<div class="context-menu-divider"></div>
|
|
<div class="context-menu-item" data-action="download">
|
|
<i class="bi bi-download"></i> Download
|
|
</div>
|
|
<div class="context-menu-item" data-action="rename">
|
|
<i class="bi bi-pencil"></i> Rename
|
|
</div>
|
|
<div class="context-menu-item" data-action="copy">
|
|
<i class="bi bi-files"></i> Copy
|
|
</div>
|
|
<div class="context-menu-item" data-action="cut">
|
|
<i class="bi bi-scissors"></i> Cut
|
|
</div>
|
|
<div class="context-menu-item" id="pasteMenuItem" data-action="paste" style="display: none;">
|
|
<i class="bi bi-clipboard"></i> Paste
|
|
</div>
|
|
<div class="context-menu-divider"></div>
|
|
<div class="context-menu-item text-danger" data-action="delete">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmationMessage"></p>
|
|
<input type="text" id="confirmationInput" class="form-control" style="display: none;">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirmButton">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JSZip for folder downloads -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
|
|
|
<!-- CodeMirror JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/markdown/markdown.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/yaml/yaml.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/toml/toml.min.js"></script>
|
|
|
|
<!-- Marked.js for markdown parsing -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
<!-- Prism.js for syntax highlighting -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-toml.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
|
|
|
|
<!-- Mermaid for diagrams -->
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
|
|
<!-- Application Configuration (must load first) -->
|
|
<script src="/static/js/config.js"></script>
|
|
<script src="/static/js/logger.js"></script>
|
|
<script src="/static/js/event-bus.js"></script>
|
|
<script src="/static/js/utils.js"></script>
|
|
<script src="/static/js/notification-service.js"></script>
|
|
|
|
<!-- UI Components -->
|
|
<script src="/static/js/ui-utils.js" defer></script>
|
|
<script src="/static/js/context-menu.js" defer></script>
|
|
<script src="/static/js/file-upload.js" defer></script>
|
|
<script src="/static/js/dark-mode.js" defer></script>
|
|
<script src="/static/js/collection-selector.js" defer></script>
|
|
<script src="/static/js/editor-drop-handler.js" defer></script>
|
|
|
|
<!-- Core Application Modules -->
|
|
<script src="/static/js/webdav-client.js" defer></script>
|
|
<script src="/static/js/file-tree.js" defer></script>
|
|
<script src="/static/js/editor.js" defer></script>
|
|
<script src="/static/js/confirmation.js" defer></script>
|
|
<script src="/static/js/file-tree-actions.js" defer></script>
|
|
<script src="/static/js/column-resizer.js" defer></script>
|
|
<script src="/static/js/app.js" defer></script>
|
|
<script src="/static/js/macro-parser.js" defer></script>
|
|
<script src="/static/js/macro-processor.js" defer></script>
|
|
</body>
|
|
|
|
</html> |