dynamic editor

JSPaste · Aug 10, 2024 · 8009cfb · 8009cfb
1 parent f65e3b6
commit 8009cfb
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 25 deletions.
diff --git a/src/app/[documentName]/page.tsx b/src/app/[documentName]/page.tsx
@@ -1,4 +1,4 @@
-import { EditorScreen } from '@/screen/EditorScreen';
+import EditorScreen from '@/screen/EditorScreen';
 
 type PageProps = {
 	params: {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { EditorScreen } from '@/screen/EditorScreen';
+import EditorScreen from '@/screen/EditorScreen';
 
 export default function () {
 	return <EditorScreen />;

diff --git a/src/component/editor/EditorComponent.tsx b/src/component/editor/EditorComponent.tsx
@@ -11,7 +11,7 @@ type EditorProps = {
 	enableEdit: boolean;
 };
 
-export const EditorComponent = (props: EditorProps) => {
+export default function (props: EditorProps) {
 	const editorRef = useRef<ReactCodeMirrorRef>(null);
 
 	const updateCursorInformation = useCallback(() => {
@@ -55,4 +55,4 @@ export const EditorComponent = (props: EditorProps) => {
 			}}
 		/>
 	);
-};
+}
diff --git a/src/component/editor/FooterButtonComponent.tsx b/src/component/editor/FooterButtonComponent.tsx
@@ -1,4 +1,4 @@
-import useThemeValues from '@/hook/useThemeValue';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { IconButton, Tooltip } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
@@ -12,7 +12,7 @@ type ActionButtonProps = {
 };
 
 // TODO: Dirty port from stable
-export const FooterButtonComponent = (props: ActionButtonProps) => {
+export default function (props: ActionButtonProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -35,4 +35,4 @@ export const FooterButtonComponent = (props: ActionButtonProps) => {
 			/>
 		</Tooltip>
 	);
-};
+}
diff --git a/src/component/editor/FooterComponent.tsx b/src/component/editor/FooterComponent.tsx
@@ -1,5 +1,5 @@
-import { FooterButtonComponent } from '@/component/editor/FooterButtonComponent';
-import useThemeValues from '@/hook/useThemeValue';
+import FooterButtonComponent from '@/component/editor/FooterButtonComponent';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, useToast } from '@chakra-ui/react';
 import { type Dispatch, type SetStateAction, useState } from 'react';
@@ -14,7 +14,7 @@ type ControlsProps = {
 };
 
 // TODO: Dirty port from stable
-export const FooterComponent = (props: ControlsProps) => {
+export default function (props: ControlsProps) {
 	const { getThemeValue } = useThemeValues();
 	const [isSaveLoading, setIsSaveLoading] = useState(false);
 	const toast = useToast();
@@ -68,4 +68,4 @@ export const FooterComponent = (props: ControlsProps) => {
 			/>
 		</Flex>
 	);
-};
+}
diff --git a/src/component/editor/HeaderComponent.tsx b/src/component/editor/HeaderComponent.tsx
@@ -1,5 +1,5 @@
-import { HeaderLabelComponent } from '@/component/editor/HeaderLabelComponent';
-import useThemeValues from '@/hook/useThemeValue';
+import HeaderLabelComponent from '@/component/editor/HeaderLabelComponent';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, Show } from '@chakra-ui/react';
 import { MdClass } from 'react-icons/md';
@@ -10,7 +10,7 @@ export type HeaderProps = {
 	columnNumber: number;
 };
 
-export const HeaderComponent = (props: HeaderProps) => {
+export default function (props: HeaderProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -36,4 +36,4 @@ export const HeaderComponent = (props: HeaderProps) => {
 			</Show>
 		</Flex>
 	);
-};
+}
diff --git a/src/component/editor/HeaderLabelComponent.tsx b/src/component/editor/HeaderLabelComponent.tsx
@@ -1,4 +1,4 @@
-import useThemeValues from '@/hook/useThemeValue';
+import { useThemeValues } from '@/hook/useThemeValue';
 import { ThemePalette } from '@/utils/themes';
 import { Flex, Text } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
@@ -9,7 +9,7 @@ type HeaderLabelProps = {
 	onClick?: () => WindowProxy | null;
 };
 
-export const HeaderLabelComponent = (props: HeaderLabelProps) => {
+export default function (props: HeaderLabelProps) {
 	const { getThemeValue } = useThemeValues();
 
 	return (
@@ -28,4 +28,4 @@ export const HeaderLabelComponent = (props: HeaderLabelProps) => {
 			<Text color={getThemeValue(ThemePalette.TextMuted)}>{props.label}</Text>
 		</Flex>
 	);
-};
+}
diff --git a/src/hook/useTheme.ts b/src/hook/useTheme.ts
@@ -2,7 +2,7 @@ import { themeStore } from '@/utils/store';
 import { themes } from '@/utils/themes';
 import { useColorMode } from '@chakra-ui/react';
 
-export default function useTheme() {
+export function useTheme() {
 	const { themeId, setThemeId } = themeStore();
 	const { colorMode, toggleColorMode } = useColorMode();
 

diff --git a/src/hook/useThemeValue.ts b/src/hook/useThemeValue.ts
@@ -1,7 +1,7 @@
 import { themeStore } from '@/utils/store';
 import { type ThemePaletteKey, themes } from '@/utils/themes';
 
-export default function useThemeValues() {
+export function useThemeValues() {
 	const { themeId } = themeStore();
 
 	const theme = themes.find((theme) => theme.id === themeId) ?? themes[0];

diff --git a/src/screen/EditorScreen.tsx b/src/screen/EditorScreen.tsx
@@ -1,16 +1,18 @@
 'use client';
 
-import { EditorComponent } from '@/component/editor/EditorComponent';
-import { FooterComponent } from '@/component/editor/FooterComponent';
-import { HeaderComponent, type HeaderProps } from '@/component/editor/HeaderComponent';
+import FooterComponent from '@/component/editor/FooterComponent';
+import HeaderComponent, { type HeaderProps } from '@/component/editor/HeaderComponent';
+import dynamic from 'next/dynamic';
 import { useState } from 'react';
 
+const EditorComponent = dynamic(() => import('@/component/editor/EditorComponent'));
+
 type EditorScreenProps = {
 	documentName?: string;
 	enableEdit?: boolean;
 };
 
-export const EditorScreen = ({ documentName, enableEdit = false }: EditorScreenProps) => {
+export default function ({ documentName, enableEdit = false }: EditorScreenProps) {
 	const [position, setPosition] = useState<HeaderProps>({
 		lineNumber: 1,
 		columnNumber: 1
@@ -40,4 +42,4 @@ export const EditorScreen = ({ documentName, enableEdit = false }: EditorScreenP
 			/>
 		</div>
 	);
-};
+}