Table no getting styles when i just: cdm + r MongoDB

[ssaurexd]

When i save the text on my Mongo db getting the value like this rteRef.current?.editor?.getHTML() everything if fine, en rendering value looks great like in image

The bug cames when i go to mongo compass and just reload to see the updated text and go back to the editor the styles are gone. Tables, font size, display like this

[sjdemartini]

Would you be able to provide more details of how to reproduce the issue, as requested in the original bug report template? There isn't enough information here to understand what the problem is. It sounds like it may be related to how you are using external CSS and/or handling the HTML or editor extensions. It does not sound like a mui-tiptap bug.

[ssaurexd]

This is my personal component that is rendering the editor

// RichText.tsx

'use client'
import { useRef, forwardRef, useImperativeHandle } from 'react'
import { Controller } from 'react-hook-form'
import { RichTextEditor, type RichTextEditorRef, LinkBubbleMenu, TableBubbleMenu } from 'mui-tiptap'
/*  */
import { RichEditorMenu } from './RichEditorMenu'
import useExtensions from './useExtensions'
import { EditorRef } from '@/interfaces'
/*  */
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import type { SxProps } from '@mui/material/styles'

interface Props {
	control: any
	label?: string
	name: string
	placeholder?: string
	required?: boolean
	sx?: SxProps
}
export const RichText = forwardRef<EditorRef, Props>(({ control, name, label, sx, required, placeholder }, ref) => {
	const rteRef = useRef<RichTextEditorRef>(null)
	const extensions = useExtensions({
		placeholder,
	})

	/* editor */
	useImperativeHandle(ref, () => {
		return {
			rteRef: rteRef.current || null,
		}
	}, [])

	return (
		<Controller
			control={control}
			name={name}
			render={({ field: { onChange, value }, fieldState: { error } }) => (
				<Box
					sx={{
						display: 'flex',
						flexDirection: 'column',
						width: '100%',
						'& .MuiTiptap-RichTextContent-root': {
							height: '100%',
						},
						'& .MuiTiptap-FieldContainer-root': {
							height: '100%',
						},
						...sx,
					}}
				>
					{label && (
						<Box mb={1}>
							<Typography variant='subtitle2' fontWeight='normal'>
								{required ? `${label} *` : label}:
								{error?.message && (
									<Typography color='error' variant='caption' component='span'>
										{` ${error.message}`}
									</Typography>
								)}
							</Typography>
						</Box>
					)}
					<RichTextEditor
						ref={rteRef}
						extensions={extensions}
						content={value}
						renderControls={() => <RichEditorMenu />}
						editorProps={{
							handleTextInput: () => {
								onChange(rteRef.current?.editor?.getHTML() || '')
							},
						}}
					>
						{() => (
							<>
								<LinkBubbleMenu />
								<TableBubbleMenu />
							</>
						)}
					</RichTextEditor>
				</Box>
			)}
		/>
	)
})

RichText.displayName = 'RichText'

---

This is how I called
<RichText control={control} name='text' ref={(ref: EditorRef) => asignEditorRef(ref)} />

Im using version 1.15.0

[sjdemartini]

I'm afraid I don't understand how to reproduce the issue. I'm not familiar with Mongo Compass or your setup that is appearing without styles. Can you provide a CodeSandbox that demonstrates and reproduces the issue, and/or specific steps to make the editor appear without styles?

Side note (unrelated to the styles issue you're reporting) that treating the editor as a controlled component like you have in your example is often not what you want. See https://github.com/sjdemartini/mui-tiptap/blob/dcd2dcf8364629784c10557cce00bfe10748a124/README.md#re-rendering-richtexteditor-when-content-changes

[ssaurexd]

You were right, its about a controller tiptap. Do you have an example with a cotrolled component?

[sjdemartini]

I'm suggesting not using it as a controlled component, since that's not going to be very performant and doesn't work well with Tiptap's APIs.

But that should be unrelated to your original issue about styles not working. Do you have repro steps for that or any insight as to what's happening? Otherwise I'll go ahead and close this out for now, since it doesn't sound to me like it's caused by mui-tiptap.

[ssaurexd]

Yep, you can close it, thanks for help