wiki: Add a little JS editor for highlighting text

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

diff --git a/Makefile.am b/Makefile.am
index b69162ce4940463c5de6676ded5005c22459895f..24cf8d7c32e79332b58bdef3467d1883056ba771 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -925,6 +925,7 @@ static_js_DATA = \
        src/bootstrap/dist/js/bootstrap.min.js \
        src/bootstrap/dist/js/bootstrap.min.js.map \
        \
+       src/static/js/editor.js \
        src/static/js/jquery-3.3.1.min.js \
        src/static/js/popper.min.js \
        src/static/js/popper.min.js.map \

diff --git a/src/static/js/editor.js b/src/static/js/editor.js
new file mode 100644 (file)
index 0000000..854d01e
--- /dev/null
+++ b/src/static/js/editor.js
@@ -0,0 +1,65 @@
+class Editor {
+    constructor(parent) {
+        this.parent = $(parent);
+
+        // Get the textarea
+        this.textarea = this.parent.find("textarea");
+
+        // Make the textarea magic
+        this.activateTextArea();
+
+        // Bind all keys
+        this.bindKeys();
+
+        console.log("Editor initialised for " + this.parent);
+    }
+
+    activateTextArea() {
+        var editor = this;
+
+        // Remember any selected text
+        this.textarea.select(function() {
+            editor.selection = {
+                start : this.selectionStart,
+                end   : this.selectionEnd,
+                text  : this.value.slice(this.selectionStart, this.selectionEnd)
+            };
+
+            console.debug("Something got selected:");
+            console.debug(editor.selection);
+        })
+    }
+
+    bindKeys() {
+        this.parent.find("#bold").click(this.bold.bind(this));
+        this.parent.find("#italic").click(this.italic.bind(this));
+    }
+
+    // Functions to modify the text
+
+    replaceSelection(replacement) {
+        var text = this.textarea.val();
+
+        text = text.slice(0, this.selection.start) + replacement + text.slice(this.selection.end);
+
+        // Write text to textarea
+        this.textarea.val(text);
+    }
+
+    bold() {
+        console.debug("Converting into bold: " + this.selection.text);
+        this.replaceSelection("**" + this.selection.text + "**");
+    }
+
+    italic() {
+        console.debug("Converting into italic: " + this.selection.text);
+        this.replaceSelection("*" + this.selection.text + "*");
+    }
+}
+
+$(document).ready(function() {
+    // Initialise all editors
+    $(".editor").each(function(i, e) {
+        new Editor(e);
+    });
+});

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index 50cbf8f0c7e16600e9202f3a82dac262c4897071..545760e5b955372e349fce820f468e97f3d28261 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -20,7 +20,18 @@
                        <form action="" method="POST">
                                {% raw xsrf_form_html() %}
 
-                               <div class="form-group">
+                               <div class="form-group editor">
+                                       <div class="btn-toolbar mb-3" role="toolbar">
+                                               <div class="btn-group btn-group-sm" role="group">
+                                                       <button type="button" class="btn btn-secondary" id="bold">
+                                                               <i class="fas fa-bold"></i>
+                                                       </button>
+                                                       <button type="button" class="btn btn-secondary" id="italic">
+                                                               <i class="fas fa-italic"></i>
+                                                       </button>
+                                               </div>
+                                       </div>
+
                                        <textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
                                                >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
                                </div>
@@ -71,6 +82,7 @@
 {% block javascript %}
        {% import os.path %}
 
+       <script src="{{ static_url("js/editor.js") }}"></script>
        <script type="text/javascript">
                var update = null;