From 5d7c5b765c77db15d8f448babf7f205e30825665 Mon Sep 17 00:00:00 2001 From: Yeonkyu Min Date: Wed, 13 Nov 2024 01:18:32 +0900 Subject: [PATCH] =?UTF-8?q?style:=20=EC=A7=84=EC=A7=9C=20=EB=A6=B0?= =?UTF-8?q?=ED=8A=B8=20=EC=84=A4=EC=A0=95=ED=95=A8...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/editor/Editor.tsx | 2 +- .../useMarkdownGrammer/handlers/arrow.ts | 6 +- client/src/hooks/useMarkdownGrammer/index.ts | 6 +- client/src/utils/blockNavigationUtils.ts | 85 +++++++++---------- 4 files changed, 49 insertions(+), 50 deletions(-) diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx index 80430873..e2d2af69 100644 --- a/client/src/features/editor/Editor.tsx +++ b/client/src/features/editor/Editor.tsx @@ -1,10 +1,10 @@ import { useRef, useState, useCallback, useEffect } from "react"; -import { EditorState } from "../../types/markdown"; import { Block } from "@components/block/Block"; import { useCaretManager } from "@hooks/useCaretManager"; import { useKeyboardHandlers } from "@hooks/useMarkdownGrammer"; import { LinkedListBlock } from "@utils/linkedLIstBlock"; import { checkMarkdownPattern } from "@utils/markdownPatterns"; +import { EditorState } from "../../types/markdown"; import { editorContainer, editorTitleContainer, diff --git a/client/src/hooks/useMarkdownGrammer/handlers/arrow.ts b/client/src/hooks/useMarkdownGrammer/handlers/arrow.ts index dd20dab2..f4172ae5 100644 --- a/client/src/hooks/useMarkdownGrammer/handlers/arrow.ts +++ b/client/src/hooks/useMarkdownGrammer/handlers/arrow.ts @@ -1,7 +1,7 @@ import { useCallback } from "react"; +import { handleKeyNavigation } from "@utils/blockNavigationUtils"; import { EditorNode } from "../../../types/markdown"; import { KeyHandlerProps } from "./handlerProps"; -import { handleKeyNavigation } from "@utils/blockNavigationUtils"; export const useArrowKeyHandler = ({ editorState, @@ -19,10 +19,10 @@ export const useArrowKeyHandler = ({ case "ArrowUp": case "ArrowDown": { e.preventDefault(); - + const direction = e.key === "ArrowUp" ? "prev" : "next"; targetNode = handleKeyNavigation(currentNode, direction); - + break; } } diff --git a/client/src/hooks/useMarkdownGrammer/index.ts b/client/src/hooks/useMarkdownGrammer/index.ts index d5e1fc92..e28ca1ee 100644 --- a/client/src/hooks/useMarkdownGrammer/index.ts +++ b/client/src/hooks/useMarkdownGrammer/index.ts @@ -1,9 +1,9 @@ import { useCallback } from "react"; -import { KeyHandlerProps } from "./handlers/handlerProps"; -import { useSpaceKeyHandler } from "./handlers/space"; +import { useArrowKeyHandler } from "./handlers/arrow"; import { useBackspaceKeyHandler } from "./handlers/backSpace"; import { useEnterKeyHandler } from "./handlers/enter"; -import { useArrowKeyHandler } from "./handlers/arrow"; +import { KeyHandlerProps } from "./handlers/handlerProps"; +import { useSpaceKeyHandler } from "./handlers/space"; export const useKeyboardHandlers = (props: KeyHandlerProps) => { const handleEnter = useEnterKeyHandler(props); diff --git a/client/src/utils/blockNavigationUtils.ts b/client/src/utils/blockNavigationUtils.ts index 49a5c3e4..237086d0 100644 --- a/client/src/utils/blockNavigationUtils.ts +++ b/client/src/utils/blockNavigationUtils.ts @@ -1,21 +1,21 @@ import { EditorNode } from "../types/markdown"; -type NavigationDirection = 'prev' | 'next'; +type NavigationDirection = "prev" | "next"; - // 에디터 노드 타입 체크를 위한 유틸리티 함수들 +// 에디터 노드 타입 체크를 위한 유틸리티 함수들 export const nodeTypeCheckers = { - isCheckbox: (node?: EditorNode | null): boolean => node?.type === 'checkbox', - isList: (node?: EditorNode | null): boolean => node?.type === 'ul' || node?.type === 'ol', - isListItem: (node?: EditorNode | null): boolean => node?.type === 'li', + isCheckbox: (node?: EditorNode | null): boolean => node?.type === "checkbox", + isList: (node?: EditorNode | null): boolean => node?.type === "ul" || node?.type === "ol", + isListItem: (node?: EditorNode | null): boolean => node?.type === "li", isCheckboxChild: (node: EditorNode): boolean => nodeTypeCheckers.isCheckbox(node.parentNode), }; - // 리스트 관련 유틸리티 함수들 +// 리스트 관련 유틸리티 함수들 export const listUtils = { getFirstListItem: (node: EditorNode) => node.firstChild, getLastListItem: (node: EditorNode) => { if (!node.firstChild) return null; - + let lastItem: EditorNode = node.firstChild; while (lastItem.nextSibling?.id) { lastItem = lastItem.nextSibling; @@ -24,87 +24,86 @@ export const listUtils = { }, }; - // 체크박스 자식 노드의 이동 처리 +// 체크박스 자식 노드의 이동 처리 const handleCheckboxChildNavigation = ( - currentNode: EditorNode, - direction: NavigationDirection + currentNode: EditorNode, + direction: NavigationDirection, ): EditorNode | null => { const parentCheckbox = currentNode.parentNode; - const targetNode = direction === 'prev' ? parentCheckbox?.prevNode : parentCheckbox?.nextNode; - + const targetNode = direction === "prev" ? parentCheckbox?.prevNode : parentCheckbox?.nextNode; + if (!targetNode) return null; - + if (nodeTypeCheckers.isCheckbox(targetNode)) { return targetNode.firstChild ?? null; } - + if (nodeTypeCheckers.isList(targetNode)) { - return direction === 'prev' + return direction === "prev" ? listUtils.getLastListItem(targetNode) : listUtils.getFirstListItem(targetNode); } - + return targetNode; }; - // 리스트 아이템 노드의 이동 처리 +// 리스트 아이템 노드의 이동 처리 const handleListItemNavigation = ( - currentNode: EditorNode, - direction: NavigationDirection + currentNode: EditorNode, + direction: NavigationDirection, ): EditorNode | null => { - const sibling = direction === 'prev' ? currentNode.prevSibling : currentNode.nextSibling; - + const sibling = direction === "prev" ? currentNode.prevSibling : currentNode.nextSibling; + if (sibling?.id) { return sibling; } - - const parentSibling = direction === 'prev' - ? currentNode.parentNode?.prevNode - : currentNode.parentNode?.nextNode; - + + const parentSibling = + direction === "prev" ? currentNode.parentNode?.prevNode : currentNode.parentNode?.nextNode; + if (!parentSibling) return null; - + if (nodeTypeCheckers.isCheckbox(parentSibling)) { return parentSibling.firstChild ?? null; } - + return parentSibling; }; - // 기본 블록 노드의 이동 처리 +// 기본 블록 노드의 이동 처리 const handleBasicBlockNavigation = ( - currentNode: EditorNode, - direction: NavigationDirection + currentNode: EditorNode, + direction: NavigationDirection, ): EditorNode | null => { - const targetNode = direction === 'prev' ? currentNode.prevNode : currentNode.nextNode; - + const targetNode = direction === "prev" ? currentNode.prevNode : currentNode.nextNode; + if (!targetNode) return null; - + if (nodeTypeCheckers.isCheckbox(targetNode)) { return targetNode.firstChild ?? null; } - + if (nodeTypeCheckers.isList(targetNode)) { - return direction === 'prev' + return direction === "prev" ? listUtils.getLastListItem(targetNode) : listUtils.getFirstListItem(targetNode); } - + return targetNode; }; - // 키보드 네비게이션 핸들러 -> 현재 노드와 이동 방향을 받아 다음 타겟 노드를 반환 +// 키보드 네비게이션 핸들러 -> 현재 노드와 이동 방향을 받아 다음 타겟 노드를 반환 export const handleKeyNavigation = ( - currentNode: EditorNode, - direction: NavigationDirection + currentNode: EditorNode, + direction: NavigationDirection, ): EditorNode | null => { if (nodeTypeCheckers.isCheckboxChild(currentNode)) { return handleCheckboxChildNavigation(currentNode, direction); } - + if (nodeTypeCheckers.isListItem(currentNode)) { return handleListItemNavigation(currentNode, direction); } - + return handleBasicBlockNavigation(currentNode, direction); -}; \ No newline at end of file +};