Cleanup css and bind some menu entries

Signed-off-by: Rachel <508861+Ryex@users.noreply.github.com>

www/css/dark.css

@@ -3,15 +3,15 @@ body {
   height: 100%;
   margin: 0;
 }
+
 .ace_tooltip {
   background-color: #343a40;
   color: #dee2e6;
 }
+
 .ace_status-indicator {
   color: #dee2e6;
   position: relative;
-  /* right: 10px; */
-  /* left: 5px; */
   bottom: 4px;
   border-left: 1px solid;
   border-right: 1px solid;
@@ -20,31 +20,275 @@ body {
   padding-left: 5px;
   padding-right: 5px;
 }
+
+#ace_settingsmenu,
+#kbshortcutmenu {
+  background-color: rgb(33, 37, 41);
+  color: rgb(222, 226, 230);
+  box-shadow: -20px 10px 25px rgba(26, 26, 26, 0.25);
+  padding: 1em 0.5em 2em 1em;
+  overflow: auto;
+  position: absolute;
+  margin: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  z-index: 9991;
+  cursor: default;
+}
+
+.ace_optionsMenuEntry:hover {
+  background-color: #161719;
+  transition: all 0.3s
+}
+
+.ace_closeButton {
+  background: rgba(245, 146, 146, 0.5);
+  border: 1px solid #F48A8A;
+  border-radius: 50%;
+  padding: 7px;
+  position: absolute;
+  right: -8px;
+  top: -8px;
+  z-index: 100000;
+}
+
+.ace_closeButton {
+  background: rgba(245, 146, 146, 0.9);
+}
+
+.ace_optionsMenuKey {
+  color: #dee2e6;
+  font-weight: bold;
+}
+
+.ace_optionsMenuCommand {
+  color: #6ea8fe;
+  font-weight: normal;
+}
+
+.ace_optionsMenuEntry input,
+.ace_optionsMenuEntry button {
+  vertical-align: middle;
+}
+
+.ace_optionsMenuEntry button[ace_selected_button=true] {
+  background: #e7e7e7;
+  box-shadow: 1px 0px 2px 0px #adadad inset;
+  border-color: #adadad;
+}
+
+.ace_optionsMenuEntry button {
+  background: white;
+  border: 1px solid lightgray;
+  margin: 0px;
+}
+
+.ace_optionsMenuEntry button:hover {
+  background: #f0f0f0;
+}
+
+/* ------------------------------------------------------------------------------------------
+* Editor Search Form
+* --------------------------------------------------------------------------------------- */
+.ace_search {
+  background-color: #2b3035;
+  color: #dee2e6;
+  border: 1px solid #495057;
+  border-top: 0 none;
+  overflow: hidden;
+  margin: 0;
+  padding: 4px 6px 0 4px;
+  position: absolute;
+  top: 0;
+  z-index: 99;
+  white-space: normal;
+}
+
+.ace_search.left {
+  border-left: 0 none;
+  border-radius: 0px 0px 5px 0px;
+  left: 0;
+}
+
+.ace_search.right {
+  border-radius: 0px 0px 0px 5px;
+  border-right: 0 none;
+  right: 0;
+}
+
+.ace_search_form,
+.ace_replace_form {
+  margin: 0 20px 4px 0;
+  overflow: hidden;
+  line-height: 1.9;
+}
+
+.ace_replace_form {
+  margin-right: 0;
+}
+
+.ace_search_form.ace_nomatch {
+  outline: 1px solid red;
+}
+
+.ace_search_field {
+  border-radius: 3px 0 0 3px;
+  background-color: #343a40;
+  color: #dee2e6;
+  border: 1px solid #41464b;
+  border-right: 0 none;
+  outline: 0;
+  padding: 0;
+  font-size: inherit;
+  margin: 0;
+  line-height: inherit;
+  padding: 0 6px;
+  min-width: 17em;
+  vertical-align: top;
+  min-height: 1.8em;
+  box-sizing: content-box;
+}
+
+.ace_searchbtn {
+  border: 1px solid #6c757d;
+  line-height: inherit;
+  display: inline-block;
+  padding: 0 6px;
+  background: #343a40;
+  border-right: 0 none;
+  border-left: 1px solid #6c757d;
+  ;
+  cursor: pointer;
+  margin: 0;
+  position: relative;
+  color: #fff;
+}
+
+.ace_searchbtn:last-child {
+  border-radius: 0 3px 3px 0;
+  border-right: 1px solid #6c757d;
+}
+
+.ace_searchbtn:disabled {
+  background: none;
+  cursor: default;
+}
+
+.ace_searchbtn:hover {
+  background-color: #161719;
+}
+
+.ace_searchbtn.prev,
+.ace_searchbtn.next {
+  padding: 0px 0.7em
+}
+
+.ace_searchbtn.prev:after,
+.ace_searchbtn.next:after {
+  content: "";
+  border: solid 2px #6c757d;
+  width: 0.5em;
+  height: 0.5em;
+  border-width: 2px 0 0 2px;
+  display: inline-block;
+  transform: rotate(-45deg);
+}
+
+.ace_searchbtn.next:after {
+  border-width: 0 2px 2px 0;
+}
+
+.ace_searchbtn_close {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
+  border-radius: 50%;
+  border: 0 none;
+  color: #343a40;
+  cursor: pointer;
+  font: 16px/16px Arial;
+  padding: 0;
+  height: 14px;
+  width: 14px;
+  top: 9px;
+  right: 7px;
+  position: absolute;
+}
+
+.ace_searchbtn_close:hover {
+  background-color: #656565;
+  background-position: 50% 100%;
+  color: white;
+}
+
+.ace_button {
+  background-color: #343a40;
+  margin-left: 2px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+  opacity: 0.7;
+  border: 1px solid #6c757d;
+  padding: 1px;
+  box-sizing: border-box !important;
+  color: #fff;
+}
+
+.ace_button:hover {
+  background-color: #161719;
+  opacity: 1;
+}
+
+.ace_button:active {
+  background-color: #6c757d;
+  ;
+}
+
+.ace_button.checked {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  opacity: 1;
+}
+
+.ace_search_options {
+  margin-bottom: 3px;
+  text-align: right;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  clear: both;
+}
+
+.ace_search_counter {
+  float: left;
+  font-family: arial;
+  padding: 0 8px;
+}
+
+/* ----------------
+*  End Ace Search
+*  --------------- */
+
 code {
   color: #e685b5
 }
-/* .navbar { */
+
-/*   position: relative; */
-/*   min-height: 30px; */
-/*   margin-bottom: 5px; */
-/*   border: 1px solid; */
-/*   padding: 0; */
-/**/
-/* } */
 .navbar-default {
-  background-color: #343a40 ;
+  background-color: #343a40;
   border-color: #495057;
 }
-/* @media (min-width: 768px) { */
+
-/*   .navbar { */
-/*     border-radius: 4px; */
-/*   } */
-/* } */
 .navbar-brand {
   float: left;
   padding: 5px 5px;
   font-size: 18px;
 }
+
 .navbar-default .navbar-brand {
   color: #fff;
   text-wrap: nowrap;
@@ -55,78 +299,57 @@ code {
   text-decoration: none;
 }
 
-/* .nav { */
+.nav>li {
-/*   padding-left: 0; */
-/*   margin-bottom: 0; */
-/*   list-style: none; */
-/*   flex-wrap: nowrap; */
-/* } */
-/**/
-/* ol, ul { */
-/*   margin-top: 0; */
-/*   margin-bottom: 5px; */
-/* } */
-.nav > li {
   position: relative;
   display: block;
 }
-.navbar-default .navbar-nav > li > a {
+
+.navbar-default .navbar-nav>li>a {
   color: #fff;
 }
+
 .navbar-default .navbar-text {
   color: #fff;
   text-wrap: nowrap;
   white-space: nowrap;
 }
+
 .navbar-text {
   padding: 0;
-  padding-right: 10px; 
+  padding-right: 10px;
   position: relative;
 }
-/* .navbar-nav { */
+
-/*   display: block; */
+.navbar-nav>li>a {
-/* } */
-/* @media (min-width: 768px) { */
-/*   .navbar-header { */
-/*     float: left; */
-/*   } */
-/* } */
-/* @media (min-width: 768px) { */
-/*     .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { */
-/*     margin-left: -15px; */
-/*     } */
-/* } */
-/* @media (min-width: 768px) { */
-/*   .navbar-nav { */
-/*     float: left; */
-/*     margin: 0; */
-/*   } */
-/* } */
-.navbar-nav > li > a {
   padding-top: 10px;
   padding-bottom: 10px;
   line-height: 20px;
 }
+
 @media (min-width: 768px) {
-  .navbar-nav > li > a {
+  .navbar-nav>li>a {
     padding-top: 15px;
     padding-bottom: 15px;
   }
 }
-.nav > li > a {
+
+.nav>li>a {
   position: relative;
   display: block;
   padding: 10px 15px;
-    padding-top: 10px;
+  padding-top: 10px;
-    padding-bottom: 10px;
+  padding-bottom: 10px;
 }
+
 .navbar-nav .dropdown-menu {
   position: absolute;
   left: .5rem;
 }
+
 .modal-title {
   color: #fff;
 }
+
 .modal-body button {
   color: #fff
 }

www/index.html

@@ -47,12 +47,12 @@
   <link rel="stylesheet" href="css/dark.css" />
 </head>
 
-<body>
+<body class="">
   <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
   <script src="./bootstrap.js"></script>
   <div class="App" data-bs-theme="dark">
     <div id="modelShareLink" class="modal fade" tabindex="-1" aria-hidden="true" data-bs-theme="dark">
-      qGZscVxOrTb9tsMA<div class="modal-dialog">
+      <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">Share This Code!</h5>
@@ -149,6 +149,11 @@
           </li>
           <li><button id="mainMenuEditorSettings" class="dropdown-item" type="button" data-bs-toggle="offcanvas"
               data-bs-target="#editorSettings" aria-controls="editorSettings">Editor Settings</button></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><button id="mainMenuKeyboardShortcuts" class="dropdown-item" type="button">Show Keyboard
+              Shortcuts</button></li>
         </ul>
       </div>
       <div class="nav navbar-nav navbar-header">

www/src/index.js

@@ -325,11 +325,23 @@ docReady(() => {
     firstLineNumber: 0,
     printMarginColumn: 52,
   });
+
+  editor.commands.addCommand({
+    name: "showSettingsMenu",
+    description: "Show settings menu",
+    bindKey: { win: "Ctrl-,", mac: "Command-," },
+    exec: (_editor) => {
+      const offCanvas = new bootstrap.Offcanvas(document.getElementById("editorSettings"));
+      offCanvas.toggle();
+    }
+  });
+
   loadEditorSettings(EditorSettings);
   displayEditorSettings(EditorSettings);
   updateEditorSettings(editor, EditorSettings);
   reCalcEditorSize(editor);
   window.addEventListener('resize', (e) => { reCalcEditorSize(editor) });
+
   document.getElementsByName("editorKeybindRadio").forEach((el) => {
     el.addEventListener('change', (e) => {
       EditorSettings.keyboard = e.target.value;
@@ -357,9 +369,14 @@ docReady(() => {
 
   console.log(editor.getOption('keyboardHandler'));
 
+  let sessionChangeTimeout = 0;
   editor.getSession().on('change', () => {
-    var val = editor.getSession().getValue();
+    if (sessionChangeTimeout) clearTimeout(sessionChangeTimeout);
-    setDocFragment(val);
+    sessionChangeTimeout = setTimeout(() => {
+      var val = editor.getSession().getValue();
+      setDocFragment(val);
+      sessionChangeTimeout = 0;
+    }, 1000);
   });
 
   editor.setTheme("ace/theme/one_dark");
@@ -375,12 +392,12 @@ docReady(() => {
 
   getContentFromFragment(editor, demoCode);
 
-  window.addEventListener('hashchange', (event) => {
+  window.addEventListener('hashchange', (_event) => {
     getContentFromFragment(editor, "");
   });
 
   // Menu
-  document.getElementById("mainMenuShare").addEventListener('click', (event) => {
+  document.getElementById("mainMenuShare").addEventListener('click', (_event) => {
     const link = document.getElementById("shareLinkText");
     link.setAttribute('value', window.location);
     link.setSelectionRange(0, 0);
@@ -391,15 +408,17 @@ docReady(() => {
     link.select();
     link.setSelectionRange(0, 99999);
     navigator.clipboard.writeText(link.value);
-
   }, { capture: true });
-  document.getElementById("mainMenuOpenFile").addEventListener('click', (event) => {
+  document.getElementById("mainMenuOpenFile").addEventListener('click', (_event) => {
     openFile(editor);
   }, { capture: true });
-  document.getElementById("mainMenuSaveAs").addEventListener('click', (event) => {
+  document.getElementById("mainMenuSaveAs").addEventListener('click', (_event) => {
     saveFile(editor.getSession().getValue())
 
   }, { capture: true });
+  document.getElementById("mainMenuKeyboardShortcuts").addEventListener('click', (_event) => {
+    editor.execCommand("showKeyboardShortcuts");
+  }, { capture: true });
 });
 
 async function saveFile(content) {