How to generate React MUI DOM using Canvas Editor

The Canvas Editor generates HTML markup compatible with the React framework. On the right side of the screen, we render the editor's content using Typography nodes from the MUI library for React.

This example illustrates the following functionalities:

  • The content generated by the editor is rendered using the mapping of black, blue, and transparent colors directly to your React theme.
  • Tables are rendered on the right side of the screen using the React Table Component from the React MUI library.

Opportunities:

  • Wrapping each Typography node in a i18next Trans component to facilitate interpolated content translations.
  • Programming React components to be rendered through an HTMLtag to ReactComponent mapping mechanism, using the ContentRender component.

Benefits:

  • The CSS generated by the <ContentRenderer /> component is isolated and created dynamically, using the same source of truth as the Canvas Editor.

This table contents is inspired from React Table Component Material UI library

 

Dessert (100g serving)CaloriesFat
Frozen yoghurt1596
6Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Gingerbread35616

This page:

As you can see on the right side, the following pre element is mapped to a custom React component:

detecting...
1const editor = useRef<EditorAPI>(null)
2const [value, setValue] = useState<string>(`Some nice HTML value here...`)
3const onEditorChange = () => {
4 setValue(editor.current.value)
5}
6
7return <Stack
8 gap={1}
9 direction={'row'}
10 justifyContent={"stretch"}
11 alignItems={"stretch"}
12 sx={{
13 height: 'calc(100vh - 60px)',
14 }}
15>
16 <EditorSSR
17 value={value}
18 licenseKey={"your-license-key"}
19 sx={{width: '50%'}}
20 ref={editor}
21 editorMode={{
22 mode: 'richText',
23 mimeType: 'text/html',
24 encoderOptions: {
25 i: 'i',
26 u: 'u',
27 b: 'b',
28 },
29 decoderOptions: {
30 },
31 }}
32 onChange={() => {
33 onEditorChange()
34 }}
35 />
36 <ContentRenderer
37 component={Paper}
38 value={value}
39 mode={{mode: 'richText', 'mimeType': 'text/html'}}
40 sx={{
41 padding: '10px',
42 width: '100%',
43 overflow: 'auto',
44 }}
45 />
46</Stack>