You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
12 KiB
292 lines
12 KiB
{% extends 'base.html.twig' %} |
|
|
|
{% form_theme form _self 'pages/_advanced_metadata.html.twig' %} |
|
|
|
{% block quill_widget %} |
|
<div {{ stimulus_controller('publishing--quill') }} class="quill" data-id="{{ id }}" > |
|
<div id="editor"> |
|
{{ value|raw }} |
|
</div> |
|
<input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" /> |
|
</div> |
|
{% endblock %} |
|
|
|
{% block header %} |
|
<header class="editor-header" data-controller="editor--header" data-editor--header-target="header"> |
|
<div class="editor-header-left"> |
|
<a href="{{ path('home') }}" class="btn">← Back</a> |
|
{# If not create new, show btn for 'Create new' #} |
|
{% if article.id %} |
|
<a href="{{ path('editor-create') }}" class="btn btn-secondary"> |
|
Create new |
|
</a> |
|
{% endif %} |
|
<div class="editor-title"> |
|
{{ article.title|default('New article') }} |
|
</div> |
|
</div> |
|
|
|
<div class="editor-header-right"> |
|
{# Status indicator #} |
|
<span class="editor-status text-muted" data-editor--layout-target="status"> |
|
{% if article.id %}Editing{% else %}New article{% endif %} |
|
</span> |
|
<button type="button" class="btn btn-secondary" data-action="editor--header#saveDraft"> |
|
Save draft |
|
</button> |
|
<button type="button" class="btn btn-primary" data-action="editor--header#publish"> |
|
Publish |
|
</button> |
|
</div> |
|
</header> |
|
{% endblock %} |
|
|
|
{% block layout %} |
|
<main data-controller="editor--layout" data-article-id="{{ article.id|default('') }}"> |
|
<div class="editor-main"> |
|
{# Insert the article list sidebar as the first grid column #} |
|
{% include 'editor/panels/_articlelist.html.twig' with { |
|
readingLists: readingLists is defined ? readingLists : [], |
|
recentArticles: recentArticles is defined ? recentArticles : [], |
|
drafts: drafts is defined ? drafts : [] |
|
} %} |
|
{# Center editor area (middle grid column) #} |
|
<div class="editor-center"> |
|
<div class="editor-center-tabs"> |
|
<button |
|
type="button" |
|
class="editor-tab is-active" |
|
data-editor--layout-target="modeTab" |
|
data-mode="edit" |
|
data-action="editor--layout#switchMode" |
|
> |
|
Editor |
|
</button> |
|
<button |
|
type="button" |
|
class="editor-tab" |
|
data-editor--layout-target="modeTab" |
|
data-mode="markdown" |
|
data-action="editor--layout#switchMode" |
|
> |
|
Markdown |
|
</button> |
|
<button |
|
type="button" |
|
class="editor-tab" |
|
data-editor--layout-target="modeTab" |
|
data-mode="json" |
|
data-action="editor--layout#switchMode" |
|
> |
|
JSON |
|
</button> |
|
<button |
|
type="button" |
|
class="editor-tab" |
|
data-editor--layout-target="modeTab" |
|
data-mode="preview" |
|
data-action="editor--layout#switchMode" |
|
> |
|
Preview |
|
</button> |
|
</div> |
|
|
|
<div class="editor-center-content"> |
|
{{ form_start(form) }} |
|
{# Hidden fields for content delta and NMD #} |
|
{{ form_widget(form.contentDelta) }} |
|
{{ form_widget(form.contentNMD) }} |
|
|
|
<div |
|
class="editor-pane editor-pane--edit" |
|
data-editor--layout-target="editPane" |
|
> |
|
{# Title field at top of editor #} |
|
<div class="editor-title-input"> |
|
{{ form_row(form.title, { |
|
'label': false, |
|
'attr': {'placeholder': 'Article title', 'class': 'form-control editor-title-field'} |
|
}) }} |
|
</div> |
|
|
|
{# QuillJS editor container, now using content_html #} |
|
{{ form_row(form.content_html, {'label': false}) }} |
|
|
|
{# Hidden field for draft status - controlled by Save Draft / Publish buttons #} |
|
<div style="display: none;"> |
|
{{ form_widget(form.isDraft) }} |
|
</div> |
|
|
|
{# Mobile action buttons at bottom #} |
|
<div class="editor-mobile-actions"> |
|
<button type="button" class="btn btn-secondary btn-lg" data-action="editor--layout#saveDraft"> |
|
Save draft |
|
</button> |
|
<button type="button" class="btn btn-primary btn-lg" data-action="editor--layout#publish"> |
|
Publish |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div |
|
class="editor-pane editor-pane--markdown is-hidden" |
|
data-editor--layout-target="markdownPane" |
|
data-controller="editor--markdown-sync" |
|
> |
|
{# Markdown editor #} |
|
<div class="markdown-editor-wrapper"> |
|
<div class="editor-title-input"> |
|
<input |
|
type="text" |
|
class="form-control editor-title-field" |
|
placeholder="Article title" |
|
data-editor--layout-target="markdownTitle" |
|
readonly |
|
/> |
|
</div> |
|
{{ form_row(form.content, {'label': false, 'attr': {'class': 'form-control editor-md-field'}}) }} |
|
<pre class="mt-2" style="display:none"></pre> |
|
{# JS should sync changes in content to content_html (Quill) #} |
|
</div> |
|
</div> |
|
|
|
<div |
|
class="editor-pane editor-pane--json is-hidden" |
|
data-editor--layout-target="jsonPane" |
|
> |
|
{% include 'editor/panels/_json.html.twig' %} |
|
</div> |
|
|
|
<div |
|
class="editor-pane editor-pane--preview is-hidden" |
|
data-editor--layout-target="previewPane" |
|
> |
|
<div class="card preview-container"> |
|
<div class="card-header"> |
|
<h1 class="card-title preview-title" data-editor--layout-target="previewTitle"> |
|
{{ article.title|default('Article title') }} |
|
</h1> |
|
<div class="byline"> |
|
<span> |
|
By <span class="preview-author" data-editor--layout-target="previewAuthor">...</span> |
|
</span> |
|
<span> |
|
<small class="preview-date" data-editor--layout-target="previewDate">Date</small> |
|
</span> |
|
</div> |
|
</div> |
|
<div class="card-body"> |
|
<div class="lede preview-summary" data-editor--layout-target="previewSummary"></div> |
|
<div class="article__image preview-image-wrap"> |
|
<img class="preview-image" data-editor--layout-target="previewImage" src="" alt="Cover image preview" style="display:none;"/> |
|
<div class="preview-image-placeholder" data-editor--layout-target="previewImagePlaceholder" style="display:none;"> |
|
<span>No cover image</span> |
|
</div> |
|
</div> |
|
<div class="article-main" data-editor--layout-target="previewBody"> |
|
{# Filled by JS #} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button type="submit" name="_action" value="save_draft" style="display:none;" data-editor--layout-target="saveDraftSubmit"></button> |
|
<button type="submit" name="_action" value="publish" style="display:none;" data-editor--layout-target="publishSubmit"></button> |
|
</div> |
|
</div> |
|
{# Right sidebar (last grid column) #} |
|
<aside class="editor-sidebar" data-controller="editor--panels"> |
|
<div class="editor-sidebar-tabs"> |
|
<button |
|
type="button" |
|
class="editor-sidebar-tab is-active" |
|
data-editor--panels-target="tab" |
|
data-panel="metadata" |
|
data-action="editor--panels#switch" |
|
> |
|
Metadata |
|
</button> |
|
{# <button#} |
|
{# type="button"#} |
|
{# class="editor-sidebar-tab"#} |
|
{# data-editor--panels-target="tab"#} |
|
{# data-panel="advanced"#} |
|
{# data-action="editor--panels#switch"#} |
|
{# >#} |
|
{# Advanced#} |
|
{# </button>#} |
|
<button |
|
type="button" |
|
class="editor-sidebar-tab" |
|
data-editor--panels-target="tab" |
|
data-panel="relays" |
|
data-action="editor--panels#switch" |
|
> |
|
Relays |
|
</button> |
|
{# Media tab temporarily hidden - will be redesigned later |
|
<button |
|
type="button" |
|
class="editor-sidebar-tab" |
|
data-editor--panels-target="tab" |
|
data-panel="media" |
|
data-action="editor--panels#switch" |
|
> |
|
Media |
|
</button> |
|
#} |
|
</div> |
|
|
|
<section class="editor-sidebar-panels"> |
|
<div |
|
class="editor-panel" |
|
data-editor--panels-target="panel" |
|
data-panel="metadata" |
|
> |
|
{% include 'editor/panels/_metadata.html.twig' with { form: form } %} |
|
</div> |
|
|
|
<div |
|
class="editor-panel is-hidden" |
|
data-editor--panels-target="panel" |
|
data-panel="advanced" |
|
> |
|
{% include 'editor/panels/_advanced.html.twig' with { form: form } %} |
|
</div> |
|
|
|
<div |
|
class="editor-panel is-hidden" |
|
data-editor--panels-target="panel" |
|
data-panel="relays" |
|
> |
|
{% include 'editor/panels/_relays.html.twig' with { form: form } %} |
|
</div> |
|
|
|
{# Media panel temporarily hidden - will be redesigned later |
|
<div |
|
class="editor-panel is-hidden" |
|
data-editor--panels-target="panel" |
|
data-panel="media" |
|
> |
|
{% include 'editor/panels/_media.html.twig' %} |
|
</div> |
|
#} |
|
</section> |
|
</aside> |
|
|
|
{{ form_end(form) }} |
|
</div> |
|
|
|
{# Hidden container for Nostr publishing (no JSON textarea, uses canonical panel) #} |
|
<div style="display: none;" {{ stimulus_controller('nostr--nostr-publish', { |
|
publishUrl: path('api-article-publish'), |
|
pubkey: app.user ? app.user.userIdentifier|toHex : '<pubkey>' |
|
}) }} data-nostr--nostr-publish-target="form" data-slug="{{ article.slug|default('') }}"> |
|
<div data-nostr--nostr-publish-target="status"></div> |
|
<button style="display: none;" data-nostr--nostr-publish-target="publishButton"></button> |
|
</div> |
|
</main> |
|
{% endblock %} |
|
|
|
{% block footer %} |
|
{% endblock %}
|
|
|