fix: conflict tailwindcss class with projects use tailwindcss

hunghg255 · Aug 20, 2024 · 002cd9d · 002cd9d
1 parent 2bda1dd
commit 002cd9d
Show file tree

Hide file tree

Showing 64 changed files with 660 additions and 732 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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,64 +101,61 @@ 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)}
                     >
                       <span
                         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>