]> git.mdlowis.com Git - proto/journal.git/commitdiff
Added shortcuts for common tags to editor.
authorMichael D. Lowis <mike.lowis@gentex.com>
Wed, 29 Nov 2017 20:57:00 +0000 (15:57 -0500)
committerMichael D. Lowis <mike.lowis@gentex.com>
Wed, 29 Nov 2017 20:57:00 +0000 (15:57 -0500)
editor.js
style.css

index bbf659cb67cf7e256f49c8810a6a727a991ee4b3..3a8b7679f6ad5eb895a9fd8521f5191d9e53b1dd 100644 (file)
--- a/editor.js
+++ b/editor.js
@@ -3,40 +3,59 @@
 (() => {
     const getSelNode = () => {
         const node = document.getSelection().anchorNode;
-        return (node.nodeType == 3 ? node.parentNode : node);
-    }
+        return (node.nodeType === 3 ? node.parentNode : node);
+    };
 
-    const ctrlKey = (evnt, cmd) => {
+    const ctrlKey = (evnt, cmd, arg) => {
+        console.log(evnt.ctrlKey);
         if (evnt.ctrlKey) {
-            document.execCommand(cmd,false)
+            document.execCommand(cmd,false,arg);
             return false;
         }
         return true;
-    }
+    };
+
+    const ctrlShiftKey = (evnt, cmd, arg) => {
+        console.log(evnt.ctrlKey);
+        if (evnt.ctrlKey && evnt.shiftKey) {
+            document.execCommand(cmd,false,arg);
+            return false;
+        }
+        return true;
+    };
 
     const keys = {
-        "b": (evnt) => (ctrlKey("bold")),
-        "i": (evnt) => (ctrlKey("italic")),
-        "u": (evnt) => (ctrlKey("underline")),
+        "b": (evnt) => (ctrlKey(evnt,"bold")),
+        "i": (evnt) => (ctrlKey(evnt,"italic")),
+        "u": (evnt) => (ctrlKey(evnt,"underline")),
+        ";": (evnt) => (ctrlKey(evnt,"insertHTML", "<code>\r\n</code>")),
+        "'": (evnt) => (ctrlKey(evnt,"formatBlock", "<blockquote>")),
+        "0": (evnt) => (ctrlKey(evnt,"formatBlock", "<p>")),
+        "1": (evnt) => (ctrlKey(evnt,"formatBlock", "<h1>")),
+        "2": (evnt) => (ctrlKey(evnt,"formatBlock", "<h2>")),
+        "3": (evnt) => (ctrlKey(evnt,"formatBlock", "<h3>")),
+        "4": (evnt) => (ctrlKey(evnt,"formatBlock", "<h4>")),
+        "5": (evnt) => (ctrlKey(evnt,"formatBlock", "<h5>")),
+        "6": (evnt) => (ctrlKey(evnt,"formatBlock", "<h6>")),
+        "#": (evnt) => (ctrlShiftKey(evnt,"insertOrderedList")),
+        "*": (evnt) => (ctrlShiftKey(evnt,"insertUnorderedList")),
 
         "Enter": () => {
             if (getSelNode().nodeName === "CODE")
                 document.execCommand("insertHTML",false,"\n");
             else
-                document.execCommand("insertParagraph",false)
+                document.execCommand("insertParagraph",false);
             return false;
         },
 
         "Tab": (evnt) => {
             if (getSelNode().nodeName === "CODE")
-                document.execCommand("insertHTML",false,"    ");
-            else if (evnt.shiftKey)
-                document.execCommand("outdent",false)
+                document.execCommand("insertHTML",false,"\t");
             else
-                document.execCommand("indent",false)
+                document.execCommand((evnt.shiftKey ? "out" : "in")+"dent",false);
             return false;
         },
-    }
+    };
 
     content.onkeydown = (evnt) => {
         console.log(evnt);
index 781fd35786b8c3a5c1714f1f577f75876ee9f8e3..52721ed0ec6d35807de7344144d1114cd963e361 100644 (file)
--- a/style.css
+++ b/style.css
@@ -18,6 +18,7 @@ h3 { font-size: 1.17rem; }
 h4 { font-size: 1.0rem; }
 h5 { font-size: 0.83rem; }
 h6 { font-size: 0.67rem; }
+a { color: deepskyblue; }
 
 /* table styling: Github or skeleton table style */
 table {
@@ -29,12 +30,6 @@ table {
 }
 
 /* code blocks */
-pre > code {
-    display: block;
-    padding: 1rem 1.5rem;
-    white-space: pre;
-}
-
 code {
     display: block;
     padding: 1rem 1.5rem;
@@ -43,6 +38,9 @@ code {
     background: #F1F1F1;
     border: 1px solid #E1E1E1;
     border-radius: 4px;
+    -moz-tab-size: 4;
+    -o-tab-size:   4;
+    tab-size:      4;
 }
 
 /* code blocks */
@@ -54,9 +52,6 @@ blockquote {
     margin-right: 0px;
 }
 
-/* link styling */
-a { color: deepskyblue; }
-
 /* table formatting */
 table {
     width: 100%;