TinyMCE does not work correctly on Tabs component.

[emhat098]

Hello everyone,
First I am very appreciate about this package. Honestly, it is awesome. I never see the UI package like this before. Good job.

And I am working on my current project and I want to embed the TinyMCE editor on the Tabs components. Somehow, the controls in TinyMCE is not working well. I was research and try to investigating the className and Tailwind but it looks like there is no hope to me. You can see the code and image bellow:

create-blog-button.tsx

'use client';

import { Button } from '@/components/ui/button';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { PlusCircledIcon } from '@radix-ui/react-icons';
import BlogForm from './blog-form';

/**
 * The create category button component.
 * @return {React.ReactElement} The create category button component.
 */
const CreateBlogButton = (): React.ReactElement => {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button
          variant={'outline'}
          size={'sm'}
          className={'h-8 border-dashed'}
        >
          <PlusCircledIcon className={'h-4 w-4 mr-2'} />
          {'Add blog'}
        </Button>
      </DrawerTrigger>
      <DrawerContent className={'mx-auto'}>
        <ScrollArea className={'mx-auto w-full max-w-3xl h-[85vh] lg:h-[90vh]'}>
          <ScrollBar orientation={'vertical'} />
          <DrawerHeader>
            <DrawerTitle>{'Create a new blog'}</DrawerTitle>
            <DrawerDescription>
              {'Customize your blog specifications here.'}
            </DrawerDescription>
          </DrawerHeader>
          <div className={'p-4 pb-0'}>
            <BlogForm />
          </div>
          <DrawerFooter>
            <DrawerClose asChild>
              <Button variant={'outline'}>{'Cancel'}</Button>
            </DrawerClose>
          </DrawerFooter>
        </ScrollArea>
      </DrawerContent>
    </Drawer>
  );
};

export default CreateBlogButton;

blog-form.tsx

const HtmlEditor = dynamic(() => import('@/components/ui/editor'), {
  ssr: false,
});

const BlogForm: React.FC<{ data?: any }> = ({ data }) => {
  // ...
  return (
    // Tabs
    <Tabs defaultValue={'blog'}>
      {/* Tabs List */}
      <TabsList className={'grid w-full grid-cols-2'}>
        {/* Blog Tab */}
        <TabsTrigger
          className={clsx(
            (title || description || images) && 'font-bold !text-red-400'
          )}
          value={'blog'}
        >
          {'Blog'}
        </TabsTrigger>
        {/* SEO Tab */}
        <TabsTrigger
          className={clsx(
            (seoDesc || seoURL || seoKeys) && 'font-bold !text-red-400'
          )}
          value={'seo'}
        >
          {'SEO Metadata'}
        </TabsTrigger>
      </TabsList>

      {/* Form */}
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          {/* Blog Tab Content */}
          <TabsContent value={'blog'}>
            <Card>
              <CardHeader>
                <CardTitle>{'Blog Information'}</CardTitle>
                <CardDescription>
                  {
                    "The blog information for your blog. This is what's shown to your customers."
                  }
                </CardDescription>
              </CardHeader>
              <CardContent className={'p-2 lg:p-6 pt-0 space-y-2'}>
                <FormField
                  control={form.control}
                  name={'description'}
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{'Description'}</FormLabel>
                      <FormControl>
                        <HtmlEditor
                          // simpleEditor={true}
                          onChange={(value: string) =>
                            form.setValue('description', value)
                          }
                          initialValue={field.value}
                        />
                      </FormControl>
                      <FormDescription>
                        {'Short description of your product.'}
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <ImageField form={form} />
                <Box className={'space-y-2'}>
                  <Button className={'w-full'}>{'Save changes'}</Button>
                </Box>
              </CardContent>
            </Card>
          </TabsContent>         
        </form>
      </Form>
    </Tabs>
  );
};

/components/ui/Editor.tsx

const TinyEditor = ({
  onChange,
  simpleEditor,
  initialValue,
}: any): JSX.Element => {
  const [value, setValue] = useState(initialValue ?? '');
  const editorRef = useRef<TinyMCEEditor | null>(null);
  const { theme } = useTheme();

  useEffect(() => setValue(initialValue ?? ''), [initialValue]);

  return (
    <ErrorBoundary
      fallback={<>{'Something went wrong. Please contact administator'}</>}
    >
      <Editor
        tinymceScriptSrc={'/tinymce/tinymce.min.js'}
        onInit={(_, editor) => {
          editorRef.current = editor;
        }}
        init={{
          ...TinymceInit,
          skin: theme === 'dark' ? 'oxide-dark' : 'oxide',
          content_css: theme === 'dark' ? 'dark' : 'default',
          setup: onSetup,
          body_class: 'tinymce-body',
          toolbar: simpleEditor ? SimpleEditorToolbar : TinymceInit.toolbar,
        }}
        value={value}
        onEditorChange={(newValue, editor) => {
          setValue(newValue);
          onChange(newValue);
        }}
      />
    </ErrorBoundary>
  );
};

Here is the error:

Anyone, have an idea. Please let know.
Thank you so much.

[rugys]

@emhat098 Hi, Did you manage to find a solution? I'm facing the same issue, but with Dialog component.