wiki: Add keyboard shortcuts to edit text

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

diff --git a/src/static/js/editor.js b/src/static/js/editor.js
index 39fac6b214c0b91e4986cf6da60c4c0d3289c245..6311f8706ab5065b32f173d2c757e22aac0466ef 100644 (file)
--- a/src/static/js/editor.js
+++ b/src/static/js/editor.js
@@ -19,6 +19,11 @@ class Editor {
 
         // Remember any selected text
         this.textarea.on("select keyup click", function(e) {
+            // Ignore any keyboard shortcuts
+            if (e.ctrlKey)
+                return;
+
+            // Save selected text
             editor.selection = {
                 start : this.selectionStart,
                 end   : this.selectionEnd,
@@ -29,6 +34,30 @@ class Editor {
             console.debug("Something got selected:");
             console.debug(editor.selection);
         })
+
+        // Bind keyboard shortcuts
+        this.textarea.on("keyup", function(e) {
+            // If Ctrl wasn't pressed this isn't for us
+            if (!e.ctrlKey)
+                return;
+
+            switch (e.which) {
+                // B - Bold
+                case 66:
+                    editor.bold();
+                    break;
+
+                // I - Italic
+                case 73:
+                    editor.italic();
+                    break;
+
+                // H - Headline
+                case 72:
+                    editor.headline();
+                    break;
+            }
+        });
     }
 
     bindKeys() {

diff --git a/src/templates/wiki/edit.html b/src/templates/wiki/edit.html
index 3e8cf270eb55df1c77629a3bf9b497b2bdc8451d..16382515e5c7918f67680e97525e47af4b92d1e7 100644 (file)
--- a/src/templates/wiki/edit.html
+++ b/src/templates/wiki/edit.html
@@ -23,27 +23,33 @@
                                <div class="form-group editor">
                                        <div class="btn-toolbar mb-3" role="toolbar">
                                                <div class="btn-group btn-group-sm mr-2" role="group">
-                                                       <button type="button" class="btn btn-secondary" id="bold">
+                                                       <button type="button" class="btn btn-secondary"
+                                                                       id="bold" title="{{ _("Bold") }} [{{ _("Ctrl") }}-B]">
                                                                <i class="fas fa-bold"></i>
                                                        </button>
-                                                       <button type="button" class="btn btn-secondary" id="italic">
+                                                       <button type="button" class="btn btn-secondary"
+                                                                       id="italic" title="{{ _("Italic") }} [{{ _("Ctrl") }}-I]">
                                                                <i class="fas fa-italic"></i>
                                                        </button>
                                                </div>
 
                                                <div class="btn-group btn-group-sm mr-2" role="group">
-                                                       <button type="button" class="btn btn-secondary" id="headline-up">
+                                                       <button type="button" class="btn btn-secondary"
+                                                                       id="headline-up" title="{{ _("Headline one level up") }}">
                                                                <i class="fas fa-chevron-left"></i>
                                                        </button>
-                                                       <button type="button" class="btn btn-secondary" id="headline">
+                                                       <button type="button" class="btn btn-secondary"
+                                                                       id="headline" title="{{ _("Headline") }} [{{ _("Ctrl") }}-H]">
                                                                <i class="fas fa-heading"></i>
                                                        </button>
-                                                       <button type="button" class="btn btn-secondary" id="headline-down">
+                                                       <button type="button" class="btn btn-secondary"
+                                                                       id="headline-down" title="{{ _("Headline one level down") }}">
                                                                <i class="fas fa-chevron-right"></i>
                                                        </button>
                                                </div>
 
-                                               <a class="btn btn-sm btn-secondary" href="{{ path }}/_files" target="_blank">
+                                               <a class="btn btn-sm btn-secondary" href="{{ path }}/_files"
+                                                               target="_blank" title="{{ _("Files") }}">
                                                        <i class="fas fa-images"></i>
                                                </a>
                                        </div>