Merge branch 'dev-frontend' into feat/115

Author: skid901

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

@@ -15,7 +15,7 @@ import {
   regex,
   fontSize,
   placeHolder,
-  listComponent,
+  listBlockType,
 } from '@utils/blockContent';
 import { useCommand, useManager } from '@/hooks';
 import { focusState } from '@/stores/page';
@@ -61,6 +61,7 @@ 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 draggingBlock = useRecoilValue(draggingBlockState);
   const [{ blockIndex }] = useManager(blockDTO.id);
@@ -85,6 +86,33 @@ function BlockContent(blockDTO: Block) {
     selection.collapse(selection.focusNode, caretRef.current);
   }, [blockDTO.value]);
 
+  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({
@@ -103,6 +131,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,
@@ -152,6 +193,37 @@ function BlockContent(blockDTO: Block) {
     }
   };
 
+  useEffect(() => {
+    blockRefState[blockDTO.id] = contentEditableRef;
+    return () => {
+      blockRefState[blockDTO.id] = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (focusId === blockDTO.id) contentEditableRef.current.focus();
+  }, [focusId]);
+
+  useEffect(() => {
+    const selection = window.getSelection();
+    const nodeLength = selection.focusNode?.nodeValue?.length ?? 0;
+    if (caretRef.current > nodeLength) {
+      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]);
+
   const dropDraggingBlockHandler = async () => {
     const blockId = draggingBlock?.id;
     if (!blockId || blockId === blockDTO.id) {
@@ -174,7 +246,7 @@ function BlockContent(blockDTO: Block) {
 
   return (
     <div css={blockContentCSS} onMouseUp={dropDraggingBlockHandler}>
-      {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 } from '@emotion/react';
+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 />