rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #80 from learnhouse/swve/eng-28-improve-mathequation-indications

Browse source 
Improve mathequation indications
This commit is contained in:
Badr B 2023-05-07 18:56:52 +02:00 • committed by GitHub
commit b88ee6643e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
View file

@ -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>) => {
@ -32,16 +33,21 @@ function MathEquationBlockComponent(props: any) {
<button onClick={() => setIsEditing(true)}>
<Edit size={15}></Edit>
</button>
<span className="pl-2">Edit</span>
</MathEqTopMenu>
)}
<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>
<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 TeX functions </span>
</>
)}
</MathEqWrapper>
</NodeViewWrapper>
@ -63,7 +69,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;