diff --git a/WebExample/__tests__/styles.spec.ts b/WebExample/__tests__/styles.spec.ts index d54334a9..bd8d7885 100644 --- a/WebExample/__tests__/styles.spec.ts +++ b/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}); + }); }); diff --git a/WebExample/__tests__/utils.ts b/WebExample/__tests__/utils.ts index 729af3f2..d4e5a080 100644 --- a/WebExample/__tests__/utils.ts +++ b/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, +}; diff --git a/example/src/testConstants.ts b/example/src/testConstants.ts index c5e7a16c..42b6c998 100644 --- a/example/src/testConstants.ts +++ b/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', diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css index 4f35a74b..4c68858b 100644 --- a/src/web/MarkdownTextInput.css +++ b/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; +}