import { jsx as _jsx } from "react/jsx-runtime";
import { Stack, useTheme } from '@mui/material';
import { EditorContent } from '@tiptap/react';
import { getEditorStyles } from '../constants';
import { useTextArea } from '../context';
import { toSxArray } from '../utils';
export const TextAreaReadOnlyView = ({ sx }) => {
    const { editor } = useTextArea();
    const theme = useTheme();
    if (!editor)
        return null;
    return (_jsx(Stack, { sx: [
            { width: '100%', containerType: 'inline-size' },
            getEditorStyles(theme),
            {
                borderRadius: 2,
                backgroundColor: theme.palette.new.background.elements.default,
                // Hide editing affordances inherited from the editor styles
                '& .resizer': { display: 'none !important' },
                '& .tiptap': { cursor: 'default' },
                '& [data-type="resizable-media"], & [data-type="raw-html"]': {
                    outline: 'none !important',
                    transition: 'none !important',
                    '& img': {
                        outline: 'none !important',
                        transition: 'none !important',
                    },
                },
            },
            ...toSxArray(sx),
        ], children: _jsx(EditorContent, { editor: editor }) }));
};
