Add formatting help

Author: rafalp

frontend/src/editor/editor.js

@@ -1,3 +1,4 @@
+import htmx from "htmx.org"
 import {
   MarkupEditorCodeModal,
   MarkupEditorImageModal,
@@ -46,12 +47,14 @@ class MarkupEditor {
 
     element.querySelectorAll("[misago-editor-action]").forEach((control) => {
       const actionName = control.getAttribute("misago-editor-action")
-      control.addEventListener("click", ({ target }) => {
+      control.addEventListener("click", (event) => {
+        event.preventDefault()
+
         const action = this.actions[actionName]
         if (action) {
           action({
             input,
-            target,
+            target: event.target,
             editor: this,
             selection: new MarkupEditorSelection(input),
           })
@@ -264,3 +267,17 @@ editor.setAction("spoiler", function ({ selection }) {
 editor.setAction("code", function ({ editor, selection }) {
   editor.showCodeModal(selection)
 })
+
+editor.setAction("formatting-help", function ({ target }) {
+  const modal = document.getElementById("markup-editor-formatting-help")
+  const element = target.closest("a")
+
+  htmx
+    .ajax("GET", element.href, {
+      target: modal,
+      swap: "innerHTML",
+    })
+    .then(() => {
+      $(modal).modal("show")
+    })
+})

frontend/src/style/misago/formatting-help.less

@@ -1,9 +1,9 @@
-.formatting-help {
+.modal-formatting-help {
   padding-bottom: 0;
+}
 
-  & > h4 {
-    margin-bottom: @line-height-computed;
-  }
+.formatting-help > h4 {
+  margin-bottom: @line-height-computed;
 }
 
 .formatting-help-item,

misago/static/misago/css/misago.css

@@ -0,0 +1,14 @@
+{% load i18n %}
+<div class="modal-dialog modal-lg" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="{% trans 'Close' context 'modal' %}"><span aria-hidden="true">&times;</span></button>
+      <h4 class="modal-title">
+        {% trans "Formatting help" context "formatting help modal "%}
+      </h4>
+    </div>
+    <div class="modal-body modal-formatting-help">
+      {% include "misago/formatting_help/help.html" %}
+    </div>
+  </div>
+</div>

misago/static/misago/css/misago.css.map

@@ -98,7 +98,7 @@
             title="{% trans 'Upload file' context 'markup editor' %}"
             type="button"
             misago-editor-action="upload"
-          >
+            >
             <span class="material-icon">file_upload</span>
           </button>
         </div>
@@ -108,6 +108,7 @@
             href="{% url 'misago:formatting-help' %}"
             title="{% trans 'Formatting help' context 'markup editor' %}"
             target="_blank"
+            misago-editor-action="formatting-help"
           >
             <span class="material-icon">help_outline</span>
           </a>