From 4b97845ab1bae42f6e700cb674e1127364a3516b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Musia=C5=82?= <jan.musial@swmansion.com>
Date: Sat, 23 Aug 2025 00:00:14 +0200
Subject: [PATCH 1/4] bring back placeholders on web

---
 src/web/MarkdownTextInput.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css
index 4c68858b..fbeec6d0 100644
--- a/src/web/MarkdownTextInput.css
+++ b/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;

From 13bba0689b1027a0b59521866b1a60d31fa40eda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Musia=C5=82?= <jan.musial@swmansion.com>
Date: Sat, 23 Aug 2025 00:14:31 +0200
Subject: [PATCH 2/4] add test

---
 WebExample/__tests__/styles.spec.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/WebExample/__tests__/styles.spec.ts b/WebExample/__tests__/styles.spec.ts
index bd8d7885..83d07ba9 100644
--- a/WebExample/__tests__/styles.spec.ts
+++ b/WebExample/__tests__/styles.spec.ts
@@ -1,4 +1,4 @@
-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';
@@ -72,3 +72,14 @@ 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('empty input should have a placeholder', async ({page}) => {
+    const placeholder = await page.$eval(`div#${TEST_CONST.INPUT_ID}`, (el) => el.getAttribute('placeholder'));
+    expect(placeholder).toBe('Type here...');
+  });
+});

From 5ba1d2995700c2fe97c6466e06d624cd21ee5937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Musia=C5=82?= <jan.musial@swmansion.com>
Date: Sat, 23 Aug 2025 00:27:26 +0200
Subject: [PATCH 3/4] fix test

---
 WebExample/__tests__/styles.spec.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/WebExample/__tests__/styles.spec.ts b/WebExample/__tests__/styles.spec.ts
index 83d07ba9..50309cd9 100644
--- a/WebExample/__tests__/styles.spec.ts
+++ b/WebExample/__tests__/styles.spec.ts
@@ -1,7 +1,7 @@
 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'});
@@ -81,5 +81,15 @@ test.describe('empty input styling', () => {
   test('empty input should have a placeholder', async ({page}) => {
     const placeholder = await page.$eval(`div#${TEST_CONST.INPUT_ID}`, (el) => el.getAttribute('placeholder'));
     expect(placeholder).toBe('Type here...');
+    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);
   });
 });

From d0c2392bbfb189d411d6c5efdf1636a56901e583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Musia=C5=82?= <jan.musial@swmansion.com>
Date: Sat, 23 Aug 2025 00:29:48 +0200
Subject: [PATCH 4/4] fix test

---
 WebExample/__tests__/styles.spec.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/WebExample/__tests__/styles.spec.ts b/WebExample/__tests__/styles.spec.ts
index 50309cd9..b33db80c 100644
--- a/WebExample/__tests__/styles.spec.ts
+++ b/WebExample/__tests__/styles.spec.ts
@@ -78,9 +78,12 @@ test.describe('empty input styling', () => {
     await page.click('[data-testid="clear"]');
   });
 
-  test('empty input should have a placeholder', async ({page}) => {
+  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) => {