TinyMCE Editor configuration

editor.js

// This file lives in `editor/editor.js`
import React, { useEffect, useState } from "react";
import { Editor as TinyMCEEditor } from "@tinymce/tinymce-react";

// Default Editor configuration to be mixed with the ones passed
// from the consumers
const defaults = {
  init: {
    width: "100%",
    height: "300",
    menubar: false,
    branding: false,
    plugins: ["link image", "table paste"],
    toolbar: "undo redo | bold italic | alignleft aligncenter alignright"
  }
};

export const Editor = ({ onEditorChange, value, init, id }) => {
  const [configHasChanged, setRerenderEditor] = useState(false);
  const [internalInit, setInternalInit] = useState(init);
  
  // Unfortunately, the easiest way to make sure the editor will be updated and respect React lifecycle
  // is by forcing a remount in case of configuration changes.
  // Since this won't happen that often, it shouldn't be a problem in your app  
  const forceEditorRerender = () => {
    setRerenderEditor(true);
    requestAnimationFrame(() => setRerenderEditor(false));
  };

  useEffect(() => {
    if (JSON.stringify(init) !== JSON.stringify(internalInit)) {
      setInternalInit(init);
      forceEditorRerender();
    }
  }, [init]);

  return configHasChanged ? null : (
    <TinyMCEEditor
      id={id}
      init={{
        ...defaults.init,
        ...internalInit,
        id,
      }}
      value={value}
      onEditorChange={onEditorChange}
    />
  );
};