Initial release

contao/config/services.yaml

@@ -0,0 +1,17 @@
+services:
+  _defaults:
+    autowire: true
+    autoconfigure: true
+
+  Contao\CoreBundle\Altcha\Altcha: '@contao.altcha'
+
+  MummertMedia\NewsSubmissionBundle\:
+    resource: ../../src/
+    exclude:
+      - ../../src/DependencyInjection/
+      - ../../src/Contao/Manager/
+      - ../../src/NewsSubmissionBundle.php
+
+  MummertMedia\NewsSubmissionBundle\Service\UploadManager:
+    arguments:
+      $projectDir: '%kernel.project_dir%'

contao/dca/tl_module.php

@@ -0,0 +1,72 @@
+<?php
+
+declare(strict_types=1);
+
+use Contao\Database;
+use Contao\StringUtil;
+
+$GLOBALS['TL_DCA']['tl_module']['palettes']['news_submission'] = '{title_legend},name,headline,type;{news_submission_legend},author,newsArchive,uploadFolder,thankYouPage,allowedTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['event_submission_confirmation'] = '{title_legend},name,headline,type;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['author'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['author'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'foreignKey' => 'tl_user.name',
+    'eval' => ['mandatory' => true, 'chosen' => true, 'includeBlankOption' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+    'relation' => ['type' => 'hasOne', 'load' => 'lazy'],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['newsArchive'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['newsArchive'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'foreignKey' => 'tl_news_archive.title',
+    'eval' => ['mandatory' => true, 'chosen' => true, 'includeBlankOption' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+    'relation' => ['type' => 'hasOne', 'load' => 'lazy'],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['uploadFolder'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['uploadFolder'],
+    'exclude' => true,
+    'inputType' => 'fileTree',
+    'eval' => ['fieldType' => 'radio', 'files' => false, 'mandatory' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'binary', 'length' => 16, 'notnull' => false],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['thankYouPage'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['thankYouPage'],
+    'exclude' => true,
+    'inputType' => 'pageTree',
+    'eval' => ['fieldType' => 'radio', 'mandatory' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['allowedTags'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['allowedTags'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'options_callback' => static function (): array {
+        $rows = Database::getInstance()
+            ->prepare("SELECT id, tag FROM tl_tags WHERE invisible='' ORDER BY tag ASC")
+            ->execute()
+            ->fetchAllAssoc();
+
+        $options = [];
+
+        foreach ($rows as $row) {
+            $options[(int) $row['id']] = (string) $row['tag'];
+        }
+
+        return $options;
+    },
+    'eval' => ['multiple' => true, 'tl_class' => 'clr'],
+    'sql' => ['type' => 'blob', 'notnull' => false],
+    'save_callback' => [
+        static function ($value): array {
+            return array_values(array_unique(array_map('intval', StringUtil::deserialize($value, true))));
+        },
+    ],
+];

contao/dca/tl_news.php

@@ -0,0 +1,115 @@
+<?php
+
+declare(strict_types=1);
+
+use Contao\CoreBundle\DataContainer\PaletteManipulator;
+use Contao\DataContainer;
+use Contao\Database;
+
+PaletteManipulator::create()
+    ->addLegend('submission_legend', 'publish_legend', 'before')
+    ->addField('submittedByMember', 'submission_legend', 'append')
+    ->addField('submittedByName', 'submission_legend', 'append')
+    ->addField('submittedByEmail', 'submission_legend', 'append')
+    ->applyToPalette('default', 'tl_news')
+    ->applyToPalette('internal', 'tl_news')
+    ->applyToPalette('article', 'tl_news')
+    ->applyToPalette('external', 'tl_news');
+
+$GLOBALS['TL_DCA']['tl_news']['config']['onsubmit_callback'][] = static function (DataContainer $dc): void {
+    $newsId = (int) ($dc->id ?? 0);
+
+    if ($newsId <= 0) {
+        return;
+    }
+
+    $database = Database::getInstance();
+
+    $memberId = (int) $database
+        ->prepare('SELECT submittedByMember FROM tl_news WHERE id=?')
+        ->limit(1)
+        ->execute($newsId)
+        ->submittedByMember;
+
+    if ($memberId <= 0) {
+        $database
+            ->prepare('UPDATE tl_news SET submittedByName=?, submittedByEmail=? WHERE id=?')
+            ->execute('', '', $newsId);
+
+        return;
+    }
+
+    $member = $database
+        ->prepare('SELECT firstname, lastname, email FROM tl_member WHERE id=?')
+        ->limit(1)
+        ->execute($memberId)
+        ->fetchAssoc();
+
+    if (false === $member || null === $member) {
+        $database
+            ->prepare('UPDATE tl_news SET submittedByName=?, submittedByEmail=? WHERE id=?')
+            ->execute('', '', $newsId);
+
+        return;
+    }
+
+    $name = trim((string) (($member['firstname'] ?? '').' '.($member['lastname'] ?? '')));
+    $email = trim((string) ($member['email'] ?? ''));
+
+    $database
+        ->prepare('UPDATE tl_news SET submittedByName=?, submittedByEmail=? WHERE id=?')
+        ->execute($name, $email, $newsId);
+};
+
+$GLOBALS['TL_DCA']['tl_news']['fields']['submittedByMember'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_news']['submittedByMember'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options_callback' => static function (): array {
+        $rows = Database::getInstance()
+            ->prepare('SELECT id, firstname, lastname FROM tl_member ORDER BY lastname ASC, firstname ASC')
+            ->execute()
+            ->fetchAllAssoc();
+
+        $options = [];
+
+        foreach ($rows as $row) {
+            $id = (int) ($row['id'] ?? 0);
+
+            if ($id <= 0) {
+                continue;
+            }
+
+            $lastName = trim((string) ($row['lastname'] ?? ''));
+            $firstName = trim((string) ($row['firstname'] ?? ''));
+            $label = trim($lastName.', '.$firstName, ' ,');
+
+            $options[$id] = '' !== $label ? $label : 'Mitglied #'.$id;
+        }
+
+        return $options;
+    },
+    'save_callback' => [
+        static function ($value): int {
+            return max(0, (int) $value);
+        },
+    ],
+    'eval' => ['chosen' => true, 'includeBlankOption' => true, 'tl_class' => 'clr w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'notnull' => false],
+];
+
+$GLOBALS['TL_DCA']['tl_news']['fields']['submittedByName'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_news']['submittedByName'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['readonly' => true, 'disabled' => true, 'tl_class' => 'w50'],
+    'sql' => "varchar(255) NOT NULL default ''",
+];
+
+$GLOBALS['TL_DCA']['tl_news']['fields']['submittedByEmail'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_news']['submittedByEmail'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['readonly' => true, 'disabled' => true, 'rgxp' => 'email', 'tl_class' => 'w50'],
+    'sql' => "varchar(255) NOT NULL default ''",
+];

contao/languages/de/modules.php

@@ -0,0 +1,6 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['FMD']['news_submission'] = ['News-Einreichung', 'Frontend-Formular zur Einreichung von News.'];
+$GLOBALS['TL_LANG']['FMD']['event_submission_confirmation'] = ['News-Einreichung Bestätigung', 'Zeigt die zuletzt eingereichten Inhalte auf der Danke-Seite erneut an.'];

contao/languages/de/tl_module.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['tl_module']['news_submission_legend'] = 'News-Einreichung';
+$GLOBALS['TL_LANG']['tl_module']['author'] = ['Autor', 'Backend-Benutzer, der als Autor im News-Datensatz gesetzt wird.'];
+$GLOBALS['TL_LANG']['tl_module']['newsArchive'] = ['News-Archiv', 'Archiv, in dem neue Entwürfe angelegt werden.'];
+$GLOBALS['TL_LANG']['tl_module']['uploadFolder'] = ['Upload-Ordner', 'Basisordner für Bild-Uploads. Der Jahresordner wird automatisch darunter erstellt.'];
+$GLOBALS['TL_LANG']['tl_module']['thankYouPage'] = ['Danke-Seite', 'Seite, auf die nach erfolgreicher Einreichung weitergeleitet wird.'];
+$GLOBALS['TL_LANG']['tl_module']['allowedTags'] = ['Erlaubte Tags', 'Diese vorhandenen Tags stehen im Frontend-Formular zur Auswahl bereit.'];

contao/languages/de/tl_news.php

@@ -0,0 +1,8 @@
+<?php
+
+declare(strict_types=1);
+
+$GLOBALS['TL_LANG']['tl_news']['submission_legend'] = 'Einreichungsdaten';
+$GLOBALS['TL_LANG']['tl_news']['submittedByMember'] = ['Eingereicht von (Mitglied)', 'Mitgliedszuordnung (UUID) bei eingeloggter Einreichung.'];
+$GLOBALS['TL_LANG']['tl_news']['submittedByName'] = ['Öffentlicher Name', 'Optionaler Name bei anonymer Einreichung.'];
+$GLOBALS['TL_LANG']['tl_news']['submittedByEmail'] = ['Öffentliche E-Mail', 'Optionale E-Mail bei anonymer Einreichung.'];

contao/templates/frontend/event_submission_confirmation.html.twig

@@ -0,0 +1,57 @@
+{% extends "@Contao/frontend_module/_base.html.twig" %}
+
+{% block content %}
+  {% if not entry %}
+    <p>Es liegt aktuell keine Einreichung zur Bestätigung vor.</p>
+  {% else %}
+    <div class="widget">
+      <label for="ns-confirm-headline">Überschrift</label>
+      <input id="ns-confirm-headline" type="text" value="{{ entry.headline }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-subheadline">Unterüberschrift</label>
+      <input id="ns-confirm-subheadline" type="text" value="{{ entry.subheadline }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-link">Externer Link</label>
+      <input id="ns-confirm-link" type="text" value="{{ entry.externalLink }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-tags">Tags</label>
+      <input id="ns-confirm-tags" type="text" value="{{ entry.tagList }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-text">Artikeltext</label>
+      <div id="ns-confirm-text">{{ entry.articleText|raw }}</div>
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-add-image">Bild hochgeladen</label>
+      <input id="ns-confirm-add-image" type="text" value="{{ entry.addImage ? 'Ja' : 'Nein' }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-photographer">Fotograf/Urheber</label>
+      <input id="ns-confirm-photographer" type="text" value="{{ entry.photographer }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-alt">Alternative Bildbeschreibung</label>
+      <input id="ns-confirm-alt" type="text" value="{{ entry.altText }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-name">submittedByName</label>
+      <input id="ns-confirm-name" type="text" value="{{ entry.submittedByName }}">
+    </div>
+
+    <div class="widget">
+      <label for="ns-confirm-email">submittedByEmail</label>
+      <input id="ns-confirm-email" type="text" value="{{ entry.submittedByEmail }}">
+    </div>
+  {% endif %}
+{% endblock %}

contao/templates/frontend/news_submission.html.twig

@@ -0,0 +1,509 @@
+{% extends "@Contao/frontend_module/_base.html.twig" %}
+
+{% block content %}
+  <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
+  <style>
+    .news-editor-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: .5rem;
+      margin: .5rem 0;
+    }
+
+    .news-editor-toolbar button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 2.2rem;
+      padding: .4rem .65rem;
+      border: 1px solid #cbd5e1;
+      border-radius: .375rem;
+      background: #f8fafc;
+      color: #1f2937;
+      font-size: .9rem;
+      font-weight: 600;
+      cursor: pointer;
+      line-height: 1;
+    }
+
+    .news-editor-toolbar button img {
+      width: 1rem;
+      height: 1rem;
+      display: block;
+      filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
+      transition: filter .15s ease;
+    }
+
+    .news-editor-toolbar button:hover {
+      background: #eef2ff;
+      border-color: #a5b4fc;
+    }
+
+    .news-editor-toolbar button:hover img {
+      filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
+    }
+
+    .news-editor-toolbar button.is-active {
+      background: #4f46e5;
+      border-color: #4338ca;
+      color: #fff;
+    }
+
+    .news-editor-toolbar button.is-active img {
+      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
+    }
+
+    .news-editor-toolbar button:disabled {
+      opacity: .45;
+      cursor: not-allowed;
+      background: #f1f5f9;
+      border-color: #d1d5db;
+      color: #6b7280;
+    }
+
+    .news-editor-toolbar button:disabled img {
+      filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
+    }
+
+    .news-editor {
+      border: 1px solid #cbd5e1;
+      border-radius: .375rem;
+      padding: .75rem;
+      min-height: 14rem;
+      background: #fff;
+    }
+
+    .news-editor .ProseMirror {
+      outline: none;
+      min-height: 12rem;
+    }
+
+    .news-editor-counter {
+      margin-top: .5rem;
+      font-size: .85rem;
+      color: #475569;
+    }
+
+    .news-editor-counter.is-over-limit {
+      color: #b91c1c;
+      font-weight: 600;
+    }
+
+    .news-editor-shortcuts {
+      margin-top: .6rem;
+      font-size: .85rem;
+      color: #334155;
+    }
+
+    .news-editor-shortcuts ul {
+      margin: .25rem 0 0;
+      padding-left: 1.1rem;
+    }
+
+    .news-error-summary {
+      margin: 0 0 1rem;
+      padding: .75rem 1rem;
+      border: 1px solid #dc2626;
+      border-radius: .375rem;
+      background: #fef2f2;
+      color: #7f1d1d;
+    }
+
+    .news-error-summary ul {
+      margin: .4rem 0 0;
+      padding-left: 1.15rem;
+    }
+
+    .news-form-hint {
+      margin: 0 0 .85rem;
+      color: #334155;
+      font-size: .9rem;
+    }
+
+    .ns-tag-switches {
+      display: grid;
+      gap: .5rem;
+      margin-top: .35rem;
+    }
+
+    .ns-tag-switch-item {
+      display: flex;
+      align-items: center;
+      gap: .65rem;
+    }
+
+    .ns-tag-switch-item label {
+      margin: 0;
+    }
+
+    .visually-hidden {
+      position: absolute !important;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+      white-space: nowrap;
+    }
+
+    .ns-tag-switch-input {
+      appearance: none;
+      width: 2.5rem;
+      height: 1.4rem;
+      border-radius: 999px;
+      border: 1px solid #94a3b8;
+      background: #e2e8f0;
+      position: relative;
+      cursor: pointer;
+      transition: background-color .15s ease;
+    }
+
+    .ns-tag-switch-input::after {
+      content: '';
+      position: absolute;
+      top: .1rem;
+      left: .12rem;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 999px;
+      background: #fff;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+      transition: transform .15s ease;
+    }
+
+    .ns-tag-switch-input:checked {
+      background: #4f46e5;
+      border-color: #4338ca;
+    }
+
+    .ns-tag-switch-input:checked::after {
+      transform: translateX(1.05rem);
+    }
+
+    .ns-tag-switch-input:focus-visible {
+      outline: 2px solid #1d4ed8;
+      outline-offset: 2px;
+    }
+  </style>
+
+  {% if errorMessage %}
+    <p role="alert">{{ errorMessage }}</p>
+  {% endif %}
+
+  {{ form_start(form, {
+    action: app.request.uri,
+    attr: {
+      enctype: 'multipart/form-data',
+      id: 'news-submission-form',
+      'aria-describedby': 'news-form-hint'
+    }
+  }) }}
+    <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+
+    <p id="news-form-hint" class="news-form-hint">Pflichtfelder sind mit einem Stern markiert.</p>
+
+    {% if form.vars.submitted and not form.vars.valid %}
+      <div class="news-error-summary" role="alert" aria-labelledby="news-error-summary-title" tabindex="-1">
+        <strong id="news-error-summary-title">Bitte korrigieren Sie die markierten Felder:</strong>
+        <ul>
+          {% for field in form %}
+            {% if field.vars.errors|length > 0 and field.vars.id is not empty %}
+              <li>
+                <a href="#{{ field.vars.id }}">{{ field.vars.label|default(field.vars.name) }}</a>
+              </li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+    {{ form_row(form.headline, { attr: { autocomplete: 'off' } }) }}
+    {{ form_row(form.subheadline, { attr: { autocomplete: 'off' } }) }}
+    {{ form_row(form.externalLink, { attr: { autocomplete: 'url', inputmode: 'url' } }) }}
+
+    <fieldset class="widget" aria-describedby="news-tags-help news-tags-errors">
+      <legend>{{ form.tags.vars.label }}</legend>
+      <p id="news-tags-help" class="news-form-hint">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
+      <div class="ns-tag-switches">
+        {% for tagField in form.tags %}
+          {% set tagLabelId = tagField.vars.id ~ '-label' %}
+          <div class="ns-tag-switch-item">
+            {{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
+            {{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
+            <span
+              id="{{ tagField.vars.id }}-state"
+              class="visually-hidden"
+              data-switch-state-for="{{ tagField.vars.id }}"
+            >
+              {{ tagField.vars.checked ? 'Ein' : 'Aus' }}
+            </span>
+          </div>
+        {% endfor %}
+      </div>
+      <div id="news-tags-errors">{{ form_errors(form.tags) }}</div>
+    </fieldset>
+
+    <div class="widget">
+      {{ form_label(form.articleText, null, { label_attr: { id: form.articleText.vars.id ~ '-label' } }) }}
+
+      <div
+        class="news-editor-toolbar"
+        data-news-editor-toolbar="{{ form.articleText.vars.id }}"
+        role="toolbar"
+        aria-label="Formatierungswerkzeuge Artikeltext"
+        aria-orientation="horizontal"
+        aria-describedby="{{ form.articleText.vars.id }}-shortcuts"
+        aria-controls="{{ form.articleText.vars.id }}-editor"
+      >
+        <button type="button" data-action="paragraph" title="Absatz">
+          <img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Absatz</span>
+        </button>
+        <button type="button" data-action="h2" title="Überschrift H2">
+          <img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">H2</span>
+        </button>
+        <button type="button" data-action="h3" title="Überschrift H3">
+          <img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">H3</span>
+        </button>
+        <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
+          <img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Fett</span>
+        </button>
+        <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
+          <img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Kursiv</span>
+        </button>
+        <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
+          <img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Unterstrichen</span>
+        </button>
+        <button type="button" data-action="bulletList" title="Liste">
+          <img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Liste</span>
+        </button>
+        <button type="button" data-action="orderedList" title="Nummerierte Liste">
+          <img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Nummerierte Liste</span>
+        </button>
+        <button type="button" data-action="indent" title="Einzug vergrößern">
+          <img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Einzug vergrößern</span>
+        </button>
+        <button type="button" data-action="outdent" title="Einzug verkleinern">
+          <img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Einzug verkleinern</span>
+        </button>
+        <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
+          <img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Rückgängig</span>
+        </button>
+        <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
+          <img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
+          <span class="visually-hidden">Wiederholen</span>
+        </button>
+      </div>
+
+      <div id="{{ form.articleText.vars.id }}-shortcuts" class="news-editor-shortcuts">
+        <strong>Tastaturkürzel:</strong>
+        <ul>
+          <li><span aria-hidden="true">Strg/Cmd+B</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus B</span> – Fett</li>
+          <li><span aria-hidden="true">Strg/Cmd+I</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus I</span> – Kursiv</li>
+          <li><span aria-hidden="true">Strg/Cmd+U</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus U</span> – Unterstrichen</li>
+          <li><span aria-hidden="true">Strg/Cmd+Z</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus Z</span> – Rückgängig</li>
+          <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus Umschalt plus Z</span> – Wiederholen</li>
+          <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
+        </ul>
+      </div>
+
+      <div
+        id="{{ form.articleText.vars.id }}-editor"
+        class="news-editor"
+        data-news-editor="tiptap"
+        data-textarea-id="{{ form.articleText.vars.id }}"
+        role="textbox"
+        aria-multiline="true"
+        aria-labelledby="{{ form.articleText.vars.id }}-label"
+        aria-describedby="{{ form.articleText.vars.id }}-shortcuts {{ form.articleText.vars.id }}-counter {{ form.articleText.vars.id }}-errors"
+      ></div>
+      <div id="{{ form.articleText.vars.id }}-counter" class="news-editor-counter" data-news-editor-counter-for="{{ form.articleText.vars.id }}" role="status" aria-live="polite"></div>
+      {{ form_widget(form.articleText, { attr: { class: 'js-news-article-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
+      <div id="{{ form.articleText.vars.id }}-errors">{{ form_errors(form.articleText) }}</div>
+    </div>
+
+    <div class="widget" aria-describedby="news-image-toggle-help {{ form.addImage.vars.id }}-state">
+      <div class="ns-tag-switch-item">
+        {{ form_widget(form.addImage, { attr: {
+          'aria-describedby': form.addImage.vars.id ~ '-state',
+          'aria-controls': 'news-image-fields',
+          'aria-expanded': form.addImage.vars.checked ? 'true' : 'false',
+          'aria-labelledby': form.addImage.vars.id ~ '-label'
+        } }) }}
+        {{ form_label(form.addImage, null, { label_attr: { id: form.addImage.vars.id ~ '-label' } }) }}
+        <span
+          id="{{ form.addImage.vars.id }}-state"
+          class="visually-hidden"
+          data-switch-state-for="{{ form.addImage.vars.id }}"
+        >
+          {{ form.addImage.vars.checked ? 'Ein' : 'Aus' }}
+        </span>
+      </div>
+      <p id="news-image-toggle-help" class="news-form-hint">Wenn aktiviert, werden Felder für Bild, Fotograf und Alternativtext eingeblendet.</p>
+      {{ form_errors(form.addImage) }}
+    </div>
+
+    <div id="news-image-fields" style="display:none;" hidden aria-hidden="true" role="group" aria-label="Bildangaben" aria-live="polite">
+      {{ form_row(form.imageUpload) }}
+      {{ form_row(form.imageToken) }}
+      {{ form_row(form.photographer) }}
+      {{ form_row(form.altText) }}
+    </div>
+
+    {% if form.publicName is defined %}
+      {{ form_row(form.publicName) }}
+    {% endif %}
+
+    {% if form.publicEmail is defined %}
+      {{ form_row(form.publicEmail) }}
+    {% endif %}
+
+    {{ form_row(form.honeypot) }}
+
+    {% if showAltcha %}
+      <div class="widget">
+        <label for="ns-altcha" id="ns-altcha-label">Sicherheitsprüfung</label>
+        <altcha-widget
+          id="ns-altcha"
+          name="altcha"
+          challengeurl="{{ altchaChallengeUrl }}"
+          maxnumber="{{ altchaMaxNumber }}"
+          aria-labelledby="ns-altcha-label"
+        ></altcha-widget>
+      </div>
+      <script type="module" src="https://cdn.jsdelivr.net/npm/altcha/dist/altcha.min.js"></script>
+    {% endif %}
+
+    <button type="submit">News einreichen</button>
+  {{ form_end(form) }}
+
+  <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
+  <script type="module" src="{{ asset('bundles/newssubmission/editor.js') }}?v=9"></script>
+  <script>
+    (function () {
+      const errorSummary = document.querySelector('.news-error-summary');
+      const addImage = document.getElementById('{{ form.addImage.vars.id }}');
+      const imageWrap = document.getElementById('news-image-fields');
+      const photographer = document.getElementById('{{ form.photographer.vars.id }}');
+      const fileInput = document.querySelector('input.js-news-filepond');
+      const tokenInput = document.getElementById('{{ form.imageToken.vars.id }}');
+      const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
+
+      if (errorSummary) {
+        requestAnimationFrame(() => {
+          errorSummary.focus();
+        });
+      }
+
+      const syncSwitchState = (input) => {
+        const isChecked = !!input.checked;
+        input.setAttribute('aria-checked', isChecked ? 'true' : 'false');
+
+        const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);
+
+        if (stateNode) {
+          stateNode.textContent = isChecked ? 'Ein' : 'Aus';
+        }
+      };
+
+      tagSwitches.forEach((input) => {
+        syncSwitchState(input);
+        input.addEventListener('change', () => syncSwitchState(input));
+      });
+
+      const updateImageState = () => {
+        if (!addImage || !imageWrap) {
+          return;
+        }
+
+        const active = addImage.checked;
+        addImage.setAttribute('aria-checked', active ? 'true' : 'false');
+        addImage.setAttribute('aria-expanded', active ? 'true' : 'false');
+
+        const addImageStateNode = document.querySelector(`[data-switch-state-for="${addImage.id}"]`);
+
+        if (addImageStateNode) {
+          addImageStateNode.textContent = active ? 'Ein' : 'Aus';
+        }
+
+        imageWrap.style.display = active ? '' : 'none';
+        imageWrap.hidden = !active;
+        imageWrap.setAttribute('aria-hidden', active ? 'false' : 'true');
+
+        if (!active && imageWrap.contains(document.activeElement)) {
+          addImage.focus();
+        }
+
+        if (photographer) {
+          photographer.required = active;
+        }
+
+        if (!active && tokenInput) {
+          tokenInput.value = '';
+        }
+      };
+
+      if (addImage) {
+        addImage.addEventListener('change', updateImageState);
+        updateImageState();
+      }
+
+      if (fileInput && tokenInput && typeof FilePond !== 'undefined') {
+        const pond = FilePond.create(fileInput, {
+          allowMultiple: false,
+          instantUpload: true,
+          acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp'],
+          maxFileSize: '6MB',
+          credits: false,
+          server: {
+            process: {
+              url: '{{ uploadProcessUrl }}',
+              method: 'POST',
+              ondata: (formData) => {
+                formData.append('REQUEST_TOKEN', '{{ requestToken }}');
+                return formData;
+              },
+              headers: {
+                'X-CSRF-Token': '{{ requestToken }}'
+              },
+              onload: (response) => {
+                tokenInput.value = response;
+                return response;
+              }
+            },
+            revert: {
+              url: '{{ uploadRevertUrl }}',
+              method: 'POST',
+              headers: {
+                'X-CSRF-Token': '{{ requestToken }}'
+              },
+              onload: () => {
+                tokenInput.value = '';
+              }
+            }
+          }
+        });
+
+        if (addImage) {
+          addImage.addEventListener('change', () => {
+            if (!addImage.checked) {
+              pond.removeFiles();
+            }
+          });
+        }
+      }
+    })();
+  </script>
+{% endblock %}