Internal css not rendering in suneditor

[tejasrk08]

I have stored a html in the database and than I m fetching it back to render in the suneditor but whatever the Internal CSS I have given is not coming in the UI not even in the DOM HTML I m using is

DIM light

Dear An access request has been created that requires your review and approval.  Your review should be completed as soon as possible.     How do I take action?  Click on the 'My Tasks' link below to go to review your open tasks.  Approver or Deny the entire request, or you can drill into the details and you can selectively approve individual records  Submit your response when you have responded to all items in the request. My Tasks Request Details: Requested For test Corporate ID test Access Start Date test Access End Date test est Justification test Requested Areas: Area Name Area Type test test Remember! r before $FIELD.duedt Regards, Office

This email External Privacy Policy

and my suneditor js file is 'use client'; import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import SunEditor from 'suneditor-react'; import 'suneditor/dist/css/suneditor.min.css';

const RichTextEditorComponent = (props) => { const [editorContent, setEditorContent] = useState(''); const [mentionData, setMentionData] = useState([]); const updatedformData = useSelector( (state) => state?.formDataReducer?.updateFormData ); const { getHeaders } = useApiUtils(); const { label, required, onChange, value, useForm, menitonFunction, name, readOnly, } = props;

const handleEditorChange = (content) => {
    console.log('Content changed:', content);
    // const updatedContent = preserveLoopTagCase(content);
    setEditorContent(content);
    onChange(content);
};

const handleInputChange = (e) => {
    console.log('Input event:', e.target.innerHTML); // or e.target.value depending on the content
};

useEffect(() => {
    if (value) {
        setEditorContent(value);
    }
}, [value]);

return (
    <SunEditor
        setContents={editorContent}
        name={name}
        onChange={handleEditorChange}
        // readOnly={readOnly}

        setOptions={{
            height: 200,
            buttonList: [
                [
                    'bold',
                    'underline',
                    'italic',
                    'strike',
                    'subscript',
                    'superscript',
                ],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['link', 'image', 'video'],
                ['undo', 'redo', 'removeFormat'],
                [
                    'table',
                    'horizontalRule',
                    'fullScreen',
                    'showBlocks',
                    'codeView',
                ],
            ],
            addTagsWhitelist: 'Loop, style',
            pasteTagsWhitelist: 'table',
        }}
    />
);

};

export default RichTextEditorComponent;