Update to use the Monaco editor (#7)

src/App.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Editor from './components/Editor';
 import parseContentType from 'content-type-parser';
 import { languageIds } from './util/highlighting';
@@ -22,7 +22,7 @@ async function loadFromBytebin(id) {
         resp.headers.get('content-type')
       );
 
-      document.title = 'paste | ' + id;
+      document.title = 'pastes | ' + id;
       return { ok: true, content, type };
     } else {
       return { ok: false };
@@ -49,13 +49,19 @@ const LOADED = Symbol();
 export default function App() {
   const [pasteId] = useState(getPasteIdFromUrl);
   const [state, setState] = useState(INITIAL);
-  const [content, setContent] = useState('');
+  const [forcedContent, setForcedContent] = useState('');
+  const [actualContent, setActualContent] = useState('');
   const [contentType, setContentType] = useState();
 
+  const setContent = useCallback((content) => {
+    setActualContent(content);
+    setForcedContent(content);
+  }, [setActualContent, setForcedContent]);
+
   useEffect(() => {
     if (pasteId && state === INITIAL) {
       setState(LOADING);
-      setContent('Loading...');
+      setForcedContent('Loading...');
       loadFromBytebin(pasteId).then(({ ok, content, type }) => {
         if (ok) {
           setContent(content);
@@ -72,8 +78,10 @@ export default function App() {
 
   return (
     <Editor
-      content={content}
-      setContent={setContent}
+      forcedContent={forcedContent}
+      setForcedContent={setContent}
+      actualContent={actualContent}
+      setActualContent={setActualContent}
       contentType={contentType}
     />
   );