Markdown 및 Html 관련 에디터 플로우 변경 작업 (#316)

boostcampwm-2022 · Dec 13, 2022 · 4bc9e23 · 4bc9e23
2 parents 1b507a4 + 512d882
commit 4bc9e23
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 15 deletions.
diff --git a/frontend/components/common/Content/index.tsx b/frontend/components/common/Content/index.tsx
@@ -1,3 +1,5 @@
+import { markdown2html } from '@utils/parser';
+
 import { ContentBody, ContentTitle, ContentWrapper } from './styled';
 
 import 'highlight.js/styles/github.css';
@@ -13,7 +15,7 @@ export default function Content({ title, content }: ContentProps) {
       {title && <ContentTitle>{title}</ContentTitle>}
       <ContentBody
         dangerouslySetInnerHTML={{
-          __html: content,
+          __html: markdown2html(content),
         }}
       />
     </ContentWrapper>

diff --git a/frontend/components/edit/Editor/index.tsx b/frontend/components/edit/Editor/index.tsx
@@ -20,7 +20,6 @@ import EditBar from '@components/edit/EditBar';
 import useCodeMirror from '@components/edit/Editor/core/useCodeMirror';
 import useInput from '@hooks/useInput';
 import { IArticle } from '@interfaces';
-import { html2markdown, markdown2html } from '@utils/parser';
 
 import {
   EditorButtonWrapper,
@@ -68,7 +67,7 @@ export default function Editor({ handleModalOpen, originalArticle }: EditorProps
     if (!buffer.title && !buffer.content) return;
 
     title.setValue(buffer.title);
-    replaceDocument(html2markdown(buffer.content));
+    replaceDocument(buffer.content);
 
     setBuffer({ title: '', content: '' });
   }, [buffer]);
@@ -77,7 +76,7 @@ export default function Editor({ handleModalOpen, originalArticle }: EditorProps
     setArticle({
       ...article,
       title: title.value,
-      content: markdown2html(document),
+      content: document,
     });
   }, [title.value, document]);
 

diff --git a/frontend/components/search/ArticleList/index.tsx b/frontend/components/search/ArticleList/index.tsx
@@ -1,5 +1,6 @@
 import ArticleItem from '@components/search/ArticleItem';
 import { IArticleBook } from '@interfaces';
+import { markdown2text } from '@utils/parser';
 
 interface ArticleListProps {
   articles: IArticleBook[];
@@ -24,7 +25,7 @@ export default function ArticleList({ articles, keywords }: ArticleListProps) {
     let paddingIndex = 0;
 
     if (isFirst) {
-      const regex = /(<([^>]+)>)/g;
+      const regex = /\n/g;
 
       while (regex.test(text.slice(0, startIndex))) paddingIndex = regex.lastIndex;
     }
@@ -33,7 +34,7 @@ export default function ArticleList({ articles, keywords }: ArticleListProps) {
       <>
         {text.slice(paddingIndex, startIndex)}
         <b>{text.slice(startIndex, endIndex)}</b>
-        {highlightWord(text.slice(endIndex).replace(/(<([^>]+)>)/gi, ''), words)}
+        {highlightWord(text.slice(endIndex), words)}
       </>
     );
   };
@@ -44,7 +45,7 @@ export default function ArticleList({ articles, keywords }: ArticleListProps) {
         <ArticleItem
           key={article.id}
           title={highlightWord(article.title, keywords)}
-          content={highlightWord(article.content, keywords, true)}
+          content={highlightWord(markdown2text(article.content), keywords, true)}
           nickname={article.book.user.nickname}
           profileImage={article.book.user.profile_image}
           articleUrl={`/viewer/${article.book.id}/${article.id}`}

diff --git a/frontend/components/viewer/TOC/index.tsx b/frontend/components/viewer/TOC/index.tsx
@@ -10,6 +10,7 @@ import useBookmark from '@hooks/useBookmark';
 import { IBookScraps } from '@interfaces';
 import { TextMedium, TextSmall } from '@styles/common';
 import { FlexCenter, FlexSpaceBetween } from '@styles/layout';
+import { text2link } from '@utils/toc';
 
 import {
   TocWrapper,
@@ -93,7 +94,7 @@ export default function TOC({
                     {isArticleShown &&
                       articleToc.map((article) => (
                         <TocArticleTitle
-                          href={`#${article.title}`}
+                          href={text2link(article.title)}
                           key={article.title}
                           count={article.count}
                         >

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,14 +36,18 @@
     "react-dom": "18.2.0",
     "react-toastify": "^9.1.1",
     "recoil": "^0.7.6",
+    "rehype": "^12.0.1",
     "rehype-highlight": "^6.0.0",
     "rehype-parse": "^8.0.4",
     "rehype-remark": "^9.1.2",
+    "rehype-slug": "^5.1.0",
     "rehype-stringify": "^9.0.3",
+    "remark": "^14.0.2",
     "remark-breaks": "^3.0.2",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "remark-stringify": "^10.0.2",
+    "strip-markdown": "^5.0.0",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.4.2",
     "typescript": "4.8.4",