From 72735cb2f9079e43b70586bcbfa36f5f682e29df Mon Sep 17 00:00:00 2001 From: "Mr. Python" <2789762371@qq.com> Date: Tue, 8 Oct 2024 21:11:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=82=B9=E5=87=BB=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=E9=83=A8=E5=88=86=E8=87=AA=E5=8A=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=89=93=E5=9B=9E=E7=90=86=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article/articleViewer/getProcessor.ts | 29 +------------ .../article/articleViewer/highlightElement.ts | 34 +++++++++++++++ .../articleViewer/highlightFormatIssue.css | 1 + .../features/article/articleViewer/index.ts | 21 --------- .../features/article/articleViewer/index.tsx | 43 +++++++++++++++++++ src/app/features/article/index.tsx | 14 +++++- src/app/features/article/style.css | 1 + test/articleViewer/index.tsx | 5 ++- 8 files changed, 98 insertions(+), 50 deletions(-) create mode 100644 src/app/features/article/articleViewer/highlightElement.ts delete mode 100644 src/app/features/article/articleViewer/index.ts create mode 100644 src/app/features/article/articleViewer/index.tsx diff --git a/src/app/features/article/articleViewer/getProcessor.ts b/src/app/features/article/articleViewer/getProcessor.ts index a882ccd..8d3c0ac 100644 --- a/src/app/features/article/articleViewer/getProcessor.ts +++ b/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 => { diff --git a/src/app/features/article/articleViewer/highlightElement.ts b/src/app/features/article/articleViewer/highlightElement.ts new file mode 100644 index 0000000..8e072a3 --- /dev/null +++ b/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: [] + } + ] +}; diff --git a/src/app/features/article/articleViewer/highlightFormatIssue.css b/src/app/features/article/articleViewer/highlightFormatIssue.css index 9d4074b..482f8ff 100644 --- a/src/app/features/article/articleViewer/highlightFormatIssue.css +++ b/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; } } diff --git a/src/app/features/article/articleViewer/index.ts b/src/app/features/article/articleViewer/index.ts deleted file mode 100644 index aad96b6..0000000 --- a/src/app/features/article/articleViewer/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { memo } from 'react'; -import rehypeHighlight from 'rehype-highlight'; -import { visit, SKIP } from 'unist-util-visit'; -import getProcessor from './getProcessor'; - -import 'katex/dist/katex.css'; -import 'highlight.js/styles/base16/tomorrow.css'; -import './style.css'; -import './highlightFormatIssue.css'; - -const processor = getProcessor(); - -const ArticleViewer = memo(function ({ - children: markdown -}: { - children: string; -}) { - return processor.processSync(markdown).result; -}); - -export default ArticleViewer; diff --git a/src/app/features/article/articleViewer/index.tsx b/src/app/features/article/articleViewer/index.tsx new file mode 100644 index 0000000..c417509 --- /dev/null +++ b/src/app/features/article/articleViewer/index.tsx @@ -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 ( +
{ + const target = e.target as HTMLElement; + if ( + target.parentElement?.classList.contains( + 'NeedSpaceBetweenPunctuationAndChineseChar' + ) + ) { + addCommit( + HighlightElement.NeedSpaceBetweenEnglishCharAndChineseCharNote + ); + return; + } + }} + > + {markdown} +
+ ); +} diff --git a/src/app/features/article/index.tsx b/src/app/features/article/index.tsx index 8af5827..9183926 100644 --- a/src/app/features/article/index.tsx +++ b/src/app/features/article/index.tsx @@ -102,6 +102,15 @@ export default function Article() { setOtherRefuseCommit(''); updateArticle(); } + function addCommit(s: string) { + setOtherRefuseCommit( + otherRefuseCommit + + (otherRefuseCommit === '' || /。|；|，|？|！$/.test(otherRefuseCommit) + ? '' + : '；') + + s + ); + } return !fetchError ? (
@@ -118,7 +127,10 @@ export default function Article() { className="articleViewer" style={{ display: viewSourceCode ? 'none' : 'block' }} > - {details.article.content} +
) : ( diff --git a/src/app/features/article/style.css b/src/app/features/article/style.css index c27c345..a68117b 100644 --- a/src/app/features/article/style.css +++ b/src/app/features/article/style.css @@ -81,6 +81,7 @@ div.articleQueueEmpty > span { column-gap: 15px; justify-content: flex-end; align-items: center; + flex-wrap: wrap; } .viewOperatorCommit { margin-left: 1em; diff --git a/test/articleViewer/index.tsx b/test/articleViewer/index.tsx index ee53f6c..ac45638 100644 --- a/test/articleViewer/index.tsx +++ b/test/articleViewer/index.tsx @@ -57,7 +57,10 @@ function MarkdownTestComponent() { }} className="articleViewer" > - {markdownText} + console.log('Add commit: ', s)} + >