Johan Dahlin
50366b9b9c
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m29s
92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
{% load static %}
|
|
<!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>
|
|
<link rel="stylesheet" href="{% static 'file/editor_dist/assets/editor.css' %}">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Editor Styles */
|
|
.ProseMirror {
|
|
outline: none;
|
|
padding: 1rem 2rem;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ProseMirror p.is-editor-empty:first-child::before {
|
|
color: #adb5bd;
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Basic Menu Styles (will be enhanced) */
|
|
.bubble-menu {
|
|
background-color: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
padding: 0.25rem;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.bubble-menu button {
|
|
border: none;
|
|
background: none;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.bubble-menu button:hover,
|
|
.bubble-menu button.is-active {
|
|
background-color: #edf2f7;
|
|
color: #2d3748;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="flex flex-col h-full">
|
|
<!-- Configuration -->
|
|
<div id="editor-config" data-get-url="{{ get_content_url }}" data-save-url="{{ save_content_url }}" class="hidden">
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="bg-white border-b border-gray-200 px-4 py-3 flex justify-between items-center shrink-0 z-10">
|
|
<h3 class="text-sm font-medium text-gray-700 truncate mr-4">{{ file_name }}</h3>
|
|
<button id="save-btn"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold py-1.5 px-4 rounded transition">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Bubble Menu -->
|
|
<div id="bubble-menu" class="bubble-menu hidden">
|
|
<button id="btn-bold" class="font-bold">B</button>
|
|
<button id="btn-italic" class="italic">i</button>
|
|
<button id="btn-strike" class="line-through">S</button>
|
|
<button id="btn-code" class="font-mono"><></button>
|
|
</div>
|
|
|
|
<!-- Editor Container -->
|
|
<div class="flex-1 overflow-auto relative cursor-text" id="editor-container">
|
|
<div id="editor" class="prose prose-sm sm:prose lg:prose-lg max-w-none h-full"></div>
|
|
</div>
|
|
|
|
<!-- Modules -->
|
|
<script type="module" src="{% static 'file/editor_dist/assets/editor.js' %}"></script>
|
|
</body>
|
|
|
|
</html> |