wiki: Add editor elements to insert headlines

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/static/js/editor.js b/src/static/js/editor.js
index 854d01e2c8b570d44fe3321c863867132b214f67..7639ae2eaa09bd13f436f6b17967cf0cd9f1e453 100644 (file)
--- a/src/static/js/editor.js
+++ b/src/static/js/editor.js
@@ -18,11 +18,12 @@ class Editor {
         var editor = this;
 
         // Remember any selected text
-        this.textarea.select(function() {
+        this.textarea.on("select keyup click", function(e) {
             editor.selection = {
                 start : this.selectionStart,
                 end   : this.selectionEnd,
-                text  : this.value.slice(this.selectionStart, this.selectionEnd)
+                text  : this.value.slice(this.selectionStart, this.selectionEnd),
+                length: this.selectionEnd - this.selectionStart,
             };
 
             console.debug("Something got selected:");
@@ -31,8 +32,14 @@ class Editor {
     }
 
     bindKeys() {
+        // Typography
         this.parent.find("#bold").click(this.bold.bind(this));
         this.parent.find("#italic").click(this.italic.bind(this));
+
+        // Headlines
+        this.parent.find("#headline").click(this.headline.bind(this));
+        this.parent.find("#headline-down").click(this.headline_down.bind(this));
+        this.parent.find("#headline-up").click(this.headline_up.bind(this));
     }
 
     // Functions to modify the text
@@ -46,6 +53,10 @@ class Editor {
         this.textarea.val(text);
     }
 
+    insertAtCursor(insertion) {
+        this.replaceSelection(insertion);
+    }
+
     bold() {
         console.debug("Converting into bold: " + this.selection.text);
         this.replaceSelection("**" + this.selection.text + "**");
@@ -55,6 +66,62 @@ class Editor {
         console.debug("Converting into italic: " + this.selection.text);
         this.replaceSelection("*" + this.selection.text + "*");
     }
+
+    // Headlines
+
+    findLevel() {
+        // Get all text between start and cursor position
+        var text = this.textarea.val().slice(0, this.selection.start);
+
+        // Split it in lines and reverse
+        var lines = text.split("\n");
+        lines.reverse();
+
+        for (var line of lines) {
+            console.debug(line);
+
+            // Return the number of # found in the nearest headline
+            var match = line.match("^(#+)");
+            if (match) {
+                return match[1].length;
+            }
+        }
+
+        // If nothing was found, we are on level one
+        return 1;
+    }
+
+    insertHeadline(offset) {
+        // Find level of headlines
+        var level = Math.max(this.findLevel() + offset, 1);
+
+        console.debug("Adding headline (" + level + ")");
+        var headline = "#".repeat(level);
+
+        if (this.selection.length == 0) {
+            headline += " ...";
+        } else {
+            // Add some space if we don't have any, yet
+            if (!this.selection.text.startsWith(" "))
+                headline += " ";
+
+            headline += this.selection.text + "\n\n";
+        }
+
+        this.replaceSelection(headline);
+    }
+
+    headline() {
+        return this.insertHeadline(0);
+    }
+
+    headline_down() {
+        return this.insertHeadline(1);
+    }
+
+    headline_up() {
+        return this.insertHeadline(-1);
+    }
 }
 
 $(document).ready(function() {

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index 841bb9c5a207d7843f60e9f69110225fd793f985..3e8cf270eb55df1c77629a3bf9b497b2bdc8451d 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -31,6 +31,18 @@
                                                        </button>
                                                </div>
 
+                                               <div class="btn-group btn-group-sm mr-2" role="group">
+                                                       <button type="button" class="btn btn-secondary" id="headline-up">
+                                                               <i class="fas fa-chevron-left"></i>
+                                                       </button>
+                                                       <button type="button" class="btn btn-secondary" id="headline">
+                                                               <i class="fas fa-heading"></i>
+                                                       </button>
+                                                       <button type="button" class="btn btn-secondary" id="headline-down">
+                                                               <i class="fas fa-chevron-right"></i>
+                                                       </button>
+                                               </div>
+
                                                <a class="btn btn-sm btn-secondary" href="{{ path }}/_files" target="_blank">
                                                        <i class="fas fa-images"></i>
                                                </a>