Implement code and pre blocks support on web

.eslintrc.js

@@ -50,7 +50,7 @@ module.exports = {
     'es/no-nullish-coalescing-operators': 'off',
     'es/no-optional-chaining': 'off',
     '@typescript-eslint/no-use-before-define': 'off', // TODO consider enabling this (currently it reports styles defined at the bottom of the file)
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     '@typescript-eslint/consistent-type-imports': [
       'error',
       { prefer: 'type-imports' },

WebExample/__tests__/codeblock.spec.ts

@@ -0,0 +1,287 @@
+import {test, expect} from '@playwright/test';
+import type {Locator, Page} from '@playwright/test';
+// eslint-disable-next-line import/no-relative-packages
+import * as TEST_CONST from '../../example/src/testConstants';
+import {getElementValue, pressCmd, setCursorPosition, setupInput, testMarkdownContentStyle} from './utils';
+
+const CODEBLOCK_DEFAULT_STYLE =
+  'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 2px;';
+
+async function testCodeblockStyle(page: Page, dimmensions: {height: number; width: number} | null, style: string | null = CODEBLOCK_DEFAULT_STYLE) {
+  if (style === null) {
+    await testMarkdownContentStyle({
+      testContent: 'Codeblock',
+      style: 'margin: 0px; padding: 0px;',
+      page,
+    });
+    return;
+  }
+  await testMarkdownContentStyle({
+    testContent: 'Codeblock',
+    style,
+    dimmensions: dimmensions ?? undefined,
+    page,
+  });
+}
+
+async function getCodeblockElementCount(inputLocator: Locator) {
+  return inputLocator.locator(`span[data-type="codeblock"]`).count();
+}
+
+test.beforeEach(async ({page}) => {
+  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
+});
+
+test.describe('modifying codeblock content', () => {
+  test('keep newlines when writing after opening syntax', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 0);
+    await inputLocator.pressSequentially('test');
+
+    expect(await getElementValue(inputLocator)).toEqual('```test\nCodeblock\nSample code line\n```');
+    // Verify if the codeblock style wasn't applied
+    await testCodeblockStyle(page, null, null);
+  });
+
+  test('keep codeblock structure when writing in the empty last line', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n\n```');
+
+    await setCursorPosition(page, 6, 0);
+    await inputLocator.pressSequentially('test');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\ntest\n```');
+    await testCodeblockStyle(page, {
+      height: 84,
+      width: 198,
+    });
+  });
+
+  test('allow writing after closing syntax', async ({page}) => {
+    const codeblockDimmensions = {
+      height: 58,
+      width: 198,
+    };
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 6);
+    await testCodeblockStyle(page, codeblockDimmensions);
+    await inputLocator.pressSequentially('test');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\n```test');
+    // Verify if when typing after codeblock closing syntax, its height is not changed
+    await testCodeblockStyle(page, codeblockDimmensions);
+  });
+
+  test('remove whole codeblock', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await pressCmd({inputLocator, command: 'a'});
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('');
+  });
+
+  test('wrap content', async ({page}) => {
+    const LINE_TO_ADD = ' very long line of code that should be wrapped';
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 3);
+    await inputLocator.pressSequentially(LINE_TO_ADD);
+
+    expect(await getElementValue(inputLocator)).toEqual(`\`\`\`\nCodeblock${LINE_TO_ADD}\nSample code line\n\`\`\``);
+    await testCodeblockStyle(page, {
+      height: 110,
+      width: 288,
+    });
+  });
+
+  test('remove newline after opening syntax', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 2, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```Codeblock\nSample code line\n```');
+    // Verify if the codeblock style wasn't applied
+    await testCodeblockStyle(page, null, null);
+  });
+
+  test('remove newline after opening syntax with single line content', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\n```');
+
+    await setCursorPosition(page, 2, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```Codeblock\n```');
+    // Verify if the codeblock style wasn't applied
+    await testCodeblockStyle(page, null, null);
+  });
+
+  test('remove newline before closing syntax', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 6, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line```');
+    // Verify if the codeblock style wasn't applied
+    await testCodeblockStyle(page, null, null);
+  });
+
+  test('remove newline before closing syntax with one empty line at the end', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n\n```');
+
+    await setCursorPosition(page, 6, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\n```');
+    await testCodeblockStyle(page, {
+      height: 58,
+      width: 198,
+    });
+  });
+
+  test('remove newline before closing syntax with two empy lines at the end', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n\n\n```');
+
+    await setCursorPosition(page, 6, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\n\n```');
+    await testCodeblockStyle(page, {
+      height: 84,
+      width: 198,
+    });
+  });
+
+  test('remove newline before opening syntax', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('\n\n```\nCodeblock\nSample code line\n```');
+
+    await setCursorPosition(page, 2, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('\n```\nCodeblock\nSample code line\n```');
+    await testCodeblockStyle(page, {
+      height: 58,
+      width: 198,
+    });
+  });
+
+  test('remove newline between two codeblocks', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.pressSequentially('```\nCodeblock\nSample code line\n```\n```\nCodeblock\nSecond sample code line\n```');
+
+    await setCursorPosition(page, 7, 0);
+    await inputLocator.press('Backspace');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\n``````\nCodeblock\nSecond sample code line\n```');
+    expect(await getCodeblockElementCount(inputLocator)).toEqual(1);
+
+    await inputLocator.press('Enter');
+
+    expect(await getElementValue(inputLocator)).toEqual('```\nCodeblock\nSample code line\n```\n```\nCodeblock\nSecond sample code line\n```');
+    expect(await getCodeblockElementCount(inputLocator)).toEqual(2);
+  });
+});
+
+test('update codeblock dimensions when resizing the input', async ({page}) => {
+  await page.setViewportSize({width: 1280, height: 720});
+  const inputLocator = await setupInput(page, 'clear');
+  await inputLocator.focus();
+  await inputLocator.pressSequentially('```\nCodeblock\nSample very long line of code that should be wrapped\n```');
+
+  await testCodeblockStyle(page, {
+    height: 110,
+    width: 288,
+  });
+
+  await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+    const element = inputElement;
+    element.style.width = '500px';
+    element.style.height = '200px';
+  });
+  await page.waitForTimeout(10);
+
+  await testCodeblockStyle(page, {
+    height: 84,
+    width: 488,
+  });
+});
+
+test.describe('scrolling into view', () => {
+  test('scroll to an empty codeblock line', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      element.style.height = '100px';
+    });
+    await inputLocator.pressSequentially('```\nCodeblock start\n\n\n\n\n\n\n\n\nCodeblock end\n```');
+
+    await setCursorPosition(page, 4);
+    await inputLocator.blur();
+    await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      element.scrollTop = element.scrollHeight;
+      return element.scrollHeight;
+    });
+
+    await inputLocator.focus();
+    const scrollTop = await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      return element.scrollTop;
+    });
+
+    expect(scrollTop).toBeLessThanOrEqual(30);
+  });
+
+  test('scroll to the cursor after opening syntax', async ({page}) => {
+    const inputLocator = await setupInput(page, 'clear');
+    await inputLocator.focus();
+    await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      element.style.height = '100px';
+    });
+    await inputLocator.pressSequentially('```\nCodeblock start\n\n\n\n\n\n\n\n\nCodeblock end\n```');
+
+    await setCursorPosition(page, 1);
+    await inputLocator.blur();
+    await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      element.scrollTop = element.scrollHeight;
+      return element.scrollHeight;
+    });
+
+    await inputLocator.focus();
+    const scrollTop = await inputLocator.evaluate((inputElement: HTMLInputElement) => {
+      const element = inputElement;
+      return element.scrollTop;
+    });
+
+    expect(scrollTop).toBeLessThanOrEqual(25);
+  });
+});

WebExample/__tests__/styles.spec.ts

@@ -1,17 +1,7 @@
-import {test, expect} from '@playwright/test';
-import type {Page} from '@playwright/test';
+import {test} from '@playwright/test';
 // eslint-disable-next-line import/no-relative-packages
 import * as TEST_CONST from '../../example/src/testConstants';
-import {setupInput, getElementStyle} from './utils';
-
-const testMarkdownContentStyle = async ({testContent, style, page}: {testContent: string; style: string; page: Page}) => {
-  const inputLocator = await setupInput(page);
-
-  const elementHandle = inputLocator.locator('span', {hasText: testContent}).last();
-  const elementStyle = await getElementStyle(elementHandle);
-
-  expect(elementStyle).toEqual(style);
-};
+import {testMarkdownContentStyle} from './utils';
 
 test.beforeEach(async ({page}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
@@ -32,11 +22,21 @@ test.describe('markdown content styling', () => {
   });
 
   test('inline code', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'inline code', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+    await testMarkdownContentStyle({
+      testContent: 'inline code',
+      style:
+        'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 0px; line-height: 1.5;',
+      page,
+    });
   });
 
   test('codeblock', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'codeblock', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+    await testMarkdownContentStyle({
+      testContent: 'codeblock',
+      style:
+        'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 2px;',
+      page,
+    });
   });
 
   test('mention-here', async ({page}) => {

WebExample/__tests__/textManipulation.spec.ts

@@ -132,7 +132,7 @@ test('cut content changes', async ({page, browserName}) => {
 
   expect(await getElementValue(inputLocator)).toBe(EXPECTED_CONTENT);
 
-  // Ckeck if there is no markdown elements after the cut operation
+  // Check if there is no markdown elements after the cut operation
   const spans = await inputLocator.locator('span[data-type="text"]');
   expect(await spans.count()).toBe(1);
 });