move MentionNode style into CSS

glowingjade · Oct 12, 2024 · 710a443 · 710a443
1 parent ad1bba7
commit 710a443
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/chat-input/ChatUserInput.tsx b/src/components/chat-input/ChatUserInput.tsx
@@ -78,6 +78,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
     const initialConfig: InitialConfigType = {
       namespace: 'ChatUserInput',
       theme: {
+        root: 'smtcmp-chat-input-root',
         paragraph: 'smtcmp-chat-input-paragraph',
       },
       nodes: [MentionNode],

diff --git a/src/components/chat-input/plugins/mention/MentionNode.ts b/src/components/chat-input/plugins/mention/MentionNode.ts
@@ -42,8 +42,6 @@ export type SerializedMentionNode = Spread<
 //   return null
 // }
 
-const mentionStyle =
-  'background-color: var(--tag-background); color: var(--tag-color); padding: var(--size-2-1) calc(var(--size-2-1)); border-radius: var(--radius-s);'
 export class MentionNode extends TextNode {
   __id: string
   __mention: string
@@ -87,7 +85,6 @@ export class MentionNode extends TextNode {
 
   createDOM(config: EditorConfig): HTMLElement {
     const dom = super.createDOM(config)
-    dom.style.cssText = mentionStyle
     dom.className = MENTION_NODE_TYPE
     return dom
   }

diff --git a/styles.css b/styles.css
@@ -217,6 +217,17 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
  * ChatUserInput
  */
 
+.smtcmp-chat-input-root .mention {
+  background-color: var(--tag-background);
+  color: var(--tag-color);
+  padding: var(--size-2-1) calc(var(--size-2-1));
+  border-radius: var(--radius-s);
+  background-color: var(--tag-background);
+  color: var(--tag-color);
+  padding: var(--size-2-1) calc(var(--size-2-1));
+  border-radius: var(--radius-s);
+}
+
 .smtcmp-chat-input-paragraph {
   margin: 0;
   line-height: 1.6;