sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate Quill rich text editor in admin templates

Browse Source 
- Add Quill editor to content-page-edit.html
- Add Quill editor to vendor-product-edit.html
- Add Quill snow theme CSS
- Update background-tasks.html and platform-homepage.html templates

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-13 20:37:54 +01:00
parent 29a3bf3989
commit 013d8e3d10
5 changed files with 165 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/templates/admin/content-page-edit.html
View File

@@ -3,11 +3,20 @@
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
{% from 'shared/macros/headers.html' import page_header_flex, back_button, action_button %}
{% from 'shared/macros/inputs.html' import number_stepper %}
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
{% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
{% block alpine_data %}contentPageEditor({{ page_id if page_id else 'null' }}){% endblock %}
{% block quill_css %}
{{ quill_css() }}
{% endblock %}
{% block quill_script %}
{{ quill_js() }}
{% endblock %}
{% block content %}
{# Dynamic title/subtitle and save button text based on create vs edit mode #}
<div class="flex items-center justify-between my-6">
@@ -133,17 +142,31 @@
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Content <span class="text-red-500">*</span>
</label>
<textarea
x-model="form.content"
required
rows="12"
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
placeholder="<h2>Your content here...</h2>"
></textarea>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
<span x-show="form.content_format === 'html'">Enter HTML content. Basic HTML tags are supported.</span>
<span x-show="form.content_format === 'markdown'">Enter Markdown content. Will be converted to HTML.</span>
</p>
<!-- Rich Text Editor for HTML format -->
<div x-show="form.content_format === 'html'" x-cloak>
{{ quill_editor(
id='content-editor',
model='form.content',
placeholder='Write your content here...',
min_height='300px',
toolbar='full',
help_text='Use the toolbar to format your content. Supports headings, lists, links, images, and more.'
) }}
</div>
<!-- Plain textarea for Markdown format -->
<div x-show="form.content_format === 'markdown'" x-cloak>
<textarea
x-model="form.content"
rows="12"
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
placeholder="# Your heading here&#10;&#10;Write your **markdown** content..."
></textarea>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
Enter Markdown content. Will be converted to HTML when displayed.
</p>
</div>
</div>
</div>