style: update

Author: hunghg255

src/extensions/Emoji/components/EmojiList/EmojiList.tsx

@@ -70,7 +70,7 @@ export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
   }));
 
   return (
-    <div className="richtext-max-h-[320px] richtext-w-[200px] richtext-overflow-y-auto richtext-overflow-x-hidden richtext-rounded-sm !richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none">
+    <div className="richtext-max-h-[320px] richtext-w-[200px] richtext-overflow-y-auto richtext-overflow-x-hidden  richtext-rounded-md  !richtext-border !richtext-border-[hsl(var(--richtext-border))] richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none">
       <div ref={$container}>
         {props.items.length > 0
           ? (

src/extensions/Mention/components/NodeViewMentionList/NodeViewMentionList.tsx

@@ -7,8 +7,6 @@ import type { Editor } from '@tiptap/core';
 import clsx from 'clsx';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
-import styles from './index.module.scss';
-
 interface IProps {
   editor: Editor
   items: Array<string>
@@ -71,13 +69,13 @@ export const NodeViewMentionList: React.FC<IProps> = forwardRef((props, ref) =>
   }));
 
   return (
-    <div className={clsx('listUsers', styles.listUsers)}>
+    <div className={' !richtext-max-h-[320px] !richtext-w-[160px] richtext-overflow-y-auto richtext-overflow-x-hidden  richtext-rounded-md  !richtext-border !richtext-border-[hsl(var(--richtext-border))] richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none'}>
       <div ref={$container}>
         {props.items.length > 0
           ? (
             props.items.map((item, index) => (
               <span
-                className={clsx('itemUser', styles.itemUser, index === selectedIndex ? styles.selectedUser : '')}
+                className={clsx('richtext-flex richtext-w-full richtext-items-center richtext-gap-3 richtext-rounded-sm !richtext-border-none !richtext-bg-transparent richtext-px-2 richtext-py-1.5 richtext-text-left richtext-text-sm !richtext-text-neutral-800 !richtext-outline-none richtext-transition-colors hover:!richtext-bg-accent dark:!richtext-text-neutral-200',  { 'bg-item-active': index === selectedIndex })}
                 key={index}
                 onClick={() => selectItem(index)}
               >
@@ -86,7 +84,7 @@ export const NodeViewMentionList: React.FC<IProps> = forwardRef((props, ref) =>
             ))
           )
           : (
-            <div className={clsx('itemUserEmpty', styles.itemUser)}>
+            <div className={clsx('itemUserEmpty')}>
               Empty
             </div>
           )}

src/extensions/Mention/components/NodeViewMentionList/index.module.scss

@@ -122,7 +122,7 @@ function CommandsList(props: any, ref: any) {
 
   return (
     <div
-      className="richtext-max-h-[min(80vh,24rem)] richtext-flex-wrap richtext-overflow-auto richtext-rounded-lg !richtext-border !richtext-border-neutral-200 !richtext-bg-white richtext-p-1 !richtext-text-black richtext-shadow-sm dark:!richtext-border-neutral-800 dark:!richtext-bg-black"
+      className="richtext-max-h-[min(80vh,24rem)] richtext-flex-wrap richtext-overflow-y-auto richtext-overflow-x-hidden  richtext-rounded-md  !richtext-border !richtext-border-[hsl(var(--richtext-border))] richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none"
       ref={scrollContainer}
     >
       {props?.items?.length
@@ -142,7 +142,7 @@ function CommandsList(props: any, ref: any) {
                         onClick={() => createCommandClickHandler(groupIndex, commandIndex)}
                         ref={el => setActiveItemRef(groupIndex, commandIndex, el)}
                         className={cn('richtext-flex richtext-items-center richtext-gap-3 richtext-px-2 richtext-py-1.5 richtext-text-sm !richtext-text-neutral-800 dark:!richtext-text-neutral-200 richtext-text-left richtext-w-full richtext-rounded-sm !richtext-outline-none !richtext-border-none richtext-transition-colors !richtext-bg-transparent hover:!richtext-bg-accent ', {
-                          'slash-command-active': selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
+                          'bg-item-active': selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
                         })}
                       >
                         {command.iconUrl && <img alt=""

src/extensions/SlashCommand/components/CommandsList.tsx

@@ -266,7 +266,7 @@
 }
 }
 
-.slash-command-active.slash-command-active {
+.bg-item-active.bg-item-active {
   background-color: hsl(var(--accent)) !important;
 }