Hotfix: Bring back placeholders on web (#723)

Author: jmusial

WebExample/__tests__/styles.spec.ts

@@ -1,7 +1,7 @@
-import {test} from '@playwright/test';
+import {test, expect} from '@playwright/test';
 // eslint-disable-next-line import/no-relative-packages
 import * as TEST_CONST from '../../example/src/testConstants';
-import {testMarkdownContentStyle, testMarkdownElementHasComputedStyle} from './utils';
+import {setupInput, testMarkdownContentStyle, testMarkdownElementHasComputedStyle} from './utils';
 
 test.beforeEach(async ({page}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
@@ -72,3 +72,27 @@ test.describe('markdown content styling', () => {
     await testMarkdownElementHasComputedStyle({testContent: 'strikethrough_blockquote', propertyName: 'text-decoration', style: blockquoteStyle, page});
   });
 });
+
+test.describe('empty input styling', () => {
+  test.beforeEach(async ({page}) => {
+    await page.click('[data-testid="clear"]');
+  });
+
+  test('placeholder should have correct text', async ({page}) => {
+    const placeholder = await page.$eval(`div#${TEST_CONST.INPUT_ID}`, (el) => el.getAttribute('placeholder'));
+    expect(placeholder).toBe('Type here...');
+  });
+
+  test('empty input should have visible placeholder', async ({page}) => {
+    const inputLocator = await setupInput(page);
+
+    const beforeContent = await inputLocator.evaluate((el) => {
+      return window.getComputedStyle(el, '::before').getPropertyValue('content');
+    });
+
+    expect([
+      '"Type here..."', // Chromium/WebKit, resolves attr()
+      'attr(placeholder)', // Firefox, literal
+    ]).toContain(beforeContent);
+  });
+});

src/web/MarkdownTextInput.css

@@ -30,6 +30,13 @@
   padding-right: 1px !important;
 }
 
+.react-native-live-markdown-input-singleline:empty::before,
+.react-native-live-markdown-input-multiline:empty::before {
+  pointer-events: none;
+  display: block; /* For Firefox */
+  content: attr(placeholder);
+}
+
 .react-native-live-markdown-input-multiline *[data-type='pre'] {
   line-height: 1.3;
   display: block;