mirror of https://github.com/open-webui/open-webui
fix: fix katex rendering
This commit is contained in:
parent
822c47c171
commit
214546399a
|
@ -1,8 +1,8 @@
|
||||||
import katex from 'katex';
|
import katex from 'katex';
|
||||||
|
|
||||||
const DELIMITER_LIST = [
|
const DELIMITER_LIST = [
|
||||||
{ left: '$$', right: '$$', display: false },
|
|
||||||
{ left: '$', right: '$', display: false },
|
{ left: '$', right: '$', display: false },
|
||||||
|
{ left: '$$', right: '$$', display: true },
|
||||||
{ left: '\\pu{', right: '}', display: false },
|
{ left: '\\pu{', right: '}', display: false },
|
||||||
{ left: '\\ce{', right: '}', display: false },
|
{ left: '\\ce{', right: '}', display: false },
|
||||||
{ left: '\\(', right: '\\)', display: false },
|
{ left: '\\(', right: '\\)', display: false },
|
||||||
|
@ -28,24 +28,24 @@ function escapeRegex(string) {
|
||||||
|
|
||||||
function generateRegexRules(delimiters) {
|
function generateRegexRules(delimiters) {
|
||||||
delimiters.forEach((delimiter) => {
|
delimiters.forEach((delimiter) => {
|
||||||
const { left, right } = delimiter;
|
const { left, right, display } = delimiter;
|
||||||
// Ensure regex-safe delimiters
|
// Ensure regex-safe delimiters
|
||||||
const escapedLeft = escapeRegex(left);
|
const escapedLeft = escapeRegex(left);
|
||||||
const escapedRight = escapeRegex(right);
|
const escapedRight = escapeRegex(right);
|
||||||
|
|
||||||
// Inline pattern - Capture group $1, token content, followed by end delimiter and normal punctuation marks.
|
if (!display) {
|
||||||
// Example: $text$
|
inlinePatterns.push(
|
||||||
inlinePatterns.push(
|
`${escapedLeft}((?:\\\\.|[^\\\\\\n])*?(?:\\\\.|[^\\\\\\n${escapedRight}]))${escapedRight}`
|
||||||
`${escapedLeft}((?:\\\\.|[^\\\\\\n])*?(?:\\\\.|[^\\\\\\n${escapedRight}]))${escapedRight}`
|
);
|
||||||
);
|
} else {
|
||||||
|
blockPatterns.push(
|
||||||
// Block pattern - Starts and ends with the delimiter on new lines. Example:
|
`${escapedLeft}((?:\\\\.|[^\\\\\\n])*?(?:\\\\.|[^\\\\\\n${escapedRight}]))${escapedRight}`
|
||||||
// $$\ncontent here\n$$
|
);
|
||||||
blockPatterns.push(`${escapedLeft}\n((?:\\\\[^]|[^\\\\])+?)\n${escapedRight}`);
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const inlineRule = new RegExp(`^(${inlinePatterns.join('|')})(?=[\\s?!.,:?!。,:]|$)`, 'u');
|
const inlineRule = new RegExp(`^(${inlinePatterns.join('|')})(?=[\\s?!.,:?!。,:]|$)`, 'u');
|
||||||
const blockRule = new RegExp(`^(${blockPatterns.join('|')})(?:\n|$)`, 'u');
|
const blockRule = new RegExp(`^(${blockPatterns.join('|')})(?=[\\s?!.,:?!。,:]|$)`, 'u');
|
||||||
|
|
||||||
return { inlineRule, blockRule };
|
return { inlineRule, blockRule };
|
||||||
}
|
}
|
||||||
|
@ -55,84 +55,105 @@ const { inlineRule, blockRule } = generateRegexRules(DELIMITER_LIST);
|
||||||
export default function (options = {}) {
|
export default function (options = {}) {
|
||||||
return {
|
return {
|
||||||
extensions: [
|
extensions: [
|
||||||
inlineKatex(options, createRenderer(options, false)),
|
inlineKatex(options),
|
||||||
blockKatex(options, createRenderer(options, true))
|
blockKatex(options),
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function createRenderer(options, newlineAfter) {
|
function katexStart(src, displayMode: boolean) {
|
||||||
return (token) =>
|
let ruleReg = displayMode ? blockRule : inlineRule;
|
||||||
katex.renderToString(token.text, { ...options, displayMode: token.displayMode }) +
|
|
||||||
(newlineAfter ? '\n' : '');
|
let indexSrc = src;
|
||||||
|
|
||||||
|
while (indexSrc) {
|
||||||
|
let index = -1;
|
||||||
|
let startIndex = -1;
|
||||||
|
let startDelimiter = '';
|
||||||
|
let endDelimiter = '';
|
||||||
|
for (let delimiter of DELIMITER_LIST) {
|
||||||
|
if (delimiter.display !== displayMode) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
startIndex = indexSrc.indexOf(delimiter.left);
|
||||||
|
if (startIndex === -1) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
index = startIndex;
|
||||||
|
startDelimiter = delimiter.left;
|
||||||
|
endDelimiter = delimiter.right;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index === -1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const f = index === 0 || indexSrc.charAt(index - 1) === ' ';
|
||||||
|
if (f) {
|
||||||
|
const possibleKatex = indexSrc.substring(index);
|
||||||
|
|
||||||
|
if (possibleKatex.match(ruleReg)) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
indexSrc = indexSrc.substring(index + startDelimiter.length).replace(endDelimiter, '');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function inlineKatex(options, renderer) {
|
function katexTokenizer(src, tokens, displayMode: boolean) {
|
||||||
const ruleReg = inlineRule;
|
let ruleReg = displayMode ? blockRule : inlineRule;
|
||||||
|
let type = displayMode ? 'blockKatex' : 'inlineKatex';
|
||||||
|
|
||||||
|
const match = src.match(ruleReg);
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
const text = match
|
||||||
|
.slice(2)
|
||||||
|
.filter((item) => item)
|
||||||
|
.find((item) => item.trim());
|
||||||
|
|
||||||
|
if (displayMode) {
|
||||||
|
console.log("block matched", match[0]);
|
||||||
|
} else {
|
||||||
|
console.log("inline matched", match[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
type,
|
||||||
|
raw: match[0],
|
||||||
|
text: text,
|
||||||
|
displayMode,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function inlineKatex(options) {
|
||||||
return {
|
return {
|
||||||
name: 'inlineKatex',
|
name: 'inlineKatex',
|
||||||
level: 'inline',
|
level: 'inline',
|
||||||
start(src) {
|
start(src) {
|
||||||
let index;
|
return katexStart(src, false);
|
||||||
let indexSrc = src;
|
|
||||||
|
|
||||||
while (indexSrc) {
|
|
||||||
index = indexSrc.indexOf('$');
|
|
||||||
if (index === -1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const f = index === 0 || indexSrc.charAt(index - 1) === ' ';
|
|
||||||
if (f) {
|
|
||||||
const possibleKatex = indexSrc.substring(index);
|
|
||||||
|
|
||||||
if (possibleKatex.match(ruleReg)) {
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
indexSrc = indexSrc.substring(index + 1).replace(/^\$+/, '');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
tokenizer(src, tokens) {
|
tokenizer(src, tokens) {
|
||||||
const match = src.match(ruleReg);
|
return katexTokenizer(src, tokens, false);
|
||||||
|
|
||||||
if (match) {
|
|
||||||
const text = match
|
|
||||||
.slice(2)
|
|
||||||
.filter((item) => item)
|
|
||||||
.find((item) => item.trim());
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'inlineKatex',
|
|
||||||
raw: match[0],
|
|
||||||
text: text
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
renderer
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function blockKatex(options, renderer) {
|
function blockKatex(options) {
|
||||||
return {
|
return {
|
||||||
name: 'blockKatex',
|
name: 'blockKatex',
|
||||||
level: 'block',
|
level: 'block',
|
||||||
tokenizer(src, tokens) {
|
start(src) {
|
||||||
const match = src.match(blockRule);
|
return katexStart(src, true);
|
||||||
|
},
|
||||||
if (match) {
|
tokenizer(src, tokens) {
|
||||||
const text = match
|
return katexTokenizer(src, tokens, true);
|
||||||
.slice(2)
|
|
||||||
.filter((item) => item)
|
|
||||||
.find((item) => item.trim());
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'blockKatex',
|
|
||||||
raw: match[0],
|
|
||||||
text: text
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
renderer
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue