Merge branch 'main' into new/bookmarks

assets/controllers/markdown_toolbar_controller.js

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2023-2024 /kbin & Mbin contributors
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    addSpoiler(event) {
+        event.preventDefault();
+
+        const input = document.getElementById(this.element.getAttribute('for'));
+        let spoilerBody = 'spoiler body';
+        let contentAfterCursor;
+
+        const start = input.selectionStart;
+        const end = input.selectionEnd;
+
+        const contentBeforeCursor = input.value.substring(0, start);
+        if (start === end) {
+            contentAfterCursor = input.value.substring(start);
+        } else {
+            contentAfterCursor = input.value.substring(end);
+            spoilerBody = input.value.substring(start, end);
+        }
+
+        const spoiler = `
+::: spoiler spoiler-title
+${spoilerBody}
+:::`;
+
+        input.value = contentBeforeCursor + spoiler + contentAfterCursor;
+        input.dispatchEvent(new Event('input'));
+
+        const spoilerTitlePosition = contentBeforeCursor.length + '::: spoiler '.length + 1;
+        input.setSelectionRange(spoilerTitlePosition, spoilerTitlePosition);
+        input.focus();
+    }
+}

templates/components/editor_toolbar.html.twig

@@ -1,10 +1,10 @@
-<markdown-toolbar for="{{ id }}" class="markdown meta">
+<markdown-toolbar for="{{ id }}" class="markdown meta" data-controller="markdown-toolbar">
     <md-bold title="{{ 'toolbar.bold'|trans }}" aria-label="{{ 'toolbar.bold'|trans }}">
         <i class="fa-solid fa-bold" aria-hidden="true"></i>
     </md-bold>
     <md-italic title="{{ 'toolbar.italic'|trans }}" aria-label="{{ 'toolbar.italic'|trans }}">
         <i class="fa-solid fa-italic" aria-hidden="true"></i>
-    </md-italic >
+    </md-italic>
     <md-strikethrough title="{{ 'toolbar.strikethrough'|trans }}" aria-label="{{ 'toolbar.strikethrough'|trans }}">
         <i class="fa-solid fa-strikethrough" aria-hidden="true"></i>
     </md-strikethrough>
@@ -32,4 +32,7 @@
     <md-mention title="{{ 'toolbar.mention'|trans }}" aria-label="{{ 'toolbar.mention'|trans }}">
         <i class="fa-solid fa-at" aria-hidden="true"></i>
     </md-mention>
+    <md-spoiler title="{{ 'toolbar.spoiler'|trans }}" aria-label="{{ 'toolbar.spoiler'|trans }}" data-action="click->markdown-toolbar#addSpoiler">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+    </md-spoiler>
 </markdown-toolbar>

translations/messages.en.yaml

@@ -448,6 +448,7 @@ toolbar.image: Image
 toolbar.unordered_list: Unordered List
 toolbar.ordered_list: Ordered List
 toolbar.mention: Mention
+toolbar.spoiler: Spoiler
 federation_page_enabled: Federation page enabled
 federation_page_allowed_description: Known instances we federate with
 federation_page_disallowed_description: Instances we do not federate with