From 7dcb299d1d58e3aa6086f9638fb879db05581989 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 7 May 2023 18:54:00 +0200
Subject: [PATCH] feat: improve readability of the math extension

---
 .../MathEquationBlockComponent.tsx            | 21 ++++++++++++-------
 .../Editor/Toolbar/ToolbarButtons.tsx         |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx b/front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
index 102e00b2..1fcad8f1 100644
--- a/front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
+++ b/front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
@@ -4,10 +4,11 @@ import styled from "styled-components";
 import "katex/dist/katex.min.css";
 import { InlineMath, BlockMath } from "react-katex";
 import { Edit, Save } from "lucide-react";
+import Link from "next/link";
 
 function MathEquationBlockComponent(props: any) {
   const [equation, setEquation] = React.useState(props.node.attrs.math_equation);
-  const [isEditing, setIsEditing] = React.useState(false);
+  const [isEditing, setIsEditing] = React.useState(true);
   const isEditable = props.extension.options.editable;
 
   const handleEquationChange = (event: React.ChangeEvent<any>) => {
@@ -36,12 +37,16 @@ function MathEquationBlockComponent(props: any) {
         )}
         <BlockMath>{equation}</BlockMath>
         {isEditing && (
-          <EditBar>
-            <input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
-            <button onClick={() => saveEquation()}>
-              <Save size={15}></Save>
-            </button>
-          </EditBar>
+          <>
+            <EditBar>
+              <input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
+              <button onClick={() => saveEquation()}>
+                <Save size={15}></Save>
+              </button>
+            </EditBar>
+            <span className="pt-2 text-zinc-500 text-sm">Please refer to this <Link className="text-zinc-900 after:content-['↗']" href="https://katex.org/docs/supported.html" target="_blank"> guide</Link> for supported functions </span>
+          </>
+
         )}
       </MathEqWrapper>
     </NodeViewWrapper>
@@ -63,7 +68,7 @@ const MathEqWrapper = styled.div`
 
 const MathEqTopMenu = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   button {
     margin-left: 10px;
     cursor: pointer;
diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx
index 865342ca..3dd9fcac 100644
--- a/front/components/Editor/Toolbar/ToolbarButtons.tsx
+++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx
@@ -110,7 +110,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
               .chain()
               .focus()
               .insertContent({
-                type: "blockMathEquation",
+                type: "blockMathEquation", 
               })
               .run()
           }