From: Michael D. Lowis <mike.lowis@gentex.com>
Date: Wed, 29 Nov 2017 17:04:15 +0000 (-0500)
Subject: added js code to tweak editor controls for code blocks and keyboard shortcuts
X-Git-Url: https://git.mdlowis.com/?a=commitdiff_plain;h=c8a883cbb7c4046979cb8766f95703a462f964a3;p=proto%2Fjournal.git

added js code to tweak editor controls for code blocks and keyboard shortcuts
---

diff --git a/editor.js b/editor.js
new file mode 100644
index 0000000..bbf659c
--- /dev/null
+++ b/editor.js
@@ -0,0 +1,46 @@
+"use strict";
+
+(() => {
+    const getSelNode = () => {
+        const node = document.getSelection().anchorNode;
+        return (node.nodeType == 3 ? node.parentNode : node);
+    }
+
+    const ctrlKey = (evnt, cmd) => {
+        if (evnt.ctrlKey) {
+            document.execCommand(cmd,false)
+            return false;
+        }
+        return true;
+    }
+
+    const keys = {
+        "b": (evnt) => (ctrlKey("bold")),
+        "i": (evnt) => (ctrlKey("italic")),
+        "u": (evnt) => (ctrlKey("underline")),
+
+        "Enter": () => {
+            if (getSelNode().nodeName === "CODE")
+                document.execCommand("insertHTML",false,"\n");
+            else
+                document.execCommand("insertParagraph",false)
+            return false;
+        },
+
+        "Tab": (evnt) => {
+            if (getSelNode().nodeName === "CODE")
+                document.execCommand("insertHTML",false,"    ");
+            else if (evnt.shiftKey)
+                document.execCommand("outdent",false)
+            else
+                document.execCommand("indent",false)
+            return false;
+        },
+    }
+
+    content.onkeydown = (evnt) => {
+        console.log(evnt);
+        const keyfn = keys[evnt.key];
+        return (keyfn ? keyfn(evnt) : true);
+    }
+})();
diff --git a/index.html b/index.html
index 2aa85f5..8e3c9b5 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
                 </h1>
                 <hr>
             </header>
-            <article contenteditable="true">
+            <article id="content" contenteditable="true">
                 <h1>Heading 1</h1>
                 <h2>Heading 2</h2>
                 <h3>Heading 3</h3>
@@ -43,19 +43,20 @@
                 	</thead>
                 	<tbody>
                     	<tr>
-                        	<td>Header 1</td>
-                        	<td>Header 2</td>
+                        	<td>Cell 1</td>
+                        	<td>Cell 2</td>
                     	</tr>
                 	</tbody>
                 </table>
 
                 <p>code block:</p>
-                <pre><code>void main(int argc, char** argv) {
+                <code>void main(int argc, char** argv) {
     return 0;
-}</code></pre>
+}</code>
                 <p>Paragraph text:<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl tellus, lacinia lobortis feugiat eu, fermentum sit amet nulla. Donec tincidunt feugiat tortor, sit amet varius nisi posuere ultrices. Suspendisse feugiat, massa in dictum ultricies, mauris neque tincidunt ex, sit amet pharetra risus urna vel velit. Phasellus mattis magna vitae mollis venenatis. Vestibulum pulvinar sem quis efficitur tincidunt. Morbi tempor neque id erat placerat, ac iaculis ex venenatis. Duis porttitor euismod augue, et ullamcorper quam sodales nec. Vestibulum ultricies pellentesque mattis. Nulla sit amet felis auctor, pellentesque nunc a, suscipit ligula. Praesent in justo dolor. Nullam eleifend tempus mi ac malesuada. Mauris et libero lacus.</p>
                 <br/>
             </article>
         </section>
+        <script src="editor.js"></script>
     </body>
 </html>
diff --git a/style.css b/style.css
index 4779c28..781fd35 100644
--- a/style.css
+++ b/style.css
@@ -36,6 +36,9 @@ pre > code {
 }
 
 code {
+    display: block;
+    padding: 1rem 1.5rem;
+    white-space: pre;
     margin: 0.2rem;
     background: #F1F1F1;
     border: 1px solid #E1E1E1;