google-labs-jules[bot]
144bfb2ba7
This commit introduces a complete overhaul of the application, replacing the previous simple Markdown editor with a powerful, Google Docs-style editor with a live preview and ODT export. The new features include: - A new three-pane UI with a Markdown editor, a live preview, and a styles panel. - A powerful styling engine that allows users to create, edit, and apply custom styles to the document. - A persistent storage mechanism for styles using a JSON file. - Support for advanced Markdown features, including code blocks and blockquotes. - A hyperlinked table of contents that is automatically generated from the headings in the document. - Auto-captioning for tables and images. - Pagination for large tables. - Secure image embedding with a domain whitelist and size limits to prevent SSRF and DoS attacks. - An improved live preview that correctly renders multi-line Markdown elements.
70 lines
3.3 KiB
HTML
70 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GhostEditor</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="main-container">
|
|
<div class="editor-pane">
|
|
<div class="toolbar">
|
|
<button id="bold-button" title="Bold"><i class="fas fa-bold"></i></button>
|
|
<button id="italic-button" title="Italic"><i class="fas fa-italic"></i></button>
|
|
<button id="h1-button" title="Heading 1">H1</button>
|
|
<button id="h2-button" title="Heading 2">H2</button>
|
|
<button id="add-toc" title="Insert TOC"><i class="fas fa-list-ul"></i></button>
|
|
<button id="export-odt" title="Export as ODT"><i class="fas fa-file-export"></i></button>
|
|
</div>
|
|
<textarea id="markdown-input" class="markdown-input"></textarea>
|
|
</div>
|
|
<div class="preview-pane">
|
|
<div id="preview-output" class="preview-output"></div>
|
|
</div>
|
|
<div class="styles-pane">
|
|
<h2>Styles</h2>
|
|
<div id="styles-list"></div>
|
|
<button id="add-style">Add New Style</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="style-editor-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-button">×</span>
|
|
<h2 id="style-modal-title">Edit Style</h2>
|
|
<form id="style-editor-form">
|
|
<label for="style-name-input">Style Name:</label>
|
|
<input type="text" id="style-name-input">
|
|
<label for="font-family-input">Font Family:</label>
|
|
<input type="text" id="font-family-input">
|
|
<label for="font-size-input">Font Size:</label>
|
|
<input type="text" id="font-size-input">
|
|
<label for="font-weight-input">Font Weight:</label>
|
|
<input type="text" id="font-weight-input">
|
|
<label for="font-style-input">Font Style:</label>
|
|
<input type="text" id="font-style-input">
|
|
<label for="text-align-input">Text Align:</label>
|
|
<input type="text" id="text-align-input">
|
|
<label for="color-input">Color:</label>
|
|
<input type="text" id="color-input">
|
|
<label for="background-color-input">Background Color:</label>
|
|
<input type="text" id="background-color-input">
|
|
<label for="padding-input">Padding:</label>
|
|
<input type="text" id="padding-input">
|
|
<label for="border-left-input">Border Left:</label>
|
|
<input type="text" id="border-left-input">
|
|
<label for="padding-left-input">Padding Left:</label>
|
|
<input type="text" id="padding-left-input">
|
|
<label for="margin-bottom-input">Margin Bottom:</label>
|
|
<input type="text" id="margin-bottom-input">
|
|
<button type="submit">Save Style</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html>
|