From 9d1dd3eaf2593ea1bcb5ef8af4eb9fc05abd3e4f Mon Sep 17 00:00:00 2001
From: AndiBraimllari <AndiBraimllari@users.noreply.github.com>
Date: Mon, 6 May 2024 19:14:18 +0200
Subject: [PATCH] general improvements (#483)

* changes

* add m/M shortcut for side menu

* add tests for shortcuts

---------

Co-authored-by: Andi Braimllari <>
---
 cypress/e2e/general-flows.cy.js      | 10 +++++-----
 cypress/e2e/shortcuts.cy.js          | 12 ++++++++++++
 src/app/header/header.component.html |  1 +
 src/app/home/home.component.html     |  2 +-
 src/app/home/home.component.ts       |  4 ++++
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/cypress/e2e/general-flows.cy.js b/cypress/e2e/general-flows.cy.js
index 24346c4d..6d7148fc 100644
--- a/cypress/e2e/general-flows.cy.js
+++ b/cypress/e2e/general-flows.cy.js
@@ -31,12 +31,12 @@ describe("general flows", () => {
 
     it("should mark typos in the editor", () => {
         cy.get('[data-test="editor"]').type("gabmim ");
-        cy.get('[data-test="editor"] > p > .typo').should("be.visible");
+        cy.get('.typo').should("be.visible");
     });
 
     it("should mark loanwords in the editor", () => {
         cy.get('[data-test="editor"]').type("lider ");
-        cy.get('[data-test="editor"] > p > .loanword').should("be.visible");
+        cy.get('.loanword').should("be.visible");
     });
 
     it("should open and close the side menu as expected", () => {
@@ -207,7 +207,7 @@ describe("general flows", () => {
             .find('[data-test="blur-marking-button"]')
             .click();
         cy.get(".typo").first().click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 3)
             .should("be.visible");
 
@@ -216,7 +216,7 @@ describe("general flows", () => {
             .first()
             .click();
         cy.get(".typo").first().click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 2)
             .should("be.visible");
 
@@ -224,7 +224,7 @@ describe("general flows", () => {
             .find('[data-test="suggestion"]')
             .first()
             .click();
-        cy.get("#editor > p > .typo")
+        cy.get(".typo")
             .should("have.length", 1)
             .should("be.visible");
 
diff --git a/cypress/e2e/shortcuts.cy.js b/cypress/e2e/shortcuts.cy.js
index 0584293c..68c9ee45 100644
--- a/cypress/e2e/shortcuts.cy.js
+++ b/cypress/e2e/shortcuts.cy.js
@@ -37,6 +37,12 @@ describe("Shortcuts", () => {
             });
         });
 
+        cy.get("#offcanvasStart").should("not.be.visible");
+        cy.get("body").type("m");
+        cy.get("#offcanvasStart").should("be.visible");
+        cy.get("body").type("M");
+        cy.get("#offcanvasStart").should("not.be.visible");
+
         cy.get('[data-test="modal-dialog"]').should("not.be.visible");
         cy.get("body").type("h");
         cy.get('[data-test="modal-dialog"]').should("be.visible");
@@ -76,6 +82,12 @@ describe("Shortcuts", () => {
             });
         });
 
+        cy.get("#offcanvasStart").should("not.be.visible");
+        cy.get("body").type("M");
+        cy.get("#offcanvasStart").should("be.visible");
+        cy.get("body").type("m");
+        cy.get("#offcanvasStart").should("not.be.visible");
+
         cy.get('[data-test="modal-dialog"]').should("not.be.visible");
         cy.get("body").type("h");
         cy.get('[data-test="modal-dialog"]').should("be.visible");
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index dcd4c0ee..4aaae6f4 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -7,6 +7,7 @@
     >
         <div class="header-name-gear-icon">
             <button
+                id='off-canvas-start-button'
                 class="off-canvas-start-button"
                 [ngClass]="{
                     'header-button-dark-mode': darkModeService.isDarkMode
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 7069b838..6d9b70a0 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -403,7 +403,7 @@
                                     processedText?.markings?.[
                                         highlightedMarkingIndex
                                     ]?.type
-                                }}"
+                                }}-marking-header"
                                 data-test="highlighted-marking"
                                 >{{
                                     getTextOfMarking(highlightedMarkingIndex)
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 5399ecab..ee1cd704 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1409,6 +1409,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
                         this.copyToClipboard();
                         return;
                     }
+                    case 'm':
+                    case 'M': {
+                        document.getElementById('off-canvas-start-button')!.click();
+                    }
                 }
             }