Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

trying different markdown library for proper list styling

Browse source
This commit is contained in:
Daniel Avila 2023-02-24 23:16:19 -05:00
parent 34ebd97c9d
commit 78c9f3dc74
8 changed files with 4352 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/Messages/TextWrapper.jsx
View file

@ -1,23 +1,14 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import supersub from 'remark-supersub'
// import ReactMarkdown from 'react-markdown';
// import supersub from 'remark-supersub'
import Markdown from 'markdown-to-jsx';
import Embed from './Embed';
import Highlight from './Highlight';
import regexSplit from '~/utils/regexSplit';
import { languages, wrapperRegex } from '~/utils';
const { codeRegex, inLineRegex, matchRegex, languageMatch, newLineMatch } = wrapperRegex;
const mdOptions = { wrapper: React.Fragment, forceWrapper: true };
// original function
// const inLineWrap = (parts) =>
// parts.map((part, i) => {
// if (part.match(matchRegex)) {
// return <code key={i} >{part.slice(1, -1)}</code>;
// } else {
// // return <p key={i}>{part}</p>;
// // return part;
// return part.includes('`') ? part : <ReactMarkdown key={i}>{part}</ReactMarkdown>;
// }
// });
const inLineWrap = (parts) => {
let previousElement = null;
@ -27,10 +18,11 @@ const inLineWrap = (parts) => {
if (previousElement && typeof previousElement !== 'string') {
// Append code element as a child to previous non-code element
previousElement = (
<ReactMarkdown remarkPlugins={[supersub]} key={i}>
// <ReactMarkdown remarkPlugins={[supersub]} key={i}>
<Markdown options={mdOptions} key={i}>
{previousElement}
{codeElement}
</ReactMarkdown>
</Markdown>
);
return previousElement;
} else {
@ -46,15 +38,11 @@ const inLineWrap = (parts) => {
export default function TextWrapper({ text }) {
// append triple backticks to the end of the text only if singular found and language found
if (text.match(/```/g)?.length === 1 && text.match(languageMatch)) {
text += '```';
text += '\n```';
}
if (text.match(codeRegex)) {
// if (text.includes('```')) {
// const parts = text.split(codeRegex);
const parts = regexSplit(text);
// console.log(parts);
const codeParts = parts.map((part, i) => {
if (part.match(codeRegex)) {
let language = 'javascript';
@ -84,15 +72,20 @@ export default function TextWrapper({ text }) {
return inLineWrap(innerParts);
} else {
// return part;
return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
// return <ReactMarkdown remarkPlugins={[supersub]} key={i}>{part}</ReactMarkdown>;
return <Markdown options={mdOptions} key={i}>{part}</Markdown>
}
});
return <>{codeParts}</>; // return the wrapped text
} else {
} else if (text.match(matchRegex)) {
// map over the parts and wrap any text between tildes with <code> tags
const parts = text.split(matchRegex);
const codeParts = inLineWrap(parts);
return <>{codeParts}</>; // return the wrapped text
} else {
// return <ReactMarkdown remarkPlugins={[supersub]}>{text}</ReactMarkdown>;
// return text
return <Markdown options={mdOptions}>{text}</Markdown>;
}
}