fix: 公式显示问题 #239
This commit is contained in:
parent
5347f63aa8
commit
2cbb4c8831
@ -104,6 +104,7 @@
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-persist": "^6.0.0",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"rehype-mathjax": "^6.0.0",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
|
||||
@ -226,6 +226,7 @@
|
||||
"messages.input.send_shortcuts": "Send shortcuts",
|
||||
"messages.input.paste_long_text_as_file": "Paste long text as file",
|
||||
"messages.markdown_rendering_input_message": "Markdown render input msg",
|
||||
"messages.math_engine": "Math render engine",
|
||||
"general.title": "General Settings",
|
||||
"general.user_name": "User Name",
|
||||
"general.user_name.placeholder": "Enter your name",
|
||||
|
||||
@ -226,6 +226,7 @@
|
||||
"messages.input.send_shortcuts": "发送快捷键",
|
||||
"messages.input.paste_long_text_as_file": "长文本粘贴为文件",
|
||||
"messages.markdown_rendering_input_message": "Markdown 渲染输入消息",
|
||||
"messages.math_engine": "数学公式引擎",
|
||||
"general.title": "常规设置",
|
||||
"general.user_name": "用户名",
|
||||
"general.user_name.placeholder": "请输入用户名",
|
||||
|
||||
@ -225,7 +225,8 @@
|
||||
"messages.input.show_estimated_tokens": "顯示預估輸入 Token 數",
|
||||
"messages.input.send_shortcuts": "發送快捷鍵",
|
||||
"messages.input.paste_long_text_as_file": "將長文本貼上為檔案",
|
||||
"messages.markdown_rendering_input_message": "Markdown 渲染輸入訊息",
|
||||
"messages.math_engine": "Markdown 渲染輸入訊息",
|
||||
"messages.math_render_engine": "數學公式引擎",
|
||||
"general.title": "一般設定",
|
||||
"general.user_name": "使用者名稱",
|
||||
"general.user_name.placeholder": "輸入您的名稱",
|
||||
|
||||
@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ReactMarkdown, { Components } from 'react-markdown'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
// @ts-ignore next-line
|
||||
import rehypeMathjax from 'rehype-mathjax'
|
||||
import rehypeRaw from 'rehype-raw'
|
||||
@ -23,7 +24,9 @@ interface Props {
|
||||
|
||||
const Markdown: FC<Props> = ({ message }) => {
|
||||
const { t } = useTranslation()
|
||||
const { renderInputMessageAsMarkdown } = useSettings()
|
||||
const { renderInputMessageAsMarkdown, mathEngine } = useSettings()
|
||||
|
||||
const rehypeMath = mathEngine === 'KaTeX' ? rehypeKatex : rehypeMathjax
|
||||
|
||||
const messageContent = useMemo(() => {
|
||||
const empty = isEmpty(message.content)
|
||||
@ -34,8 +37,8 @@ const Markdown: FC<Props> = ({ message }) => {
|
||||
|
||||
const rehypePlugins = useMemo(() => {
|
||||
const hasUnsafeElements = /<(input|textarea|select)/i.test(messageContent)
|
||||
return hasUnsafeElements ? [rehypeMathjax] : [rehypeRaw, rehypeMathjax]
|
||||
}, [messageContent])
|
||||
return hasUnsafeElements ? [rehypeMath] : [rehypeRaw, rehypeMath]
|
||||
}, [messageContent, rehypeMath])
|
||||
|
||||
if (message.role === 'user' && !renderInputMessageAsMarkdown) {
|
||||
return <p style={{ marginBottom: 5, whiteSpace: 'pre-wrap' }}>{messageContent}</p>
|
||||
|
||||
@ -9,6 +9,7 @@ import { useAppDispatch } from '@renderer/store'
|
||||
import {
|
||||
setCodeShowLineNumbers,
|
||||
setFontSize,
|
||||
setMathEngine,
|
||||
setMessageFont,
|
||||
setPasteLongTextAsFile,
|
||||
setRenderInputMessageAsMarkdown,
|
||||
@ -46,7 +47,8 @@ const SettingsTab: FC<Props> = (props) => {
|
||||
setSendMessageShortcut,
|
||||
pasteLongTextAsFile,
|
||||
renderInputMessageAsMarkdown,
|
||||
codeShowLineNumbers
|
||||
codeShowLineNumbers,
|
||||
mathEngine
|
||||
} = useSettings()
|
||||
|
||||
const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
|
||||
@ -213,6 +215,18 @@ const SettingsTab: FC<Props> = (props) => {
|
||||
/>
|
||||
</SettingRow>
|
||||
<SettingDivider />
|
||||
<SettingRow>
|
||||
<SettingRowTitleSmall>{t('settings.messages.math_engine')}</SettingRowTitleSmall>
|
||||
<Select
|
||||
value={mathEngine}
|
||||
onChange={(value) => dispatch(setMathEngine(value))}
|
||||
style={{ width: 100 }}
|
||||
size="small">
|
||||
<Select.Option value="KaTeX">KaTeX</Select.Option>
|
||||
<Select.Option value="MathJax">MathJax</Select.Option>
|
||||
</Select>
|
||||
</SettingRow>
|
||||
<SettingDivider />
|
||||
<SettingRow>
|
||||
<SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
|
||||
</SettingRow>
|
||||
@ -264,17 +278,18 @@ const SettingsTab: FC<Props> = (props) => {
|
||||
<SettingDivider />
|
||||
<SettingRow>
|
||||
<SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
|
||||
<Select
|
||||
size="small"
|
||||
value={sendMessageShortcut}
|
||||
menuItemSelectedIcon={<CheckOutlined />}
|
||||
options={[
|
||||
{ value: 'Enter', label: 'Enter' },
|
||||
{ value: 'Shift+Enter', label: `Shift + Enter` }
|
||||
]}
|
||||
onChange={(value) => setSendMessageShortcut(value)}
|
||||
style={{ width: 100 }}
|
||||
/>
|
||||
</SettingRow>
|
||||
<Select
|
||||
value={sendMessageShortcut}
|
||||
menuItemSelectedIcon={<CheckOutlined />}
|
||||
options={[
|
||||
{ value: 'Enter', label: `Enter ${t('chat.input.send')}` },
|
||||
{ value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
|
||||
]}
|
||||
onChange={(value) => setSendMessageShortcut(value)}
|
||||
style={{ width: '100%', marginTop: 10 }}
|
||||
/>
|
||||
</Container>
|
||||
</Scrollbar>
|
||||
)
|
||||
@ -286,6 +301,7 @@ const Container = styled.div`
|
||||
flex-direction: column;
|
||||
padding-bottom: 10px;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
const Label = styled.p`
|
||||
|
||||
@ -22,7 +22,7 @@ const persistedReducer = persistReducer(
|
||||
{
|
||||
key: 'cherry-studio',
|
||||
storage,
|
||||
version: 34,
|
||||
version: 35,
|
||||
blacklist: ['runtime'],
|
||||
migrate
|
||||
},
|
||||
|
||||
@ -610,6 +610,10 @@ const migrateConfig = {
|
||||
})
|
||||
})
|
||||
return state
|
||||
},
|
||||
'35': (state: RootState) => {
|
||||
state.settings.mathEngine = 'KaTeX'
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ export interface SettingsState {
|
||||
manualUpdateCheck: boolean
|
||||
renderInputMessageAsMarkdown: boolean
|
||||
codeShowLineNumbers: boolean
|
||||
mathEngine: 'MathJax' | 'KaTeX'
|
||||
// webdav 配置 host, user, pass, path
|
||||
webdavHost: string
|
||||
webdavUser: string
|
||||
@ -50,6 +51,7 @@ const initialState: SettingsState = {
|
||||
manualUpdateCheck: false,
|
||||
renderInputMessageAsMarkdown: true,
|
||||
codeShowLineNumbers: false,
|
||||
mathEngine: 'MathJax',
|
||||
webdavHost: '',
|
||||
webdavUser: '',
|
||||
webdavPass: '',
|
||||
@ -135,6 +137,9 @@ const settingsSlice = createSlice({
|
||||
},
|
||||
setCodeShowLineNumbers: (state, action: PayloadAction<boolean>) => {
|
||||
state.codeShowLineNumbers = action.payload
|
||||
},
|
||||
setMathEngine: (state, action: PayloadAction<'MathJax' | 'KaTeX'>) => {
|
||||
state.mathEngine = action.payload
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -164,7 +169,8 @@ export const {
|
||||
setWebdavUser,
|
||||
setWebdavPass,
|
||||
setWebdavPath,
|
||||
setCodeShowLineNumbers
|
||||
setCodeShowLineNumbers,
|
||||
setMathEngine
|
||||
} = settingsSlice.actions
|
||||
|
||||
export default settingsSlice.reducer
|
||||
|
||||
42
yarn.lock
42
yarn.lock
@ -2355,6 +2355,7 @@ __metadata:
|
||||
react-syntax-highlighter: "npm:^15.5.0"
|
||||
redux: "npm:^5.0.1"
|
||||
redux-persist: "npm:^6.0.0"
|
||||
rehype-katex: "npm:^7.0.1"
|
||||
rehype-mathjax: "npm:^6.0.0"
|
||||
rehype-raw: "npm:^7.0.0"
|
||||
remark-gfm: "npm:^4.0.0"
|
||||
@ -5988,6 +5989,32 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"hast-util-from-html-isomorphic@npm:^2.0.0":
|
||||
version: 2.0.0
|
||||
resolution: "hast-util-from-html-isomorphic@npm:2.0.0"
|
||||
dependencies:
|
||||
"@types/hast": "npm:^3.0.0"
|
||||
hast-util-from-dom: "npm:^5.0.0"
|
||||
hast-util-from-html: "npm:^2.0.0"
|
||||
unist-util-remove-position: "npm:^5.0.0"
|
||||
checksum: 10c0/fc68d9245e794483a802d5c85a9f6c25959e00db78cc796411efc965134f3206f9cc9fa38134572ea781ad74663e801f1f83202007b208e27a770855566a62b6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"hast-util-from-html@npm:^2.0.0":
|
||||
version: 2.0.3
|
||||
resolution: "hast-util-from-html@npm:2.0.3"
|
||||
dependencies:
|
||||
"@types/hast": "npm:^3.0.0"
|
||||
devlop: "npm:^1.1.0"
|
||||
hast-util-from-parse5: "npm:^8.0.0"
|
||||
parse5: "npm:^7.0.0"
|
||||
vfile: "npm:^6.0.0"
|
||||
vfile-message: "npm:^4.0.0"
|
||||
checksum: 10c0/993ef707c1a12474c8d4094fc9706a72826c660a7e308ea54c50ad893353d32e139b7cbc67510c2e82feac572b320e3b05aeb13d0f9c6302d61261f337b46764
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"hast-util-from-parse5@npm:^8.0.0":
|
||||
version: 8.0.1
|
||||
resolution: "hast-util-from-parse5@npm:8.0.1"
|
||||
@ -10466,6 +10493,21 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"rehype-katex@npm:^7.0.1":
|
||||
version: 7.0.1
|
||||
resolution: "rehype-katex@npm:7.0.1"
|
||||
dependencies:
|
||||
"@types/hast": "npm:^3.0.0"
|
||||
"@types/katex": "npm:^0.16.0"
|
||||
hast-util-from-html-isomorphic: "npm:^2.0.0"
|
||||
hast-util-to-text: "npm:^4.0.0"
|
||||
katex: "npm:^0.16.0"
|
||||
unist-util-visit-parents: "npm:^6.0.0"
|
||||
vfile: "npm:^6.0.0"
|
||||
checksum: 10c0/73c770319536128b75055d904d06951789d00a0552c11724c0dac2e244dcb21041630552d118a11cc42233fdcd1bfee525e78a0020fde635bd916cceb281dfb1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"rehype-mathjax@npm:^6.0.0":
|
||||
version: 6.0.0
|
||||
resolution: "rehype-mathjax@npm:6.0.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user