From 43aa9ce174e700c58aef0292254a2fa2b8d1efdd Mon Sep 17 00:00:00 2001 From: ONLY-yours <1340921570@qq.com> Date: Wed, 22 Nov 2023 17:50:47 +0800 Subject: [PATCH] :sparkles: feat: change Highlight & Markdown into ProEditor --- package.json | 4 - src/ActionIconGroup/index.tsx | 2 +- src/EditableMessage/demos/index.tsx | 89 +- src/EditableMessage/index.tsx | 6 +- src/Highlighter/FullFeatured.tsx | 77 - src/Highlighter/SyntaxHighlighter/index.tsx | 52 - src/Highlighter/SyntaxHighlighter/style.ts | 52 - src/Highlighter/demos/FullFeatured.tsx | 40 - src/Highlighter/demos/index.tsx | 40 - src/Highlighter/index.md | 18 - src/Highlighter/index.tsx | 89 - src/Highlighter/style.ts | 96 - src/Highlighter/theme.ts | 2000 ------------------- src/Markdown/CodeBlock.tsx | 77 - src/Markdown/demos/data.ts | 88 - src/Markdown/demos/index.tsx | 24 - src/Markdown/index.md | 14 - src/Markdown/index.tsx | 66 - src/Markdown/style.ts | 166 -- src/MessageInput/demos/index.tsx | 3 +- src/MessageModal/index.tsx | 2 +- src/hooks/useHighlight.ts | 49 - src/index.ts | 8 - 23 files changed, 95 insertions(+), 2967 deletions(-) delete mode 100644 src/Highlighter/FullFeatured.tsx delete mode 100644 src/Highlighter/SyntaxHighlighter/index.tsx delete mode 100644 src/Highlighter/SyntaxHighlighter/style.ts delete mode 100644 src/Highlighter/demos/FullFeatured.tsx delete mode 100644 src/Highlighter/demos/index.tsx delete mode 100644 src/Highlighter/index.md delete mode 100644 src/Highlighter/index.tsx delete mode 100644 src/Highlighter/style.ts delete mode 100644 src/Highlighter/theme.ts delete mode 100644 src/Markdown/CodeBlock.tsx delete mode 100644 src/Markdown/demos/data.ts delete mode 100644 src/Markdown/demos/index.tsx delete mode 100644 src/Markdown/index.md delete mode 100644 src/Markdown/index.tsx delete mode 100644 src/Markdown/style.ts delete mode 100644 src/hooks/useHighlight.ts diff --git a/package.json b/package.json index 973d5023..5b9e609c 100644 --- a/package.json +++ b/package.json @@ -76,10 +76,6 @@ "react-error-boundary": "^4", "react-intersection-observer": "^9.5.2", "react-layout-kit": "^1.7.1", - "react-markdown": "^8", - "rehype-katex": "^6", - "remark-gfm": "^3", - "remark-math": "^5", "shikiji": "^0", "swr": "^2", "use-merge-value": "^1", diff --git a/src/ActionIconGroup/index.tsx b/src/ActionIconGroup/index.tsx index 221490a5..0755b9e7 100644 --- a/src/ActionIconGroup/index.tsx +++ b/src/ActionIconGroup/index.tsx @@ -60,7 +60,7 @@ const ActionIconGroup = memo( items = [], placement, spotlight = false, - direction = 'column', + direction = 'row', dropdownMenu = [], onActionClick, className, diff --git a/src/EditableMessage/demos/index.tsx b/src/EditableMessage/demos/index.tsx index 072b52e8..f26fb8d9 100644 --- a/src/EditableMessage/demos/index.tsx +++ b/src/EditableMessage/demos/index.tsx @@ -3,7 +3,94 @@ import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; import { button } from 'leva'; import { useState } from 'react'; -import { content } from '../../Markdown/demos/data'; +export const content = `# This is an H1 +## This is an H2 +### This is an H3 +#### This is an H4 +##### This is an H5 + +The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text. + +--- + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. +> +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +--- + +an example | *an example* | **an example** + +--- + +1. Bird +1. McHale +1. Parish + 1. Bird + 1. McHale + 1. Parish + +--- + +- Red +- Green +- Blue + - Red + - Green + - Blue + +--- + +This is [an example](http://example.com/ "Title") inline link. + + + + +| title | title | title | +| --- | --- | --- | +| content | content | content | + + +\`\`\`bash +$ pnpm install +\`\`\` + + +\`\`\`javascript +import { renderHook } from '@testing-library/react-hooks'; +import { act } from 'react-dom/test-utils'; +import { useDropNodeOnCanvas } from './useDropNodeOnCanvas'; +\`\`\` + +--- + +以下是一段Markdown格式的LaTeX数学公式： + +我是一个行内公式：$E=mc^2$ + +我是一个独立公式： +$$ +\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n +$$ + +我是一个带有分式的公式： +$$ +\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k} +$$ + +我是一个带有上下标的公式： +$$ +x^{2} + y^{2} = r^{2} +$$ + +我是一个带有积分符号的公式： +$$ +\\int_{a}^{b} f(x) \\, dx +$$ +`; export default () => { const [openModal, setOpenModal] = useState(false); diff --git a/src/EditableMessage/index.tsx b/src/EditableMessage/index.tsx index f34f94ac..a0ceb867 100644 --- a/src/EditableMessage/index.tsx +++ b/src/EditableMessage/index.tsx @@ -1,9 +1,9 @@ import { CSSProperties, memo } from 'react'; import useControlledState from 'use-merge-value'; -import Markdown from '@/Markdown'; import MessageInput, { type MessageInputProps } from '@/MessageInput'; import MessageModal, { type MessageModalProps } from '@/MessageModal'; +import { Markdown } from '@ant-design/pro-editor'; export interface EditableMessageProps { /** @@ -136,7 +136,9 @@ const EditableMessage = memo( ) : ( ({ - label: item, - value: item.toLowerCase(), -})); - -export const Highlighter = memo( - ({ children, language = 'markdown', className, style, ...props }) => { - const [expand, setExpand] = useState(true); - const [lang, setLang] = useState(language); - const { styles, cx } = useStyles('block'); - const container = cx(styles.container, className); - - return ( -
- - setExpand(!expand)} - size={{ blockSize: 24, fontSize: 14, strokeWidth: 3 }} - /> - - -