diff --git a/src/layout/EditorWrapper/index.tsx b/src/layout/EditorWrapper/index.tsx
deleted file mode 100644
index 70ffd30..0000000
--- a/src/layout/EditorWrapper/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import dynamic from "next/dynamic";
-import { MantineProvider, useMantineColorScheme } from "@mantine/core";
-import { ThemeProvider } from "styled-components";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { lightTheme, darkTheme } from "src/constants/theme";
-import useConfig from "src/store/useConfig";
-
-const ModalController = dynamic(() => import("src/layout/ModalController"));
-
-const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- refetchOnWindowFocus: false,
- retry: false,
- },
- },
-});
-
-export const EditorWrapper: React.FC<{
- children: React.ReactNode;
-}> = ({ children }) => {
- const { setColorScheme } = useMantineColorScheme();
- const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
-
- React.useEffect(() => {
- if (darkmodeEnabled) setColorScheme("dark");
- }, [darkmodeEnabled, setColorScheme]);
-
- return (
-
-
-
-
- {children}
-
-
-
- );
-};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 65c5b09..f81091c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -15,17 +15,16 @@ import { supabase } from "src/lib/api/supabase";
import useUser from "src/store/useUser";
const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));
-const ExternalMode = dynamic(() => import("src/layout/ExternalMode"));
-
-const mantineTheme = createTheme({
- primaryShade: 8,
-});
const isDevelopment = process.env.NODE_ENV === "development";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
+const mantineTheme = createTheme({
+ primaryShade: 8,
+});
+
function JsonCrack({ Component, pageProps }: AppProps) {
const router = useRouter();
const setSession = useUser(state => state.setSession);
@@ -53,7 +52,6 @@ function JsonCrack({ Component, pageProps }: AppProps) {
JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone
-
-
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index 5451c12..21e1eed 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -1,13 +1,29 @@
import React from "react";
+import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
-import styled from "styled-components";
+import { MantineProvider } from "@mantine/core";
+import styled, { ThemeProvider } from "styled-components";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { darkTheme, lightTheme } from "src/constants/theme";
import { BottomBar } from "src/containers/Editor/BottomBar";
import Panes from "src/containers/Editor/Panes";
import { Toolbar } from "src/containers/Toolbar";
-import { EditorWrapper } from "src/layout/EditorWrapper";
+import useConfig from "src/store/useConfig";
import useFile from "src/store/useFile";
+const ModalController = dynamic(() => import("src/layout/ModalController"));
+const ExternalMode = dynamic(() => import("src/layout/ExternalMode"));
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ retry: false,
+ },
+ },
+});
+
export const StyledPageWrapper = styled.div`
height: calc(100vh - 27px);
width: 100%;
@@ -25,30 +41,37 @@ export const StyledEditorWrapper = styled.div`
const EditorPage: React.FC = () => {
const { query, isReady } = useRouter();
- const hasQuery = React.useMemo(() => Object.keys(query).length > 0, [query]);
const checkEditorSession = useFile(state => state.checkEditorSession);
+ const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
React.useEffect(() => {
if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]);
return (
-
-
-
- Editor | JSON Crack
-
- {hasQuery && }
-
-
-
-
-
-
-
-
-
-
+ <>
+
+ Editor | JSON Crack
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx
index 7fc5ff9..2453f14 100644
--- a/src/pages/widget.tsx
+++ b/src/pages/widget.tsx
@@ -2,7 +2,7 @@ import React from "react";
import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
-import { MantineProvider, useMantineColorScheme } from "@mantine/core";
+import { MantineProvider } from "@mantine/core";
import { ThemeProvider } from "styled-components";
import toast from "react-hot-toast";
import { darkTheme, lightTheme } from "src/constants/theme";
@@ -23,7 +23,6 @@ const Graph = dynamic(() => import("src/containers/Views/GraphView").then(c => c
const WidgetPage = () => {
const { query, push, isReady } = useRouter();
- const { setColorScheme } = useMantineColorScheme();
const [theme, setTheme] = React.useState<"dark" | "light">("dark");
const checkEditorSession = useFile(state => state.checkEditorSession);
const setContents = useFile(state => state.setContents);
@@ -43,7 +42,6 @@ const WidgetPage = () => {
try {
if (!event.data?.json) return;
if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") {
- setColorScheme(event.data.options.theme);
setTheme(event.data.options.theme);
}
@@ -57,18 +55,20 @@ const WidgetPage = () => {
window.addEventListener("message", handler);
return () => window.removeEventListener("message", handler);
- }, [setColorScheme, setContents, setDirection, theme]);
+ }, [setContents, setDirection, theme]);
return (
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
);
};