feat: add toggle button to show/hide Monaco editor (#206)

src/App.tsx

@@ -51,6 +51,8 @@ const App = () => {
   const context = useContext(ediTDorContext);
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const [doShowJSON, setDoShowJSON] = useState(true);
+  const [containerKey, setContainerKey] = useState(0);
   const [jsonIndentation, setJsonIndentation] = useState<2 | 4>(2);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
@@ -82,6 +84,9 @@ const App = () => {
     }
   };
 
+  const handleToggleJSON = () => {
+    setDoShowJSON((prev) => !prev);
+    setContainerKey((prev) => prev + 1);
   const isLoadTdMessage = (value: unknown): value is LoadTdMessage => {
     if (typeof value !== "object" || value === null) {
       return false;
@@ -180,7 +185,7 @@ const App = () => {
 
     resizeObserver.observe(tdViewerRef.current);
     return () => resizeObserver.disconnect();
-  }, []);
+  }, [containerKey]);
 
   useEffect(() => {
     const readyMessage: ReadyMessage = {
@@ -230,14 +235,23 @@ const App = () => {
 
   return (
     <main className="flex max-h-screen w-screen flex-col">
+      <AppHeader onToggleJSON={handleToggleJSON} isJSONVisible={doShowJSON} />
       <AppHeader
         jsonIndentation={jsonIndentation}
         onJsonIndentationChange={setJsonIndentation}
       ></AppHeader>
 
       <div className="">
-        <Container className="height-adjust flex flex-col md:flex-row">
-          <Section minSize={550} className="w-full min-w-16 md:w-7/12">
+        <Container
+          key={containerKey}
+          className="height-adjust flex flex-col md:flex-row"
+        >
+          <Section
+            minSize={550}
+            className={`w-full min-w-16 ${
+              doShowJSON ? "md:w-7/12" : "md:w-full"
+            }`}
+          >
             <div ref={tdViewerRef} className="h-full w-full">
               <TDViewer
                 onUndo={handleUndo}
@@ -247,6 +261,24 @@ const App = () => {
             </div>
           </Section>
 
+          {doShowJSON && (
+            <>
+              <Bar
+                size={doShowJSON ? 7.5 : 0}
+                className={`cursor-col-resize bg-gray-300 hover:bg-blue-500 ${
+                  doShowJSON ? "" : "hidden"
+                }`}
+              />
+
+              <Section
+                className={`w-full ${
+                  doShowJSON ? "md:w-5/12" : "md:w-0"
+                } overflow-hidden`}
+              >
+                {doShowJSON && <JsonEditor editorRef={editorRef} />}
+              </Section>
+            </>
+          )}
           <Bar
             size={7.5}
             className="cursor-col-resize bg-gray-300 hover:bg-blue-500"

src/components/App/AppHeader.tsx

@@ -26,6 +26,8 @@ import {
   Share,
   Link,
   Send,
+  Eye,
+  EyeOff,
 } from "react-feather";
 import editdorLogo from "../../assets/editdor.png";
 import ediTDorContext from "../../context/ediTDorContext";
@@ -49,6 +51,10 @@ const INVALID_TYPE_MESSAGE =
 const VALIDATION_FAILED_MESSAGE =
   "The Thing Model did not pass the JSON schema validation Please make sure the Thing Model is valid according to the JSON schema before contributing it to the catalog.";
 
+const AppHeader: React.FC<{
+  onToggleJSON: () => void;
+  isJSONVisible: boolean;
+}> = ({ onToggleJSON, isJSONVisible }) => {
 interface AppHeaderProps {
   jsonIndentation: 2 | 4;
   onJsonIndentationChange: (value: 2 | 4) => void;
@@ -342,6 +348,12 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <Settings />
             <div className="text-xs">Settings</div>
           </Button>
+          <Button onClick={onToggleJSON}>
+            {isJSONVisible ? <EyeOff /> : <Eye />}
+            <div className="text-xs">
+              {isJSONVisible ? "Hide Code" : "Show Code"}
+            </div>
+          </Button>
         </div>
       </header>
       <SendTDDialog ref={sendTdDialog} currentTdId={currentTdId} />