diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx index e62a80d92..7cde029db 100644 --- a/src/apps/settings-modal/UxLabsSettings.tsx +++ b/src/apps/settings-modal/UxLabsSettings.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { FormControl, Typography } from '@mui/joy'; import EditNoteIcon from '@mui/icons-material/EditNote'; import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded'; +import FunctionsIcon from '@mui/icons-material/Functions'; import ShortcutIcon from '@mui/icons-material/Shortcut'; import SpeedIcon from '@mui/icons-material/Speed'; @@ -24,6 +25,7 @@ export function UxLabsSettings() { labsAutoHideComposer, setLabsAutoHideComposer, labsShowShortcutBar, setLabsShowShortcutBar, labsComposerAttachmentsInline, setLabsComposerAttachmentsInline, + labsSingleDollarLatex, setLabsSingleDollarLatex, } = useUXLabsStore(); return <> @@ -39,6 +41,17 @@ export function UxLabsSettings() { checked={labsLosslessImages} onChange={setLabsPreserveLosslessImages} /> + Dollar Inline LaTeX} description={labsSingleDollarLatex ? 'Enabled' : 'Disabled'} + tooltipWarning={labsSingleDollarLatex} + tooltip={<> + Renders single-dollar $...$ as inline LaTeX math formulas, in addition to the default {'\\\\(...)\\\\)'} and $$...$$ formats. +
+ WARNING: This may cause false positives - currency values like $10 or stock symbols like $AAPL could be incorrectly rendered as math. + } + checked={labsSingleDollarLatex} onChange={setLabsSingleDollarLatex} + /> + Unlock Refresh} description={labsHighPerformance ? 'Unlocked' : 'Default'} tooltipWarning={labsHighPerformance} diff --git a/src/common/stores/store-ux-labs.ts b/src/common/stores/store-ux-labs.ts index c9dc4b006..9cb1a54dc 100644 --- a/src/common/stores/store-ux-labs.ts +++ b/src/common/stores/store-ux-labs.ts @@ -25,6 +25,9 @@ interface UXLabsStore { labsLosslessImages: boolean; setLabsPreserveLosslessImages: (labsLosslessImages: boolean) => void; + labsSingleDollarLatex: boolean; + setLabsSingleDollarLatex: (labsSingleDollarLatex: boolean) => void; + } export const useUXLabsStore = create()( @@ -46,6 +49,9 @@ export const useUXLabsStore = create()( labsLosslessImages: false, setLabsPreserveLosslessImages: (labsLosslessImages: boolean) => set({ labsLosslessImages }), + labsSingleDollarLatex: false, + setLabsSingleDollarLatex: (labsSingleDollarLatex: boolean) => set({ labsSingleDollarLatex }), + }), { name: 'app-ux-labs', diff --git a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx index 65af1dd9f..e83902adf 100644 --- a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx +++ b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx @@ -12,6 +12,7 @@ import { Box, Chip } from '@mui/joy'; import { copyToClipboard } from '~/common/util/clipboardUtils'; import { downloadBlob } from '~/common/util/downloadUtils'; +import { useUXLabsStore } from '~/common/stores/store-ux-labs'; import { CustomARenderer } from './CustomARenderer'; import { remarkTableCellBreaks } from './tableBreaks.remark'; @@ -208,18 +209,18 @@ const reactMarkdownComponents = { // math/inlineMath components are not needed, rehype-katex handles this automatically } as ReactMarkdownComponents; -const remarkPluginsStable: UnifiedPluggable[] = [ +const remarkPluginsBase: UnifiedPluggable[] = [ remarkGfm, // GitHub Flavored Markdown remarkMark, // Mark-Highlight, for ==yellow== remarkTableCellBreaks, // Convert
HTML tags inside tables to break nodes (for line breaks in table cells) - [remarkMath, { - /** - * NOTE: this could be configurable, some users reported liking single dollar signs math, despite even the official - * LaTeX documentation recommending against it: https://docs.mathjax.org/en/latest/input/tex/delimiters.html - * So in the future this could be a user setting. - */ - singleDollarTextMath: false, - }], + [remarkMath, { singleDollarTextMath: false }], +]; + +const remarkPluginsSingleDollar: UnifiedPluggable[] = [ + remarkGfm, + remarkMark, + remarkTableCellBreaks, + [remarkMath, { singleDollarTextMath: true }], ]; const rehypePluginsStable: UnifiedPluggable[] = [ @@ -275,10 +276,14 @@ function preprocessMarkdown(markdownText: string) { } export default function CustomMarkdownRenderer(props: { content: string, disablePreprocessor?: boolean }) { + + // external state + const singleDollarLatex = useUXLabsStore((s) => s.labsSingleDollarLatex); + return ( {props.disablePreprocessor ? props.content : preprocessMarkdown(props.content)}