From 141e310320f6fa219f8b1214c415b5d24755d8f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Mummert?= <juergen@MacBookPro.fritz.box>
Date: Sun, 1 Mar 2026 12:54:36 +0100
Subject: [PATCH] Add TipTap editor and switch tags to event/organization edit

---
 .../templates/frontend/event_edit.html.twig   | 311 ++++++++++++++++-
 .../frontend/organization_edit.html.twig      | 321 ++++++++++++++++-
 public/editor-fallback.js                     | 112 ++++++
 public/editor.js                              | 330 ++++++++++++++++++
 .../Frontend/EventEditController.php          |   5 +-
 src/Form/EventType.php                        |  16 +-
 src/Form/OrganizationType.php                 |  13 +-
 7 files changed, 1062 insertions(+), 46 deletions(-)
 create mode 100644 public/editor-fallback.js
 create mode 100644 public/editor.js

diff --git a/contao/templates/frontend/event_edit.html.twig b/contao/templates/frontend/event_edit.html.twig
index ea5e1e4..6a34c8b 100644
--- a/contao/templates/frontend/event_edit.html.twig
+++ b/contao/templates/frontend/event_edit.html.twig
@@ -11,6 +11,170 @@
     <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
     <style>
+      .module-event-edit .event-editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        margin: .5rem 0;
+      }
+
+      .module-event-edit .event-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;
+      }
+
+      .module-event-edit .event-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;
+      }
+
+      .module-event-edit .event-editor-toolbar button:hover {
+        background: #eef2ff;
+        border-color: #a5b4fc;
+      }
+
+      .module-event-edit .event-editor-toolbar button:hover img {
+        filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
+      }
+
+      .module-event-edit .event-editor-toolbar button.is-active {
+        background: #4f46e5;
+        border-color: #4338ca;
+        color: #fff;
+      }
+
+      .module-event-edit .event-editor-toolbar button.is-active img {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
+      }
+
+      .module-event-edit .event-editor-toolbar button:disabled {
+        opacity: .45;
+        cursor: not-allowed;
+        background: #f1f5f9;
+        border-color: #d1d5db;
+        color: #6b7280;
+      }
+
+      .module-event-edit .event-editor-toolbar button:disabled img {
+        filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
+      }
+
+      .module-event-edit .event-editor {
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        padding: .75rem;
+        min-height: 14rem;
+        background: #fff;
+      }
+
+      .module-event-edit .event-editor .ProseMirror {
+        outline: none;
+        min-height: 12rem;
+      }
+
+      .module-event-edit .event-editor-counter {
+        margin-top: .5rem;
+        font-size: .85rem;
+        color: #475569;
+      }
+
+      .module-event-edit .event-editor-counter.is-over-limit {
+        color: #b91c1c;
+        font-weight: 600;
+      }
+
+      .module-event-edit .event-editor-shortcuts {
+        margin-top: .6rem;
+        font-size: .85rem;
+        color: #334155;
+      }
+
+      .module-event-edit .event-editor-shortcuts ul {
+        margin: .25rem 0 0;
+        padding-left: 1.1rem;
+      }
+
+      .module-event-edit .ns-tag-switches {
+        display: grid;
+        gap: .5rem;
+        margin-top: .35rem;
+      }
+
+      .module-event-edit .ns-tag-switch-item {
+        display: flex;
+        align-items: center;
+        gap: .65rem;
+      }
+
+      .module-event-edit .ns-tag-switch-item label {
+        margin: 0;
+      }
+
+      .module-event-edit .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;
+      }
+
+      .module-event-edit .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;
+      }
+
+      .module-event-edit .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;
+      }
+
+      .module-event-edit .ns-tag-switch-input:checked {
+        background: #4f46e5;
+        border-color: #4338ca;
+      }
+
+      .module-event-edit .ns-tag-switch-input:checked::after {
+        transform: translateX(1.05rem);
+      }
+
+      .module-event-edit .ns-tag-switch-input:focus-visible {
+        outline: 2px solid #1d4ed8;
+        outline-offset: 2px;
+      }
+
       .module-event-edit .filepond--root {
         width: 400px;
         height: 600px;
@@ -60,6 +224,8 @@
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
+    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -77,9 +243,119 @@
         {{ form_row(form.organization_ids) }}
       {% endif %}
       {{ form_row(form.location_id) }}
-      {{ form_row(form.tags) }}
-      {{ form_row(form.teaser) }}
-      {{ form_row(form.description) }}
+
+      <fieldset class="widget" aria-describedby="event-tags-help event-tags-errors">
+        <legend>{{ form.tags.vars.label }}</legend>
+        <p id="event-tags-help" class="event-editor-shortcuts">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="event-tags-errors">{{ form_errors(form.tags) }}</div>
+      </fieldset>
+
+      <div class="widget">
+        {{ form_label(form.teaser, null, { label_attr: { id: form.teaser.vars.id ~ '-label' } }) }}
+
+        <div
+          class="event-editor-toolbar"
+          data-mm-editor-toolbar="{{ form.teaser.vars.id }}"
+          role="toolbar"
+          aria-label="Formatierungswerkzeuge Beschreibung"
+          aria-orientation="horizontal"
+          aria-describedby="{{ form.teaser.vars.id }}-shortcuts"
+          aria-controls="{{ form.teaser.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.teaser.vars.id }}-shortcuts" class="event-editor-shortcuts">
+          <strong>Tastaturkürzel:</strong>
+          <ul>
+            <li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
+            <li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
+            <li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
+            <li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
+            <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
+            <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
+          </ul>
+        </div>
+
+        <div
+          id="{{ form.teaser.vars.id }}-editor"
+          class="event-editor"
+          data-mm-editor="tiptap"
+          data-textarea-id="{{ form.teaser.vars.id }}"
+          data-editor-label="Beschreibung"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby="{{ form.teaser.vars.id }}-label"
+          aria-describedby="{{ form.teaser.vars.id }}-shortcuts {{ form.teaser.vars.id }}-counter {{ form.teaser.vars.id }}-errors"
+        ></div>
+        <div id="{{ form.teaser.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.teaser.vars.id }}" role="status" aria-live="polite"></div>
+        {{ form_widget(form.teaser, { attr: { class: 'js-event-teaser-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
+        <div id="{{ form.teaser.vars.id }}-errors">{{ form_errors(form.teaser) }}</div>
+      </div>
+
       {{ form_row(form.url) }}
       {{ form_row(form.addImage) }}
 
@@ -104,7 +380,7 @@
       (function () {
         const locationSelect = document.querySelector('select.js-location-choice');
         const organizationSelect = document.querySelector('select.js-organization-choice');
-        const typeSelect = document.querySelector('select.js-event-tags-choice');
+        const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
 
         if (organizationSelect && typeof window.Choices === 'function') {
           new window.Choices(organizationSelect, {
@@ -131,18 +407,21 @@
           });
         }
 
-        if (typeSelect && typeof window.Choices === 'function') {
-          new window.Choices(typeSelect, {
-            searchEnabled: false,
-            shouldSort: false,
-            removeItemButton: true,
-            itemSelectText: '',
-            placeholder: true,
-            placeholderValue: typeSelect.dataset.placeholder || 'Typen suchen …',
-            noResultsText: 'Keine Treffer',
-            noChoicesText: 'Keine Optionen verfügbar'
-          });
-        }
+        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));
+        });
 
         if (typeof window.flatpickr === 'function') {
           const dateInputs = document.querySelectorAll('input.js-flatpickr-date');
diff --git a/contao/templates/frontend/organization_edit.html.twig b/contao/templates/frontend/organization_edit.html.twig
index 0296408..19fca79 100644
--- a/contao/templates/frontend/organization_edit.html.twig
+++ b/contao/templates/frontend/organization_edit.html.twig
@@ -5,10 +5,173 @@
     <p role="alert">{{ error }}</p>
     <p><a href="{{ backUrl }}">Zurück</a></p>
   {% elseif form is defined and form %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
     <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
     <style>
+      .module-organization-edit .event-editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        margin: .5rem 0;
+      }
+
+      .module-organization-edit .event-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;
+      }
+
+      .module-organization-edit .event-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;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:hover {
+        background: #eef2ff;
+        border-color: #a5b4fc;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:hover img {
+        filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
+      }
+
+      .module-organization-edit .event-editor-toolbar button.is-active {
+        background: #4f46e5;
+        border-color: #4338ca;
+        color: #fff;
+      }
+
+      .module-organization-edit .event-editor-toolbar button.is-active img {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
+      }
+
+      .module-organization-edit .event-editor-toolbar button:disabled {
+        opacity: .45;
+        cursor: not-allowed;
+        background: #f1f5f9;
+        border-color: #d1d5db;
+        color: #6b7280;
+      }
+
+      .module-organization-edit .event-editor-toolbar button:disabled img {
+        filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
+      }
+
+      .module-organization-edit .event-editor {
+        border: 1px solid #cbd5e1;
+        border-radius: .375rem;
+        padding: .75rem;
+        min-height: 14rem;
+        background: #fff;
+      }
+
+      .module-organization-edit .event-editor .ProseMirror {
+        outline: none;
+        min-height: 12rem;
+      }
+
+      .module-organization-edit .event-editor-counter {
+        margin-top: .5rem;
+        font-size: .85rem;
+        color: #475569;
+      }
+
+      .module-organization-edit .event-editor-counter.is-over-limit {
+        color: #b91c1c;
+        font-weight: 600;
+      }
+
+      .module-organization-edit .event-editor-shortcuts {
+        margin-top: .6rem;
+        font-size: .85rem;
+        color: #334155;
+      }
+
+      .module-organization-edit .event-editor-shortcuts ul {
+        margin: .25rem 0 0;
+        padding-left: 1.1rem;
+      }
+
+      .module-organization-edit .ns-tag-switches {
+        display: grid;
+        gap: .5rem;
+        margin-top: .35rem;
+      }
+
+      .module-organization-edit .ns-tag-switch-item {
+        display: flex;
+        align-items: center;
+        gap: .65rem;
+      }
+
+      .module-organization-edit .ns-tag-switch-item label {
+        margin: 0;
+      }
+
+      .module-organization-edit .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;
+      }
+
+      .module-organization-edit .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;
+      }
+
+      .module-organization-edit .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;
+      }
+
+      .module-organization-edit .ns-tag-switch-input:checked {
+        background: #4f46e5;
+        border-color: #4338ca;
+      }
+
+      .module-organization-edit .ns-tag-switch-input:checked::after {
+        transform: translateX(1.05rem);
+      }
+
+      .module-organization-edit .ns-tag-switch-input:focus-visible {
+        outline: 2px solid #1d4ed8;
+        outline-offset: 2px;
+      }
+
       .module-organization-edit .filepond--root {
         width: 400px;
         height: 400px;
@@ -51,16 +214,139 @@
         background: rgba(255, 255, 255, 0.65);
       }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
     <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
     <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
+    <script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
+    <script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
 
     {{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
       <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
       <input type="hidden" id="remove_logo" name="remove_logo" value="0">
-      {{ form_widget(form) }}
+      {{ form_row(form.title) }}
+      {{ form_row(form.street) }}
+      {{ form_row(form.street2) }}
+      {{ form_row(form.postal) }}
+      {{ form_row(form.city) }}
+      {{ form_row(form.phone) }}
+      {{ form_row(form.email) }}
+      {{ form_row(form.website) }}
+
+      <div class="widget">
+        {{ form_label(form.description, null, { label_attr: { id: form.description.vars.id ~ '-label' } }) }}
+
+        <div
+          class="event-editor-toolbar"
+          data-mm-editor-toolbar="{{ form.description.vars.id }}"
+          role="toolbar"
+          aria-label="Formatierungswerkzeuge Beschreibung"
+          aria-orientation="horizontal"
+          aria-describedby="{{ form.description.vars.id }}-shortcuts"
+          aria-controls="{{ form.description.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.description.vars.id }}-shortcuts" class="event-editor-shortcuts">
+          <strong>Tastaturkürzel:</strong>
+          <ul>
+            <li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
+            <li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
+            <li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
+            <li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
+            <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
+            <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
+          </ul>
+        </div>
+
+        <div
+          id="{{ form.description.vars.id }}-editor"
+          class="event-editor"
+          data-mm-editor="tiptap"
+          data-textarea-id="{{ form.description.vars.id }}"
+          data-editor-label="Beschreibung"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby="{{ form.description.vars.id }}-label"
+          aria-describedby="{{ form.description.vars.id }}-shortcuts {{ form.description.vars.id }}-counter {{ form.description.vars.id }}-errors"
+        ></div>
+        <div id="{{ form.description.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.description.vars.id }}" role="status" aria-live="polite"></div>
+        {{ form_widget(form.description, { attr: { class: 'js-organization-description-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
+        <div id="{{ form.description.vars.id }}-errors">{{ form_errors(form.description) }}</div>
+      </div>
+
+      <fieldset class="widget" aria-describedby="organization-tags-help organization-tags-errors">
+        <legend>{{ form.tags.vars.label }}</legend>
+        <p id="organization-tags-help" class="event-editor-shortcuts">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="organization-tags-errors">{{ form_errors(form.tags) }}</div>
+      </fieldset>
+
+      {{ form_row(form.logoUpload) }}
+
       <div class="actions" aria-label="Formularaktionen">
         <button type="submit" id="save-btn" disabled>Speichern</button>
         <button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>
@@ -70,20 +356,23 @@
 
     <script>
       (function () {
-        const typeSelect = document.querySelector('select.js-organization-tags-choice');
+        const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
 
-        if (typeSelect && typeof window.Choices === 'function') {
-          new window.Choices(typeSelect, {
-            searchEnabled: false,
-            shouldSort: false,
-            removeItemButton: true,
-            itemSelectText: '',
-            placeholder: true,
-            placeholderValue: typeSelect.dataset.placeholder || 'Typ auswählen …',
-            noResultsText: 'Keine Treffer',
-            noChoicesText: 'Keine Optionen verfügbar'
-          });
-        }
+        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 currentLogoPath = {{ (currentLogoPath is defined and currentLogoPath) ? ('/' ~ currentLogoPath)|json_encode|raw : 'null' }};
         const logoInput = document.querySelector('input.js-logo-upload');
diff --git a/public/editor-fallback.js b/public/editor-fallback.js
new file mode 100644
index 0000000..0dd1063
--- /dev/null
+++ b/public/editor-fallback.js
@@ -0,0 +1,112 @@
+(function () {
+  const mounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
+
+  if (!mounts.length) {
+    return;
+  }
+
+  const runFallback = (mount) => {
+    if (!mount || mount.querySelector('.ProseMirror') || mount.getAttribute('data-mm-fallback-ready') === '1') {
+      return;
+    }
+
+    const textareaId = mount.getAttribute('data-textarea-id');
+
+    if (!textareaId) {
+      return;
+    }
+
+    const textarea = document.getElementById(textareaId);
+
+    if (!textarea) {
+      return;
+    }
+
+    const toolbar = document.querySelector('[data-mm-editor-toolbar="' + textareaId + '"]');
+    const form = textarea.closest('form');
+
+    mount.setAttribute('contenteditable', 'true');
+    mount.setAttribute('data-mm-fallback-ready', '1');
+    mount.classList.add('mm-fallback-editor');
+    mount.innerHTML = textarea.value || '<p></p>';
+    textarea.style.display = 'none';
+
+    const syncState = () => {
+      textarea.value = mount.innerHTML;
+    };
+
+    const focusMount = () => {
+      mount.focus();
+    };
+
+    mount.addEventListener('input', syncState);
+    mount.addEventListener('blur', syncState);
+
+    if (toolbar) {
+      toolbar.addEventListener('click', (event) => {
+        const target = event.target.closest('button[data-action]');
+
+        if (!target || target.disabled) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const action = target.getAttribute('data-action');
+
+        focusMount();
+
+        switch (action) {
+          case 'paragraph':
+            document.execCommand('formatBlock', false, 'p');
+            break;
+          case 'h2':
+            document.execCommand('formatBlock', false, 'h2');
+            break;
+          case 'h3':
+            document.execCommand('formatBlock', false, 'h3');
+            break;
+          case 'bold':
+            document.execCommand('bold', false);
+            break;
+          case 'italic':
+            document.execCommand('italic', false);
+            break;
+          case 'underline':
+            document.execCommand('underline', false);
+            break;
+          case 'bulletList':
+            document.execCommand('insertUnorderedList', false);
+            break;
+          case 'orderedList':
+            document.execCommand('insertOrderedList', false);
+            break;
+          case 'indent':
+            document.execCommand('indent', false);
+            break;
+          case 'outdent':
+            document.execCommand('outdent', false);
+            break;
+          case 'undo':
+            document.execCommand('undo', false);
+            break;
+          case 'redo':
+            document.execCommand('redo', false);
+            break;
+          default:
+            break;
+        }
+
+        syncState();
+      });
+    }
+
+    if (form) {
+      form.addEventListener('submit', syncState);
+    }
+  };
+
+  window.setTimeout(() => {
+    mounts.forEach(runFallback);
+  }, 900);
+})();
diff --git a/public/editor.js b/public/editor.js
new file mode 100644
index 0000000..37d69dc
--- /dev/null
+++ b/public/editor.js
@@ -0,0 +1,330 @@
+import { Editor } from 'https://esm.sh/@tiptap/core@3';
+import Document from 'https://esm.sh/@tiptap/extension-document@3';
+import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@3';
+import Text from 'https://esm.sh/@tiptap/extension-text@3';
+import Heading from 'https://esm.sh/@tiptap/extension-heading@3';
+import Bold from 'https://esm.sh/@tiptap/extension-bold@3';
+import Italic from 'https://esm.sh/@tiptap/extension-italic@3';
+import Underline from 'https://esm.sh/@tiptap/extension-underline@3';
+import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@3';
+import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@3';
+import ListItem from 'https://esm.sh/@tiptap/extension-list-item@3';
+import CharacterCount from 'https://esm.sh/@tiptap/extension-character-count@3';
+import History from 'https://esm.sh/@tiptap/extension-history@3';
+
+const CHARACTER_LIMIT = 30000;
+
+(function () {
+  const editorMounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
+
+  if (!editorMounts.length) {
+    return;
+  }
+
+  const syncState = (editor, textarea) => {
+    textarea.value = editor.getHTML();
+  };
+
+  const updateEditorA11yState = (mount, textarea, textareaId, editor) => {
+    if (!mount || !textareaId || !editor || !textarea) {
+      return;
+    }
+
+    const errorNode = document.getElementById(`${textareaId}-errors`);
+    const hasError = !!(errorNode && errorNode.textContent && errorNode.textContent.trim().length > 0);
+    const plainTextLength = editor.storage?.characterCount?.characters?.() ?? 0;
+    const isEmpty = plainTextLength === 0;
+    const label = mount.getAttribute('data-editor-label') || textarea.getAttribute('aria-label') || 'Text';
+
+    mount.setAttribute('aria-invalid', hasError ? 'true' : 'false');
+    mount.setAttribute('aria-required', textarea.required ? 'true' : 'false');
+
+    const proseMirror = mount.querySelector('.ProseMirror');
+
+    if (!proseMirror) {
+      return;
+    }
+
+    proseMirror.setAttribute('role', 'textbox');
+    proseMirror.setAttribute('aria-multiline', 'true');
+    proseMirror.setAttribute('aria-invalid', hasError ? 'true' : 'false');
+    proseMirror.setAttribute('aria-required', textarea.required ? 'true' : 'false');
+    proseMirror.setAttribute('aria-label', label);
+    proseMirror.setAttribute('data-empty', isEmpty ? 'true' : 'false');
+  };
+
+  const updateCharacterCounter = (counterNode, editor) => {
+    if (!counterNode || !editor?.storage?.characterCount) {
+      return;
+    }
+
+    const used = editor.storage.characterCount.characters();
+    const words = editor.storage.characterCount.words();
+    const remaining = CHARACTER_LIMIT - used;
+
+    counterNode.textContent = `${words.toLocaleString('de-DE')} Wörter · ${used.toLocaleString('de-DE')} / ${CHARACTER_LIMIT.toLocaleString('de-DE')} Zeichen`;
+    counterNode.classList.toggle('is-over-limit', remaining < 0);
+  };
+
+  const setupToolbarKeyboardNavigation = (toolbar) => {
+    if (!toolbar) {
+      return;
+    }
+
+    const getEnabledButtons = () => Array.from(toolbar.querySelectorAll('button[data-action]:not(:disabled)'));
+
+    toolbar.addEventListener('keydown', (event) => {
+      const activeElement = event.target.closest('button[data-action]');
+
+      if (!activeElement) {
+        return;
+      }
+
+      const buttons = getEnabledButtons();
+
+      if (!buttons.length) {
+        return;
+      }
+
+      const currentIndex = buttons.indexOf(activeElement);
+
+      if (currentIndex < 0) {
+        return;
+      }
+
+      let nextIndex = currentIndex;
+
+      switch (event.key) {
+        case 'ArrowRight':
+          nextIndex = (currentIndex + 1) % buttons.length;
+          break;
+        case 'ArrowLeft':
+          nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = buttons.length - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          activeElement.click();
+          return;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      buttons[nextIndex].focus();
+    });
+  };
+
+  const updateToolbarState = (toolbar, editor) => {
+    if (!toolbar) {
+      return;
+    }
+
+    const canIndent = editor.can().chain().focus().sinkListItem('listItem').run();
+    const canOutdent = editor.can().chain().focus().liftListItem('listItem').run();
+    const canUndo = editor.can().chain().focus().undo().run();
+    const canRedo = editor.can().chain().focus().redo().run();
+
+    toolbar.querySelectorAll('button[data-action]').forEach((button) => {
+      const action = button.getAttribute('data-action');
+      let isActive = false;
+      let isDisabled = false;
+
+      switch (action) {
+        case 'paragraph':
+          isActive = editor.isActive('paragraph');
+          break;
+        case 'h2':
+          isActive = editor.isActive('heading', { level: 2 });
+          break;
+        case 'h3':
+          isActive = editor.isActive('heading', { level: 3 });
+          break;
+        case 'bold':
+          isActive = editor.isActive('bold');
+          break;
+        case 'italic':
+          isActive = editor.isActive('italic');
+          break;
+        case 'underline':
+          isActive = editor.isActive('underline');
+          break;
+        case 'bulletList':
+          isActive = editor.isActive('bulletList');
+          break;
+        case 'orderedList':
+          isActive = editor.isActive('orderedList');
+          break;
+        case 'indent':
+          isDisabled = !canIndent;
+          break;
+        case 'outdent':
+          isDisabled = !canOutdent;
+          break;
+        case 'undo':
+          isDisabled = !canUndo;
+          break;
+        case 'redo':
+          isDisabled = !canRedo;
+          break;
+        default:
+          break;
+      }
+
+      button.classList.toggle('is-active', isActive);
+      button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+      button.disabled = isDisabled;
+      button.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
+    });
+  };
+
+  editorMounts.forEach((mount) => {
+    const textareaId = mount.getAttribute('data-textarea-id');
+
+    if (!textareaId) {
+      return;
+    }
+
+    const textarea = document.getElementById(textareaId);
+
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.display = 'none';
+
+    const form = textarea.closest('form');
+    const toolbar = document.querySelector(`[data-mm-editor-toolbar="${textareaId}"]`);
+    const counterNode = document.querySelector(`[data-mm-editor-counter-for="${textareaId}"]`);
+
+    setupToolbarKeyboardNavigation(toolbar);
+
+    const editor = new Editor({
+      element: mount,
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Heading.configure({ levels: [2, 3] }),
+        Bold,
+        Italic,
+        Underline,
+        BulletList,
+        OrderedList,
+        ListItem,
+        History,
+        CharacterCount.configure({
+          limit: CHARACTER_LIMIT,
+        }),
+      ],
+      content: textarea.value || '<p></p>',
+      onCreate({ editor: currentEditor }) {
+        updateToolbarState(toolbar, currentEditor);
+        updateCharacterCounter(counterNode, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+      onUpdate({ editor: currentEditor }) {
+        syncState(currentEditor, textarea);
+        updateToolbarState(toolbar, currentEditor);
+        updateCharacterCounter(counterNode, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+      onSelectionUpdate({ editor: currentEditor }) {
+        updateToolbarState(toolbar, currentEditor);
+        updateEditorA11yState(mount, textarea, textareaId, currentEditor);
+      },
+    });
+
+    editor.on('transaction', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    editor.on('focus', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    editor.on('blur', () => {
+      updateToolbarState(toolbar, editor);
+      updateCharacterCounter(counterNode, editor);
+      updateEditorA11yState(mount, textarea, textareaId, editor);
+    });
+
+    if (toolbar) {
+      toolbar.addEventListener('click', (event) => {
+        const target = event.target.closest('button[data-action]');
+
+        if (!target || target.disabled) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const action = target.getAttribute('data-action');
+        const chain = editor.chain().focus();
+
+        switch (action) {
+          case 'paragraph':
+            chain.setParagraph().run();
+            break;
+          case 'h2':
+            chain.toggleHeading({ level: 2 }).run();
+            break;
+          case 'h3':
+            chain.toggleHeading({ level: 3 }).run();
+            break;
+          case 'bold':
+            chain.toggleBold().run();
+            break;
+          case 'italic':
+            chain.toggleItalic().run();
+            break;
+          case 'underline':
+            chain.toggleUnderline().run();
+            break;
+          case 'bulletList':
+            chain.toggleBulletList().run();
+            break;
+          case 'orderedList':
+            chain.toggleOrderedList().run();
+            break;
+          case 'indent':
+            chain.sinkListItem('listItem').run();
+            break;
+          case 'outdent':
+            chain.liftListItem('listItem').run();
+            break;
+          case 'undo':
+            chain.undo().run();
+            break;
+          case 'redo':
+            chain.redo().run();
+            break;
+          default:
+            break;
+        }
+
+        syncState(editor, textarea);
+        updateToolbarState(toolbar, editor);
+      });
+    }
+
+    if (form) {
+      form.addEventListener('submit', () => {
+        syncState(editor, textarea);
+        updateEditorA11yState(mount, textarea, textareaId, editor);
+      });
+    }
+
+    updateEditorA11yState(mount, textarea, textareaId, editor);
+  });
+})();
diff --git a/src/Controller/Frontend/EventEditController.php b/src/Controller/Frontend/EventEditController.php
index ee41e0e..eebddcf 100644
--- a/src/Controller/Frontend/EventEditController.php
+++ b/src/Controller/Frontend/EventEditController.php
@@ -103,8 +103,9 @@ class EventEditController extends AbstractFrontendModuleController
             'endTime' => $this->resolveFormEndTime($event),
             'location_id' => (int) ($event['location_id'] ?? 0),
             'tags' => $currentTagIds,
-            'teaser' => (string) ($event['teaser'] ?? ''),
-            'description' => (string) ($event['description'] ?? ''),
+            'teaser' => '' !== trim((string) ($event['teaser'] ?? ''))
+                ? (string) ($event['teaser'] ?? '')
+                : (string) ($event['description'] ?? ''),
             'url' => (string) ($event['url'] ?? ''),
             'photographer' => (string) ($event['photographer'] ?? ''),
             'addImage' => '1' === (string) ($event['addImage'] ?? ''),
diff --git a/src/Form/EventType.php b/src/Form/EventType.php
index f2f6d1d..64b2075 100644
--- a/src/Form/EventType.php
+++ b/src/Form/EventType.php
@@ -119,17 +119,19 @@ class EventType extends AbstractType
                 ],
             ])
             ->add('tags', ChoiceType::class, [
-                'label' => 'Typen',
+                'label' => 'Kategorien',
                 'choices' => $options['tag_choices'],
+                'expanded' => true,
                 'multiple' => true,
                 'required' => false,
-                'attr' => [
-                    'class' => 'js-event-tags-choice',
-                    'data-placeholder' => 'Typen suchen …',
-                ],
+                'choice_attr' => static function (): array {
+                    return [
+                        'role' => 'switch',
+                        'class' => 'ns-tag-switch-input',
+                    ];
+                },
             ])
-            ->add('teaser', TextareaType::class, ['label' => 'Teaser', 'required' => false])
-            ->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
+            ->add('teaser', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
             ->add('url', UrlType::class, [
                 'label' => 'Link (extern)',
                 'required' => false,
diff --git a/src/Form/OrganizationType.php b/src/Form/OrganizationType.php
index 0abc180..c25cc4e 100644
--- a/src/Form/OrganizationType.php
+++ b/src/Form/OrganizationType.php
@@ -28,14 +28,17 @@ class OrganizationType extends AbstractType
             ->add('website', TextType::class, ['label' => 'Webseite', 'required' => false])
             ->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
             ->add('tags', ChoiceType::class, [
-                'label' => 'Typen',
+                'label' => 'Kategorien',
                 'choices' => $options['tag_choices'],
+                'expanded' => true,
                 'multiple' => true,
                 'required' => false,
-                'attr' => [
-                    'class' => 'js-organization-tags-choice',
-                    'data-placeholder' => 'Typ auswählen …',
-                ],
+                'choice_attr' => static function (): array {
+                    return [
+                        'role' => 'switch',
+                        'class' => 'ns-tag-switch-input',
+                    ];
+                },
             ])
             ->add('logoUpload', FileType::class, [
                 'label' => 'Logo hochladen',