Fix new/reset button

src/App.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Editor from './components/Editor';
 import { loadFromBytebin } from './util/storage';
 
@@ -15,18 +15,16 @@ export default function App() {
   const [actualContent, setActualContent] = useState<string>('');
   const [contentType, setContentType] = useState<string>();
 
-  const setContent = useCallback(
-    (content: string) => {
-      setActualContent(content);
-      setForcedContent(content);
-    },
-    [setActualContent, setForcedContent]
-  );
+  function setContent(content: string) {
+    setActualContent(content);
+    setForcedContent(content);
+  }
 
   useEffect(() => {
     if (pasteId && state === INITIAL) {
       setState(LOADING);
-      setForcedContent('Loading...');
+      setContent('Loading...');
+
       loadFromBytebin(pasteId).then(({ ok, content, type }) => {
         if (ok) {
           setContent(content);
@@ -39,12 +37,11 @@ export default function App() {
         setState(LOADED);
       });
     }
-  }, [pasteId, state, setContent]);
+  }, [pasteId, state]);
 
   return (
     <Editor
       forcedContent={forcedContent}
-      setForcedContent={setContent}
       actualContent={actualContent}
       setActualContent={setActualContent}
       contentType={contentType}

src/components/Editor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { ThemeProvider } from 'styled-components';
 
@@ -10,16 +10,16 @@ import EditorTextArea from './EditorTextArea';
 
 export interface EditorProps {
   forcedContent: string;
-  setForcedContent: (value: string) => void;
   actualContent: string;
   setActualContent: (value: string) => void;
   contentType?: string;
   pasteId?: string;
 }
 
+export type ResetFunction = () => void;
+
 export default function Editor({
   forcedContent,
-  setForcedContent,
   actualContent,
   setActualContent,
   contentType,
@@ -27,6 +27,7 @@ export default function Editor({
 }: EditorProps) {
   const [language, setLanguage] = useState<string>('plain');
   const [readOnly, setReadOnly] = useState<boolean>(isMobile && !!pasteId);
+  const resetFunction = useRef<ResetFunction>();
 
   const [theme, setTheme] = usePreference<keyof Themes>(
     'theme',
@@ -58,7 +59,7 @@ export default function Editor({
         <EditorGlobalStyle />
         <EditorControls
           actualContent={actualContent}
-          setForcedContent={setForcedContent}
+          resetFunction={resetFunction}
           language={language}
           setLanguage={setLanguage}
           readOnly={readOnly}
@@ -75,6 +76,7 @@ export default function Editor({
           language={language}
           fontSize={fontSize}
           readOnly={readOnly}
+          resetFunction={resetFunction}
         />
       </ThemeProvider>
     </>

src/components/EditorControls.tsx

@@ -1,17 +1,18 @@
 import copy from 'copy-to-clipboard';
 import history from 'history/browser';
-import { useCallback, useEffect, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
 import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
 import Button from './Button';
+import { ResetFunction } from './Editor';
 import MenuButton from './MenuButton';
 
 export interface EditorControlsProps {
   actualContent: string;
-  setForcedContent: (value: string) => void;
+  resetFunction: MutableRefObject<ResetFunction | undefined>;
   language: string;
   setLanguage: (value: string) => void;
   readOnly: boolean;
@@ -23,7 +24,7 @@ export interface EditorControlsProps {
 
 export default function EditorControls({
   actualContent,
-  setForcedContent,
+  resetFunction,
   language,
   setLanguage,
   readOnly,
@@ -77,7 +78,11 @@ export default function EditorControls({
   }, [save, zoom]);
 
   function reset() {
-    setForcedContent('');
+    if (!resetFunction.current) {
+      throw new Error();
+    }
+
+    resetFunction.current();
     setLanguage('plain');
     history.replace({
       pathname: '/',

src/components/EditorTextArea.tsx

@@ -5,11 +5,18 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 import themes, { makeMonacoTheme, Theme } from '../style/themes';
 
 import type { editor } from 'monaco-editor';
+import { ResetFunction } from './Editor';
 
 export interface EditorTextAreaProps {
   forcedContent: string;
@@ -19,6 +26,7 @@ export interface EditorTextAreaProps {
   language: string;
   fontSize: number;
   readOnly: boolean;
+  resetFunction: MutableRefObject<ResetFunction | undefined>;
 }
 
 export default function EditorTextArea({
@@ -29,6 +37,7 @@ export default function EditorTextArea({
   language,
   fontSize,
   readOnly,
+  resetFunction,
 }: EditorTextAreaProps) {
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
   const [monaco, setMonaco] = useState<Monaco>();
@@ -78,6 +87,11 @@ export default function EditorTextArea({
     setEditor(editor);
     setMonaco(monaco);
 
+    resetFunction.current = () => {
+      editor.setValue('');
+      editor.focus();
+    };
+
     editor.focus();
   };