Settings

src/css/console.css

@@ -59,6 +59,12 @@
     border: solid #4f4f4f 0.5px;
 }
 
+.settings-btn{
+    box-shadow: none;
+    background-color: #69a;
+    color: #fff !important;
+}
+
 .console-button {
     color: #000;
     cursor: pointer;

src/css/index.css

@@ -12,6 +12,7 @@
 @import url("notification.css");
 @import url("tooltip.css");
 @import url("accordion.css");
+@import url("settings.css");
 
 @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap");
 

src/css/settings.css

@@ -0,0 +1,111 @@
+.settingsModal {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(102, 153, 170);
+    background-color: rgba(102, 153, 170, 0.4);
+}
+
+.settingsContainer{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    position: fixed;
+    left: 50%;
+    top: 25%;
+    transform: translate(-50%, -50%);
+    width: 300px;
+    height: 300px;
+    border: 1px solid black;
+    background-color: #fff;
+    padding: 10px;
+    font-family: Consolas, "Courier New", monospace;
+    border-radius: 10px;
+}
+
+.settingsHeader{
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 500;
+    border-bottom: 1px solid black;
+}
+
+.settingsFooter{
+    margin-top: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.exitBtn{
+    padding: 8px 10px;
+    color: #fff;
+    background-color: rgb(225, 100, 116);
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
+}
+
+.setting{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toggleBtn{
+    position:relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.toggleBtn input{
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggleBtnSlider{
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.toggleBtnSlider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .toggleBtnSlider {
+    background-color: #69a;
+}
+
+input:focus + .toggleBtnSlider {
+    box-shadow: 0 0 1px #69a;
+}
+
+input:checked + .toggleBtnSlider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}

src/css/suggestion-menu.css

@@ -120,3 +120,40 @@
 .categoryOption {
     padding-left: 10px;
 }
+
+.spotlightModal{
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+
+.spotlight{
+    font-family: Consolas, "Courier New", monospace;
+    padding: 7px;
+    box-shadow: 0px 0px 6px 1px #ccc inset;
+    border: 1px solid #ccc;
+
+    transition: box-shadow 0.15s ease-in-out;
+    -webkit-transition: box-shadow 0.15s ease-in-out;
+    -moz-transition: box-shadow 0.15s ease-in-out;
+    -o-transition: box-shadow 0.15s ease-in-out;
+    -ms-transition: box-shadow 0.15s ease-in-out;
+}
+
+.spotlight:focus{
+    box-shadow: 0px 0px 6px 1px #aaa inset;
+    font-weight: bold;
+}
+
+.spotlight:focus-visible {
+    border: 1px solid #bbb;
+    outline: none;
+    font-weight: bold;
+}

src/editor/action-executor.ts

@@ -1432,9 +1432,10 @@ export class ActionExecutor {
                 this.openAutocompleteMenu(
                     this.module.actionFilter
                         .getProcessedInsertionsList()
-                        .filter((item) => item.insertionResult.insertionType != InsertionType.Invalid)
+                        .filter((item) => item.insertionResult.insertionType != InsertionType.Invalid),
+                    true
                 );
-                this.styleAutocompleteMenu(context.position);
+                this.styleAutocompleteMenu(context.position, true);
 
                 break;
 
@@ -1886,10 +1887,10 @@ export class ActionExecutor {
         }
     }
 
-    private openAutocompleteMenu(inserts: EditCodeAction[]) {
+    private openAutocompleteMenu(inserts: EditCodeAction[], isSpotlightSearch = false) {
         if (!this.module.menuController.isMenuOpen()) {
             inserts = inserts.filter((insert) => insert.insertionResult.insertionType !== InsertionType.Invalid);
-            this.module.menuController.buildSingleLevelMenu(inserts);
+            this.module.menuController.buildSingleLevelMenu(inserts, { left: 0, top: 0 }, isSpotlightSearch);
         } else this.module.menuController.removeMenus();
     }
 
@@ -2225,8 +2226,11 @@ export class ActionExecutor {
         );
     }
 
-    private styleAutocompleteMenu(pos: Position) {
+    private styleAutocompleteMenu(pos: Position, isSpotlightSearch: boolean = false) {
         this.module.menuController.styleMenuOptions();
-        this.module.menuController.updatePosition(this.module.menuController.getNewMenuPositionFromPosition(pos));
+        this.module.menuController.updatePosition(
+            this.module.menuController.getNewMenuPositionFromPosition(pos),
+            isSpotlightSearch
+        );
     }
 }

src/editor/event-router.ts

@@ -2,6 +2,7 @@ import { editor, IKeyboardEvent, IScrollEvent, Position } from "monaco-editor";
 
 import * as ast from "../syntax-tree/ast";
 import { Module } from "../syntax-tree/module";
+import { Settings } from "../utilities/settings";
 import { AutoCompleteType, DataType, IdentifierRegex, InsertionType } from "./../syntax-tree/consts";
 import { EditCodeAction } from "./action-filter";
 import { Actions, Docs, EditActionType, InsertActionType, KeyPress } from "./consts";
@@ -10,12 +11,14 @@ import { Context } from "./focus";
 
 export class EventRouter {
     module: Module;
+    settings: Settings;
     curPosition: Position;
     buttonClicksCount = new Map<string, number>();
 
     constructor(module: Module) {
         this.module = module;
         this.curPosition = module.editor.monaco.getPosition();
+        this.settings = new Settings();
     }
 
     getKeyAction(e: KeyboardEvent, providedContext?: Context): EditAction {
@@ -271,7 +274,12 @@ export class EventRouter {
 
             case KeyPress.Space: {
                 if (inTextEditMode) return new EditAction(EditActionType.InsertChar);
-                if (!inTextEditMode && e.ctrlKey && e.key.length == 1) {
+                if (
+                    !inTextEditMode &&
+                    e.ctrlKey &&
+                    e.key.length == 1 &&
+                    this.settings.getSettingsObject()["Spotlight Search"]
+                ) {
                     return new EditAction(EditActionType.OpenValidInsertMenu);
                 }
 

src/index.html

@@ -32,6 +32,7 @@ <h2>Defined Variables</h2>
                     <div class="run-code-button-container">
                         <div class="console-button run-code-btn disabled" id="runCodeBtn">> Run Code</div>
                         <div class="console-button clear-output-btn" id="clearOutputBtn">Clear Console</div>
+                        <div class="console-button settings-btn" id="settingsBtn">Settings</div>
                     </div>
                     <div id="outputDiv"></div>
                 </div>