Function ProjectEditor

src/pages/project_editor.tsx:21–137

(props: ProjectEditorProps)

}

export const ProjectEditor = (props: ProjectEditorProps) => {
  const { projectLoader } = props
  const { projectID, ownerID } = useParams() as { ownerID: string; projectID: string }
  const [loadedProject, setLoadedProject] = useState<Project>(null)
  const [saveProjectModalState, setSaveProjectModalState] = useState({ open: false, clonedFrom: null })
  const [editorState, setEditorState] = useState<EditorState>(null)
  const [exportTextModalOpen, setExportTextModalOpen] = useState(false)

  const history = useHistory()

  useEffect(() => {
    if (loadedProject) {
      const editorState = new EditorState(loadedProject, hostingConfig, projectLoader)
      editorState.loadDefaultFile().then(() => {
        setEditorState(editorState)
      })

      return () => {
        editorState.cleanup()
      }
    }
  }, [loadedProject])

  const loadProjectFromStorage = () => {
    setLoadedProject(null)
    if (ownerID === 'examples') {
      loadExampleProject(projectID).then((proj) => {
        setLoadedProject(proj)
        setEditorState(null)
      })
    } else if (ownerID === 'local') {
      projectLoader.loadProject(ownerID, projectID).then((proj) => {
        setLoadedProject(proj)
        setEditorState(null)
      })
    }
  }

  useEffect(() => {
    loadProjectFromStorage()
  }, [projectID, ownerID])

  const menuItems: MainMenuItem[] = [
    {
      name: 'New Project',
      onClick: () => {
        setSaveProjectModalState({ open: true, clonedFrom: null })
      },
    },
    {
      name: 'Save As...',
      onClick: () => {
        setSaveProjectModalState({ open: true, clonedFrom: loadedProject })
      },
    },
    {
      name: 'Export Project',
      onClick: async () => {