Fix/68518 - Strike through is not applied for quote markdown text (#721)

Author: dmkt9

WebExample/__tests__/styles.spec.ts

@@ -1,7 +1,7 @@
 import {test} from '@playwright/test';
 // eslint-disable-next-line import/no-relative-packages
 import * as TEST_CONST from '../../example/src/testConstants';
-import {testMarkdownContentStyle} from './utils';
+import {testMarkdownContentStyle, testMarkdownElementHasComputedStyle} from './utils';
 
 test.beforeEach(async ({page}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
@@ -60,4 +60,15 @@ test.describe('markdown content styling', () => {
 
     await testMarkdownContentStyle({testContent: 'blockquote', style: browserStyle, page});
   });
+
+  test('blockquote with strikethrough', async ({page, browserName}) => {
+    let blockquoteStyle = 'line-through';
+    if (browserName === 'firefox') {
+      blockquoteStyle = 'line-through rgb(0, 0, 0)';
+    } else if (browserName === 'chromium') {
+      blockquoteStyle = 'line-through solid rgb(0, 0, 0)';
+    }
+
+    await testMarkdownElementHasComputedStyle({testContent: 'strikethrough_blockquote', propertyName: 'text-decoration', style: blockquoteStyle, page});
+  });
 });

WebExample/__tests__/utils.ts

@@ -103,4 +103,29 @@ const testMarkdownContentStyle = async ({testContent, style, page, dimmensions}:
   }
 };
 
-export {setupInput, getCursorPosition, setCursorPosition, getElementStyle, pressCmd, getElementValue, changeMarkdownStyle, setSelection, testMarkdownContentStyle};
+const testMarkdownElementHasComputedStyle = async ({testContent, propertyName, style, page}: {testContent: string; propertyName: string; style: string; page: Page}) => {
+  const inputLocator = await setupInput(page);
+
+  const elementHandle = inputLocator.locator('span', {hasText: testContent}).last();
+
+  let elementStyle;
+  if (elementHandle) {
+    await elementHandle.waitFor({state: 'attached'});
+    elementStyle = await elementHandle.evaluate((el, property) => window.getComputedStyle(el).getPropertyValue(property), propertyName);
+  }
+
+  expect(elementStyle).toEqual(style);
+};
+
+export {
+  setupInput,
+  getCursorPosition,
+  setCursorPosition,
+  getElementStyle,
+  pressCmd,
+  getElementValue,
+  changeMarkdownStyle,
+  setSelection,
+  testMarkdownContentStyle,
+  testMarkdownElementHasComputedStyle,
+};

example/src/testConstants.ts

@@ -6,6 +6,7 @@ const EXAMPLE_CONTENT = [
   'https://expensify.com',
   '# header1',
   '> blockquote',
+  '~sb\n*sbb\n_sbi\n> strikethrough_blockquote\nsbi_\nsbb*\nsb~',
   '`inline code`',
   '```\ncodeblock\n```',
   '@here',

src/web/MarkdownTextInput.css

@@ -76,3 +76,7 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+[class^='react-native-live-markdown-input'] [data-type='strikethrough'] * {
+  text-decoration: inherit;
+}