Fonts aren't displayed

[amartya-dev]

I am trying to embed the EmailEditor via React, everything seems to work fine except the fonts section, the dropdown which is supposed to contain the list of fonts, shows nothing and even the font size selection is a bit off:

Is it a bug with the editor itself? or am I doing something wrong:

Code:

import {
  Button,
  Box,
  Container,
  Grid,
  Hidden,
  Typography,
  AppBar,
} from "@material-ui/core";
import clsx from "clsx";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import { useSelector } from "react-redux";
import { useStyles } from "./emailBuilder.css";

import { selectOpen } from "../../redux/utils";
import { TemplatesNav } from "./TemplatesNav";
import Component from "react-email-editor";

export function EmailBuilder() {
  const emailEditorRef = useRef<Component>(null);

  const onLoad = () => {
    // you can load your template here;
    // const templateJson = {};
    // emailEditorRef.current.editor.loadDesign(templateJson);
  };

  const classes = useStyles();

  const drawerOpen = useSelector(selectOpen);

  const [templatesNavOpen, setTemplatesNavOpen] =
    React.useState<boolean>(false);
  const openTemplatesNav =
    () => (event: React.KeyboardEvent | React.MouseEvent) => {
      console.log(templatesNavOpen);
      setTemplatesNavOpen(true);
    };

  const exportHtml = async () => {
    emailEditorRef.current!.exportHtml(
      (data: { design: Object; html: String }) => {
        const { design, html } = data;
        console.log("exportHtml", html);
        console.log("Design JSON", design);
      }
    );
  };

  return (
    <Container maxWidth="xl">
      <Hidden mdDown>
        <AppBar
          position="fixed"
          className={clsx(classes.appBarStyle, {
            [classes.shiftedAppBarStyle]: drawerOpen,
          })}
          elevation={0}
        >
          <Box display="flex" m={1} p={1}>
            <Box p={1} flexGrow={1}>
              <Button
                onClick={openTemplatesNav()}
                color="primary"
                variant="contained"
              >
                Templates
              </Button>
            </Box>
            <Box p={1}>
              <Button color="primary" variant="contained">
                Preview
              </Button>
            </Box>
            <Box p={1}>
              <Button color="primary" variant="contained" onClick={exportHtml}>
                Save
              </Button>
            </Box>
          </Box>
        </AppBar>
        <TemplatesNav
          drawerOpen={templatesNavOpen}
          setDrawerOpen={setTemplatesNavOpen}
        />
        <Grid container className={classes.container}>
          <EmailEditor ref={emailEditorRef} onLoad={onLoad} />
        </Grid>
      </Hidden>
      <Hidden mdUp>
        <Typography variant="h5">
          Shoot !! We do not support designing on mobiles yet
        </Typography>
      </Hidden>
    </Container>
  );
}

[talovicnedim]

@amartya-dev Did you figure out something? I have the same issue.

[amartya-dev]

@talovicnedim nope, I am thinking of moving away from this

[eMuonTau]

@amartya-dev @talovicnedim Can you try to set projectId property of EmailEditor to some number? I don't know why but if projectId is not defined fonts are broken.

[lf-devs]

@amartya-dev here is the solution for fonts

<EmailEditor
                            ref={emailEditorRef}
                            exportHtml={exportHtml}
                            options={{
                                appearance: {
                                    theme: "dark",
                                },
                                features: {
                                    textEditor: {
                                        fontSizes: ["70px", "60px", "50px"],
                                    },
                                },
                                fonts: {
                                    showDefaultFonts: false,
                                    customFonts: [
                                        {
                                            label: "Comic Sans",
                                            value: "'Comic Sans MS', cursive, sans-serif",
                                        },
                                        {
                                            label: "DotGothic16",
                                            value: "'DotGothic16',cursive",
                                            url: "https://fonts.googleapis.com/css?family=DotGothic16",
                                        },
                                    ],
                                },
                            }}
                            onLoad={onLoad}
                            onReady={onReady} />

[fedotxxl]

same issuer on Ubuntu, fixed with showDefaultFonts: false, not sure is it correct solution