Update README, dynamic import Editor

README.md

@@ -4,7 +4,7 @@ A frontend for Octyne.
 
 ## Quick Start
 
-1. Prerequisites: Install [Node.js](https://nodejs.dev/en/download/) (on macOS/Linux, follow the "install via a package manager" instructions, preferably using [n](https://nodejs.dev/en/download/package-manager#n) to get the latest Node.js LTS version) and [Git](https://www.atlassian.com/git/tutorials/install-git). After installing Node.js, run `corepack enable` in the terminal to install the Yarn package manager (run as administrator/`sudo` may be needed).
+1. Prerequisites: Install [Node.js](https://nodejs.dev/en/download/) and [Git](https://www.atlassian.com/git/tutorials/install-git). Run `corepack enable` in the terminal as admin/`sudo` to install the Yarn package manager.
 2. Download Ecthelion to a folder by running `git clone https://github.com/retrixe/ecthelion.git` in terminal where you wish to place Ecthelion.
 3. Select the current version of Ecthelion after downloading it by running `git checkout <version>` in the Ecthelion folder. Alternatively, for the development version, run `git checkout main`.
 4. Follow the steps [here](https://github.com/retrixe/ecthelion#configuration) to configure Ecthelion correctly. After configuration changes, rebuild Ecthelion with `yarn && yarn build`.
@@ -31,5 +31,5 @@ Create a `config.json` in the top level of the project and then add the followin
 **⚠️ Important Notes:**
 
 - The `ip` field is required, while `nodes`, `basePath` and `enableCookieAuth` are optional.
-- Cookie authentication is more secure, but it requires Octyne v1.1+, and Ecthelion + all Octyne nodes must be under 1 domain or IP address! For this, you can use a reverse proxy like nginx or Apache, [the Octyne documentation has sample configs for both software](https://github.com/retrixe/octyne#security-practices-and-reverse-proxying) to achieve this.
 - Absolute URLs to Octyne should be accessible to users (make sure Octyne is port forwarded), and are in the format of `http[s]://<ip address or domain name>[:<port>][/<sub-URL if using nginx/apache to reverse proxy>]`, e.g. `http://43.12.45.32:42069` or `https://console.myserver.com/octyne`. The URL should also not end with `/`!
+- Cookie authentication is more secure, but it requires Octyne v1.1+, and Ecthelion + all Octyne nodes must be under 1 domain or IP address! For this, you can use a reverse proxy like nginx or Apache, [the Octyne documentation has sample configs for both software](https://github.com/retrixe/octyne#security-practices-and-reverse-proxying) to achieve this.

imports/dashboard/files/dynamicEditor.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { LinearProgress, Paper, Typography } from '@mui/material'
+import dynamic from 'next/dynamic'
+
+const DynamicEditor = dynamic(() => import('./editor'), {
+  ssr: false,
+  loading: () => (
+    <Paper style={{ padding: 20 }}>
+      <Typography gutterBottom>Loading editor...</Typography>
+      <LinearProgress color='secondary' />
+    </Paper>
+  ),
+})
+
+export default DynamicEditor

imports/dashboard/files/fileManager.tsx

@@ -29,7 +29,7 @@ import ConnectionFailure from '../../errors/connectionFailure'
 import useOctyneData from '../useOctyneData'
 import useKy from '../../helpers/useKy'
 
-import Editor from './editor'
+import DynamicEditor from './dynamicEditor'
 import Overlay from './overlay'
 import { archiveRegex, joinPath, normalisePath, parentPath, uploadFormData } from './fileUtils'
 import UploadButton from './uploadButton'
@@ -469,7 +469,7 @@ const FileManager = (props: {
         alternativeDisplay
       ) : file !== null ? (
         <Paper style={{ padding: 20 }}>
-          <Editor
+          <DynamicEditor
             {...file}
             siblingFiles={files.map(e => e.name)}
             onSave={handleSaveFile}

pages/settings/config.tsx

@@ -1,19 +1,18 @@
 import React, { useState, useEffect, useCallback } from 'react'
-
+import { useRouter } from 'next/router'
 import { Button, FormControl, InputLabel, MenuItem, Paper, Select, Typography } from '@mui/material'
 
 import config from '../../imports/config'
 import useKy from '../../imports/helpers/useKy'
 import Title from '../../imports/helpers/title'
 import Message from '../../imports/helpers/message'
-import Editor from '../../imports/dashboard/files/editor'
+import DynamicEditor from '../../imports/dashboard/files/dynamicEditor'
 import AuthFailure from '../../imports/errors/authFailure'
 import NotExistsError from '../../imports/errors/notExistsError'
 import useOctyneData from '../../imports/dashboard/useOctyneData'
 import ConfirmDialog from '../../imports/settings/confirmDialog'
 import SettingsLayout from '../../imports/settings/settingsLayout'
 import ConnectionFailure from '../../imports/errors/connectionFailure'
-import { useRouter } from 'next/router'
 
 const confirmDialogWarning =
   'Are you sure you want to do this? Make sure the config is correct, \
@@ -154,7 +153,7 @@ const ConfigPage = (): React.JSX.Element => {
               </Paper>
             ) : (
               <Paper style={{ padding: 20 }}>
-                <Editor
+                <DynamicEditor
                   name={`config.json${node ? ` on node ${node}` : ''}`}
                   content={fileContent}
                   siblingFiles={[]}