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

22
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 "katex/dist/katex.min.css";
import { InlineMath, BlockMath } from "react-katex"; import { InlineMath, BlockMath } from "react-katex";
import { Edit, Save } from "lucide-react"; import { Edit, Save } from "lucide-react";
import Link from "next/link";
function MathEquationBlockComponent(props: any) { function MathEquationBlockComponent(props: any) {
const [equation, setEquation] = React.useState(props.node.attrs.math_equation); 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 isEditable = props.extension.options.editable;
const handleEquationChange = (event: React.ChangeEvent<any>) => { const handleEquationChange = (event: React.ChangeEvent<any>) => {
@ -32,16 +33,21 @@ function MathEquationBlockComponent(props: any) {
<button onClick={() => setIsEditing(true)}> <button onClick={() => setIsEditing(true)}>
<Edit size={15}></Edit> <Edit size={15}></Edit>
</button> </button>
<span className="pl-2">Edit</span>
</MathEqTopMenu> </MathEqTopMenu>
)} )}
<BlockMath>{equation}</BlockMath> <BlockMath>{equation}</BlockMath>
{isEditing && ( {isEditing && (
<EditBar> <>
<input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" /> <EditBar>
<button onClick={() => saveEquation()}> <input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
<Save size={15}></Save> <button onClick={() => saveEquation()}>
</button> <Save size={15}></Save>
</EditBar> </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> </MathEqWrapper>
</NodeViewWrapper> </NodeViewWrapper>
@ -63,7 +69,7 @@ const MathEqWrapper = styled.div`
const MathEqTopMenu = styled.div` const MathEqTopMenu = styled.div`
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
button { button {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;