CODEWITHSUNDEEP
reactjsmaterial-uirich-text-editor
David
David

Reputation: 43

How to style mui-rte CodeBlock

By default the CodeBlock is styled with a white-ish background and black-ish color. This works fine with a "light" palette but is unreadable with a "dark" palette because with a "dark" palette the background stays white while the color also becomes to white. I can apply a theme based on palette but can't figure out how to style the CodeBlock. I would like to do something like the following:

const darkTheme = createMuiTheme()

Object.assign(darkTheme, {
   overrides: {
      CodeBlock: {
         root: {
            backgroundColor: '#37474F',
            color: '#fff',
         },
      },
   ....
 })
  ....    

    const MyEditor = (props: IProps) => {
       return (
                <MuiThemeProvider theme={getTheme(props.brightness)}>
                   <MUIRichTextEditor defaultValue="" label="Type something here..." onSave={save} inlineToolbar={true} />
                </MuiThemeProvider>)

Upvotes: 1

Views: 4895

Answers (4)

NSalahi
NSalahi

Reputation: 1

I wanted to change the color of the text if the editor is disabled. This worked for me:

    const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        editorReadonly: {
            color: MBTheme.palette.grey[500],
        },
    })
    );

function TaskFormFields(props: EditTaskProps) {
    const translate = useTranslation();
    const intl = useIntl();

    const classes = useStyles();
           .
           .
           .


 return (
            <MUIRichTextEditor
                classes={{ editorReadOnly: classes.editorReadonly }}
                ref={rteRef as unknown as React.Ref<TMUIRichTextEditorRef>}
                readOnly={props.readonly}
                defaultValue={task.content ? ensureRichtText(task.content ?? '') : ''}
                label={props.readonly ? '' : translate('task_content')}
                onBlur={() => rteRef.current?.save()}
                onSave={(data: string) =>
                    task.content !== data && props.onChange && props.onChange({ ...task, content: data })
                }
            />)

Mui5, React17, Typescript

Upvotes: 0

Keith McDuffee
Keith McDuffee

Reputation: 31

This bit allows you to do a bit more with the customization, like auto-sizing the block of code, adjusting the line-height, for example:

overrides: {
  MUIRichTextEditor: {
    root: {
      '& div[class^="CodeBlock"]': {
        'background-color': theme.palette.background.paper,
        color: theme.palette.text.secondary,
        'display': 'inline-block',
        'line-height': 0
      }
    }, ...

However, Jake's code might also work like the following:

import MUIRichTextEditor from 'mui-rte';
import CodeIcon from '@mui/icons-material/Code';

<MUIRichTextEditor 
  controls={["my-codeblock"]}
  customControls={[
    {
      name: "my-codeblock",
      icon: <CodeIcon />,
      type: "inline",
      inlineStyle: {
        bgcolor: theme.palette.background.paper,
        color: theme.palette.text.secondary,
        'display': 'inline-block',
        'line-height': 0
        }
      }
  ]}
/>

Upvotes: 0

David
David

Reputation: 43

Jakes answer is correct I think. There does not seem to be a way to style the '.CodeBlock' specifically. I opened a ticket with mui-rte. I was able to code a fairly nice looking dark mode editor with a readable '.CodeBlock' as follows:

const darkTheme = createMuiTheme()

Object.assign(darkTheme, {
   overrides: {
      MuiIconButton: {
         root: {
            color: '#fff',
         },
      },
      MUIRichTextEditor: {
         root: {
            '& pre': {
               color: '#212121',
            },
         },
         editor: {
            padding: '20px',
            height: '200px',
            maxHeight: '200px',
            overflow: 'auto',
         },
         placeHolder: {
            paddingLeft: 20,
            width: 'inherit',
            position: 'static',
         },
         anchorLink: {
            color: '#FFEB3B',
            textDecoration: 'underline',
         },
      },
   },
})

interface IProps {
   brightness: string
}

const MyEditor = (props: IProps) => {
   return (
      <div>
         <form onSubmit={handleSubmit} style={{ overflow: 'auto' }}>
            <TextField>ff</TextField>
            <MuiThemeProvider theme={getTheme(props.brightness)}>
               <MUIRichTextEditor defaultValue="" label="Type something here..." onSave={save} inlineToolbar={true} />
            </MuiThemeProvider>
            <br />
            <Button variant="contained" color="primary" type="submit">
               submit
            </Button>
         </form>
      </div>
   )
}

export default MyEditor

Upvotes: 3

Jake
Jake

Reputation: 4255

According to the docs, you can use inlineStyle to set the background color.

Example:

import MUIRichTextEditor from 'mui-rte'
import InvertColorsIcon from '@material-ui/icons/InvertColors'

<MUIRichTextEditor 
    controls={["my-style"]}
    customControls={[
        {
            name: "my-style",
            icon: <InvertColorsIcon />,
            type: "inline",
            inlineStyle: {
                backgroundColor: "black",
                color: "white"
            }
        }
    ]}
/>

Another option according to the docs:

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import MUIRichTextEditor from 'mui-rte'

const defaultTheme = createMuiTheme()

Object.assign(defaultTheme, {
    overrides: {
        MUIRichTextEditor: {
            root: {
                marginTop: 20,
                width: "80%"
            },
            editor: {
                borderBottom: "1px solid gray" 
            }
        }
    }
})

<MuiThemeProvider theme={defaultTheme}>
    <MUIRichTextEditor 
        label="Type something here..."
    />
</MuiThemeProvider>

Upvotes: 0

Related Questions