App.js

import React, { useState, useEffect } from "react";
import { Button, makeStyles } from "@material-ui/core";
import {
  Editor,
  MAXIMIZE_ICON,
  MINIMIZE_ICON,
  BOLD_ICON,
  ITALIC_ICON,
  Minimal as MinimalTheme,
  Sea as SeaTheme
} from "./tinymce";

const ThemeWrapper = ({ theme, children }) => {
  return theme === "Minimal" ? (
    <MinimalTheme>{children}</MinimalTheme>
  ) : (
    <SeaTheme>{children}</SeaTheme>
  );
};

const useStyles = makeStyles(theme => ({
  buttonsWrapper: {
    padding: theme.spacing(2, 1),
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

const App = () => {
  const classes = useStyles();

  const [editorValue, setEditorValue] = useState("Default value");
  const [isMaximized, setMaximize] = useState(false);
  const [theme, setTheme] = useState("Minimal");

  const handleOnChange = content => {
    setEditorValue(content);
  };

  return (
    <ThemeWrapper theme={theme}>
      <h1>Choose your theme</h1>
      <p>
        This demo shows how to create themes for TinyMCE Editor with React
        Material-UI.{" "}
        <a href="https://stackblitz.com/edit/tinymce-react-wrapper?file=src%2FApp.js">
          <b>Edit this code sample in this link</b>
        </a>
      </p>
      <p>
        You can also click on the maximize icon and check how to add iteractions
        for your theme, such as maximize and minimize icons and toggle buttons.
        Please check the code in <code>App.js</code> and{" "}
        <code>tinymce/editor.js</code> files to know more about it.
      </p>

      <div className={classes.buttonsWrapper}>
        {["Minimal", "Sea"].map(theme => (
          <Button
            key={theme}
            variant="contained"
            color="primary"
            onClick={() => setTheme(theme)}
          >
            {theme}
          </Button>
        ))}
      </div>

      <Editor
        // Adding dynamic ID here to make sure Stackblitz will show TinyMCE Editor all the time
        // Otherwise, it shows textare after hot reload
        id={`my-editor-${Date.now()}`}
        onEditorChange={handleOnChange}
        value={editorValue}
        init={{
          // This field will change configuration
          // In case of configuration changes, the editor is rerendered to make sure
          // the new configuration will be updated
          toolbar: `undo redo | bold italic | alignleft aligncenter alignright | ${
            isMaximized ? "minimize" : "maximize"
          }`
        }}
        onSetupActions={{
          icons: [
            {
              name: "bold",
              icon: BOLD_ICON
            },
            {
              name: "italic",
              icon: ITALIC_ICON
            },
            {
              name: "maximize-icon",
              icon: MAXIMIZE_ICON
            },
            {
              name: "minimize-icon",
              icon: MINIMIZE_ICON
            }
          ],
          togleButtons: [
            {
              name: "maximize",
              icon: "maximize-icon",
              tooltip: "Maximize Icon",
              onAction: () => {
                setMaximize(true);
              }
            },
            {
              name: "minimize",
              icon: "minimize-icon",
              tooltip: "Minimize Icon",
              onAction: () => {
                setMaximize(false);
              }
            }
          ]
        }}
      />
    </ThemeWrapper>
  );
};

export default App;