fix: prevent trapping keyboard focus (#3)

README.md

@@ -124,6 +124,12 @@ CodeCake.create(parent, {
 });
 ```
 
+## Preventing keyboard trap
+
+The `Tab` key is commonly used by developers to indent code. However, this can sometimes lead to unexpected behavior, where the focus remains trapped within the editor, disrupting the workflow. To address this, we have introduced the `Esc` `Tab` key combination to move to the next focusable element, and the `Esc` `Shift + Tab` key combination to move to the previous focusable element.
+
+Please note that **we do not provide built-in help or a dedicated user interface for this feature**. This is because the editor is designed as a lightweight code editor component, not a standalone application. Users are encouraged to consult the documentation or any user guides provided within the context of the web application that incorporates this component for information on available keyboard shortcuts and features.
+
 ## License
 
 CodeCake is released under the [MIT License](./LICENSE).

codecake.js

@@ -53,6 +53,7 @@ export const create = (parent, options = {}) => {
     let prevCode = "";
     let focus = false;
     let linesCount = -1;
+    let escKeyPressed = false;
     const listeners = {}; // Store events listeners
     const tab = options?.indentWithTabs ? "\t" : " ".repeat(options.tabSize || 4);
     const endl = String.fromCharCode(10);
@@ -130,7 +131,7 @@ export const create = (parent, options = {}) => {
                 insertText(endl + indentation);
             }
             // Handle backspace
-            else if (event.key === "Backspace" || (event.key === "Tab" && event.shiftKey)) {
+            else if (event.key === "Backspace" || (event.key === "Tab" && !escKeyPressed && event.shiftKey)) {
                 if (window.getSelection().type === "Caret") {
                     let removeChars = 0;
                     const pos = savePosition();
@@ -148,10 +149,12 @@ export const create = (parent, options = {}) => {
                 }
             }
             // Handle insert tab
-            else if (event.key === "Tab" && !event.shiftKey) {
+            else if (event.key === "Tab" && !escKeyPressed && !event.shiftKey) {
                 event.preventDefault();
                 insertText(tab);
             }
+            // Save if escape key has been pressed to avoid trapping keyboard focus
+            escKeyPressed = event.key === "Escape";
         }
     });
     editor.addEventListener("keyup", event => {