fix(ChatComposer): fix Lexical global styles (#2854)

twilio-labs · Dec 1, 2022 · 4ebab8b · 4ebab8b
1 parent 026bf7f
commit 4ebab8b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/chilly-lizards-dress.md b/.changeset/chilly-lizards-dress.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/chat-composer': patch
+---
+
+[ChatComposer]: fix Lexical global styles
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx
@@ -28,9 +28,10 @@ import {
    */
   HistoryPlugin,
 } from '@twilio-paste/lexical-library';
+import {StylingGlobals} from '@twilio-paste/styling-library';
 import type {LexicalComposerProps, OnChangeFunction, ContentEditableProps} from '@twilio-paste/lexical-library';
 
-import './styles.css';
+import {chatComposerLexicalStyles} from './styles';
 import {AutoLinkPlugin} from './AutoLinkPlugin';
 import {PlaceholderWrapper} from './PlaceholderWrapper';
 import {baseConfig, renderInitialText} from './helpers';
@@ -97,6 +98,7 @@ export const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
         overflowY="scroll"
         maxHeight={maxHeight}
       >
+        <StylingGlobals styles={chatComposerLexicalStyles} />
         <LexicalComposer initialConfig={merge(baseConfigWithEditorState, config)}>
           <>
             <RichTextPlugin

diff --git a/...e/components/chat-composer/src/styles.css → ...re/components/chat-composer/src/styles.ts b/...e/components/chat-composer/src/styles.css → ...re/components/chat-composer/src/styles.ts
@@ -1,3 +1,6 @@
+import {EmotionCSS} from '@twilio-paste/styling-library';
+
+export const chatComposerLexicalStyles = EmotionCSS`
 .paste-chat-composer-paragraph {
   margin: 0;
   position: relative;
@@ -6,3 +9,4 @@
 .paste-chat-composer-content-editable:focus {
   outline: none;
 }
+`;