From 8009cfbb06ba6018cf9f8abb4ad7a21944db1c21 Mon Sep 17 00:00:00 2001 From: Ivan Gabaldon Date: Sat, 10 Aug 2024 12:03:07 +0200 Subject: [PATCH] dynamic editor --- src/app/[documentName]/page.tsx | 2 +- src/app/page.tsx | 2 +- src/component/editor/EditorComponent.tsx | 4 ++-- src/component/editor/FooterButtonComponent.tsx | 6 +++--- src/component/editor/FooterComponent.tsx | 8 ++++---- src/component/editor/HeaderComponent.tsx | 8 ++++---- src/component/editor/HeaderLabelComponent.tsx | 6 +++--- src/hook/useTheme.ts | 2 +- src/hook/useThemeValue.ts | 2 +- src/screen/EditorScreen.tsx | 12 +++++++----- 10 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/app/[documentName]/page.tsx b/src/app/[documentName]/page.tsx index 460b84e..61eadef 100644 --- 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 index 5c1db9b..286a352 100644 --- 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 ; diff --git a/src/component/editor/EditorComponent.tsx b/src/component/editor/EditorComponent.tsx index 631167e..e154ca2 100644 --- 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(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 index 3dc5add..bc2e3c2 100644 --- 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) => { /> ); -}; +} diff --git a/src/component/editor/FooterComponent.tsx b/src/component/editor/FooterComponent.tsx index 6b7bbfe..4c30122 100644 --- 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) => { /> ); -}; +} diff --git a/src/component/editor/HeaderComponent.tsx b/src/component/editor/HeaderComponent.tsx index 2db83e5..535d370 100644 --- 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) => { ); -}; +} diff --git a/src/component/editor/HeaderLabelComponent.tsx b/src/component/editor/HeaderLabelComponent.tsx index e5094f1..bad899a 100644 --- 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) => { {props.label} ); -}; +} diff --git a/src/hook/useTheme.ts b/src/hook/useTheme.ts index 0aa9e63..f56f7ef 100644 --- 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 index bdd36e8..099829f 100644 --- 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 index f07f664..c729351 100644 --- 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({ lineNumber: 1, columnNumber: 1 @@ -40,4 +42,4 @@ export const EditorScreen = ({ documentName, enableEdit = false }: EditorScreenP /> ); -}; +}