From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 27 Aug 2019 10:25:15 +0000 (+0100)
Subject: wiki: Add a little JS editor for highlighting text
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=feeace6ebe8455d153660e6b3b3bb564d8e52b0b;p=ipfire.org.git

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 b69162ce..24cf8d7c 100644
--- 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
index 00000000..854d01e2
--- /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 50cbf8f0..545760e5 100644
--- 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;