feat(mdx-editor): math plugin based on katex

front_end/messages/cs.json

@@ -814,5 +814,6 @@
   "onboardingStep5SavePredictionsParagraph": "Chcete uložit provedené předpovědi?",
   "onboardingYouPredicted": "Předpověděli jste",
   "next": "Další",
-  "postCreateErrorMinSubquestions": "Skupina otázek musí obsahovat alespoň jednu podotázku"
+  "postCreateErrorMinSubquestions": "Skupina otázek musí obsahovat alespoň jednu podotázku",
+  "insertEquation": "Vložit rovnici"
 }

front_end/messages/en.json

@@ -1026,5 +1026,6 @@
   "clearCommentsAndCommunicationInfo": "Our Pros work on projects for external partners who value clear reasoning to better interpret the forecasts. We select Pros who have a history of making clear and insightful comments, and who are willing to disagree with their peers, but in a polite and respectful manner.",
   "expressionOfInterestFormMessage": "We sometimes recruit upstanding members of the community who are great at providing constructive feedback on submitted questions to become paid moderators. Fill out our <link>expression of interest form</link> if you would like to be considered.",
   "dateInputDetails": "Date and time is in your local timezone [{timezone}]",
-  "postCreateErrorMinSubquestions": "A question group must have at least one subquestion"
+  "postCreateErrorMinSubquestions": "A question group must have at least one subquestion",
+  "insertEquation": "Insert Equation"
 }

front_end/messages/es.json

@@ -827,5 +827,6 @@
   "onboardingStep5SavePredictionsParagraph": "¿Te gustaría guardar las predicciones que has realizado?",
   "onboardingYouPredicted": "Has predicho",
   "next": "Siguiente",
-  "postCreateErrorMinSubquestions": "Un grupo de preguntas debe tener al menos una subpregunta"
+  "postCreateErrorMinSubquestions": "Un grupo de preguntas debe tener al menos una subpregunta",
+  "insertEquation": "Insertar ecuación"
 }

front_end/messages/pt.json

@@ -943,5 +943,6 @@
   "onboardingStep5SavePredictionsParagraph": "Gostaria de salvar as previsões que você fez?",
   "onboardingYouPredicted": "Você previu",
   "next": "Próximo",
-  "postCreateErrorMinSubquestions": "Um grupo de perguntas deve ter pelo menos uma subpergunta"
+  "postCreateErrorMinSubquestions": "Um grupo de perguntas deve ter pelo menos uma subpergunta",
+  "insertEquation": "Inserir equação"
 }

front_end/messages/zh.json

@@ -805,5 +805,6 @@
   "onboardingStep5SavePredictionsParagraph": "您想保存所做的预测吗？",
   "onboardingYouPredicted": "您预测了",
   "next": "下一步",
-  "postCreateErrorMinSubquestions": "一个问题组必须至少包含一个子问题"
+  "postCreateErrorMinSubquestions": "一个问题组必须至少包含一个子问题",
+  "insertEquation": "插入公式"
 }

front_end/package.json

@@ -44,9 +44,12 @@
     "date-fns-tz": "^3.1.3",
     "file-saver": "^2.0.5",
     "html-react-parser": "^5.1.18",
+    "katex": "^0.16.18",
     "lexical-beautiful-mentions": "^0.1.44",
     "lodash": "^4.17.21",
     "mathjs": "^12.4.2",
+    "mdast-util-math": "^3.0.0",
+    "micromark-extension-math": "^3.1.0",
     "negotiator": "^0.6.3",
     "next": "^14.2.15",
     "next-intl": "^3.14.1",

front_end/src/app/(main)/questions/components/notebook_form.tsx

@@ -32,6 +32,12 @@ import BacktoCreate from "./back_to_create";
 import CategoryPicker from "./category_picker";
 import { createQuestionPost, updatePost } from "../actions";
 
+const TEST_MDX = `Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
+
+$$
+L = \\frac{1}{2} \\rho v^2 S C_L
+$$`;
+
 const createNotebookSchema = (t: ReturnType<typeof useTranslations>) => {
   return z.object({
     title: z
@@ -91,6 +97,8 @@ const NotebookForm: React.FC<Props> = ({
     resolver: zodResolver(notebookSchema),
   });
 
+  console.log("markdown", form.watch("markdown"));
+
   // TODO: consider refactoring this field to be part of zod schema
   const [categoriesList, setCategoriesList] = useState<Category[]>(
     post?.projects.category ? post?.projects.category : ([] as Category[])
@@ -210,7 +218,7 @@ const NotebookForm: React.FC<Props> = ({
           <MarkdownEditorField
             control={form.control}
             name={"markdown"}
-            defaultValue={post?.notebook?.markdown}
+            defaultValue={TEST_MDX}
             errors={form.formState.errors.markdown}
           />
         </div>

front_end/src/app/globals.css

@@ -203,3 +203,12 @@ a {
   padding: 0;
   border: 0;
 }
+
+/*.editor-equation {*/
+/*  cursor: default;*/
+/*  user-select: none;*/
+/*}*/
+
+/*.editor-equation.focused {*/
+/*  outline: 2px solid rgb(60, 132, 244);*/
+/*}*/

front_end/src/components/markdown_editor/embedded_math_jax/index.tsx

@@ -1,17 +1,12 @@
-import {
-  faSquareRootVariable,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  insertJsx$,
   JsxComponentDescriptor,
   readOnly$,
   useCellValue,
   useLexicalNodeRemove,
-  usePublisher,
 } from "@mdxeditor/editor";
-import React, { FC } from "react";
+import React from "react";
 
 import createEditorComponent from "@/components/markdown_editor/createJsxComponent";
 import MathJaxContent from "@/components/math_jax_content";
@@ -54,31 +49,7 @@ const EmbeddedMathJax: React.FC<MathJaxRendererProps> = ({ content }) => {
   );
 };
 
-export const EmbedMathJaxAction: FC = () => {
-  const insertJsx = usePublisher(insertJsx$);
-
-  return (
-    <Button
-      presentationType="icon"
-      variant="text"
-      onClick={() => {
-        const formula = prompt("Enter a block LaTeX formula", "\\[e=mc^2\\]");
-        if (formula) {
-          insertJsx({
-            name: COMPONENT_NAME,
-            kind: "flow",
-            props: {
-              content: formula,
-            },
-          });
-        }
-      }}
-    >
-      <FontAwesomeIcon icon={faSquareRootVariable} />
-    </Button>
-  );
-};
-
+// support legacy math rendering via embedded JSX
 export const mathJaxDescriptor: JsxComponentDescriptor = {
   name: COMPONENT_NAME,
   props: [{ name: "content", type: "string", required: true }],

front_end/src/components/markdown_editor/initialized_editor.tsx

@@ -40,16 +40,15 @@ import React, {
 import { mergeRefs } from "react-merge-refs";
 
 import { uploadImage } from "@/app/(main)/questions/actions";
-import {
-  EmbedMathJaxAction,
-  mathJaxDescriptor,
-} from "@/components/markdown_editor/embedded_math_jax";
+import { mathJaxDescriptor } from "@/components/markdown_editor/embedded_math_jax";
 import {
   embeddedQuestionDescriptor,
   EmbedQuestionAction,
 } from "@/components/markdown_editor/embedded_question";
 import { tweetDescriptor } from "@/components/markdown_editor/embedded_twitter";
 import { processMarkdown } from "@/components/markdown_editor/helpers";
+import { equationPlugin } from "@/components/markdown_editor/plugins/equation";
+import AddEquationAction from "@/components/markdown_editor/plugins/equation/components/AddEquationAction";
 import { linkPlugin } from "@/components/markdown_editor/plugins/link";
 import { mentionsPlugin } from "@/components/markdown_editor/plugins/mentions";
 import { useAuth } from "@/contexts/auth_context";
@@ -180,6 +179,7 @@ const InitializedMarkdownEditor: FC<
       disableImageResize: true,
       imageUploadHandler,
     }),
+    equationPlugin(),
   ];
 
   const editorDiffSourcePlugin = useMemo(() => {
@@ -205,7 +205,7 @@ const InitializedMarkdownEditor: FC<
           <InsertImage />
           <InsertThematicBreak />
           <InsertTable />
-          <EmbedMathJaxAction />
+          <AddEquationAction />
           <Separator />
           <EmbedQuestionAction />
         </DiffSourceToggleWrapper>