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 (file)
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 2aa85f5eac8aaf5c5120ceb0058dc94d681f7b31..8e3c9b50ca94f64ebcd129517d1f98db6a2bb7fc 100644 (file)
--- 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 4779c287f21ea1a02909f769c539c6c330fc47e8..781fd35786b8c3a5c1714f1f577f75876ee9f8e3 100644 (file)
--- 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;