style: update style dialog

hunghg255 · Oct 25, 2024 · 208ebcf · 208ebcf
1 parent aa530df
commit 208ebcf
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 16 deletions.
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
@@ -110,12 +110,12 @@ const extensions = [
     },
   }),
   Video.configure({
-    upload: (files: File[]) => {
-      const f = files.map(file => ({
-        src: URL.createObjectURL(file),
-        alt: file.name,
-      }))
-      return Promise.resolve(f)
+    upload: (files: File) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(URL.createObjectURL(files))
+        }, 500)
+      })
     },
   }),
   ImageGif.configure({

diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
@@ -162,7 +162,7 @@ function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ ed
 
   return (
     <div className="reactjs-tiptap-editor">
-      <TooltipProvider delayDuration={0}>
+      <TooltipProvider delayDuration={0} disableHoverableContent>
         <div className="richtext-rounded-[0.5rem] richtext-bg-background richtext-shadow richtext-overflow-hidden richtext-outline richtext-outline-1">
 
           <div className="richtext-flex richtext-flex-col richtext-w-full richtext-max-h-full">

diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
@@ -13,15 +13,15 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'richtext-peer richtext-h-4 richtext-w-4 richtext-shrink-0 richtext-rounded-sm richtext-border richtext-border-primary 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 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 data-[state=checked]:richtext-bg-primary data-[state=checked]:richtext-text-primary-foreground',
+      '!richtext-peer !richtext-h-4 !richtext-w-4 !richtext-p-0 !richtext-shrink-0 !richtext-rounded-sm !richtext-border !richtext-border-primary !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 disabled:!richtext-cursor-not-allowed disabled:!richtext-opacity-50 data-[state=checked]:!richtext-bg-primary data-[state=checked]:!richtext-text-primary-foreground',
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn('richtext-flex richtext-items-center richtext-justify-center richtext-text-current')}
+      className={cn('!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current')}
     >
-      <Check className="richtext-h-4 richtext-w-4" />
+      <Check className="!richtext-h-4 !richtext-w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'richtext-fixed richtext-left-[50%] richtext-top-[50%] richtext-z-50 richtext-grid richtext-w-full richtext-max-w-lg richtext-translate-x-[-50%] richtext-translate-y-[-50%] richtext-gap-4 richtext-border richtext-bg-background richtext-p-6 richtext-shadow-lg richtext-duration-200 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-[state=closed]:richtext-slide-out-to-left-1/2 data-[state=closed]:richtext-slide-out-to-top-[48%] data-[state=open]:richtext-slide-in-from-left-1/2 data-[state=open]:richtext-slide-in-from-top-[48%] sm:richtext-rounded-lg',
+        'richtext-dialog-content richtext-fixed richtext-left-[50%] richtext-top-[50%] richtext-z-50 richtext-grid richtext-w-full richtext-max-w-lg richtext-translate-x-[-50%] richtext-translate-y-[-50%] richtext-gap-4 richtext-border richtext-bg-background richtext-p-6 richtext-shadow-lg richtext-duration-200 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-[state=closed]:richtext-slide-out-to-left-1/2 data-[state=closed]:richtext-slide-out-to-top-[48%] data-[state=open]:richtext-slide-in-from-left-1/2 data-[state=open]:richtext-slide-in-from-top-[48%] sm:richtext-rounded-lg',
         className,
       )}
       {...props}

diff --git a/src/constants/resetCSS.ts b/src/constants/resetCSS.ts
@@ -1,5 +1,5 @@
 export const RESET_CSS = `
-.reactjs-tiptap-editor {
+.reactjs-tiptap-editor, .richtext-dialog-content {
   button,
   input:where([type=button]),
   input:where([type=reset]),
@@ -36,6 +36,7 @@ export const RESET_CSS = `
 }
 
 .reactjs-tiptap-editor,
+.richtext-dialog-content,
 div[data-radix-popper-content-wrapper],
 div[data-tippy-root] {
 *,

diff --git a/src/extensions/Excalidraw/components/ExcalidrawActiveButton.tsx b/src/extensions/Excalidraw/components/ExcalidrawActiveButton.tsx
@@ -90,7 +90,7 @@ export const ExcalidrawActiveButton: React.FC<IProps> = ({ editor }) => {
       <DialogContent className="!richtext-max-w-[1300px] richtext-z-[99999]">
         <DialogTitle>Excalidraw</DialogTitle>
 
-        <div style={{ height: '100%', border: '1px solid hsl(var(--border))' }}>
+        <div style={{ height: '100%', borderWidth: 1 }}>
           {loading && (
             <p>
               Loading...

diff --git a/src/extensions/Image/components/ImageCropper.tsx b/src/extensions/Image/components/ImageCropper.tsx
@@ -133,7 +133,7 @@ export function ImageCropper({ editor, imageInline, onClose }: any) {
       <Dialog open={dialogOpen}>
         <DialogTrigger />
 
-        <DialogContent className="[&>button]:richtext-hidden">
+        <DialogContent>
           <DialogTitle>{t('editor.image.dialog.tab.uploadCrop')}</DialogTitle>
 
           <div>

diff --git a/src/extensions/Mermaid/components/MermaidActiveButton.tsx b/src/extensions/Mermaid/components/MermaidActiveButton.tsx
@@ -107,7 +107,7 @@ export const MermaidActiveButton: React.FC<IProps> = ({ editor, upload }) => {
       <DialogContent className="!richtext-max-w-[1300px] richtext-z-[99999]">
         <DialogTitle>Mermaid</DialogTitle>
 
-        <div style={{ height: '100%', border: '1px solid hsl(var(--border))' }}>
+        <div style={{ height: '100%', borderWidth: 1 }}>
           <div className="richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]">
             <Textarea
               className="richtext-flex-1"
@@ -125,7 +125,7 @@ export const MermaidActiveButton: React.FC<IProps> = ({ editor, upload }) => {
 
             <div
               className="richtext-flex-1 richtext-flex richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]"
-              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500, background: '#fff' }}
+              style={{ height: '100%', borderWidth: 1, minHeight: 500, background: '#fff' }}
               ref={mermaidRef as any}
               dangerouslySetInnerHTML={{ __html: svgCode }}
             />