Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

순서 리스팅 버그 수정 #142

Merged
merged 3 commits into from
Dec 19, 2020
Merged

순서 리스팅 버그 수정 #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
505bdac
[#141] feat: 블록 타입 검증 함수 변경
YiSoJeong Dec 19, 2020
841591a
[#141] fix: 순서 리스트 넘버링
YiSoJeong Dec 19, 2020
1a6f66b
[#141] refactor: block의 type만 바뀔 때로 render수 감소
YiSoJeong Dec 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 21 additions & 24 deletions frontend/src/components/atoms/BlockContent/BlockContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
/** @jsx jsx */
/** @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import React, {
useEffect,
useRef,
KeyboardEvent,
useState,
FormEvent,
} from 'react';
import React, { useEffect, useRef, KeyboardEvent, useState } from 'react';
import { useRecoilValue, useRecoilState } from 'recoil';

import {
Expand All @@ -18,7 +12,7 @@ import {
} from '@/stores';
import { Block, BlockType } from '@/schemes';
import {
regex,
validateType,
fontSize,
placeHolder,
listBlockType,
Expand Down Expand Up @@ -94,19 +88,17 @@ function BlockContent(blockDTO: Block) {
if (focusId === blockDTO.id) contentEditableRef.current.focus();
}, [focusId]);

const upperBlocks: Array<Block> = prevSiblings?.reverse();

const isUpperBlockEqualToNumberList = (): boolean => {
if (upperBlocks.length) {
return upperBlocks[0].type === BlockType.NUMBERED_LIST;
if (prevSiblings.length) {
return prevSiblings[0].type === BlockType.NUMBERED_LIST;
}
return false;
};

const cntOfUpperNumberListBlock = (): number => {
let cnt = 0;
if (upperBlocks) {
for (const upperblock of upperBlocks) {
if (prevSiblings) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

에구.. 제가 실수록 useFamily의 prevSiblings를 reverse 로 저장하게 해놨네요...
죄송합니다 ㅎㅎㅎ;.;
수정 부탁드립니다.

for (const upperblock of prevSiblings) {
if (upperblock.type !== BlockType.NUMBERED_LIST) break;
cnt += 1;
}
Expand Down Expand Up @@ -171,31 +163,36 @@ function BlockContent(blockDTO: Block) {
const content = beforeContent
.slice(0, caretOffset)
.concat(' ', beforeContent.slice(caretOffset));
const newType = Object.entries(regex).find((testRegex) =>
testRegex[1].test(content),
);

const newType = validateType(content.split(' ', 1)[0]);
if (newType) {
event.preventDefault();
if (newType[0] === BlockType.NUMBERED_LIST) {
if (!blockIndex && content[0] !== FIRST_LIST_NUMBER) return;
if (newType === BlockType.NUMBERED_LIST) {
const frontContent = content
.split(' ', 1)[0]
.slice(0, content.length - 2);
if (!blockIndex && frontContent !== FIRST_LIST_NUMBER) {
return;
}
if (blockIndex) {
const numberListUpperBlock = isUpperBlockEqualToNumberList();
if (!numberListUpperBlock && content[0] !== FIRST_LIST_NUMBER)
if (!numberListUpperBlock && frontContent !== FIRST_LIST_NUMBER) {
return;
}
if (
numberListUpperBlock &&
cntOfUpperNumberListBlock() + 1 !== +content[0]
)
cntOfUpperNumberListBlock() + 1 !== +frontContent
) {
return;
}
}
}
const slicedContent = content.slice(
content.indexOf(' ') + 1,
content.length,
);
contentEditableRef.current.innerText = slicedContent;
await handleBlock(slicedContent, newType[0] as BlockType);
await handleBlock(slicedContent, newType);
}
} else if (event.key === '/') {
let nowLetterIdx = window.getSelection().focusOffset;
Expand Down Expand Up @@ -250,7 +247,7 @@ function BlockContent(blockDTO: Block) {
listCnt.current = cntOfUpperNumberListBlock() + 1;
}
}
}, [blockDTO.value]);
}, [blockDTO.type]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영 감사합니다. :)


const dragOverHandler = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.dropEffect = 'move';
Expand Down
25 changes: 18 additions & 7 deletions frontend/src/utils/blockContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,24 @@ 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: /^\d.\s[^\s.]*/gm,
togglelist: /^>\s[^\s.]*/gm,
quote: /^\|\s[^\s.]*/gm,
heading1: /^#/gm,
heading2: /^##/gm,
heading3: /^###/gm,
bulletedlist: /^[-,+]/gm,
numberedlist: /^\d+\./gm,
togglelist: /^>/gm,
quote: /^\|/gm,
};

export const validateType = (content: string): BlockType => {
if (content === '#') return BlockType.HEADING1;
if (content === '##') return BlockType.HEADING2;
if (content === '###') return BlockType.HEADING3;
if (content === '-' || content === '+') return BlockType.BULLETED_LIST;
if (/^\d+\./gm.test(content)) return BlockType.NUMBERED_LIST;
if (content === '>') return BlockType.TOGGLE_LIST;
if (content === '|') return BlockType.QUOTE;
return null;
};
Comment on lines 8 to 27
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

regex 와 validateType 내 조건문을 함수로 만들어서 하나의 객체로 만들 수 있을거 같은데,
나중에 고려해 보시면 좋을 것 같아요.

// 예시
const typeValidator = {
  [ BlockType.HEADING1 ]: { regex: /^#/gm, validator: content => content === '#' };
};

const validateType = (content: string): BlockType => {
  for (const [key, { validator }] of Object.entries(typeValidator)) {
    if(validator(content)) return key;
  }
  return null;
};

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Good


const divCSS = css`
Expand Down