comply with review (#4)

* fix command name to not include plugin name * move MentionNode style into CSS
glowingjade · Oct 12, 2024 · 5d1656a · 5d1656a
1 parent 6d068a4
commit 5d1656a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 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/src/main.ts b/src/main.ts
@@ -27,7 +27,7 @@ export default class SmartCopilotPlugin extends Plugin {
     // This adds a simple command that can be triggered anywhere
     this.addCommand({
       id: 'open-chat-view',
-      name: 'Open Smart Composer',
+      name: 'Open chat',
       callback: () => this.openChatView(),
     })
 

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;