refactor: return jsx element instead of string in marked (#910)

* refactor: return jsx element instead of string in marked * chore: update
usememos · Jan 6, 2023 · 0f8ce3d · 0f8ce3d
1 parent 491859b
commit 0f8ce3d
Show file tree

Hide file tree

Showing 42 changed files with 417 additions and 637 deletions.
diff --git a/web/src/components/CreateTagDialog.tsx b/web/src/components/CreateTagDialog.tsx
@@ -2,6 +2,7 @@ import { TextField } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { useTagStore } from "../store/module";
 import { getTagSuggestionList } from "../helpers/api";
+import { matcher } from "../labs/marked/matcher";
 import Tag from "../labs/marked/parser/Tag";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
@@ -10,7 +11,7 @@ import { generateDialog } from "./Dialog";
 type Props = DialogProps;
 
 const validateTagName = (tagName: string): boolean => {
-  const matchResult = Tag.matcher(`#${tagName}`);
+  const matchResult = matcher(`#${tagName}`, Tag.regexp);
   if (!matchResult || matchResult[1] !== tagName) {
     return false;
   }

diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
@@ -15,7 +15,6 @@ import "../less/memo.less";
 
 interface Props {
   memo: Memo;
-  highlightWord?: string;
 }
 
 export const getFormatedMemoTimeStr = (time: number, locale = "en"): string => {
@@ -27,7 +26,7 @@ export const getFormatedMemoTimeStr = (time: number, locale = "en"): string => {
 };
 
 const Memo: React.FC<Props> = (props: Props) => {
-  const { memo, highlightWord } = props;
+  const { memo } = props;
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const editorStore = useEditorStore();
@@ -143,9 +142,6 @@ const Memo: React.FC<Props> = (props: Props) => {
       if (imgUrl) {
         showPreviewImageDialog([imgUrl], 0);
       }
-    } else if (targetEl.tagName === "BUTTON" && targetEl.className === "codeblock-copy-btn") {
-      copy(targetEl.parentElement?.children[1].textContent ?? "");
-      toastHelper.success(t("message.succeed-copy-code"));
     }
   };
 
@@ -228,7 +224,6 @@ const Memo: React.FC<Props> = (props: Props) => {
       </div>
       <MemoContent
         content={memo.content}
-        highlightWord={highlightWord}
         onMemoContentClick={handleMemoContentClick}
         onMemoContentDoubleClick={handleMemoContentDoubleClick}
       />

diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
 import { marked } from "../labs/marked";
-import { highlightWithWord } from "../labs/highlighter";
 import Icon from "./Icon";
 import "../less/memo-content.less";
 
@@ -12,7 +11,6 @@ export interface DisplayConfig {
 
 interface Props {
   content: string;
-  highlightWord?: string;
   className?: string;
   displayConfig?: Partial<DisplayConfig>;
   onMemoContentClick?: (e: React.MouseEvent) => void;
@@ -30,14 +28,14 @@ const defaultDisplayConfig: DisplayConfig = {
 };
 
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, content, highlightWord, onMemoContentClick, onMemoContentDoubleClick } = props;
+  const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props;
+  const { t } = useTranslation();
+  const userStore = useUserStore();
+  const user = userStore.state.user;
   const foldedContent = useMemo(() => {
     const firstHorizontalRuleIndex = content.search(/^---$|^\*\*\*$|^___$/m);
     return firstHorizontalRuleIndex !== -1 ? content.slice(0, firstHorizontalRuleIndex) : content;
   }, [content]);
-  const { t } = useTranslation();
-  const userStore = useUserStore();
-  const user = userStore.state.user;
 
   const [state, setState] = useState<State>({
     expandButtonStatus: -1,
@@ -97,10 +95,9 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
-        dangerouslySetInnerHTML={{
-          __html: highlightWithWord(marked(state.expandButtonStatus === 0 ? foldedContent : content), highlightWord),
-        }}
-      ></div>
+      >
+        {marked(state.expandButtonStatus === 0 ? foldedContent : content)}
+      </div>
       {state.expandButtonStatus !== -1 && (
         <div className="expand-btn-container">
           <span className={`btn ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>

diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
@@ -19,7 +19,6 @@ const MemoList = () => {
   const memoDisplayTsOption = userStore.state.user?.setting.memoDisplayTsOption;
   const { memos, isFetching } = memoStore.state;
   const [isComplete, setIsComplete] = useState<boolean>(false);
-  const [highlightWord, setHighlightWord] = useState<string | undefined>("");
 
   const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId, visibility } = query ?? {};
   const shortcut = shortcutId ? shortcutStore.getShortcutById(shortcutId) : null;
@@ -107,7 +106,6 @@ const MemoList = () => {
     if (pageWrapper) {
       pageWrapper.scrollTo(0, 0);
     }
-    setHighlightWord(query?.text);
   }, [query]);
 
   useEffect(() => {
@@ -136,7 +134,7 @@ const MemoList = () => {
   return (
     <div className="memo-list-container">
       {sortedMemos.map((memo) => (
-        <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} highlightWord={highlightWord} />
+        <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} />
       ))}
       {isFetching ? (
         <div className="status-text-container fetching-tip">

diff --git a/web/src/labs/highlighter/index.ts b/web/src/labs/highlighter/index.ts
diff --git a/web/src/labs/marked/index.ts → web/src/labs/marked/index.tsx b/web/src/labs/marked/index.ts → web/src/labs/marked/index.tsx
@@ -1,21 +1,36 @@
+import { matcher } from "./matcher";
 import { blockElementParserList, inlineElementParserList } from "./parser";
 
-export const marked = (markdownStr: string, blockParsers = blockElementParserList, inlineParsers = inlineElementParserList): string => {
+export const marked = (
+  markdownStr: string,
+  blockParsers = blockElementParserList,
+  inlineParsers = inlineElementParserList
+): string | JSX.Element => {
   for (const parser of blockParsers) {
-    const matchResult = parser.matcher(markdownStr);
+    const matchResult = matcher(markdownStr, parser.regexp);
     if (!matchResult) {
       continue;
     }
     const matchedStr = matchResult[0];
     const retainContent = markdownStr.slice(matchedStr.length);
 
     if (parser.name === "br") {
-      return parser.renderer(matchedStr) + marked(retainContent, blockParsers, inlineParsers);
+      return (
+        <>
+          {parser.renderer(matchedStr)}
+          {marked(retainContent, blockParsers, inlineParsers)}
+        </>
+      );
     } else {
       if (retainContent === "") {
         return parser.renderer(matchedStr);
       } else if (retainContent.startsWith("\n")) {
-        return parser.renderer(matchedStr) + marked(retainContent.slice(1), blockParsers, inlineParsers);
+        return (
+          <>
+            {parser.renderer(matchedStr)}
+            {marked(retainContent.slice(1), blockParsers, inlineParsers)}
+          </>
+        );
       }
     }
   }
@@ -24,7 +39,7 @@ export const marked = (markdownStr: string, blockParsers = blockElementParserLis
   let matchedIndex = -1;
 
   for (const parser of inlineParsers) {
-    const matchResult = parser.matcher(markdownStr);
+    const matchResult = matcher(markdownStr, parser.regexp);
     if (!matchResult) {
       continue;
     }
@@ -41,17 +56,23 @@ export const marked = (markdownStr: string, blockParsers = blockElementParserLis
   }
 
   if (matchedInlineParser) {
-    const matchResult = matchedInlineParser.matcher(markdownStr);
+    const matchResult = matcher(markdownStr, matchedInlineParser.regexp);
     if (matchResult) {
       const matchedStr = matchResult[0];
       const matchedLength = matchedStr.length;
       const prefixStr = markdownStr.slice(0, matchedIndex);
       const suffixStr = markdownStr.slice(matchedIndex + matchedLength);
-      return marked(prefixStr, [], inlineParsers) + matchedInlineParser.renderer(matchedStr) + marked(suffixStr, [], inlineParsers);
+      return (
+        <>
+          {marked(prefixStr, [], inlineParsers)}
+          {matchedInlineParser.renderer(matchedStr)}
+          {marked(suffixStr, [], inlineParsers)}
+        </>
+      );
     }
   }
 
-  return markdownStr;
+  return <>{markdownStr}</>;
 };
 
 interface MatchedNode {
@@ -64,7 +85,7 @@ export const getMatchedNodes = (markdownStr: string): MatchedNode[] => {
 
   const walkthough = (markdownStr: string, blockParsers = blockElementParserList, inlineParsers = inlineElementParserList): string => {
     for (const parser of blockParsers) {
-      const matchResult = parser.matcher(markdownStr);
+      const matchResult = matcher(markdownStr, parser.regexp);
       if (!matchResult) {
         continue;
       }
@@ -79,6 +100,7 @@ export const getMatchedNodes = (markdownStr: string): MatchedNode[] => {
         return walkthough(retainContent, blockParsers, inlineParsers);
       } else {
         if (retainContent.startsWith("\n")) {
+          walkthough(matchedStr, [], inlineParsers);
           return walkthough(retainContent.slice(1), blockParsers, inlineParsers);
         }
       }
@@ -88,7 +110,7 @@ export const getMatchedNodes = (markdownStr: string): MatchedNode[] => {
     let matchedIndex = -1;
 
     for (const parser of inlineParsers) {
-      const matchResult = parser.matcher(markdownStr);
+      const matchResult = matcher(markdownStr, parser.regexp);
       if (!matchResult) {
         continue;
       }
@@ -105,7 +127,7 @@ export const getMatchedNodes = (markdownStr: string): MatchedNode[] => {
     }
 
     if (matchedInlineParser) {
-      const matchResult = matchedInlineParser.matcher(markdownStr);
+      const matchResult = matcher(markdownStr, matchedInlineParser.regexp);
       if (matchResult) {
         const matchedStr = matchResult[0];
         const matchedLength = matchedStr.length;