diff --git a/components.json b/components.json
index c0a07e9..63fdcbe 100644
--- a/components.json
+++ b/components.json
@@ -8,7 +8,7 @@
     "css": "src/styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
-    "prefix": ""
+    "prefix": "richtext-"
   },
   "aliases": {
     "components": "@/components",
diff --git a/package.json b/package.json
index 875a53b..c2f6b9f 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
     "git-scm-hooks": "^0.0.11",
     "globby": "^14.0.2",
     "md5": "^2.3.0",
+    "postcss-replace": "^2.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.77.8",
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index 1cf870d..da4a068 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -112,7 +112,7 @@ const extensions = [
   Katex,
 ]
 
-const DEFAULT = `<h1 style="text-align: center">Rich Text Editor</h1><p>A modern WYSIWYG rich text editor based on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/scrumpy/tiptap">tiptap</a> and <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> for Reactjs</p><p></p><p style="text-align: center"></p><p style="text-align: center"><img height="auto" src="https://picsum.photos/1920/1080.webp?t=1" width="500"></p><p></p><div data-type="horizontalRule"><hr></div><h2>Demo</h2><p>👉<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://reactjs-tiptap-editor.vercel.app/">Demo</a></p><h2>Features</h2><ul><li><p>Use <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> components</p></li><li><p>Markdown support</p></li><li><p>TypeScript support</p></li><li><p>I18n support</p></li><li><p>React support</p></li><li><p>Slash Commands</p></li><li><p>Multi Column</p></li><li><p>TailwindCss</p></li><li><p>Support emoji</p></li><li><p>Support iframe</p></li></ul><h2>Installation</h2><pre><code>pnpm add reactjs-tiptap-editor</code class="language-bash"></pre><p></p>`
+const DEFAULT = `<h1 style="text-align: center">Rich Text Editor</h1><p>A modern WYSIWYG rich text editor based on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/scrumpy/tiptap">tiptap</a> and <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> for Reactjs</p><p></p><p style="text-align: center"></p><p style="text-align: center"><img height="auto" src="https://picsum.photos/1920/1080.webp?t=1" width="500"></p><p></p><div data-type="horizontalRule"><hr></div><h2>Demo</h2><p>👉<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://reactjs-tiptap-editor.vercel.app/">Demo</a></p><h2>Features</h2><ul><li><p>Use <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> components</p></li><li><p>Markdown support</p></li><li><p>TypeScript support</p></li><li><p>I18n support</p></li><li><p>React support</p></li><li><p>Slash Commands</p></li><li><p>Multi Column</p></li><li><p>TailwindCss</p></li><li><p>Support emoji</p></li><li><p>Support iframe</p></li></ul><h2>Installation</h2><pre><code  class="language-bash">pnpm add reactjs-tiptap-editor</code></pre><p></p>`
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout
diff --git a/playground/tailwind.config.js b/playground/tailwind.config.js
index 942d934..10c9924 100644
--- a/playground/tailwind.config.js
+++ b/playground/tailwind.config.js
@@ -1,5 +1,3 @@
-import animate from 'tailwindcss-animate';
-
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['class'],
@@ -89,5 +87,4 @@ export default {
       },
     },
   },
-  plugins: [animate],
-};
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index ecd1ad0..d029ee7 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -1,14 +1,14 @@
-import * as path from 'node:path';
+import * as path from 'node:path'
 
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-import checker from 'vite-plugin-checker';
-import EnvironmentPlugin from 'vite-plugin-environment';
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+import EnvironmentPlugin from 'vite-plugin-environment'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
-  const isDev = mode !== 'production';
-  const isAnalyze = mode === 'analyze';
+  const isDev = mode !== 'production'
+  const isAnalyze = mode === 'analyze'
 
   return {
     plugins: [
@@ -45,5 +45,5 @@ export default defineConfig(({ mode }) => {
     esbuild: {
       sourcemap: isDev,
     },
-  };
-});
+  }
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64ca2e4..1fc9e2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,6 +261,9 @@ importers:
       md5:
         specifier: ^2.3.0
         version: 2.3.0
+      postcss-replace:
+        specifier: ^2.0.1
+        version: 2.0.1(postcss@8.4.40)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -4928,6 +4931,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -5390,6 +5397,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  object-path@0.11.8:
+    resolution: {integrity: sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==}
+    engines: {node: '>= 10.12.0'}
+
   object.assign@4.1.5:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
     engines: {node: '>= 0.4'}
@@ -5592,6 +5603,12 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-replace@2.0.1:
+    resolution: {integrity: sha512-T83GVovCkBQkFCTmuid0B2bWNu/O0Bh/HDMeEGFC62EwMvVBLZQFYM7iBbcGT48QDXSNSX6e/X1Q7/Syh5NFng==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+
   postcss-selector-parser@6.1.1:
     resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==}
     engines: {node: '>=4'}
@@ -12347,6 +12364,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kind-of@6.0.3: {}
+
   kleur@3.0.3: {}
 
   kolorist@1.8.0: {}
@@ -12925,6 +12944,8 @@ snapshots:
 
   object-keys@1.1.1: {}
 
+  object-path@0.11.8: {}
+
   object.assign@4.1.5:
     dependencies:
       call-bind: 1.0.7
@@ -13116,6 +13137,12 @@ snapshots:
       postcss: 8.4.40
       postcss-selector-parser: 6.1.1
 
+  postcss-replace@2.0.1(postcss@8.4.40):
+    dependencies:
+      kind-of: 6.0.3
+      object-path: 0.11.8
+      postcss: 8.4.40
+
   postcss-selector-parser@6.1.1:
     dependencies:
       cssesc: 3.0.0
diff --git a/postcss.config.js b/postcss.config.js
index f780382..1efa16b 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 export default {
   plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
+    'tailwindcss/nesting': {},
+    'tailwindcss': {},
+    'autoprefixer': {},
   },
-};
+}
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index eefa3ff..44962e9 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -8,6 +8,7 @@ import type { TooltipContentProps } from '@radix-ui/react-tooltip'
 import { Toggle, Tooltip, TooltipContent, TooltipTrigger, icons } from '@/components'
 import type { ButtonViewReturnComponentProps } from '@/types'
 import { getShortcutKeys } from '@/utils/plateform'
+import { cn } from '@/lib/utils'
 
 export interface ActionButtonProps {
   /* Icon name to display */
@@ -69,20 +70,20 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Partial<ActionButtonPro
           <Comp
             ref={ref}
             size="sm"
-            className={`w-[32px] h-[32px] ${customClass}`}
+            className={cn('richtext-w-[32px] richtext-h-[32px]', customClass)}
             // pressed={isActive?.() || false}
             disabled={disabled}
             onClick={action}
             data-state={isActive?.() ? 'on' : 'off'}
             {...rest}
           >
-            {Icon && <Icon className="w-4 h-4" />}
+            {Icon && <Icon className="richtext-w-4 richtext-h-4" />}
             {children}
           </Comp>
         </TooltipTrigger>
         {tooltip && (
           <TooltipContent {...tooltipOptions}>
-            <div className="flex flex-col items-center text-center max-w-24">
+            <div className="richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24">
               <div>{tooltip}</div>
               {!!shortcutKeys?.length && <span>{getShortcutKeys(shortcutKeys)}</span>}
             </div>
diff --git a/src/components/ActionMenuButton.tsx b/src/components/ActionMenuButton.tsx
index 592a848..96ad185 100644
--- a/src/components/ActionMenuButton.tsx
+++ b/src/components/ActionMenuButton.tsx
@@ -37,23 +37,23 @@ const ActionMenuButton = React.forwardRef<HTMLButtonElement, ActionMenuButtonPro
         <TooltipTrigger asChild>
           <Comp
             ref={ref}
-            className="h-[32px] px-[5px] py-0 min-w-24 max-w-32 overflow-hidden"
+            className="richtext-h-[32px] richtext-px-[5px] richtext-py-0 richtext-min-w-24  richtext-overflow-hidden"
             variant="ghost"
             disabled={props?.disabled}
             {...props}
           >
-            <div className="flex items-center h-full font-normal">
+            <div className="richtext-flex richtext-items-center richtext-h-full richtext-font-normal">
               {props?.title && (
-                <div className="flex-grow text-sm text-left truncate">{props?.title}</div>
+                <div className="richtext-flex-grow richtext-text-sm richtext-text-left richtext-truncate">{props?.title}</div>
               )}
-              {Icon && <Icon className="flex-shrink-0 w-3 h-3 ml-1 text-zinc-500" />}
+              {Icon && <Icon className="richtext-flex-shrink-0 richtext-w-3 richtext-h-3 richtext-ml-1 richtext-text-zinc-500" />}
             </div>
           </Comp>
         </TooltipTrigger>
         <TooltipContent>
-          <div className="flex flex-col items-center text-center max-w-24">
+          <div className="richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24">
             {props?.tooltip && <div>{props?.tooltip}</div>}
-            <div className="flex">
+            <div className="richtext-flex">
               {!!props?.shortcutKeys?.length && <span>{getShortcutKeys(props?.shortcutKeys)}</span>}
             </div>
           </div>
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index f1101aa..b96c70a 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -76,15 +76,15 @@ function ColorPicker(props: ColorPickerProps) {
     <Popover>
       <PopoverTrigger disabled={disabled} asChild>{props?.children}</PopoverTrigger>
 
-      <PopoverContent hideWhenDetached className="w-full h-full p-2" align="start" side="bottom">
-        <div className="flex flex-col">
+      <PopoverContent hideWhenDetached className="richtext-w-full richtext-h-full richtext-p-2" align="start" side="bottom">
+        <div className="richtext-flex richtext-flex-col">
           {highlight
             ? (
                 <div
-                  className="flex items-center p-1 cursor-pointer rd-1 hover:bg-accent"
+                  className="richtext-flex richtext-items-center richtext-p-1 richtext-cursor-pointer rd-1 hover:richtext-bg-accent"
                   onClick={() => setColor(undefined)}
                 >
-                  <span className="w-6 h-6 p-0.5 inline-block rounded-sm border cursor-pointer hover:border-border hover:shadow-sm relative after:border-b-2 after:border-b-red-500 after:top-[10px] after:h-0 after:left-0 after:w-6 after:absolute after:block after:rotate-[45deg]">
+                  <span className="richtext-w-6 richtext-h-6 richtext-p-0.5 richtext-inline-block richtext-rounded-sm richtext-border richtext-cursor-pointer hover:richtext-border-border hover:richtext-shadow-sm richtext-relative after:richtext-border-b-2 after:richtext-border-b-red-500 after:richtext-top-[10px] after:richtext-h-0 after:richtext-left-0 after:richtext-w-6 after:richtext-absolute after:richtext-block after:richtext-rotate-[45deg]">
                     <span
                       style={{
                         backgroundColor: 'transparent',
@@ -101,47 +101,45 @@ function ColorPicker(props: ColorPickerProps) {
                       </svg>
                     </span>
                   </span>
-                  <span className="ml-1 text-sm">{t('editor.nofill')}</span>
+                  <span className="richtext-ml-1 richtext-text-sm">{t('editor.nofill')}</span>
                 </div>
               )
             : (
-                <>
-                  <div
-                    className="flex items-center p-1 cursor-pointer rd-1 hover:bg-accent"
-                    onClick={() => {
-                      setColor(undefined)
-                    }}
-                  >
-                    <span className="w-6 h-6 p-0.5 inline-block rounded-sm border border-transparent cursor-pointer">
-                      <span
+                <div
+                  className="richtext-flex richtext-items-center richtext-p-1 richtext-cursor-pointer rd-1 hover:richtext-bg-accent"
+                  onClick={() => {
+                    setColor(undefined)
+                  }}
+                >
+                  <span className="richtext-w-6 richtext-h-6 richtext-p-0.5 richtext-inline-block richtext-rounded-sm richtext-border richtext-border-transparent richtext-cursor-pointer">
+                    <span
+                      style={{
+                        backgroundColor: defaultColor,
+                      }}
+                      className="richtext-relative w-[18px] h-[18px] richtext-block richtext-rounded-[2px] richtext-border-transparent"
+                    >
+                      <svg
+                        viewBox="0 0 18 18"
                         style={{
-                          backgroundColor: defaultColor,
+                          fill: 'rgb(255, 255, 255)',
+                          display: 'none',
                         }}
-                        className="relative w-[18px] h-[18px] block rounded-[2px] border-transparent"
                       >
-                        <svg
-                          viewBox="0 0 18 18"
-                          style={{
-                            fill: 'rgb(255, 255, 255)',
-                            display: 'none',
-                          }}
-                        >
-                          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
-                        </svg>
-                      </span>
+                        <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                      </svg>
                     </span>
-                    <span className="ml-1 text-sm">{t('editor.default')}</span>
-                  </div>
-                </>
+                  </span>
+                  <span className="richtext-ml-1 richtext-text-sm">{t('editor.default')}</span>
+                </div>
               )}
 
           {chunkedColors.map((items: string[], index: number) => {
             return (
-              <span className="relative flex w-full h-auto p-0 last:pb-2" key={index}>
+              <span className="richtext-relative richtext-flex richtext-w-full richtext-h-auto richtext-p-0 last:richtext-pb-2" key={index}>
                 {items.map((item: string, idx) => {
                   return (
                     <span
-                      className="w-6 h-6 p-0.5 inline-block rounded-sm border border-transparent flex-[0 0 auto] cursor-pointer hover:border-border hover:shadow-sm"
+                      className="richtext-w-6 richtext-h-6 richtext-p-0.5 richtext-inline-block richtext-rounded-sm richtext-border richtext-border-transparent richtext-flex-[0_0_auto] richtext-cursor-pointer hover:richtext-border-border hover:richtext-shadow-sm"
                       key={`sub-color-${idx}`}
                       onClick={() => setColor(item)}
                     >
@@ -149,16 +147,15 @@ function ColorPicker(props: ColorPickerProps) {
                         style={{
                           backgroundColor: item,
                         }}
-                        className="relative w-[18px] h-[18px] block rounded-[2px] border-transparent"
+                        className="richtext-relative richtext-w-[18px] richtext-h-[18px] richtext-block richtext-rounded-[2px] richtext-border-transparent"
                       >
                         {item === selectedColor
                           ? (
                               <svg
-                                className="absolute top-[-1px] left-[1px] w-3 h-3"
+                                className="richtext-absolute richtext-block richtext-top-[-1px] richtext-left-[1px] richtext-w-3 richtext-h-3"
                                 viewBox="0 0 18 18"
                                 style={{
                                   fill: 'rgb(255, 255, 255)',
-                                  display: 'block',
                                 }}
                               >
                                 <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
@@ -184,17 +181,17 @@ function ColorPicker(props: ColorPickerProps) {
           })}
 
           <div>
-            <div className="my-1 text-sm">{t('editor.recent')}</div>
-            <span className="relative flex w-full h-auto p-0 last:pb-2">
+            <div className="richtext-my-1 richtext-text-sm">{t('editor.recent')}</div>
+            <span className="richtext-relative richtext-flex richtext-w-full richtext-h-auto richtext-p-0 last:richtext-pb-2">
               {recentColorsStore?.map((item, index) => {
                 return (
                   <span
-                    className="w-6 h-6 p-0.5 inline-block rounded-sm border border-transparent flex-[0 0 auto] cursor-pointer hover:border-border hover:shadow-sm"
+                    className="richtext-w-6 richtext-h-6 richtext-p-0.5 richtext-inline-block richtext-rounded-sm richtext-border richtext-border-transparent richtext-flex-[0_0_auto] richtext-cursor-pointer hover:richtext-border-border hover:richtext-shadow-sm"
                     key={index}
                     onClick={() => setColor(item)}
                   >
                     <span
-                      className="relative w-[18px] h-[18px] block rounded-[2px] border-transparent"
+                      className="richtext-relative richtext-w-[18px] richtext-h-[18px] richtext-block richtext-rounded-[2px] richtext-border-transparent"
                       style={{
                         backgroundColor: item,
                       }}
@@ -245,18 +242,18 @@ function AddMoreColor({ setColor }: AddMoreColorProps) {
             e.preventDefault()
             setOpenColorMore(true)
           }}
-          className="text-sm hover:cursor-pointer hover:bg-accent py-1.5 px-1.5"
+          className="richtext-text-sm hover:richtext-cursor-pointer hover:richtext-bg-accent richtext-py-1.5 richtext-px-1.5"
         >
           {t('editor.color.more')}
           ...
         </div>
       </PopoverTrigger>
       <PopoverContent>
-        <div className="flex flex-col items-center justify-center">
+        <div className="richtext-flex richtext-flex-col richtext-items-center richtext-justify-center">
           <HexColorPicker color={colorMore} onChange={setColorMore} />
 
           <Input
-            className="mt-[8px] w-full"
+            className="richtext-mt-[8px] richtext-w-full"
             type="text"
             onChange={(e) => {
               e.preventDefault()
@@ -266,14 +263,14 @@ function AddMoreColor({ setColor }: AddMoreColorProps) {
           />
         </div>
 
-        <Separator className="my-[10px]" />
+        <Separator className="richtext-my-[10px]" />
         <Button
           onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
             e.preventDefault()
             setColor(colorMore)
             setOpenColorMore(false)
           }}
-          className="w-full"
+          className="richtext-w-full"
         >
           <Plus size={16} />
         </Button>
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index 78039ff..e016729 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -102,7 +102,7 @@ function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ ed
   })
 
   useEffect(() => {
-    document.body.classList.toggle('dark', props.dark)
+    document.documentElement.classList.toggle('dark', props.dark)
     themeActions.setTheme(props.dark ? 'dark' : 'light')
   }, [props.dark])
 
@@ -150,18 +150,18 @@ function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ ed
 
   return (
     <TooltipProvider delayDuration={0}>
-      <div className="reactjs-tiptap-editor rounded-[0.5rem] bg-background shadow overflow-hidden outline outline-1">
+      <div className="reactjs-tiptap-editor richtext-rounded-[0.5rem] richtext-bg-background richtext-shadow richtext-overflow-hidden richtext-outline richtext-outline-1">
         {!props?.hideBubble && <BubbleMenu bubbleMenu={props?.bubbleMenu} editor={editor} disabled={props?.disabled} />}
 
-        <div className="flex flex-col w-full max-h-full">
+        <div className="richtext-flex richtext-flex-col richtext-w-full richtext-max-h-full">
           {!props?.hideToolbar && <Toolbar editor={editor} disabled={!!props?.disabled} />}
 
-          <EditorContent className={`relative ${props?.contentClass || ''}`} editor={editor} />
+          <EditorContent className={`richtext-relative ${props?.contentClass || ''}`} editor={editor} />
 
-          <div className="flex items-center justify-between p-3 border-t">
+          <div className="richtext-flex richtext-items-center richtext-justify-between richtext-p-3 richtext-border-t">
             {hasExtensionValue && (
-              <div className="flex flex-col">
-                <div className="flex justify-end gap-3 text-sm">
+              <div className="richtext-flex richtext-flex-col">
+                <div className="richtext-flex richtext-justify-end richtext-gap-3 richtext-text-sm">
                   <span>
                     {(editor as any).storage.characterCount.characters()}
                     {' '}
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 2424fba..3df1022 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -61,26 +61,26 @@ function Toolbar({ editor, disabled }: ToolbarProps) {
 
   return (
     <div
-      className="px-1 py-2 border-b"
+      className="richtext-px-1 richtext-py-2 richtext-border-b"
       style={{
         pointerEvents: disabled ? 'none' : 'auto',
         opacity: disabled ? 0.5 : 1,
       }}
     >
-      <div className="relative flex flex-wrap h-auto gap-y-1 gap-x-1">
+      <div className="richtext-relative richtext-flex richtext-flex-wrap richtext-h-auto richtext-gap-y-1 richtext-gap-x-1">
         {items.map((item: ToolbarItemProps, key) => {
           const ButtonComponent = item.button.component
 
           return (
-            <div className="flex items-center" key={key}>
-              {item?.spacer && <Separator orientation="vertical" className="h-[16px] mx-[10px]" />}
+            <div className="richtext-flex richtext-items-center" key={key}>
+              {item?.spacer && <Separator orientation="vertical" className="!richtext-h-[16px] !richtext-mx-[10px]" />}
 
               <ButtonComponent
                 {...item.button.componentProps}
                 disabled={disabled || item?.button?.componentProps?.disabled}
               />
 
-              {item?.divider && <Separator orientation="vertical" className="h-auto mx-2" />}
+              {item?.divider && <Separator orientation="vertical" className="!richtext-h-auto !richtext-mx-2" />}
             </div>
           )
         })}
diff --git a/src/components/icons/DeleteColumn.tsx b/src/components/icons/DeleteColumn.tsx
index f64be13..c5cd890 100644
--- a/src/components/icons/DeleteColumn.tsx
+++ b/src/components/icons/DeleteColumn.tsx
@@ -5,7 +5,7 @@ function DeleteColumn() {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       aria-hidden="true"
       role="img"
-      className="w-4 h-4 iconify iconify--hugeicons"
+      className="richtext-w-4 richtext-h-4"
       width="1em"
       height="1em"
       viewBox="0 0 24 24"
diff --git a/src/components/icons/DeleteRow.tsx b/src/components/icons/DeleteRow.tsx
index 97ce62a..11c699d 100644
--- a/src/components/icons/DeleteRow.tsx
+++ b/src/components/icons/DeleteRow.tsx
@@ -5,7 +5,7 @@ function DeleteRow() {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       aria-hidden="true"
       role="img"
-      className="w-4 h-4 iconify iconify--hugeicons"
+      className="richtext-w-4 richtext-h-4"
       width="1em"
       height="1em"
       viewBox="0 0 24 24"
diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
index 704320b..393edc6 100644
--- a/src/components/icons/Icon.tsx
+++ b/src/components/icons/Icon.tsx
@@ -10,7 +10,7 @@ export interface IconComponentProps {
 function IconComponent(props: IconComponentProps) {
   const Icon = icons[props.name]
 
-  return Icon ? <Icon onClick={props?.onClick} className={`w-4 h-4 ${props?.className || ''}`} /> : null
+  return Icon ? <Icon onClick={props?.onClick} className={`richtext-w-4 richtext-h-4 ${props?.className || ''}`} /> : null
 }
 
 export { IconComponent }
diff --git a/src/components/menus/components/BubbleMenuKatex.tsx b/src/components/menus/components/BubbleMenuKatex.tsx
index cb97ea6..8e988f2 100644
--- a/src/components/menus/components/BubbleMenuKatex.tsx
+++ b/src/components/menus/components/BubbleMenuKatex.tsx
@@ -61,7 +61,7 @@ function BubbleMenuKatex({ editor, ...props }: any) {
             <></>
           )
         : (
-            <div className="p-2 bg-white border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
+            <div className="richtext-p-2 richtext-bg-white richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black richtext-border-neutral-200 dark:richtext-border-neutral-800">
               {visible
                 ? (
                     <>
@@ -73,8 +73,8 @@ function BubbleMenuKatex({ editor, ...props }: any) {
                         defaultValue={text}
                         style={{ marginBottom: 8 }}
                       />
-                      <div className="flex items-center justify-between gap-[6px]">
-                        <Button onClick={submit} className="flex-1">Submit</Button>
+                      <div className="richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]">
+                        <Button onClick={submit} className="richtext-flex-1">Submit</Button>
 
                         <a href="https://katex.org/" target="_blank" rel="noreferrer noopener">
                           <HelpCircle size={16} />
@@ -83,7 +83,7 @@ function BubbleMenuKatex({ editor, ...props }: any) {
                     </>
                   )
                 : (
-                    <div className="flex items-center justify-center gap-[6px]">
+                    <div className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-[6px]">
                       <ActionButton tooltip="Edit" action={() => toggleVisible(!visible)}>
                         <Pencil size={16} />
                       </ActionButton>
diff --git a/src/components/menus/components/BubbleMenuMedia.tsx b/src/components/menus/components/BubbleMenuMedia.tsx
index ab8fc0f..c59e51f 100644
--- a/src/components/menus/components/BubbleMenuMedia.tsx
+++ b/src/components/menus/components/BubbleMenuMedia.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-useless-fragment */
 import { Fragment, useMemo } from 'react'
 
 import type { Editor } from '@tiptap/react'
@@ -29,16 +30,14 @@ function ItemA({ item, disabled, editor }: any) {
     <Fragment>
       {item.type === 'divider'
         ? (
-            <Separator orientation="vertical" className="mx-1 me-2 h-[16px]" />
+            <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
           )
         : (
-            <>
-              <Comp
-                {...item.componentProps}
-                editor={editor}
-                disabled={disabled || item?.componentProps?.disabled}
-              />
-            </>
+            <Comp
+              {...item.componentProps}
+              editor={editor}
+              disabled={disabled || item?.componentProps?.disabled}
+            />
           )}
     </Fragment>
   )
@@ -87,8 +86,8 @@ function BubbleMenuImage(props: IPropsBubbleMenu) {
       >
         {items?.length
           ? (
-              <div className="w-auto px-3 py-2 transition-all border rounded-sm shadow-sm pointer-events-auto select-none border-neutral-200 dark:border-neutral-800 bg-background">
-                <div className="flex items-center flex-nowrap whitespace-nowrap h-[26px] justify-start relative">
+              <div className="richtext-w-auto richtext-px-3 richtext-py-2 richtext-transition-all richtext-border richtext-rounded-sm richtext-shadow-sm richtext-pointer-events-auto richtext-select-none richtext-border-neutral-200 dark:richtext-border-neutral-800 richtext-bg-background">
+                <div className="richtext-flex richtext-items-center richtext-flex-nowrap richtext-whitespace-nowrap richtext-h-[26px] richtext-justify-start richtext-relative">
                   {items?.map((item: any, key: any) => {
                     return (
                       <ItemA
@@ -146,8 +145,8 @@ function BubbleMenuVideo(props: IPropsBubbleMenu) {
       >
         {items?.length
           ? (
-              <div className="w-auto px-3 py-2 transition-all border rounded-sm shadow-sm pointer-events-auto select-none border-neutral-200 dark:border-neutral-800 bg-background">
-                <div className="flex items-center flex-nowrap whitespace-nowrap h-[26px] justify-start relative">
+              <div className="richtext-w-auto richtext-px-3 richtext-py-2 richtext-transition-all richtext-border richtext-rounded-sm richtext-shadow-sm richtext-pointer-events-auto richtext-select-none richtext-border-neutral-200 dark:richtext-border-neutral-800 richtext-bg-background">
+                <div className="richtext-flex richtext-items-center richtext-flex-nowrap richtext-whitespace-nowrap richtext-h-[26px] richtext-justify-start richtext-relative">
                   {items?.map((item: any, key: any) => {
                     return (
                       <ItemA
diff --git a/src/components/menus/components/BubbleMenuText.tsx b/src/components/menus/components/BubbleMenuText.tsx
index 031d602..6b1b964 100644
--- a/src/components/menus/components/BubbleMenuText.tsx
+++ b/src/components/menus/components/BubbleMenuText.tsx
@@ -63,15 +63,15 @@ function BubbleMenuText(props: BubbleMenuTextProps) {
     <BubbleMenu shouldShow={shouldShow} editor={props?.editor} tippyOptions={tippyOptions as any}>
       {items?.length
         ? (
-            <div className="w-auto px-3 py-2 transition-all border rounded-sm shadow-sm pointer-events-auto select-none border-neutral-200 dark:border-neutral-800 bg-background">
-              <div className="flex items-center gap-[4px] flex-nowrap whitespace-nowrap h-[26px] justify-start relative">
+            <div className="richtext-w-auto richtext-px-3 richtext-py-2 richtext-transition-all richtext-border richtext-rounded-sm richtext-shadow-sm richtext-pointer-events-auto richtext-select-none richtext-border-neutral-200 dark:richtext-border-neutral-800 richtext-bg-background">
+              <div className="richtext-flex richtext-items-center richtext-gap-[4px] richtext-flex-nowrap richtext-whitespace-nowrap richtext-h-[26px] richtext-justify-start richtext-relative">
                 {items?.map((item: any, key: any) => {
                   if (item?.type === 'divider') {
                     return (
                       <Separator
                         key={`bubbleMenu-divider-${key}`}
                         orientation="vertical"
-                        className="mx-1 me-2 h-[16px]"
+                        className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]"
                       />
                     )
                   }
diff --git a/src/components/menus/components/ContentMenu.tsx b/src/components/menus/components/ContentMenu.tsx
index 3d5867e..7c052a3 100644
--- a/src/components/menus/components/ContentMenu.tsx
+++ b/src/components/menus/components/ContentMenu.tsx
@@ -183,150 +183,148 @@ function ContentMenu(props: ContentMenuProps) {
   }
 
   return (
-    <>
-      <div
-        className={
-          `drag-handle [transition-property:top,_left] ease-in-out duration-200 ${props?.className}`
-        }
-        style={{
-          opacity: props?.disabled ? 0 : 1,
-        }}
-        ref={dragElement}
-      >
-        <div className="flex items-center gap-0.5 [transition-property:top,_left] ease-in-out duration-200">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="w-7 h-7 cursor-grab"
-            disabled={props?.disabled}
-            onClick={handleAdd}
-          >
-            <IconComponent name="Plus" className="text-lg text-neutral-600 dark:text-neutral-200" />
-          </Button>
-          <DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
-            <div className="relative flex flex-col">
-              <Tooltip>
-                <TooltipTrigger asChild disabled={props?.disabled}>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="w-7 h-7 cursor-grab relative z-[1]"
-                    disabled={props?.disabled}
-                    onMouseUp={() => {
-                      if (props?.disabled) {
-                        return
-                      }
-                      setMenuOpen(true)
-                    }}
-                  >
-                    <IconComponent name="Grip" className="text-sm dark:text-neutral-200 text-neutral-600" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{t('editor.draghandle.tooltip')}</p>
-                </TooltipContent>
-              </Tooltip>
+    <div
+      className={
+          `drag-handle [transition-property:top,_left] richtext-ease-in-out richtext-duration-200 ${props?.className}`
+      }
+      style={{
+        opacity: props?.disabled ? 0 : 1,
+      }}
+      ref={dragElement}
+    >
+      <div className="richtext-flex richtext-items-center richtext-gap-0.5 [transition-property:top,_left] richtext-ease-in-out richtext-duration-200">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="richtext-w-7 richtext-h-7 richtext-cursor-grab"
+          disabled={props?.disabled}
+          onClick={handleAdd}
+        >
+          <IconComponent name="Plus" className="richtext-text-lg richtext-text-neutral-600 dark:richtext-text-neutral-200" />
+        </Button>
+        <DropdownMenu open={menuOpen} onOpenChange={handleMenuOpenChange}>
+          <div className="richtext-relative richtext-flex richtext-flex-col">
+            <Tooltip>
+              <TooltipTrigger asChild disabled={props?.disabled}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="richtext-w-7 richtext-h-7 richtext-cursor-grab richtext-relative richtext-z-[1]"
+                  disabled={props?.disabled}
+                  onMouseUp={() => {
+                    if (props?.disabled) {
+                      return
+                    }
+                    setMenuOpen(true)
+                  }}
+                >
+                  <IconComponent name="Grip" className="richtext-text-sm dark:richtext-text-neutral-200 richtext-text-neutral-600" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t('editor.draghandle.tooltip')}</p>
+              </TooltipContent>
+            </Tooltip>
 
-              <DropdownMenuTrigger className="absolute top-0 left-0 w-[28px] h-[28px] z-0" />
-            </div>
+            <DropdownMenuTrigger className="richtext-absolute richtext-top-0 richtext-left-0 richtext-w-[28px] richtext-h-[28px] richtext-z-0" />
+          </div>
 
-            <DropdownMenuContent className="w-48" align="start" side="bottom" sideOffset={0}>
-              <DropdownMenuItem
-                onClick={deleteNode}
-                className="flex gap-3 focus:text-red-500 focus:bg-red-400 hover:bg-red-400 dark:hover:text-red-500 bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-30 dark:hover:bg-opacity-20"
-              >
-                <IconComponent name="Trash2" />
-                <span>{t('editor.remove')}</span>
-              </DropdownMenuItem>
+          <DropdownMenuContent className="richtext-w-48" align="start" side="bottom" sideOffset={0}>
+            <DropdownMenuItem
+              onClick={deleteNode}
+              className="richtext-flex richtext-gap-3 focus:richtext-text-red-500 focus:richtext-bg-red-400 hover:richtext-bg-red-400 dark:hover:richtext-text-red-500 richtext-bg-opacity-10 hover:richtext-bg-opacity-20 focus:richtext-bg-opacity-30 dark:hover:richtext-bg-opacity-20"
+            >
+              <IconComponent name="Trash2" />
+              <span>{t('editor.remove')}</span>
+            </DropdownMenuItem>
 
-              {hasClearExtension
-                ? (
-                    <DropdownMenuItem className="flex gap-3" onClick={resetTextFormatting}>
-                      <IconComponent name="PaintRoller" />
-                      <span>{t('editor.clear.tooltip')}</span>
-                    </DropdownMenuItem>
-                  )
-                : null}
+            {hasClearExtension
+              ? (
+                  <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={resetTextFormatting}>
+                    <IconComponent name="PaintRoller" />
+                    <span>{t('editor.clear.tooltip')}</span>
+                  </DropdownMenuItem>
+                )
+              : null}
 
-              <DropdownMenuItem className="flex gap-3" onClick={copyNodeToClipboard}>
-                <IconComponent name="Clipboard" />
-                <span>{t('editor.copyToClipboard')}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem className="flex gap-3" onClick={duplicateNode}>
-                <IconComponent name="Copy" />
-                <span>{t('editor.copy')}</span>
-              </DropdownMenuItem>
+            <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={copyNodeToClipboard}>
+              <IconComponent name="Clipboard" />
+              <span>{t('editor.copyToClipboard')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={duplicateNode}>
+              <IconComponent name="Copy" />
+              <span>{t('editor.copy')}</span>
+            </DropdownMenuItem>
 
-              {hasTextAlignExtension || hasIndentExtension
-                ? (
-                    <DropdownMenuSeparator />
-                  )
-                : null}
+            {hasTextAlignExtension || hasIndentExtension
+              ? (
+                  <DropdownMenuSeparator />
+                )
+              : null}
 
-              {hasTextAlignExtension
-                ? (
-                    <DropdownMenuSub>
-                      <DropdownMenuSubTrigger className="flex gap-3">
-                        <IconComponent name="AlignCenter" />
-                        <span>{t('editor.textalign.tooltip')}</span>
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuPortal>
-                        <DropdownMenuSubContent>
-                          <DropdownMenuItem className="flex gap-3" onClick={() => setTextAlign('left')}>
-                            <IconComponent name="AlignLeft" />
-                            <span>{t('editor.textalign.left.tooltip')}</span>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem className="flex gap-3" onClick={() => setTextAlign('center')}>
-                            <IconComponent name="AlignCenter" />
-                            <span>{t('editor.textalign.center.tooltip')}</span>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem className="flex gap-3" onClick={() => setTextAlign('right')}>
-                            <IconComponent name="AlignRight" />
-                            <span>{t('editor.textalign.right.tooltip')}</span>
-                          </DropdownMenuItem>
-                        </DropdownMenuSubContent>
-                      </DropdownMenuPortal>
-                    </DropdownMenuSub>
-                  )
-                : null}
+            {hasTextAlignExtension
+              ? (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger className="richtext-flex richtext-gap-3">
+                      <IconComponent name="AlignCenter" />
+                      <span>{t('editor.textalign.tooltip')}</span>
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={() => setTextAlign('left')}>
+                          <IconComponent name="AlignLeft" />
+                          <span>{t('editor.textalign.left.tooltip')}</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={() => setTextAlign('center')}>
+                          <IconComponent name="AlignCenter" />
+                          <span>{t('editor.textalign.center.tooltip')}</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="richtext-flex richtext-gap-3" onClick={() => setTextAlign('right')}>
+                          <IconComponent name="AlignRight" />
+                          <span>{t('editor.textalign.right.tooltip')}</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                )
+              : null}
 
-              {hasIndentExtension
-                ? (
-                    <DropdownMenuSub>
-                      <DropdownMenuSubTrigger className="flex gap-3">
-                        <IconComponent name="IndentIncrease" />
-                        <span>{t('editor.indent')}</span>
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuPortal>
-                        <DropdownMenuSubContent>
-                          <DropdownMenuItem
-                            className="flex gap-3"
-                            onClick={increaseIndent}
-                            disabled={currentNode?.attrs?.indent >= IndentProps.max}
-                          >
-                            <IconComponent name="IndentIncrease" />
-                            <span>{t('editor.indent.tooltip')}</span>
-                          </DropdownMenuItem>
+            {hasIndentExtension
+              ? (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger className="richtext-flex richtext-gap-3">
+                      <IconComponent name="IndentIncrease" />
+                      <span>{t('editor.indent')}</span>
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="richtext-flex richtext-gap-3"
+                          onClick={increaseIndent}
+                          disabled={currentNode?.attrs?.indent >= IndentProps.max}
+                        >
+                          <IconComponent name="IndentIncrease" />
+                          <span>{t('editor.indent.tooltip')}</span>
+                        </DropdownMenuItem>
 
-                          <DropdownMenuItem
-                            className="flex gap-3"
-                            onClick={decreaseIndent}
-                            disabled={currentNode?.attrs?.indent <= IndentProps.min}
-                          >
-                            <IconComponent name="IndentDecrease" />
-                            <span>{t('editor.outdent.tooltip')}</span>
-                          </DropdownMenuItem>
-                        </DropdownMenuSubContent>
-                      </DropdownMenuPortal>
-                    </DropdownMenuSub>
-                  )
-                : null}
+                        <DropdownMenuItem
+                          className="richtext-flex richtext-gap-3"
+                          onClick={decreaseIndent}
+                          disabled={currentNode?.attrs?.indent <= IndentProps.min}
+                        >
+                          <IconComponent name="IndentDecrease" />
+                          <span>{t('editor.outdent.tooltip')}</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                )
+              : null}
 
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/menus/components/TableBubbleMenu.tsx b/src/components/menus/components/TableBubbleMenu.tsx
index 9443d93..044c876 100644
--- a/src/components/menus/components/TableBubbleMenu.tsx
+++ b/src/components/menus/components/TableBubbleMenu.tsx
@@ -94,7 +94,7 @@ function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
         sticky: 'popper',
       }}
     >
-      <div className="min-w-32 flex flex-row h-full items-center leading-none gap-0.5 p-2 w-full bg-background rounded-lg shadow-sm border border-border">
+      <div className="richtext-min-w-32 richtext-flex richtext-flex-row richtext-h-full richtext-items-center richtext-leading-none richtext-gap-0.5 richtext-p-2 richtext-w-full richtext-bg-background richtext-rounded-lg richtext-shadow-sm richtext-border richtext-border-border">
         <ActionButton
           icon="BetweenHorizonalEnd"
           tooltip={t('editor.table.menu.insertColumnBefore')}
@@ -122,7 +122,7 @@ function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
           }}
           disabled={!editor?.can().deleteColumn?.()}
         />
-        <Separator orientation="vertical" className="mx-1 me-2 h-[16px]" />
+        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
 
         <ActionButton
           icon="BetweenVerticalEnd"
@@ -152,7 +152,7 @@ function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
           }}
           disabled={!editor?.can()?.deleteRow?.()}
         />
-        <Separator orientation="vertical" className="mx-1 me-2 h-[16px]" />
+        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
         <ActionButton
           icon="TableCellsMerge"
           action={onMergeCell}
@@ -171,7 +171,7 @@ function TableBubbleMenu({ editor }: TableBubbleMenuProps) {
           }}
           disabled={!editor?.can()?.splitCell?.()}
         />
-        <Separator orientation="vertical" className="mx-1 me-2 h-[16px]" />
+        <Separator orientation="vertical" className="!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]" />
 
         <HighlightActionButton
           editor={editor}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 9473fdb..00b7bf5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,25 +5,25 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'richtext-inline-flex richtext-items-center richtext-justify-center richtext-whitespace-nowrap richtext-rounded-md richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-colors focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'richtext-bg-primary richtext-text-primary-foreground hover:richtext-bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          'richtext-bg-destructive richtext-text-destructive-foreground hover:richtext-bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'richtext-border richtext-border-input richtext-bg-background hover:richtext-bg-accent hover:richtext-text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'richtext-bg-secondary richtext-text-secondary-foreground hover:richtext-bg-secondary/80',
+        ghost: 'hover:richtext-bg-accent hover:richtext-text-accent-foreground',
+        link: 'richtext-text-primary richtext-underline-offset-4 hover:richtext-underline',
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: 'richtext-h-10 richtext-px-4 richtext-py-2',
+        sm: 'richtext-h-9 richtext-rounded-md richtext-px-3',
+        lg: 'richtext-h-11 richtext-rounded-md richtext-px-8',
+        icon: 'richtext-h-10 richtext-w-10',
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index c89361a..39b9db4 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -27,17 +27,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      inset && 'pl-8',
+      'richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none focus:richtext-bg-accent data-[state=open]:richtext-bg-accent',
+      inset && 'richtext-pl-8',
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="richtext-ml-auto richtext-h-4 richtext-w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName
+  = DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -46,13 +47,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'richtext-z-50 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-lg data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
       className,
     )}
     {...props}
   />
 ))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName
+  = DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -63,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'richtext-z-50 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
         className,
       )}
       {...props}
@@ -81,8 +83,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
+      'richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50',
+      inset && 'richtext-pl-8',
       className,
     )}
     {...props}
@@ -97,21 +99,22 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50',
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="richtext-h-4 richtext-w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName
+  = DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -120,14 +123,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50',
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Circle className="richtext-h-2 richtext-w-2 richtext-fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -143,7 +146,11 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    className={cn(
+      'richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-font-semibold',
+      inset && 'richtext-pl-8',
+      className,
+    )}
     {...props}
   />
 ))
@@ -155,15 +162,21 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted', className)}
     {...props}
   />
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
   return (
-    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+    <span
+      className={cn('richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60', className)}
+      {...props}
+    />
   )
 }
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index fc5146e..b62780e 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'richtext-flex richtext-h-10 richtext-w-full richtext-rounded-md richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background file:richtext-border-0 file:richtext-bg-transparent file:richtext-text-sm file:richtext-font-medium placeholder:richtext-text-muted-foreground focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50',
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 5ff2ddb..f7df312 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -7,7 +7,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'richtext-text-sm richtext-font-medium richtext-leading-none peer-disabled:richtext-cursor-not-allowed peer-disabled:richtext-opacity-70',
 )
 
 const Label = React.forwardRef<
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index ce5e43f..072550b 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'richtext-z-50 richtext-w-72 richtext-rounded-md richtext-border richtext-bg-popover richtext-p-4 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 7f6db44..bebd053 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -18,8 +18,8 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        'richtext-shrink-0 richtext-bg-border',
+        orientation === 'horizontal' ? 'richtext-h-[1px] richtext-w-full' : 'richtext-h-full richtext-w-[1px]',
         className,
       )}
       {...props}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 4ffe97a..0f8225f 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'richtext-peer richtext-inline-flex richtext-h-6 richtext-w-11 richtext-shrink-0 richtext-cursor-pointer richtext-items-center richtext-rounded-full richtext-border-2 richtext-border-transparent richtext-transition-colors focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 focus-visible:richtext-ring-offset-background disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 data-[state=checked]:richtext-bg-primary data-[state=unchecked]:richtext-bg-input',
       className,
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'richtext-pointer-events-none richtext-block richtext-h-5 richtext-w-5 richtext-rounded-full richtext-bg-background richtext-shadow-lg richtext-ring-0 richtext-transition-transform data-[state=checked]:richtext-translate-x-5 data-[state=unchecked]:richtext-translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 03caf14..2316d1d 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'richtext-inline-flex richtext-h-10 richtext-items-center richtext-justify-center richtext-rounded-md richtext-bg-muted richtext-p-1 richtext-text-muted-foreground',
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'richtext-inline-flex richtext-items-center richtext-justify-center richtext-whitespace-nowrap richtext-rounded-sm richtext-px-3 richtext-py-1.5 richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-all focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50 data-[state=active]:richtext-bg-background data-[state=active]:richtext-text-foreground data-[state=active]:richtext-shadow-sm',
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'richtext-mt-2 richtext-ring-offset-background focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2',
       className,
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index ea7ba00..3b21dde 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'richtext-flex richtext-min-h-[80px] richtext-w-full richtext-rounded-md richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background placeholder:richtext-text-muted-foreground focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50',
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 6328e1f..3a2dfbf 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'richtext-fixed richtext-top-0 richtext-z-[100] richtext-flex richtext-max-h-screen richtext-w-full richtext-flex-col-reverse richtext-p-4 sm:richtext-bottom-0 sm:richtext-right-0 sm:richtext-top-auto sm:richtext-flex-col md:richtext-max-w-[420px]',
       className,
     )}
     {...props}
@@ -25,13 +25,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'richtext-group richtext-pointer-events-auto richtext-relative richtext-flex richtext-w-full richtext-items-center richtext-justify-between richtext-space-x-4 richtext-overflow-hidden richtext-rounded-md richtext-border richtext-p-6 richtext-pr-8 richtext-shadow-lg richtext-transition-all data-[swipe=cancel]:richtext-translate-x-0 data-[swipe=end]:richtext-translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:richtext-translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:richtext-transition-none data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[swipe=end]:richtext-animate-out data-[state=closed]:richtext-fade-out-80 data-[state=closed]:richtext-slide-out-to-right-full data-[state=open]:richtext-slide-in-from-top-full data-[state=open]:sm:richtext-slide-in-from-bottom-full',
   {
     variants: {
       variant: {
-        default: 'border bg-background text-foreground',
+        default: 'richtext-border richtext-bg-background richtext-text-foreground',
         destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
+          'richtext-destructive richtext-group richtext-border-destructive richtext-bg-destructive richtext-text-destructive-foreground',
       },
     },
     defaultVariants: {
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      'richtext-inline-flex richtext-h-8 richtext-shrink-0 richtext-items-center richtext-justify-center richtext-rounded-md richtext-border richtext-bg-transparent richtext-px-3 richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-colors hover:richtext-bg-secondary focus:richtext-outline-none focus:richtext-ring-2 focus:richtext-ring-ring focus:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50 group-[.destructive]:richtext-border-muted/40 group-[.destructive]:hover:richtext-border-destructive/30 group-[.destructive]:hover:richtext-bg-destructive group-[.destructive]:hover:richtext-text-destructive-foreground group-[.destructive]:focus:richtext-ring-destructive',
       className,
     )}
     {...props}
@@ -77,13 +77,13 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'richtext-absolute richtext-right-2 richtext-top-2 richtext-rounded-md richtext-p-1 richtext-text-foreground/50 richtext-opacity-0 richtext-transition-opacity hover:richtext-text-foreground focus:richtext-opacity-100 focus:richtext-outline-none focus:richtext-ring-2 group-hover:richtext-opacity-100 group-[.destructive]:richtext-text-red-300 group-[.destructive]:hover:richtext-text-red-50 group-[.destructive]:focus:richtext-ring-red-400 group-[.destructive]:focus:richtext-ring-offset-red-600',
       className,
     )}
     toast-close=""
     {...props}
   >
-    <X className="h-4 w-4" />
+    <X className="richtext-h-4 richtext-w-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
@@ -94,7 +94,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn('text-sm font-semibold', className)}
+    className={cn('richtext-text-sm richtext-font-semibold', className)}
     {...props}
   />
 ))
@@ -106,7 +106,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn('text-sm opacity-90', className)}
+    className={cn('richtext-text-sm richtext-opacity-90', className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..edc72d9
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast'
+import { useToast } from '@/components/ui/use-toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, title, description, action, ...props }) => {
+        return (
+          <Toast key={id} {...props}>
+            <div className="richtext-grid richtext-gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
index fe91084..7818fcd 100644
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -7,17 +7,18 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'richtext-inline-flex richtext-items-center richtext-justify-center richtext-rounded-md richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-colors hover:richtext-bg-muted hover:richtext-text-muted-foreground focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50 data-[state=on]:richtext-bg-accent data-[state=on]:richtext-text-accent-foreground',
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+        default: 'richtext-bg-transparent',
+        outline:
+          'richtext-border richtext-border-input richtext-bg-transparent hover:richtext-bg-accent hover:richtext-text-accent-foreground',
       },
       size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2',
-        lg: 'h-11 px-5',
+        default: 'richtext-h-10 richtext-px-3',
+        sm: 'richtext-h-9 richtext-px-2',
+        lg: 'richtext-h-11 richtext-px-5',
       },
     },
     defaultVariants: {
@@ -29,7 +30,8 @@ const toggleVariants = cva(
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index cc35e2d..0192352 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'richtext-z-50 richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-px-3 richtext-py-1.5 richtext-text-sm richtext-text-popover-foreground richtext-shadow-md richtext-animate-in richtext-fade-in-0 richtext-zoom-in-95 data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=closed]:richtext-zoom-out-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
       className,
     )}
     {...props}
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
index ebc1df6..28b771b 100644
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -4,7 +4,10 @@
 // Inspired by react-hot-toast library
 import * as React from 'react'
 
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+import type {
+  ToastActionElement,
+  ToastProps,
+} from '@/components/ui/toast'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx b/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx
index f47f52f..405c8d6 100644
--- a/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx
+++ b/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx
@@ -48,11 +48,11 @@ function CodeBlockActiveButton({ action, languages, ...props }: Props) {
           icon={props?.icon}
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-full">
+      <DropdownMenuContent className="richtext-w-full">
         {langs?.map((item: any) => {
           return (
             <DropdownMenuItem key={`codeblock-${item.title}`} onClick={() => onClick(item.language)}>
-              <div className="h-full ml-1">
+              <div className="richtext-h-full richtext-ml-1">
                 {item.title}
               </div>
             </DropdownMenuItem>
diff --git a/src/extensions/Color/components/ColorActionButton.tsx b/src/extensions/Color/components/ColorActionButton.tsx
index 16e07c9..054b9f4 100644
--- a/src/extensions/Color/components/ColorActionButton.tsx
+++ b/src/extensions/Color/components/ColorActionButton.tsx
@@ -78,9 +78,9 @@ function ColorActionButton(props: ColorActionButtonProps) {
   )
 
   return (
-    <div className="flex items-center h-[32px]">
+    <div className="richtext-flex richtext-items-center richtext-h-[32px]">
       <ActionButton tooltip={props?.tooltip} disabled={props?.disabled} action={toggleColor}>
-        <span className="flex items-center justify-center text-sm">
+        <span className="richtext-flex richtext-items-center richtext-justify-center richtext-text-sm">
           <IconC fill={selectedColor} />
         </span>
       </ActionButton>
@@ -93,8 +93,8 @@ function ColorActionButton(props: ColorActionButtonProps) {
         colors={props?.colors}
         defaultColor={props?.defaultColor}
       >
-        <Button variant="ghost" size="icon" className="h-[32px] w-3" disabled={props?.disabled}>
-          <IconComponent className="w-3 h-3 text-zinc-500" name="MenuDown" />
+        <Button variant="ghost" size="icon" className="richtext-h-[32px] richtext-w-3" disabled={props?.disabled}>
+          <IconComponent className="richtext-w-3 richtext-h-3 richtext-text-zinc-500" name="MenuDown" />
         </Button>
       </ColorPicker>
     </div>
diff --git a/src/extensions/Emoji/components/EmojiList/EmojiList.tsx b/src/extensions/Emoji/components/EmojiList/EmojiList.tsx
index 827af7c..fdabb49 100644
--- a/src/extensions/Emoji/components/EmojiList/EmojiList.tsx
+++ b/src/extensions/Emoji/components/EmojiList/EmojiList.tsx
@@ -66,17 +66,17 @@ export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
   }))
 
   return (
-    <div className="w-[200px] max-h-[320px] overflow-x-hidden overflow-y-auto rounded-sm border bg-popover p-1 text-popover-foreground shadow-md outline-none">
+    <div className="richtext-w-[200px] richtext-max-h-[320px] richtext-overflow-x-hidden richtext-overflow-y-auto richtext-rounded-sm richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none">
       <div ref={$container}>
         {props.items.length
           ? (
               props.items.map((item, index) => (
                 <span
-                  className={clsx(' flex relative  cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground  hover:bg-accent', index === selectedIndex ? 'bg-accent' : '')}
+                  className={clsx(' richtext-flex richtext-relative  richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground  hover:richtext-bg-accent', index === selectedIndex ? 'bg-accent' : '')}
                   key={index}
                   onClick={() => selectItem(index)}
                 >
-                  {item.fallbackImage ? <img src={item.fallbackImage} className="w-[1em] h-[1em]" /> : item.emoji}
+                  {item.fallbackImage ? <img src={item.fallbackImage} className="richtext-w-[1em] richtext-h-[1em]" /> : item.emoji}
                   :
                   {item.name}
                   :
@@ -84,7 +84,7 @@ export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
               ))
             )
           : (
-              <div className="flex relative  cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors">
+              <div className="richtext-flex richtext-relative  richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none richtext-transition-colors">
                 <span>{t('no_result_found')}</span>
               </div>
             )}
diff --git a/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx b/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx
index 880be07..7d020d6 100644
--- a/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx
@@ -80,9 +80,9 @@ function EmojiPickerWrap({ onSelectEmoji, children }: IProps) {
     <Popover>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
 
-      <PopoverContent hideWhenDetached className="w-full h-full p-2" align="start" side="bottom">
+      <PopoverContent hideWhenDetached className="richtext-w-full richtext-h-full richtext-p-2" align="start" side="bottom">
         <Tabs defaultValue="Recently Used">
-          <TabsList className="flex items-center gap-[6px]">
+          <TabsList className="richtext-flex richtext-items-center richtext-gap-[6px]">
             {renderedList.map((list) => {
               return (
                 <TabsTrigger
@@ -101,13 +101,13 @@ function EmojiPickerWrap({ onSelectEmoji, children }: IProps) {
                 key={list.title}
                 value={list.title}
               >
-                <p className="mb-[6px] font-semibold">{t(list.title as any)}</p>
-                <div className="grid grid-cols-8 gap-1 ">
+                <p className="richtext-mb-[6px] richtext-font-semibold">{t(list.title as any)}</p>
+                <div className="richtext-grid richtext-grid-cols-8 richtext-gap-1 ">
                   {(list.data || []).map(ex => (
                     <div
                       key={ex}
                       onClick={() => selectEmoji(ex)}
-                      className="text-center cursor-pointer"
+                      className="richtext-text-center richtext-cursor-pointer"
                     >
                       {ex}
                     </div>
diff --git a/src/extensions/FontFamily/components/FontFamilyButton.tsx b/src/extensions/FontFamily/components/FontFamilyButton.tsx
index 71ba6a8..4d31177 100644
--- a/src/extensions/FontFamily/components/FontFamilyButton.tsx
+++ b/src/extensions/FontFamily/components/FontFamilyButton.tsx
@@ -65,7 +65,7 @@ function FontFamilyButton(props: Props) {
           icon="MenuDown"
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-full">
+      <DropdownMenuContent className="richtext-w-full">
         {props?.items?.map((item: any, index) => {
           const style
             = item.font === t('editor.fontFamily.default.tooltip') ? {} : { fontFamily: item.font }
@@ -73,7 +73,7 @@ function FontFamilyButton(props: Props) {
           return (
             <Fragment key={index}>
               <DropdownMenuCheckboxItem checked={active?.font === item.font} onClick={item.action}>
-                <div className="h-full ml-1" style={style}>
+                <div className="richtext-h-full richtext-ml-1" style={style}>
                   {item.font}
                 </div>
               </DropdownMenuCheckboxItem>
diff --git a/src/extensions/FontSize/components/FontSizeMenuButton.tsx b/src/extensions/FontSize/components/FontSizeMenuButton.tsx
index c95e66b..6d91961 100644
--- a/src/extensions/FontSize/components/FontSizeMenuButton.tsx
+++ b/src/extensions/FontSize/components/FontSizeMenuButton.tsx
@@ -55,7 +55,7 @@ function FontSizeMenuButton(props: IPropsFontSizeMenuButton) {
           icon="MenuDown"
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-32 overflow-y-auto max-h-96">
+      <DropdownMenuContent className="richtext-w-32 richtext-overflow-y-auto richtext-max-h-96">
         {props?.items?.map((item: any, index) => {
           return (
             <DropdownMenuCheckboxItem
@@ -63,7 +63,7 @@ function FontSizeMenuButton(props: IPropsFontSizeMenuButton) {
               checked={active.title === item.title}
               onClick={item.action}
             >
-              <div className="h-full ml-1">{item.title}</div>
+              <div className="richtext-h-full richtext-ml-1">{item.title}</div>
             </DropdownMenuCheckboxItem>
           )
         })}
diff --git a/src/extensions/Heading/components/HeadingButton.tsx b/src/extensions/Heading/components/HeadingButton.tsx
index a308e36..06c93a2 100644
--- a/src/extensions/Heading/components/HeadingButton.tsx
+++ b/src/extensions/Heading/components/HeadingButton.tsx
@@ -62,7 +62,7 @@ function HeadingButton(props: Props) {
           icon="MenuDown"
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-full">
+      <DropdownMenuContent className="richtext-w-full">
         {props?.items?.map((item: any, index) => {
           return (
             <Fragment key={index}>
@@ -70,9 +70,9 @@ function HeadingButton(props: Props) {
                 checked={active?.title === item.title}
                 onClick={item.action}
               >
-                <div className={`ml-1 h-full heading-${item.level}`}>{item.title}</div>
+                <div className={`richtext-ml-1 richtext-h-full heading-${item.level}`}>{item.title}</div>
                 {!!item?.shortcutKeys?.length && (
-                  <DropdownMenuShortcut className="pl-4">
+                  <DropdownMenuShortcut className="richtext-pl-4">
                     {item?.shortcutKeys?.map((item: any) => getShortcutKey(item)).join(' ')}
                   </DropdownMenuShortcut>
                 )}
diff --git a/src/extensions/Highlight/components/HighlightActionButton.tsx b/src/extensions/Highlight/components/HighlightActionButton.tsx
index ad53f14..f853586 100644
--- a/src/extensions/Highlight/components/HighlightActionButton.tsx
+++ b/src/extensions/Highlight/components/HighlightActionButton.tsx
@@ -78,7 +78,7 @@ function HighlightActionButton(props: IPropsHighlightActionButton) {
   )
 
   return (
-    <div className="flex items-center h-[32px]">
+    <div className="richtext-flex richtext-items-center richtext-h-[32px]">
       <ActionButton
         tooltip={props?.tooltip}
         disabled={props?.disabled}
@@ -86,7 +86,7 @@ function HighlightActionButton(props: IPropsHighlightActionButton) {
         tooltipOptions={props?.tooltipOptions}
         shortcutKeys={props?.shortcutKeys}
       >
-        <span className="flex items-center justify-center text-sm">
+        <span className="richtext-flex richtext-items-center richtext-justify-center richtext-text-sm">
           <IconC fill={selectedColor} />
         </span>
       </ActionButton>
@@ -97,8 +97,8 @@ function HighlightActionButton(props: IPropsHighlightActionButton) {
         highlight
         disabled={props?.disabled}
       >
-        <Button variant="ghost" size="icon" className="w-3 h-[32px]" disabled={props?.disabled}>
-          <IconComponent className="w-3 h-3 text-zinc-500" name="MenuDown" />
+        <Button variant="ghost" size="icon" className="richtext-w-3 richtext-h-[32px]" disabled={props?.disabled}>
+          <IconComponent className="richtext-w-3 richtext-h-3 richtext-text-zinc-500" name="MenuDown" />
         </Button>
       </ColorPicker>
     </div>
diff --git a/src/extensions/History/components/HistoryActionButton.tsx b/src/extensions/History/components/HistoryActionButton.tsx
index b09a8d0..5c88527 100644
--- a/src/extensions/History/components/HistoryActionButton.tsx
+++ b/src/extensions/History/components/HistoryActionButton.tsx
@@ -44,18 +44,18 @@ function HistoryActionButton(props?: Partial<IPropsHistoryActionButton>) {
       <TooltipTrigger asChild>
         <Toggle
           size="sm"
-          className={`w-[32px] h-[32px] ${customClass}`}
+          className={`richtext-w-[32px] richtext-h-[32px] ${customClass}`}
           disabled={isActive?.()}
           onClick={action}
           // data-state={isActive?.() ? 'on' : 'off'}
         >
-          {Icon && <Icon className="w-4 h-4" />}
+          {Icon && <Icon className="richtext-w-4 richtext-h-4" />}
           {children && <>{children}</>}
         </Toggle>
       </TooltipTrigger>
       {tooltip && (
         <TooltipContent {...tooltipOptions}>
-          <div className="flex flex-col items-center text-center max-w-24">
+          <div className="richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24">
             <div>{tooltip}</div>
             {!!props?.shortcutKeys?.length && <span>{getShortcutKeys(props?.shortcutKeys)}</span>}
           </div>
diff --git a/src/extensions/Iframe/components/IframeNodeView.tsx b/src/extensions/Iframe/components/IframeNodeView.tsx
index aea1b9d..fffbd77 100644
--- a/src/extensions/Iframe/components/IframeNodeView.tsx
+++ b/src/extensions/Iframe/components/IframeNodeView.tsx
@@ -20,35 +20,34 @@ function IframeNodeView(props: any) {
   }
 
   return (
-    <>
-      <NodeViewWrapper as="section">
-        {!props?.node?.attrs?.src && (
-          <div className="max-w-[600px] mx-[auto] my-[12px] flex items-center justify-center gap-[10px] p-[10px] border-[1px] border-solid border-[#ccc] rounded-[12px]">
-            <Input
-              value={originalLink}
-              onInput={(e: any) => setOriginalLink(e.target.value)}
-              type="url"
-              className="flex-1"
-              autoFocus
-              placeholder="Enter link"
-            />
-            <Button className="w-[60px]" onClick={handleConfirm}>
-              OK
-            </Button>
-          </div>
-        )}
-        {props?.node?.attrs?.src && (
-          <iframe
-            src={props?.node?.attrs?.src}
-            frameBorder="0"
-            allowFullScreen={true}
-            title={props?.node?.attrs?.src}
-            className="my-[12px]"
-          >
-          </iframe>
-        )}
-      </NodeViewWrapper>
-    </>
+
+    <NodeViewWrapper as="section">
+      {!props?.node?.attrs?.src && (
+        <div className="richtext-max-w-[600px] richtext-mx-[auto] richtext-my-[12px] richtext-flex richtext-items-center richtext-justify-center richtext-gap-[10px] richtext-p-[10px] richtext-border-[1px] richtext-border-solid richtext-border-[#ccc] richtext-rounded-[12px]">
+          <Input
+            value={originalLink}
+            onInput={(e: any) => setOriginalLink(e.target.value)}
+            type="url"
+            className="richtext-flex-1"
+            autoFocus
+            placeholder="Enter link"
+          />
+          <Button className="richtext-w-[60px]" onClick={handleConfirm}>
+            OK
+          </Button>
+        </div>
+      )}
+      {props?.node?.attrs?.src && (
+        <iframe
+          src={props?.node?.attrs?.src}
+          frameBorder="0"
+          allowFullScreen={true}
+          title={props?.node?.attrs?.src}
+          className="richtext-my-[12px]"
+        >
+        </iframe>
+      )}
+    </NodeViewWrapper>
   )
 }
 
diff --git a/src/extensions/ImageUpload/components/ImageUploader.tsx b/src/extensions/ImageUpload/components/ImageUploader.tsx
index ef84098..259ab81 100644
--- a/src/extensions/ImageUpload/components/ImageUploader.tsx
+++ b/src/extensions/ImageUpload/components/ImageUploader.tsx
@@ -50,22 +50,22 @@ function ImageUploader(props: any) {
   }
 
   return (
-    <NodeViewWrapper className="p-0 m-0" data-drag-handle>
+    <NodeViewWrapper className="richtext-p-0 richtext-m-0" data-drag-handle>
       <Popover defaultOpen modal>
         <PopoverTrigger asChild>
-          <div className="flex items-center w-full p-3 my-3 transition-all border rounded-sm cursor-pointer hover:bg-accent border-border text-muted-foreground">
-            <div className="flex items-center justify-between w-full">
-              <div className="flex items-center justify-center gap-3">
-                <IconComponent name="ImageUp" className="w-6 h-6" />
-                <span className="text-sm">{t('editor.image.dialog.title')}</span>
+          <div className="richtext-flex richtext-items-center richtext-w-full richtext-p-3 richtext-my-3 richtext-transition-all richtext-border richtext-rounded-sm richtext-cursor-pointer hover:richtext-bg-accent richtext-border-border richtext-text-muted-foreground">
+            <div className="richtext-flex richtext-items-center richtext-justify-between richtext-w-full">
+              <div className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-3">
+                <IconComponent name="ImageUp" className="richtext-w-6 richtext-h-6" />
+                <span className="richtext-text-sm">{t('editor.image.dialog.title')}</span>
               </div>
-              <IconComponent name="Trash2" className="hover:text-foreground" onClick={handleDelete} />
+              <IconComponent name="Trash2" className="hover:richtext-text-foreground" onClick={handleDelete} />
             </div>
           </div>
         </PopoverTrigger>
-        <PopoverContent className="w-full" onOpenAutoFocus={e => e.preventDefault()}>
-          <Tabs defaultValue="upload" className="w-[400px]" activationMode="manual">
-            <TabsList className="grid w-full grid-cols-2">
+        <PopoverContent className="richtext-w-full" onOpenAutoFocus={e => e.preventDefault()}>
+          <Tabs defaultValue="upload" className="richtext-w-[400px]" activationMode="manual">
+            <TabsList className="richtext-grid richtext-w-full richtext-grid-cols-2">
               <TabsTrigger value="upload">
                 {t('editor.image.dialog.tab.upload')}
                 {' '}
@@ -77,7 +77,7 @@ function ImageUploader(props: any) {
               </TabsTrigger>
             </TabsList>
             <TabsContent value="upload">
-              <Button className="w-full mt-1" size="sm" onClick={handleClick}>
+              <Button className="richtext-w-full richtext-mt-1" size="sm" onClick={handleClick}>
                 {t('editor.image.dialog.tab.upload')}
               </Button>
               <input
@@ -93,7 +93,7 @@ function ImageUploader(props: any) {
             </TabsContent>
             <TabsContent value="link">
               <form onSubmit={handleLink}>
-                <div className="flex items-center gap-2">
+                <div className="richtext-flex richtext-items-center richtext-gap-2">
                   <Input
                     type="url"
                     autoFocus={true}
diff --git a/src/extensions/Katex/components/KatexActiveButton.tsx b/src/extensions/Katex/components/KatexActiveButton.tsx
index dac0e98..f1b5bb7 100644
--- a/src/extensions/Katex/components/KatexActiveButton.tsx
+++ b/src/extensions/Katex/components/KatexActiveButton.tsx
@@ -41,25 +41,25 @@ function KatexActiveButton({ editor, ...props }: any) {
         />
       </PopoverTrigger>
 
-      <PopoverContent hideWhenDetached className="w-full h-full p-2" align="start" side="bottom">
-        <Label className="mb-[6px]">
+      <PopoverContent hideWhenDetached className="richtext-w-full richtext-h-full richtext-p-2" align="start" side="bottom">
+        <Label className="richtext-mb-[6px]">
           {t('editor.formula.dialog.text')}
         </Label>
-        <div className="flex w-full max-w-sm items-center gap-1.5 mb-[16px]">
-          <div className="relative w-full max-w-sm">
+        <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[16px]">
+          <div className="richtext-relative richtext-w-full richtext-max-w-sm">
             <Textarea
               ref={ref}
               autoFocus
               required
               rows={3}
               defaultValue={text}
-              className="w-full"
+              className="richtext-w-full"
               placeholder="Text"
             />
           </div>
         </div>
-        <div className="flex items-center justify-between gap-[6px]">
-          <Button onClick={submit} className="flex-1">Submit</Button>
+        <div className="richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]">
+          <Button onClick={submit} className="richtext-flex-1">Submit</Button>
 
           <a href="https://katex.org/" target="_blank" rel="noreferrer noopener">
             <HelpCircle size={16} />
diff --git a/src/extensions/Katex/components/KatexWrapper.tsx b/src/extensions/Katex/components/KatexWrapper.tsx
index bd22239..2329a54 100644
--- a/src/extensions/Katex/components/KatexWrapper.tsx
+++ b/src/extensions/Katex/components/KatexWrapper.tsx
@@ -45,7 +45,7 @@ export function KatexWrapper({ node }: any) {
         backgroundColor,
       }}
     >
-      <div className="flex px-[4px] py-4 text-[1em] text-[#000] cursor-pointer justify-center">{content}</div>
+      <div className="richtext-flex richtext-px-[4px] richtext-py-4 richtext-text-[1em] richtext-text-[#000] richtext-cursor-pointer richtext-justify-center">{content}</div>
     </NodeViewWrapper>
   )
 }
diff --git a/src/extensions/LineHeight/components/LineHeightDropdown.tsx b/src/extensions/LineHeight/components/LineHeightDropdown.tsx
index 336bb47..35e9d16 100644
--- a/src/extensions/LineHeight/components/LineHeightDropdown.tsx
+++ b/src/extensions/LineHeight/components/LineHeightDropdown.tsx
@@ -61,15 +61,15 @@ function LineHeightDropdown(props: IPropsLineHeightDropdown) {
     <DropdownMenu>
       <DropdownMenuTrigger disabled={props?.disabled} asChild>
         <ActionButton
-          customClass="w-12"
+          customClass="!richtext-w-12 richtext-h-12"
           icon="LineHeight"
           tooltip={props?.tooltip}
           disabled={props?.disabled}
         >
-          <IconComponent className="w-3 h-3 ml-1 text-zinc-500" name="MenuDown" />
+          <IconComponent className="richtext-w-3 richtext-h-3 richtext-ml-1 richtext-text-zinc-500" name="MenuDown" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="min-w-24">
+      <DropdownMenuContent className="richtext-min-w-24">
         {LineHeights?.map((item: any, index: any) => {
           return (
             <DropdownMenuCheckboxItem
diff --git a/src/extensions/Link/components/LinkEditBlock.tsx b/src/extensions/Link/components/LinkEditBlock.tsx
index b2fef34..7edf893 100644
--- a/src/extensions/Link/components/LinkEditBlock.tsx
+++ b/src/extensions/Link/components/LinkEditBlock.tsx
@@ -37,39 +37,39 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
   }
 
   return (
-    <div className="p-2 bg-white border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
-      <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+    <div className="richtext-p-2 richtext-bg-white richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black border-neutral-200 dark:richtext-border-neutral-800">
+      <form className="richtext-flex richtext-flex-col richtext-gap-2" onSubmit={handleSubmit}>
         <Label className="mb-[6px]">
           {t('editor.link.dialog.text')}
         </Label>
-        <div className="flex w-full max-w-sm items-center gap-1.5 mb-[10px]">
-          <div className="relative items-center w-full max-w-sm">
+        <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[10px]">
+          <div className="richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm">
             <Input
               type="text"
               value={form.text}
               required
-              className="w-80"
+              className="richtext-w-80"
               placeholder="Text"
               onChange={e => setForm({ ...form, text: e.target.value })}
             />
           </div>
         </div>
         <Label className="mb-[6px]">{t('editor.link.dialog.link')}</Label>
-        <div className="flex w-full max-w-sm items-center gap-1.5">
-          <div className="relative items-center w-full max-w-sm">
+        <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5">
+          <div className="richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm">
             <Input
               type="url"
               value={form.link}
               required
-              className="pl-10"
+              className="richtext-pl-10"
               onChange={e => setForm({ ...form, link: e.target.value })}
             />
-            <span className="absolute inset-y-0 flex items-center justify-center px-2 start-0">
-              <IconComponent className="size-5 text-muted-foreground" name="Link" />
+            <span className="richtext-absolute richtext-inset-y-0 richtext-flex richtext-items-center richtext-justify-center richtext-px-2 richtext-start-0">
+              <IconComponent className="richtext-size-5 richtext-text-muted-foreground" name="Link" />
             </span>
           </div>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="richtext-flex richtext-items-center richtext-space-x-2">
           <Label>{t('editor.link.dialog.openInNewTab')}</Label>
           <Switch
             checked={openInNewTab}
@@ -78,7 +78,7 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
             }}
           />
         </div>
-        <Button type="submit" className="self-end mt-2">
+        <Button type="submit" className="richtext-self-end richtext-mt-2">
           {t('editor.link.dialog.button.apply')}
         </Button>
       </form>
diff --git a/src/extensions/Link/components/LinkEditPopover.tsx b/src/extensions/Link/components/LinkEditPopover.tsx
index 285bfa9..1660a59 100644
--- a/src/extensions/Link/components/LinkEditPopover.tsx
+++ b/src/extensions/Link/components/LinkEditPopover.tsx
@@ -31,7 +31,7 @@ function LinkEditPopover(props: IPropsLinkEditPopover) {
           <IconComponent name={props?.icon} />
         </ActionButton>
       </PopoverTrigger>
-      <PopoverContent hideWhenDetached className="w-full" align="start" side="bottom">
+      <PopoverContent hideWhenDetached className="richtext-w-full" align="start" side="bottom">
         <LinkEditBlock editor={props.editor} onSetLink={onSetLink} />
       </PopoverContent>
     </Popover>
diff --git a/src/extensions/Link/components/LinkViewBlock.tsx b/src/extensions/Link/components/LinkViewBlock.tsx
index ae2c6d5..f1bdbb8 100644
--- a/src/extensions/Link/components/LinkViewBlock.tsx
+++ b/src/extensions/Link/components/LinkViewBlock.tsx
@@ -16,20 +16,20 @@ function LinkViewBlock(props: IPropsLinkViewBlock) {
   const { t } = useLocale()
 
   return (
-    <div className="flex items-center gap-2 p-2 bg-white border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
+    <div className="richtext-flex richtext-items-center richtext-gap-2 richtext-p-2 richtext-bg-white richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black richtext-border-neutral-200 dark:richtext-border-neutral-800">
       <a
         href={props?.link}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-sm underline break-all"
+        className="richtext-text-sm richtext-underline richtext-break-all"
       >
         {truncate(props?.link, {
           length: 50,
           omission: '…',
         })}
       </a>
-      {props?.link && <Separator orientation="vertical" className="h-4" />}
-      <div className="flex flex-nowrap">
+      {props?.link && <Separator orientation="vertical" className="!richtext-h-4" />}
+      <div className="richtext-flex richtext-flex-nowrap">
         <ActionButton
           icon="Pencil"
           tooltip={t('editor.link.edit.tooltip')}
diff --git a/src/extensions/MoreMark/components/ActionMoreButton.tsx b/src/extensions/MoreMark/components/ActionMoreButton.tsx
index bb85859..634c63e 100644
--- a/src/extensions/MoreMark/components/ActionMoreButton.tsx
+++ b/src/extensions/MoreMark/components/ActionMoreButton.tsx
@@ -55,12 +55,12 @@ function ActionMoreButton(props: IPropsActionMoreButton) {
     <DropdownMenu>
       <DropdownMenuTrigger disabled={props?.disabled} asChild>
         <ActionButton
-          customClass="w-12"
+          customClass="!richtext-w-12 richtext-h-12"
           icon={props?.icon}
           tooltip={props?.tooltip}
           disabled={props?.disabled}
         >
-          <MenuDown className="w-3 h-3 text-gray-500" />
+          <MenuDown className="richtext-w-3 richtext-h-3 richtext-text-gray-500" />
         </ActionButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-full">
@@ -70,12 +70,12 @@ function ActionMoreButton(props: IPropsActionMoreButton) {
               checked={active.title === item.title}
               onClick={item.action}
               key={index}
-              className="flex items-center gap-3"
+              className="richtext-flex richtext-items-center richtext-gap-3"
             >
               <IconComponent name={item?.icon} />
-              <span className="ml-1">{item.title}</span>
+              <span className="richtext-ml-1">{item.title}</span>
               {!!item?.shortcutKeys && (
-                <span className="ml-auto text-xs tracking-widest opacity-60">
+                <span className="richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60">
                   {getShortcutKeys(item.shortcutKeys)}
                 </span>
               )}
diff --git a/src/extensions/MultiColumn/menus/ColumnsMenu.tsx b/src/extensions/MultiColumn/menus/ColumnsMenu.tsx
index 56ff280..cdf8037 100644
--- a/src/extensions/MultiColumn/menus/ColumnsMenu.tsx
+++ b/src/extensions/MultiColumn/menus/ColumnsMenu.tsx
@@ -50,8 +50,8 @@ function ColumnsMenu(props: IPropsColumnsMenu) {
         sticky: 'popper',
       }}
     >
-      <div className="p-2 bg-white border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
-        <div className="flex items-center gap-1">
+      <div className="richtext-p-2 richtext-bg-white richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black richtext-border-neutral-200 dark:richtext-border-neutral-800">
+        <div className="richtext-flex richtext-items-center richtext-gap-1">
           <ActionButton
             title="ok"
             icon="PanelLeft"
diff --git a/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx b/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx
index 2416eba..b49a237 100644
--- a/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx
+++ b/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx
@@ -88,39 +88,39 @@ function SearchAndReplaceButton({ editor, ...props }: any) {
       </PopoverTrigger>
       <PopoverContent
         hideWhenDetached
-        className="w-full"
+        className="richtext-w-full"
         align="start"
         side="bottom"
       >
-        <div className="p-2 bg-white border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
-          <div className="mb-[6px flex items-center justify-between">
+        <div className="richtext-p-2 richtext-bg-white richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black richtext-border-neutral-200 dark:richtext-border-neutral-800">
+          <div className="richtext-mb-[6px richtext-flex richtext-items-center richtext-justify-between">
             <Label>
               {t('editor.search.dialog.text')}
             </Label>
-            <span className="font-semibold">
+            <span className="richtext-font-semibold">
               {results.length ? `${currentIndex + 1}/${results.length}` : '0/0'}
             </span>
           </div>
-          <div className="flex w-full max-w-sm items-center gap-1.5 mb-[10px]">
+          <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[10px]">
             <Input
               type="text"
               required
-              className="w-full"
+              className="richtext-w-full"
               placeholder="Text"
               autoFocus
               value={searchValue}
               onChange={e => setSearchValue(e.target.value)}
             />
           </div>
-          <Label className="mb-[6px]">
+          <Label className="richtext-mb-[6px]">
             {t('editor.replace.dialog.text')}
           </Label>
-          <div className="flex w-full max-w-sm items-center gap-1.5 mb-[16px]">
-            <div className="relative items-center w-full max-w-sm">
+          <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[16px]">
+            <div className="richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm">
               <Input
                 type="text"
                 required
-                className="w-80"
+                className="richtext-w-80"
                 placeholder="Text"
                 value={replaceValue}
                 onChange={e => setReplaceValue(e.target.value)}
@@ -128,22 +128,22 @@ function SearchAndReplaceButton({ editor, ...props }: any) {
             </div>
           </div>
 
-          <div className="flex items-center gap-[10px] mb-[10px]">
-            <Button disabled={!results.length} className="flex-1" onClick={editor.commands.goToPrevSearchResult}>
+          <div className="richtext-flex richtext-items-center richtext-gap-[10px] richtext-mb-[10px]">
+            <Button disabled={!results.length} className="richtext-flex-1" onClick={editor.commands.goToPrevSearchResult}>
               {t('editor.previous.dialog.text')}
             </Button>
 
-            <Button disabled={!results.length} className="flex-1" onClick={editor.commands.goToNextSearchResult}>
+            <Button disabled={!results.length} className="richtext-flex-1" onClick={editor.commands.goToNextSearchResult}>
               {t('editor.next.dialog.text')}
             </Button>
           </div>
 
-          <div className="flex items-center gap-[10px]">
-            <Button disabled={!results.length} className="flex-1" onClick={editor.commands.replace}>
+          <div className="richtext-flex richtext-items-center richtext-gap-[10px]">
+            <Button disabled={!results.length} className="richtext-flex-1" onClick={editor.commands.replace}>
               {t('editor.replace.dialog.text')}
             </Button>
 
-            <Button disabled={!results.length} className="flex-1" onClick={editor.commands.replaceAll}>
+            <Button disabled={!results.length} className="richtext-flex-1" onClick={editor.commands.replaceAll}>
               {t('editor.replaceAll.dialog.text')}
             </Button>
           </div>
diff --git a/src/extensions/SlashCommand/components/CommandsList.tsx b/src/extensions/SlashCommand/components/CommandsList.tsx
index 0f11605..1250d9d 100644
--- a/src/extensions/SlashCommand/components/CommandsList.tsx
+++ b/src/extensions/SlashCommand/components/CommandsList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-dom/no-missing-button-type */
 import React, {
   Fragment,
   forwardRef,
@@ -122,34 +123,34 @@ function CommandsList(props: any, ref: any) {
 
   return (
     <div
-      className="bg-white rounded-lg dark:bg-black shadow-sm border border-neutral-200 dark:border-neutral-800 text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-1"
+      className="richtext-bg-white richtext-rounded-lg dark:richtext-bg-black richtext-shadow-sm richtext-border richtext-border-neutral-200 dark:richtext-border-neutral-800 richtext-text-black richtext-max-h-[min(80vh,24rem)] richtext-overflow-auto richtext-flex-wrap richtext-mb-8 richtext-p-1"
       ref={scrollContainer}
     >
       {props?.items?.length
         ? (
-            <div className="grid grid-cols-1 gap-0.5 min-w-48">
+            <div className="richtext-grid richtext-grid-cols-1 richtext-gap-0.5 richtext-min-w-48">
               {props?.items?.map((group: any, groupIndex: any) => {
                 return (
                   <Fragment key={group.title}>
-                    <div className="text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-2 font-semibold tracking-wider select-none uppercase first:mt-0.5">
+                    <div className="richtext-text-neutral-500 richtext-text-[0.65rem] richtext-col-[1/-1] richtext-mx-2 richtext-mt-2 richtext-font-semibold richtext-tracking-wider richtext-select-none richtext-uppercase first:richtext-mt-0.5">
                       {group.title}
                     </div>
 
                     {group.commands.map((command: any, commandIndex: any) => {
                       return (
                         <button
-                          className={`flex items-center gap-3 px-2 py-1.5 text-sm text-neutral-800 dark:text-neutral-200 text-left w-full rounded-sm outline-none transition-colors ${
-                        selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex
-                          ? 'bg-accent text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200'
-                          : 'hover:bg-accent hover:text-neutral-800 dark:hover:bg-neutral-900 dark:hover:text-neutral-200'
-                      }`}
+                          className={`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-transition-colors ${
+                      selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex
+                        ? 'richtext-bg-accent richtext-text-neutral-800 dark:richtext-bg-neutral-900 dark:richtext-text-neutral-200'
+                        : 'hover:richtext-bg-accent hover:richtext-text-neutral-800 dark:hover:richtext-bg-neutral-900 dark:hover:richtext-text-neutral-200'
+                    }`}
                           ref={el => setActiveItemRef(groupIndex, commandIndex, el)}
                           key={`command-${commandIndex}`}
                           onClick={() => createCommandClickHandler(groupIndex, commandIndex)}
                         >
-                          {command.iconUrl && <img className="w-6 h-6" src={command.iconUrl} alt="" />}
+                          {command.iconUrl && <img className="richtext-w-6 richtext-h-6" src={command.iconUrl} alt="" />}
                           {command.iconName && (
-                            <IconComponent name={command.iconName} className="mr-1 text-lg" />
+                            <IconComponent name={command.iconName} className="richtext-mr-1 richtext-text-lg" />
                           )}
                           {command.label}
                         </button>
@@ -161,8 +162,8 @@ function CommandsList(props: any, ref: any) {
             </div>
           )
         : (
-            <div className="p-3">
-              <span className="text-xs text-gray-800 dark:text-gray-100">
+            <div className="richtext-p-3">
+              <span className="richtext-text-xs richtext-text-gray-800 dark:richtext-text-gray-100">
                 {t('editor.slash.empty')}
               </span>
             </div>
diff --git a/src/extensions/Table/components/CreateTablePopover.tsx b/src/extensions/Table/components/CreateTablePopover.tsx
index 2471b87..d1820ae 100644
--- a/src/extensions/Table/components/CreateTablePopover.tsx
+++ b/src/extensions/Table/components/CreateTablePopover.tsx
@@ -85,25 +85,25 @@ function CreateTablePopover(props: IPropsCreateTablePopover) {
       <PopoverTrigger asChild>
         {props?.children}
       </PopoverTrigger>
-      <PopoverContent className="w-full !p-2" align="start" side="bottom">
-        <div className="p-0 table-grid-size-editor">
-          <div className="flex flex-col flex-wrap justify-between gap-1">
+      <PopoverContent className="richtext-w-full !richtext-p-2" align="start" side="bottom">
+        <div className="richtext-p-0 table-grid-size-editor">
+          <div className="richtext-flex richtext-flex-col richtext-flex-wrap richtext-justify-between richtext-gap-1">
             {createArray(tableGridSize?.rows)?.map((row: any) => {
               return (
-                <div key={`r-${row}`} className="flex gap-1">
+                <div key={`r-${row}`} className="richtext-flex richtext-gap-1">
                   {createArray(tableGridSize?.cols)?.map((col: any) => {
                     return (
                       <div
                         key={`c-${col}`}
-                        className={`pa-1 cursor-pointer border-border ${
+                        className={`richtext-cursor-pointer richtext-border-border ${
                           col <= selectedTableGridSize.cols
                           && row <= selectedTableGridSize.rows
-                          && 'bg-foreground'
+                          && '!richtext-bg-foreground tableCellActive'
                         }`}
                         onMouseOver={() => selectTableGridSize(row, col)}
                         onMouseDown={() => onMouseDown(row, col)}
                       >
-                        <div className="w-4 h-4 p-1 border rounded-[2px] box-border border-solid"></div>
+                        <div className="richtext-w-4 richtext-h-4 richtext-p-1 richtext-border richtext-rounded-[2px] richtext-box-border richtext-border-solid"></div>
                       </div>
                     )
                   })}
@@ -111,7 +111,7 @@ function CreateTablePopover(props: IPropsCreateTablePopover) {
               )
             })}
           </div>
-          <div className="mt-2 text-sm text-center text-zinc-600">
+          <div className="richtext-mt-2 richtext-text-sm richtext-text-center richtext-text-zinc-600">
             {selectedTableGridSize.rows}
             {' '}
             x
diff --git a/src/extensions/TextAlign/components/TextAlignMenuButton.tsx b/src/extensions/TextAlign/components/TextAlignMenuButton.tsx
index db2d363..07403e6 100644
--- a/src/extensions/TextAlign/components/TextAlignMenuButton.tsx
+++ b/src/extensions/TextAlign/components/TextAlignMenuButton.tsx
@@ -50,17 +50,17 @@ function TextAlignMenuButton(props: IPropsTextAlignMenuButton) {
     <Popover>
       <PopoverTrigger disabled={props?.disabled} asChild>
         <ActionButton
-          customClass="w-12"
+          customClass="!richtext-w-12 richtext-h-12"
           icon={props?.icon}
           tooltip={props?.tooltip}
           disabled={props?.disabled}
         >
-          <IconComponent className="w-3 h-3 ml-1 text-zinc-500" name="MenuDown" />
+          <IconComponent className="richtext-w-3 richtext-h-3 richtext-ml-1 richtext-text-zinc-500" name="MenuDown" />
         </ActionButton>
       </PopoverTrigger>
 
       <PopoverContent
-        className="min-w-4 w-full !p-[4px] flex flex-row gap-1"
+        className="richtext-min-w-4 richtext-w-full !richtext-p-[4px] richtext-flex richtext-flex-row richtext-gap-1"
         align="start"
         side="bottom"
       >
@@ -71,14 +71,14 @@ function TextAlignMenuButton(props: IPropsTextAlignMenuButton) {
                 <Toggle
                   size="sm"
                   onClick={item?.action}
-                  className="p-1 w-7 h-7"
+                  className="richtext-p-1 richtext-w-7 richtext-h-7"
                   pressed={active.title === item.title}
                   data-state={active.title === item.title ? 'on' : 'off'}
                 >
                   {item?.icon && <IconComponent name={item.icon} />}
                 </Toggle>
               </TooltipTrigger>
-              <TooltipContent className="flex flex-col items-center">
+              <TooltipContent className="richtext-flex richtext-flex-col richtext-items-center">
                 <span>{item.title}</span>
                 {!!item.shortcutKeys?.length && (
                   <span>{item.shortcutKeys?.map(item => getShortcutKey(item)).join(' ')}</span>
diff --git a/src/extensions/TextBubble/components/TextDropdown.tsx b/src/extensions/TextBubble/components/TextDropdown.tsx
index 1d80cb6..fe678a5 100644
--- a/src/extensions/TextBubble/components/TextDropdown.tsx
+++ b/src/extensions/TextBubble/components/TextDropdown.tsx
@@ -98,41 +98,39 @@ function TextDropdown(props: IPropsTextDropdown) {
   }, [menus])
 
   return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="h-[32px] flex gap-1 px-1.5">
-            <span className="text-sm font-normal whitespace-nowrap">
-              {' '}
-              {activeItem?.label}
-            </span>
-            <ChevronDown className="w-4 h-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent hideWhenDetached className="w-full p-1" align="start" sideOffset={5}>
-          {menus.map((item, index) => {
-            const Icon = icons[item.iconName as any]
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="richtext-h-[32px] richtext-flex richtext-gap-1 richtext-px-1.5">
+          <span className="richtext-text-sm richtext-font-normal richtext-whitespace-nowrap">
+            {' '}
+            {activeItem?.label}
+          </span>
+          <ChevronDown className="richtext-w-4 richtext-h-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent hideWhenDetached className="richtext-w-full richtext-p-1" align="start" sideOffset={5}>
+        {menus.map((item, index) => {
+          const Icon = icons[item.iconName as any]
 
-            return (
-              <DropdownMenuCheckboxItem
-                key={index}
-                checked={item.isActive?.() || false}
-                onClick={() => item.action()}
-                className="cursor-pointer"
-              >
-                <div className="flex items-center gap-2 px-2">
-                  <Icon className="w-3 h3" />
-                  <span>
-                    {' '}
-                    {item.label}
-                  </span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            )
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
+          return (
+            <DropdownMenuCheckboxItem
+              key={index}
+              checked={item.isActive?.() || false}
+              onClick={() => item.action()}
+              className="richtext-cursor-pointer"
+            >
+              <div className="richtext-flex richtext-items-center richtext-gap-2 richtext-px-2">
+                <Icon className="richtext-w-3 richtext-h3" />
+                <span>
+                  {' '}
+                  {item.label}
+                </span>
+              </div>
+            </DropdownMenuCheckboxItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/src/extensions/VideoUpload/components/VideoUploaderView.tsx b/src/extensions/VideoUpload/components/VideoUploaderView.tsx
index b940abc..592ceee 100644
--- a/src/extensions/VideoUpload/components/VideoUploaderView.tsx
+++ b/src/extensions/VideoUpload/components/VideoUploaderView.tsx
@@ -67,11 +67,11 @@ function VideoUploaderView(props: IPropsVideoUploaderView) {
     <NodeViewWrapper as="div" data-drag-handle>
       <Popover defaultOpen modal>
         <PopoverTrigger asChild>
-          <div className="flex items-center w-full p-3 my-3 transition-all border rounded-sm cursor-pointer hover:bg-accent border-border text-muted-foreground">
+          <div className="richtext-flex richtext-items-center richtext-w-full richtext-p-3 richtext-my-3 richtext-transition-all richtext-border richtext-rounded-sm richtext-cursor-pointer hover:richtext-bg-accent richtext-border-border richtext-text-muted-foreground">
             {loading
               ? (
-                  <div className="flex items-center justify-center gap-3 text-s">
-                    <IconComponent className="w-6 h-6 animate-spin" name="LoaderCircle" />
+                  <div className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-3 richtext-text-sm">
+                    <IconComponent className="richtext-w-6 richtext-h-6 richtext-animate-spin" name="LoaderCircle" />
                     <span>
                       {t('editor.video.dialog.uploading')}
                       ...
@@ -79,19 +79,19 @@ function VideoUploaderView(props: IPropsVideoUploaderView) {
                   </div>
                 )
               : (
-                  <div className="flex items-center justify-between w-full">
-                    <div className="flex items-center justify-center gap-3">
-                      <IconComponent name="Video" className="w-6 h-6" />
-                      <span className="text-sm">{t('editor.video.dialog.title')}</span>
+                  <div className="richtext-flex richtext-items-center richtext-justify-between richtext-w-full">
+                    <div className="richtext-flex richtext-items-center richtext-justify-center richtext-gap-3">
+                      <IconComponent name="Video" className="richtext-w-6 richtext-h-6" />
+                      <span className="richtext-text-sm">{t('editor.video.dialog.title')}</span>
                     </div>
-                    <IconComponent name="Trash2" className="hover:text-foreground" onClick={handleDelete} />
+                    <IconComponent name="Trash2" className="hover:richtext-text-foreground" onClick={handleDelete} />
                   </div>
                 )}
           </div>
         </PopoverTrigger>
-        <PopoverContent className="w-full" onOpenAutoFocus={e => e.preventDefault()}>
-          <Tabs defaultValue="upload" className="w-[400px]" activationMode="manual">
-            <TabsList className="grid w-full grid-cols-2">
+        <PopoverContent className="richtext-w-full" onOpenAutoFocus={e => e.preventDefault()}>
+          <Tabs defaultValue="upload" className="richtext-w-[400px]" activationMode="manual">
+            <TabsList className="richtext-grid richtext-w-full richtext-grid-cols-2">
               <TabsTrigger value="upload">
                 {t('editor.video.dialog.tab.upload')}
                 {' '}
@@ -103,7 +103,7 @@ function VideoUploaderView(props: IPropsVideoUploaderView) {
               </TabsTrigger>
             </TabsList>
             <TabsContent value="upload">
-              <Button className="w-full mt-1" size="sm" onClick={handleClick}>
+              <Button className="richtext-w-full richtext-mt-1" size="sm" onClick={handleClick}>
                 {t('editor.video.dialog.tab.upload')}
               </Button>
               <input
@@ -119,7 +119,7 @@ function VideoUploaderView(props: IPropsVideoUploaderView) {
             </TabsContent>
             <TabsContent value="link">
               <form onSubmit={handleLink}>
-                <div className="flex items-center gap-2">
+                <div className="richtext-flex richtext-items-center richtext-gap-2">
                   <Input
                     type="url"
                     autoFocus={true}
diff --git a/src/styles/ProseMirror.scss b/src/styles/ProseMirror.scss
index c0a22ed..fc851e7 100644
--- a/src/styles/ProseMirror.scss
+++ b/src/styles/ProseMirror.scss
@@ -1,35 +1,35 @@
 .ProseMirror {
   /* Typography */
   p {
-    @apply leading-relaxed mb-1.5 first:mt-0 last:mb-0;
+    @apply richtext-leading-relaxed richtext-mb-1.5 first:richtext-mt-0 last:richtext-mb-0;
   }
 
   & > p {
-    @apply mb-1.5 first:mt-0 last:mb-0;
+    @apply richtext-mb-1.5 first:richtext-mt-0 last:richtext-mb-0;
   }
 
   h1 {
-    @apply text-3xl;
+    @apply richtext-text-3xl;
   }
 
   h2 {
-    @apply text-2xl;
+    @apply richtext-text-2xl;
   }
 
   h3 {
-    @apply text-xl;
+    @apply richtext-text-xl;
   }
 
   h4 {
-    @apply text-lg;
+    @apply richtext-text-lg;
   }
 
   h5 {
-    @apply text-base;
+    @apply richtext-text-base;
   }
 
   h6 {
-    @apply text-sm;
+    @apply richtext-text-sm;
   }
 
   h1,
@@ -38,31 +38,31 @@
   h4,
   h5,
   h6 {
-    @apply font-bold first:mt-0 last:mb-0;
+    @apply richtext-font-bold first:richtext-mt-0 last:richtext-mb-0;
   }
 
   h1,
   h2,
   h3 {
-    @apply mt-12;
+    @apply richtext-mt-12;
   }
 
   h4,
   h5,
   h6 {
-    @apply mt-8;
+    @apply richtext-mt-8;
   }
 
   a.link {
-    @apply text-blue-500 font-extrabold dark:text-blue-400;
+    @apply richtext-text-blue-500 richtext-font-extrabold dark:richtext-text-blue-400;
   }
 
   mark {
-    @apply bg-red-500 rounded-sm decoration-clone text-inherit py-1 px-0 dark:bg-red-400;
+    @apply richtext-bg-red-500 richtext-rounded-sm richtext-decoration-clone richtext-text-inherit richtext-py-1 richtext-px-0 dark:richtext-bg-red-400;
   }
 
   & img {
-    @apply h-auto max-w-full;
+    @apply richtext-h-auto richtext-max-w-full;
   }
 
   @for $i from 1 through 7 /* max-indent */ {
@@ -73,25 +73,25 @@
     }
   }
   iframe {
-    @apply w-full border border-border mt-2 rounded-sm h-[400px];
+    @apply richtext-w-full richtext-border richtext-border-border richtext-mt-2 richtext-rounded-sm richtext-h-[400px];
   }
 
   [data-type='horizontalRule'] {
-    @apply my-8 py-4;
+    @apply richtext-my-8 richtext-py-4;
 
     hr {
-      @apply border-0 border-t border-black/20 bg-black/80;
-      @apply dark:border-white/20 dark:bg-white/80;
+      @apply richtext-border-0 richtext-border-t richtext-border-black/20 richtext-bg-black/80;
+      @apply dark:richtext-border-white/20 dark:richtext-bg-white/80;
     }
   }
   /* Block Quote */
   .blockquote {
-    @apply border-l-4 text-black border-l-neutral-700 py-2 px-4 bg-opacity-80 rounded-lg rounded-tl-none rounded-bl-none;
-    @apply dark:border-l-neutral-300 dark:text-white;
+    @apply richtext-border-l-4 richtext-text-black richtext-border-l-neutral-700 richtext-py-2 richtext-px-4 richtext-bg-opacity-80 richtext-rounded-lg richtext-rounded-tl-none richtext-rounded-bl-none;
+    @apply dark:richtext-border-l-neutral-300 dark:richtext-text-white;
   }
   /* Columns */
   [data-type='columns'] {
-    @apply grid gap-4 mt-14 mb-12;
+    @apply richtext-grid richtext-gap-4 richtext-mt-14 richtext-mb-12;
 
     &.layout-sidebar-left {
       grid-template-columns: 40fr 60fr;
@@ -111,156 +111,104 @@
   }
 
   [data-type='column'] {
-    @apply overflow-auto;
+    @apply richtext-overflow-auto;
   }
   code {
-    @apply caret-white text-white bg-neutral-900 rounded-sm shadow-lg font-mono;
+    @apply richtext-caret-white richtext-text-white richtext-bg-neutral-900 richtext-rounded-sm richtext-shadow-lg richtext-font-mono;
 
     &::selection {
-      @apply bg-white/30;
+      @apply richtext-bg-white/30;
     }
   }
 
   pre {
-    @apply caret-white bg-neutral-700 text-white rounded my-12 p-4 border border-black dark:bg-neutral-900 dark:border-neutral-800;
+    @apply richtext-caret-white richtext-bg-neutral-700 richtext-text-white richtext-rounded richtext-my-12 richtext-p-4 richtext-border richtext-border-black dark:richtext-bg-neutral-900 dark:richtext-border-neutral-800;
 
     *::selection {
-      @apply bg-white/20;
+      @apply richtext-bg-white/20;
     }
 
     code {
-      @apply bg-inherit text-inherit p-0 shadow-none;
-    }
-
-    .hljs-comment,
-    .hljs-quote {
-      @apply text-neutral-400;
-    }
-
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-attribute,
-    .hljs-tag,
-    .hljs-name,
-    .hljs-regexp,
-    .hljs-link,
-    .hljs-name,
-    .hljs-selector-id,
-    .hljs-selector-class {
-      @apply text-red-300;
-    }
-
-    .hljs-number,
-    .hljs-meta,
-    .hljs-built_in,
-    .hljs-builtin-name,
-    .hljs-literal,
-    .hljs-type,
-    .hljs-params {
-      @apply text-orange-300;
-    }
-
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-bullet {
-      @apply text-lime-300;
-    }
-
-    .hljs-title,
-    .hljs-section {
-      @apply text-yellow-300;
-    }
-
-    .hljs-keyword,
-    .hljs-selector-tag {
-      @apply text-teal-300;
-    }
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: 700;
+      @apply richtext-bg-inherit richtext-text-inherit richtext-p-0 richtext-shadow-none;
     }
   }
   /* List */
   ol {
-    @apply list-decimal;
+    @apply richtext-list-decimal;
   }
 
   ul {
-    @apply list-disc;
+    @apply richtext-list-disc;
   }
 
   ul,
   ol {
-    @apply py-0 px-8 my-6 first:mt-0 last:mb-0;
+    @apply richtext-py-0 richtext-px-8 richtext-my-6 first:richtext-mt-0 last:richtext-mb-0;
 
     ul,
     ol,
     li {
-      @apply my-1;
+      @apply richtext-my-1;
     }
 
     p {
-      @apply mt-0 mb-1;
+      @apply richtext-mt-0 richtext-mb-1;
     }
   }
 
   & > ul,
   & > ol {
-    @apply my-8 first:mt-0 last:mb-0;
+    @apply richtext-my-8 first:richtext-mt-0 last:richtext-mb-0;
   }
 
   ul[data-type='taskList'] {
-    @apply list-none p-0;
+    @apply richtext-list-none richtext-p-0;
 
     p {
-      @apply m-0;
+      @apply richtext-m-0;
     }
 
     li {
-      @apply flex;
+      @apply richtext-flex;
 
       > label {
-        @apply grow-0 shrink-0 flex-auto inline-flex mr-2 select-none;
+        @apply richtext-grow-0 richtext-shrink-0 richtext-flex-auto richtext-inline-flex richtext-mr-2 richtext-select-none;
       }
 
       > div {
-        @apply flex-auto;
+        @apply richtext-flex-auto;
       }
 
       &[data-checked='true'] {
-        @apply line-through;
+        @apply richtext-line-through;
       }
     }
   }
 
   table {
-    @apply border-collapse border-black/10 table-fixed box-border overflow-x-auto overflow-y-hidden block;
-    @apply dark:border-white/20;
+    @apply richtext-border-collapse richtext-border-black/10 richtext-table-fixed richtext-box-border richtext-overflow-x-auto richtext-overflow-y-hidden richtext-block;
+    @apply dark:richtext-border-white/20;
 
     td,
     th {
-      @apply border border-black/10 min-w-[1em] p-2 box-border relative text-left align-top;
-      @apply dark:border-white/20;
+      @apply richtext-border richtext-border-black/10 richtext-min-w-[1em] richtext-p-2 richtext-box-border richtext-relative richtext-text-left richtext-align-top;
+      @apply dark:richtext-border-white/20;
 
       &:first-of-type:not(a) {
-        @apply mt-0;
+        @apply richtext-mt-0;
       }
 
       p {
-        @apply m-0;
+        @apply richtext-m-0;
 
         & + p {
-          @apply mt-3;
+          @apply richtext-mt-3;
         }
       }
     }
 
     th {
-      @apply font-bold text-left;
+      @apply richtext-font-bold richtext-text-left;
     }
   }
 }
diff --git a/src/styles/editor.scss b/src/styles/editor.scss
index 689c7a0..7435edb 100644
--- a/src/styles/editor.scss
+++ b/src/styles/editor.scss
@@ -1,15 +1,13 @@
 .reactjs-tiptap-editor {
   .ProseMirror {
-    @apply caret-black dark:caret-white outline-0 pr-8 pl-20 py-16 z-0 lg:pl-8 lg:pr-8;
+    @apply richtext-caret-black dark:richtext-caret-white richtext-outline-0 richtext-pr-8 richtext-pl-20 richtext-py-16 richtext-z-0 lg:richtext-pl-8 lg:richtext-pr-8;
     min-height: 180px;
     padding: 32px 80px;
-    // & > * {
-    //   @apply mx-auto max-w-2xl;
-    // }
+
     .img-placeholder {
       width: fit-content;
       position: relative;
-      @apply backdrop-blur-sm bg-white/30;
+      @apply richtext-backdrop-blur-sm richtext-bg-white/30;
 
       &:before {
         content: '';
@@ -20,44 +18,44 @@
         width: 24px;
         height: 24px;
         margin: -12px 0 0 -12px;
-        @apply animate-spin border-current border-t-transparent rounded-full border-[3px] inline-block;
+        @apply richtext-animate-spin richtext-border-current richtext-border-t-transparent richtext-rounded-full richtext-border-[3px] richtext-inline-block;
       }
     }
 
     .tableWrapper {
       margin: 1em 0;
-      @apply overflow-x-auto;
+      @apply richtext-overflow-x-auto;
 
       table {
         overflow: hidden;
         display: table;
 
         .column-resize-handle {
-          @apply -bottom-[2px] absolute -right-1 top-0 w-1 z-10 pointer-events-none bg-primary;
+          @apply richtext-bottom-[-2px] richtext-absolute richtext-right-[-2px] richtext-top-0 richtext-w-1 richtext-z-10 richtext-pointer-events-none richtext-bg-primary;
         }
         .resize-cursor {
           cursor: 'col-resize';
         }
 
         .selectedCell {
-          @apply bg-black/5 border-black/20 border-double;
-          @apply dark:bg-white/10 dark:border-white/20;
+          @apply richtext-bg-black/5 richtext-border-black/20 richtext-border-double;
+          @apply dark:richtext-bg-white/10 dark:richtext-border-white/20;
         }
       }
     }
     /* Column */
     & > *:first-child,
     [data-type='column'] > * {
-      @apply first:mt-0 last:mb-0;
+      @apply first:richtext-mt-0 last:richtext-mb-0;
     }
     [data-type='columns'] {
       &.focus [data-type='column'],
       &:hover [data-type='column'] {
-        @apply bg-accent;
+        @apply richtext-bg-accent;
       }
 
       [data-type='column'].focus {
-        @apply bg-accent;
+        @apply richtext-bg-accent;
       }
     }
     [data-type='columns']::before,
@@ -66,41 +64,41 @@
     }
 
     [data-type='column'] {
-      @apply rounded border border-solid border-transparent p-1;
+      @apply richtext-rounded richtext-border richtext-border-solid richtext-border-transparent richtext-p-1;
       transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
 
       &:hover {
-        @apply border-gray-50 dark:border-gray-900;
+        @apply richtext-border-gray-50 dark:richtext-border-gray-900;
       }
 
       &:has(.is-active),
       &.focus {
-        @apply border-neutral-100 dark:border-neutral-900;
+        @apply richtext-border-neutral-100 dark:richtext-border-neutral-900;
       }
     }
     [data-type='horizontalRule'] {
-      @apply transition-all duration-100 ease-in-out cursor-pointer;
+      @apply richtext-transition-all richtext-duration-100 richtext-ease-in-out richtext-cursor-pointer;
 
       &.ProseMirror-selectednode {
-        @apply bg-black/5 dark:bg-white/10;
+        @apply richtext-bg-black/5 dark:richtext-bg-white/10;
 
         hr {
-          @apply border-t-black/30 dark:border-t-white/30;
+          @apply richtext-border-t-black/30 dark:richtext-border-t-white/30;
         }
       }
 
       &:hover:not(&.ProseMirror-selectednode) {
-        @apply bg-black/5;
-        @apply dark:bg-white/10;
+        @apply richtext-bg-black/5;
+        @apply dark:richtext-bg-white/10;
       }
     }
     :not(.dragging) .ProseMirror-selectednode:not(.image-view) {
-      @apply outline-none  bg-black/10 dark:bg-white/20 shadow-none transition-colors;
+      @apply richtext-outline-none richtext-bg-black/10 dark:richtext-bg-white/20 richtext-shadow-none richtext-transition-colors;
     }
 
     .selection:not(.image-view),
     *:not(.image-view)::selection {
-      @apply bg-black/10 dark:bg-white/20;
+      @apply richtext-bg-black/10 dark:richtext-bg-white/20;
     }
 
     .is-empty::before {
@@ -128,17 +126,17 @@
       content: attr(data-placeholder);
     }
     .ProseMirror-gapcursor {
-      @apply relative w-full max-w-2xl mx-auto;
+      @apply richtext-relative richtext-w-full richtext-max-w-2xl richtext-mx-auto;
 
       &:after {
-        @apply border-t-black/40 dark:border-t-white/40 w-full -top-[1.5em] max-w-2xl mx-auto left-0 right-0;
+        @apply richtext-border-t-black/40 dark:richtext-border-t-white/40 richtext-w-full richtext-top-[-1.5em] richtext-max-w-2xl richtext-mx-auto richtext-left-0 richtext-right-0;
       }
     }
 
     .iframe-wrapper {
       &.focus {
         > div {
-          @apply outline-primary outline-4 outline;
+          @apply richtext-outline-primary richtext-outline-4 richtext-outline;
         }
       }
     }
@@ -202,11 +200,13 @@
 
       &.focus {
         img {
-          @apply outline-primary outline-2 outline;
+          @apply richtext-outline-primary richtext-outline-2 richtext-outline;
         }
       }
     }
 
+
+
     .image-resizer {
       position: absolute;
       top: 0;
@@ -214,7 +214,7 @@
       z-index: 1;
       width: 100%;
       height: 100%;
-      @apply border border-border;
+      @apply richtext-border richtext-border-border;
       border-style: dashed;
 
       &__handler {
@@ -226,7 +226,7 @@
         height: 12px;
         border: 1px solid #fff;
         border-radius: 2px;
-        @apply bg-blue-500;
+        @apply richtext-bg-blue-500;
 
         &--tl {
           top: -6px;
@@ -272,110 +272,11 @@
   }
 }
 
-.ai-modal-main-container {
-  width: 100%;
-  min-height: 24px;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: linear-gradient(0deg, #fff, #fff) content-box,
-    linear-gradient(81.99deg, #e215ed 0%, #0e80b9 73.05%, #d192ff 100%) border-box;
-  box-shadow: 0 5px 12px 4px rgba(0, 0, 0, 0.08);
-}
-
-.ai_modal_input_area {
-  flex-grow: 1;
-  line-height: 20px;
-  font-size: 14px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  padding: 2px 8px;
-  caret-color: #1e6fff;
-  max-height: 200px;
-  box-sizing: border-box;
-  overflow-y: auto;
-  outline: none;
-}
-.ai_modal_input_area:empty:before {
-  content: attr(placeholder);
-  color: rgba(0, 0, 0, 0.24);
-  pointer-events: none;
-}
 
 [data-dui-1-3-5~='dui-tooltip-wrapper'] {
   display: inline-block;
   position: relative;
 }
-.ai_modal_input_submit_button_active {
-  cursor: pointer;
-  background-image: url('data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%229%22 fill%3D%22url(%23paint0_linear_5_2540)%22%2F%3E%3Cpath d%3D%22M11.8535 8.11091L16.0962 12.3536L11.8535 16.5962%22 stroke%3D%22white%22 stroke-width%3D%221.25%22%2F%3E%3Cline x1%3D%2215.3891%22 y1%3D%2212.2714%22 x2%3D%226.90382%22 y2%3D%2212.2714%22 stroke%3D%22white%22 stroke-width%3D%221.25%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_5_2540%22 x1%3D%2221%22 y1%3D%223%22 x2%3D%223%22 y2%3D%2221%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%23DB94FF%22%2F%3E%3Cstop offset%3D%220.456607%22 stop-color%3D%22%235179FF%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%235AB0FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
-}
-.ai_modal_input_submit_button_active:hover {
-  background-image: url('data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%229%22 fill%3D%22url(%23paint0_linear_1387_127239)%22%2F%3E%3Cpath d%3D%22M11.8536 8.11091L16.0962 12.3536L11.8536 16.5962%22 stroke%3D%22white%22 stroke-width%3D%221.25%22%2F%3E%3Cline x1%3D%2215.3891%22 y1%3D%2212.2714%22 x2%3D%226.90382%22 y2%3D%2212.2714%22 stroke%3D%22white%22 stroke-width%3D%221.25%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_1387_127239%22 x1%3D%2221%22 y1%3D%223%22 x2%3D%223%22 y2%3D%2221%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%23C182E0%22%2F%3E%3Cstop offset%3D%220.456607%22 stop-color%3D%22%23476BE0%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%234F9BE0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
-}
-.ai_modal_input_submit_button {
-  width: 24px;
-  height: 24px;
-  background-repeat: no-repeat;
-}
-
-.ai_modal_popup_menu {
-  position: absolute;
-  top: 100%;
-  margin-top: 8px;
-  border-radius: 4px;
-  width: 232px;
-  background: var(--bg-lv4-default);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 6px 2px rgba(0, 0, 0, 0.04),
-    0px 6px 32px 2px rgba(0, 0, 0, 0.16);
-}
-
-.ai_modal_writing_tips_button_wrapper {
-  display: flex;
-  flex-direction: row;
-}
-
-.ai_modal_message_board {
-  position: relative;
-  overflow-y: auto;
-  max-height: 300px;
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-  -webkit-font-smoothing: antialiased;
-  text-size-adjust: none;
-  text-rendering: auto;
-}
-.ai_modal_edit_board_footer {
-  padding: 16px 0 8px 0;
-}
-.ai_model_edit_board_buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 30px;
-  width: 100%;
-}
-.ai_model_edit_board_left_buttons {
-  display: flex;
-  flex-direction: row;
-}
-.ai_model_edit_board_right_button {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.ai_modal_edit_board_header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  padding: 4px 0;
-  font-size: 12px;
-  line-height: 24px;
-  height: 24px;
-  color: #999;
-  box-sizing: content-box;
-}
 
 .heading-0 {
   font-weight: 700;
@@ -412,11 +313,12 @@
   line-height: 1.6;
 }
 
-.bg-foreground {
+.tableCellActive {
   border-radius: 2px !important;
   transition: all 100ms ease-in-out;
 }
 
-.bg-foreground > div {
+.tableCellActive > div {
   border: unset !important;
 }
+
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5156255..65cf3ef 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -70,10 +70,10 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply richtext-border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply richtext-bg-background richtext-text-foreground;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 942d934..ba3597a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,10 @@
-import animate from 'tailwindcss-animate';
+import animate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ['class'],
+  darkMode: ['class', '[class~=\'dark\']'],
   safelist: ['dark'],
-  prefix: '',
+  prefix: 'richtext-',
 
   content: [
     './pages/**/*.{ts,tsx}',
@@ -90,4 +90,4 @@ export default {
     },
   },
   plugins: [animate],
-};
+}
diff --git a/vite.config.ts b/vite.config.ts
index da08cd9..fa17e75 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
+import postcssReplace from 'postcss-replace'
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
@@ -29,7 +30,13 @@ export default defineConfig(() => {
     },
     css: {
       postcss: {
-        plugins: [tailwind(), autoprefixer()],
+        plugins: [tailwind(), autoprefixer(), postcssReplace({
+          pattern: /(--tw|\*, ::before, ::after)/g,
+          data: {
+            '--tw': '--richtext', // Prefixing
+            '*, ::before, ::after': ':root', // So variables does not pollute every element
+          },
+        })],
       },
       preprocessorOptions: {
         scss: {