From 436ff5ac68d608930b55ee0b89c80e125b17e987 Mon Sep 17 00:00:00 2001 From: Jeremy Wiebe Date: Thu, 18 Jul 2024 16:14:09 -0700 Subject: [PATCH] Remove 'katex' package as a dependency from @khanacademy/perseus --- packages/perseus/package.json | 1 - .../src/components/__stories__/graph.stories.tsx | 1 - .../__stories__/zoomable-tex.stories.tsx | 4 ++-- packages/perseus/src/index.ts | 2 +- .../perseus/src/interactive2/movable-point.tsx | 6 +++--- packages/perseus/src/perseus-types.ts | 4 ++-- packages/perseus/src/renderer.tsx | 10 ++-------- packages/perseus/src/util/katex-preprocess.ts | 14 -------------- packages/perseus/src/util/tex-preprocess.ts | 8 ++++++++ packages/perseus/src/util/tex.ts | 4 ++-- .../src/widgets/label-image/answer-choices.tsx | 2 +- 11 files changed, 21 insertions(+), 35 deletions(-) delete mode 100644 packages/perseus/src/util/katex-preprocess.ts create mode 100644 packages/perseus/src/util/tex-preprocess.ts diff --git a/packages/perseus/package.json b/packages/perseus/package.json index 1ace755b05..714a0db662 100644 --- a/packages/perseus/package.json +++ b/packages/perseus/package.json @@ -75,7 +75,6 @@ "create-react-class": "15.6.3", "intersection-observer": "^0.12.0", "jquery": "^2.1.1", - "katex": "0.11.1", "lodash.debounce": "^4.0.8", "perseus-build-settings": "^0.4.1", "prop-types": "15.6.1", diff --git a/packages/perseus/src/components/__stories__/graph.stories.tsx b/packages/perseus/src/components/__stories__/graph.stories.tsx index c18c8f453b..92ed37d60f 100644 --- a/packages/perseus/src/components/__stories__/graph.stories.tsx +++ b/packages/perseus/src/components/__stories__/graph.stories.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import Graph from "../graph"; -// TODO(scottgrant): Katex is unavailable here. Fix! type StoryArgs = Record; diff --git a/packages/perseus/src/components/__stories__/zoomable-tex.stories.tsx b/packages/perseus/src/components/__stories__/zoomable-tex.stories.tsx index fa5e4be01b..1992575501 100644 --- a/packages/perseus/src/components/__stories__/zoomable-tex.stories.tsx +++ b/packages/perseus/src/components/__stories__/zoomable-tex.stories.tsx @@ -23,7 +23,7 @@ const ForceZoomWrapper = ({children}: Props): React.ReactElement => ( ); -export const KaTeX = (args: StoryArgs): React.ReactElement => { +export const Tex = (args: StoryArgs): React.ReactElement => { return ( @@ -31,7 +31,7 @@ export const KaTeX = (args: StoryArgs): React.ReactElement => { ); }; -export const ComplexKaTeX = (args: StoryArgs): React.ReactElement => { +export const ComplexTex = (args: StoryArgs): React.ReactElement => { return ( {" "} diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts index 153f09d254..68100997a4 100644 --- a/packages/perseus/src/index.ts +++ b/packages/perseus/src/index.ts @@ -84,7 +84,7 @@ export { */ export {default as Util} from "./util"; export {default as KhanColors} from "./util/colors"; -export {default as preprocessTex} from "./util/katex-preprocess"; +export {default as preprocessTex} from "./util/tex-preprocess"; export {registerAllWidgetsForTesting} from "./util/register-all-widgets-for-testing"; export * as SizingUtils from "./util/sizing-utils"; export { diff --git a/packages/perseus/src/interactive2/movable-point.tsx b/packages/perseus/src/interactive2/movable-point.tsx index edd03a86ae..32929c7b69 100644 --- a/packages/perseus/src/interactive2/movable-point.tsx +++ b/packages/perseus/src/interactive2/movable-point.tsx @@ -519,9 +519,9 @@ export class MovablePoint { * Displays a tooltip above the point, replacing any previous contents. If * there is no tooltip initialized, adds the tooltip. * - * If the type of contents is string, the contents will be rendered with - * KaTeX. Otherwise, the content will be assumed to be a DOM node and will - * be appended inside the tooltip. + * If the type of contents is string, the contents will be rendered as TeX + * Otherwise, the content will be assumed to be a DOM node and will be + * appended inside the tooltip. */ _showTooltip(contents) { if (!this._tooltip) { diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts index b475d6b47f..3f3358382a 100644 --- a/packages/perseus/src/perseus-types.ts +++ b/packages/perseus/src/perseus-types.ts @@ -441,7 +441,7 @@ export const PerseusExpressionAnswerFormConsidered = [ ] as const; export type PerseusExpressionAnswerForm = { - // The Katex form of the expression. e.g. "x\\cdot3=y" + // The TeX form of the expression. e.g. "x\\cdot3=y" value: string; // The Answer expression must have the same form form: boolean; @@ -874,7 +874,7 @@ export type PerseusGraphTypeRay = { } & PerseusGraphTypeCommon; export type PerseusLabelImageWidgetOptions = { - // Translatable Text; Katex representation of choices + // Translatable Text; Tex representation of choices choices: ReadonlyArray; // The URL of the image imageUrl: string; diff --git a/packages/perseus/src/renderer.tsx b/packages/perseus/src/renderer.tsx index ad02568c8f..10fd2dac47 100644 --- a/packages/perseus/src/renderer.tsx +++ b/packages/perseus/src/renderer.tsx @@ -26,7 +26,7 @@ import PerseusMarkdown from "./perseus-markdown"; import QuestionParagraph from "./question-paragraph"; import TranslationLinter from "./translation-linter"; import Util from "./util"; -import preprocessTex from "./util/katex-preprocess"; +import preprocessTex from "./util/tex-preprocess"; import WidgetContainer from "./widget-container"; import * as Widgets from "./widgets"; @@ -1289,12 +1289,6 @@ class Renderer extends React.Component { ); } if (node.type === "math") { - // Replace uses of \begin{align}...\end{align} which KaTeX doesn't - // support (yet) with \begin{aligned}...\end{aligned} which renders - // the same is supported by KaTeX. It does the same for align*. - // TODO(kevinb) update content to use aligned instead of align. - const tex = node.content.replace(/\{align[*]?\}/g, "{aligned}"); - // We render math here instead of in perseus-markdown.jsx // because we need to pass it our onRender callback. return ( @@ -1316,7 +1310,7 @@ class Renderer extends React.Component { onRender={this.props.onRender} setAssetStatus={setAssetStatus} > - {tex} + {node.content} )} diff --git a/packages/perseus/src/util/katex-preprocess.ts b/packages/perseus/src/util/katex-preprocess.ts deleted file mode 100644 index 8dd702928b..0000000000 --- a/packages/perseus/src/util/katex-preprocess.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Preprocess TeX code to convert things that KaTeX doesn't know how to handle - * to things is does. - */ - -export default (texCode: string): string => - texCode - // Replace uses of \begin{align}...\end{align} which KaTeX doesn't - // support (yet) with \begin{aligned}...\end{aligned} which renders - // the same is supported by KaTeX. It does the same for align*. - // TODO(kevinb) update content to use aligned instead of align. - .replace(/\{align[*]?\}/g, "{aligned}") - // Replace non-breaking spaces with regular spaces. - .replace(/[\u00a0]/g, " "); diff --git a/packages/perseus/src/util/tex-preprocess.ts b/packages/perseus/src/util/tex-preprocess.ts new file mode 100644 index 0000000000..f520116522 --- /dev/null +++ b/packages/perseus/src/util/tex-preprocess.ts @@ -0,0 +1,8 @@ +/** + * Preprocess TeX code to convert things that MathJax doesn't know how to handle + * to things is does. + */ +export default (texCode: string): string => + texCode + // Replace non-breaking spaces with regular spaces. + .replace(/[\u00a0]/g, " "); diff --git a/packages/perseus/src/util/tex.ts b/packages/perseus/src/util/tex.ts index cb46519141..fbbf3d2d4e 100644 --- a/packages/perseus/src/util/tex.ts +++ b/packages/perseus/src/util/tex.ts @@ -15,8 +15,8 @@ function findChildOrAdd(elem: any, className: string) { } export default { - // Process a node and add math inside of it. This attempts to use KaTeX to - // format the math, and if that fails it falls back to MathJax. + // Process a node and add math inside of it. This uses MathJax + // format the math. // // elem: The element which the math should be added to. // diff --git a/packages/perseus/src/widgets/label-image/answer-choices.tsx b/packages/perseus/src/widgets/label-image/answer-choices.tsx index 6b70d0e6ab..916861b90a 100644 --- a/packages/perseus/src/widgets/label-image/answer-choices.tsx +++ b/packages/perseus/src/widgets/label-image/answer-choices.tsx @@ -14,7 +14,7 @@ import {usePerseusI18n} from "../../components/i18n-context"; import Renderer from "../../renderer"; export type AnswerType = { - // The answer string, can be plain text or a KaTeX expression. + // The answer string, can be plain text or a TeX expression. content: string; // Whether the answer is selected. checked: boolean;