Merge branch 'dev-frontend' into feat/115

Author: skid901

frontend/src/components/atoms/BlockContent/BlockContent.tsx

@@ -25,7 +25,7 @@ import {
 } from '@utils/blockContent';
 import { useCommand, useManager } from '@/hooks';
 import { focusState } from '@/stores/page';
-import { moveBlock } from '@/utils';
+import { moveBlock, updateBlock } from '@/utils';
 
 const isGridOrColumn = (block: Block): boolean =>
   block.type === BlockType.GRID || block.type === BlockType.COLUMN;
@@ -77,6 +77,7 @@ function BlockContent(blockDTO: Block) {
   const caretRef = useRef(0);
   const listCnt = useRef(1);
   const [Dispatcher] = useCommand();
+  const [isBlur, setIsBlur] = useState(false);
   const draggingBlock = useRecoilValue(draggingBlockState);
   const [{ blockIndex }] = useManager(blockDTO.id);
   const [dragOverToggle, setDragOverToggle] = useState(false);
@@ -197,17 +198,26 @@ function BlockContent(blockDTO: Block) {
       (event.key === 'ArrowRight' &&
         focusOffset ===
           ((focusNode as any).length ?? (focusNode as any).innerText.length)) ||
-      (event.key === 'Enter' && !event.shiftKey)
+      (event.key === 'Enter' && !event.shiftKey) ||
+      event.key === 'Tab' ||
+      (event.key === 'Backspace' && !focusOffset)
     ) {
       throttleState.isThrottle = true;
       event.preventDefault();
       setImmediate(() => {
-        Dispatcher(event.key);
+        Dispatcher((event.shiftKey ? 'shift' : '') + event.key);
         throttleState.isThrottle = false;
       });
     }
   };
 
+  useEffect(() => {
+    (async () => {
+      const { block: updatedBlock } = await updateBlock(blockDTO);
+      setBlockMap({ ...blockMap, [blockDTO.id]: updatedBlock });
+    })();
+  }, [isBlur]);
+
   useEffect(() => {
     blockRefState[blockDTO.id] = contentEditableRef;
     return () => {
@@ -288,6 +298,7 @@ function BlockContent(blockDTO: Block) {
         placeholder={placeHolder[blockDTO.type]}
         onInput={handleValue}
         onKeyUp={handleKeyUp}
+        onBlur={() => setIsBlur(!isBlur)}
       >
         {blockDTO.value}
       </div>

frontend/src/components/molecules/Title/Title.tsx

@@ -39,12 +39,11 @@ const titleCss = () => css`
 
   font-family: inter, Helvetica, 'Apple Color Emoji', Arial, sans-serif,
     'Segoe UI Emoji', 'Segoe UI Symbol';
-  
+
   &:empty:before {
     content: 'Untitled';
     color: rgba(55, 53, 47, 0.15);
   }
-}
 `;
 
 function Title(): JSX.Element {

frontend/src/hooks/useCommand.tsx

@@ -6,15 +6,19 @@ import { Block, BlockType } from '@/schemes';
 const useCommand = () => {
   const [focusId, setFocusId] = useRecoilState(focusState);
   const [
-    { block, blockIndex },
+    { block, blockIndex, siblingsIdList, parent, grandParent, blockMap },
     {
       getPrevBlock,
       getNextBlock,
-      addChild,
-      addSibling,
+      insertSibling,
+      insertNewChild,
+      insertNewSibling,
       setBlock,
+      pullIn,
+      pullOut,
       startTransaction,
       commitTransaction,
+      deleteBlock,
     },
   ] = useManager(focusId);
 
@@ -74,10 +78,10 @@ const useCommand = () => {
         const { focusOffset } = window.getSelection();
         startTransaction();
         if (!focusOffset) {
-          addSibling({}, blockIndex);
+          insertNewSibling({}, blockIndex);
         } else if (block.childIdList.length) {
-          setBlock({ value: before });
-          const newBlock = addChild({ value: after });
+          setBlock(block.id, { value: before });
+          const newBlock = insertNewChild({ value: after });
           setFocus(newBlock);
         } else {
           const type = [
@@ -87,13 +91,52 @@ const useCommand = () => {
           ].includes(block.type)
             ? block.type
             : BlockType.TEXT;
-          setBlock({ value: before });
-          const newBlock = addSibling({ value: after, type });
+          setBlock(block.id, { value: before });
+          const newBlock = insertNewSibling({ value: after, type });
           setFocus(newBlock);
         }
         commitTransaction();
         break;
       }
+      case 'Tab': {
+        startTransaction();
+        pullIn();
+        commitTransaction();
+        break;
+      }
+      case 'shiftTab': {
+        startTransaction();
+        pullOut();
+        commitTransaction();
+        break;
+      }
+      case 'Backspace': {
+        startTransaction();
+        if (block.type !== BlockType.TEXT) {
+          setBlock(block.id, { type: BlockType.TEXT });
+        } else if (
+          siblingsIdList.length - 1 === blockIndex &&
+          grandParent &&
+          grandParent.type !== BlockType.GRID
+        ) {
+          pullOut();
+        } else {
+          const [, after] = getSlicedValueToCaretOffset();
+          const prevBlock = getPrevBlock();
+          if (prevBlock) {
+            const deletedBlockChildrenIdList = deleteBlock();
+            deletedBlockChildrenIdList.forEach((id, index) =>
+              insertSibling(id, index),
+            );
+            setFocus(
+              setBlock(prevBlock.id, { value: prevBlock.value + after }),
+            );
+            setCaretOffset(prevBlock.value.length);
+          }
+        }
+        commitTransaction();
+        break;
+      }
     }
   };
   return [dispatcher];

frontend/src/hooks/useFamily.tsx

@@ -41,11 +41,19 @@ const useFamily = (blockId: string): [BlockFamily, FamilyFunc] => {
       return children[0];
     }
     if (blockIndex !== siblings.length - 1) {
-      /** 자식이 없고 마지막 자식이 아니므로 다음 형제가 다음 Block 이다.  */
-      return siblings[blockIndex + 1];
+      const nextSibling = siblings[blockIndex + 1];
+      switch (nextSibling.type) {
+        case BlockType.COLUMN:
+          return blockMap[nextSibling.childIdList[0]];
+        case BlockType.GRID:
+          return blockMap[blockMap[nextSibling.childIdList[0]].childIdList[0]];
+        default:
+          /** 다음 부모의 타입이 COLUMN이나 GRID가 아니면 다음 Block 이다. */
+          return nextSibling;
+      }
     }
     /* block이 마지막 자식일 때. 다음 부모가 다음 Block 이다. */
-    const targetParentBlock = parents[parentIndex + 1];
+    const targetParentBlock = parents?.[parentIndex + 1];
     if (!targetParentBlock) {
       /** 현재 블록이 마지막 블록이다. */
       return null;
@@ -70,10 +78,8 @@ const useFamily = (blockId: string): [BlockFamily, FamilyFunc] => {
       /** blockIndex가 0이 아니면 이전 형제에서 prev block을 찾을 수 있다. */
       const prevSibling = siblings[blockIndex - 1];
       if (prevSibling?.childIdList.length) {
-        /* 이전 형제에게 자식이 있다면 마지막 자식이 prev block 이다.  */
-        return blockMap[
-          prevSibling.childIdList[prevSibling.childIdList.length - 1]
-        ];
+        /* 이전 형제에게 자식이 있다면 마지막 후손이 prev block 이다.  */
+        return findLastDescendant(prevSibling);
       }
       /* 이전 형제에게 자식이 없다면 형제가 prev block 이다.  */
       return prevSibling;

frontend/src/hooks/useManager.tsx

@@ -2,11 +2,15 @@ import { Block, BlockType, BlockFamily, FamilyFunc, BlockMap } from '@/schemes';
 import { useFamily } from '@/hooks';
 
 interface ManagerFunc {
-  addChild: (option?: any, insertIndex?: number) => Block;
-  addSibling: (option?: any, insertIndex?: number) => Block;
-  setBlock: (option?: any) => void;
+  insertNewChild: (option?: any, insertIndex?: number) => Block;
+  insertNewSibling: (option?: any, insertIndex?: number) => Block;
+  insertSibling: (id: string, inserIndex?: number) => Block;
+  setBlock: (id: string, option?: any) => Block;
   startTransaction: () => void;
   commitTransaction: () => void;
+  pullIn: () => Block;
+  pullOut: () => Block;
+  deleteBlock: () => string[];
 }
 
 const useManger = (
@@ -36,13 +40,15 @@ const useManger = (
     familyFunc.setBlockMap(transaction);
   };
 
-  const setBlock = (option: any = {}) => {
-    transaction[block.id] = {
-      ...block,
+  const setBlock = (id: string, option: any = {}) => {
+    transaction[id] = {
+      ...transaction[id],
       ...option,
     };
+    return transaction[id];
   };
-  const addChild = (option: any = {}, insertIndex = 0): Block => {
+
+  const insertNewChild = (option: any = {}, insertIndex = 0): Block => {
     const id = `${block.id}${children.length + 1}_${Date.now()}`;
     const newBlock: Block = {
       id,
@@ -53,17 +59,28 @@ const useManger = (
       pageId: page.id,
       ...option,
     };
-    transaction[id] = newBlock;
+    setBlock(id, newBlock);
     const copyChildIdList = [...childrenIdList];
     copyChildIdList.splice(insertIndex, 0, id);
-    transaction[block.id] = {
-      ...transaction[block.id],
+    setBlock(block.id, {
       childIdList: copyChildIdList,
-    };
+    });
     return newBlock;
   };
 
-  const addSibling = (
+  const insertSibling = (id: string, insertIndex: number = 0) => {
+    const copySiblingsIdList = transaction[parent.id].childIdList;
+    copySiblingsIdList.splice(insertIndex, 0, id);
+    setBlock(parent.id, {
+      childrenIdList: copySiblingsIdList,
+    });
+    setBlock(id, {
+      parentId: parent.id,
+    });
+    return transaction[id];
+  };
+
+  const insertNewSibling = (
     option: any = {},
     insertIndex = blockIndex + 1,
   ): Block => {
@@ -80,22 +97,58 @@ const useManger = (
     transaction[id] = newBlock;
     const copySiblingsIdList = [...siblingsIdList];
     copySiblingsIdList.splice(insertIndex, 0, id);
-    transaction[parent.id] = {
-      ...parent,
+    setBlock(parent.id, {
       childIdList: copySiblingsIdList,
-    };
+    });
     return newBlock;
   };
 
+  const deleteBlock = () => {
+    const filteredSiblingsIdList = siblingsIdList.filter(
+      (id) => id !== block.id,
+    );
+    setBlock(parent.id, {
+      childIdList: filteredSiblingsIdList,
+    });
+    return [...transaction[block.id].childIdList];
+  };
+
+  const pullIn = () => {
+    if (blockIndex) {
+      const targetSibling = siblings[blockIndex - 1];
+      setBlock(siblingsIdList[blockIndex - 1], {
+        childIdList: [...targetSibling.childIdList, block.id],
+      });
+      deleteBlock();
+      setBlock(block.id, { parentId: siblingsIdList[blockIndex - 1] });
+    }
+    return block;
+  };
+
+  const pullOut = () => {
+    if (grandParent && grandParent.type !== BlockType.GRID) {
+      deleteBlock();
+      const copyParentsIdList = [...parentsIdList];
+      copyParentsIdList.splice(parentIndex + 1, 0, block.id);
+      setBlock(block.id, { parentId: grandParent.id });
+      setBlock(grandParent.id, { childIdList: copyParentsIdList });
+    }
+    return block;
+  };
+
   return [
     family,
     {
       ...familyFunc,
-      addChild,
-      addSibling,
+      insertNewChild,
+      insertNewSibling,
+      insertSibling,
       setBlock,
       startTransaction,
       commitTransaction,
+      pullIn,
+      pullOut,
+      deleteBlock,
     },
   ];
 };