diff --git a/src/js/main.js b/src/js/main.js
index 4e296fb..6a1a23b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -5,6 +5,7 @@ import keybinds from "./keybinds";
 import Picker from "vanilla-picker";
 import { dom } from "@fortawesome/fontawesome-svg-core";
 import pdfjsLib from "pdfjs-dist/webpack";
+import shortcutFunctions from "./shortcutFunctions";
 
 function main() {
 
@@ -140,136 +141,15 @@ function main() {
             }
         });
 
-        var shortcutFunctions = {
-            clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
-            undoStep: function () { whiteboard.undoWhiteboardClick(); },
-            redoStep: function () { whiteboard.redoWhiteboardClick(); },
-            setTool_mouse: function () { $(".whiteboard-tool[tool=mouse]").click(); },
-            setTool_recSelect: function () { $(".whiteboard-tool[tool=recSelect]").click(); },
-            setTool_pen: function () {
-                $(".whiteboard-tool[tool=pen]").click();
-                whiteboard.redrawMouseCursor();
-            },
-            setTool_line: function () { $(".whiteboard-tool[tool=line]").click(); },
-            setTool_rect: function () { $(".whiteboard-tool[tool=rect]").click(); },
-            setTool_circle: function () { $(".whiteboard-tool[tool=circle]").click(); },
-            setTool_text: function () { $(".whiteboard-tool[tool=text]").click(); },
-            setTool_eraser: function () {
-                $(".whiteboard-tool[tool=eraser]").click();
-                whiteboard.redrawMouseCursor();
-            },
-            thickness_bigger: function () {
-                var thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
-                $("#whiteboardThicknessSlider").val(thickness);
-                whiteboard.setStrokeThickness(thickness);
-                whiteboard.redrawMouseCursor();
-            },
-            thickness_smaller: function () {
-                var thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
-                $("#whiteboardThicknessSlider").val(thickness);
-                whiteboard.setStrokeThickness(thickness);
-                whiteboard.redrawMouseCursor();
-            },
-            openColorPicker: function () { $("#whiteboardColorpicker").click(); },
-            saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
-            saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
-            uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
-            uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
-            shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
-            hideShowControls: function () { $("#minMaxBtn").click(); },
-
-            setDrawColorBlack: function () {
-                whiteboard.setDrawColor("black");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorRed: function () {
-                whiteboard.setDrawColor("red");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorGreen: function () {
-                whiteboard.setDrawColor("green");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorBlue: function () {
-                whiteboard.setDrawColor("blue");
-                whiteboard.redrawMouseCursor();
-            },
-            setDrawColorYellow: function () {
-                whiteboard.setDrawColor("yellow");
-                whiteboard.redrawMouseCursor();
-            },
-
-            toggleLineRecCircle: function () {
-                var activeTool = $(".whiteboard-tool.active").attr("tool");
-                if (activeTool == "line") {
-                    $(".whiteboard-tool[tool=rect]").click();
-                } else if (activeTool == "rect") {
-                    $(".whiteboard-tool[tool=circle]").click();
-                } else {
-                    $(".whiteboard-tool[tool=line]").click();
-                }
-            },
-            togglePenEraser: function () {
-                var activeTool = $(".whiteboard-tool.active").attr("tool");
-                if (activeTool == "pen") {
-                    $(".whiteboard-tool[tool=eraser]").click();
-                } else {
-                    $(".whiteboard-tool[tool=pen]").click();
-                }
-            },
-            toggleMainColors: function () {
-                var bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
-                if (bgColor == "blue") {
-                    shortcutFunctions.setDrawColorGreen();
-                } else if (bgColor == "green") {
-                    shortcutFunctions.setDrawColorYellow();
-                } else if (bgColor == "yellow") {
-                    shortcutFunctions.setDrawColorRed();
-                } else if (bgColor == "red") {
-                    shortcutFunctions.setDrawColorBlack();
-                } else {
-                    shortcutFunctions.setDrawColorBlue();
-                }
-            },
-
-            moveDraggableUp: function () {
-                var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-                var p = $(elm).position();
-                $(elm).css({ top: p.top - 5, left: p.left })
-            },
-            moveDraggableDown: function () {
-                var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-                var p = $(elm).position();
-                $(elm).css({ top: p.top + 5, left: p.left })
-            },
-            moveDraggableLeft: function () {
-                var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-                var p = $(elm).position();
-                $(elm).css({ top: p.top, left: p.left - 5 })
-            },
-            moveDraggableRight: function () {
-                var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
-                var p = $(elm).position();
-                $(elm).css({ top: p.top, left: p.left + 5 })
-            },
-            dropDraggable: function () {
-                $($(".dragMe")[0]).find('.addToCanvasBtn').click();
-            },
-            addToBackground: function () {
-                $($(".dragMe")[0]).find('.addToBackgroundBtn').click();
-            },
-            cancelAllActions: function () { whiteboard.escKeyAction(); },
-            deleteSelection: function () { whiteboard.delKeyAction(); },
-        }
-
         //Load keybindings from keybinds.js to given functions
-        for (var i in keybinds) {
-            if (shortcutFunctions[keybinds[i]]) {
-                keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
+        Object.entries(keybinds).forEach(([key, functionName]) => {
+            const associatedShortcutFunction = shortcutFunctions[functionName];
+            if (associatedShortcutFunction) {
+                keymage(key, associatedShortcutFunction, { preventDefault: true });
             } else {
-                console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
+                console.error("Function you want to keybind on key:", key, "named:", functionName, "is not available!")
             }
-        }
+        })
 
         // whiteboard clear button
         $("#whiteboardTrashBtn").click(function () {
diff --git a/src/js/shortcutFunctions.js b/src/js/shortcutFunctions.js
new file mode 100644
index 0000000..96f4a4d
--- /dev/null
+++ b/src/js/shortcutFunctions.js
@@ -0,0 +1,134 @@
+import whiteboard from "./whiteboard";
+
+/**
+ * @param {function} callback
+ * @param {boolean} readOnlySensitive should the shortcut function be active event when the whiteboard is in read-only mode
+ */
+function defineShortcut(callback, readOnlySensitive = true) {
+    return () => {
+        if (readOnlySensitive && whiteboard.readOnly) return;
+        callback();
+    }
+}
+
+const shortcutFunctions = {
+    clearWhiteboard: defineShortcut(() => whiteboard.clearWhiteboard()),
+    undoStep: defineShortcut(() => whiteboard.undoWhiteboardClick()),
+    redoStep: defineShortcut(() => whiteboard.redoWhiteboardClick()),
+    setTool_mouse: defineShortcut(() => $(".whiteboard-tool[tool=mouse]").click()),
+    setTool_recSelect: defineShortcut(() => $(".whiteboard-tool[tool=recSelect]").click()),
+    setTool_pen: defineShortcut(() => {
+        $(".whiteboard-tool[tool=pen]").click();
+        whiteboard.redrawMouseCursor();
+    }),
+    setTool_line: defineShortcut(() => $(".whiteboard-tool[tool=line]").click()),
+    setTool_rect: defineShortcut(() => $(".whiteboard-tool[tool=rect]").click()),
+    setTool_circle: defineShortcut(() => $(".whiteboard-tool[tool=circle]").click()),
+    setTool_text: defineShortcut(() => $(".whiteboard-tool[tool=text]").click()),
+    setTool_eraser: defineShortcut(() => {
+        $(".whiteboard-tool[tool=eraser]").click();
+        whiteboard.redrawMouseCursor();
+    }),
+    thickness_bigger: defineShortcut(() => {
+        const thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
+        $("#whiteboardThicknessSlider").val(thickness);
+        whiteboard.setStrokeThickness(thickness);
+        whiteboard.redrawMouseCursor();
+    }),
+    thickness_smaller: defineShortcut(() => {
+        const thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
+        $("#whiteboardThicknessSlider").val(thickness);
+        whiteboard.setStrokeThickness(thickness);
+        whiteboard.redrawMouseCursor();
+    }),
+    openColorPicker: defineShortcut(() => $("#whiteboardColorpicker").click()),
+    saveWhiteboardAsImage: defineShortcut(() => $("#saveAsImageBtn").click(), false),
+    saveWhiteboardAsJson: defineShortcut(() => $("#saveAsJSONBtn").click(), false),
+    uploadWhiteboardToWebDav: defineShortcut(() => $("#uploadWebDavBtn").click()),
+    uploadJsonToWhiteboard: defineShortcut(() => $("#uploadJsonBtn").click()),
+    shareWhiteboard: defineShortcut(() => $("#shareWhiteboardBtn").click(), false),
+    hideShowControls: defineShortcut(() => $("#minMaxBtn").click(), false),
+
+    setDrawColorBlack: defineShortcut(() => {
+        whiteboard.setDrawColor("black");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorRed: defineShortcut(() => {
+        whiteboard.setDrawColor("red");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorGreen: defineShortcut(() => {
+        whiteboard.setDrawColor("green");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorBlue: defineShortcut(() => {
+        whiteboard.setDrawColor("blue");
+        whiteboard.redrawMouseCursor();
+    }),
+    setDrawColorYellow: defineShortcut(() => {
+        whiteboard.setDrawColor("yellow");
+        whiteboard.redrawMouseCursor();
+    }),
+    toggleLineRecCircle: defineShortcut(() => {
+        const activeTool = $(".whiteboard-tool.active").attr("tool");
+        if (activeTool === "line") {
+            $(".whiteboard-tool[tool=rect]").click();
+        } else if (activeTool === "rect") {
+            $(".whiteboard-tool[tool=circle]").click();
+        } else {
+            $(".whiteboard-tool[tool=line]").click();
+        }
+    }),
+    togglePenEraser: defineShortcut(() => {
+        const activeTool = $(".whiteboard-tool.active").attr("tool");
+        if (activeTool === "pen") {
+            $(".whiteboard-tool[tool=eraser]").click();
+        } else {
+            $(".whiteboard-tool[tool=pen]").click();
+        }
+    }),
+    toggleMainColors: defineShortcut(() => {
+        const bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
+        if (bgColor === "blue") {
+            shortcutFunctions.setDrawColorGreen();
+        } else if (bgColor === "green") {
+            shortcutFunctions.setDrawColorYellow();
+        } else if (bgColor === "yellow") {
+            shortcutFunctions.setDrawColorRed();
+        } else if (bgColor === "red") {
+            shortcutFunctions.setDrawColorBlack();
+        } else {
+            shortcutFunctions.setDrawColorBlue();
+        }
+    }),
+    moveDraggableUp: defineShortcut(() => {
+        const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({top: p.top - 5, left: p.left})
+    }),
+    moveDraggableDown: defineShortcut(() => {
+        const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({top: p.top + 5, left: p.left})
+    }),
+    moveDraggableLeft: defineShortcut(() => {
+        const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({top: p.top, left: p.left - 5})
+    }),
+    moveDraggableRight: defineShortcut(() => {
+        const elm = whiteboard.tool === "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
+        const p = $(elm).position();
+        if (p) $(elm).css({top: p.top, left: p.left + 5})
+    }),
+    dropDraggable: defineShortcut(() => {
+        $($(".dragMe")[0]).find('.addToCanvasBtn').click();
+    }),
+    addToBackground: defineShortcut(() => {
+        $($(".dragMe")[0]).find('.addToBackgroundBtn').click();
+    }),
+    cancelAllActions: defineShortcut(() => whiteboard.escKeyAction()),
+    deleteSelection: defineShortcut(() => whiteboard.delKeyAction()),
+}
+
+export default shortcutFunctions;