Merge branch 'dev-frontend' of https://github.com/boostcamp-2020/Project18-C-Bootion into feat/118

Author: YiSoJeong

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

@@ -4,13 +4,13 @@ import { jsx, css, SerializedStyles } from '@emotion/react';
 import { useEffect, useRef, FormEvent, KeyboardEvent } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { blockMapState, blockRefState, throttleState } from '@/stores';
+import { blockRefState, throttleState, blockMapState } from '@/stores';
 import { Block, BlockType } from '@/schemes';
 import {
   regex,
   fontSize,
   placeHolder,
-  listComponent,
+  listBlockType,
 } from '@utils/blockContent';
 import { useCommand } from '@/hooks';
 import { focusState } from '@/stores/page';
@@ -55,8 +55,36 @@ function BlockContent(blockDTO: Block) {
   const [blockMap, setBlockMap] = useRecoilState(blockMapState);
   const focusId = useRecoilValue(focusState);
   const caretRef = useRef(0);
+  const listCnt = useRef(1);
   const [Dispatcher] = useCommand();
 
+  const indexInSibling: number = blockMap[
+    blockDTO.parentId
+  ].childIdList.findIndex((childId: string) => childId === blockDTO.id);
+
+  const upperBlocks: Array<Block> = blockMap[blockDTO.parentId].childIdList
+    .map((childId: any) => blockMap[childId])
+    .slice(0, indexInSibling)
+    .reverse();
+
+  const isUpperBlockEqualToNumberList = (): boolean => {
+    if (upperBlocks.length) {
+      return upperBlocks[0].type === BlockType.NUMBERED_LIST;
+    }
+    return false;
+  };
+
+  const cntOfUpperNumberListBlock = (): number => {
+    let cnt = 0;
+    for (const upperblock of upperBlocks) {
+      if (upperblock.type !== BlockType.NUMBERED_LIST) break;
+      cnt += 1;
+    }
+    return cnt;
+  };
+
+  const FIRST_LIST_NUMBER = '1';
+
   const handleBlock = (value: string, type?: BlockType) =>
     type
       ? setBlockMap({
@@ -75,6 +103,19 @@ function BlockContent(blockDTO: Block) {
     );
 
     if (newType) {
+      if (newType[0] === BlockType.NUMBERED_LIST) {
+        if (!indexInSibling && content[0] !== FIRST_LIST_NUMBER) return;
+        if (indexInSibling) {
+          const numberListUpperBlock = isUpperBlockEqualToNumberList();
+          if (!numberListUpperBlock && content[0] !== FIRST_LIST_NUMBER) return;
+          if (
+            numberListUpperBlock &&
+            cntOfUpperNumberListBlock() + 1 !== +content[0]
+          )
+            return;
+        }
+      }
+
       handleBlock(
         content.slice(content.indexOf(' ') + 1, content.length),
         newType[0] as BlockType,
@@ -142,11 +183,22 @@ function BlockContent(blockDTO: Block) {
       caretRef.current = nodeLength;
     }
     selection.collapse(selection.focusNode, caretRef.current);
+
+    if (blockDTO.type === BlockType.NUMBERED_LIST) {
+      const numberListUpperBlock = isUpperBlockEqualToNumberList();
+      if (!indexInSibling || !numberListUpperBlock) {
+        listCnt.current = 1;
+        return;
+      }
+      if (numberListUpperBlock) {
+        listCnt.current = cntOfUpperNumberListBlock() + 1;
+      }
+    }
   }, [blockDTO.value]);
 
   return (
     <div css={blockContentCSS}>
-      {listComponent[blockDTO.type]}
+      {listBlockType(blockDTO, listCnt.current)}
       <div
         ref={contentEditableRef}
         css={editableDivCSS(blockDTO)}

frontend/src/utils/blockContent.tsx

@@ -1,18 +1,27 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
+
+import { Block, BlockType } from '@/schemes';
 import { ReactComponent as Toggle } from '@assets/toggle-default.svg';
 
 export const regex: { [key: string]: RegExp } = {
   heading1: /^#\s[^\s.]*/gm,
   heading2: /^##\s[^\s.]*/gm,
   heading3: /^###\s[^\s.]*/gm,
   bulletedlist: /^-\s[^\s.]*/gm,
-  numberedlist: /^1.\s[^\s.]*/gm,
+  numberedlist: /^\d.\s[^\s.]*/gm,
   togglelist: /^>\s[^\s.]*/gm,
   quote: /^\|\s[^\s.]*/gm,
 };
 
+export const listBlockType = (block: Block, idx: number) => {
+  if (block.type === BlockType.NUMBERED_LIST) {
+    return <span>{`${idx}. `}</span>;
+  }
+  return listComponent[block.type];
+};
+
 const divCSS = css`
   margin: 0px 4px;
   font-size: 18px;
@@ -22,7 +31,6 @@ const divCSS = css`
 
 export const listComponent: { [key: string]: any } = {
   bulletedlist: <div css={divCSS}>•</div>,
-  numberedlist: <div css={divCSS}> 1. </div>,
   togglelist: (
     <div css={divCSS}>
       <Toggle />