feat: convert "editor spec" to Playwright (#54970)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

cypress/e2e/default/learn/common-components/editor.ts

@@ -1,29 +0,0 @@
-const editorElement = {
-  editor: '.monaco-editor'
-};
-
-describe('Editor Shortcuts', () => {
-  it('Should handle Alt+Enter', () => {
-    cy.visit(
-      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
-    );
-    cy.get(editorElement.editor, { timeout: 15000 })
-      .first()
-      .click()
-      .focused()
-      .type('{alt}{enter}')
-      .should('have.value', '<h1>Hello</h1>\n');
-  });
-
-  it('Should ignore Ctrl+Enter', () => {
-    cy.visit(
-      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
-    );
-    cy.get(editorElement.editor, { timeout: 15000 })
-      .first()
-      .click()
-      .focused()
-      .type('{ctrl}{enter}')
-      .should('have.value', '<h1>Hello</h1>');
-  });
-});

e2e/legacy-editor.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { focusEditor } from './utils/editor';
+
+test.describe('Editor Shortcuts', () => {
+  test('Should add a new line if the user presses Alt+Enter', async ({
+    page,
+    isMobile
+  }) => {
+    await page.goto(
+      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+    await focusEditor({ page, isMobile });
+
+    await page.keyboard.press('Alt+Enter');
+    await expect(
+      page
+        .getByTestId('editor-container-indexhtml')
+        .getByText('<h1>Hello</h1>\n')
+    ).toBeVisible();
+  });
+
+  test('Should not add a new line if the user presses Ctrl+Enter', async ({
+    page,
+    isMobile
+  }) => {
+    await page.goto(
+      'learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+    await focusEditor({ page, isMobile });
+
+    await page.keyboard.press('Control+Enter');
+    await expect(
+      page.getByTestId('editor-container-indexhtml').getByText('<h1>Hello</h1>')
+    ).toBeVisible();
+  });
+});