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.

[yassinya]

Did you find a solution?

[winno-GmbH]

I found a solution which is more of a workaround but it works:

The problem is the menu is outside of the dialog and appended to the body. The dialog therefore blocks the menu.
You can append the menu to the dialog element when the editor is initialized.

<Editor
  apiKey="your-api-key"
  onInit={() => {
    if (inDialog) {
      const menu = document.querySelector(".tox.tox-silver-sink.tox-tinymce-aux");
      if (menu) {
        document.querySelector('[role="dialog"]')?.appendChild(menu);
      }
    }
  }}
  init={{
    // your init settings
  }}
/>

(Please don't slander me for this solution, it's just a workaround :D)

[emhat098]

I found a way for working around. Here is the steps:

1. In the init options of tinymce. I add the custom handler for the function init_instance_callback.
2. Add the custom handleInitInstanceCallback function for handling the init instance mce by the following code:

/**
 * Handle tiny editor after init.
 * @param editor
 */
const handleInitInstanceCallback = function (editor: any) {
  const dialogContainer = document.getElementById('dialog-form');
  if (dialogContainer) {
    const auxElements = document.querySelectorAll('body > .tox-tinymce-aux');
    if (auxElements.length)
      dialogContainer.append(auxElements[auxElements.length - 1]);
  }
};

3. Add the id for DialogContent component like id={'dialog-form'} as unique id for the form editor.