支持点击高亮部分自动添加打回理由

Author: Mr-Python-in-China

src/app/features/article/articleViewer/getProcessor.ts

@@ -4,6 +4,7 @@ import rehypeHighlight from 'rehype-highlight';
 import { visit, SKIP } from 'unist-util-visit';
 import luoguMarkdownProcessor from 'lg-markdown-processor';
 import { Element, ElementContent, Text } from 'hast';
+import * as HighlightElement from './highlightElement';
 
 function checkClass(element: Element, target: string) {
   let className = element.properties['className'];
@@ -16,7 +17,7 @@ function checkClass(element: Element, target: string) {
 }
 
 const rehypeReactConfig: import('hast-util-to-jsx-runtime').Options = {
-  Fragment: 'article',
+  Fragment: props.Fragment,
   // @ts-expect-error
   jsx: props.jsx,
   // @ts-expect-error
@@ -36,32 +37,6 @@ namespace CharTest {
   export const Punctuation = /\p{P}/u;
   export const EnglishChar = /[a-zA-Z]/;
 }
-namespace HighlightElement {
-  export const Space: Element = {
-    type: 'element',
-    tagName: 'span',
-    properties: { className: ['articleHighlight', 'Space'] },
-    children: [{ type: 'text', value: ' ' }]
-  };
-  export const NeedSpaceBetweenEnglishCharAndChineseChar: Element = {
-    type: 'element',
-    tagName: 'span',
-    properties: {
-      className: [
-        'articleHighlight',
-        'NeedSpaceBetweenPunctuationAndChineseChar'
-      ]
-    },
-    children: [
-      {
-        type: 'element',
-        tagName: 'div',
-        properties: {},
-        children: []
-      }
-    ]
-  };
-}
 function hastHighlightSpace() {
   return (tree: import('hast').Root) =>
     visit(tree, 'element', element => {

src/app/features/article/articleViewer/highlightElement.ts

@@ -0,0 +1,34 @@
+import { Element } from 'hast';
+
+function genTitle(title: string) {
+  return `可能存在的问题：${title}`;
+}
+
+export const Space: Element = {
+  type: 'element',
+  tagName: 'span',
+  properties: { className: ['articleHighlight', 'Space'] },
+  children: [{ type: 'text', value: ' ' }]
+};
+
+export const NeedSpaceBetweenEnglishCharAndChineseCharNote =
+  '【中文】与【英文】字符间需要用空格隔开';
+export const NeedSpaceBetweenEnglishCharAndChineseChar: Element = {
+  type: 'element',
+  tagName: 'span',
+  properties: {
+    className: [
+      'articleHighlight',
+      'NeedSpaceBetweenPunctuationAndChineseChar'
+    ],
+    title: genTitle(NeedSpaceBetweenEnglishCharAndChineseCharNote)
+  },
+  children: [
+    {
+      type: 'element',
+      tagName: 'div',
+      properties: {},
+      children: []
+    }
+  ]
+};

src/app/features/article/articleViewer/highlightFormatIssue.css

@@ -13,5 +13,6 @@
     height: 24px;
     background-image: url(assets/needSpaceBetweenPunctuationAndChineseChar.svg);
     background-size: 100% 100%;
+    cursor: pointer;
   }
 }

src/app/features/article/articleViewer/index.ts

@@ -0,0 +1,43 @@
+import React, { createElement, memo } from 'react';
+import getProcessor from './getProcessor';
+import * as HighlightElement from './highlightElement';
+
+import 'katex/dist/katex.css';
+import 'highlight.js/styles/base16/tomorrow.css';
+import './style.css';
+import './highlightFormatIssue.css';
+
+const processor = getProcessor();
+
+const ArticlerRenderer = memo(
+  ({ children: markdown }: { children: string }) =>
+    processor.processSync(markdown).result
+);
+
+export default function ArticleViewer({
+  markdown,
+  addCommit
+}: {
+  markdown: string;
+  addCommit: (content: string) => void;
+}) {
+  return (
+    <article
+      onClick={e => {
+        const target = e.target as HTMLElement;
+        if (
+          target.parentElement?.classList.contains(
+            'NeedSpaceBetweenPunctuationAndChineseChar'
+          )
+        ) {
+          addCommit(
+            HighlightElement.NeedSpaceBetweenEnglishCharAndChineseCharNote
+          );
+          return;
+        }
+      }}
+    >
+      <ArticlerRenderer>{markdown}</ArticlerRenderer>
+    </article>
+  );
+}

src/app/features/article/articleViewer/index.tsx

@@ -102,6 +102,15 @@ export default function Article() {
     setOtherRefuseCommit('');
     updateArticle();
   }
+  function addCommit(s: string) {
+    setOtherRefuseCommit(
+      otherRefuseCommit +
+        (otherRefuseCommit === '' || /。|；|，|？|！$/.test(otherRefuseCommit)
+          ? ''
+          : '；') +
+        s
+    );
+  }
 
   return !fetchError ? (
     <div className="articleFeature">
@@ -118,7 +127,10 @@ export default function Article() {
               className="articleViewer"
               style={{ display: viewSourceCode ? 'none' : 'block' }}
             >
-              <ArticleViewer>{details.article.content}</ArticleViewer>
+              <ArticleViewer
+                markdown={details.article.content}
+                addCommit={addCommit}
+              />
             </div>
           </>
         ) : (

src/app/features/article/index.tsx

@@ -81,6 +81,7 @@ div.articleQueueEmpty > span {
   column-gap: 15px;
   justify-content: flex-end;
   align-items: center;
+  flex-wrap: wrap;
 }
 .viewOperatorCommit {
   margin-left: 1em;

src/app/features/article/style.css

@@ -57,7 +57,10 @@ function MarkdownTestComponent() {
           }}
           className="articleViewer"
         >
-          <ArticleViewer>{markdownText}</ArticleViewer>
+          <ArticleViewer
+            markdown={markdownText}
+            addCommit={s => console.log('Add commit: ', s)}
+          ></ArticleViewer>
         </div>
       </div>
     </div>