From e253e5927c968a3e3cdbb5e2e39bf1b4f05db9b3 Mon Sep 17 00:00:00 2001 From: bepyan Date: Mon, 19 Aug 2024 13:18:24 +0900 Subject: [PATCH 1/4] refactor: switch --- src/components/editor/elements/recursive.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/editor/elements/recursive.tsx b/src/components/editor/elements/recursive.tsx index 706a3fe..ab72b08 100644 --- a/src/components/editor/elements/recursive.tsx +++ b/src/components/editor/elements/recursive.tsx @@ -10,9 +10,7 @@ import type { EditorElement } from "~/components/editor/type"; export default function Recursive({ element }: { element: EditorElement }) { switch (element.type) { case "__body": - return ; case "container": - return ; case "2Col": return ; case "blank": From f7853936b17e8ee0eb21ad5355a5bf1176b36d07 Mon Sep 17 00:00:00 2001 From: bepyan Date: Mon, 19 Aug 2024 14:56:32 +0900 Subject: [PATCH 2/4] refactor: editor data --- src/app/(main)/i/[subdomain]/page.tsx | 7 +- src/app/(playground)/pg/editor/page.tsx | 108 ++++++++++++------------ src/components/editor/action.ts | 68 ++++++++------- src/components/editor/constant.ts | 4 +- src/components/editor/main.tsx | 7 +- src/components/editor/type.ts | 4 +- 6 files changed, 105 insertions(+), 93 deletions(-) diff --git a/src/app/(main)/i/[subdomain]/page.tsx b/src/app/(main)/i/[subdomain]/page.tsx index a1959d1..60fac29 100644 --- a/src/app/(main)/i/[subdomain]/page.tsx +++ b/src/app/(main)/i/[subdomain]/page.tsx @@ -46,10 +46,9 @@ export default async function Page({ params }: Props) { editorState={{ isPreviewMode: true }} >
- {Array.isArray(invitation.customFields) && - invitation.customFields.map((childElement) => ( - - ))} + {invitation.customFields.elements.map((childElement) => ( + + ))}
); diff --git a/src/app/(playground)/pg/editor/page.tsx b/src/app/(playground)/pg/editor/page.tsx index aea0286..ff0f69b 100644 --- a/src/app/(playground)/pg/editor/page.tsx +++ b/src/app/(playground)/pg/editor/page.tsx @@ -5,62 +5,64 @@ export default async function Page() { return ( ); } diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts index 7762ac9..13b8b22 100644 --- a/src/components/editor/action.ts +++ b/src/components/editor/action.ts @@ -64,24 +64,28 @@ export type EditorAction = { const updateEditorHistory = ( editor: Editor, - newData: Editor["data"], + data: Partial, newSelectedElement: EditorElement = emptyElement, -): Editor => ({ - ...editor, - state: { - ...editor.state, - selectedElement: newSelectedElement, - }, - data: newData, - history: { - ...editor.history, - list: [ - ...editor.history.list.slice(0, editor.history.currentIndex + 1), - [...newData], - ], - currentIndex: editor.history.currentIndex + 1, - }, -}); +): Editor => { + const newData = { ...editor.data, ...data }; + + return { + ...editor, + state: { + ...editor.state, + selectedElement: newSelectedElement, + }, + data: newData, + history: { + ...editor.history, + list: [ + ...editor.history.list.slice(0, editor.history.currentIndex + 1), + { ...newData }, + ], + currentIndex: editor.history.currentIndex + 1, + }, + }; +}; const traverseElements = ( elements: EditorElement[], @@ -175,7 +179,7 @@ const actionHandlers: { ) => Editor; } = { ADD_ELEMENT: (editor, payload) => { - const newData = traverseElements(editor.data, (element) => { + const elements = traverseElements(editor.data.elements, (element) => { if ( element.id === payload.containerId && Array.isArray(element.content) @@ -188,14 +192,14 @@ const actionHandlers: { return element; }); - return updateEditorHistory(editor, newData); + return updateEditorHistory(editor, { elements }); }, MOVE_ELEMENT: (editor, payload) => { const { elementId, newParentId, newIndex } = payload; const [elements, removedElement] = removeElementFromParent( - editor.data, + editor.data.elements, elementId, ); if (!removedElement) return editor; @@ -214,15 +218,19 @@ const actionHandlers: { }) as EditorElement[]; }; - const newData = insertElement(elements); + const newElements = insertElement(elements); - return updateEditorHistory(editor, newData, removedElement); + return updateEditorHistory( + editor, + { elements: newElements }, + removedElement, + ); }, MOVE_ELEMENT_UP: (editor, payload) => { const { elementId } = payload; const [element, parent, currentIndex] = findElementAndParent( - editor.data, + editor.data.elements, elementId, ); if ( @@ -243,7 +251,7 @@ const actionHandlers: { MOVE_ELEMENT_DOWN: (editor, payload) => { const { elementId } = payload; const [element, parent, currentIndex] = findElementAndParent( - editor.data, + editor.data.elements, elementId, ); if ( @@ -262,7 +270,7 @@ const actionHandlers: { }, UPDATE_ELEMENT: (editor, payload) => { - const newData = traverseElements(editor.data, (element) => { + const elements = traverseElements(editor.data.elements, (element) => { if (element.id === payload.elementDetails.id) { return { ...element, ...payload.elementDetails }; } @@ -275,7 +283,7 @@ const actionHandlers: { ? payload.elementDetails : editor.state.selectedElement; - return updateEditorHistory(editor, newData, newSelectedElement); + return updateEditorHistory(editor, { elements }, newSelectedElement); }, UPDATE_ELEMENT_STYLE: (editor, payload) => { @@ -291,14 +299,14 @@ const actionHandlers: { }, DELETE_ELEMENT: (editor, payload) => { - const newData = traverseElements(editor.data, (element) => { + const elements = traverseElements(editor.data.elements, (element) => { if (element.id === payload.elementDetails.id) { return null; } return element; }); - return updateEditorHistory(editor, newData); + return updateEditorHistory(editor, { elements }); }, CHANGE_CLICKED_ELEMENT: (editor, payload) => { @@ -365,7 +373,7 @@ const actionHandlers: { const nextIndex = editor.history.currentIndex + 1; return { ...editor, - data: [...editor.history.list[nextIndex]], + data: { ...editor.history.list[nextIndex] }, history: { ...editor.history, currentIndex: nextIndex, @@ -380,7 +388,7 @@ const actionHandlers: { const prevIndex = editor.history.currentIndex - 1; return { ...editor, - data: [...editor.history.list[prevIndex]], + data: { ...editor.history.list[prevIndex] }, history: { ...editor.history, currentIndex: prevIndex, diff --git a/src/components/editor/constant.ts b/src/components/editor/constant.ts index 8a6ad93..f4cccf8 100644 --- a/src/components/editor/constant.ts +++ b/src/components/editor/constant.ts @@ -59,7 +59,9 @@ export const bodyElement = { type: "__body", } satisfies EditorElement; -export const initialEditorData: EditorData = [bodyElement]; +export const initialEditorData: EditorData = { + elements: [bodyElement], +}; export const initialEditorState: EditorState = { selectedElement: emptyElement, diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx index b1d3655..0a029c3 100644 --- a/src/components/editor/main.tsx +++ b/src/components/editor/main.tsx @@ -47,10 +47,9 @@ export default function EditorMain() { )} - {Array.isArray(editor.data) && - editor.data.map((childElement) => ( - - ))} + {editor.data.elements.map((childElement) => ( + + ))} diff --git a/src/components/editor/type.ts b/src/components/editor/type.ts index 4307e56..db5cd11 100644 --- a/src/components/editor/type.ts +++ b/src/components/editor/type.ts @@ -50,7 +50,9 @@ export type EditorState = { isPreviewMode: boolean; }; -export type EditorData = EditorElement[]; +export type EditorData = { + elements: EditorElement[]; +}; export type EditorHistory = { list: EditorData[]; From 193de636df9034a0cc619ae669f0f66fd8458dfe Mon Sep 17 00:00:00 2001 From: bepyan Date: Mon, 19 Aug 2024 18:21:06 +0900 Subject: [PATCH 3/4] refactor: sidebar directory --- src/components/editor/{sidebar.tsx => sidebar/index.tsx} | 9 ++++----- .../sidebar-element-settings-tab/background-setting.tsx | 0 .../sidebar-element-settings-tab/border-setting.tsx | 0 .../sidebar-element-settings-tab/image-setting.tsx | 0 .../{ => sidebar}/sidebar-element-settings-tab/index.tsx | 0 .../sidebar-element-settings-tab/kakao-map-setting.tsx | 0 .../sidebar-element-settings-tab/layout-setting.tsx | 0 .../sidebar-element-settings-tab/logo-banner-setting.tsx | 0 .../sidebar-element-settings-tab/map-setting.tsx | 0 .../sidebar-element-settings-tab/text-setting.tsx | 0 .../editor/{ => sidebar}/sidebar-elements-tab.tsx | 0 .../editor/{ => sidebar}/sidebar-settings-tab.tsx | 0 12 files changed, 4 insertions(+), 5 deletions(-) rename src/components/editor/{sidebar.tsx => sidebar/index.tsx} (94%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/background-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/border-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/image-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/index.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/kakao-map-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/layout-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/logo-banner-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/map-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-element-settings-tab/text-setting.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-elements-tab.tsx (100%) rename src/components/editor/{ => sidebar}/sidebar-settings-tab.tsx (100%) diff --git a/src/components/editor/sidebar.tsx b/src/components/editor/sidebar/index.tsx similarity index 94% rename from src/components/editor/sidebar.tsx rename to src/components/editor/sidebar/index.tsx index a75ae39..7f6908a 100644 --- a/src/components/editor/sidebar.tsx +++ b/src/components/editor/sidebar/index.tsx @@ -1,17 +1,16 @@ "use client"; -import { Sheet, SheetContent } from "~/components/ui/sheet"; - import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs"; import { PlusIcon, SettingsIcon, WrenchIcon } from "lucide-react"; import { editorTabValue } from "~/components/editor/constant"; import { useEditor } from "~/components/editor/provider"; -import SidebarElementSettingsTab from "~/components/editor/sidebar-element-settings-tab"; -import SidebarElementsTab from "~/components/editor/sidebar-elements-tab"; -import SidebarSettingsTab from "~/components/editor/sidebar-settings-tab"; +import SidebarElementSettingsTab from "~/components/editor/sidebar/sidebar-element-settings-tab"; +import SidebarElementsTab from "~/components/editor/sidebar/sidebar-elements-tab"; +import SidebarSettingsTab from "~/components/editor/sidebar/sidebar-settings-tab"; import type { EditorTabTypeValue } from "~/components/editor/type"; import { isValidSelectEditorElement } from "~/components/editor/util"; import { Button } from "~/components/ui/button"; +import { Sheet, SheetContent } from "~/components/ui/sheet"; import { cn } from "~/lib/utils"; type Props = {}; diff --git a/src/components/editor/sidebar-element-settings-tab/background-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/background-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/background-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/background-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/border-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/border-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/border-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/border-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/image-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/image-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/image-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/image-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/index.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/index.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/kakao-map-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/kakao-map-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/kakao-map-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/kakao-map-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/layout-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/layout-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/layout-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/layout-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/logo-banner-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/logo-banner-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/logo-banner-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/logo-banner-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/map-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/map-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/map-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/map-setting.tsx diff --git a/src/components/editor/sidebar-element-settings-tab/text-setting.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/text-setting.tsx similarity index 100% rename from src/components/editor/sidebar-element-settings-tab/text-setting.tsx rename to src/components/editor/sidebar/sidebar-element-settings-tab/text-setting.tsx diff --git a/src/components/editor/sidebar-elements-tab.tsx b/src/components/editor/sidebar/sidebar-elements-tab.tsx similarity index 100% rename from src/components/editor/sidebar-elements-tab.tsx rename to src/components/editor/sidebar/sidebar-elements-tab.tsx diff --git a/src/components/editor/sidebar-settings-tab.tsx b/src/components/editor/sidebar/sidebar-settings-tab.tsx similarity index 100% rename from src/components/editor/sidebar-settings-tab.tsx rename to src/components/editor/sidebar/sidebar-settings-tab.tsx From ec74f13370a9f253379d1c92c0a06959818e4dbf Mon Sep 17 00:00:00 2001 From: bepyan Date: Mon, 19 Aug 2024 18:28:27 +0900 Subject: [PATCH 4/4] fix: import --- .../sidebar-element-settings-tab/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx b/src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx index 589dc30..ab6e0dd 100644 --- a/src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx +++ b/src/components/editor/sidebar/sidebar-element-settings-tab/index.tsx @@ -1,14 +1,14 @@ "use client"; import { useEditor } from "~/components/editor/provider"; -import BackgroundSetting from "~/components/editor/sidebar-element-settings-tab/background-setting"; -import BorderSetting from "~/components/editor/sidebar-element-settings-tab/border-setting"; -import ImageSetting from "~/components/editor/sidebar-element-settings-tab/image-setting"; -import KakaoMapSetting from "~/components/editor/sidebar-element-settings-tab/kakao-map-setting"; -import LayoutSetting from "~/components/editor/sidebar-element-settings-tab/layout-setting"; -import LogoBannerSetting from "~/components/editor/sidebar-element-settings-tab/logo-banner-setting"; -import MapSetting from "~/components/editor/sidebar-element-settings-tab/map-setting"; -import TextSetting from "~/components/editor/sidebar-element-settings-tab/text-setting"; +import BackgroundSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/background-setting"; +import BorderSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/border-setting"; +import ImageSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/image-setting"; +import KakaoMapSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/kakao-map-setting"; +import LayoutSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/layout-setting"; +import LogoBannerSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/logo-banner-setting"; +import MapSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/map-setting"; +import TextSetting from "~/components/editor/sidebar/sidebar-element-settings-tab/text-setting"; import { SheetHeader, SheetTitle } from "~/components/ui/sheet"; type Props = {};