[FIX] Proper marking of flat compound statements while debugging (#4766)

**Description**

Changes the regex that was used to group the different parts of the flat compound statements to be able to properly color nested flat statements. Also changes the way the line is computed.

A nested flat statement are `if` with `repeat` inside or viceversa. You cannot place an `if` inside a `if`, but you can place a 
`repeat` inside a `repeat`.

Even though we say these statements are flat, it's possible to add newlines between them. And this is where the problem lied. When these statements where split between lines, the code did not account for beginning and end of statements properly.


**Fixes #4725 **

**How to test**

I added a couple of tests!

static/js/debugging.ts

@@ -38,8 +38,8 @@ const blockCommands = [
   'ifpressed_elifs',
 ]
 
-const ifRegex = "^((__if__) *[^\n ]+ *((__is__)|(__in__)) *[^\n ]+) *.+$";
-const repeatRegex = "^((__repeat__) *[^\n ]+ *(__times__)) *[^\n ]+ *.+$";
+const ifRegex = "((__if__) *[^\n ]+ *((__is__)|(__in__)) *[^\n ]+) *.*";
+const repeatRegex = "((__repeat__) *[^\n ]+ *(__times__)) *[^\n ]+ *.+";
 const elseRegex = "^(__else__) *[^\n ]+.+$";
 
 /**
@@ -357,8 +357,13 @@ export function incrementDebugLine() {
         break
       } else if (theLevel <= 7 && blockCommands.includes(map.command)){
         const lines = theGlobalEditor.contents.split('\n');
-        const fullLine = lines[map.hedy_range.from_line - 1];
-        const line = fullLine.substring(map.hedy_range.from_column - 1, map.hedy_range.to_column - 1);        
+        let line: string;
+        if (map.hedy_range.from_line < map.hedy_range.to_line) {
+          line = lines[map.hedy_range.from_line - 1];
+        } else {
+          const fullLine = lines[map.hedy_range.from_line - 1];
+          line = fullLine.substring(map.hedy_range.from_column - 1, map.hedy_range.to_column - 1);
+        }       
         const activeLine: string = theGlobalDebugger.get_source_line(lineNumber - 1);
 
         if (activeLine.match(/ *if/)) {

tests/cypress/e2e/hedy_page/debugger.cy.js

@@ -416,6 +416,70 @@ describe('Test editor box functionality', () => {
 
     cy.get('#output').should('contain.text', 'nice!');
   });
+
+  it('Test flat if split between lines', () => {
+    cy.intercept('/parse').as('parse');
+
+    visitLevel(5);
+
+    cy.focused().type("if x is y\nprint '!bonito!'\nelse print 'meh'");
+
+    cy.get('#debug_button').click();
+    cy.wait('@parse')
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq('if x is y'.split(' '));
+    });
+    cy.get('#debug_continue').click();
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq(['print', "'meh'"]);
+    });
+
+    cy.get('#debug_continue').click();
+
+    cy.get('#output').should('contain.text', 'meh');
+  });
+
+  it('Test repeat with flat if split between lines inside', () => {
+    cy.intercept('/parse').as('parse');
+
+    visitLevel(7);
+
+    cy.focused().type("repeat 1 times if x is x print 'a'\nelse print 'b'");
+
+    cy.get('#debug_button').click();
+    cy.wait('@parse')
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq('repeat 1 times'.split(' '));
+    });
+    cy.get('#debug_continue').click();
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq('repeat 1 times'.split(' '));
+    });
+    cy.get('#debug_continue').click();
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq('if x is x'.split(' '));
+    });
+    cy.get('#debug_continue').click();
+
+    cy.get('.cm-debugger-current-line > span').then(els => {
+      const texts = [...els].map(getText);
+      expect(texts).to.deep.eq(['print', "'a'"]);
+    });
+
+    cy.get('#debug_continue').click();
+
+    cy.get('#output').should('contain.text', 'a');
+  });
 });
 
 /**