Improve placeholder

client/e2e/basic-editor.spec.ts

@@ -22,6 +22,26 @@ test.describe('Basic editor', () => {
     await createDocument(page);
   });
 
+  test('no page scrollbars', async ({ page }) => {
+    await page.setViewportSize({ width: 1920, height: 1080 });
+
+    await page.waitForTimeout(1000);
+
+    const hasScrollbars = await page.evaluate(() => {
+      const html = document.querySelector('html')!;
+
+      return {
+        horizontal: html.scrollWidth > html.clientWidth,
+        vertical: html.scrollHeight > html.clientHeight,
+      };
+    });
+
+    expect(hasScrollbars).toEqual({
+      horizontal: false,
+      vertical: false,
+    });
+  });
+
   test('save document to server and reload', async ({ page }) => {
     const editable = getEditable(page);
     const editorHandle = await getEditorHandle(page, editable);

client/entrypoints/application.scss

@@ -59,7 +59,7 @@ body {
     @apply overflow-wrap-break-word;
   }
 
-  input::placeholder, textarea::placeholder, [-slate-placeholder] {
+  input::placeholder, textarea::placeholder, [data-slate-placeholder] {
     @apply text-plain-400 dark:text-plain-500;
   }
 
@@ -227,15 +227,15 @@ body {
   @apply select-none;
 }
 
-[-slate-placeholder] {
+[data-slate-placeholder] {
   // Fix editor placeholder causing body to scroll horizontally
   width: auto !important;
 
   // Remove opacity: 0.333 from placeholder
   opacity: 1 !important;
 }
 
-[-slate-editor]:focus [-slate-placeholder] {
+[data-slate-editor]:focus [data-slate-placeholder] {
   // Hide placeholder when editor is focused
   opacity: 0 !important;
 }

package.json

@@ -22,7 +22,7 @@
     "@rails/actioncable": "^7.1.2",
     "@tippyjs/react": "^4.2.6",
     "@types/js-cookie": "^3.0.6",
-    "@udecode/plate": "^25.0.1",
+    "@udecode/plate": "^26.0.0",
     "axios": "^1.6.2",
     "comlink": "^4.4.1",
     "compressorjs": "^1.2.1",
@@ -42,10 +42,10 @@
     "react-time-ago": "^7.2.1",
     "runes": "^0.4.3",
     "scheduler": "^0.23.0",
-    "slate": "^0.100.0",
+    "slate": "^0.101.1",
     "slate-history": "^0.100.0",
     "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.100.1",
+    "slate-react": "^0.101.1",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7"
   },

playwright.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? 'github' : 'list',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */