fix: placeholder wrap (#3805)

toptal · Aug 14, 2023 · ee1456a · ee1456a
1 parent b497bac
commit ee1456a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/.changeset/honest-stingrays-lick.md b/.changeset/honest-stingrays-lick.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-rich-text-editor': patch
+---
+
+### RichTextEditor
+
+- fix placeholder wrap
diff --git a/cypress/component/RichTextEditor/Default.spec.tsx b/cypress/component/RichTextEditor/Default.spec.tsx
@@ -455,4 +455,19 @@ describe('RichTextEditor', () => {
       cy.get('body').happoScreenshot({ component, variant: 'focused' })
     })
   })
+
+  describe('when long placeholder string is provided', () => {
+    it('wraps placeholder', () => {
+      cy.mount(
+        renderEditor({
+          ...defaultProps,
+          ...{
+            placeholder: 'abcdabcdab abcabca abab aa 1 '.repeat(32),
+          },
+        })
+      )
+
+      cy.get('body').happoScreenshot({ component, variant: 'long-placeholder' })
+    })
+  })
 })
diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/styles.ts b/packages/picasso-rich-text-editor/src/LexicalEditor/styles.ts
@@ -110,7 +110,7 @@ export default (theme: Theme) => {
       top: '0px',
       left: '0px',
       userSelect: 'none',
-      whiteSpace: 'nowrap',
+      whiteSpace: 'normal',
       display: 'inline-block',
       pointerEvents: 'none',
     },