오늘의 목표

• 게시글 작성 페이지 editor 구현

수행 내역

• Post Editor 내 markdown 문법을 버튼으로 입력할 수 있는 툴바 추가
  • h1, h2, h3, bold, italic, strike through, quote 입력 기능 완료
  • link, image, code 입력 기능 추가 필요

const insertMarkdown = (prefix, suffix = '') => {
        const textarea = markdownRef.current;
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const currentContent = textarea.value;
        const selectedText = currentContent.substring(start, end);

        let newContent;
        let newCursorPosition;
        let newCursorEnd;

        // Handle line-based markdown like H1
        if (prefix.includes('#') || prefix.includes('-') || prefix.includes('>')) {
            const textBeforeCursor = currentContent.substring(0, start);
            const lastLineBreakIndex = textBeforeCursor.lastIndexOf('\\n');
            const lineStartIndex = lastLineBreakIndex === -1 ? 0 : lastLineBreakIndex + 1;
            const lineContent = currentContent.substring(lineStartIndex, start);

            if (lineContent.startsWith(prefix)) {
                newContent =
                    currentContent.substring(0, lineStartIndex) +
                    currentContent.substring(lineStartIndex + prefix.length);
                newCursorPosition = start - prefix.length;
            } else {
                newContent =
                    currentContent.substring(0, lineStartIndex) +
                    prefix +
                    currentContent.substring(lineStartIndex);
                newCursorPosition = start + prefix.length;
            }
        } else {
            // Handle inline markdown like bold and italic
            if (start !== end) {
                // If text is selected, wrap it with prefix and suffix
                newContent =
                    currentContent.substring(0, start) +
                    prefix +
                    selectedText +
                    suffix +
                    currentContent.substring(end);
                newCursorPosition = start + prefix.length + selectedText.length + suffix.length;
            } else {
                // If no text is selected, insert prefix and suffix and place cursor in the middle
                newContent =
                    currentContent.substring(0, start) +
                    prefix +
                    '텍스트' +
                    suffix +
                    currentContent.substring(end);
                newCursorPosition = start + prefix.length;
                newCursorEnd = start + prefix.length + 3;
            }
        }

        setMarkdown(newContent);

        setTimeout(() => {
            textarea.focus();
            textarea.selectionStart = newCursorPosition;
            if (prefix.includes('#') || prefix.includes('-') || prefix.includes('>')) {
                textarea.selectionEnd = newCursorPosition;
            } else {
                if (start !== end) {
                    textarea.selectionEnd = newCursorPosition;
                } else {
                    textarea.selectionEnd = newCursorEnd;
                }
            }
        }, 200);
    };

문제 및 이슈

• 없음

참고자료

• https://gist.github.com/ihoneymon/652be052a0727ad59601
• https://velog.io/write

지원요청

• 없음

내일 계획

• markdown editor의 각 요소 추가를 위한 툴바 구현
  • 링크, 이미지, 코드